🎨 Vanessa219#27

stevapple · Apr 8, 2020 · a7be14f · a7be14f
1 parent 9c2db2f
commit a7be14f
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 7 deletions.
diff --git a/src/assets/scss/_ir.scss b/src/assets/scss/_ir.scss
@@ -50,6 +50,12 @@
 
       &--pre {
         color: var(--textarea-text-color);
+
+        .language-mermaid,
+        .language-graphviz,
+        .language-echarts {
+          background-color: var(--code-background-color) !important;
+        }
       }
     }
 

diff --git a/src/assets/scss/_reset.scss b/src/assets/scss/_reset.scss
@@ -201,6 +201,12 @@
       background-size: 20px 20px;
       white-space: pre-wrap;
       background-color: var(--code-background-color);
+
+      &.language-mermaid,
+      &.language-graphviz,
+      &.language-echarts {
+        background-color: var(--preview-background-color);
+      }
     }
 
     pre > code {

diff --git a/src/assets/scss/_wysiwyg.scss b/src/assets/scss/_wysiwyg.scss
@@ -69,9 +69,14 @@
       display: none;
 
       & > code {
-        border: 1px solid var(--border-color);
         overflow: auto !important;
         display: block;
+
+        &.language-mermaid,
+        &.language-graphviz,
+        &.language-echarts {
+          background-color: var(--code-background-color) !important;
+        }
       }
     }
 

diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
@@ -28,6 +28,7 @@ $transition: all .15s ease-in-out !default;
   --resize-hover-background-color: var(--toolbar-icon-hover-color);
 
   --code-background-color: rgba(27, 31, 35, .05);
+  --preview-background-color: rgba(27, 31, 35, .02);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
 
@@ -57,6 +58,7 @@ $transition: all .15s ease-in-out !default;
     --resize-hover-background-color: rgba(185, 185, 185, .86);
 
     --code-background-color: #{rgba($blurColor, .36)};
+    --preview-background-color: rgba(120, 146, 190, 0.55);
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
 

diff --git a/src/ts/ir/index.ts b/src/ts/ir/index.ts
@@ -129,10 +129,16 @@ class IR {
                         },
                     });
                     insertHTML(vditor.lute.HTML2VditorIRDOM(tempElement.innerHTML), vditor);
+                    vditor.ir.element.querySelectorAll(".vditor-ir__preview").forEach((item: HTMLElement) => {
+                        processCodeRender(item, vditor);
+                    });
                 } else if (event.clipboardData.files.length > 0 && vditor.options.upload.url) {
                     uploadFiles(vditor, event.clipboardData.files);
                 } else if (textPlain.trim() !== "" && event.clipboardData.files.length === 0) {
                     insertHTML(vditor.lute.Md2VditorIRDOM(textPlain), vditor);
+                    vditor.ir.element.querySelectorAll(".vditor-ir__preview").forEach((item: HTMLElement) => {
+                        processCodeRender(item, vditor);
+                    });
                 }
             }
 

diff --git a/src/ts/ir/process.ts b/src/ts/ir/process.ts
@@ -66,11 +66,9 @@ export const processAfterRender = (vditor: IVditor, options = {
 export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) => {
     const language = previewPanel.querySelector("code").className.replace("language-", "");
     if (language === "abc") {
-        previewPanel.style.marginTop = "1em";
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {
-        mermaidRender(previewPanel, ".vditor-ir__preview .language-mermaid",
-            vditor.options.cdn);
+        mermaidRender(previewPanel, ".vditor-ir__preview .language-mermaid", vditor.options.cdn);
     } else if (language === "echarts") {
         chartRender(previewPanel, vditor.options.cdn);
     } else if (language === "graphviz") {

diff --git a/src/ts/markdown/abcRender.ts b/src/ts/markdown/abcRender.ts
@@ -12,8 +12,8 @@ export const abcRender = (element: (HTMLElement | Document) = document,
         addScript(`${cdn}/dist/js/abcjs/abcjs_basic.min.js`, "vditorAbcjsScript");
         abcElements.forEach((e: HTMLDivElement) => {
             const divElement = document.createElement("div");
-            divElement.style.backgroundColor = "var(--code-background-color)";
-            e.parentNode.parentNode.replaceChild(divElement, e.parentNode);
+            divElement.style.backgroundColor = "var(--preview-background-color)";
+            e.parentNode.replaceChild(divElement, e);
             ABCJS.renderAbc(divElement, e.textContent.trim());
             divElement.style.overflowX = "auto";
         });

diff --git a/src/ts/wysiwyg/processCodeRender.ts b/src/ts/wysiwyg/processCodeRender.ts
@@ -60,7 +60,6 @@ export const processCodeRender = (blockElement: HTMLElement, vditor: IVditor) =>
         // 代码块下方输入中文会消失，因此要 trim
         previewPanel.innerHTML = `<pre><code class="${codeElement.className}">${innerHTML.trimRight()}</code></pre>`;
         if (language === "abc") {
-            previewPanel.style.marginTop = "1em";
             abcRender(previewPanel, vditor.options.cdn);
         } else if (language === "mermaid") {
             mermaidRender(previewPanel, ".vditor-wysiwyg__preview .language-mermaid",