Improve markdown textarea for indentation and lists (#31406)

Almost works like GitHub

* use Tab/Shift-Tab to indent/unindent the selected lines
* use Enter to insert a new line with the same indentation and prefix

1 files changed, 16 insertions, 7 deletions

diff --git a/web_src/js/features/comp/Paste.js b/web_src/js/features/comp/Paste.js
index 35a7ceaef8..c72434c4cc 100644
--- a/web_src/js/features/comp/Paste.js
+++ b/web_src/js/features/comp/Paste.js
@@ -12,7 +12,7 @@ async function uploadFile(file, uploadUrl) {
   return await res.json();
 }
 
-function triggerEditorContentChanged(target) {
+export function triggerEditorContentChanged(target) {
   target.dispatchEvent(new CustomEvent('ce-editor-content-changed', {bubbles: true}));
 }
 
@@ -124,17 +124,19 @@ async function handleClipboardImages(editor, dropzone, images, e) {
   }
 }
 
-function handleClipboardText(textarea, text, e) {
-  // when pasting links over selected text, turn it into [text](link), except when shift key is held
-  const {value, selectionStart, selectionEnd, _shiftDown} = textarea;
-  if (_shiftDown) return;
+function handleClipboardText(textarea, e, {text, isShiftDown}) {
+  // 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 {value, selectionStart, selectionEnd} = textarea;
   const selectedText = value.substring(selectionStart, selectionEnd);
   const trimmedText = text.trim();
   if (selectedText && isUrl(trimmedText)) {
-    e.stopPropagation();
     e.preventDefault();
     replaceTextareaSelection(textarea, `[${selectedText}](${trimmedText})`);
   }
+  // else, let the browser handle it
 }
 
 export function initEasyMDEPaste(easyMDE, dropzone) {
@@ -147,12 +149,19 @@ export function initEasyMDEPaste(easyMDE, dropzone) {
 }
 
 export function initTextareaPaste(textarea, dropzone) {
+  let isShiftDown = false;
+  textarea.addEventListener('keydown', (e) => {
+    if (e.shiftKey) isShiftDown = true;
+  });
+  textarea.addEventListener('keyup', (e) => {
+    if (!e.shiftKey) isShiftDown = false;
+  });
   textarea.addEventListener('paste', (e) => {
     const {images, text} = getPastedContent(e);
     if (images.length) {
       handleClipboardImages(new TextareaEditor(textarea), dropzone, images, e);
     } else if (text) {
-      handleClipboardText(textarea, text, e);
+      handleClipboardText(textarea, e, {text, isShiftDown});
     }
   });
 }