✨ #913

CHANGELOG.md

@@ -98,10 +98,14 @@
 
 ### v3.8.0 / 2021-01-xx
 
+* [913](https://github.com/Vanessa219/vditor/pull/913) 支持plantuml `引入特性`
 * [907](https://github.com/Vanessa219/vditor/issues/907) mathjax 在method.min.js 中preview 显示错误 `修复缺陷`
 * [909](https://github.com/Vanessa219/vditor/issues/909) toc 和大纲中数学公式显示问题修复 `修复缺陷`
 * [908](https://github.com/Vanessa219/vditor/issues/908) 粘贴不了 MS Office Excel 内容的问题 `修复缺陷`
-
+* 文档修改
+  * 3.8.0
+    * 添加 plantumlRender 方法
+
 ### v3.7.7 / 2021-01-19
 
 * [903](https://github.com/Vanessa219/vditor/issues/903) 使用 setValue 后第一次输入无法撤销 `修复缺陷`

src/assets/scss/_reset.scss

@@ -228,7 +228,6 @@
     }
 
     .language-echarts,
-    .language-plantuml,
     .language-mindmap {
       overflow: hidden;
       height: 420px;

src/method.ts

@@ -9,8 +9,8 @@ import {mathRender} from "./ts/markdown/mathRender";
 import {mediaRender} from "./ts/markdown/mediaRender";
 import {mermaidRender} from "./ts/markdown/mermaidRender";
 import {mindmapRender} from "./ts/markdown/mindmapRender";
-import {plantumlRender} from "./ts/markdown/plantumlRender";
 import {outlineRender} from "./ts/markdown/outlineRender";
+import {plantumlRender} from "./ts/markdown/plantumlRender";
 import {md2html, previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
 import { previewImage } from "./ts/preview/image";

src/ts/markdown/plantumlRender.ts

@@ -5,38 +5,32 @@ declare const plantumlEncoder: {
     encode(options: string): string,
 };
 
-export const plantumlRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+export const plantumlRender = (element: HTMLElement, cdn = Constants.CDN) => {
     const plantumlElements = element.querySelectorAll(".language-plantuml");
     if (plantumlElements.length === 0) {
         return;
     }
-    addScript(`https://cdn.jsdelivr.net/gh/jmnote/plantuml[email protected]/dist/plantuml-encoder.min.js`, "vditorPlantumlEncoderScript").then(() => {
+    addScript(`${cdn}/dist/js/plantuml/plantuml-encoder.min.js`, "vditorPlantumlScript").then(() => {
         plantumlElements.forEach((e: HTMLDivElement) => {
-                if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
-                    e.parentElement.classList.contains("vditor-ir__marker--pre")) {
-                    return;
-                }
-                const text = e.innerText.trim();
-                if (!text) {
-                    return;
-                }
-                try {
-                    if (e.getAttribute("data-processed") === "true") {
-                        return;
-                    }
-
-                    const encoded = plantumlEncoder.encode(text)
-                    const imageElement = document.createElement("IMG");
-                    imageElement.setAttribute("loading", "lazy")
-                    imageElement.setAttribute("src", 'http://www.plantuml.com/plantuml/svg/~1' + encoded)
-                    e.parentNode.insertBefore(imageElement, e);
-                    e.style.display = 'none';
-
-                    e.setAttribute("data-processed", "true");
-                } catch (error) {
-                    e.className = "vditor-reset--error";
-                    e.innerHTML = `plantuml render error: <br>${error}`;
-                }
-            });
+            if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                e.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+            const text = e.innerText.trim();
+            if (!text) {
+                return;
+            }
+            try {
+                const encoded = plantumlEncoder.encode(text);
+                const imageElement = document.createElement("img");
+                imageElement.setAttribute("loading", "lazy");
+                imageElement.setAttribute("src", "http://www.plantuml.com/plantuml/svg/~1" + encoded);
+                e.parentNode.insertBefore(imageElement, e);
+                e.remove();
+            } catch (error) {
+                e.className = "vditor-reset--error";
+                e.innerHTML = `plantuml render error: <br>${error}`;
+            }
+        });
     });
 };

src/ts/markdown/previewRender.ts

@@ -95,7 +95,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     graphvizRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
-    plantumlRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    plantumlRender(previewElement, mergedOptions.cdn);
     abcRender(previewElement, mergedOptions.cdn);
     mediaRender(previewElement);
     if (mergedOptions.speech.enable) {

src/ts/preview/index.ts

@@ -215,7 +215,7 @@ export class Preview {
         graphvizRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
         chartRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
         mindmapRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
-        plantumlRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
+        plantumlRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
         abcRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
         mediaRender(vditor.preview.element.lastElementChild as HTMLElement);
         // toc render

src/ts/util/processCode.ts

@@ -76,7 +76,7 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     } else if (language === "mindmap") {
         mindmapRender(previewPanel, vditor.options.cdn, vditor.options.theme);
     } else if (language === "plantuml") {
-        plantumlRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+        plantumlRender(previewPanel, vditor.options.cdn);
     } else if (language === "graphviz") {
         graphvizRender(previewPanel, vditor.options.cdn);
     } else if (language === "math") {

src/ts/wysiwyg/index.ts

@@ -100,12 +100,12 @@ class WYSIWYG {
                                 `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
                             blockEndElement = item;
                         } else if (item.nodeType !== 3 && item.getAttribute("data-block") === "0") {
-                           if (index === 0) {
-                               removeStart = true;
-                           } else if (index === contents.childNodes.length - 1) {
-                               removeEnd = true;
-                           }
-                           item.innerHTML =
+                            if (index === 0) {
+                                removeStart = true;
+                            } else if (index === contents.childNodes.length - 1) {
+                                removeEnd = true;
+                            }
+                            item.innerHTML =
                                 `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
                         } else {
                             const commentElement = document.createElement("span");
@@ -400,7 +400,9 @@ class WYSIWYG {
                 return;
             }
 
-            if (event.target.tagName === "IMG") {
+            if (event.target.tagName === "IMG" &&
+                // plantuml 图片渲染不进行提示
+                !event.target.parentElement.classList.contains("vditor-wysiwyg__preview")) {
                 if (event.target.getAttribute("data-type") === "link-ref") {
                     genLinkRefPopover(vditor, event.target);
                 } else {