@8btc/mditor 0.0.3 → 0.0.4

package/src/ts/ir/input.ts

@@ -1,40 +1,62 @@
-import {Constants} from "../constants";
-import {isHeadingMD, isHrMD} from "../util/fixBrowserBehavior";
+import { Constants } from "../constants";
+import { isHeadingMD, isHrMD } from "../util/fixBrowserBehavior";
 import {
     getTopList,
-    hasClosestBlock, hasClosestByAttribute,
+    hasClosestBlock,
+    hasClosestByAttribute,
     hasClosestByClassName,
 } from "../util/hasClosest";
-import {hasClosestByTag} from "../util/hasClosestByHeadings";
-import {log} from "../util/log";
-import {processCodeRender} from "../util/processCode";
-import {getSelectPosition, setRangeByWbr} from "../util/selection";
-import {renderToc} from "../util/toc";
-import {processAfterRender} from "./process";
-import {getMarkdown} from "../markdown/getMarkdown";
+import { hasClosestByTag } from "../util/hasClosestByHeadings";
+import { log } from "../util/log";
+import { processCodeRender } from "../util/processCode";
+import { getSelectPosition, setRangeByWbr } from "../util/selection";
+import { renderToc } from "../util/toc";
+import { processAfterRender } from "./process";
+import { getMarkdown } from "../markdown/getMarkdown";
 import { bindMathInteractionsInContainer } from "../markdown/mathContextMenu";
 
-export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?: InputEvent) => {
+export const input = (
+    vditor: IVditor,
+    range: Range,
+    ignoreSpace = false,
+    event?: InputEvent
+) => {
     let blockElement = hasClosestBlock(range.startContainer);
     // 前后可以输入空格
-    if (blockElement && !ignoreSpace && blockElement.getAttribute("data-type") !== "code-block") {
-        if ((isHrMD(blockElement.innerHTML) && blockElement.previousElementSibling) ||
-            isHeadingMD(blockElement.innerHTML)) {
+    if (
+        blockElement &&
+        !ignoreSpace &&
+        blockElement.getAttribute("data-type") !== "code-block"
+    ) {
+        if (
+            (isHrMD(blockElement.innerHTML) &&
+                blockElement.previousElementSibling) ||
+            isHeadingMD(blockElement.innerHTML)
+        ) {
             return;
         }
 
         // 前后空格处理
-        const startOffset = getSelectPosition(blockElement, vditor.ir.element, range).start;
+        const startOffset = getSelectPosition(
+            blockElement,
+            vditor.ir.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;
             }
@@ -45,8 +67,15 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
 
         // 结尾可以输入空格
         let endSpace = true;
-        for (let i = startOffset - 1; i < blockElement.textContent.length; i++) {
-            if (blockElement.textContent.charAt(i) !== " " && blockElement.textContent.charAt(i) !== "\n") {
+        for (
+            let i = startOffset - 1;
+            i < blockElement.textContent.length;
+            i++
+        ) {
+            if (
+                blockElement.textContent.charAt(i) !== " " &&
+                blockElement.textContent.charAt(i) !== "\n"
+            ) {
                 endSpace = false;
                 break;
             }
@@ -65,12 +94,20 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
         }
 
         if (endSpace) {
-            const markerElement = hasClosestByClassName(range.startContainer, "vditor-ir__marker");
+            const markerElement = hasClosestByClassName(
+                range.startContainer,
+                "vditor-ir__marker"
+            );
             if (markerElement) {
                 // inline marker space https://github.com/Vanessa219/vditor/issues/239
             } else {
-                const previousNode = range.startContainer.previousSibling as HTMLElement;
-                if (previousNode && previousNode.nodeType !== 3 && previousNode.classList.contains("vditor-ir__node--expand")) {
+                const previousNode = range.startContainer
+                    .previousSibling as HTMLElement;
+                if (
+                    previousNode &&
+                    previousNode.nodeType !== 3 &&
+                    previousNode.classList.contains("vditor-ir__node--expand")
+                ) {
                     // FireFox https://github.com/Vanessa219/vditor/issues/239
                     previousNode.classList.remove("vditor-ir__node--expand");
                 }
@@ -82,9 +119,11 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
         }
     }
 
-    vditor.ir.element.querySelectorAll(".vditor-ir__node--expand").forEach((item) => {
-        item.classList.remove("vditor-ir__node--expand");
-    });
+    vditor.ir.element
+        .querySelectorAll(".vditor-ir__node--expand")
+        .forEach((item) => {
+            item.classList.remove("vditor-ir__node--expand");
+        });
 
     if (!blockElement) {
         // 使用顶级块元素，应使用 innerHTML
@@ -93,9 +132,15 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
 
     // document.exeComment insertHTML 会插入 wbr
     if (!blockElement.querySelector("wbr")) {
-        const previewRenderElement = hasClosestByClassName(range.startContainer, "vditor-ir__preview");
+        const previewRenderElement = hasClosestByClassName(
+            range.startContainer,
+            "vditor-ir__preview"
+        );
         if (previewRenderElement) {
-            previewRenderElement.previousElementSibling.insertAdjacentHTML("beforeend", "<wbr>");
+            previewRenderElement.previousElementSibling.insertAdjacentHTML(
+                "beforeend",
+                "<wbr>"
+            );
         } else {
             range.insertNode(document.createElement("wbr"));
         }
@@ -112,10 +157,17 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
     }
 
     const isIRElement = blockElement.isEqualNode(vditor.ir.element);
-    const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
+    const footnoteElement = hasClosestByAttribute(
+        blockElement,
+        "data-type",
+        "footnotes-block"
+    );
     let html = "";
     if (!isIRElement) {
-        const blockquoteElement = hasClosestByTag(range.startContainer, "BLOCKQUOTE");
+        const blockquoteElement = hasClosestByTag(
+            range.startContainer,
+            "BLOCKQUOTE"
+        );
         // 列表需要到最顶层
         const topListElement = getTopList(range.startContainer);
         if (topListElement) {
@@ -123,7 +175,11 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
         }
 
         // 应到引用层，否则 > --- 会解析为 front-matter；列表中有 blockquote 则解析 blockquote；blockquote 中有列表则解析列表
-        if (blockquoteElement && (!topListElement || (topListElement && !blockquoteElement.contains(topListElement)))) {
+        if (
+            blockquoteElement &&
+            (!topListElement ||
+                (topListElement && !blockquoteElement.contains(topListElement)))
+        ) {
             blockElement = blockquoteElement;
         }
 
@@ -138,39 +194,66 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
             // 如果为列表的话，需要把上下的列表都重绘
             const listPrevElement = blockElement.previousElementSibling;
             const listNextElement = blockElement.nextElementSibling;
-            if (listPrevElement && (listPrevElement.tagName === "UL" || listPrevElement.tagName === "OL")) {
+            if (
+                listPrevElement &&
+                (listPrevElement.tagName === "UL" ||
+                    listPrevElement.tagName === "OL")
+            ) {
                 html = listPrevElement.outerHTML + html;
                 listPrevElement.remove();
             }
-            if (listNextElement && (listNextElement.tagName === "UL" || listNextElement.tagName === "OL")) {
+            if (
+                listNextElement &&
+                (listNextElement.tagName === "UL" ||
+                    listNextElement.tagName === "OL")
+            ) {
                 html = html + listNextElement.outerHTML;
                 listNextElement.remove();
             }
             // firefox 列表回车不会产生新的 list item https://github.com/Vanessa219/vditor/issues/194
-            html = html.replace("<div><wbr><br></div>", "<li><p><wbr><br></p></li>");
-        } else if (blockElement.previousElementSibling &&
-            blockElement.previousElementSibling.textContent.replace(Constants.ZWSP, "") !== "" &&
-            event && event.inputType === "insertParagraph") {
+            html = html.replace(
+                "<div><wbr><br></div>",
+                "<li><p><wbr><br></p></li>"
+            );
+        } else if (
+            blockElement.previousElementSibling &&
+            blockElement.previousElementSibling.textContent.replace(
+                Constants.ZWSP,
+                ""
+            ) !== "" &&
+            event &&
+            event.inputType === "insertParagraph"
+        ) {
             // 换行时需要处理上一段落
             html = blockElement.previousElementSibling.outerHTML + html;
             blockElement.previousElementSibling.remove();
         }
         if (!blockElement.innerText.startsWith("```")) {
             // 添加链接引用
-            vditor.ir.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
-                if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
-                    html += item.outerHTML;
-                    item.remove();
-                }
-            });
+            vditor.ir.element
+                .querySelectorAll("[data-type='link-ref-defs-block']")
+                .forEach((item) => {
+                    if (
+                        item &&
+                        !(blockElement as HTMLElement).isEqualNode(item)
+                    ) {
+                        html += item.outerHTML;
+                        item.remove();
+                    }
+                });
 
             // 添加脚注
-            vditor.ir.element.querySelectorAll("[data-type='footnotes-block']").forEach((item) => {
-                if (item && !(blockElement as HTMLElement).isEqualNode(item)) {
-                    html += item.outerHTML;
-                    item.remove();
-                }
-            });
+            vditor.ir.element
+                .querySelectorAll("[data-type='footnotes-block']")
+                .forEach((item) => {
+                    if (
+                        item &&
+                        !(blockElement as HTMLElement).isEqualNode(item)
+                    ) {
+                        html += item.outerHTML;
+                        item.remove();
+                    }
+                });
         }
     } else {
         html = blockElement.innerHTML;
@@ -187,15 +270,28 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
 
         // 更新正文中的 tip
         if (footnoteElement) {
-            const footnoteItemElement = hasClosestByAttribute(vditor.ir.element.querySelector("wbr"),
-                "data-type", "footnotes-def");
+            const footnoteItemElement = hasClosestByAttribute(
+                vditor.ir.element.querySelector("wbr"),
+                "data-type",
+                "footnotes-def"
+            );
             if (footnoteItemElement) {
                 const footnoteItemText = footnoteItemElement.textContent;
-                const marker = footnoteItemText.substring(1, footnoteItemText.indexOf("]:"));
-                const footnoteRefElement = vditor.ir.element.querySelector(`sup[data-type="footnotes-ref"][data-footnotes-label="${marker}"]`);
+                const marker = footnoteItemText.substring(
+                    1,
+                    footnoteItemText.indexOf("]:")
+                );
+                const footnoteRefElement = vditor.ir.element.querySelector(
+                    `sup[data-type="footnotes-ref"][data-footnotes-label="${marker}"]`
+                );
                 if (footnoteRefElement) {
-                    footnoteRefElement.setAttribute("aria-label",
-                        footnoteItemText.substr(marker.length + 3).trim().substr(0, 24));
+                    footnoteRefElement.setAttribute(
+                        "aria-label",
+                        footnoteItemText
+                            .substr(marker.length + 3)
+                            .trim()
+                            .substr(0, 24)
+                    );
                 }
             }
         }
@@ -203,39 +299,57 @@ export const input = (vditor: IVditor, range: Range, ignoreSpace = false, event?
 
     //  linkref 合并及添加
     let firstLinkRefDefElement: HTMLElement;
-    const allLinkRefDefsElement = vditor.ir.element.querySelectorAll("[data-type='link-ref-defs-block']");
+    const allLinkRefDefsElement = vditor.ir.element.querySelectorAll(
+        "[data-type='link-ref-defs-block']"
+    );
     allLinkRefDefsElement.forEach((item: HTMLElement, index) => {
         if (index === 0) {
             firstLinkRefDefElement = item;
         } else {
-            firstLinkRefDefElement.insertAdjacentHTML("beforeend", item.innerHTML);
+            firstLinkRefDefElement.insertAdjacentHTML(
+                "beforeend",
+                item.innerHTML
+            );
             item.remove();
         }
     });
     if (allLinkRefDefsElement.length > 0) {
-        vditor.ir.element.insertAdjacentElement("beforeend", allLinkRefDefsElement[0]);
+        vditor.ir.element.insertAdjacentElement(
+            "beforeend",
+            allLinkRefDefsElement[0]
+        );
     }
 
     // 脚注合并后添加的末尾
     let firstFootnoteElement: HTMLElement;
-    const allFootnoteElement = vditor.ir.element.querySelectorAll("[data-type='footnotes-block']");
+    const allFootnoteElement = vditor.ir.element.querySelectorAll(
+        "[data-type='footnotes-block']"
+    );
     allFootnoteElement.forEach((item: HTMLElement, index) => {
         if (index === 0) {
             firstFootnoteElement = item;
         } else {
-            firstFootnoteElement.insertAdjacentHTML("beforeend", item.innerHTML);
+            firstFootnoteElement.insertAdjacentHTML(
+                "beforeend",
+                item.innerHTML
+            );
             item.remove();
         }
     });
     if (allFootnoteElement.length > 0) {
-        vditor.ir.element.insertAdjacentElement("beforeend", allFootnoteElement[0]);
+        vditor.ir.element.insertAdjacentElement(
+            "beforeend",
+            allFootnoteElement[0]
+        );
     }
 
     setRangeByWbr(vditor.ir.element, range);
 
-    vditor.ir.element.querySelectorAll(".vditor-ir__preview[data-render='2']").forEach((item: HTMLElement) => {
-        processCodeRender(item, vditor);
-    });
+    vditor.ir.element
+        .querySelectorAll(".vditor-ir__preview[data-render='2']")
+        .forEach((item: HTMLElement) => {
+            processCodeRender(item, vditor);
+        });
 
     renderToc(vditor);
 

package/src/ts/ir/process.ts

@@ -17,7 +17,7 @@ import {
 } from "../util/selection";
 import { highlightToolbarIR } from "./highlightToolbarIR";
 import { input } from "./input";
-import { attachLineNumbersToBlocks } from "../util/attachLineNumbers";
+import { attachLineNumbersToBlocksThrottled } from "../util/attachLineNumbers";
 
 export const processHint = (vditor: IVditor) => {
     vditor.hint.render(vditor);
@@ -105,7 +105,9 @@ export const processAfterRender = (
         }
 
         try {
-            attachLineNumbersToBlocks(vditor.ir.element, text);
+            if (vditor.options.lineNumber) {
+                attachLineNumbersToBlocksThrottled(vditor.ir.element, text);
+            }
         } catch {
             void 0;
         }