🐛 fix Vanessa219#768

GatherRepo · Sep 22, 2020 · bbf2e43 · bbf2e43
1 parent 83a7d20
commit bbf2e43
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -81,6 +81,10 @@
 
 ### v3.5.5 / 2020-09-xx
 
+* [768](https://github.com/Vanessa219/vditor/issues/768) mermaid 问题修复 `修复缺陷`
+* 文档修改
+  * 3.5.5 `mermaidRender` 移除 `className` 参数
+
 ### v3.5.4 / 2020-09-20
 
 * [765](https://github.com/Vanessa219/vditor/issues/765) hint 组件中文回车及单引号转译修复 `修复缺陷`

diff --git a/README.md b/README.md
@@ -524,7 +524,7 @@ options?: IPreviewOptions {
 
 |   | 说明 |
 | - | - |
-| mermaidRender(element: HTMLElement, className = ".language-mermaid", cdn = options.cdn) | 转换 element 中 class 为 className 的元素为流程图/时序图/甘特图 |
+| mermaidRender(element: HTMLElement, cdn = options.cdn) | 转换 element 中 class 为 className 的元素为流程图/时序图/甘特图 |
 | codeRender(element: HTMLElement, lang: (keyof II18nLang) = "zh_CN") | 为 element 中的代码块添加复制按钮 |
 | chartRender(element: (HTMLElement \| Document) = document, cdn = options.cdn) | 图表渲染 |
 | mindmapRender(element: (HTMLElement \| Document) = document, cdn = options.cdn) | 脑图渲染 |

diff --git a/README_en_US.md b/README_en_US.md
@@ -477,7 +477,7 @@ options?: IPreviewOptions {
 
 |   | Explanation |
 | - | - |
-| mermaidRender(element: HTMLElement, className = ".language-mermaid", cdn = options.cdn) | Convert elements in class to className in element to flowchart/sequence diagram/gantt diagram |
+| mermaidRender(element: HTMLElement, cdn = options.cdn) | Convert elements in class to className in element to flowchart/sequence diagram/gantt diagram |
 | codeRender(element: HTMLElement, lang: (keyof II18nLang) = "zh_CN") | Add a copy button for the code block in element |
 | chartRender(element: (HTMLElement\| Document) = document, cdn = options.cdn) | Chart rendering |
 | abcRender(element: (HTMLElement\| Document) = document, cdn = options.cdn) | Stave rendering |

diff --git a/src/js/mermaid/mermaid.min.js b/src/js/mermaid/mermaid.min.js
diff --git a/src/ts/export/index.ts b/src/ts/export/index.ts
@@ -67,7 +67,7 @@ export const exportHTML = (vditor: IVditor) => {
         cdn: '${vditor.options.cdn}',
         math: ${JSON.stringify(vditor.options.preview.math)},
     });
-    Vditor.mermaidRender(previewElement, ".language-mermaid", '${vditor.options.cdn}');
+    Vditor.mermaidRender(previewElement, '${vditor.options.cdn}');
     Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
     Vditor.chartRender(previewElement, '${vditor.options.cdn}');
     Vditor.mindmapRender(previewElement, '${vditor.options.cdn}');

diff --git a/src/ts/markdown/mermaidRender.ts b/src/ts/markdown/mermaidRender.ts
@@ -1,16 +1,18 @@
-import {Constants} from "../constants";
 import {addScript} from "../util/addScript";
+import {Constants} from "../constants";
 
 declare const mermaid: {
-    init(option: { noteMargin: number; }, c: string): void;
+    init(option: { noteMargin: number; }, c: Element): void;
 };
 
-export const mermaidRender = (element: HTMLElement, className = ".language-mermaid",
-                              cdn = Constants.CDN) => {
-    if (element.querySelectorAll(className).length === 0) {
+export const mermaidRender = (element: HTMLElement, cdn = Constants.CDN) => {
+    const mermaidElements = element.querySelectorAll(".language-mermaid");
+    if (mermaidElements.length === 0) {
         return;
     }
     addScript(`${cdn}/dist/js/mermaid/mermaid.min.js`, "vditorMermaidScript").then(() => {
-        mermaid.init({noteMargin: 10}, className);
+        mermaidElements.forEach((item) => {
+            mermaid.init({noteMargin: 10}, item);
+        });
     });
 };
diff --git a/src/ts/markdown/previewRender.ts b/src/ts/markdown/previewRender.ts
@@ -84,7 +84,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
         cdn: mergedOptions.cdn,
         math: mergedOptions.math,
     });
-    mermaidRender(previewElement, ".language-mermaid", mergedOptions.cdn);
+    mermaidRender(previewElement, mergedOptions.cdn);
     graphvizRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn);
     mindmapRender(previewElement, mergedOptions.cdn);

diff --git a/src/ts/preview/index.ts b/src/ts/preview/index.ts
@@ -188,7 +188,7 @@ export class Preview {
             cdn: vditor.options.cdn,
             math: vditor.options.preview.math,
         });
-        mermaidRender(vditor.preview.element.lastElementChild as HTMLElement, ".language-mermaid", vditor.options.cdn);
+        mermaidRender(vditor.preview.element.lastElementChild as HTMLElement,  vditor.options.cdn);
         graphvizRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
         chartRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
         mindmapRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);

diff --git a/src/ts/util/processCode.ts b/src/ts/util/processCode.ts
@@ -68,7 +68,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     if (language === "abc") {
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {
-        mermaidRender(previewPanel, `.vditor-${vditor.currentMode}__preview .language-mermaid`, vditor.options.cdn);
+        mermaidRender(previewPanel, vditor.options.cdn);
     } else if (language === "echarts") {
         chartRender(previewPanel, vditor.options.cdn);
     } else if (language === "mindmap") {