vditor 3.8.18 → 3.9.1

package/src/ts/markdown/markmapRender.ts

@@ -0,0 +1,57 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {markmapRenderAdapter} from "./adapterRender";
+
+declare const window: any;
+const enabled: Record<string, boolean> = {};
+
+const transform = (transformer: any,content: string)=>{
+    const result = transformer.transform(content);
+    const keys = Object.keys(result.features).filter((key) => !enabled[key]);
+    keys.forEach((key) => {
+        enabled[key] = true;
+    });
+    const { styles, scripts } = transformer.getAssets(keys);
+    const { markmap } = window;
+    if (styles) markmap.loadCSS(styles);
+    if (scripts) markmap.loadJS(scripts);
+    return result;
+}
+
+const init = (el: HTMLElement,code: string) => {
+    const { Transformer, Markmap, deriveOptions , globalCSS} = window.markmap;
+    const transformer = new Transformer();
+    el.innerHTML = '<svg style="width:100%"></svg>';
+    const svg = el.firstChild as SVGElement;
+    const mm = Markmap.create(svg, null);
+    const { root, frontmatter } = transform(transformer, code);
+    const markmapOptions = frontmatter?.markmap;
+    const frontmatterOptions = deriveOptions(markmapOptions);
+    mm.setData(root, frontmatterOptions);
+    mm.fit();
+  }
+
+
+export const markmapRender = (element: HTMLElement, cdn = Constants.CDN, theme: string) => {
+    const markmapElements = markmapRenderAdapter.getElements(element);
+    if (markmapElements.length === 0) {
+        return;
+    }
+    addScript(`${cdn}/src/js/markmap/markmap.min.js`, "vditorMermaidScript").then(() => {
+        markmapElements.forEach((item) => {
+            const code = markmapRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+            const render = document.createElement("div")
+            render.className = "language-markmap"
+            item.parentNode.appendChild(render)
+            init(render,code)
+    
+            if(item.parentNode.childNodes[0].nodeName == "CODE"){
+                item.parentNode.removeChild(item.parentNode.childNodes[0])
+            }
+        });
+    });
+
+};

package/src/ts/markdown/previewRender.ts

@@ -14,6 +14,7 @@ import {lazyLoadImageRender} from "./lazyLoadImageRender";
 import {mathRender} from "./mathRender";
 import {mediaRender} from "./mediaRender";
 import {mermaidRender} from "./mermaidRender";
+import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "./mindmapRender";
 import {plantumlRender} from "./plantumlRender";
 import {setLute} from "./setLute";
@@ -85,7 +86,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     previewElement.classList.add("vditor-reset");
 
     if (!mergedOptions.i18n) {
-        if (!["en_US", "ja_JP", "ko_KR", "ru_RU", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+        if (!["en_US", "fr_FR", "ja_JP", "ko_KR", "ru_RU", "sv_SE", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
             throw new Error(
                 "options.lang error, see https://ld246.com/article/1549638745630#options",
             );
@@ -118,6 +119,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
         math: mergedOptions.math,
     });
     mermaidRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
+    markmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     flowchartRender(previewElement, mergedOptions.cdn);
     graphvizRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);

package/src/ts/outline/index.ts

@@ -24,7 +24,7 @@ export class Outline {
         return html;
     }
 
-    public toggle(vditor: IVditor, show = true) {
+    public toggle(vditor: IVditor, show = true, focus = true) {
         const btnElement = vditor.toolbar.elements.outline?.firstElementChild;
         if (show && window.innerWidth >= Constants.MOBILE_WIDTH) {
             this.element.style.display = "block";
@@ -34,12 +34,10 @@ export class Outline {
             this.element.style.display = "none";
             btnElement?.classList.remove("vditor-menu--current");
         }
-        if (getSelection().rangeCount > 0) {
+        if (focus && getSelection().rangeCount > 0) {
             const range = getSelection().getRangeAt(0);
             if (vditor[vditor.currentMode].element.contains(range.startContainer)) {
                 setSelectionFocus(range);
-            } else {
-                vditor[vditor.currentMode].element.focus();
             }
         }
         setPadding(vditor);

package/src/ts/preview/index.ts

@@ -8,6 +8,7 @@ import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
+import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
 import {getEventName} from "../util/compatibility";
@@ -51,8 +52,21 @@ export class Preview {
                 }
                 return;
             }
+            if (event.target.tagName === "A") {
+                if (vditor.options.link.click) {
+                    vditor.options.link.click(event.target);
+                } else if (vditor.options.link.isOpen) {
+                    window.open(event.target.getAttribute("href"));
+                }
+                event.preventDefault();
+                return;
+            }
             if (event.target.tagName === "IMG") {
-                previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+                if (vditor.options.image.preview) {
+                    vditor.options.image.preview(event.target)
+                } else if (vditor.options.image.isPreview) {
+                    previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+                }
             }
         });
 
@@ -211,6 +225,7 @@ export class Preview {
         highlightRender(vditor.options.preview.hljs, vditor.preview.element.lastElementChild as HTMLElement,
             vditor.options.cdn);
         mermaidRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
+        markmapRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
         flowchartRender(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, vditor.options.theme);

package/src/ts/toolbar/EditMode.ts

@@ -145,7 +145,7 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
         vditor.toolbar.elements["edit-mode"].querySelector(`button[data-mode="${vditor.currentMode}"]`).classList.add("vditor-menu--current");
     }
 
-    vditor.outline.toggle(vditor, vditor.currentMode !== "sv" && vditor.options.outline.enable);
+    vditor.outline.toggle(vditor, vditor.currentMode !== "sv" && vditor.options.outline.enable, typeof event !== "string");
 };
 
 export class EditMode extends MenuItem {

package/src/ts/ui/initUI.ts

@@ -81,7 +81,7 @@ export const initUI = (vditor: IVditor) => {
   if (vditor.toolbar.elements.export) {
     // for export pdf
     vditor.element.insertAdjacentHTML("beforeend",
-      '<iframe style="width: 100%;height: 0;border: 0"></iframe>');
+      '<iframe id="vditorExportIframe" style="width: 100%;height: 0;border: 0"></iframe>');
   }
 
   setEditMode(vditor, vditor.options.mode, afterRender(vditor));

package/src/ts/util/Options.ts

@@ -1,5 +1,5 @@
-import { Constants } from "../constants";
-import { merge } from "./merge";
+import {Constants} from "../constants";
+import {merge} from "./merge";
 
 export class Options {
     public options: IOptions;
@@ -59,6 +59,12 @@ export class Options {
             mode: "both",
             theme: Constants.THEME_OPTIONS,
         },
+        link: {
+            isOpen: true,
+        },
+        image: {
+            isPreview: true,
+        },
         resize: {
             enable: false,
             position: "bottom",

package/src/ts/util/editorCommonEvent.ts

@@ -29,7 +29,11 @@ export const focusEvent = (vditor: IVditor, editorElement: HTMLElement) => {
 export const dblclickEvent = (vditor: IVditor, editorElement: HTMLElement) => {
     editorElement.addEventListener("dblclick", (event: MouseEvent & { target: HTMLElement }) => {
         if (event.target.tagName === "IMG") {
-            previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            if (vditor.options.image.preview) {
+                vditor.options.image.preview(event.target);
+            } else if (vditor.options.image.isPreview) {
+                previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            }
         }
     });
 };

package/src/ts/util/fixBrowserBehavior.ts

@@ -51,7 +51,9 @@ export const fixCJKPosition = (range: Range, vditor: IVditor, event: KeyboardEve
     if (pLiElement && getSelectPosition(pLiElement, vditor[vditor.currentMode].element, range).start === 0) {
 
         // https://github.com/Vanessa219/vditor/issues/1289 WKWebView切换输入法产生六分之一空格，造成光标错位
-        pLiElement.nodeValue = pLiElement.nodeValue.replace(/\u2006/g, '');
+        if (pLiElement.nodeValue) {
+            pLiElement.nodeValue = pLiElement.nodeValue.replace(/\u2006/g, '');
+        }
 
         const zwspNode = document.createTextNode(Constants.ZWSP);
         range.insertNode(zwspNode);

package/src/ts/util/processCode.ts

@@ -6,6 +6,7 @@ import {graphvizRender} from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
 import {mathRender} from "../markdown/mathRender";
 import {mermaidRender} from "../markdown/mermaidRender";
+import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
 
@@ -63,12 +64,15 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
     }
     const language = previewPanel.firstElementChild.className.replace("language-", "");
     if (!language) {
+        codeRender(previewPanel);
         return;
     }
     if (language === "abc") {
         abcRender(previewPanel, vditor.options.cdn);
     } else if (language === "mermaid") {
         mermaidRender(previewPanel, vditor.options.cdn, vditor.options.theme);
+    } else if (language === "markmap") {
+        markmapRender(previewPanel, vditor.options.cdn, vditor.options.theme);
     } else if (language === "flowchart") {
         flowchartRender(previewPanel, vditor.options.cdn);
     } else if (language === "echarts") {

package/src/ts/wysiwyg/index.ts

@@ -425,7 +425,13 @@ class WYSIWYG {
 
             // 打开链接
             if (event.target.tagName === "A") {
-                window.open(event.target.getAttribute("href"));
+                if (vditor.options.link.click) {
+                    vditor.options.link.click(event.target);
+                } else if (vditor.options.link.isOpen) {
+                    window.open(event.target.getAttribute("href"));
+                }
+                event.preventDefault();
+                return;
             }
 
             const range = getEditorRange(vditor);