@8btc/mditor 0.0.3 → 0.0.4

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

package/src/ts/sv/process.ts

@@ -7,7 +7,7 @@ import { log } from "../util/log";
 import { getEditorRange, setRangeByWbr } from "../util/selection";
 import { inputEvent } from "./inputEvent";
 import { combineFootnote } from "./combineFootnote";
-import { attachLineNumbersToBlocks } from "../util/attachLineNumbers";
+import { attachLineNumbersToBlocksThrottled } from "../util/attachLineNumbers";
 
 export const processPaste = (vditor: IVditor, text: string) => {
     const range = getEditorRange(vditor);
@@ -178,7 +178,9 @@ export const processAfterRender = (
             vditor.undo.addToUndoStack(vditor);
         }
         try {
-            attachLineNumbersToBlocks(vditor.sv.element, text);
+            if (vditor.options.lineNumber) {
+                attachLineNumbersToBlocksThrottled(vditor.sv.element, text);
+            }
         } catch {
             void 0;
         }

package/src/ts/util/attachLineNumbers.ts

@@ -152,9 +152,10 @@ export const attachLineNumbersToBlocks = (
     const usedOrderedLines = new Set<number>();
     const ORDERED_RE =
         /\s*\d+(?:[.)、．。]|[\uFF0E\uFF09\u3001])\s+(?:\[(?: |x|X)\]\s+)?(.*)/;
+    const ORDERED_FULL = new RegExp(`^${ORDERED_RE.source}$`);
     for (let i = 0; i < srcLines.length; i++) {
         const raw = srcLines[i];
-        const m = raw.match(new RegExp(`^${ORDERED_RE.source}$`));
+        const m = raw.match(ORDERED_FULL);
         if (m && typeof m[1] === "string") {
             const contentStripped = stripInlineForList(m[1]);
             orderedListEntries.push({ ln: i + 1, content: contentStripped });
@@ -172,12 +173,9 @@ export const attachLineNumbersToBlocks = (
     const orderedGroups: Array<number[]> = [];
     for (let i = 0; i < srcLines.length; ) {
         const raw = srcLines[i];
-        if (new RegExp(`^${ORDERED_RE.source}$`).test(raw)) {
+        if (ORDERED_FULL.test(raw)) {
             const group: number[] = [];
-            while (
-                i < srcLines.length &&
-                new RegExp(`^${ORDERED_RE.source}$`).test(srcLines[i])
-            ) {
+            while (i < srcLines.length && ORDERED_FULL.test(srcLines[i])) {
                 group.push(i + 1);
                 i++;
             }
@@ -435,3 +433,31 @@ export const attachLineNumbersToBlocks = (
         }
     });
 };
+
+/**
+ * 节流后的行号更新函数，避免频繁更新 data-linenumber
+ */
+export const attachLineNumbersToBlocksThrottled = (() => {
+    let last = 0;
+    let timer = 0;
+    let lastArgs: [HTMLElement, string] | null = null;
+    const wait = 500;
+    const invoke = () => {
+        timer = 0;
+        last = Date.now();
+        const args = lastArgs;
+        lastArgs = null;
+        if (args) {
+            attachLineNumbersToBlocks(args[0], args[1]);
+        }
+    };
+    return (root: HTMLElement, source: string) => {
+        const now = Date.now();
+        lastArgs = [root, source];
+        if (now - last >= wait) {
+            invoke();
+        } else if (!timer) {
+            timer = window.setTimeout(invoke, wait - (now - last));
+        }
+    };
+})();

package/src/ts/wysiwyg/afterRenderEvent.ts

@@ -1,6 +1,6 @@
 import { getMarkdown } from "../markdown/getMarkdown";
 import { accessLocalStorage } from "../util/compatibility";
-import { attachLineNumbersToBlocks } from "../util/attachLineNumbers";
+import { attachLineNumbersToBlocksThrottled } from "../util/attachLineNumbers";
 
 export const afterRenderEvent = (
     vditor: IVditor,
@@ -43,7 +43,12 @@ export const afterRenderEvent = (
         }
 
         try {
-            attachLineNumbersToBlocks(vditor.wysiwyg.element, text);
+            if (vditor.options.lineNumber) {
+                attachLineNumbersToBlocksThrottled(
+                    vditor.wysiwyg.element,
+                    text
+                );
+            }
         } catch {
             void 0;
         }