@8btc/mditor 0.0.2 → 0.0.4

package/src/ts/sv/process.ts

@@ -1,39 +1,51 @@
-import {getMarkdown} from "../markdown/getMarkdown";
-import {accessLocalStorage} from "../util/compatibility";
-import {scrollCenter} from "../util/editorCommonEvent";
-import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
-import {hasClosestByTag} from "../util/hasClosestByHeadings";
-import {log} from "../util/log";
-import {getEditorRange, setRangeByWbr} from "../util/selection";
-import {inputEvent} from "./inputEvent";
-import {combineFootnote} from "./combineFootnote";
-
+import { getMarkdown } from "../markdown/getMarkdown";
+import { accessLocalStorage } from "../util/compatibility";
+import { scrollCenter } from "../util/editorCommonEvent";
+import { hasClosestBlock, hasClosestByAttribute } from "../util/hasClosest";
+import { hasClosestByTag } from "../util/hasClosestByHeadings";
+import { log } from "../util/log";
+import { getEditorRange, setRangeByWbr } from "../util/selection";
+import { inputEvent } from "./inputEvent";
+import { combineFootnote } from "./combineFootnote";
+import { attachLineNumbersToBlocksThrottled } from "../util/attachLineNumbers";
 
 export const processPaste = (vditor: IVditor, text: string) => {
     const range = getEditorRange(vditor);
     range.extractContents();
     range.insertNode(document.createTextNode(Lute.Caret));
     range.insertNode(document.createTextNode(text));
-    let blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
+    let blockElement = hasClosestByAttribute(
+        range.startContainer,
+        "data-block",
+        "0"
+    );
     if (!blockElement) {
         blockElement = vditor.sv.element;
     }
-    let spinHTML = vditor.lute.SpinVditorSVDOM(blockElement.textContent)
-    spinHTML = "<div data-block='0'>" +
-        spinHTML.replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+    let spinHTML = vditor.lute.SpinVditorSVDOM(blockElement.textContent);
+    spinHTML =
+        "<div data-block='0'>" +
+        spinHTML.replace(
+            /<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g,
+            '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><'
+        ) +
         "</div>";
     if (blockElement.isEqualNode(vditor.sv.element)) {
         blockElement.innerHTML = spinHTML;
     } else {
         blockElement.outerHTML = spinHTML;
     }
-    combineFootnote(vditor.sv.element)
+    combineFootnote(vditor.sv.element);
     setRangeByWbr(vditor.sv.element, range);
 
     scrollCenter(vditor);
 };
 
-export const getSideByType = (spanNode: Node, type: string, isPrevious = true) => {
+export const getSideByType = (
+    spanNode: Node,
+    type: string,
+    isPrevious = true
+) => {
     let sideElement = spanNode as Element;
     if (sideElement.nodeType === 3) {
         sideElement = sideElement.parentElement;
@@ -53,9 +65,13 @@ export const getSideByType = (spanNode: Node, type: string, isPrevious = true) =
 
 export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
     log("SpinVditorSVDOM", html, "argument", vditor.options.debugger);
-    const spinHTML = vditor.lute.SpinVditorSVDOM(html)
-    html = "<div data-block='0'>" +
-        spinHTML.replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+    const spinHTML = vditor.lute.SpinVditorSVDOM(html);
+    html =
+        "<div data-block='0'>" +
+        spinHTML.replace(
+            /<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g,
+            '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><'
+        ) +
         "</div>";
     log("SpinVditorSVDOM", html, "result", vditor.options.debugger);
     return html;
@@ -65,27 +81,48 @@ export const processPreviousMarkers = (spanElement: HTMLElement) => {
     const spanType = spanElement.getAttribute("data-type");
     let previousElement = spanElement.previousElementSibling;
     // 有内容的子列表/标题，在其 marker 后换行
-    let markerText = (spanType && spanType !== "text" && spanType !== "table" && spanType !== "heading-marker" &&
-        spanType !== "newline" && spanType !== "yaml-front-matter-open-marker" && spanType !== "yaml-front-matter-close-marker"
-        && spanType !== "code-block-info" && spanType !== "code-block-close-marker" && spanType !== "code-block-open-marker") ?
-        spanElement.textContent : "";
+    let markerText =
+        spanType &&
+        spanType !== "text" &&
+        spanType !== "table" &&
+        spanType !== "heading-marker" &&
+        spanType !== "newline" &&
+        spanType !== "yaml-front-matter-open-marker" &&
+        spanType !== "yaml-front-matter-close-marker" &&
+        spanType !== "code-block-info" &&
+        spanType !== "code-block-close-marker" &&
+        spanType !== "code-block-open-marker"
+            ? spanElement.textContent
+            : "";
     let hasNL = false;
     if (spanType === "newline") {
         hasNL = true;
     }
     while (previousElement && !hasNL) {
         const previousType = previousElement.getAttribute("data-type");
-        if (previousType === "li-marker" || previousType === "blockquote-marker" || previousType === "task-marker" ||
-            previousType === "padding") {
+        if (
+            previousType === "li-marker" ||
+            previousType === "blockquote-marker" ||
+            previousType === "task-marker" ||
+            previousType === "padding"
+        ) {
             const previousText = previousElement.textContent;
-            if (previousType === "li-marker" &&
-                (spanType === "code-block-open-marker" || spanType === "code-block-info")) {
+            if (
+                previousType === "li-marker" &&
+                (spanType === "code-block-open-marker" ||
+                    spanType === "code-block-info")
+            ) {
                 // https://github.com/Vanessa219/vditor/issues/586
                 markerText = previousText.replace(/\S/g, " ") + markerText;
-            } else if (spanType === "code-block-close-marker" &&
-                previousElement.nextElementSibling.isSameNode(spanElement)) {
+            } else if (
+                spanType === "code-block-close-marker" &&
+                previousElement.nextElementSibling.isSameNode(spanElement)
+            ) {
                 // https://github.com/Vanessa219/vditor/issues/594
-                const openMarker = getSideByType(spanElement, "code-block-open-marker");
+                const openMarker = getSideByType(
+                    spanElement,
+                    "code-block-open-marker"
+                );
                 if (openMarker && openMarker.previousElementSibling) {
                     previousElement = openMarker.previousElementSibling;
                     markerText = previousText + markerText;
@@ -101,11 +138,14 @@ export const processPreviousMarkers = (spanElement: HTMLElement) => {
     return markerText;
 };
 
-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) {
         vditor.hint.render(vditor);
     }
@@ -137,6 +177,13 @@ export const processAfterRender = (vditor: IVditor, options = {
         if (options.enableAddUndoStack && !vditor.sv.composingLock) {
             vditor.undo.addToUndoStack(vditor);
         }
+        try {
+            if (vditor.options.lineNumber) {
+                attachLineNumbersToBlocksThrottled(vditor.sv.element, text);
+            }
+        } catch {
+            void 0;
+        }
     }, vditor.options.undoDelay);
 };
 
@@ -150,7 +197,12 @@ export const processHeading = (vditor: IVditor, value: string) => {
     document.execCommand("insertHTML", false, value);
 };
 
-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");
     // 添加
@@ -173,8 +225,15 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
         }
         document.execCommand("insertHTML", false, html);
         return;
-    } else if (commandName === "italic" || commandName === "bold" || commandName === "strike" ||
-        commandName === "inline-code" || commandName === "code" || commandName === "table" || commandName === "line") {
+    } else if (
+        commandName === "italic" ||
+        commandName === "bold" ||
+        commandName === "strike" ||
+        commandName === "inline-code" ||
+        commandName === "code" ||
+        commandName === "table" ||
+        commandName === "line"
+    ) {
         let html;
         // https://github.com/Vanessa219/vditor/issues/563 代码块不需要后面的 ```
         if (range.toString() === "") {
@@ -182,15 +241,24 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
         } else {
             html = `${prefix}${range.toString()}${Lute.Caret}${commandName === "code" ? "" : suffix}`;
         }
-        if (commandName === "table" || (commandName === "code" && spanElement && spanElement.textContent !== "")) {
+        if (
+            commandName === "table" ||
+            (commandName === "code" &&
+                spanElement &&
+                spanElement.textContent !== "")
+        ) {
             html = "\n\n" + html;
         } else if (commandName === "line") {
             html = `\n\n${prefix}\n${Lute.Caret}`;
         }
         document.execCommand("insertHTML", false, html);
         return;
-    } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list" ||
-        commandName === "quote") {
+    } else if (
+        commandName === "check" ||
+        commandName === "list" ||
+        commandName === "ordered-list" ||
+        commandName === "quote"
+    ) {
         if (spanElement) {
             let marker = "* ";
             if (commandName === "check") {