first-commit

2025-08-25 15:46:12 +08:00
commit f4d95dfff4
5665 changed files with 705359 additions and 0 deletions
--- a/web_src/js/features/comp/ComboMarkdownEditor.ts
+++ b/web_src/js/features/comp/ComboMarkdownEditor.ts
@@ -0,0 +1,425 @@
+import '@github/markdown-toolbar-element';
+import '@github/text-expander-element';
+import {attachTribute} from '../tribute.ts';
+import {hideElem, showElem, autosize, isElemVisible, generateElemId} from '../../utils/dom.ts';
+import {
+  EventUploadStateChanged,
+  initEasyMDEPaste,
+  initTextareaEvents,
+  triggerUploadStateChanged,
+} from './EditorUpload.ts';
+import {handleGlobalEnterQuickSubmit} from './QuickSubmit.ts';
+import {renderPreviewPanelContent} from '../repo-editor.ts';
+import {easyMDEToolbarActions} from './EasyMDEToolbarActions.ts';
+import {initTextExpander} from './TextExpander.ts';
+import {showErrorToast} from '../../modules/toast.ts';
+import {POST} from '../../modules/fetch.ts';
+import {
+  EventEditorContentChanged,
+  initTextareaMarkdown,
+  textareaInsertText,
+  triggerEditorContentChanged,
+} from './EditorMarkdown.ts';
+import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
+import {createTippy} from '../../modules/tippy.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import type EasyMDE from 'easymde';
+
+/**
+ * validate if the given textarea is non-empty.
+ * @param {HTMLTextAreaElement} textarea - The textarea element to be validated.
+ * @returns {boolean} returns true if validation succeeded.
+ */
+export function validateTextareaNonEmpty(textarea: HTMLTextAreaElement) {
+  // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation.
+  // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert.
+  if (!textarea.value) {
+    if (isElemVisible(textarea)) {
+      textarea.required = true;
+      const form = textarea.closest('form');
+      form?.reportValidity();
+    } else {
+      // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places.
+      showErrorToast('Require non-empty content');
+    }
+    return false;
+  }
+  return true;
+}
+
+type Heights = {
+  minHeight?: string,
+  height?: string,
+  maxHeight?: string,
+};
+
+type ComboMarkdownEditorOptions = {
+  editorHeights?: Heights,
+  easyMDEOptions?: EasyMDE.Options,
+};
+
+type ComboMarkdownEditorTextarea = HTMLTextAreaElement & {_giteaComboMarkdownEditor: any};
+type ComboMarkdownEditorContainer = HTMLElement & {_giteaComboMarkdownEditor?: any};
+
+export class ComboMarkdownEditor {
+  static EventEditorContentChanged = EventEditorContentChanged;
+  static EventUploadStateChanged = EventUploadStateChanged;
+
+  public container: HTMLElement;
+
+  options: ComboMarkdownEditorOptions;
+
+  tabEditor: HTMLElement;
+  tabPreviewer: HTMLElement;
+
+  supportEasyMDE: boolean;
+  easyMDE: any;
+  easyMDEToolbarActions: any;
+  easyMDEToolbarDefault: any;
+
+  textarea: ComboMarkdownEditorTextarea;
+  textareaMarkdownToolbar: HTMLElement;
+  textareaAutosize: any;
+
+  dropzone: HTMLElement;
+  attachedDropzoneInst: any;
+
+  previewMode: string;
+  previewUrl: string;
+  previewContext: string;
+
+  constructor(container: ComboMarkdownEditorContainer, options:ComboMarkdownEditorOptions = {}) {
+    if (container._giteaComboMarkdownEditor) throw new Error('ComboMarkdownEditor already initialized');
+    container._giteaComboMarkdownEditor = this;
+    this.options = options;
+    this.container = container;
+  }
+
+  async init() {
+    this.prepareEasyMDEToolbarActions();
+    this.setupContainer();
+    this.setupTab();
+    await this.setupDropzone(); // textarea depends on dropzone
+    this.setupTextarea();
+
+    await this.switchToUserPreference();
+  }
+
+  applyEditorHeights(el: HTMLElement, heights: Heights) {
+    if (!heights) return;
+    if (heights.minHeight) el.style.minHeight = heights.minHeight;
+    if (heights.height) el.style.height = heights.height;
+    if (heights.maxHeight) el.style.maxHeight = heights.maxHeight;
+  }
+
+  setupContainer() {
+    this.supportEasyMDE = this.container.getAttribute('data-support-easy-mde') === 'true';
+    this.previewMode = this.container.getAttribute('data-content-mode');
+    this.previewUrl = this.container.getAttribute('data-preview-url');
+    this.previewContext = this.container.getAttribute('data-preview-context');
+    initTextExpander(this.container.querySelector('text-expander'));
+  }
+
+  setupTextarea() {
+    this.textarea = this.container.querySelector('.markdown-text-editor');
+    this.textarea._giteaComboMarkdownEditor = this;
+    this.textarea.id = generateElemId(`_combo_markdown_editor_`);
+    this.textarea.addEventListener('input', () => triggerEditorContentChanged(this.container));
+    this.applyEditorHeights(this.textarea, this.options.editorHeights);
+
+    if (this.textarea.getAttribute('data-disable-autosize') !== 'true') {
+      this.textareaAutosize = autosize(this.textarea, {viewportMarginBottom: 130});
+    }
+
+    this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar');
+    this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id);
+    for (const el of this.textareaMarkdownToolbar.querySelectorAll('.markdown-toolbar-button')) {
+      // upstream bug: The role code is never executed in base MarkdownButtonElement https://github.com/github/markdown-toolbar-element/issues/70
+      el.setAttribute('role', 'button');
+      // the editor usually is in a form, so the buttons should have "type=button", avoiding conflicting with the form's submit.
+      if (el.nodeName === 'BUTTON' && !el.getAttribute('type')) el.setAttribute('type', 'button');
+    }
+
+    const monospaceButton = this.container.querySelector('.markdown-switch-monospace');
+    const monospaceEnabled = localStorage?.getItem('markdown-editor-monospace') === 'true';
+    const monospaceText = monospaceButton.getAttribute(monospaceEnabled ? 'data-disable-text' : 'data-enable-text');
+    monospaceButton.setAttribute('data-tooltip-content', monospaceText);
+    monospaceButton.setAttribute('aria-checked', String(monospaceEnabled));
+    monospaceButton.addEventListener('click', (e) => {
+      e.preventDefault();
+      const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true';
+      localStorage.setItem('markdown-editor-monospace', String(enabled));
+      this.textarea.classList.toggle('tw-font-mono', enabled);
+      const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text');
+      monospaceButton.setAttribute('data-tooltip-content', text);
+      monospaceButton.setAttribute('aria-checked', String(enabled));
+    });
+
+    if (this.supportEasyMDE) {
+      const easymdeButton = this.container.querySelector('.markdown-switch-easymde');
+      easymdeButton.addEventListener('click', async (e) => {
+        e.preventDefault();
+        this.userPreferredEditor = 'easymde';
+        await this.switchToEasyMDE();
+      });
+    }
+
+    this.initMarkdownButtonTableAdd();
+
+    initTextareaMarkdown(this.textarea);
+    initTextareaEvents(this.textarea, this.dropzone);
+  }
+
+  async setupDropzone() {
+    const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container');
+    if (!dropzoneParentContainer) return;
+    this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone');
+    if (!this.dropzone) return;
+
+    this.attachedDropzoneInst = await initDropzone(this.dropzone);
+    // dropzone events
+    // * "processing" means a file is being uploaded
+    // * "queuecomplete" means all files have been uploaded
+    this.attachedDropzoneInst.on('processing', () => triggerUploadStateChanged(this.container));
+    this.attachedDropzoneInst.on('queuecomplete', () => triggerUploadStateChanged(this.container));
+  }
+
+  dropzoneGetFiles() {
+    if (!this.dropzone) return null;
+    return Array.from(this.dropzone.querySelectorAll<HTMLInputElement>('.files [name=files]'), (el) => el.value);
+  }
+
+  dropzoneReloadFiles() {
+    if (!this.dropzone) return;
+    this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
+  }
+
+  dropzoneSubmitReload() {
+    if (!this.dropzone) return;
+    this.attachedDropzoneInst.emit('submit');
+    this.attachedDropzoneInst.emit(DropzoneCustomEventReloadFiles);
+  }
+
+  isUploading() {
+    if (!this.dropzone) return false;
+    return this.attachedDropzoneInst.getQueuedFiles().length || this.attachedDropzoneInst.getUploadingFiles().length;
+  }
+
+  setupTab() {
+    const tabs = this.container.querySelectorAll<HTMLElement>('.tabular.menu > .item');
+    if (!tabs.length) return;
+
+    // Fomantic Tab requires the "data-tab" to be globally unique.
+    // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
+    const tabIdSuffix = generateElemId();
+    this.tabEditor = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer');
+    this.tabPreviewer = Array.from(tabs).find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer');
+    this.tabEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
+    this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
+
+    const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]');
+    const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]');
+    panelEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
+    panelPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
+
+    this.tabEditor.addEventListener('click', () => {
+      requestAnimationFrame(() => {
+        this.focus();
+      });
+    });
+
+    fomanticQuery(tabs).tab();
+
+    this.tabPreviewer.addEventListener('click', async () => {
+      const formData = new FormData();
+      formData.append('mode', this.previewMode);
+      formData.append('context', this.previewContext);
+      formData.append('text', this.value());
+      const response = await POST(this.previewUrl, {data: formData});
+      const data = await response.text();
+      renderPreviewPanelContent(panelPreviewer, data);
+    });
+  }
+
+  generateMarkdownTable(rows: number, cols: number): string {
+    const tableLines = [];
+    tableLines.push(
+      `| ${'Header '.repeat(cols).trim().split(' ').join(' | ')} |`,
+      `| ${'--- '.repeat(cols).trim().split(' ').join(' | ')} |`,
+    );
+    for (let i = 0; i < rows; i++) {
+      tableLines.push(`| ${'Cell '.repeat(cols).trim().split(' ').join(' | ')} |`);
+    }
+    return tableLines.join('\n');
+  }
+
+  initMarkdownButtonTableAdd() {
+    const addTableButton = this.container.querySelector('.markdown-button-table-add');
+    const addTablePanel = this.container.querySelector('.markdown-add-table-panel');
+    // here the tippy can't attach to the button because the button already owns a tippy for tooltip
+    const addTablePanelTippy = createTippy(addTablePanel, {
+      content: addTablePanel,
+      trigger: 'manual',
+      placement: 'bottom',
+      hideOnClick: true,
+      interactive: true,
+      getReferenceClientRect: () => addTableButton.getBoundingClientRect(),
+    });
+    addTableButton.addEventListener('click', () => addTablePanelTippy.show());
+
+    addTablePanel.querySelector('.ui.button.primary').addEventListener('click', () => {
+      let rows = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=rows]').value);
+      let cols = parseInt(addTablePanel.querySelector<HTMLInputElement>('[name=cols]').value);
+      rows = Math.max(1, Math.min(100, rows));
+      cols = Math.max(1, Math.min(100, cols));
+      textareaInsertText(this.textarea, `\n${this.generateMarkdownTable(rows, cols)}\n\n`);
+      addTablePanelTippy.hide();
+    });
+  }
+
+  switchTabToEditor() {
+    this.tabEditor.click();
+  }
+
+  prepareEasyMDEToolbarActions() {
+    this.easyMDEToolbarDefault = [
+      'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3',
+      'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', 'gitea-checkbox-empty',
+      'gitea-checkbox-checked', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image',
+      'table', 'horizontal-rule', '|', 'gitea-switch-to-textarea',
+    ];
+  }
+
+  parseEasyMDEToolbar(easyMde: typeof EasyMDE, actions: any) {
+    this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(easyMde, this);
+    const processed = [];
+    for (const action of actions) {
+      const actionButton = this.easyMDEToolbarActions[action];
+      if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
+      processed.push(actionButton);
+    }
+    return processed;
+  }
+
+  async switchToUserPreference() {
+    if (this.userPreferredEditor === 'easymde' && this.supportEasyMDE) {
+      await this.switchToEasyMDE();
+    } else {
+      this.switchToTextarea();
+    }
+  }
+
+  switchToTextarea() {
+    if (!this.easyMDE) return;
+    showElem(this.textareaMarkdownToolbar);
+    if (this.easyMDE) {
+      this.easyMDE.toTextArea();
+      this.easyMDE = null;
+    }
+  }
+
+  async switchToEasyMDE() {
+    if (this.easyMDE) return;
+    // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles.
+    const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');
+    const easyMDEOpt: EasyMDE.Options = {
+      autoDownloadFontAwesome: false,
+      element: this.textarea,
+      forceSync: true,
+      renderingConfig: {singleLineBreaks: false},
+      indentWithTabs: false,
+      tabSize: 4,
+      spellChecker: false,
+      inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
+      nativeSpellcheck: true,
+      ...this.options.easyMDEOptions,
+    };
+    easyMDEOpt.toolbar = this.parseEasyMDEToolbar(EasyMDE, easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
+
+    this.easyMDE = new EasyMDE(easyMDEOpt);
+    this.easyMDE.codemirror.on('change', () => triggerEditorContentChanged(this.container));
+    this.easyMDE.codemirror.setOption('extraKeys', {
+      'Cmd-Enter': (cm: any) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
+      'Ctrl-Enter': (cm: any) => handleGlobalEnterQuickSubmit(cm.getTextArea()),
+      Enter: (cm: any) => {
+        const tributeContainer = document.querySelector<HTMLElement>('.tribute-container');
+        if (!tributeContainer || tributeContainer.style.display === 'none') {
+          cm.execCommand('newlineAndIndent');
+        }
+      },
+      Up: (cm: any) => {
+        const tributeContainer = document.querySelector<HTMLElement>('.tribute-container');
+        if (!tributeContainer || tributeContainer.style.display === 'none') {
+          return cm.execCommand('goLineUp');
+        }
+      },
+      Down: (cm: any) => {
+        const tributeContainer = document.querySelector<HTMLElement>('.tribute-container');
+        if (!tributeContainer || tributeContainer.style.display === 'none') {
+          return cm.execCommand('goLineDown');
+        }
+      },
+    });
+    this.applyEditorHeights(this.container.querySelector('.CodeMirror-scroll'), this.options.editorHeights);
+    await attachTribute(this.easyMDE.codemirror.getInputField());
+    if (this.dropzone) {
+      initEasyMDEPaste(this.easyMDE, this.dropzone);
+    }
+    hideElem(this.textareaMarkdownToolbar);
+  }
+
+  value(v: any = undefined) {
+    if (v === undefined) {
+      if (this.easyMDE) {
+        return this.easyMDE.value();
+      }
+      return this.textarea.value;
+    }
+
+    if (this.easyMDE) {
+      this.easyMDE.value(v);
+    } else {
+      this.textarea.value = v;
+    }
+    this.textareaAutosize?.resizeToFit();
+  }
+
+  focus() {
+    if (this.easyMDE) {
+      this.easyMDE.codemirror.focus();
+    } else {
+      this.textarea.focus();
+    }
+  }
+
+  moveCursorToEnd() {
+    this.textarea.focus();
+    this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length);
+    if (this.easyMDE) {
+      this.easyMDE.codemirror.focus();
+      this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0);
+    }
+  }
+
+  get userPreferredEditor() {
+    return window.localStorage.getItem(`markdown-editor-${this.previewMode ?? 'default'}`);
+  }
+  set userPreferredEditor(s) {
+    window.localStorage.setItem(`markdown-editor-${this.previewMode ?? 'default'}`, s);
+  }
+}
+
+export function getComboMarkdownEditor(el: any) {
+  if (!el) return null;
+  if (el.length) el = el[0];
+  return el._giteaComboMarkdownEditor;
+}
+
+export async function initComboMarkdownEditor(container: HTMLElement, options:ComboMarkdownEditorOptions = {}) {
+  if (!container) {
+    throw new Error('initComboMarkdownEditor: container is null');
+  }
+  const editor = new ComboMarkdownEditor(container, options);
+  await editor.init();
+  return editor;
+}
--- a/web_src/js/features/comp/ConfirmModal.ts
+++ b/web_src/js/features/comp/ConfirmModal.ts
@@ -0,0 +1,42 @@
+import {svg} from '../../svg.ts';
+import {html, htmlRaw} from '../../utils/html.ts';
+import {createElementFromHTML} from '../../utils/dom.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+
+const {i18n} = window.config;
+
+type ConfirmModalOptions = {
+  header?: string;
+  content?: string;
+  confirmButtonColor?: 'primary' | 'red' | 'green' | 'blue';
+}
+
+export function createConfirmModal({header = '', content = '', confirmButtonColor = 'primary'}:ConfirmModalOptions = {}): HTMLElement {
+  const headerHtml = header ? html`<div class="header">${header}</div>` : '';
+  return createElementFromHTML(html`
+    <div class="ui g-modal-confirm modal">
+      ${htmlRaw(headerHtml)}
+      <div class="content">${content}</div>
+      <div class="actions">
+        <button class="ui cancel button">${htmlRaw(svg('octicon-x'))} ${i18n.modal_cancel}</button>
+        <button class="ui ${confirmButtonColor} ok button">${htmlRaw(svg('octicon-check'))} ${i18n.modal_confirm}</button>
+      </div>
+    </div>
+  `.trim());
+}
+
+export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
+  if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
+  return new Promise((resolve) => {
+    const $modal = fomanticQuery(modal);
+    $modal.modal({
+      onApprove() {
+        resolve(true);
+      },
+      onHidden() {
+        $modal.remove();
+        resolve(false);
+      },
+    }).modal('show');
+  });
+}
--- a/web_src/js/features/comp/Cropper.ts
+++ b/web_src/js/features/comp/Cropper.ts
@@ -0,0 +1,47 @@
+import {showElem, type DOMEvent} from '../../utils/dom.ts';
+
+type CropperOpts = {
+  container: HTMLElement,
+  imageSource: HTMLImageElement,
+  fileInput: HTMLInputElement,
+}
+
+async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
+  const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
+  let currentFileName = '';
+  let currentFileLastModified = 0;
+  const cropper = new Cropper(imageSource, {
+    aspectRatio: 1,
+    viewMode: 2,
+    autoCrop: false,
+    crop() {
+      const canvas = cropper.getCroppedCanvas();
+      canvas.toBlob((blob) => {
+        const croppedFileName = currentFileName.replace(/\.[^.]{3,4}$/, '.png');
+        const croppedFile = new File([blob], croppedFileName, {type: 'image/png', lastModified: currentFileLastModified});
+        const dataTransfer = new DataTransfer();
+        dataTransfer.items.add(croppedFile);
+        fileInput.files = dataTransfer.files;
+      });
+    },
+  });
+
+  fileInput.addEventListener('input', (e: DOMEvent<Event, HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files?.length > 0) {
+      currentFileName = files[0].name;
+      currentFileLastModified = files[0].lastModified;
+      const fileURL = URL.createObjectURL(files[0]);
+      imageSource.src = fileURL;
+      cropper.replace(fileURL);
+      showElem(container);
+    }
+  });
+}
+
+export async function initAvatarUploaderWithCropper(fileInput: HTMLInputElement) {
+  const panel = fileInput.nextElementSibling as HTMLElement;
+  if (!panel?.matches('.cropper-panel')) throw new Error('Missing cropper panel for avatar uploader');
+  const imageSource = panel.querySelector<HTMLImageElement>('.cropper-source');
+  await initCompCropper({container: panel, fileInput, imageSource});
+}
--- a/web_src/js/features/comp/EasyMDEToolbarActions.ts
+++ b/web_src/js/features/comp/EasyMDEToolbarActions.ts
@@ -0,0 +1,154 @@
+import {svg} from '../../svg.ts';
+import type EasyMDE from 'easymde';
+import type {ComboMarkdownEditor} from './ComboMarkdownEditor.ts';
+
+export function easyMDEToolbarActions(easyMde: typeof EasyMDE, editor: ComboMarkdownEditor): Record<string, Partial<EasyMDE.ToolbarIcon | string>> {
+  const actions: Record<string, Partial<EasyMDE.ToolbarIcon> | string> = {
+    '|': '|',
+    'heading-1': {
+      action: easyMde.toggleHeading1,
+      icon: svg('octicon-heading'),
+      title: 'Heading 1',
+    },
+    'heading-2': {
+      action: easyMde.toggleHeading2,
+      icon: svg('octicon-heading'),
+      title: 'Heading 2',
+    },
+    'heading-3': {
+      action: easyMde.toggleHeading3,
+      icon: svg('octicon-heading'),
+      title: 'Heading 3',
+    },
+    'heading-smaller': {
+      action: easyMde.toggleHeadingSmaller,
+      icon: svg('octicon-heading'),
+      title: 'Decrease Heading',
+    },
+    'heading-bigger': {
+      action: easyMde.toggleHeadingBigger,
+      icon: svg('octicon-heading'),
+      title: 'Increase Heading',
+    },
+    'bold': {
+      action: easyMde.toggleBold,
+      icon: svg('octicon-bold'),
+      title: 'Bold',
+    },
+    'italic': {
+      action: easyMde.toggleItalic,
+      icon: svg('octicon-italic'),
+      title: 'Italic',
+    },
+    'strikethrough': {
+      action: easyMde.toggleStrikethrough,
+      icon: svg('octicon-strikethrough'),
+      title: 'Strikethrough',
+    },
+    'quote': {
+      action: easyMde.toggleBlockquote,
+      icon: svg('octicon-quote'),
+      title: 'Quote',
+    },
+    'code': {
+      action: easyMde.toggleCodeBlock,
+      icon: svg('octicon-code'),
+      title: 'Code',
+    },
+    'link': {
+      action: easyMde.drawLink,
+      icon: svg('octicon-link'),
+      title: 'Link',
+    },
+    'unordered-list': {
+      action: easyMde.toggleUnorderedList,
+      icon: svg('octicon-list-unordered'),
+      title: 'Unordered List',
+    },
+    'ordered-list': {
+      action: easyMde.toggleOrderedList,
+      icon: svg('octicon-list-ordered'),
+      title: 'Ordered List',
+    },
+    'image': {
+      action: easyMde.drawImage,
+      icon: svg('octicon-image'),
+      title: 'Image',
+    },
+    'table': {
+      action: easyMde.drawTable,
+      icon: svg('octicon-table'),
+      title: 'Table',
+    },
+    'horizontal-rule': {
+      action: easyMde.drawHorizontalRule,
+      icon: svg('octicon-horizontal-rule'),
+      title: 'Horizontal Rule',
+    },
+    'preview': {
+      action: easyMde.togglePreview,
+      icon: svg('octicon-eye'),
+      title: 'Preview',
+    },
+    'fullscreen': {
+      action: easyMde.toggleFullScreen,
+      icon: svg('octicon-screen-full'),
+      title: 'Fullscreen',
+    },
+    'side-by-side': {
+      action: easyMde.toggleSideBySide,
+      icon: svg('octicon-columns'),
+      title: 'Side by Side',
+    },
+
+    // gitea's custom actions
+    'gitea-checkbox-empty': {
+      action(e) {
+        const cm = e.codemirror;
+        cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
+        cm.focus();
+      },
+      icon: svg('gitea-empty-checkbox'),
+      title: 'Add Checkbox (empty)',
+    },
+    'gitea-checkbox-checked': {
+      action(e) {
+        const cm = e.codemirror;
+        cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
+        cm.focus();
+      },
+      icon: svg('octicon-checkbox'),
+      title: 'Add Checkbox (checked)',
+    },
+    'gitea-switch-to-textarea': {
+      action: () => {
+        editor.userPreferredEditor = 'textarea';
+        editor.switchToTextarea();
+      },
+      icon: svg('octicon-arrow-switch'),
+      title: 'Revert to simple textarea',
+    },
+    'gitea-code-inline': {
+      action(e) {
+        const cm = e.codemirror;
+        const selection = cm.getSelection();
+        cm.replaceSelection(`\`${selection}\``);
+        if (!selection) {
+          const cursorPos = cm.getCursor();
+          cm.setCursor(cursorPos.line, cursorPos.ch - 1);
+        }
+        cm.focus();
+      },
+      icon: svg('octicon-chevron-right'),
+      title: 'Add Inline Code',
+    },
+  };
+
+  for (const [key, value] of Object.entries(actions)) {
+    if (typeof value !== 'string') {
+      value.name = key;
+    }
+  }
+
+  return actions;
+}
--- a/web_src/js/features/comp/EditorMarkdown.test.ts
+++ b/web_src/js/features/comp/EditorMarkdown.test.ts
@@ -0,0 +1,203 @@
+import {initTextareaMarkdown, markdownHandleIndention, textareaSplitLines} from './EditorMarkdown.ts';
+
+test('textareaSplitLines', () => {
+  let ret = textareaSplitLines('a\nbc\nd', 0);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 0, posLineIndex: 0, inlinePos: 0});
+
+  ret = textareaSplitLines('a\nbc\nd', 1);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 0, posLineIndex: 0, inlinePos: 1});
+
+  ret = textareaSplitLines('a\nbc\nd', 2);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 2, posLineIndex: 1, inlinePos: 0});
+
+  ret = textareaSplitLines('a\nbc\nd', 3);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 2, posLineIndex: 1, inlinePos: 1});
+
+  ret = textareaSplitLines('a\nbc\nd', 4);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 2, posLineIndex: 1, inlinePos: 2});
+
+  ret = textareaSplitLines('a\nbc\nd', 5);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 5, posLineIndex: 2, inlinePos: 0});
+
+  ret = textareaSplitLines('a\nbc\nd', 6);
+  expect(ret).toEqual({lines: ['a', 'bc', 'd'], lengthBeforePosLine: 5, posLineIndex: 2, inlinePos: 1});
+});
+
+test('markdownHandleIndention', () => {
+  const testInput = (input: string, expected?: string) => {
+    const inputPos = input.indexOf('|');
+    input = input.replace('|', '');
+    const ret = markdownHandleIndention({value: input, selStart: inputPos, selEnd: inputPos});
+    if (expected === null) {
+      expect(ret).toEqual({handled: false});
+    } else {
+      const expectedPos = expected.indexOf('|');
+      expected = expected.replace('|', '');
+      expect(ret).toEqual({
+        handled: true,
+        valueSelection: {value: expected, selStart: expectedPos, selEnd: expectedPos},
+      });
+    }
+  };
+
+  testInput(`
+  a|b
+`, `
+  a
+  |b
+`);
+
+  testInput(`
+1. a
+2. |
+`, `
+1. a
+|
+`);
+
+  testInput(`
+|1. a
+`, null); // let browser handle it
+
+  testInput(`
+1. a
+1. b|c
+`, `
+1. a
+2. b
+3. |c
+`);
+
+  testInput(`
+2. a
+2. b|
+
+1. x
+1. y
+`, `
+1. a
+2. b
+3. |
+
+1. x
+1. y
+`);
+
+  testInput(`
+2. a
+2. b
+
+1. x|
+1. y
+`, `
+2. a
+2. b
+
+1. x
+2. |
+3. y
+`);
+
+  testInput(`
+1. a
+2. b|
+3. c
+`, `
+1. a
+2. b
+3. |
+4. c
+`);
+
+  testInput(`
+1. a
+  1. b
+  2. b
+  3. b
+  4. b
+1. c|
+`, `
+1. a
+  1. b
+  2. b
+  3. b
+  4. b
+2. c
+3. |
+`);
+
+  testInput(`
+1. a
+2. a
+3. a
+4. a
+5. a
+6. a
+7. a
+8. a
+9. b|c
+`, `
+1. a
+2. a
+3. a
+4. a
+5. a
+6. a
+7. a
+8. a
+9. b
+10. |c
+`);
+
+  // this is a special case, it's difficult to re-format the parent level at the moment, so leave it to the future
+  testInput(`
+1. a
+  2. b|
+3. c
+`, `
+1. a
+  1. b
+  2. |
+3. c
+`);
+});
+
+test('EditorMarkdown', () => {
+  const textarea = document.createElement('textarea');
+  initTextareaMarkdown(textarea);
+
+  type ValueWithCursor = string | {
+    value: string;
+    pos: number;
+  }
+  const testInput = (input: ValueWithCursor, result: ValueWithCursor) => {
+    const intputValue = typeof input === 'string' ? input : input.value;
+    const inputPos = typeof input === 'string' ? intputValue.length : input.pos;
+    textarea.value = intputValue;
+    textarea.setSelectionRange(inputPos, inputPos);
+
+    const e = new KeyboardEvent('keydown', {key: 'Enter', cancelable: true});
+    textarea.dispatchEvent(e);
+    if (!e.defaultPrevented) textarea.value += '\n'; // simulate default behavior
+
+    const expectedValue = typeof result === 'string' ? result : result.value;
+    const expectedPos = typeof result === 'string' ? expectedValue.length : result.pos;
+    expect(textarea.value).toEqual(expectedValue);
+    expect(textarea.selectionStart).toEqual(expectedPos);
+  };
+
+  testInput('-', '-\n');
+  testInput('1.', '1.\n');
+
+  testInput('- ', '');
+  testInput('1. ', '');
+  testInput({value: '1. \n2. ', pos: 3}, {value: '\n2. ', pos: 0});
+
+  testInput('- x', '- x\n- ');
+  testInput('1. foo', '1. foo\n2. ');
+  testInput({value: '1. a\n2. b\n3. c', pos: 4}, {value: '1. a\n2. \n3. b\n4. c', pos: 8});
+  testInput('- [ ]', '- [ ]\n- ');
+  testInput('- [ ] foo', '- [ ] foo\n- [ ] ');
+  testInput('* [x] foo', '* [x] foo\n* [ ] ');
+  testInput('1. [x] foo', '1. [x] foo\n2. [ ] ');
+});
--- a/web_src/js/features/comp/EditorMarkdown.ts
+++ b/web_src/js/features/comp/EditorMarkdown.ts
@@ -0,0 +1,202 @@
+export const EventEditorContentChanged = 'ce-editor-content-changed';
+
+export function triggerEditorContentChanged(target: HTMLElement) {
+  target.dispatchEvent(new CustomEvent(EventEditorContentChanged, {bubbles: true}));
+}
+
+export function textareaInsertText(textarea: HTMLTextAreaElement, value: string) {
+  const startPos = textarea.selectionStart;
+  const endPos = textarea.selectionEnd;
+  textarea.value = textarea.value.substring(0, startPos) + value + textarea.value.substring(endPos);
+  textarea.selectionStart = startPos;
+  textarea.selectionEnd = startPos + value.length;
+  textarea.focus();
+  triggerEditorContentChanged(textarea);
+}
+
+type TextareaValueSelection = {
+  value: string;
+  selStart: number;
+  selEnd: number;
+}
+
+function handleIndentSelection(textarea: HTMLTextAreaElement, e: KeyboardEvent) {
+  const selStart = textarea.selectionStart;
+  const selEnd = textarea.selectionEnd;
+  if (selEnd === selStart) return; // do not process when no selection
+
+  e.preventDefault();
+  const lines = textarea.value.split('\n');
+  const selectedLines = [];
+
+  let pos = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (pos > selEnd) break;
+    if (pos >= selStart) selectedLines.push(i);
+    pos += lines[i].length + 1;
+  }
+
+  for (const i of selectedLines) {
+    if (e.shiftKey) {
+      lines[i] = lines[i].replace(/^(\t| {1,2})/, '');
+    } else {
+      lines[i] = `  ${lines[i]}`;
+    }
+  }
+
+  // re-calculating the selection range
+  let newSelStart, newSelEnd;
+  pos = 0;
+  for (let i = 0; i < lines.length; i++) {
+    if (i === selectedLines[0]) {
+      newSelStart = pos;
+    }
+    if (i === selectedLines[selectedLines.length - 1]) {
+      newSelEnd = pos + lines[i].length;
+      break;
+    }
+    pos += lines[i].length + 1;
+  }
+  textarea.value = lines.join('\n');
+  textarea.setSelectionRange(newSelStart, newSelEnd);
+  triggerEditorContentChanged(textarea);
+}
+
+type MarkdownHandleIndentionResult = {
+  handled: boolean;
+  valueSelection?: TextareaValueSelection;
+}
+
+type TextLinesBuffer = {
+  lines: string[];
+  lengthBeforePosLine: number;
+  posLineIndex: number;
+  inlinePos: number
+}
+
+export function textareaSplitLines(value: string, pos: number): TextLinesBuffer {
+  const lines = value.split('\n');
+  let lengthBeforePosLine = 0, inlinePos = 0, posLineIndex = 0;
+  for (; posLineIndex < lines.length; posLineIndex++) {
+    const lineLength = lines[posLineIndex].length + 1;
+    if (lengthBeforePosLine + lineLength > pos) {
+      inlinePos = pos - lengthBeforePosLine;
+      break;
+    }
+    lengthBeforePosLine += lineLength;
+  }
+  return {lines, lengthBeforePosLine, posLineIndex, inlinePos};
+}
+
+function markdownReformatListNumbers(linesBuf: TextLinesBuffer, indention: string) {
+  const reDeeperIndention = new RegExp(`^${indention}\\s+`);
+  const reSameLevel = new RegExp(`^${indention}([0-9]+)\\.`);
+  let firstLineIdx: number;
+  for (firstLineIdx = linesBuf.posLineIndex - 1; firstLineIdx >= 0; firstLineIdx--) {
+    const line = linesBuf.lines[firstLineIdx];
+    if (!reDeeperIndention.test(line) && !reSameLevel.test(line)) break;
+  }
+  firstLineIdx++;
+  let num = 1;
+  for (let i = firstLineIdx; i < linesBuf.lines.length; i++) {
+    const oldLine = linesBuf.lines[i];
+    const sameLevel = reSameLevel.test(oldLine);
+    if (!sameLevel && !reDeeperIndention.test(oldLine)) break;
+    if (sameLevel) {
+      const newLine = `${indention}${num}.${oldLine.replace(reSameLevel, '')}`;
+      linesBuf.lines[i] = newLine;
+      num++;
+      if (linesBuf.posLineIndex === i) {
+        // need to correct the cursor inline position if the line length changes
+        linesBuf.inlinePos += newLine.length - oldLine.length;
+        linesBuf.inlinePos = Math.max(0, linesBuf.inlinePos);
+        linesBuf.inlinePos = Math.min(newLine.length, linesBuf.inlinePos);
+      }
+    }
+  }
+  recalculateLengthBeforeLine(linesBuf);
+}
+
+function recalculateLengthBeforeLine(linesBuf: TextLinesBuffer) {
+  linesBuf.lengthBeforePosLine = 0;
+  for (let i = 0; i < linesBuf.posLineIndex; i++) {
+    linesBuf.lengthBeforePosLine += linesBuf.lines[i].length + 1;
+  }
+}
+
+export function markdownHandleIndention(tvs: TextareaValueSelection): MarkdownHandleIndentionResult {
+  const unhandled: MarkdownHandleIndentionResult = {handled: false};
+  if (tvs.selEnd !== tvs.selStart) return unhandled; // do not process when there is a selection
+
+  const linesBuf = textareaSplitLines(tvs.value, tvs.selStart);
+  const line = linesBuf.lines[linesBuf.posLineIndex] ?? '';
+  if (!line) return unhandled; // if the line is empty, do nothing, let the browser handle it
+
+  // parse the indention
+  let lineContent = line;
+  const indention = /^\s*/.exec(lineContent)[0];
+  lineContent = lineContent.slice(indention.length);
+  if (linesBuf.inlinePos <= indention.length) return unhandled; // if cursor is at the indention, do nothing, let the browser handle it
+
+  // parse the prefixes: "1. ", "- ", "* ", there could also be " [ ] " or " [x] " for task lists
+  // there must be a space after the prefix because none of "1.foo" / "-foo" is a list item
+  const prefixMatch = /^([0-9]+\.|[-*])(\s\[([ x])\])?\s/.exec(lineContent);
+  let prefix = '';
+  if (prefixMatch) {
+    prefix = prefixMatch[0];
+    if (prefix.length > linesBuf.inlinePos) prefix = ''; // do not add new line if cursor is at prefix
+  }
+
+  lineContent = lineContent.slice(prefix.length);
+  if (!indention && !prefix) return unhandled; // if no indention and no prefix, do nothing, let the browser handle it
+
+  if (!lineContent) {
+    // clear current line if we only have i.e. '1. ' and the user presses enter again to finish creating a list
+    linesBuf.lines[linesBuf.posLineIndex] = '';
+    linesBuf.inlinePos = 0;
+  } else {
+    // start a new line with the same indention
+    let newPrefix = prefix;
+    if (/^\d+\./.test(prefix)) newPrefix = `1. ${newPrefix.slice(newPrefix.indexOf('.') + 2)}`;
+    newPrefix = newPrefix.replace('[x]', '[ ]');
+
+    const inlinePos = linesBuf.inlinePos;
+    linesBuf.lines[linesBuf.posLineIndex] = line.substring(0, inlinePos);
+    const newLineLeft = `${indention}${newPrefix}`;
+    const newLine = `${newLineLeft}${line.substring(inlinePos)}`;
+    linesBuf.lines.splice(linesBuf.posLineIndex + 1, 0, newLine);
+    linesBuf.posLineIndex++;
+    linesBuf.inlinePos = newLineLeft.length;
+    recalculateLengthBeforeLine(linesBuf);
+  }
+
+  markdownReformatListNumbers(linesBuf, indention);
+  const newPos = linesBuf.lengthBeforePosLine + linesBuf.inlinePos;
+  return {handled: true, valueSelection: {value: linesBuf.lines.join('\n'), selStart: newPos, selEnd: newPos}};
+}
+
+function handleNewline(textarea: HTMLTextAreaElement, e: Event) {
+  const ret = markdownHandleIndention({value: textarea.value, selStart: textarea.selectionStart, selEnd: textarea.selectionEnd});
+  if (!ret.handled) return;
+  e.preventDefault();
+  textarea.value = ret.valueSelection.value;
+  textarea.setSelectionRange(ret.valueSelection.selStart, ret.valueSelection.selEnd);
+  triggerEditorContentChanged(textarea);
+}
+
+function isTextExpanderShown(textarea: HTMLElement): boolean {
+  return Boolean(textarea.closest('text-expander')?.querySelector('.suggestions'));
+}
+
+export function initTextareaMarkdown(textarea: HTMLTextAreaElement) {
+  textarea.addEventListener('keydown', (e) => {
+    if (isTextExpanderShown(textarea)) return;
+    if (e.key === 'Tab' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      // use Tab/Shift-Tab to indent/unindent the selected lines
+      handleIndentSelection(textarea, e);
+    } else if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      // use Enter to insert a new line with the same indention and prefix
+      handleNewline(textarea, e);
+    }
+  });
+}
--- a/web_src/js/features/comp/EditorUpload.test.ts
+++ b/web_src/js/features/comp/EditorUpload.test.ts
@@ -0,0 +1,24 @@
+import {pasteAsMarkdownLink, removeAttachmentLinksFromMarkdown} from './EditorUpload.ts';
+
+test('removeAttachmentLinksFromMarkdown', () => {
+  expect(removeAttachmentLinksFromMarkdown('a foo b', 'foo')).toBe('a foo b');
+  expect(removeAttachmentLinksFromMarkdown('a [x](attachments/foo) b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a ![x](attachments/foo) b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a [x](/attachments/foo) b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a ![x](/attachments/foo) b', 'foo')).toBe('a  b');
+
+  expect(removeAttachmentLinksFromMarkdown('a <img src="attachments/foo"> b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a <img width="100" src="attachments/foo"> b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a <img src="/attachments/foo"> b', 'foo')).toBe('a  b');
+  expect(removeAttachmentLinksFromMarkdown('a <img src="/attachments/foo" width="100"/> b', 'foo')).toBe('a  b');
+});
+
+test('preparePasteAsMarkdownLink', () => {
+  expect(pasteAsMarkdownLink({value: 'foo', selectionStart: 0, selectionEnd: 0}, 'bar')).toBeNull();
+  expect(pasteAsMarkdownLink({value: 'foo', selectionStart: 0, selectionEnd: 0}, 'https://gitea.com')).toBeNull();
+  expect(pasteAsMarkdownLink({value: 'foo', selectionStart: 0, selectionEnd: 3}, 'bar')).toBeNull();
+  expect(pasteAsMarkdownLink({value: 'foo', selectionStart: 0, selectionEnd: 3}, 'https://gitea.com')).toBe('[foo](https://gitea.com)');
+  expect(pasteAsMarkdownLink({value: '..(url)', selectionStart: 3, selectionEnd: 6}, 'https://gitea.com')).toBe('[url](https://gitea.com)');
+  expect(pasteAsMarkdownLink({value: '[](url)', selectionStart: 3, selectionEnd: 6}, 'https://gitea.com')).toBeNull();
+  expect(pasteAsMarkdownLink({value: 'https://example.com', selectionStart: 0, selectionEnd: 19}, 'https://gitea.com')).toBeNull();
+});
--- a/web_src/js/features/comp/EditorUpload.ts
+++ b/web_src/js/features/comp/EditorUpload.ts
@@ -0,0 +1,200 @@
+import {imageInfo} from '../../utils/image.ts';
+import {replaceTextareaSelection} from '../../utils/dom.ts';
+import {isUrl} from '../../utils/url.ts';
+import {textareaInsertText, triggerEditorContentChanged} from './EditorMarkdown.ts';
+import {
+  DropzoneCustomEventRemovedFile,
+  DropzoneCustomEventUploadDone,
+  generateMarkdownLinkForAttachment,
+} from '../dropzone.ts';
+import type CodeMirror from 'codemirror';
+import type EasyMDE from 'easymde';
+import type {DropzoneFile} from 'dropzone';
+
+let uploadIdCounter = 0;
+
+export const EventUploadStateChanged = 'ce-upload-state-changed';
+
+export function triggerUploadStateChanged(target: HTMLElement) {
+  target.dispatchEvent(new CustomEvent(EventUploadStateChanged, {bubbles: true}));
+}
+
+function uploadFile(dropzoneEl: HTMLElement, file: File) {
+  return new Promise((resolve) => {
+    const curUploadId = uploadIdCounter++;
+    (file as any)._giteaUploadId = curUploadId;
+    const dropzoneInst = dropzoneEl.dropzone;
+    const onUploadDone = ({file}: {file: any}) => {
+      if (file._giteaUploadId === curUploadId) {
+        dropzoneInst.off(DropzoneCustomEventUploadDone, onUploadDone);
+        resolve(file);
+      }
+    };
+    dropzoneInst.on(DropzoneCustomEventUploadDone, onUploadDone);
+    // FIXME: this is not entirely correct because `file` does not satisfy DropzoneFile (we have abused the Dropzone for long time)
+    dropzoneInst.addFile(file as DropzoneFile);
+  });
+}
+
+class TextareaEditor {
+  editor: HTMLTextAreaElement;
+
+  constructor(editor: HTMLTextAreaElement) {
+    this.editor = editor;
+  }
+
+  insertPlaceholder(value: string) {
+    textareaInsertText(this.editor, value);
+  }
+
+  replacePlaceholder(oldVal: string, newVal: string) {
+    const editor = this.editor;
+    const startPos = editor.selectionStart;
+    const endPos = editor.selectionEnd;
+    if (editor.value.substring(startPos, endPos) === oldVal) {
+      editor.value = editor.value.substring(0, startPos) + newVal + editor.value.substring(endPos);
+      editor.selectionEnd = startPos + newVal.length;
+    } else {
+      editor.value = editor.value.replace(oldVal, newVal);
+      editor.selectionEnd -= oldVal.length;
+      editor.selectionEnd += newVal.length;
+    }
+    editor.selectionStart = editor.selectionEnd;
+    editor.focus();
+    triggerEditorContentChanged(editor);
+  }
+}
+
+class CodeMirrorEditor {
+  editor: CodeMirror.EditorFromTextArea;
+
+  constructor(editor: CodeMirror.EditorFromTextArea) {
+    this.editor = editor;
+  }
+
+  insertPlaceholder(value: string) {
+    const editor = this.editor;
+    const startPoint = editor.getCursor('start');
+    const endPoint = editor.getCursor('end');
+    editor.replaceSelection(value);
+    endPoint.ch = startPoint.ch + value.length;
+    editor.setSelection(startPoint, endPoint);
+    editor.focus();
+    triggerEditorContentChanged(editor.getTextArea());
+  }
+
+  replacePlaceholder(oldVal: string, newVal: string) {
+    const editor = this.editor;
+    const endPoint = editor.getCursor('end');
+    if (editor.getSelection() === oldVal) {
+      editor.replaceSelection(newVal);
+    } else {
+      editor.setValue(editor.getValue().replace(oldVal, newVal));
+    }
+    endPoint.ch -= oldVal.length;
+    endPoint.ch += newVal.length;
+    editor.setSelection(endPoint, endPoint);
+    editor.focus();
+    triggerEditorContentChanged(editor.getTextArea());
+  }
+}
+
+async function handleUploadFiles(editor: CodeMirrorEditor | TextareaEditor, dropzoneEl: HTMLElement, files: Array<File> | FileList, e: Event) {
+  e.preventDefault();
+  for (const file of files) {
+    const name = file.name.slice(0, file.name.lastIndexOf('.'));
+    const {width, dppx} = await imageInfo(file);
+    const placeholder = `[${name}](uploading ...)`;
+
+    editor.insertPlaceholder(placeholder);
+    await uploadFile(dropzoneEl, file); // the "file" will get its "uuid" during the upload
+    editor.replacePlaceholder(placeholder, generateMarkdownLinkForAttachment(file, {width, dppx}));
+  }
+}
+
+export function removeAttachmentLinksFromMarkdown(text: string, fileUuid: string) {
+  text = text.replace(new RegExp(`!?\\[([^\\]]+)\\]\\(/?attachments/${fileUuid}\\)`, 'g'), '');
+  text = text.replace(new RegExp(`[<]img[^>]+src="/?attachments/${fileUuid}"[^>]*>`, 'g'), '');
+  return text;
+}
+
+export function pasteAsMarkdownLink(textarea: {value: string, selectionStart: number, selectionEnd: number}, pastedText: string): string | null {
+  const {value, selectionStart, selectionEnd} = textarea;
+  const selectedText = value.substring(selectionStart, selectionEnd);
+  const trimmedText = pastedText.trim();
+  const beforeSelection = value.substring(0, selectionStart);
+  const afterSelection = value.substring(selectionEnd);
+  const isInMarkdownLink = beforeSelection.endsWith('](') && afterSelection.startsWith(')');
+  const asMarkdownLink = selectedText && isUrl(trimmedText) && !isUrl(selectedText) && !isInMarkdownLink;
+  return asMarkdownLink ? `[${selectedText}](${trimmedText})` : null;
+}
+
+function handleClipboardText(textarea: HTMLTextAreaElement, e: ClipboardEvent, pastedText: string, isShiftDown: boolean) {
+  // pasting with "shift" means "paste as original content" in most applications
+  if (isShiftDown) return; // let the browser handle it
+
+  // when pasting links over selected text, turn it into [text](link)
+  const pastedAsMarkdown = pasteAsMarkdownLink(textarea, pastedText);
+  if (pastedAsMarkdown) {
+    e.preventDefault();
+    replaceTextareaSelection(textarea, pastedAsMarkdown);
+  }
+  // else, let the browser handle it
+}
+
+// extract text and images from "paste" event
+function getPastedContent(e: ClipboardEvent) {
+  const images = [];
+  for (const item of e.clipboardData?.items ?? []) {
+    if (item.type?.startsWith('image/')) {
+      images.push(item.getAsFile());
+    }
+  }
+  const text = e.clipboardData?.getData?.('text') ?? '';
+  return {text, images};
+}
+
+export function initEasyMDEPaste(easyMDE: EasyMDE, dropzoneEl: HTMLElement) {
+  const editor = new CodeMirrorEditor(easyMDE.codemirror as any);
+  easyMDE.codemirror.on('paste', (_, e) => {
+    const {images} = getPastedContent(e);
+    if (!images.length) return;
+    handleUploadFiles(editor, dropzoneEl, images, e);
+  });
+  easyMDE.codemirror.on('drop', (_, e) => {
+    if (!e.dataTransfer.files.length) return;
+    handleUploadFiles(editor, dropzoneEl, e.dataTransfer.files, e);
+  });
+  dropzoneEl.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}) => {
+    const oldText = easyMDE.codemirror.getValue();
+    const newText = removeAttachmentLinksFromMarkdown(oldText, fileUuid);
+    if (oldText !== newText) easyMDE.codemirror.setValue(newText);
+  });
+}
+
+export function initTextareaEvents(textarea: HTMLTextAreaElement, dropzoneEl: HTMLElement) {
+  let isShiftDown = false;
+  textarea.addEventListener('keydown', (e: KeyboardEvent) => {
+    if (e.shiftKey) isShiftDown = true;
+  });
+  textarea.addEventListener('keyup', (e: KeyboardEvent) => {
+    if (!e.shiftKey) isShiftDown = false;
+  });
+  textarea.addEventListener('paste', (e: ClipboardEvent) => {
+    const {images, text} = getPastedContent(e);
+    if (images.length && dropzoneEl) {
+      handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, images, e);
+    } else if (text) {
+      handleClipboardText(textarea, e, text, isShiftDown);
+    }
+  });
+  textarea.addEventListener('drop', (e: DragEvent) => {
+    if (!e.dataTransfer.files.length) return;
+    if (!dropzoneEl) return;
+    handleUploadFiles(new TextareaEditor(textarea), dropzoneEl, e.dataTransfer.files, e);
+  });
+  dropzoneEl?.dropzone.on(DropzoneCustomEventRemovedFile, ({fileUuid}: {fileUuid: string}) => {
+    const newText = removeAttachmentLinksFromMarkdown(textarea.value, fileUuid);
+    if (textarea.value !== newText) textarea.value = newText;
+  });
+}
--- a/web_src/js/features/comp/LabelEdit.ts
+++ b/web_src/js/features/comp/LabelEdit.ts
@@ -0,0 +1,93 @@
+import {toggleElem} from '../../utils/dom.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {submitFormFetchAction} from '../common-fetch-action.ts';
+
+function nameHasScope(name: string): boolean {
+  return /.*[^/]\/[^/].*/.test(name);
+}
+
+export function initCompLabelEdit(pageSelector: string) {
+  const pageContent = document.querySelector<HTMLElement>(pageSelector);
+  if (!pageContent) return;
+
+  // for guest view, the modal is not available, the "labels" are read-only
+  const elModal = pageContent.querySelector<HTMLElement>('#issue-label-edit-modal');
+  if (!elModal) return;
+
+  const elLabelId = elModal.querySelector<HTMLInputElement>('input[name="id"]');
+  const elNameInput = elModal.querySelector<HTMLInputElement>('.label-name-input');
+  const elExclusiveField = elModal.querySelector('.label-exclusive-input-field');
+  const elExclusiveInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-input');
+  const elExclusiveWarning = elModal.querySelector('.label-exclusive-warning');
+  const elExclusiveOrderField = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input-field');
+  const elExclusiveOrderInput = elModal.querySelector<HTMLInputElement>('.label-exclusive-order-input');
+  const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field');
+  const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input');
+  const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input');
+  const elColorInput = elModal.querySelector<HTMLInputElement>('.color-picker-combo input');
+
+  const syncModalUi = () => {
+    const hasScope = nameHasScope(elNameInput.value);
+    elExclusiveField.classList.toggle('disabled', !hasScope);
+    const showExclusiveWarning = hasScope && elExclusiveInput.checked && elModal.hasAttribute('data-need-warn-exclusive');
+    toggleElem(elExclusiveWarning, showExclusiveWarning);
+    if (!hasScope) elExclusiveInput.checked = false;
+    toggleElem(elExclusiveOrderField, elExclusiveInput.checked);
+
+    if (parseInt(elExclusiveOrderInput.value) <= 0) {
+      elExclusiveOrderInput.style.color = 'var(--color-placeholder-text) !important';
+    } else {
+      elExclusiveOrderInput.style.color = null;
+    }
+  };
+
+  const showLabelEditModal = (btn:HTMLElement) => {
+    // the "btn" should contain the label's attributes by its `data-label-xxx` attributes
+    const form = elModal.querySelector<HTMLFormElement>('form');
+    elLabelId.value = btn.getAttribute('data-label-id') || '';
+    elNameInput.value = btn.getAttribute('data-label-name') || '';
+    elExclusiveOrderInput.value = btn.getAttribute('data-label-exclusive-order') || '0';
+    elIsArchivedInput.checked = btn.getAttribute('data-label-is-archived') === 'true';
+    elExclusiveInput.checked = btn.getAttribute('data-label-exclusive') === 'true';
+    elDescInput.value = btn.getAttribute('data-label-description') || '';
+    elColorInput.value = btn.getAttribute('data-label-color') || '';
+    elColorInput.dispatchEvent(new Event('input', {bubbles: true})); // trigger the color picker
+
+    // if label id exists: "edit label" mode; otherwise: "new label" mode
+    const isEdit = Boolean(elLabelId.value);
+
+    // if a label was not exclusive but has issues, then it should warn user if it will become exclusive
+    const numIssues = parseInt(btn.getAttribute('data-label-num-issues') || '0');
+    elModal.toggleAttribute('data-need-warn-exclusive', !elExclusiveInput.checked && numIssues > 0);
+    elModal.querySelector('.header').textContent = isEdit ? elModal.getAttribute('data-text-edit-label') : elModal.getAttribute('data-text-new-label');
+
+    const curPageLink = elModal.getAttribute('data-current-page-link');
+    form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`;
+    toggleElem(elIsArchivedField, isEdit);
+    syncModalUi();
+    fomanticQuery(elModal).modal({
+      onApprove() {
+        if (!form.checkValidity()) {
+          form.reportValidity();
+          return false;
+        }
+        submitFormFetchAction(form);
+        return false;
+      },
+    }).modal('show');
+  };
+
+  elModal.addEventListener('input', () => syncModalUi());
+
+  // theoretically, if the modal exists, the "new label" button should also exist, just in case it doesn't, use "?."
+  const elNewLabel = pageContent.querySelector<HTMLElement>('.ui.button.new-label');
+  elNewLabel?.addEventListener('click', () => showLabelEditModal(elNewLabel));
+
+  const elEditLabelButtons = pageContent.querySelectorAll<HTMLElement>('.edit-label-button');
+  for (const btn of elEditLabelButtons) {
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      showLabelEditModal(btn);
+    });
+  }
+}
--- a/web_src/js/features/comp/QuickSubmit.ts
+++ b/web_src/js/features/comp/QuickSubmit.ts
@@ -0,0 +1,25 @@
+import {querySingleVisibleElem} from '../../utils/dom.ts';
+
+export function handleGlobalEnterQuickSubmit(target: HTMLElement) {
+  let form = target.closest('form');
+  if (form) {
+    if (!form.checkValidity()) {
+      form.reportValidity();
+    } else {
+      // here use the event to trigger the submit event (instead of calling `submit()` method directly)
+      // otherwise the `areYouSure` handler won't be executed, then there will be an annoying "confirm to leave" dialog
+      form.dispatchEvent(new SubmitEvent('submit', {bubbles: true, cancelable: true}));
+    }
+    return true;
+  }
+  form = target.closest('.ui.form');
+  if (form) {
+    // A form should only have at most one "primary" button to do quick-submit.
+    // Here we don't use a special class to mark the primary button,
+    // because there could be a lot of forms with a primary button, the quick submit should work out-of-box,
+    // but not keeps asking developers to add that special class again and again (it could be forgotten easily)
+    querySingleVisibleElem<HTMLButtonElement>(form, '.ui.primary.button')?.click();
+    return true;
+  }
+  return false;
+}
--- a/web_src/js/features/comp/ReactionSelector.ts
+++ b/web_src/js/features/comp/ReactionSelector.ts
@@ -0,0 +1,31 @@
+import {POST} from '../../modules/fetch.ts';
+import type {DOMEvent} from '../../utils/dom.ts';
+import {registerGlobalEventFunc} from '../../modules/observer.ts';
+
+export function initCompReactionSelector() {
+  registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: DOMEvent<MouseEvent>) => {
+    // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
+    e.preventDefault();
+
+    if (target.classList.contains('disabled')) return;
+
+    const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+    const reactionContent = target.getAttribute('data-reaction-content');
+
+    const commentContainer = target.closest('.comment-container');
+
+    const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
+    const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
+    const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
+
+    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+      data: new URLSearchParams({content: reactionContent}),
+    });
+
+    const data = await res.json();
+    bottomReactions?.remove();
+    if (data.html) {
+      commentContainer.insertAdjacentHTML('beforeend', data.html);
+    }
+  });
+}
--- a/web_src/js/features/comp/SearchUserBox.ts
+++ b/web_src/js/features/comp/SearchUserBox.ts
@@ -0,0 +1,48 @@
+import {htmlEscape} from '../../utils/html.ts';
+import {fomanticQuery} from '../../modules/fomantic/base.ts';
+
+const {appSubUrl} = window.config;
+const looksLikeEmailAddressCheck = /^\S+@\S+$/;
+
+export function initCompSearchUserBox() {
+  const searchUserBox = document.querySelector('#search-user-box');
+  if (!searchUserBox) return;
+
+  const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
+  const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
+  fomanticQuery(searchUserBox).search({
+    minCharacters: 2,
+    apiSettings: {
+      url: `${appSubUrl}/user/search_candidates?q={query}`,
+      onResponse(response: any) {
+        const resultItems = [];
+        const searchQuery = searchUserBox.querySelector('input').value;
+        const searchQueryUppercase = searchQuery.toUpperCase();
+        for (const item of response.data) {
+          const resultItem = {
+            title: item.login,
+            image: item.avatar_url,
+            description: htmlEscape(item.full_name),
+          };
+          if (searchQueryUppercase === item.login.toUpperCase()) {
+            resultItems.unshift(resultItem); // add the exact match to the top
+          } else {
+            resultItems.push(resultItem);
+          }
+        }
+
+        if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
+          const resultItem = {
+            title: searchQuery,
+            description: allowEmailDescription,
+          };
+          resultItems.push(resultItem);
+        }
+
+        return {results: resultItems};
+      },
+    },
+    searchFields: ['login', 'full_name'],
+    showNoResults: false,
+  });
+}
--- a/web_src/js/features/comp/TextExpander.ts
+++ b/web_src/js/features/comp/TextExpander.ts
@@ -0,0 +1,127 @@
+import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
+import {emojiString} from '../emoji.ts';
+import {svg} from '../../svg.ts';
+import {parseIssueHref, parseRepoOwnerPathInfo} from '../../utils.ts';
+import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
+import {getIssueColor, getIssueIcon} from '../issue.ts';
+import {debounce} from 'perfect-debounce';
+import type TextExpanderElement from '@github/text-expander-element';
+import type {TextExpanderChangeEvent, TextExpanderResult} from '@github/text-expander-element';
+
+async function fetchIssueSuggestions(key: string, text: string): Promise<TextExpanderResult> {
+  const issuePathInfo = parseIssueHref(window.location.href);
+  if (!issuePathInfo.ownerName) {
+    const repoOwnerPathInfo = parseRepoOwnerPathInfo(window.location.pathname);
+    issuePathInfo.ownerName = repoOwnerPathInfo.ownerName;
+    issuePathInfo.repoName = repoOwnerPathInfo.repoName;
+    // then no issuePathInfo.indexString here, it is only used to exclude the current issue when "matchIssue"
+  }
+  if (!issuePathInfo.ownerName) return {matched: false};
+
+  const matches = await matchIssue(issuePathInfo.ownerName, issuePathInfo.repoName, issuePathInfo.indexString, text);
+  if (!matches.length) return {matched: false};
+
+  const ul = createElementFromAttrs('ul', {class: 'suggestions'});
+  for (const issue of matches) {
+    const li = createElementFromAttrs(
+      'li', {role: 'option', class: 'tw-flex tw-gap-2', 'data-value': `${key}${issue.number}`},
+      createElementFromHTML(svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)])),
+      createElementFromAttrs('span', null, `#${issue.number}`),
+      createElementFromAttrs('span', null, issue.title),
+    );
+    ul.append(li);
+  }
+  return {matched: true, fragment: ul};
+}
+
+export function initTextExpander(expander: TextExpanderElement) {
+  if (!expander) return;
+
+  const textarea = expander.querySelector<HTMLTextAreaElement>('textarea');
+
+  // help to fix the text-expander "multiword+promise" bug: do not show the popup when there is no "#" before current line
+  const shouldShowIssueSuggestions = () => {
+    const posVal = textarea.value.substring(0, textarea.selectionStart);
+    const lineStart = posVal.lastIndexOf('\n');
+    const keyStart = posVal.lastIndexOf('#');
+    return keyStart > lineStart;
+  };
+
+  const debouncedIssueSuggestions = debounce(async (key: string, text: string): Promise<TextExpanderResult> => {
+    // https://github.com/github/text-expander-element/issues/71
+    // Upstream bug: when using "multiword+promise", TextExpander will get wrong "key" position.
+    // To reproduce, comment out the "shouldShowIssueSuggestions" check, use the "await sleep" below,
+    // then use content "close #20\nclose #20\nclose #20" (3 lines), keep changing the last line `#20` part from the end (including removing the `#`)
+    // There will be a JS error: Uncaught (in promise) IndexSizeError: Failed to execute 'setStart' on 'Range': The offset 28 is larger than the node's length (27).
+
+    // check the input before the request, to avoid emitting empty query to backend (still related to the upstream bug)
+    if (!shouldShowIssueSuggestions()) return {matched: false};
+    // await sleep(Math.random() * 1000); // help to reproduce the text-expander bug
+    const ret = await fetchIssueSuggestions(key, text);
+    // check the input again to avoid text-expander using incorrect position (upstream bug)
+    if (!shouldShowIssueSuggestions()) return {matched: false};
+    return ret;
+  }, 300); // to match onInputDebounce delay
+
+  expander.addEventListener('text-expander-change', (e: TextExpanderChangeEvent) => {
+    const {key, text, provide} = e.detail;
+    if (key === ':') {
+      const matches = matchEmoji(text);
+      if (!matches.length) return provide({matched: false});
+
+      const ul = document.createElement('ul');
+      ul.classList.add('suggestions');
+      for (const name of matches) {
+        const emoji = emojiString(name);
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-value', emoji);
+        li.textContent = `${emoji} ${name}`;
+        ul.append(li);
+      }
+
+      provide({matched: true, fragment: ul});
+    } else if (key === '@') {
+      const matches = matchMention(text);
+      if (!matches.length) return provide({matched: false});
+
+      const ul = document.createElement('ul');
+      ul.classList.add('suggestions');
+      for (const {value, name, fullname, avatar} of matches) {
+        const li = document.createElement('li');
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-value', `${key}${value}`);
+
+        const img = document.createElement('img');
+        img.src = avatar;
+        li.append(img);
+
+        const nameSpan = document.createElement('span');
+        nameSpan.classList.add('name');
+        nameSpan.textContent = name;
+        li.append(nameSpan);
+
+        if (fullname && fullname.toLowerCase() !== name) {
+          const fullnameSpan = document.createElement('span');
+          fullnameSpan.classList.add('fullname');
+          fullnameSpan.textContent = fullname;
+          li.append(fullnameSpan);
+        }
+
+        ul.append(li);
+      }
+
+      provide({matched: true, fragment: ul});
+    } else if (key === '#') {
+      provide(debouncedIssueSuggestions(key, text));
+    }
+  });
+
+  expander.addEventListener('text-expander-value', ({detail}: Record<string, any>) => {
+    if (detail?.item) {
+      // add a space after @mentions and #issue as it's likely the user wants one
+      const suffix = ['@', '#'].includes(detail.key) ? ' ' : '';
+      detail.value = `${detail.item.getAttribute('data-value')}${suffix}`;
+    }
+  });
+}
--- a/web_src/js/features/comp/WebHookEditor.ts
+++ b/web_src/js/features/comp/WebHookEditor.ts
@@ -0,0 +1,44 @@
+import {POST} from '../../modules/fetch.ts';
+import {hideElem, showElem, toggleElem} from '../../utils/dom.ts';
+
+export function initCompWebHookEditor() {
+  if (!document.querySelectorAll('.new.webhook').length) {
+    return;
+  }
+
+  for (const input of document.querySelectorAll<HTMLInputElement>('.events.checkbox input')) {
+    input.addEventListener('change', function () {
+      if (this.checked) {
+        showElem('.events.fields');
+      }
+    });
+  }
+
+  for (const input of document.querySelectorAll<HTMLInputElement>('.non-events.checkbox input')) {
+    input.addEventListener('change', function () {
+      if (this.checked) {
+        hideElem('.events.fields');
+      }
+    });
+  }
+
+  // some webhooks (like Gitea) allow to set the request method (GET/POST), and it would toggle the "Content Type" field
+  const httpMethodInput = document.querySelector<HTMLInputElement>('#http_method');
+  if (httpMethodInput) {
+    const updateContentType = function () {
+      const visible = httpMethodInput.value === 'POST';
+      toggleElem(document.querySelector('#content_type').closest('.field'), visible);
+    };
+    updateContentType();
+    httpMethodInput.addEventListener('change', updateContentType);
+  }
+
+  // Test delivery
+  document.querySelector<HTMLButtonElement>('#test-delivery')?.addEventListener('click', async function () {
+    this.classList.add('is-loading', 'disabled');
+    await POST(this.getAttribute('data-link'));
+    setTimeout(() => {
+      window.location.href = this.getAttribute('data-redirect');
+    }, 5000);
+  });
+}