@8btc/mditor 0.0.1 → 0.0.3

package/src/ts/util/attachLineNumbers.ts

@@ -0,0 +1,437 @@
+/**
+ * 为编辑区域添加行号标记：
+ * - 为所有包含 `data-block` 的块级节点写入 `data-linenumber`
+ * - 额外为每个 `ul` 的直接 `li` 子元素写入 `data-linenumber`（不修改 `ul` 本身）
+ * 通过解析传入的 Markdown 源文本，建立内容到源文件行号的映射，
+ * 兼顾多行文本、嵌套列表、重复内容及空白/特殊字符，并提供基础错误保护。
+ */
+export const attachLineNumbersToBlocks = (
+    root: HTMLElement,
+    sourceMarkdown: string
+): void => {
+    if (!root || !sourceMarkdown) {
+        return;
+    }
+
+    const ZWSP = "\u200b";
+
+    const normalize = (text: string): string => {
+        return text
+            .replace(/\r\n|\r/g, "\n")
+            .replace(new RegExp(ZWSP, "g"), "")
+            .replace(/\u00a0/g, " ")
+            .replace(/\u2006/g, "")
+            .replace(/[\t\f\v ]+/g, " ");
+    };
+
+    const srcNorm = normalize(sourceMarkdown);
+    const srcLines = srcNorm.split("\n");
+    const stripInlineMD = (text: string): string => {
+        return (
+            text
+                .replace(/\\([*_`~])/g, "$1")
+                .replace(/\*\*|__/g, "")
+                .replace(/\*|_/g, "")
+                .replace(/~~/g, "")
+                .replace(/`+/g, "")
+                // 数学行内分隔符：保留内容，仅移除分隔符
+                .replace(/\\\(/g, "(")
+                .replace(/\\\)/g, ")")
+                .replace(/\\\[/g, "[")
+                .replace(/\\\]/g, "]")
+                .replace(/\$/g, "")
+                .trim()
+        );
+    };
+    const stripInlineForList = (text: string): string => {
+        return (
+            stripInlineMD(text)
+                // 移除 $...$（行内公式整体）
+                .replace(/\$(?:\\.|[^$])*\$/g, "")
+                // 移除 \(...\)、\[...\]（行内/行间公式整体）
+                .replace(/\\\([^)]*\\\)/g, "")
+                .replace(/\\\[[^\]]*\\\]/g, "")
+                // 去除通用 TeX 命令，如 \alpha、\mathbf 等
+                .replace(/\\[a-zA-Z]+/g, "")
+                // 去除多余大括号
+                .replace(/[{}]/g, "")
+                .trim()
+        );
+    };
+    const strippedLines = srcLines.map((l) => stripInlineMD(l));
+    const lineLookup = new Map<string, number[]>();
+    for (let i = 0; i < strippedLines.length; i++) {
+        const key = strippedLines[i];
+        if (!lineLookup.has(key)) {
+            lineLookup.set(key, [i + 1]);
+        } else {
+            lineLookup.get(key)!.push(i + 1);
+        }
+    }
+    const usedLines = new Set<number>();
+    const pickFirstUnused = (candidates?: number[]): number | -1 => {
+        if (!candidates || candidates.length === 0) return -1;
+        for (const ln of candidates) {
+            if (!usedLines.has(ln)) return ln;
+        }
+        return -1;
+    };
+    const findLineNumberByText = (text: string): number | -1 => {
+        const stripped = stripInlineMD(text);
+        const ln = pickFirstUnused(lineLookup.get(stripped));
+        if (ln !== -1) return ln;
+        for (let i = 0; i < strippedLines.length; i++) {
+            if (
+                !usedLines.has(i + 1) &&
+                stripped &&
+                strippedLines[i].indexOf(stripped) !== -1
+            ) {
+                return i + 1;
+            }
+        }
+        return -1;
+    };
+
+    /**
+     * 预处理：收集 Markdown 中所有无序列表（ul）行及其去除行内标记后的内容，构建快速查找结构。
+     * 仅匹配以 `*`、`-`、`+` 开头的条目，支持任务列表如 `- [ ]`、`* [x]`。
+     */
+    const unorderedListEntries: Array<{ ln: number; content: string }> = [];
+    const unorderedLookup = new Map<string, number[]>();
+    const usedUnorderedLines = new Set<number>();
+    for (let i = 0; i < srcLines.length; i++) {
+        const raw = srcLines[i];
+        const m = raw.match(/^\s*[*+-]\s+(?:\[(?: |x|X)\]\s+)?(.*)$/);
+        if (m && typeof m[1] === "string") {
+            const contentStripped = stripInlineForList(m[1]);
+            unorderedListEntries.push({ ln: i + 1, content: contentStripped });
+            if (!unorderedLookup.has(contentStripped)) {
+                unorderedLookup.set(contentStripped, [i + 1]);
+            } else {
+                unorderedLookup.get(contentStripped)!.push(i + 1);
+            }
+        }
+    }
+
+    /**
+     * 从无序列表候选行中为给定文本选择一个行号。
+     * 优先精确匹配（去标记后完全相同），否则回退到包含匹配。
+     */
+    const pickFirstUnusedUnordered = (candidates?: number[]): number | -1 => {
+        if (!candidates || candidates.length === 0) return -1;
+        for (const ln of candidates) {
+            if (!usedUnorderedLines.has(ln)) return ln;
+        }
+        return -1;
+    };
+    const findUnorderedListLineNumber = (text: string): number | -1 => {
+        const stripped = stripInlineForList(text);
+        // 先尝试精确匹配
+        const exact = pickFirstUnusedUnordered(unorderedLookup.get(stripped));
+        if (exact !== -1) return exact;
+        // 回退到包含匹配
+        for (let i = 0; i < unorderedListEntries.length; i++) {
+            const entry = unorderedListEntries[i];
+            if (usedUnorderedLines.has(entry.ln)) continue;
+            if (!stripped) continue;
+            if (
+                entry.content.indexOf(stripped) !== -1 ||
+                stripped.indexOf(entry.content) !== -1
+            ) {
+                return entry.ln;
+            }
+        }
+        return -1;
+    };
+
+    /**
+     * 预处理：收集 Markdown 中所有有序列表（ol）行及其内容，支持 `1.` 或 `1)` 以及任务列表前缀。
+     */
+    const orderedListEntries: Array<{ ln: number; content: string }> = [];
+    const orderedLookup = new Map<string, number[]>();
+    const usedOrderedLines = new Set<number>();
+    const ORDERED_RE =
+        /\s*\d+(?:[.)、．。]|[\uFF0E\uFF09\u3001])\s+(?:\[(?: |x|X)\]\s+)?(.*)/;
+    for (let i = 0; i < srcLines.length; i++) {
+        const raw = srcLines[i];
+        const m = raw.match(new RegExp(`^${ORDERED_RE.source}$`));
+        if (m && typeof m[1] === "string") {
+            const contentStripped = stripInlineForList(m[1]);
+            orderedListEntries.push({ ln: i + 1, content: contentStripped });
+            if (!orderedLookup.has(contentStripped)) {
+                orderedLookup.set(contentStripped, [i + 1]);
+            } else {
+                orderedLookup.get(contentStripped)!.push(i + 1);
+            }
+        }
+    }
+    console.debug("[LineNumber][ol:index]", {
+        total: orderedListEntries.length,
+    });
+
+    const orderedGroups: Array<number[]> = [];
+    for (let i = 0; i < srcLines.length; ) {
+        const raw = srcLines[i];
+        if (new RegExp(`^${ORDERED_RE.source}$`).test(raw)) {
+            const group: number[] = [];
+            while (
+                i < srcLines.length &&
+                new RegExp(`^${ORDERED_RE.source}$`).test(srcLines[i])
+            ) {
+                group.push(i + 1);
+                i++;
+            }
+            if (group.length > 0) {
+                orderedGroups.push(group);
+            }
+        } else {
+            i++;
+        }
+    }
+
+    /**
+     * 为给定文本在有序列表候选中选择行号，精确匹配优先，包含匹配回退。
+     */
+    const pickFirstUnusedOrdered = (candidates?: number[]): number | -1 => {
+        if (!candidates || candidates.length === 0) return -1;
+        for (const ln of candidates) {
+            if (!usedOrderedLines.has(ln)) return ln;
+        }
+        return -1;
+    };
+    const findOrderedListLineNumber = (text: string): number | -1 => {
+        const stripped = stripInlineForList(text);
+        const exact = pickFirstUnusedOrdered(orderedLookup.get(stripped));
+        if (exact !== -1) return exact;
+        for (let i = 0; i < orderedListEntries.length; i++) {
+            const entry = orderedListEntries[i];
+            if (usedOrderedLines.has(entry.ln)) continue;
+            if (!stripped) continue;
+            if (
+                entry.content.indexOf(stripped) !== -1 ||
+                stripped.indexOf(entry.content) !== -1
+            ) {
+                return entry.ln;
+            }
+        }
+        return -1;
+    };
+
+    /**
+     * 获取 `li` 的直接内容文本：仅拼接其直系子节点中的文本，排除嵌套的 `UL/OL` 列表。
+     * 以便在嵌套列表场景下准确定位每个条目对应的源行。
+     */
+    const getImmediateLiText = (li: HTMLElement): string => {
+        let buf = "";
+        li.childNodes.forEach((node) => {
+            if (node.nodeType === 3) {
+                buf += (node as Text).data;
+            } else if (
+                (node as HTMLElement).tagName !== "UL" &&
+                (node as HTMLElement).tagName !== "OL" &&
+                !(node as HTMLElement).classList?.contains("katex")
+            ) {
+                buf += (node as HTMLElement).textContent || "";
+            }
+        });
+        return buf;
+    };
+
+    const blocks = root.querySelectorAll("[data-block]");
+    blocks.forEach((el) => {
+        try {
+            const container = el as HTMLElement;
+            const dataType = container.getAttribute("data-type") || "";
+            if (dataType === "math-block" || dataType === "code-block") {
+                // container.setAttribute("data-linenumber", "");
+                return;
+            }
+            const text = container.textContent || "";
+            const normText = normalize(text);
+            // 跳过纯空白块
+            if (!normText.trim()) {
+                // container.setAttribute("data-linenumber", "");
+                return;
+            }
+
+            let lineNumber = -1;
+
+            const tag = container.tagName;
+            if (tag === "BLOCKQUOTE") {
+                const firstLine =
+                    normText.split("\n").find((l) => l.trim().length > 0) ||
+                    normText;
+                const stripped = stripInlineMD(firstLine);
+                for (let i = 0; i < srcLines.length; i++) {
+                    if (usedLines.has(i + 1)) continue;
+                    if (/^\s*>+\s/.test(srcLines[i])) {
+                        const content = stripInlineMD(
+                            srcLines[i].replace(/^\s*>+\s+/, "")
+                        );
+                        if (content.indexOf(stripped) !== -1) {
+                            lineNumber = i + 1;
+                            break;
+                        }
+                    }
+                }
+            } else {
+                const firstLine =
+                    normText.split("\n").find((l) => l.trim().length > 0) ||
+                    normText;
+                lineNumber = findLineNumberByText(firstLine);
+            }
+
+            if (lineNumber !== -1) {
+                usedLines.add(lineNumber);
+                container.setAttribute("data-linenumber", String(lineNumber));
+            }
+        } catch {
+            void 0;
+        }
+    });
+
+    /**
+     * 为所有 `ul` 下的每个直接 `li` 子元素追加 `data-linenumber`，不修改 `ul` 本身。
+     * 支持多层嵌套与非文本起始节点（如加粗/行内代码）。
+     */
+    const ulElements = root.querySelectorAll("ul");
+    ulElements.forEach((ul) => {
+        try {
+            const children = Array.from(ul.children);
+            for (const child of children) {
+                if (child.tagName !== "LI") continue;
+                const li = child as HTMLElement;
+                const rawText = getImmediateLiText(li);
+                const norm = normalize(rawText);
+                const firstLine =
+                    norm.split("\n").find((l) => l.trim().length > 0) || norm;
+
+                const ln = findUnorderedListLineNumber(firstLine);
+                if (ln !== -1) {
+                    usedUnorderedLines.add(ln);
+                    li.setAttribute("data-linenumber", String(ln));
+                } else {
+                    li.setAttribute("data-linenumber", "");
+                }
+            }
+        } catch {
+            void 0;
+        }
+    });
+
+    /**
+     * 为所有 `ol` 下的每个直接 `li` 子元素追加 `data-linenumber`，不修改 `ol` 本身。
+     */
+    const olElements = root.querySelectorAll("ol");
+    olElements.forEach((ol) => {
+        try {
+            let currentGroupIdx = -1;
+            let lastAssigned = -1;
+            const children = Array.from(ol.children);
+            for (const child of children) {
+                if (child.tagName !== "LI") continue;
+                const li = child as HTMLElement;
+                const rawText = getImmediateLiText(li);
+                const norm = normalize(rawText);
+                const firstLine =
+                    norm.split("\n").find((l) => l.trim().length > 0) || norm;
+
+                const stripped0 = stripInlineForList(firstLine);
+                const stripped = stripped0 || stripInlineMD(firstLine);
+                const candidates = orderedLookup.get(stripped) || [];
+                const available = candidates.filter(
+                    (n) => !usedOrderedLines.has(n)
+                );
+                const ln = findOrderedListLineNumber(firstLine);
+                if (ln !== -1) {
+                    usedOrderedLines.add(ln);
+                    li.setAttribute("data-linenumber", String(ln));
+                    // 成功映射日志
+                    console.debug("[LineNumber][ol>li]", {
+                        text: firstLine,
+                        stripped,
+                        line: ln,
+                    });
+                    // 记录当前组
+                    for (let gi = 0; gi < orderedGroups.length; gi++) {
+                        if (orderedGroups[gi].includes(ln)) {
+                            currentGroupIdx = gi;
+                            break;
+                        }
+                    }
+                    lastAssigned = ln;
+                } else {
+                    // 顺序回退：基于当前组或猜测组，按序分配下一未使用行
+                    let assigned = -1;
+                    const pickNextFromGroup = (gi: number): number | -1 => {
+                        if (gi < 0 || gi >= orderedGroups.length) return -1;
+                        const lines = orderedGroups[gi];
+                        // 优先从上次分配后续查找
+                        let startIdx = 0;
+                        if (lastAssigned !== -1) {
+                            const idx = lines.indexOf(lastAssigned);
+                            startIdx = idx >= 0 ? idx + 1 : 0;
+                        }
+                        for (let k = startIdx; k < lines.length; k++) {
+                            const cand = lines[k];
+                            if (!usedOrderedLines.has(cand)) return cand;
+                        }
+                        for (let k = 0; k < startIdx; k++) {
+                            const cand = lines[k];
+                            if (!usedOrderedLines.has(cand)) return cand;
+                        }
+                        return -1;
+                    };
+
+                    if (currentGroupIdx !== -1) {
+                        assigned = pickNextFromGroup(currentGroupIdx);
+                    }
+                    if (assigned === -1) {
+                        // 猜测组：选择拥有可用行的首个组
+                        for (
+                            let gi = 0;
+                            gi < orderedGroups.length && assigned === -1;
+                            gi++
+                        ) {
+                            const cand = pickNextFromGroup(gi);
+                            if (cand !== -1) {
+                                currentGroupIdx = gi;
+                                assigned = cand;
+                            }
+                        }
+                    }
+
+                    if (assigned !== -1) {
+                        usedOrderedLines.add(assigned);
+                        li.setAttribute("data-linenumber", String(assigned));
+                        console.debug("[LineNumber][ol>li][fallback-seq]", {
+                            text: firstLine,
+                            stripped,
+                            line: assigned,
+                            group: currentGroupIdx,
+                        });
+                        lastAssigned = assigned;
+                    } else {
+                        li.setAttribute("data-linenumber", "");
+                        // 失败诊断日志
+                        console.warn("[LineNumber][ol>li][missing]", {
+                            text: firstLine,
+                            stripped,
+                            candidates,
+                            available,
+                            reason: !stripped0
+                                ? "empty-after-strip"
+                                : candidates.length === 0
+                                  ? "no-index-candidates"
+                                  : available.length === 0
+                                    ? "all-candidates-consumed"
+                                    : "fallback-no-match",
+                        });
+                    }
+                }
+            }
+        } catch {
+            void 0;
+        }
+    });
+};

package/src/ts/wysiwyg/afterRenderEvent.ts

@@ -1,11 +1,15 @@
-import {getMarkdown} from "../markdown/getMarkdown";
-import {accessLocalStorage} from "../util/compatibility";
+import { getMarkdown } from "../markdown/getMarkdown";
+import { accessLocalStorage } from "../util/compatibility";
+import { attachLineNumbersToBlocks } from "../util/attachLineNumbers";
 
-export const afterRenderEvent = (vditor: IVditor, options = {
-    enableAddUndoStack: true,
-    enableHint: false,
-    enableInput: true,
-}) => {
+export const afterRenderEvent = (
+    vditor: IVditor,
+    options = {
+        enableAddUndoStack: true,
+        enableHint: false,
+        enableInput: true,
+    }
+) => {
     if (options.enableHint) {
         vditor.hint.render(vditor);
     }
@@ -37,5 +41,11 @@ export const afterRenderEvent = (vditor: IVditor, options = {
         if (options.enableAddUndoStack) {
             vditor.undo.addToUndoStack(vditor);
         }
+
+        try {
+            attachLineNumbersToBlocks(vditor.wysiwyg.element, text);
+        } catch {
+            void 0;
+        }
     }, vditor.options.undoDelay);
 };