vditor 3.11.2 → 3.11.3

package/src/method.ts

@@ -14,6 +14,7 @@ import {markmapRender} from "./ts/markdown/markmapRender";
 import {mindmapRender} from "./ts/markdown/mindmapRender";
 import {outlineRender} from "./ts/markdown/outlineRender";
 import {plantumlRender} from "./ts/markdown/plantumlRender";
+import {wavedromRender} from "./ts/markdown/wavedromRender";
 import {md2html, previewRender} from "./ts/markdown/previewRender";
 import {speechRender} from "./ts/markdown/speechRender";
 import {previewImage} from "./ts/preview/image";
@@ -30,6 +31,8 @@ class Vditor {
     public static codeRender = codeRender;
     /** 对 graphviz 进行渲染 */
     public static graphvizRender = graphvizRender;
+    /** 对数字波形图进行渲染 */
+    public static wavedromRender = wavedromRender;
     /** 为 element 中的代码块进行高亮渲染 */
     public static highlightRender = highlightRender;
     /** 对数学公式进行渲染 */

package/src/ts/constants.ts

@@ -44,17 +44,19 @@ export abstract class Constants {
         "stackoverflow-light", "tokyo-night-light", "vs", "xcode", "default"];
     public static readonly ALIAS_CODE_LANGUAGES: string[] = [
         // 自定义
-        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "math", "markmap", "smiles",
+        "abc", "plantuml", "mermaid", "flowchart", "echarts", "mindmap", "graphviz", "wavedrom", "math", "markmap", "smiles",
         // 别名
         "js", "ts", "html", "toml", "c#", "bat"
     ];
     public static readonly CDN = `https://unpkg.com/vditor@${VDITOR_VERSION}`;
     public static readonly MARKDOWN_OPTIONS = {
         autoSpace: false,
+        callout: true,
         gfmAutoLink: true,
         codeBlockPreview: true,
         fixTermTypo: false,
         footnotes: true,
+        imageCaption: false,
         linkBase: "",
         linkPrefix: "",
         listStyle: false,
@@ -62,6 +64,8 @@ export abstract class Constants {
         mathBlockPreview: true,
         paragraphBeginningSpace: false,
         sanitize: true,
+        sub: false,
+        sup: false,
         toc: false,
     };
     public static readonly HLJS_OPTIONS = {

package/src/ts/export/index.ts

@@ -36,6 +36,7 @@ window.addEventListener("message", (e) => {
   Vditor.preview(document.getElementById('preview'), e.data, {
     cdn: "${vditor.options.cdn}",
     markdown: {
+      callout: ${JSON.stringify(vditor.options.preview.markdown.callout)},
       theme: ${JSON.stringify(vditor.options.preview.theme)}
     },
     hljs: {
@@ -73,6 +74,7 @@ export const exportHTML = (vditor: IVditor) => {
     Vditor.markmapRender(previewElement, '${vditor.options.cdn}');
     Vditor.flowchartRender(previewElement, '${vditor.options.cdn}');
     Vditor.graphvizRender(previewElement, '${vditor.options.cdn}');
+    Vditor.wavedromRender(previewElement, '${vditor.options.cdn}');
     Vditor.chartRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.mindmapRender(previewElement, '${vditor.options.cdn}', '${vditor.options.theme}');
     Vditor.abcRender(previewElement, '${vditor.options.cdn}');

package/src/ts/ir/index.ts

@@ -11,6 +11,7 @@ import {
 } from "../util/editorCommonEvent";
 import {paste} from "../util/fixBrowserBehavior";
 import {hasClosestByAttribute, hasClosestByClassName} from "../util/hasClosest";
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {
     getEditorRange, setRangeByWbr,
     setSelectionFocus,
@@ -22,6 +23,28 @@ import {input} from "./input";
 import {processAfterRender, processHint} from "./process";
 import {hidePanel} from "../toolbar/setToolbar";
 
+const getHeadingMarker = (headingElement: Element) => {
+    return Array.from(headingElement.children).find((item) => item.getAttribute("data-type") === "heading-marker");
+};
+
+const restoreHeadingMarker = (sourceHeading: HTMLElement | false, copiedHeading?: HTMLElement) => {
+    if (!sourceHeading || !copiedHeading || sourceHeading.tagName !== copiedHeading.tagName ||
+        sourceHeading.getAttribute("data-marker") !== copiedHeading.getAttribute("data-marker") ||
+        copiedHeading.textContent.trim() === "" || getHeadingMarker(copiedHeading)) {
+        return;
+    }
+
+    const markerElement = getHeadingMarker(sourceHeading);
+    if (!markerElement) {
+        return;
+    }
+    if (sourceHeading.firstElementChild === markerElement) {
+        copiedHeading.insertBefore(markerElement.cloneNode(true), copiedHeading.firstChild);
+    } else if (sourceHeading.lastElementChild === markerElement) {
+        copiedHeading.appendChild(markerElement.cloneNode(true));
+    }
+};
+
 class IR {
     public range: Range;
     public element: HTMLPreElement;
@@ -61,6 +84,9 @@ class IR {
 
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
+        const copiedHeadings = tempElement.querySelectorAll<HTMLElement>("h1, h2, h3, h4, h5, h6");
+        restoreHeadingMarker(hasClosestByHeadings(range.startContainer), copiedHeadings.item(0));
+        restoreHeadingMarker(hasClosestByHeadings(range.endContainer), copiedHeadings.item(copiedHeadings.length - 1));
 
         event.clipboardData.setData("text/plain", vditor.lute.VditorIRDOM2Md(tempElement.innerHTML).trim());
         event.clipboardData.setData("text/html", "");

package/src/ts/ir/process.ts

@@ -1,5 +1,6 @@
 import {Constants} from "../constants";
 import {getMarkdown} from "../markdown/getMarkdown";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 import {removeCurrentToolbar} from "../toolbar/setToolbar";
 import {accessLocalStorage} from "../util/compatibility";
 import {listToggle} from "../util/fixBrowserBehavior";
@@ -41,6 +42,7 @@ export const processAfterRender = (vditor: IVditor, options = {
     enableHint: false,
     enableInput: true,
 }) => {
+    renderImageCaptions(vditor.ir.element, "ir", vditor.options.preview.markdown.imageCaption);
     if (options.enableHint) {
         processHint(vditor);
     }
@@ -96,12 +98,25 @@ export const processHeading = (vditor: IVditor, value: string) => {
 const removeInline = (range: Range, vditor: IVditor, type: string) => {
     const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", type) as HTMLElement;
     if (inlineElement) {
+        const keepSelection = !range.collapsed;
         inlineElement.firstElementChild.remove();
         inlineElement.lastElementChild.remove();
+        if (keepSelection) {
+            const endRange = range.cloneRange();
+            endRange.collapse(false);
+            endRange.insertNode(document.createElement("wbr"));
+        }
         range.insertNode(document.createElement("wbr"));
         const tempElement = document.createElement("div");
         tempElement.innerHTML = vditor.lute.SpinVditorIRDOM(inlineElement.outerHTML);
         inlineElement.outerHTML = tempElement.firstElementChild.innerHTML.trim();
+        if (keepSelection) {
+            setRangeByWbr(vditor.ir.element, range);
+            const endWbrElement = vditor.ir.element.querySelector("wbr");
+            range.setEndBefore(endWbrElement);
+            endWbrElement.remove();
+            setSelectionFocus(range);
+        }
     }
 };
 
@@ -182,6 +197,7 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
         } else if (commandName === "italic" || commandName === "bold" || commandName === "strike"
             || commandName === "inline-code" || commandName === "code" || commandName === "table") {
             let html;
+            let keepSelection = false;
             if (range.toString() === "") {
                 html = `${prefix}<wbr>${suffix}`;
             } else {
@@ -190,7 +206,8 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
                 } else if (commandName === "table") {
                     html = `${prefix}${range.toString()}<wbr>${suffix}`;
                 } else {
-                    html = `${prefix}${range.toString()}${suffix}<wbr>`;
+                    html = `${prefix}<wbr>${range.toString()}<wbr>${suffix}`;
+                    keepSelection = true;
                 }
                 range.deleteContents();
             }
@@ -202,6 +219,12 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
             spanElement.innerHTML = html;
             range.insertNode(spanElement);
             input(vditor, range);
+            if (keepSelection) {
+                const endWbrElement = vditor.ir.element.querySelector("wbr");
+                range.setEndBefore(endWbrElement);
+                endWbrElement.remove();
+                setSelectionFocus(range);
+            }
 
             if (commandName === "table") {
                 range.selectNodeContents(getSelection().getRangeAt(0).startContainer.parentElement);

package/src/ts/markdown/adapterRender.ts

@@ -31,6 +31,10 @@ export const graphvizRenderAdapter = {
     getCode: (el: Element) => el.textContent,
     getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
 };
+export const wavedromRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-wavedrom"),
+};
 export const flowchartRenderAdapter = {
     getCode: (el: Element) => el.textContent,
     getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),

package/src/ts/markdown/getHTML.ts

@@ -1,11 +1,14 @@
 import {getMarkdown} from "./getMarkdown";
+import {renderImageCaptionHTML} from "./imageCaptionRender";
 
 export const getHTML = (vditor: IVditor) => {
+    let html = "";
     if (vditor.currentMode === "sv") {
-        return vditor.lute.Md2HTML(getMarkdown(vditor));
+        html = vditor.lute.Md2HTML(getMarkdown(vditor));
     } else if (vditor.currentMode === "wysiwyg") {
-        return vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
+        html = vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
     } else if (vditor.currentMode === "ir") {
-        return vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
+        html = vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
     }
+    return renderImageCaptionHTML(html, vditor.options.preview.markdown.imageCaption);
 };

package/src/ts/markdown/imageCaptionRender.ts

@@ -0,0 +1,175 @@
+const getContentNodes = (element: Element, ignoreIRMarkers = false) => {
+    return Array.from(element.childNodes).filter((node) => {
+        if (node.nodeType === Node.COMMENT_NODE) {
+            return false;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            return node.textContent.replace(/\u200b/g, "").trim() !== "";
+        }
+        if (!(node instanceof HTMLElement)) {
+            return true;
+        }
+        if (node.tagName === "WBR") {
+            return false;
+        }
+        return !ignoreIRMarkers || !node.classList.contains("vditor-ir__marker");
+    });
+};
+
+const getWYSIWYGImage = (paragraph: HTMLParagraphElement) => {
+    const nodes = getContentNodes(paragraph);
+    if (nodes.length !== 1 || !(nodes[0] instanceof HTMLElement)) {
+        return undefined;
+    }
+
+    const container = nodes[0];
+    if (container instanceof HTMLImageElement) {
+        return {
+            container,
+            image: container,
+        };
+    }
+    if (container instanceof HTMLAnchorElement) {
+        const linkNodes = getContentNodes(container);
+        if (linkNodes.length === 1 && linkNodes[0] instanceof HTMLImageElement) {
+            return {
+                container,
+                image: linkNodes[0],
+            };
+        }
+    }
+    return undefined;
+};
+
+const getIRImage = (paragraph: HTMLParagraphElement) => {
+    const nodes = getContentNodes(paragraph);
+    if (nodes.length !== 1 || !(nodes[0] instanceof HTMLElement)) {
+        return undefined;
+    }
+
+    let imageNode = nodes[0];
+    if (imageNode.getAttribute("data-type") === "a") {
+        const linkNodes = getContentNodes(imageNode, true);
+        if (linkNodes.length !== 1 || !(linkNodes[0] instanceof HTMLElement)) {
+            return undefined;
+        }
+        imageNode = linkNodes[0];
+    }
+    if (imageNode.getAttribute("data-type") !== "img") {
+        return undefined;
+    }
+
+    const image = imageNode.querySelector(":scope > img");
+    const titleMarker = imageNode.querySelector<HTMLElement>(":scope > .vditor-ir__marker--title");
+    if (!(image instanceof HTMLImageElement) || !titleMarker) {
+        return undefined;
+    }
+
+    const markerText = titleMarker.textContent.trim();
+    const closeMarker = markerText[0] === "(" ? ")" : markerText[0];
+    if (markerText.length < 2 || !["\"", "'", "("].includes(markerText[0]) ||
+        markerText[markerText.length - 1] !== closeMarker) {
+        return undefined;
+    }
+    return {
+        caption: markerText.slice(1, -1).trim(),
+        container: imageNode,
+        image,
+    };
+};
+
+const unwrapWYSIWYGCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("span.vditor-image[data-image-caption]").forEach((wrapper) => {
+        while (wrapper.firstChild) {
+            wrapper.parentNode.insertBefore(wrapper.firstChild, wrapper);
+        }
+        wrapper.remove();
+    });
+};
+
+const resetIRCaptions = (element: HTMLElement) => {
+    element.querySelectorAll(".vditor-image[data-image-caption]").forEach((imageNode) => {
+        imageNode.classList.remove("vditor-image");
+        imageNode.removeAttribute("data-image-caption");
+    });
+};
+
+const renderPreviewCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("p").forEach((paragraph: HTMLParagraphElement) => {
+        const imageData = getWYSIWYGImage(paragraph);
+        const caption = imageData?.image.getAttribute("title")?.trim();
+        if (!imageData || !caption) {
+            return;
+        }
+
+        const figure = document.createElement("figure");
+        Array.from(paragraph.attributes).forEach((attribute) => {
+            figure.setAttribute(attribute.name, attribute.value);
+        });
+        figure.classList.add("vditor-image");
+        const figcaption = document.createElement("figcaption");
+        figcaption.textContent = caption;
+        figure.append(imageData.container, figcaption);
+        paragraph.replaceWith(figure);
+    });
+};
+
+const renderWYSIWYGCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("p").forEach((paragraph: HTMLParagraphElement) => {
+        const imageData = getWYSIWYGImage(paragraph);
+        const caption = imageData?.image.getAttribute("title")?.trim();
+        if (!imageData || !caption) {
+            return;
+        }
+
+        const wrapper = document.createElement("span");
+        wrapper.className = "vditor-image";
+        wrapper.setAttribute("data-image-caption", caption);
+        imageData.container.replaceWith(wrapper);
+        wrapper.append(imageData.container);
+    });
+};
+
+const renderIRCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("p").forEach((paragraph: HTMLParagraphElement) => {
+        const imageData = getIRImage(paragraph);
+        if (!imageData?.caption) {
+            return;
+        }
+        imageData.container.classList.add("vditor-image");
+        imageData.container.setAttribute("data-image-caption", imageData.caption);
+    });
+};
+
+export const renderImageCaptions = (
+    element: HTMLElement,
+    mode: "preview" | "wysiwyg" | "ir",
+    enable: boolean,
+) => {
+    if (mode === "wysiwyg") {
+        unwrapWYSIWYGCaptions(element);
+    } else if (mode === "ir") {
+        resetIRCaptions(element);
+    }
+    if (!enable) {
+        return;
+    }
+
+    if (mode === "preview") {
+        renderPreviewCaptions(element);
+    } else if (mode === "wysiwyg") {
+        renderWYSIWYGCaptions(element);
+    } else {
+        renderIRCaptions(element);
+    }
+};
+
+export const renderImageCaptionHTML = (html: string, enable: boolean) => {
+    if (!enable) {
+        return html;
+    }
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    renderImageCaptions(container, "preview", true);
+    return container.innerHTML;
+};

package/src/ts/markdown/mermaidRender.ts

@@ -13,7 +13,7 @@ export const mermaidRender = (element: (HTMLElement | Document) = document, cdn
     if (mermaidElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.6.0`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.16.1`, "vditorMermaidScript").then(() => {
         const config: any = {
             securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
             altFontFamily: "sans-serif",

package/src/ts/markdown/previewRender.ts

@@ -10,6 +10,7 @@ import {codeRender} from "./codeRender";
 import {flowchartRender} from "./flowchartRender";
 import {graphvizRender} from "./graphvizRender";
 import {highlightRender} from "./highlightRender";
+import {renderImageCaptionHTML} from "./imageCaptionRender";
 import {lazyLoadImageRender} from "./lazyLoadImageRender";
 import {mathRender} from "./mathRender";
 import {mediaRender} from "./mediaRender";
@@ -20,6 +21,7 @@ import {mindmapRender} from "./mindmapRender";
 import {plantumlRender} from "./plantumlRender";
 import {setLute} from "./setLute";
 import {speechRender} from "./speechRender";
+import {wavedromRender} from "./wavedromRender";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption: IPreviewOptions = {
@@ -59,6 +61,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
     return addScript(`${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript").then(() => {
         const lute = setLute({
             autoSpace: mergedOptions.markdown.autoSpace,
+            callout: mergedOptions.markdown.callout,
             gfmAutoLink: mergedOptions.markdown.gfmAutoLink,
             codeBlockPreview: mergedOptions.markdown.codeBlockPreview,
             emojiSite: mergedOptions.emojiPath,
@@ -75,6 +78,8 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             mathBlockPreview: mergedOptions.markdown.mathBlockPreview,
             paragraphBeginningSpace: mergedOptions.markdown.paragraphBeginningSpace,
             sanitize: mergedOptions.markdown.sanitize,
+            sub: mergedOptions.markdown.sub,
+            sup: mergedOptions.markdown.sup,
             toc: mergedOptions.markdown.toc,
         });
         if (options?.renderers) {
@@ -85,7 +90,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             });
         }
         lute.SetHeadingID(true);
-        return lute.Md2HTML(mdText);
+        return renderImageCaptionHTML(lute.Md2HTML(mdText), mergedOptions.markdown.imageCaption);
     });
 };
 
@@ -136,6 +141,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     markmapRender(previewElement, mergedOptions.cdn);
     flowchartRender(previewElement, mergedOptions.cdn);
     graphvizRender(previewElement, mergedOptions.cdn);
+    wavedromRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     plantumlRender(previewElement, mergedOptions.cdn);

package/src/ts/markdown/setLute.ts

@@ -5,6 +5,7 @@ export const setLute = (options: ILuteOptions) => {
     lute.SetHeadingAnchor(options.headingAnchor);
     lute.SetInlineMathAllowDigitAfterOpenMarker(options.inlineMathDigit);
     lute.SetAutoSpace(options.autoSpace);
+    lute.SetCallout(options.callout);
     lute.SetToC(options.toc);
     lute.SetFootnotes(options.footnotes);
     lute.SetFixTermTypo(options.fixTermTypo);
@@ -20,5 +21,7 @@ export const setLute = (options: ILuteOptions) => {
     if (options.lazyLoadImage) {
         lute.SetImageLazyLoading(options.lazyLoadImage);
     }
+    lute.SetSup(options.sup);
+    lute.SetSub(options.sub);
     return lute;
 };

package/src/ts/markdown/wavedromRender.ts

@@ -0,0 +1,54 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {looseJsonParse} from "../util/function";
+import {wavedromRenderAdapter} from "./adapterRender";
+
+declare const wavedrom: {
+    renderWaveElement(index: number, source: object, element: HTMLElement, skin: object, notFirstSignal: boolean): void;
+    waveSkin: object;
+};
+
+let wavedromIndex = 0;
+
+export const wavedromRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    const wavedromElements = wavedromRenderAdapter.getElements(element);
+    if (wavedromElements.length === 0) {
+        return;
+    }
+
+    addScript(`${cdn}/dist/js/wavedrom/wavedrom.min.js?v=3.6.2`, "vditorWavedromScript").then(() => {
+        wavedromElements.forEach(async (item: HTMLElement) => {
+            if (item.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                item.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+
+            const code = wavedromRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+
+            let renderElement = item;
+            if (item.tagName === "CODE") {
+                renderElement = document.createElement("div");
+                Array.from(item.attributes).forEach((attribute) => {
+                    renderElement.setAttribute(attribute.name, attribute.value);
+                });
+                item.replaceWith(renderElement);
+            }
+
+            try {
+                const source = await looseJsonParse(code);
+                wavedrom.renderWaveElement(wavedromIndex, source, renderElement, wavedrom.waveSkin, false);
+                wavedromIndex++;
+            } catch (error) {
+                const message = error instanceof Error ? error.message : String(error);
+                const lineBreak = document.createElement("br");
+                renderElement.replaceChildren(document.createTextNode("wavedrom render error:"), lineBreak,
+                    document.createTextNode(message));
+                renderElement.classList.add("vditor-reset--error");
+            }
+            renderElement.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/preview/index.ts

@@ -5,6 +5,7 @@ import {flowchartRender} from "../markdown/flowchartRender";
 import {getMarkdown} from "../markdown/getMarkdown";
 import {graphvizRender} from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 import {mathRender} from "../markdown/mathRender";
 import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
@@ -12,6 +13,7 @@ import {SMILESRender} from "../markdown/SMILESRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
+import {wavedromRender} from "../markdown/wavedromRender";
 import {getEventName} from "../util/compatibility";
 import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {hasClosestByTag} from "../util/hasClosestByHeadings";
@@ -152,6 +154,7 @@ export class Preview {
 
         if (value) {
             this.previewElement.innerHTML = value;
+            renderImageCaptions(this.previewElement, "preview", vditor.options.preview.markdown.imageCaption);
             return;
         }
 
@@ -205,6 +208,7 @@ export class Preview {
     }
 
     private afterRender(vditor: IVditor, startTime: number) {
+        renderImageCaptions(this.previewElement, "preview", vditor.options.preview.markdown.imageCaption);
         if (vditor.options.preview.parse) {
             vditor.options.preview.parse(this.element);
         }
@@ -229,6 +233,7 @@ export class Preview {
         SMILESRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         flowchartRender(vditor.preview.previewElement, vditor.options.cdn);
         graphvizRender(vditor.preview.previewElement, vditor.options.cdn);
+        wavedromRender(vditor.preview.previewElement, vditor.options.cdn);
         chartRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         mindmapRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         plantumlRender(vditor.preview.previewElement, vditor.options.cdn);

package/src/ts/util/Options.ts

@@ -290,7 +290,7 @@ export class Options {
                 hotkey: "⇧⌘H",
                 icon: '<svg><use xlink:href="#vditor-icon-line"></use></svg>',
                 name: "line",
-                prefix: "---",
+                prefix: "***",
                 tipPosition: "n",
             },
             {