Repository: go-gitea/gitea
File: web_src/js/features/repo-editor.ts (TypeScript)

Code before:
            const dividerElement = createElementFromHTML(
              html`<div class="breadcrumb-divider">/</div>`,
            );
            links.push(linkElement);
            dividers.push(dividerElement);
            filenameInput.before(linkElement);
            filenameInput.before(dividerElement);
          }
        } else {
          filenameInput.value = value;
        }
        this.setSelectionRange(0, 0);
        containSpace = containSpace || (trimValue !== value && trimValue !== '');
      }
    }
    containSpace = containSpace || Array.from(links).some((link) => {
      const value = link.querySelector('a')!.textContent;
      return value.trim() !== value;
    });
    containSpace = containSpace || parts[parts.length - 1].trim() !== parts[parts.length - 1];
    if (containSpace) {
      if (!warningDiv) {
        warningDiv = document.createElement('div');
        warningDiv.classList.add('ui', 'warning', 'message', 'flash-message', 'flash-warning', 'space-related');
        warningDiv.innerHTML = html`<p>File path contains leading or trailing whitespace.</p>`;
        // Add 'tw-block' because display is set to 'none' in fomantic/build/semantic.css
        warningDiv.classList.add('tw-block');
        const inputContainer = document.querySelector('.repo-editor-header')!;
        inputContainer.insertAdjacentElement('beforebegin', warningDiv);
      }
      showElem(warningDiv);
    } else if (warningDiv) {
      hideElem(warningDiv);
    }
    joinTreePath();
  });
  filenameInput.addEventListener('keydown', function (e) {
    const sections = queryElems(document, '.breadcrumb span.section');
    const dividers = queryElems(document, '.breadcrumb .breadcrumb-divider');
    // Jump back to last directory once the filename is empty
    if (e.code === 'Backspace' && filenameInput.selectionStart === 0 && sections.length > 0) {
      e.preventDefault();
      const lastSection = sections[sections.length - 1];
      const lastDivider = dividers.length ? dividers[dividers.length - 1] : null;
      const value = lastSection.querySelector('a')!.textContent;
      filenameInput.value = value + filenameInput.value;
      this.setSelectionRange(value.length, value.length);
      lastDivider?.remove();
      lastSection.remove();
      joinTreePath();
    }

Review comment (suggestion):
```suggestion
        // Change to `block` display because it is set to 'none' in fomantic/build/semantic.css
```

Code after:
            const dividerElement = createElementFromHTML(
              html`<div class="breadcrumb-divider">/</div>`,
            );
            links.push(linkElement);
            dividers.push(dividerElement);
            filenameInput.before(linkElement);
            filenameInput.before(dividerElement);
          }
        } else {
          filenameInput.value = value;
        }
        this.setSelectionRange(0, 0);
        containSpace = containSpace || (trimValue !== value && trimValue !== '');
      }
    }
    containSpace = containSpace || Array.from(links).some((link) => {
      const value = link.querySelector('a')!.textContent;
      return value.trim() !== value;
    });
    containSpace = containSpace || parts[parts.length - 1].trim() !== parts[parts.length - 1];
    if (containSpace) {
      if (!warningDiv) {
        warningDiv = document.createElement('div');
        warningDiv.classList.add('ui', 'warning', 'message', 'flash-message', 'flash-warning', 'space-related');
        warningDiv.innerHTML = html`<p>File path contains leading or trailing whitespace.</p>`;
        // Change to `block` display because it is set to 'none' in fomantic/build/semantic.css
        warningDiv.classList.add('tw-block');
        const inputContainer = document.querySelector('.repo-editor-header')!;
        inputContainer.insertAdjacentElement('beforebegin', warningDiv);
      }
      showElem(warningDiv);
    } else if (warningDiv) {
      hideElem(warningDiv);
    }
    joinTreePath();
  });
  filenameInput.addEventListener('keydown', function (e) {
    const sections = queryElems(document, '.breadcrumb span.section');
    const dividers = queryElems(document, '.breadcrumb .breadcrumb-divider');
    // Jump back to last directory once the filename is empty
    if (e.code === 'Backspace' && filenameInput.selectionStart === 0 && sections.length > 0) {
      e.preventDefault();
      const lastSection = sections[sections.length - 1];
      const lastDivider = dividers.length ? dividers[dividers.length - 1] : null;
      const value = lastSection.querySelector('a')!.textContent;
      filenameInput.value = value + filenameInput.value;
      this.setSelectionRange(value.length, value.length);
      lastDivider?.remove();
      lastSection.remove();
      joinTreePath();
    }