From 2bcded78dae523fb1e766a7b91389658d1e23f3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?sunsonliu=28=E5=88=98=E9=98=B3=29?= <sunsonliu@tencent.com>
Date: Mon, 22 May 2023 18:34:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0mermaid=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=8F=AF=E6=8C=87=E5=AE=9A?=
 =?UTF-8?q?mermaid=E7=94=9F=E6=88=90=E7=9A=84=E6=98=AFsvg=E8=BF=98?=
 =?UTF-8?q?=E6=98=AF=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Cherry.config.js                           | 3 +++
 src/addons/cherry-code-block-mermaid-plugin.js | 9 ++++++---
 src/core/hooks/CodeBlock.js                    | 3 ++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Cherry.config.js b/src/Cherry.config.js
index 7520c5a5..74da7526 100644
--- a/src/Cherry.config.js
+++ b/src/Cherry.config.js
@@ -122,6 +122,9 @@ const defaultConfig = {
         customRenderer: {
           // 自定义语法渲染器
         },
+        mermaid: {
+          svg2img: false, // 是否将mermaid生成的画图变成img格式
+        },
         /**
          * indentedCodeBlock是缩进代码块是否启用的开关
          *
diff --git a/src/addons/cherry-code-block-mermaid-plugin.js b/src/addons/cherry-code-block-mermaid-plugin.js
index 279e03c5..432b109d 100644
--- a/src/addons/cherry-code-block-mermaid-plugin.js
+++ b/src/addons/cherry-code-block-mermaid-plugin.js
@@ -112,8 +112,10 @@ export default class MermaidCodeEngine {
         // fix end
         svgHtml = svgDoc.documentElement.outerHTML;
         // 屏蔽转img标签功能，如需要转换为img解除屏蔽即可
-        // const dataUrl = `data:image/svg+xml,${encodeURIComponent(svgDoc.documentElement.outerHTML)}`;
-        // svgHtml = `<img class="svg-img" src="${dataUrl}" alt="${graphId}" />`;
+        if (this.svg2img) {
+          const dataUrl = `data:image/svg+xml,${encodeURIComponent(svgDoc.documentElement.outerHTML)}`;
+          svgHtml = `<img class="svg-img" src="${dataUrl}" alt="${graphId}" />`;
+        }
       } else {
         svgHtml = injectSvgFallback(svgCode);
       }
@@ -123,7 +125,7 @@ export default class MermaidCodeEngine {
     return svgHtml;
   }
 
-  render(src, sign, $engine) {
+  render(src, sign, $engine, config = {}) {
     let $sign = sign;
     if (!$sign) {
       $sign = Math.round(Math.random() * 100000000);
@@ -134,6 +136,7 @@ export default class MermaidCodeEngine {
     // 需要通过添加时间戳使得多次渲染相同内容的图像ID唯一
     // 图像渲染节流在CodeBlock Hook内部控制
     const graphId = `mermaid-${$sign}-${new Date().getTime()}`;
+    this.svg2img = config?.svg2img ?? false;
     try {
       this.mermaidAPIRefs.render(
         graphId,
diff --git a/src/core/hooks/CodeBlock.js b/src/core/hooks/CodeBlock.js
index 31356746..a95f2b35 100644
--- a/src/core/hooks/CodeBlock.js
+++ b/src/core/hooks/CodeBlock.js
@@ -38,6 +38,7 @@ export default class CodeBlock extends ParagraphBase {
     this.wrap = config.wrap; // 超出是否换行
     this.lineNumber = config.lineNumber; // 是否显示行号
     this.copyCode = config.copyCode; // 是否显示“复制”按钮
+    this.mermaid = config.mermaid; // mermaid的配置，目前仅支持格式设置，svg2img=true 展示成图片，false 展示成svg
     this.indentedCodeBlock = typeof config.indentedCodeBlock === 'undefined' ? true : config.indentedCodeBlock; // 是否支持缩进代码块
     this.INLINE_CODE_REGEX = /(`+)(.+?(?:\n.+?)*?)\1/g;
     if (config && config.customRenderer) {
@@ -69,7 +70,7 @@ export default class CodeBlock extends ParagraphBase {
     if (!engine || typeof engine.render !== 'function') {
       return false;
     }
-    const html = engine.render(codeSrc, props.sign, this.$engine);
+    const html = engine.render(codeSrc, props.sign, this.$engine, this.mermaid);
     if (!html) {
       return false;
     }