dsh-obsidian-notes 0.5.1 → 0.6.0

package/src/markdown.js

@@ -78,10 +78,14 @@ const renderMarkdownModule = (() => {
     return null;
   }
 
-  // ── 行内解析（code > img > embed > link > wikilink > strong > em，取最左匹配）──
+  // ── 行内解析（escape > code > img > embed > link > wikilink > strong > emph >
+  //    strike > highlight > comment > autolink > barelink，取最左匹配；
+  //    同一位置按数组顺序）──
   // M7：双链/embed 分开捕获 target（m[1]）、章节（m[2]）、别名（m[3]），
   // 显示时别名优先、其次「target › 章节」，偏移各自映射到源码切片。
   const INLINE_PATTERNS = [
+    // 反斜杠转义：`\*` 等只显示被转义的字符本身（偏移只覆盖该字符，不含反斜杠）
+    ["escape", /\\([\\`*_{}\[\]()#+\-.!|>~=])/],
     ["code", /`([^`\n]+)`/],
     ["img", /!\[([^\]]*)\]\(([^)\s]+)\)/],
     ["embed", /!\[\[([^\]|#\n]*)(?:#([^\]|\n]*))?(?:\|([^\]\n]*))?\]\]/],
@@ -89,6 +93,13 @@ const renderMarkdownModule = (() => {
     ["wiki", /\[\[([^\]|#\n]*)(?:#([^\]|\n]*))?(?:\|([^\]\n]*))?\]\]/],
     ["strong", /\*\*([^*\n]+)\*\*|__([^_\n]+)__/],
     ["em", /(^|[^*])\*([^*\n]+)\*(?!\*)|(^|[^_])_([^_\n]+)_(?!_)/],
+    ["strike", /~~([^~\n]+)~~/],
+    ["highlight", /==([^=\n]+)==/],
+    // Obsidian 注释 %%…%%：预览里不显示（单行；跨行注释留到 P2 block 阶段）
+    ["comment", /%%([^%\n]*)%%/],
+    ["autolink", /<(https?:[^\s<>]+)>/],
+    // 裸 URL：只吃 ASCII URL 字符，中文正文/中文标点自然截断（尾部标点下面再收一次）
+    ["barelink", /https?:\/\/[A-Za-z0-9\-._~:/?#@!$&'*+,;=%]+/],
   ];
   const patternIndex = (name) => INLINE_PATTERNS.findIndex((p) => p[0] === name);
 
@@ -194,21 +205,39 @@ const renderMarkdownModule = (() => {
       if (m.index > 0) pushText(rest.slice(0, m.index));
 
       const contentLen = (() => {
-        if (name === "code") return m[1].length;
-        if (name === "img") return 0;                       // alt 不渲染为可选中文本
-        if (name === "embed") return m[0].length;           // 按钮/图占整个 ![[...]] 源码
-        if (name === "link" || name === "wiki") return m[1].length;
-        if (name === "strong") return (m[1] ?? m[2]).length;
-        return (m[2] ?? m[4]).length;                       // em（m[0] 含前缀组）
+        switch (name) {
+          case "code": return m[1].length;
+          case "img": return 0;                       // alt 不渲染为可选中文本
+          case "embed": return m[0].length;           // 按钮/图占整个 ![[...]] 源码
+          case "link":
+          case "wiki": return m[1].length;
+          case "strong": return (m[1] ?? m[2]).length;
+          case "em": return (m[2] ?? m[4]).length;    // em（m[0] 含前缀组）
+          case "escape": return 1;                    // 只显示被转义的那一个字符
+          case "strike":
+          case "highlight": return m[1].length;
+          case "comment": return m[1].length;
+          case "autolink": return m[1].length;
+          case "barelink": return m[0].length;
+          default: return 0;
+        }
       })();
       const openLen = (() => {
-        if (name === "code") return 1;                      // `
-        if (name === "link") return 1;                      // [
-        if (name === "wiki") return 2;                      // [[
-        if (name === "embed") return 0;                     // 以整段 ![[...]] 作为可选中源码
-        if (name === "strong") return 2;                    // ** 或 __
-        if (name === "em") return m[0].length - contentLen - 1; // 前缀 + *
-        return 0;
+        switch (name) {
+          case "code": return 1;                      // `
+          case "link": return 1;                      // [
+          case "wiki": return 2;                      // [[
+          case "embed": return 0;                     // 以整段 ![[...]] 作为可选中源码
+          case "strong": return 2;                    // ** 或 __
+          case "em": return m[0].length - contentLen - 1; // 前缀 + *
+          case "escape": return 1;                    // 反斜杠
+          case "strike":
+          case "highlight": return 2;                 // ~~ 或 ==
+          case "comment": return 2;                   // %%
+          case "autolink": return 1;                  // <
+          case "barelink": return 0;
+          default: return 0;
+        }
       })();
       const bodyStart = cur + openLen;                      // cur 已含 m.index
 
@@ -281,6 +310,63 @@ const renderMarkdownModule = (() => {
           },
           wikilinkDisplayNodes(parts, m, cur, key, handlers),
         ));
+      } else if (name === "escape") {
+        // 反斜杠转义：只把被转义的字符渲染成文本（偏移只覆盖该字符，不含反斜杠）
+        const n = textNode(m[1], bodyStart, bodyStart + 1, `${keyBase}-x${keyIndex++}`, handlers);
+        if (n) nodes.push(n);
+      } else if (name === "strike" || name === "highlight") {
+        // ~~删除线~~ / ==高亮==：内容继续走行内解析（可嵌套粗体/链接/代码）
+        nodes.push(createElement(
+          name === "strike" ? "del" : "mark",
+          {
+            key: `${keyBase}-${name === "strike" ? "d" : "m"}${keyIndex++}`,
+            ...(name === "highlight" ? { className: "dsh-obs-mark" } : {}),
+          },
+          renderInline(m[1], handlers, `${keyBase}-${name}`, bodyStart),
+        ));
+      } else if (name === "comment") {
+        // Obsidian 的 %%注释%% 在预览里不显示：整段不产生节点（源码偏移留空，
+        // 不影响其它片段的单调性；选中范围也不会把它带进提问内容）。
+      } else if (name === "autolink") {
+        // <https://…> → 链接；显示文本是尖括号里的 URL（偏移不含尖括号）
+        const href = safeUrl(m[1]);
+        if (href === null) {
+          const n = textNode(m[0], cur, cur + m[0].length, `${keyBase}-al${keyIndex++}`, handlers);
+          if (n) nodes.push(n);
+        } else {
+          nodes.push(createElement("a", {
+            key: `${keyBase}-al${keyIndex++}`,
+            href,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "dsh-obs-autolink",
+          }, textNode(m[1], bodyStart, bodyStart + m[1].length, `${keyBase}-alt${keyIndex}`, handlers)));
+        }
+      } else if (name === "barelink") {
+        // 裸 URL：尾部标点与不配对的右括号留给普通文本，不算进链接地址
+        const raw = m[0];
+        let url = raw;
+        while (url.length > 0 && /[.,;:!?'"，。；：！？、]/.test(url[url.length - 1])) url = url.slice(0, -1);
+        while (url.endsWith(")") && (url.match(/\(/g) ?? []).length < (url.match(/\)/g) ?? []).length) {
+          url = url.slice(0, -1);
+        }
+        const href = safeUrl(url);
+        if (href === null) {
+          const n = textNode(raw, cur, cur + raw.length, `${keyBase}-bl${keyIndex++}`, handlers);
+          if (n) nodes.push(n);
+        } else {
+          nodes.push(createElement("a", {
+            key: `${keyBase}-bl${keyIndex++}`,
+            href,
+            target: "_blank",
+            rel: "noreferrer",
+            className: "dsh-obs-autolink",
+          }, textNode(url, cur, cur + url.length, `${keyBase}-blt${keyIndex}`, handlers)));
+          if (url.length < raw.length) {
+            const n = textNode(raw.slice(url.length), cur + url.length, cur + raw.length, `${keyBase}-bltail${keyIndex}`, handlers);
+            if (n) nodes.push(n);
+          }
+        }
       } else {
         const body = name === "strong" ? (m[1] ?? m[2]) : (m[2] ?? m[4]);
         nodes.push(createElement(
@@ -788,6 +874,8 @@ const renderMarkdownModule = (() => {
       createElement("div", {
         key: `n${keyIdx++}`,
         className: `dsh-obs-md-row${rowClass ? ` ${rowClass}` : ""}`,
+        // 源码行号（1 起）：思维导图「点节点跳到源码行」用它定位，测试不依赖
+        "data-line": num,
         ...(extraProps ?? {}),
       },
         createElement("span", { className: "dsh-obs-md-ln" }, String(num)),

package/src/mindmap.js

@@ -0,0 +1,207 @@
+/**
+ * 思维导图（B1）：把 Markdown 笔记的「标题 + 列表」解析成层级树，并做横向树布局。
+ *
+ * 纯函数、零 React 依赖：client 半用它渲染 SVG，测试直接断言树/布局/分支区间。
+ * 只收标题（#～######）与列表项（- * + 1.）；代码围栏内的内容不算；段落忽略。
+ *
+ * 设计取舍：
+ * - 节点行号（line / endLine，1 起）是「点节点跳到源码行」与「针对分支提问」的锚；
+ *   分支区间 = 该节点行到其子树最大行，因此引用分支时能把整段内容一起带进对话。
+ * - 布局用横向树：x 由深度决定，y 由叶子顺序决定（父节点居中于子节点），
+ *   节点矩形固定高度、宽度按列宽；长文本截断显示（完整文本在 title）。
+ */
+const mindMapModule = (() => {
+  /** 节点上限：超大笔记只画前 N 个，避免一次性渲染几万个矩形。 */
+  const MAX_NODES = 400;
+  /** 节点显示文本上限（超出截断，完整文本放 title 属性）。 */
+  const MAX_LABEL = 80;
+
+  /** 缩进折算成列数：tab 按 4 空格（与 markdown.js 的列表层级口径一致）。 */
+  function indentCols(s) {
+    let n = 0;
+    for (let k = 0; k < s.length; k += 1) n += s[k] === "\t" ? 4 : 1;
+    return n;
+  }
+
+  /** 行内标记剥掉后作为节点文本：`**粗**`、`[[A|别名]]`、`==高亮==` 等只留可读文字。 */
+  function stripInlineMarkers(s) {
+    let out = String(s ?? "");
+    out = out.replace(/!\[\[([^\]|#]+)(?:#[^\]|]*)?(?:\|[^\]]*)?\]\]/g, "$1");
+    out = out.replace(/\[\[([^\]|#]+)(?:#[^\]|]*)?(?:\|([^\]]*))?\]\]/g, (m, target, alias) => (alias ? alias : target));
+    out = out.replace(/\[([^\]]+)\]\([^)]*\)/g, "$1");
+    out = out.replace(/`([^`]*)`/g, "$1");
+    out = out.replace(/\*\*([^*]+)\*\*/g, "$1");
+    out = out.replace(/__([^_]+)__/g, "$1");
+    out = out.replace(/~~([^~]+)~~/g, "$1");
+    out = out.replace(/==([^=]+)==/g, "$1");
+    out = out.replace(/\s*\^[A-Za-z0-9-]+\s*$/, "");
+    return out.trim();
+  }
+
+  /** 节点显示文本：剥标记 + 截断。 */
+  function nodeLabel(s) {
+    const text = stripInlineMarkers(s);
+    return text.length > MAX_LABEL ? `${text.slice(0, MAX_LABEL - 1)}…` : text;
+  }
+
+  /**
+   * 解析笔记为树。
+   * @param markdown - 笔记源码（正文，frontmatter 已由 host 剥离）。
+   * @param options - `title` 作根节点文本（通常是笔记文件名）；`maxNodes` 覆盖节点上限。
+   * @returns 根节点 `{ id, kind: "root", text, line: 0, endLine, children }`。
+   */
+  function buildTree(markdown, options = {}) {
+    const lines = String(markdown ?? "").replace(/\r\n/g, "\n").split("\n");
+    const limit = Number.isInteger(options.maxNodes) && options.maxNodes > 0 ? options.maxNodes : MAX_NODES;
+    const root = {
+      id: "n0",
+      kind: "root",
+      text: nodeLabel(options.title ?? "笔记"),
+      line: 0,
+      endLine: lines.length,
+      children: [],
+    };
+    let seq = 1;
+    let headingStack = [];
+    let itemStack = [];
+    let inFence = false;
+    let fenceChar = "";
+    for (let i = 0; i < lines.length; i += 1) {
+      const raw = lines[i];
+      const lineNo = i + 1;
+      const fence = /^ {0,3}(`{3,}|~{3,})/.exec(raw);
+      if (fence) {
+        if (!inFence) {
+          inFence = true;
+          fenceChar = fence[1][0];
+        } else if (raw.trim().startsWith(fenceChar)) {
+          inFence = false;
+        }
+        continue;
+      }
+      if (inFence) continue;
+      if (seq >= limit) break;
+
+      const heading = /^(#{1,6})[ \t]+(.*)$/.exec(raw);
+      if (heading) {
+        const level = heading[1].length;
+        const text = nodeLabel(heading[2].replace(/\s+#+\s*$/, ""));
+        while (headingStack.length > 0 && headingStack[headingStack.length - 1].level >= level) headingStack.pop();
+        itemStack = [];
+        const parent = headingStack.length > 0 ? headingStack[headingStack.length - 1].node : root;
+        const node = { id: `n${seq++}`, kind: "heading", level, text, line: lineNo, endLine: lineNo, children: [] };
+        parent.children.push(node);
+        headingStack.push({ node, level });
+        continue;
+      }
+
+      const item = /^([ \t]*)([-*+]|\d{1,9}[.)])[ \t]+([\s\S]*)$/.exec(raw);
+      if (item) {
+        const indent = indentCols(item[1]);
+        while (itemStack.length > 0 && itemStack[itemStack.length - 1].indent >= indent) itemStack.pop();
+        const body = item[3].replace(/^\[[ xX]\][ \t]+/, "");
+        const text = nodeLabel(body);
+        const parent = itemStack.length > 0
+          ? itemStack[itemStack.length - 1].node
+          : headingStack.length > 0
+            ? headingStack[headingStack.length - 1].node
+            : root;
+        if (text === "") continue;
+        const node = { id: `n${seq++}`, kind: "item", level: 0, text, line: lineNo, endLine: lineNo, children: [] };
+        parent.children.push(node);
+        itemStack.push({ node, indent });
+        continue;
+      }
+
+      // 空行结束当前列表；普通段落不是节点，但不清标题作用域。
+      if (raw.trim() === "") itemStack = [];
+    }
+
+    const computeEnd = (node) => {
+      let end = node.line;
+      for (const child of node.children) end = Math.max(end, computeEnd(child));
+      node.endLine = end;
+      return end;
+    };
+    computeEnd(root);
+    root.endLine = lines.length;
+    return root;
+  }
+
+  /**
+   * 横向树布局。
+   * @param tree - {@link buildTree} 的根节点。
+   * @param options - rowH/colW/padX/padY/nodeH 覆盖默认尺寸（测试可传小值）。
+   * @returns `{ nodes, edges, width, height, byId }`；nodes 按 y/x 排序，byId 为 id → 节点。
+   */
+  function layout(tree, options = {}) {
+    const rowH = options.rowH ?? 44;
+    const colW = options.colW ?? 248;
+    const padX = options.padX ?? 36;
+    const padY = options.padY ?? 36;
+    const nodeH = options.nodeH ?? 30;
+    const nodes = [];
+    const edges = [];
+    let leafCursor = 0;
+
+    const walk = (node, depth) => {
+      let centerY;
+      if (node.children.length === 0) {
+        centerY = leafCursor * rowH;
+        leafCursor += 1;
+      } else {
+        const centers = node.children.map((child) => walk(child, depth + 1));
+        centerY = (centers[0] + centers[centers.length - 1]) / 2;
+      }
+      nodes.push({
+        id: node.id,
+        kind: node.kind,
+        text: node.text,
+        line: node.line,
+        endLine: node.endLine,
+        depth,
+        x: padX + depth * colW,
+        y: padY + centerY,
+        w: colW - 40,
+        h: nodeH,
+      });
+      for (const child of node.children) edges.push({ from: node.id, to: child.id });
+      return centerY;
+    };
+    walk(tree, 0);
+
+    const maxDepth = nodes.reduce((max, node) => Math.max(max, node.depth), 0);
+    const byId = Object.fromEntries(nodes.map((node) => [node.id, node]));
+    return {
+      nodes: nodes.sort((a, b) => (a.y - b.y) || (a.x - b.x)),
+      edges,
+      byId,
+      width: padX * 2 + maxDepth * colW + (colW - 40),
+      height: Math.max(1, leafCursor) * rowH + padY * 2,
+    };
+  }
+
+  /**
+   * 把「某节点 + 全部后代」映射回源码区间，供「针对分支提问」使用。
+   * @param markdown - 笔记源码。
+   * @param node - 树节点（需要 line/endLine，1 起）。
+   * @returns `{ start, end, text, startLine, endLine }`；start/end 是整篇源码的字符偏移。
+   */
+  function branchSpan(markdown, node) {
+    const norm = String(markdown ?? "").replace(/\r\n/g, "\n");
+    const lines = norm.split("\n");
+    const startLine = Math.max(1, node && node.line ? node.line : 1);
+    const endLine = Math.max(startLine, node && node.endLine ? node.endLine : startLine);
+    let start = 0;
+    for (let i = 1; i < startLine && i <= lines.length; i += 1) start += lines[i - 1].length + 1;
+    let end = start;
+    const lastLine = Math.min(endLine, lines.length);
+    for (let i = startLine; i <= lastLine; i += 1) {
+      end += lines[i - 1].length;
+      if (i < lastLine) end += 1;
+    }
+    return { start, end, text: norm.slice(start, end), startLine, endLine };
+  }
+
+  return { buildTree, layout, branchSpan, nodeLabel, stripInlineMarkers, indentCols, MAX_NODES, MAX_LABEL };
+})();