vditor 3.11.1 → 3.11.3

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",
             },
             {

package/src/ts/util/fixBrowserBehavior.ts

@@ -52,7 +52,7 @@ export const fixCJKPosition = (range: Range, vditor: IVditor, event: KeyboardEve
 
         // https://github.com/Vanessa219/vditor/issues/1289 WKWebView切换输入法产生六分之一空格，造成光标错位
         if (pLiElement.nodeValue) {
-            pLiElement.nodeValue = pLiElement.nodeValue.replace(/\u2006/g, '');
+            pLiElement.nodeValue = pLiElement.nodeValue.replace(/\u2006/g, "");
         }
 
         const zwspNode = document.createTextNode(Constants.ZWSP);
@@ -453,6 +453,41 @@ export const execAfterRender = (vditor: IVditor, options = {
     }
 };
 
+const isEmptyListItem = (liElement: HTMLElement) => {
+    if (liElement.textContent.split(Constants.ZWSP).join("").trim() !== "") {
+        return false;
+    }
+    return !liElement.querySelector([
+        "audio", "canvas", "embed", "hr", "iframe", "img", "object", "ol", "pre", "svg", "table", "ul", "video",
+        "input:not([type='checkbox'])",
+    ].join(", "));
+};
+
+export const exitEmptyListItem = (liElement: HTMLElement) => {
+    const listElement = liElement.parentElement;
+    const listParent = listElement.parentElement;
+    const paragraphElement = document.createElement("p");
+    paragraphElement.setAttribute("data-block", "0");
+    paragraphElement.innerHTML = "<wbr>";
+
+    let trailingListElement: HTMLElement | undefined;
+    if (liElement.nextElementSibling) {
+        trailingListElement = listElement.cloneNode(false) as HTMLElement;
+        while (liElement.nextElementSibling) {
+            trailingListElement.appendChild(liElement.nextElementSibling);
+        }
+        listParent.insertBefore(trailingListElement, listElement.nextSibling);
+    }
+
+    liElement.remove();
+    if (listElement.childElementCount === 0) {
+        listParent.replaceChild(paragraphElement, listElement);
+    } else {
+        listParent.insertBefore(paragraphElement, trailingListElement || listElement.nextSibling);
+    }
+    return paragraphElement;
+};
+
 export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | false, event: KeyboardEvent) => {
     const startContainer = range.startContainer;
     const liElement = hasClosestByMatchTag(startContainer, "LI");
@@ -471,6 +506,28 @@ export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | f
             return true;
         }
 
+        // 嵌套列表末尾的空列表项回车后转为父列表项中的段落
+        // https://github.com/Vanessa219/vditor/issues/939
+        if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Enter" && range.collapsed &&
+            !liElement.nextElementSibling && liElement.parentElement.parentElement.tagName === "LI" &&
+            isEmptyListItem(liElement)) {
+            const paragraphElement = exitEmptyListItem(liElement);
+            setRangeByWbr(paragraphElement, range);
+            execAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+
+        // 空列表项删除标记后退出当前列表
+        if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" &&
+            liElement.textContent.trim().replace(Constants.ZWSP, "") === "" && range.toString() === "") {
+            const paragraphElement = exitEmptyListItem(liElement);
+            setRangeByWbr(paragraphElement, range);
+            execAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+
         if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" &&
             !liElement.previousElementSibling && range.toString() === "" &&
             getSelectPosition(liElement, vditor[vditor.currentMode].element, range).start === 0) {
@@ -488,20 +545,6 @@ export const fixList = (range: Range, vditor: IVditor, pElement: HTMLElement | f
             return true;
         }
 
-        // 空列表删除后与上一级段落对齐
-        if (!isCtrl(event) && !event.shiftKey && !event.altKey && event.key === "Backspace" &&
-            liElement.textContent.trim().replace(Constants.ZWSP, "") === "" &&
-            range.toString() === "" && liElement.previousElementSibling?.tagName === "LI") {
-            liElement.previousElementSibling.insertAdjacentText("beforeend", "\n\n");
-            range.selectNodeContents(liElement.previousElementSibling);
-            range.collapse(false);
-            liElement.remove();
-            setRangeByWbr(vditor[vditor.currentMode].element, range);
-            execAfterRender(vditor);
-            event.preventDefault();
-            return true;
-        }
-
         if (!isCtrl(event) && !event.altKey && event.key === "Tab") {
             // 光标位于第一/零字符时，tab 用于列表的缩进
             let isFirst = false;
@@ -1021,6 +1064,27 @@ export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEven
     const startContainer = range.startContainer;
     const blockquoteElement = hasClosestByMatchTag(startContainer, "BLOCKQUOTE");
     if (blockquoteElement && range.toString() === "") {
+        if (pElement && event.key === "Enter" && !isCtrl(event) && !event.shiftKey && !event.altKey &&
+            pElement.parentElement.isSameNode(blockquoteElement) &&
+            hasClosestByMatchTag(blockquoteElement.parentElement, "LI") &&
+            (range.collapsed || !range.cloneContents().firstElementChild) &&
+            pElement.innerHTML.replace(Constants.ZWSP, "") !== "\n" &&
+            pElement.innerHTML.replace(Constants.ZWSP, "") !== "") {
+            // 列表内的引用由浏览器处理回车时会新建列表项 https://github.com/Vanessa219/vditor/issues/1925
+            const trailingRange = range.cloneRange();
+            trailingRange.setEnd(pElement, pElement.childNodes.length);
+            const paragraphElement = document.createElement("p");
+            paragraphElement.setAttribute("data-block", "0");
+            paragraphElement.appendChild(trailingRange.extractContents());
+            pElement.insertAdjacentElement("afterend", paragraphElement);
+            range.setStart(paragraphElement, 0);
+            range.collapse(true);
+            setSelectionFocus(range);
+            execAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+
         if (event.key === "Backspace" && !isCtrl(event) && !event.shiftKey && !event.altKey &&
             getSelectPosition(blockquoteElement, vditor[vditor.currentMode].element, range).start === 0) {
             // Backspace: 光标位于引用中的第零个字符，仅删除引用标签
@@ -1068,9 +1132,15 @@ export const fixBlockquote = (vditor: IVditor, range: Range, event: KeyboardEven
             return true;
         }
 
-        if (insertAfterBlock(vditor, event, range, blockquoteElement, blockquoteElement)) {
+        const itemElement = blockquoteElement.parentElement.tagName === "LI" ? blockquoteElement.parentElement : null;
+        const afterBlockElement = !blockquoteElement.nextElementSibling && itemElement?.nextElementSibling?.tagName === "LI" ?
+            itemElement : blockquoteElement;
+        if (insertAfterBlock(vditor, event, range, blockquoteElement, afterBlockElement)) {
             return true;
         }
+        if (event.key === "ArrowUp" && itemElement && !blockquoteElement.previousElementSibling) {
+            return false;
+        }
         if (insertBeforeBlock(vditor, event, range, blockquoteElement, blockquoteElement)) {
             return true;
         }
@@ -1255,7 +1325,7 @@ export const fixFirefoxArrowUpTable = (event: KeyboardEvent, blockElement: false
     return false;
 };
 
-export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent) & { target: HTMLElement }, callback: {
+export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent) & {target: HTMLElement}, callback: {
     pasteCode(code: string): void,
 }) => {
     if (vditor[vditor.currentMode].element.getAttribute("contenteditable") !== "true") {
@@ -1290,6 +1360,12 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
             return ["", Lute.WalkContinue];
         }
 
+        const parent = node.__internal_object__.Parent;
+        // 链接引用的目标地址由定义节点提供，不在引用位置重复渲染
+        if (parent.Type === 33 && parent.LinkType === 3) {
+            return ["", Lute.WalkContinue];
+        }
+
         if (vditor.options.upload.renderLinkDest) {
             return vditor.options.upload.renderLinkDest(vditor, node, entering);
         }
@@ -1404,6 +1480,11 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
         if (textHTML.trim() !== "") {
             const tempElement = document.createElement("div");
             tempElement.innerHTML = textHTML;
+            if (!vditor.options.upload.base64ToLink) {
+                // word 复制的图文混合，替换为 link: <v:imagedata src="file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.png" o:title="">
+                await processVMLImage(vditor, tempElement, ("clipboardData" in event ? event.clipboardData : event.dataTransfer).getData("text/rtf"));
+            }
+
             tempElement.querySelectorAll("[style]").forEach((e) => {
                 e.removeAttribute("style");
             });
@@ -1440,14 +1521,14 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
                 if (file && file.type.startsWith("image")) {
                     fileReader.readAsDataURL(file);
                     fileReader.onload = () => {
-                        let imgHTML = ''
+                        let imgHTML = "";
                         if (vditor.currentMode === "wysiwyg") {
                             imgHTML += `<img alt="${file.name}" src="${fileReader.result.toString()}">\n`;
                         } else {
                             imgHTML += `![${file.name}](${fileReader.result.toString()})\n`;
                         }
                         document.execCommand("insertHTML", false, imgHTML);
-                    }
+                    };
                 }
             }
         } else if (textPlain.trim() !== "" && files.length === 0) {
@@ -1458,11 +1539,11 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
             if (vditor.currentMode === "ir") {
                 renderers.Md2VditorIRDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});
-                insertHTML(vditor.lute.Md2VditorIRDOM(textPlain), vditor);
+                insertHTML(Lute.Sanitize(vditor.lute.Md2VditorIRDOM(textPlain)), vditor);
             } else if (vditor.currentMode === "wysiwyg") {
                 renderers.Md2VditorDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});
-                insertHTML(vditor.lute.Md2VditorDOM(textPlain), vditor);
+                insertHTML(Lute.Sanitize(vditor.lute.Md2VditorDOM(textPlain)), vditor);
             } else {
                 renderers.Md2VditorSVDOM = {renderLinkDest};
                 vditor.lute.SetJSRenderers({renderers});
@@ -1499,3 +1580,66 @@ export const paste = async (vditor: IVditor, event: (ClipboardEvent | DragEvent)
         scrollCenter(vditor);
     }
 };
+
+const processVMLImage = async (vditor: IVditor, root: Element, rtfData: string) => {
+    if (!rtfData) {
+        return;
+
+    }
+
+    const regexPictureHeader = /{\\pict[\s\S]+?\\bliptag-?\d+(\\blipupi-?\d+)?({\\\*\\blipuid\s?[\da-fA-F]+)?[\s}]*?/;
+    const regexPicture = new RegExp("(?:(" + regexPictureHeader.source + "))([\\da-fA-F\\s]+)\\}", "g");
+    const regImages = rtfData.match(regexPicture);
+    const images = [];
+    if (regImages) {
+        for (const image of regImages) {
+            let imageType;
+
+            if (image.includes("\\pngblip")) {
+                imageType = "image/png";
+            } else if (image.includes("\\jpegblip")) {
+                imageType = "image/jpeg";
+            }
+
+            if (imageType) {
+                images.push({
+                    hex: image.replace(regexPictureHeader, "").replace(/[^\da-fA-F]/g, ""),
+                    type: imageType,
+                });
+            }
+        }
+    }
+
+    const shapes: Array<{shape: Element, img: Element}> = [];
+    walk(root, (child: Element) => {
+        if (child.tagName === "V:SHAPE") {
+            walk(child, (sub) => {
+                if (sub.tagName === "V:IMAGEDATA") shapes.push({shape: child, img: sub});
+            });
+            return false;
+        }
+    });
+    for (let i = 0; i < shapes.length; i++) {
+        const img = document.createElement("img");
+        const newSrc = "data:" + images[i].type + ";base64," + btoa((images[i].hex.match(/\w{2}/g) || []).map(char => {
+            return String.fromCharCode(parseInt(char, 16));
+        }).join(""));
+        img.src = newSrc;
+        img.title = shapes[i].img.getAttribute("title");
+        shapes[i].shape.parentNode.replaceChild(img, shapes[i].shape);
+    }
+
+    const imgs = root.querySelectorAll("img");
+    for (let i = 0; i < imgs.length; i++) {
+        const src = imgs[i].src || "";
+        if (src) imgs[i].src = await vditor.options.upload.base64ToLink(src);
+    }
+};
+
+const walk = (el: Element, fn: (el: Element) => boolean | void) => {
+    const goNext = fn(el);
+    if (goNext !== false)
+        for (let i = 0; i < el.children.length; i++) {
+            walk(el.children[i], fn);
+        }
+};

package/src/ts/util/processCode.ts

@@ -10,6 +10,7 @@ import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
 import {SMILESRender} from "../markdown/SMILESRender";
+import {wavedromRender} from "../markdown/wavedromRender";
 
 export const processPasteCode = (html: string, text: string, type = "sv") => {
     const tempElement = document.createElement("div");
@@ -82,6 +83,8 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         plantumlRender(previewPanel, vditor.options.cdn);
     } else if (language === "graphviz") {
         graphvizRender(previewPanel, vditor.options.cdn);
+    } else if (language === "wavedrom") {
+        wavedromRender(previewPanel, vditor.options.cdn);
     } else if (language === "math") {
         mathRender(previewPanel, {cdn: vditor.options.cdn, math: vditor.options.preview.math});
     } else {

package/src/ts/util/selection.ts

@@ -1,6 +1,6 @@
 import {Constants} from "../constants";
 import {isChrome} from "./compatibility";
-import {hasClosestBlock, hasClosestByClassName} from "./hasClosest";
+import {hasClosestBlock, hasClosestByClassName, hasClosestByMatchTag} from "./hasClosest";
 
 export const getEditorRange = (vditor: IVditor) => {
     let range: Range;
@@ -262,7 +262,12 @@ export const insertHTML = (html: string, vditor: IVditor) => {
         if (!blockElement) {
             vditor[vditor.currentMode].element.insertAdjacentHTML("beforeend", pasteElement.innerHTML);
         } else {
-            blockElement.insertAdjacentHTML("afterend", pasteElement.innerHTML);
+            const liElement = hasClosestByMatchTag(range.startContainer, "LI");
+            if (liElement && pasteElement.firstElementChild.tagName === "UL") {
+                liElement.insertAdjacentHTML("afterend", pasteElement.firstElementChild.innerHTML);
+            } else {
+                blockElement.insertAdjacentHTML("afterend", pasteElement.innerHTML);
+            }
         }
         setRangeByWbr(vditor[vditor.currentMode].element, range);
     } else {

package/src/ts/wysiwyg/afterRenderEvent.ts

@@ -1,4 +1,5 @@
 import {getMarkdown} from "../markdown/getMarkdown";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 import {accessLocalStorage} from "../util/compatibility";
 
 export const afterRenderEvent = (vditor: IVditor, options = {
@@ -6,6 +7,7 @@ export const afterRenderEvent = (vditor: IVditor, options = {
     enableHint: false,
     enableInput: true,
 }) => {
+    renderImageCaptions(vditor.wysiwyg.element, "wysiwyg", vditor.options.preview.markdown.imageCaption);
     if (options.enableHint) {
         vditor.hint.render(vditor);
     }

package/src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -33,6 +33,7 @@ import {afterRenderEvent} from "./afterRenderEvent";
 import {removeBlockElement} from "./processKeydown";
 import {renderToc} from "../util/toc";
 import {getMarkdown} from "../markdown/getMarkdown";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 
 export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
     clearTimeout(vditor.wysiwyg.hlToolbarTimeoutId);
@@ -65,6 +66,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
         if (footnotesElement) {
             vditor.wysiwyg.popover.innerHTML = "";
             genClose(footnotesElement, vditor);
+            customWysiwygToolbar(vditor, "footnotes-block")
             setPopoverPosition(vditor, footnotesElement);
             return;
         }
@@ -195,6 +197,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
         if (tocElement) {
             vditor.wysiwyg.popover.innerHTML = "";
             genClose(tocElement, vditor);
+            customWysiwygToolbar(vditor, "vditor-toc")
             setPopoverPosition(vditor, tocElement);
             return;
         }
@@ -206,6 +209,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             genUp(range, blockquoteElement, vditor);
             genDown(range, blockquoteElement, vditor);
             genClose(blockquoteElement, vditor);
+            customWysiwygToolbar(vditor, "blockquote")
             setPopoverPosition(vditor, blockquoteElement);
         }
 
@@ -216,7 +220,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             genUp(range, liElement, vditor);
             genDown(range, liElement, vditor);
             genClose(liElement, vditor);
-
+            customWysiwygToolbar(vditor, "li")
             setPopoverPosition(vditor, liElement);
         }
 
@@ -549,6 +553,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
             vditor.wysiwyg.popover.insertAdjacentHTML("beforeend", " x ");
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input2Wrap);
+            customWysiwygToolbar(vditor, "table")
             setPopoverPosition(vditor, tableElement);
         }
 
@@ -596,6 +601,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
 
             genClose(footnotesRefElement, vditor);
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
+            customWysiwygToolbar(vditor, "footnotes-ref")
             setPopoverPosition(vditor, footnotesRefElement);
         }
 
@@ -684,7 +690,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     }
                     const matchLangData: IHintData[] = [];
                     const key = language.value.substring(0, language.selectionStart);
-                    (vditor.options.preview.hljs.langs ||  Constants.ALIAS_CODE_LANGUAGES.concat((window.hljs?.listLanguages() ?? []).sort())).forEach((keyName) => {
+                    (vditor.options.preview.hljs.langs || Constants.ALIAS_CODE_LANGUAGES.concat((window.hljs?.listLanguages() ?? []).sort())).forEach((keyName) => {
                         if (keyName.indexOf(key.toLowerCase()) > -1) {
                             matchLangData.push({
                                 html: keyName,
@@ -696,6 +702,9 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                     event.preventDefault();
                 };
                 vditor.wysiwyg.popover.insertAdjacentElement("beforeend", languageWrap);
+                customWysiwygToolbar(vditor, "code-block")
+            } else {
+                customWysiwygToolbar(vditor, "block")
             }
             setPopoverPosition(vditor, blockRenderElement);
         } else {
@@ -735,6 +744,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
             genDown(range, headingElement, vditor);
             genClose(headingElement, vditor);
             vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
+            customWysiwygToolbar(vditor, "heading")
             setPopoverPosition(vditor, headingElement);
         }
 
@@ -763,7 +773,7 @@ export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
                 genUp(range, blockElement, vditor);
                 genDown(range, blockElement, vditor);
                 genClose(blockElement, vditor);
-
+                customWysiwygToolbar(vditor, "block")
                 setPopoverPosition(vditor, blockElement);
             } else {
                 vditor.wysiwyg.popover.style.display = "none";
@@ -864,6 +874,7 @@ export const genLinkRefPopover = (vditor: IVditor, linkRefElement: HTMLElement,
     genClose(linkRefElement, vditor);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input1Wrap);
+    customWysiwygToolbar(vditor, "link-ref")
     setPopoverPosition(vditor, linkRefElement);
 };
 
@@ -1058,6 +1069,7 @@ export const genAPopover = (vditor: IVditor, aElement: HTMLElement, range: Range
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input1Wrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", input2Wrap);
+    customWysiwygToolbar(vditor, "a")
     setPopoverPosition(vditor, aElement);
 };
 
@@ -1068,6 +1080,7 @@ export const genImagePopover = (event: Event, vditor: IVditor) => {
         imgElement.setAttribute("src", inputElement.value);
         imgElement.setAttribute("alt", alt.value);
         imgElement.setAttribute("title", title.value);
+        renderImageCaptions(vditor.wysiwyg.element, "wysiwyg", vditor.options.preview.markdown.imageCaption);
         if (typeof vditor.options.input === "function") {
             vditor.options.input(getMarkdown(vditor));
         }
@@ -1122,7 +1135,7 @@ export const genImagePopover = (event: Event, vditor: IVditor) => {
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", inputWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", altWrap);
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", titleWrap);
-
+    customWysiwygToolbar(vditor, "image")
     setPopoverPosition(vditor, imgElement);
 };
 
@@ -1137,3 +1150,9 @@ const focusToElement = (event: KeyboardEvent, range: Range) => {
         return true;
     }
 };
+
+const customWysiwygToolbar = (vditor: IVditor, type: TWYSISYGToolbar) => {
+    if (vditor.options.customWysiwygToolbar) {
+        vditor.options.customWysiwygToolbar(type, vditor.wysiwyg.popover);
+    }
+};

package/src/ts/wysiwyg/input.ts

@@ -71,6 +71,7 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
 
         const isWYSIWYGElement = blockElement.isEqualNode(vditor.wysiwyg.element);
         const footnoteElement = hasClosestByAttribute(blockElement, "data-type", "footnotes-block");
+        const calloutElement = hasClosestByAttribute(range.startContainer, "data-type", "callout");
 
         if (!isWYSIWYGElement) {
             // 列表需要到最顶层
@@ -90,6 +91,10 @@ export const input = (vditor: IVditor, range: Range, event?: InputEvent) => {
                 blockElement = footnoteElement;
             }
 
+            if (calloutElement) {
+                blockElement = calloutElement;
+            }
+
             html = blockElement.outerHTML;
 
             if (blockElement.tagName === "UL" || blockElement.tagName === "OL") {