feat: 集成graphviz

src/index.ts

@@ -12,6 +12,7 @@ import {Hint} from "./ts/hint/index";
 import {abcRender} from "./ts/markdown/abcRender";
 import {chartRender} from "./ts/markdown/chartRender";
 import {codeRender} from "./ts/markdown/codeRender";
+import {graphvizRender} from "./ts/markdown/graphvizRender";
 import {highlightRender} from "./ts/markdown/highlightRender";
 import {mathRender} from "./ts/markdown/mathRender";
 import {loadLuteJs, md2htmlByPreview, md2htmlByVditor} from "./ts/markdown/md2html";
@@ -42,6 +43,7 @@ import {renderDomByMd} from "./ts/wysiwyg/renderDomByMd";
 class Vditor {
 
     public static codeRender = codeRender;
+    public static graphvizRender = graphvizRender;
     public static highlightRender = highlightRender;
     public static mathRender = mathRender;
     public static mermaidRender = mermaidRender;

src/js/graphviz/worker.js

@@ -0,0 +1,6 @@
+importScripts("viz.js");
+
+onmessage = function(e) {
+  var result = Viz(e.data.src, e.data.options);
+  postMessage(result);
+}

src/method.ts

@@ -1,6 +1,7 @@
 import {abcRender} from "./ts/markdown/abcRender";
 import {chartRender} from "./ts/markdown/chartRender";
 import {codeRender} from "./ts/markdown/codeRender";
+import {graphvizRender} from "./ts/markdown/graphvizRender";
 import {highlightRender} from "./ts/markdown/highlightRender";
 import {mathRender} from "./ts/markdown/mathRender";
 import {md2htmlByPreview} from "./ts/markdown/md2html";
@@ -12,6 +13,7 @@ import {speechRender} from "./ts/markdown/speechRender";
 class Vditor {
 
     public static codeRender = codeRender;
+    public static graphvizRender = graphvizRender;
     public static highlightRender = highlightRender;
     public static mathRender = mathRender;
     public static mermaidRender = mermaidRender;

src/ts/markdown/graphvizRender.ts

@@ -0,0 +1,24 @@
+import {VDITOR_VERSION} from "../constants";
+import {addScript} from "../util/addScript";
+
+declare class Viz {
+  public renderSVGElement: (code: string) => Promise<any>;
+  constructor({}: {workerURL: string});
+}
+
+export const graphvizRender = (element: HTMLElement, code: string, cdn = `https://cdn.jsdelivr.net/npm/vditor@${VDITOR_VERSION}`) => {
+  // addScript("https://cdn.bootcss.com/viz.js/2.1.2/full.render.js", "vditorGraphVizFullScript");
+  // TODO: 这里的cdn地址暂时写死
+  addScript("https://cdn.bootcss.com/viz.js/2.1.2/viz.js", "vditorGraphVizScript");
+
+  const workerURL = "../../js/graphviz/full.render.js";
+  const viz1 = new Viz({ workerURL });
+
+  // tslint:disable-next-line:no-console
+  console.log(viz1, code);
+  viz1.renderSVGElement(code).then((result: HTMLElement) => {
+    // tslint:disable-next-line:no-console
+    console.log(result);
+    element.appendChild(result as HTMLElement);
+  });
+};

src/ts/markdown/previewRender.ts

@@ -3,6 +3,7 @@ import {abcRender} from "./abcRender";
 import {anchorRender} from "./anchorRender";
 import {chartRender} from "./chartRender";
 import {codeRender} from "./codeRender";
+import { graphvizRender } from "./graphvizRender";
 import {highlightRender} from "./highlightRender";
 import {mathRender} from "./mathRender";
 import {md2htmlByPreview} from "./md2html";
@@ -72,6 +73,7 @@ export const previewRender = (previewElement: HTMLDivElement, markdown: string,
         math: options.math,
     });
     mermaidRender(previewElement, ".language-mermaid", options.cdn);
+    graphvizRender(previewElement, markdown);
     chartRender(previewElement, options.cdn);
     abcRender(previewElement, options.cdn);
     mediaRender(previewElement);

src/ts/preview/index.ts

@@ -2,6 +2,7 @@ import {i18n} from "../i18n/index";
 import {abcRender} from "../markdown/abcRender";
 import {chartRender} from "../markdown/chartRender";
 import {codeRender} from "../markdown/codeRender";
+import {graphvizRender} from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {md2htmlByVditor} from "../markdown/md2html";
@@ -91,6 +92,7 @@ export class Preview {
     }
 
     private afterRender(vditor: IVditor, startTime: number) {
+        const markdownText = getMarkdown(vditor);
         if (vditor.options.preview.parse) {
             vditor.options.preview.parse(this.element);
         }
@@ -112,6 +114,7 @@ export class Preview {
             math: vditor.options.preview.math,
         });
         mermaidRender(vditor.preview.element.children[0] as HTMLElement, ".language-mermaid", vditor.options.cdn);
+        graphvizRender(vditor.preview.element.children[0] as HTMLElement, markdownText);
         chartRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.cdn);
         abcRender(vditor.preview.element.children[0] as HTMLElement, vditor.options.cdn);
         mediaRender(vditor.preview.element.children[0] as HTMLElement);

src/ts/wysiwyg/processCodeRender.ts

@@ -4,6 +4,7 @@ import {setSelectionFocus} from "../editor/setSelection";
 import {abcRender} from "../markdown/abcRender";
 import {chartRender} from "../markdown/chartRender";
 import {codeRender} from "../markdown/codeRender";
+import { graphvizRender } from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {mermaidRender} from "../markdown/mermaidRender";
@@ -66,6 +67,8 @@ export const processCodeRender = (blockElement: HTMLElement, vditor: IVditor) =>
                 vditor.options.cdn);
         } else if (language === "echarts") {
             chartRender(previewPanel, vditor.options.cdn);
+        } else if (language === "graphviz") {
+            graphvizRender(previewPanel, previewPanel.innerText);
         } else {
             highlightRender(Object.assign({}, vditor.options.preview.hljs, {enable: true}),
                 previewPanel, vditor.options.cdn);