Support paste treepath when creating a new file or updating the file …

…name (#23209)

Close #23204 

Quick Demo:


https://user-images.githubusercontent.com/17645053/222058727-ad30a37c-f0ac-4184-9946-a71fcee473b5.mov

---------

Co-authored-by: delvh <leon@kske.dev>

web_src/js/features/repo-editor.js

@@ -91,24 +91,27 @@ export function initRepoEditor() {
  $('#commit-button').text($(this).attr('button_text'));
  });
 
+ const joinTreePath = ($fileNameEl) => {
+ const parts = [];
+ $('.breadcrumb span.section').each(function () {
+ const element = $(this);
+ if (element.find('a').length) {
+ parts.push(element.find('a').text());
+ } else {
+ parts.push(element.text());
+ }
+ });
+ if ($fileNameEl.val()) parts.push($fileNameEl.val());
+ $('#tree_path').val(parts.join('/'));
+ };
+
  const $editFilename = $('#file-name');
- $editFilename.on('keyup', function (e) {
- const $section = $('.breadcrumb span.section');
- const $divider = $('.breadcrumb div.divider');
- let value;
- let parts;
+ $editFilename.on('input', function () {
+ const parts = $(this).val().split('/');
 
- if (e.keyCode === 8 && getCursorPosition($(this)) === 0 && $section.length > 0) {
- value = $section.last().find('a').text();
- $(this).val(value + $(this).val());
- $(this)[0].setSelectionRange(value.length, value.length);
- $section.last().remove();
- $divider.last().remove();
- }
- if (e.keyCode === 191) {
- parts = $(this).val().split('/');
+ if (parts.length > 1) {
  for (let i = 0; i < parts.length; ++i) {
- value = parts[i];
+ const value = parts[i];
  if (i < parts.length - 1) {
  if (value.length) {
  $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(this));
@@ -117,21 +120,28 @@ export function initRepoEditor() {
  } else {
  $(this).val(value);
  }
- $(this)[0].setSelectionRange(0, 0);
+ this.setSelectionRange(0, 0);
  }
  }
- parts = [];
- $('.breadcrumb span.section').each(function () {
- const element = $(this);
- if (element.find('a').length) {
- parts.push(element.find('a').text());
- } else {
- parts.push(element.text());
- }
- });
- if ($(this).val()) parts.push($(this).val());
- $('#tree_path').val(parts.join('/'));
- }).trigger('keyup');
+
+ joinTreePath($(this));
+ });
+
+ $editFilename.on('keydown', function (e) {
+ const $section = $('.breadcrumb span.section');
+
+ // Jump back to last directory once the filename is empty
+ if (e.code === 'Backspace' && getCursorPosition($(this)) === 0 && $section.length > 0) {
+ e.preventDefault();
+ const $divider = $('.breadcrumb div.divider');
+ const value = $section.last().find('a').text();
+ $(this).val(value + $(this).val());
+ this.setSelectionRange(value.length, value.length);
+ $section.last().remove();
+ $divider.last().remove();
+ joinTreePath($(this));
+ }
+ });
 
  const $editArea = $('.repository.editor textarea#edit_area');
  if (!$editArea.length) return;