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:
parent
06782872c4
commit
621e1ff9c9
3 changed files with 121 additions and 18 deletions
|
@ -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});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue