@8btc/mditor 0.0.15 → 0.0.17

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");