vditor 3.9.1 → 3.9.3

package/src/ts/markdown/speechRender.ts

@@ -95,7 +95,7 @@ export const speechRender = (element: HTMLElement, lang: keyof II18n = "zh_CN")
         speechDom.innerHTML = playSVG;
         speechDom.style.display = "block";
         speechDom.style.top = (rect.top + rect.height + document.querySelector("html").scrollTop - 20) + "px";
-        speechDom.style.left = (event.screenX + 2) + "px";
+        speechDom.style.left = (event.clientX + 2) + "px";
         speechDom.setAttribute("data-text", text);
     });
 };

package/src/ts/toolbar/Headings.ts

@@ -31,6 +31,8 @@ export class Headings extends MenuItem {
         const actionBtn = this.element.children[0] as HTMLElement;
         actionBtn.addEventListener(getEventName(), (event) => {
             event.preventDefault();
+            // https://github.com/Vanessa219/vditor/issues/1391
+            clearTimeout(vditor.wysiwyg.afterRenderTimeoutId);
             if (actionBtn.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }

package/src/ts/util/editorCommonEvent.ts

@@ -114,6 +114,9 @@ export const scrollCenter = (vditor: IVditor) => {
 
 export const hotkeyEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("keydown", (event: KeyboardEvent & { target: HTMLElement }) => {
+        if (!event.isComposing && vditor.options.keydown) {
+            vditor.options.keydown(event);
+        }
         // hint: 上下选择
         if ((vditor.options.hint.extend.length > 1 || vditor.toolbar.elements.emoji) &&
             vditor.hint.select(event, vditor)) {

package/src/ts/util/fixBrowserBehavior.ts

@@ -1447,6 +1447,10 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
                 }
             }
         } else if (textPlain.trim() !== "" && files.length === 0) {
+            const range = getEditorRange(vditor);
+            if (range.toString() !== ""  && vditor.lute.IsValidLinkDest(textPlain)) {
+                textPlain = `[${range.toString()}](${textPlain})`;
+            }
             if (vditor.currentMode === "ir") {
                 renderers.Md2VditorIRDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});

package/src/ts/util/processCode.ts

@@ -63,10 +63,6 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         return;
     }
     const language = previewPanel.firstElementChild.className.replace("language-", "");
-    if (!language) {
-        codeRender(previewPanel);
-        return;
-    }
     if (language === "abc") {
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -489,7 +489,12 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     event.preventDefault();
                     return;
                 }
-                removeBlockElement(vditor, event);
+                if (removeBlockElement(vditor, event)) {
+                    return;
+                }
+                if (focusToElement(event, range)) {
+                    return;
+                }
             };
 
             const input2Wrap = document.createElement("span");
@@ -517,7 +522,12 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     event.preventDefault();
                     return;
                 }
-                removeBlockElement(vditor, event);
+                if (removeBlockElement(vditor, event)) {
+                    return;
+                }
+                if (focusToElement(event, range)) {
+                    return;
+                }
             };
 
             genUp(range, tableElement, vditor);
@@ -541,7 +551,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
         // link ref popover
         const linkRefElement = hasClosestByAttribute(typeElement, "data-type", "link-ref");
         if (linkRefElement) {
-            genLinkRefPopover(vditor, linkRefElement);
+            genLinkRefPopover(vditor, linkRefElement, range);
         }
 
         // footnote popover
@@ -569,19 +579,12 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                 if (event.isComposing) {
                     return;
                 }
-                if (
-                    !isCtrl(event) &&
-                    !event.shiftKey &&
-                    event.altKey &&
-                    event.key === "Enter"
-                ) {
-                    range.selectNodeContents(footnotesRefElement);
-                    range.collapse(false);
-                    setSelectionFocus(range);
-                    event.preventDefault();
+                if (removeBlockElement(vditor, event)) {
+                    return;
+                }
+                if (focusToElement(event, range)) {
                     return;
                 }
-                removeBlockElement(vditor, event);
             };
 
             genClose(footnotesRefElement, vditor);
@@ -660,17 +663,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                         return;
                     }
                     vditor.hint.select(event, vditor);
-                    if (
-                        !isCtrl(event) &&
-                        !event.shiftKey &&
-                        event.key === "Enter"
-                    ) {
-                        range.setStart(codeElement.firstChild, 0);
-                        range.collapse(true);
-                        setSelectionFocus(range);
-                        event.preventDefault();
-                        event.stopPropagation();
-                    }
+                    focusToElement(event, range);
                 };
                 language.onkeyup = (event: KeyboardEvent) => {
                     if (
@@ -720,19 +713,12 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                 if (event.isComposing) {
                     return;
                 }
-                if (
-                    !isCtrl(event) &&
-                    !event.shiftKey &&
-                    event.altKey &&
-                    event.key === "Enter"
-                ) {
-                    range.selectNodeContents(headingElement);
-                    range.collapse(false);
-                    setSelectionFocus(range);
-                    event.preventDefault();
+                if (removeBlockElement(vditor, event)) {
+                    return;
+                }
+                if (focusToElement(event, range)) {
                     return;
                 }
-                removeBlockElement(vditor, event);
             };
 
             genUp(range, headingElement, vditor);
@@ -744,7 +730,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
 
         // a popover
         if (aElement) {
-            genAPopover(vditor, aElement);
+            genAPopover(vditor, aElement, range);
         }
 
         if (
@@ -802,9 +788,8 @@ const setPopoverPosition = (vditor: IVditor, element: HTMLElement) => {
     vditor.wysiwyg.popover.setAttribute("data-top", (targetElement.offsetTop - 21).toString());
 };
 
-export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement) => {
+export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement, range = getSelection().getRangeAt(0)) => {
     vditor.wysiwyg.popover.innerHTML = "";
-
     const updateLinkRef = () => {
         if (input.value.trim() !== "") {
             if (linkRefElement.tagName === "IMG") {
@@ -836,6 +821,9 @@ export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement)
         if (removeBlockElement(vditor, event)) {
             return;
         }
+        if (focusToElement(event, range)) {
+            return;
+        }
         linkHotkey(vditor, linkRefElement, event, input1);
     };
 
@@ -854,6 +842,9 @@ export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement)
         if (removeBlockElement(vditor, event)) {
             return;
         }
+        if (focusToElement(event, range)) {
+            return;
+        }
         linkHotkey(vditor, linkRefElement, event, input);
     };
 
@@ -932,7 +923,7 @@ const genClose = (element: HTMLElement, vditor: IVditor) => {
         element.remove();
         afterRenderEvent(vditor);
         highlightToolbarWYSIWYG(vditor);
-        if (["H1", "H2", "H3", "H4", "H5" ,"H6"].includes(element.tagName)) {
+        if (["H1", "H2", "H3", "H4", "H5", "H6"].includes(element.tagName)) {
             renderToc(vditor);
         }
     };
@@ -970,7 +961,7 @@ const linkHotkey = (
     }
 };
 
-export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
+export const genAPopover = (vditor: IVditor, aElement: HTMLElement, range: Range) => {
     vditor.wysiwyg.popover.innerHTML = "";
 
     const updateA = () => {
@@ -1001,6 +992,9 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
         if (removeBlockElement(vditor, event)) {
             return;
         }
+        if (focusToElement(event, range)) {
+            return;
+        }
         linkHotkey(vditor, aElement, event, input1);
     };
 
@@ -1019,6 +1013,9 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
         if (removeBlockElement(vditor, event)) {
             return;
         }
+        if (focusToElement(event, range)) {
+            return;
+        }
         linkHotkey(vditor, aElement, event, input2);
     };
 
@@ -1038,6 +1035,9 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement) => {
         if (removeBlockElement(vditor, event)) {
             return;
         }
+        if (focusToElement(event, range)) {
+            return;
+        }
         linkHotkey(vditor, aElement, event, input);
     };
 
@@ -1109,3 +1109,15 @@ export const genImagePopover = (event: Event, vditor: IVditor) => {
 
     setPopoverPosition(vditor, imgElement);
 };
+
+
+const focusToElement = (event: KeyboardEvent, range: Range) => {
+    if ((!isCtrl(event) && !event.shiftKey && event.key === "Enter") || event.key === "Escape") {
+        if (range) {
+            setSelectionFocus(range);
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        return true;
+    }
+};

package/src/ts/wysiwyg/processKeydown.ts

@@ -356,8 +356,8 @@ export const removeBlockElement = (vditor: IVditor, event: KeyboardEvent) => {
         const itemElement: HTMLElement = vditor.wysiwyg.popover.querySelector('[data-type="remove"]');
         if (itemElement) {
             itemElement.click();
-            event.preventDefault();
-            return true;
         }
+        event.preventDefault();
+        return true;
     }
 };

package/src/ts/wysiwyg/toolbarEvent.ts

@@ -216,7 +216,7 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element, event: Event)
                 range.insertNode(aElement);
                 range.setStart(aElement.firstChild, 1);
                 range.collapse(true);
-                genAPopover(vditor, aElement);
+                genAPopover(vditor, aElement, range);
                 const textInputElement = vditor.wysiwyg.popover.querySelector("input");
                 textInputElement.value = "";
                 textInputElement.focus();
@@ -228,7 +228,7 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element, event: Event)
                 range.surroundContents(node);
                 range.insertNode(node);
                 setSelectionFocus(range);
-                genAPopover(vditor, node);
+                genAPopover(vditor, node, range);
                 const textInputElements = vditor.wysiwyg.popover.querySelectorAll("input");
                 textInputElements[0].value = node.innerText;
                 textInputElements[1].focus();