@8btc/mditor 0.0.2 → 0.0.4

package/src/ts/ir/process.ts

@@ -1,29 +1,56 @@
-import {Constants} from "../constants";
-import {getMarkdown} from "../markdown/getMarkdown";
-import {removeCurrentToolbar} from "../toolbar/setToolbar";
-import {accessLocalStorage} from "../util/compatibility";
-import {listToggle} from "../util/fixBrowserBehavior";
-import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
-import {getEditorRange, getSelectPosition, setRangeByWbr, setSelectionFocus} from "../util/selection";
-import {highlightToolbarIR} from "./highlightToolbarIR";
-import {input} from "./input";
+import { Constants } from "../constants";
+import { getMarkdown } from "../markdown/getMarkdown";
+import { removeCurrentToolbar } from "../toolbar/setToolbar";
+import { accessLocalStorage } from "../util/compatibility";
+import { listToggle } from "../util/fixBrowserBehavior";
+import {
+    hasClosestBlock,
+    hasClosestByAttribute,
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+} from "../util/hasClosest";
+import {
+    getEditorRange,
+    getSelectPosition,
+    setRangeByWbr,
+    setSelectionFocus,
+} from "../util/selection";
+import { highlightToolbarIR } from "./highlightToolbarIR";
+import { input } from "./input";
+import { attachLineNumbersToBlocksThrottled } from "../util/attachLineNumbers";
 
 export const processHint = (vditor: IVditor) => {
     vditor.hint.render(vditor);
     const startContainer = getEditorRange(vditor).startContainer;
     // 代码块语言提示
-    const preBeforeElement = hasClosestByAttribute(startContainer, "data-type", "code-block-info");
+    const preBeforeElement = hasClosestByAttribute(
+        startContainer,
+        "data-type",
+        "code-block-info"
+    );
     if (preBeforeElement) {
-        if (preBeforeElement.textContent.replace(Constants.ZWSP, "") === "" && vditor.hint.recentLanguage) {
-            preBeforeElement.textContent = Constants.ZWSP + vditor.hint.recentLanguage;
+        if (
+            preBeforeElement.textContent.replace(Constants.ZWSP, "") === "" &&
+            vditor.hint.recentLanguage
+        ) {
+            preBeforeElement.textContent =
+                Constants.ZWSP + vditor.hint.recentLanguage;
             const range = getEditorRange(vditor);
             range.selectNodeContents(preBeforeElement);
         } else {
             const matchLangData: IHintData[] = [];
-            const key =
-                preBeforeElement.textContent.substring(0, getSelectPosition(preBeforeElement, vditor.ir.element).start)
-                    .replace(Constants.ZWSP, "");
-            (vditor.options.preview.hljs.langs || Constants.ALIAS_CODE_LANGUAGES.concat((window.hljs?.listLanguages() ?? []).sort())).forEach((keyName) => {
+            const key = preBeforeElement.textContent
+                .substring(
+                    0,
+                    getSelectPosition(preBeforeElement, vditor.ir.element).start
+                )
+                .replace(Constants.ZWSP, "");
+            (
+                vditor.options.preview.hljs.langs ||
+                Constants.ALIAS_CODE_LANGUAGES.concat(
+                    (window.hljs?.listLanguages() ?? []).sort()
+                )
+            ).forEach((keyName) => {
                 if (keyName.indexOf(key.toLowerCase()) > -1) {
                     matchLangData.push({
                         html: keyName,
@@ -36,11 +63,14 @@ export const processHint = (vditor: IVditor) => {
     }
 };
 
-export const processAfterRender = (vditor: IVditor, options = {
-    enableAddUndoStack: true,
-    enableHint: false,
-    enableInput: true,
-}) => {
+export const processAfterRender = (
+    vditor: IVditor,
+    options = {
+        enableAddUndoStack: true,
+        enableHint: false,
+        enableInput: true,
+    }
+) => {
     if (options.enableHint) {
         processHint(vditor);
     }
@@ -73,14 +103,26 @@ export const processAfterRender = (vditor: IVditor, options = {
         if (options.enableAddUndoStack) {
             vditor.undo.addToUndoStack(vditor);
         }
+
+        try {
+            if (vditor.options.lineNumber) {
+                attachLineNumbersToBlocksThrottled(vditor.ir.element, text);
+            }
+        } catch {
+            void 0;
+        }
     }, vditor.options.undoDelay);
 };
 
 export const processHeading = (vditor: IVditor, value: string) => {
     const range = getEditorRange(vditor);
-    const headingElement = hasClosestBlock(range.startContainer) || range.startContainer as HTMLElement;
+    const headingElement =
+        hasClosestBlock(range.startContainer) ||
+        (range.startContainer as HTMLElement);
     if (headingElement) {
-        const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+        const headingMarkerElement = headingElement.querySelector(
+            ".vditor-ir__marker--heading"
+        );
         if (headingMarkerElement) {
             headingMarkerElement.innerHTML = value;
         } else {
@@ -94,18 +136,30 @@ export const processHeading = (vditor: IVditor, value: string) => {
 };
 
 const removeInline = (range: Range, vditor: IVditor, type: string) => {
-    const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", type) as HTMLElement;
+    const inlineElement = hasClosestByAttribute(
+        range.startContainer,
+        "data-type",
+        type
+    ) as HTMLElement;
     if (inlineElement) {
         inlineElement.firstElementChild.remove();
         inlineElement.lastElementChild.remove();
         range.insertNode(document.createElement("wbr"));
         const tempElement = document.createElement("div");
-        tempElement.innerHTML = vditor.lute.SpinVditorIRDOM(inlineElement.outerHTML);
-        inlineElement.outerHTML = tempElement.firstElementChild.innerHTML.trim();
+        tempElement.innerHTML = vditor.lute.SpinVditorIRDOM(
+            inlineElement.outerHTML
+        );
+        inlineElement.outerHTML =
+            tempElement.firstElementChild.innerHTML.trim();
     }
 };
 
-export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: string, suffix: string) => {
+export const processToolbar = (
+    vditor: IVditor,
+    actionBtn: Element,
+    prefix: string,
+    suffix: string
+) => {
     const range = getEditorRange(vditor);
     const commandName = actionBtn.getAttribute("data-type");
     let typeElement = range.startContainer as HTMLElement;
@@ -116,21 +170,35 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
     // 移除
     if (actionBtn.classList.contains("vditor-menu--current")) {
         if (commandName === "quote") {
-            const quoteElement = hasClosestByMatchTag(typeElement, "BLOCKQUOTE");
+            const quoteElement = hasClosestByMatchTag(
+                typeElement,
+                "BLOCKQUOTE"
+            );
             if (quoteElement) {
                 range.insertNode(document.createElement("wbr"));
-                quoteElement.outerHTML = quoteElement.innerHTML.trim() === "" ?
-                    `<p data-block="0">${quoteElement.innerHTML}</p>` : quoteElement.innerHTML;
+                quoteElement.outerHTML =
+                    quoteElement.innerHTML.trim() === ""
+                        ? `<p data-block="0">${quoteElement.innerHTML}</p>`
+                        : quoteElement.innerHTML;
             }
         } else if (commandName === "link") {
-            const aElement = hasClosestByAttribute(range.startContainer, "data-type", "a") as HTMLElement;
+            const aElement = hasClosestByAttribute(
+                range.startContainer,
+                "data-type",
+                "a"
+            ) as HTMLElement;
             if (aElement) {
-                const aTextElement = hasClosestByClassName(range.startContainer, "vditor-ir__link");
+                const aTextElement = hasClosestByClassName(
+                    range.startContainer,
+                    "vditor-ir__link"
+                );
                 if (aTextElement) {
                     range.insertNode(document.createElement("wbr"));
                     aElement.outerHTML = aTextElement.innerHTML;
                 } else {
-                    aElement.outerHTML = aElement.querySelector(".vditor-ir__link").innerHTML + "<wbr>";
+                    aElement.outerHTML =
+                        aElement.querySelector(".vditor-ir__link").innerHTML +
+                        "<wbr>";
                 }
             }
         } else if (commandName === "italic") {
@@ -141,7 +209,11 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
             removeInline(range, vditor, "s");
         } else if (commandName === "inline-code") {
             removeInline(range, vditor, "code");
-        } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
+        } else if (
+            commandName === "check" ||
+            commandName === "list" ||
+            commandName === "ordered-list"
+        ) {
             listToggle(vditor, range, commandName);
             useHighlight = false;
             actionBtn.classList.remove("vditor-menu--current");
@@ -155,7 +227,8 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
         const blockElement = hasClosestBlock(range.startContainer);
         if (commandName === "line") {
             if (blockElement) {
-                const hrHTML = '<hr data-block="0"><p data-block="0"><wbr>\n</p>';
+                const hrHTML =
+                    '<hr data-block="0"><p data-block="0"><wbr>\n</p>';
                 if (blockElement.innerHTML.trim() === "") {
                     blockElement.outerHTML = hrHTML;
                 } else {
@@ -179,8 +252,14 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
             document.execCommand("insertHTML", false, html);
             useHighlight = false;
             actionBtn.classList.add("vditor-menu--current");
-        } else if (commandName === "italic" || commandName === "bold" || commandName === "strike"
-            || commandName === "inline-code" || commandName === "code" || commandName === "table") {
+        } else if (
+            commandName === "italic" ||
+            commandName === "bold" ||
+            commandName === "strike" ||
+            commandName === "inline-code" ||
+            commandName === "code" ||
+            commandName === "table"
+        ) {
             let html;
             if (range.toString() === "") {
                 html = `${prefix}<wbr>${suffix}`;
@@ -204,13 +283,23 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
             input(vditor, range);
 
             if (commandName === "table") {
-                range.selectNodeContents(getSelection().getRangeAt(0).startContainer.parentElement);
+                range.selectNodeContents(
+                    getSelection().getRangeAt(0).startContainer.parentElement
+                );
                 setSelectionFocus(range);
             }
-        } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
+        } else if (
+            commandName === "check" ||
+            commandName === "list" ||
+            commandName === "ordered-list"
+        ) {
             listToggle(vditor, range, commandName, false);
             useHighlight = false;
-            removeCurrentToolbar(vditor.toolbar.elements, ["check", "list", "ordered-list"]);
+            removeCurrentToolbar(vditor.toolbar.elements, [
+                "check",
+                "list",
+                "ordered-list",
+            ]);
             actionBtn.classList.add("vditor-menu--current");
         }
     }

package/src/ts/sv/inputEvent.ts

@@ -1,27 +1,48 @@
-import {scrollCenter} from "../util/editorCommonEvent";
-import {hasClosestByAttribute} from "../util/hasClosest";
-import {getSelectPosition, setRangeByWbr} from "../util/selection";
-import {getSideByType, processAfterRender, processSpinVditorSVDOM} from "./process";
-import {combineFootnote} from "./combineFootnote";
+import { scrollCenter } from "../util/editorCommonEvent";
+import { hasClosestByAttribute } from "../util/hasClosest";
+import { getSelectPosition, setRangeByWbr } from "../util/selection";
+import {
+    getSideByType,
+    processAfterRender,
+    processSpinVditorSVDOM,
+} from "./process";
+import { combineFootnote } from "./combineFootnote";
 
 export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
     const range = getSelection().getRangeAt(0).cloneRange();
     let startContainer = range.startContainer;
-    if (range.startContainer.nodeType !== 3 && (range.startContainer as HTMLElement).tagName === "DIV") {
+    if (
+        range.startContainer.nodeType !== 3 &&
+        (range.startContainer as HTMLElement).tagName === "DIV"
+    ) {
         startContainer = range.startContainer.childNodes[range.startOffset - 1];
     }
     let blockElement = hasClosestByAttribute(startContainer, "data-block", "0");
     // 不调用 lute 解析
-    if (blockElement && event && (event.inputType === "deleteContentBackward" || event.data === " ")) {
+    if (
+        blockElement &&
+        event &&
+        (event.inputType === "deleteContentBackward" || event.data === " ")
+    ) {
         // 开始可以输入空格
-        const startOffset = getSelectPosition(blockElement, vditor.sv.element, range).start;
+        const startOffset = getSelectPosition(
+            blockElement,
+            vditor.sv.element,
+            range
+        ).start;
         let startSpace = true;
-        for (let i = startOffset - 1;
+        for (
+            let i = startOffset - 1;
             // 软换行后有空格
-             i > blockElement.textContent.substr(0, startOffset).lastIndexOf("\n"); i--) {
-            if (blockElement.textContent.charAt(i) !== " " &&
+            i >
+            blockElement.textContent.substr(0, startOffset).lastIndexOf("\n");
+            i--
+        ) {
+            if (
+                blockElement.textContent.charAt(i) !== " " &&
                 // 多个 tab 前删除不形成代码块 https://github.com/Vanessa219/vditor/issues/162 1
-                blockElement.textContent.charAt(i) !== "\t") {
+                blockElement.textContent.charAt(i) !== "\t"
+            ) {
                 startSpace = false;
                 break;
             }
@@ -37,63 +58,120 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
         if (event.inputType === "deleteContentBackward") {
             // https://github.com/Vanessa219/vditor/issues/584 代码块 marker 删除
             const codeBlockMarkerElement =
-                hasClosestByAttribute(startContainer, "data-type", "code-block-open-marker") ||
-                hasClosestByAttribute(startContainer, "data-type", "code-block-close-marker");
+                hasClosestByAttribute(
+                    startContainer,
+                    "data-type",
+                    "code-block-open-marker"
+                ) ||
+                hasClosestByAttribute(
+                    startContainer,
+                    "data-type",
+                    "code-block-close-marker"
+                );
             if (codeBlockMarkerElement) {
-                if (codeBlockMarkerElement.getAttribute("data-type") === "code-block-close-marker") {
-                    const openMarkerElement = getSideByType(startContainer, "code-block-open-marker");
+                if (
+                    codeBlockMarkerElement.getAttribute("data-type") ===
+                    "code-block-close-marker"
+                ) {
+                    const openMarkerElement = getSideByType(
+                        startContainer,
+                        "code-block-open-marker"
+                    );
                     if (openMarkerElement) {
-                        openMarkerElement.textContent = codeBlockMarkerElement.textContent;
+                        openMarkerElement.textContent =
+                            codeBlockMarkerElement.textContent;
                         processAfterRender(vditor);
                         return;
                     }
                 }
-                if (codeBlockMarkerElement.getAttribute("data-type") === "code-block-open-marker") {
-                    const openMarkerElement = getSideByType(startContainer, "code-block-close-marker", false);
+                if (
+                    codeBlockMarkerElement.getAttribute("data-type") ===
+                    "code-block-open-marker"
+                ) {
+                    const openMarkerElement = getSideByType(
+                        startContainer,
+                        "code-block-close-marker",
+                        false
+                    );
                     if (openMarkerElement) {
-                        openMarkerElement.textContent = codeBlockMarkerElement.textContent;
+                        openMarkerElement.textContent =
+                            codeBlockMarkerElement.textContent;
                         processAfterRender(vditor);
                         return;
                     }
                 }
             }
             // https://github.com/Vanessa219/vditor/issues/877 数学公式输入删除生成节点
-            const mathBlockMarkerElement =
-                hasClosestByAttribute(startContainer, "data-type", "math-block-open-marker");
+            const mathBlockMarkerElement = hasClosestByAttribute(
+                startContainer,
+                "data-type",
+                "math-block-open-marker"
+            );
             if (mathBlockMarkerElement) {
-                const mathBlockCloseElement = mathBlockMarkerElement.nextElementSibling.nextElementSibling;
-                if (mathBlockCloseElement && mathBlockCloseElement.getAttribute("data-type") === "math-block-close-marker") {
+                const mathBlockCloseElement =
+                    mathBlockMarkerElement.nextElementSibling
+                        .nextElementSibling;
+                if (
+                    mathBlockCloseElement &&
+                    mathBlockCloseElement.getAttribute("data-type") ===
+                        "math-block-close-marker"
+                ) {
                     mathBlockCloseElement.remove();
                     processAfterRender(vditor);
                 }
                 return;
             }
 
-            blockElement.querySelectorAll('[data-type="code-block-open-marker"]').forEach((item: HTMLElement) => {
-                if (item.textContent.length === 1) {
-                    item.remove();
-                }
-            });
-            blockElement.querySelectorAll('[data-type="code-block-close-marker"]').forEach((item: HTMLElement) => {
-                if (item.textContent.length === 1) {
-                    item.remove();
-                }
-            });
+            blockElement
+                .querySelectorAll('[data-type="code-block-open-marker"]')
+                .forEach((item: HTMLElement) => {
+                    if (item.textContent.length === 1) {
+                        item.remove();
+                    }
+                });
+            blockElement
+                .querySelectorAll('[data-type="code-block-close-marker"]')
+                .forEach((item: HTMLElement) => {
+                    if (item.textContent.length === 1) {
+                        item.remove();
+                    }
+                });
 
             // 标题删除
-            const headingElement = hasClosestByAttribute(startContainer, "data-type", "heading-marker");
-            if (headingElement && headingElement.textContent.indexOf("#") === -1) {
+            const headingElement = hasClosestByAttribute(
+                startContainer,
+                "data-type",
+                "heading-marker"
+            );
+            if (
+                headingElement &&
+                headingElement.textContent.indexOf("#") === -1
+            ) {
                 processAfterRender(vditor);
                 return;
             }
         }
         // 删除或空格不解析，否则会 format 回去
-        if ((event.data === " " || event.inputType === "deleteContentBackward") &&
-            (hasClosestByAttribute(startContainer, "data-type", "padding") // 场景：b 前进行删除 [> 1. a\n>   b]
-                || hasClosestByAttribute(startContainer, "data-type", "li-marker")  // 场景：删除最后一个字符 [* 1\n* ]
-                || hasClosestByAttribute(startContainer, "data-type", "task-marker")  // 场景：删除最后一个字符 [* [ ] ]
-                || hasClosestByAttribute(startContainer, "data-type", "blockquote-marker")  // 场景：删除最后一个字符 [> ]
-            )) {
+        if (
+            (event.data === " " ||
+                event.inputType === "deleteContentBackward") &&
+            (hasClosestByAttribute(startContainer, "data-type", "padding") || // 场景：b 前进行删除 [> 1. a\n>   b]
+                hasClosestByAttribute(
+                    startContainer,
+                    "data-type",
+                    "li-marker"
+                ) || // 场景：删除最后一个字符 [* 1\n* ]
+                hasClosestByAttribute(
+                    startContainer,
+                    "data-type",
+                    "task-marker"
+                ) || // 场景：删除最后一个字符 [* [ ] ]
+                hasClosestByAttribute(
+                    startContainer,
+                    "data-type",
+                    "blockquote-marker"
+                )) // 场景：删除最后一个字符 [> ]
+        ) {
             processAfterRender(vditor);
             return;
         }
@@ -106,7 +184,10 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
     if (!blockElement) {
         blockElement = vditor.sv.element;
     }
-    if (blockElement.firstElementChild?.getAttribute("data-type") === "link-ref-defs-block") {
+    if (
+        blockElement.firstElementChild?.getAttribute("data-type") ===
+        "link-ref-defs-block"
+    ) {
         // 修改链接引用
         blockElement = vditor.sv.element;
     }
@@ -120,10 +201,12 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
         range.insertNode(document.createTextNode(Lute.Caret));
     }
     // 清除浏览器自带的样式
-    blockElement.querySelectorAll("[style]").forEach((item) => { // 不可前置，否则会影响 newline 的样式
+    blockElement.querySelectorAll("[style]").forEach((item) => {
+        // 不可前置，否则会影响 newline 的样式
         item.removeAttribute("style");
     });
-    blockElement.querySelectorAll("font").forEach((item) => { // 不可前置，否则会影响光标的位置
+    blockElement.querySelectorAll("font").forEach((item) => {
+        // 不可前置，否则会影响光标的位置
         item.outerHTML = item.innerHTML;
     });
     let html = blockElement.textContent;
@@ -136,28 +219,45 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
             html = blockElement.previousElementSibling.textContent + html;
             blockElement.previousElementSibling.remove();
         }
-        if (blockElement.previousElementSibling && html.indexOf("---\n") === 0) {
+        if (
+            blockElement.previousElementSibling &&
+            html.indexOf("---\n") === 0
+        ) {
             // 确认 yaml-front 是否为首行
             html = blockElement.previousElementSibling.textContent + html;
             blockElement.previousElementSibling.remove();
         }
         // 添加链接引用
-        let footnotes = ""
+        let footnotes = "";
 
-        vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item, index) => {
-            if (item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
-                footnotes += item.parentElement.textContent + "\n";
-                item.parentElement.remove();
-            }
-        });
+        vditor.sv.element
+            .querySelectorAll("[data-type='link-ref-defs-block']")
+            .forEach((item, index) => {
+                if (
+                    item &&
+                    !(blockElement as HTMLElement).isEqualNode(
+                        item.parentElement
+                    )
+                ) {
+                    footnotes += item.parentElement.textContent + "\n";
+                    item.parentElement.remove();
+                }
+            });
 
         // 添加脚注到文章头，便于lute处理
-        vditor.sv.element.querySelectorAll("[data-type='footnotes-link']").forEach((item, index) => {
-            if (item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
-                footnotes += item.parentElement.textContent + "\n";
-                item.parentElement.remove();
-            }
-        });
+        vditor.sv.element
+            .querySelectorAll("[data-type='footnotes-link']")
+            .forEach((item, index) => {
+                if (
+                    item &&
+                    !(blockElement as HTMLElement).isEqualNode(
+                        item.parentElement
+                    )
+                ) {
+                    footnotes += item.parentElement.textContent + "\n";
+                    item.parentElement.remove();
+                }
+            });
         html = footnotes + html;
     }
     html = processSpinVditorSVDOM(html, vditor);
@@ -167,14 +267,19 @@ export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
         blockElement.outerHTML = html;
     }
 
-    vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
-        vditor.sv.element.insertAdjacentElement("beforeend", item.parentElement)
-    })
+    vditor.sv.element
+        .querySelectorAll("[data-type='link-ref-defs-block']")
+        .forEach((item) => {
+            vditor.sv.element.insertAdjacentElement(
+                "beforeend",
+                item.parentElement
+            );
+        });
 
     // 合并脚注
     combineFootnote(vditor.sv.element, (root: HTMLElement) => {
-        vditor.sv.element.insertAdjacentElement("beforeend", root)
-    })
+        vditor.sv.element.insertAdjacentElement("beforeend", root);
+    });
 
     setRangeByWbr(vditor.sv.element, range);