@8btc/mditor 0.0.16 → 0.0.18

package/dist/types/index.d.ts

@@ -586,6 +586,13 @@ interface IPreviewOptions {
     speech?: {
         enable?: boolean;
     };
+    /** 链接点击行为配置（预览模式） */
+    link?: {
+        /** 是否打开链接地址。默认值: true */
+        isOpen?: boolean;
+        /** 点击链接事件 */
+        click?: (bom: Element) => void;
+    };
     /** 运行 HTML 片段配置（预览模式） */
     runCode?: {
         /** 是否启用运行按钮。默认值: false */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@8btc/mditor",
-    "version": "0.0.16",
+    "version": "0.0.18",
     "description": "mditor, Md编辑器",
     "author": "wujie-vditor",
     "jsdelivr": "dist/index.min.js",

package/src/assets/less/_mermaid.less

@@ -0,0 +1,32 @@
+
+.mermaid-error {
+    border: 1px dashed #E5E5E5;
+    border-radius: 0.625rem;
+    padding: 3rem 1.5rem;
+    text-align: center;
+    .mermaid-error-icon {
+      display: inline-block;
+      color: #0A0A0A;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      margin-bottom: 1.5rem;
+      border: 1px solid #E5E5E5;
+      line-height: 1;
+      > svg {
+        display: block;
+        stroke-width: 2;
+      }
+    }
+    .mermaid-error-title {
+      font-size: 1.25rem;
+      color: #0A0A0A;
+      font-weight: 700;
+      line-height: 140%;
+      margin-bottom: 0.5rem;
+    }
+    .mermaid-error-message {
+      font-size: 0.875rem;
+      line-height: 140%;
+      color: #737373;
+    }
+}

package/src/assets/less/_tooltipped.less

@@ -15,7 +15,7 @@
 }
 
 .vditor-tooltipped {
-  position: relative;
+  position: relative !important;
   cursor: pointer;
 
   &::after {

package/src/assets/less/index.less

@@ -90,6 +90,7 @@
 @import "_math-menu";
 @import "_selection-popover";
 @import "_selection-tag";
+@import "_mermaid";
 
 // details 默认样式调整：隐藏展开/折叠指示器
 details>summary {

package/src/ts/markdown/mermaidRender.ts

@@ -1,19 +1,26 @@
-import {Constants} from "../constants";
-import {addScript} from "../util/addScript";
-import {mermaidRenderAdapter} from "./adapterRender";
-import {genUUID} from "../util/function";
+import { Constants } from "../constants";
+import { addScript } from "../util/addScript";
+import { mermaidRenderAdapter } from "./adapterRender";
+import { genUUID } from "../util/function";
 
 declare const mermaid: {
-    initialize(options: any): void,
-    render(id: string, text: string): { svg: string }
+    initialize(options: any): void;
+    render(id: string, text: string): { svg: string };
 };
 
-export const mermaidRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN, theme: string) => {
+export const mermaidRender = (
+    element: HTMLElement | Document = document,
+    cdn = Constants.CDN,
+    theme: string
+) => {
     const mermaidElements = mermaidRenderAdapter.getElements(element);
     if (mermaidElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.11.0`, "vditorMermaidScript").then(() => {
+    addScript(
+        `${cdn}/dist/js/mermaid/mermaid.min.js?v=11.11.0`,
+        "vditorMermaidScript"
+    ).then(() => {
         const config: any = {
             securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
             altFontFamily: "sans-serif",
@@ -21,19 +28,19 @@ export const mermaidRender = (element: (HTMLElement | Document) = document, cdn
             startOnLoad: false,
             flowchart: {
                 htmlLabels: true,
-                useMaxWidth: !0
+                useMaxWidth: !0,
             },
             sequence: {
                 useMaxWidth: true,
                 diagramMarginX: 8,
                 diagramMarginY: 8,
                 boxMargin: 8,
-                showSequenceNumbers: true // Mermaid 时序图增加序号 https://github.com/siyuan-note/siyuan/pull/6992 https://mermaid.js.org/syntax/sequenceDiagram.html#sequencenumbers
+                showSequenceNumbers: true, // Mermaid 时序图增加序号 https://github.com/siyuan-note/siyuan/pull/6992 https://mermaid.js.org/syntax/sequenceDiagram.html#sequencenumbers
             },
             gantt: {
                 leftPadding: 75,
-                rightPadding: 20
-            }
+                rightPadding: 20,
+            },
         };
         if (theme === "dark") {
             config.theme = "dark";
@@ -41,17 +48,24 @@ export const mermaidRender = (element: (HTMLElement | Document) = document, cdn
         mermaid.initialize(config);
         mermaidElements.forEach(async (item) => {
             const code = mermaidRenderAdapter.getCode(item);
-            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+            if (
+                item.getAttribute("data-processed") === "true" ||
+                code.trim() === ""
+            ) {
                 return;
             }
-            const id = "mermaid" + genUUID()
+            const id = "mermaid" + genUUID();
             try {
                 const mermaidData = await mermaid.render(id, item.textContent);
                 item.innerHTML = mermaidData.svg;
             } catch (e) {
                 const errorElement = document.querySelector("#" + id);
-                item.innerHTML = `${errorElement.outerHTML}<br>
-<div style="text-align: left"><small>${e.message.replace(/\n/, "<br>")}</small></div>`;
+                item.innerHTML = `
+<div class="mermaid-error">
+<div class="mermaid-error-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug-icon lucide-bug"><path d="M12 20v-9"/><path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z"/><path d="M14.12 3.88 16 2"/><path d="M21 21a4 4 0 0 0-3.81-4"/><path d="M21 5a4 4 0 0 1-3.55 3.97"/><path d="M22 13h-4"/><path d="M3 21a4 4 0 0 1 3.81-4"/><path d="M3 5a4 4 0 0 0 3.55 3.97"/><path d="M6 13H2"/><path d="m8 2 1.88 1.88"/><path d="M9 7.13V6a3 3 0 1 1 6 0v1.13"/></svg></div>
+<div class="mermaid-error-title">图表加载失败</div>
+<div class="mermaid-error-message">${e.message.replace(/\n/, "<br>")}</div>
+</div>`;
                 errorElement.parentElement.remove();
             }
             item.setAttribute("data-processed", "true");

package/src/ts/markdown/previewRender.ts

@@ -37,6 +37,9 @@ const mergeOptions = (options?: IPreviewOptions) => {
         markdown: Constants.MARKDOWN_OPTIONS,
         math: Constants.MATH_OPTIONS,
         mode: "light",
+        link: {
+            isOpen: true,
+        },
         speech: {
             enable: false,
         },
@@ -102,6 +105,14 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
     });
 };
 
+/**
+ * 预览区域渲染入口
+ * - 负责将 Markdown 转为 HTML 并对各类增强特性进行初始化
+ * - 支持目录点击定位与链接点击行为配置（link.click / link.isOpen）
+ * @param previewElement 预览容器元素
+ * @param markdown Markdown 文本内容
+ * @param options 预览配置项，支持 link 点击行为自定义
+ */
 export const previewRender = async (
     previewElement: HTMLDivElement,
     markdown: string,
@@ -196,6 +207,7 @@ export const previewRender = async (
     if (mergedOptions.lazyLoadImage) {
         lazyLoadImageRender(previewElement);
     }
+
     previewElement.addEventListener(
         "click",
         (event: MouseEvent & { target: HTMLElement }) => {
@@ -212,6 +224,15 @@ export const previewRender = async (
                 }
                 return;
             }
+            if (event.target.tagName === "A") {
+                if (mergedOptions.link?.click) {
+                    mergedOptions.link.click(event.target);
+                } else if (mergedOptions.link?.isOpen) {
+                    window.open(event.target.getAttribute("href"));
+                }
+                event.preventDefault();
+                return;
+            }
         }
     );
 };

package/src/ts/preview/index.ts

@@ -12,7 +12,10 @@ import { SMILESRender } from "../markdown/SMILESRender";
 import { markmapRender } from "../markdown/markmapRender";
 import { mindmapRender } from "../markdown/mindmapRender";
 import { plantumlRender } from "../markdown/plantumlRender";
-import { hasClosestByClassName, hasClosestByMatchTag } from "../util/hasClosest";
+import {
+    hasClosestByClassName,
+    hasClosestByMatchTag,
+} from "../util/hasClosest";
 import { setSelectionFocus } from "../util/selection";
 import { selectionRender } from "../markdown/selectionRender";
 import { previewImage } from "./image";