Enable more markdown paste features in textarea

Author: silverwind

package.json

@@ -11,6 +11,7 @@
     "@citation-js/plugin-csl": "0.7.18",
     "@citation-js/plugin-software-formats": "0.6.1",
     "@github/markdown-toolbar-element": "2.2.3",
+    "@github/paste-markdown": "1.5.3",
     "@github/relative-time-element": "4.4.8",
     "@github/text-expander-element": "2.9.2",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",

pnpm-lock.yaml

@@ -1,12 +1,12 @@
 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 {subscribe} from '@github/paste-markdown';
 import type CodeMirror from 'codemirror';
 import type EasyMDE from 'easymde';
 import type {DropzoneFile} from 'dropzone';
@@ -129,35 +129,20 @@ export function pasteAsMarkdownLink(textarea: {value: string, selectionStart: nu
   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 = [];
+function getPastedImages(e: ClipboardEvent) {
+  const images: Array<File> = [];
   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};
+  return 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);
+    const images = getPastedImages(e);
     if (!images.length) return;
     handleUploadFiles(editor, dropzoneEl, images, e);
   });
@@ -173,19 +158,11 @@ export function initEasyMDEPaste(easyMDE: EasyMDE, dropzoneEl: HTMLElement) {
 }
 
 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;
-  });
+  subscribe(textarea); // enable paste-related features
   textarea.addEventListener('paste', (e: ClipboardEvent) => {
-    const {images, text} = getPastedContent(e);
+    const images = getPastedImages(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) => {

web_src/js/features/comp/EditorUpload.ts

@@ -286,28 +286,6 @@ export function isElemVisible(el: HTMLElement): boolean {
   return !el.classList.contains('tw-hidden') && (el.offsetWidth || el.offsetHeight || el.getClientRects().length) && el.style.display !== 'none';
 }
 
-/** replace selected text in a textarea while preserving editor history, e.g. CTRL-Z works after this */
-export function replaceTextareaSelection(textarea: HTMLTextAreaElement, text: string) {
-  const before = textarea.value.slice(0, textarea.selectionStart ?? undefined);
-  const after = textarea.value.slice(textarea.selectionEnd ?? undefined);
-  let success = false;
-
-  textarea.contentEditable = 'true';
-  try {
-    success = document.execCommand('insertText', false, text); // eslint-disable-line @typescript-eslint/no-deprecated
-  } catch {} // ignore the error if execCommand is not supported or failed
-  textarea.contentEditable = 'false';
-
-  if (success && !textarea.value.slice(0, textarea.selectionStart ?? undefined).endsWith(text)) {
-    success = false;
-  }
-
-  if (!success) {
-    textarea.value = `${before}${text}${after}`;
-    textarea.dispatchEvent(new CustomEvent('change', {bubbles: true, cancelable: true}));
-  }
-}
-
 export function createElementFromHTML<T extends HTMLElement>(htmlString: string): T {
   htmlString = htmlString.trim();
   // There is no way to create some elements without a proper parent, jQuery's approach: https://github.com/jquery/jquery/blob/main/src/manipulation/wrapMap.js