vditor 3.11.1 → 3.11.3

package/src/assets/less/_reset.less

@@ -70,6 +70,35 @@
             vertical-align: sub;
         }
 
+        figure.vditor-image {
+            margin: 0 0 16px;
+            text-align: center;
+
+            figcaption {
+                font-size: 0.875em;
+                margin-top: 4px;
+                opacity: 0.65;
+                white-space: pre-wrap;
+            }
+        }
+
+        span.vditor-image[data-image-caption] {
+            display: inline-block;
+            max-width: 100%;
+            text-align: center;
+            vertical-align: top;
+
+            &::after {
+                content: attr(data-image-caption);
+                display: block;
+                font-size: 0.875em;
+                line-height: 1.5;
+                margin-top: 4px;
+                opacity: 0.65;
+                white-space: pre-wrap;
+            }
+        }
+
         h1,
         h2,
         h3,
@@ -235,7 +264,8 @@
         .language-markmap,
         .language-abc,
         .language-flowchart,
-        .language-graphviz {
+        .language-graphviz,
+        .language-wavedrom {
             margin-bottom: 16px;
         }
 
@@ -261,7 +291,8 @@
         .language-mermaid,
         .language-markmap,
         .language-flowchart,
-        .language-graphviz {
+        .language-graphviz,
+        .language-wavedrom {
             text-align: center;
         }
 
@@ -617,3 +648,73 @@
         }
     }
 }
+
+.vditor-reset .callout,
+.vditor-wysiwyg blockquote.callout,
+.vditor-ir blockquote.callout {
+    --callout-color: var(--callout-note-color, #0969da);
+    --callout-background-color: var(--callout-note-background-color, rgba(9, 105, 218, 0.08));
+    position: relative;
+    margin: 0 0 16px;
+    padding: 0.75em 1em;
+    color: inherit;
+    background-color: var(--callout-background-color);
+    border: 0;
+    border-left: 0.25em solid var(--callout-color);
+
+    &[data-subtype="TIP"] {
+        --callout-color: var(--callout-tip-color, #1a7f37);
+        --callout-background-color: var(--callout-tip-background-color, rgba(26, 127, 55, 0.08));
+    }
+
+    &[data-subtype="IMPORTANT"] {
+        --callout-color: var(--callout-important-color, #8250df);
+        --callout-background-color: var(--callout-important-background-color, rgba(130, 80, 223, 0.08));
+    }
+
+    &[data-subtype="WARNING"] {
+        --callout-color: var(--callout-warning-color, #9a6700);
+        --callout-background-color: var(--callout-warning-background-color, rgba(154, 103, 0, 0.08));
+    }
+
+    &[data-subtype="CAUTION"] {
+        --callout-color: var(--callout-caution-color, #cf222e);
+        --callout-background-color: var(--callout-caution-background-color, rgba(207, 34, 46, 0.08));
+    }
+
+    > .callout-info {
+        display: flex;
+        align-items: center;
+        min-height: 1.5em;
+        margin: 0 0 0.5em;
+        color: var(--callout-color);
+        font-weight: 600;
+
+        .callout-icon {
+            display: inline-flex;
+            align-items: center;
+            margin-right: 0.35em;
+        }
+
+        .callout-title {
+            min-width: 1px;
+        }
+
+        .callout-img,
+        > .callout-img {
+            width: 1.2em;
+            height: 1.2em;
+            margin-right: 0.35em;
+            object-fit: contain;
+        }
+    }
+
+    > .callout-content > :last-child,
+    > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+.vditor-wysiwyg__callout-marker {
+    display: none;
+}

package/src/assets/less/index.less

@@ -37,6 +37,16 @@
   --count-background-color: rgba(27, 31, 35, 0.05);
   --heading-border-color: #eaecef;
   --blockquote-color: #6a737d;
+  --callout-note-color: #0969da;
+  --callout-note-background-color: rgba(9, 105, 218, 0.08);
+  --callout-tip-color: #1a7f37;
+  --callout-tip-background-color: rgba(26, 127, 55, 0.08);
+  --callout-important-color: #8250df;
+  --callout-important-background-color: rgba(130, 80, 223, 0.08);
+  --callout-warning-color: #9a6700;
+  --callout-warning-background-color: rgba(154, 103, 0, 0.08);
+  --callout-caution-color: #cf222e;
+  --callout-caution-background-color: rgba(207, 34, 46, 0.08);
 
   --ir-heading-color: #660e7a;
   --ir-title-color: #808080;
@@ -67,6 +77,16 @@
     --count-background-color: rgba(@blurColor, 0.36);
     --heading-border-color: var(--textarea-text-color);
     --blockquote-color: var(--toolbar-icon-color);
+    --callout-note-color: #58a6ff;
+    --callout-note-background-color: rgba(56, 139, 253, 0.15);
+    --callout-tip-color: #3fb950;
+    --callout-tip-background-color: rgba(46, 160, 67, 0.15);
+    --callout-important-color: #a371f7;
+    --callout-important-background-color: rgba(163, 113, 247, 0.15);
+    --callout-warning-color: #d29922;
+    --callout-warning-background-color: rgba(187, 128, 9, 0.15);
+    --callout-caution-color: #f85149;
+    --callout-caution-background-color: rgba(248, 81, 73, 0.15);
 
     --ir-heading-color: #9876aa;
     --ir-title-color: #808080;

package/src/index.ts

@@ -75,7 +75,7 @@ class Vditor extends VditorMethod {
 
         // 支持自定义国际化
         if (!mergedOptions.i18n) {
-            if (!["de_DE", "en_US", "fr_FR", "pt_BR", "ja_JP", "ko_KR", "ru_RU", "sv_SE", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+            if (!["de_DE", "en_US", "es_ES", "fr_FR", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "sv_SE", "vi_VN", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
                 throw new Error(
                     "options.lang error, see https://ld246.com/article/1549638745630#options",
                 );
@@ -525,6 +525,7 @@ class Vditor extends VditorMethod {
         ).then(() => {
             this.vditor.lute = setLute({
                 autoSpace: this.vditor.options.preview.markdown.autoSpace,
+                callout: this.vditor.options.preview.markdown.callout,
                 gfmAutoLink: this.vditor.options.preview.markdown.gfmAutoLink,
                 codeBlockPreview: this.vditor.options.preview.markdown
                     .codeBlockPreview,
@@ -543,6 +544,8 @@ class Vditor extends VditorMethod {
                 paragraphBeginningSpace: this.vditor.options.preview.markdown
                     .paragraphBeginningSpace,
                 sanitize: this.vditor.options.preview.markdown.sanitize,
+                sub: this.vditor.options.preview.markdown.sub,
+                sup: this.vditor.options.preview.markdown.sup,
                 toc: this.vditor.options.preview.markdown.toc,
             });
 

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);
     });
 };
 
@@ -99,7 +104,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     previewElement.classList.add("vditor-reset");
 
     if (!mergedOptions.i18n) {
-        if (!["de_DE", "en_US", "fr_FR", "pt_BR", "ja_JP", "ko_KR", "ru_RU", "sv_SE", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
+        if (!["de_DE", "en_US", "es_ES", "fr_FR", "ja_JP", "ko_KR", "pt_BR", "ru_RU", "sv_SE", "vi_VN", "zh_CN", "zh_TW"].includes(mergedOptions.lang)) {
             throw new Error(
                 "options.lang error, see https://ld246.com/article/1549638745630#options",
             );
@@ -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;
 };