Improve markdown textarea for indentation and lists

web_src/js/features/comp/ComboMarkdownEditor.js

@@ -10,6 +10,7 @@ import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
 import {initTextExpander} from './TextExpander.js';
 import {showErrorToast} from '../../modules/toast.js';
 import {POST} from '../../modules/fetch.js';
+import {initTextareaMarkdown} from './EditorMarkdown.js';
 
 let elementIdCounter = 0;
 
@@ -84,17 +85,6 @@ class ComboMarkdownEditor {
  if (el.nodeName === 'BUTTON' && !el.getAttribute('type')) el.setAttribute('type', 'button');
  }
 
- this.textarea.addEventListener('keydown', (e) => {
- if (e.shiftKey) {
- e.target._shiftDown = true;
- }
- });
- this.textarea.addEventListener('keyup', (e) => {
- if (!e.shiftKey) {
- e.target._shiftDown = false;
- }
- });
-
  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');
@@ -118,6 +108,7 @@ class ComboMarkdownEditor {
  await this.switchToEasyMDE();
  });
 
+ initTextareaMarkdown(this.textarea);
  if (this.dropzone) {
  initTextareaPaste(this.textarea, this.dropzone);
  }

web_src/js/features/comp/EditorMarkdown.js

@@ -0,0 +1,103 @@
+import {triggerEditorContentChanged} from './Paste.js';
+
+function handleIndentSelection(textarea, e) {
+ 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);
+}
+
+function handleNewline(textarea, e) {
+ const selStart = textarea.selectionStart;
+ const selEnd = textarea.selectionEnd;
+ if (selEnd !== selStart) return; // do not process when there is a selection
+
+ const value = textarea.value;
+
+ // find the current line
+ // * if selStart is 0, lastIndexOf(..., -1) is the same as lastIndexOf(..., 0)
+ // * if lastIndexOf reruns -1, lineStart is 0 and it is still correct.
+ const lineStart = value.lastIndexOf('\n', selStart - 1) + 1;
+ let lineEnd = value.indexOf('\n', selStart);
+ lineEnd = lineEnd < 0 ? value.length : lineEnd;
+ let line = value.slice(lineStart, lineEnd);
+ if (!line) return; // if the line is empty, do nothing, let the browser handle it
+
+ // parse the indention
+ const indention = /^\s*/.exec(line)[0];
+ line = line.slice(indention.length);
+
+ // parse the prefixes: "1. ", "- ", "* ", "[ ] ", "[x] "
+ // there must be a space after the prefix because none of "1.foo" / "-foo" is a list item
+ const prefixMatch = /^([0-9]+\.|[-*]|\[ \]|\[x\])\s/.exec(line);
+ let prefix = '';
+ if (prefixMatch) {
+ prefix = prefixMatch[0];
+ if (lineStart + prefix.length > selStart) prefix = ''; // do not add new line if cursor is at prefix
+ }
+
+ line = line.slice(prefix.length);
+ if (!indention && !prefix) return; // if no indention and no prefix, do nothing, let the browser handle it
+
+ e.preventDefault();
+ if (!line) {
+ // clear current line if we only have i.e. '1. ' and the user presses enter again to finish creating a list
+ textarea.value = value.slice(0, lineStart) + value.slice(lineEnd);
+ } else {
+ // start a new line with the same indention and prefix
+ let newPrefix = prefix;
+ if (newPrefix === '[x]') newPrefix = '[ ]';
+ if (/^\d+\./.test(newPrefix)) newPrefix = `1. `; // a simple approach, otherwise it needs to parse the lines after the current line
+ const newLine = `\n${indention}${newPrefix}`;
+ textarea.value = value.slice(0, selStart) + newLine + value.slice(selEnd);
+ textarea.setSelectionRange(selStart + newLine.length, selStart + newLine.length);
+ }
+ triggerEditorContentChanged(textarea);
+}
+
+export function initTextareaMarkdown(textarea) {
+ textarea.addEventListener('keydown', (e) => {
+ 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);
+ }
+ });
+}

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});
  }
  });
 }