@8btc/mditor 0.0.1 → 0.0.3

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 { attachLineNumbersToBlocks } 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,24 @@ export const processAfterRender = (vditor: IVditor, options = {
         if (options.enableAddUndoStack) {
             vditor.undo.addToUndoStack(vditor);
         }
+
+        try {
+            attachLineNumbersToBlocks(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 +134,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 +168,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 +207,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 +225,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 +250,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 +281,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/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 { attachLineNumbersToBlocks } 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,11 @@ export const processAfterRender = (vditor: IVditor, options = {
         if (options.enableAddUndoStack && !vditor.sv.composingLock) {
             vditor.undo.addToUndoStack(vditor);
         }
+        try {
+            attachLineNumbersToBlocks(vditor.sv.element, text);
+        } catch {
+            void 0;
+        }
     }, vditor.options.undoDelay);
 };
 
@@ -150,7 +195,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 +223,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 +239,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") {