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
This commit is contained in:
wxiaoguang 2024-06-21 16:14:40 +08:00 committed by GitHub
parent 06782872c4
commit 621e1ff9c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 121 additions and 18 deletions

View file

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