@8btc/mditor 0.0.3 → 0.0.4

package/src/ts/wysiwyg/index.ts

@@ -3,7 +3,9 @@ import { hidePanel } from "../toolbar/setToolbar";
 import { isCtrl, isFirefox } from "../util/compatibility";
 import {
     blurEvent,
-    copyEvent, cutEvent, dblclickEvent,
+    copyEvent,
+    cutEvent,
+    dblclickEvent,
     dropEvent,
     focusEvent,
     hotkeyEvent,
@@ -12,19 +14,26 @@ import {
 } from "../util/editorCommonEvent";
 import { isHeadingMD, isHrMD, paste } from "../util/fixBrowserBehavior";
 import {
-    hasClosestBlock, hasClosestByAttribute,
-    hasClosestByClassName, hasClosestByMatchTag,
+    hasClosestBlock,
+    hasClosestByAttribute,
+    hasClosestByClassName,
+    hasClosestByMatchTag,
 } from "../util/hasClosest";
 import { hasClosestByHeadings } from "../util/hasClosestByHeadings";
 import {
     getCursorPosition,
     getEditorRange,
     getSelectPosition,
-    setRangeByWbr, setSelectionFocus,
-} from "../util/selection"
+    setRangeByWbr,
+    setSelectionFocus,
+} from "../util/selection";
 import { clickToc, renderToc } from "../util/toc";
 import { afterRenderEvent } from "./afterRenderEvent";
-import { genImagePopover, genLinkRefPopover, highlightToolbarWYSIWYG } from "./highlightToolbarWYSIWYG";
+import {
+    genImagePopover,
+    genLinkRefPopover,
+    highlightToolbarWYSIWYG,
+} from "./highlightToolbarWYSIWYG";
 import { getRenderElementNextNode, modifyPre } from "./inlineTag";
 import { input } from "./input";
 import { showCode } from "./showCode";
@@ -60,7 +69,8 @@ class WYSIWYG {
 </div>`;
 
         this.element = divElement.firstElementChild as HTMLPreElement;
-        this.popover = divElement.firstElementChild.nextElementSibling as HTMLDivElement;
+        this.popover = divElement.firstElementChild
+            .nextElementSibling as HTMLDivElement;
         this.selectPopover = divElement.lastElementChild as HTMLDivElement;
 
         this.bindEvent(vditor);
@@ -84,64 +94,104 @@ class WYSIWYG {
                 let blockEndElement: HTMLElement;
                 let removeStart = false;
                 let removeEnd = false;
-                contents.childNodes.forEach((item: HTMLElement, index: number) => {
-                    let wrap = false;
-                    if (item.nodeType === 3) {
-                        wrap = true;
-                    } else if (!item.classList.contains("vditor-comment")) {
-                        wrap = true;
-                    } else if (item.classList.contains("vditor-comment")) {
-                        item.setAttribute("data-cmtids", item.getAttribute("data-cmtids") + " " + id);
-                    }
-                    if (wrap) {
-                        if (item.nodeType !== 3 && item.getAttribute("data-block") === "0"
-                            && index === 0 && rangeClone.startOffset > 0) {
-                            item.innerHTML =
-                                `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
-                            blockStartElement = item;
-                        } else if (item.nodeType !== 3 && item.getAttribute("data-block") === "0"
-                            && index === contents.childNodes.length - 1
-                            && rangeClone.endOffset < rangeClone.endContainer.textContent.length) {
-                            item.innerHTML =
-                                `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
-                            blockEndElement = item;
-                        } else if (item.nodeType !== 3 && item.getAttribute("data-block") === "0") {
-                            if (index === 0) {
-                                removeStart = true;
-                            } else if (index === contents.childNodes.length - 1) {
-                                removeEnd = true;
+                contents.childNodes.forEach(
+                    (item: HTMLElement, index: number) => {
+                        let wrap = false;
+                        if (item.nodeType === 3) {
+                            wrap = true;
+                        } else if (!item.classList.contains("vditor-comment")) {
+                            wrap = true;
+                        } else if (item.classList.contains("vditor-comment")) {
+                            item.setAttribute(
+                                "data-cmtids",
+                                item.getAttribute("data-cmtids") + " " + id
+                            );
+                        }
+                        if (wrap) {
+                            if (
+                                item.nodeType !== 3 &&
+                                item.getAttribute("data-block") === "0" &&
+                                index === 0 &&
+                                rangeClone.startOffset > 0
+                            ) {
+                                item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
+                                blockStartElement = item;
+                            } else if (
+                                item.nodeType !== 3 &&
+                                item.getAttribute("data-block") === "0" &&
+                                index === contents.childNodes.length - 1 &&
+                                rangeClone.endOffset <
+                                    rangeClone.endContainer.textContent.length
+                            ) {
+                                item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
+                                blockEndElement = item;
+                            } else if (
+                                item.nodeType !== 3 &&
+                                item.getAttribute("data-block") === "0"
+                            ) {
+                                if (index === 0) {
+                                    removeStart = true;
+                                } else if (
+                                    index ===
+                                    contents.childNodes.length - 1
+                                ) {
+                                    removeEnd = true;
+                                }
+                                item.innerHTML = `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
+                            } else {
+                                const commentElement =
+                                    document.createElement("span");
+                                commentElement.classList.add("vditor-comment");
+                                commentElement.setAttribute("data-cmtids", id);
+                                item.parentNode.insertBefore(
+                                    commentElement,
+                                    item
+                                );
+                                commentElement.appendChild(item);
                             }
-                            item.innerHTML =
-                                `<span class="vditor-comment" data-cmtids="${id}">${item.innerHTML}</span>`;
-                        } else {
-                            const commentElement = document.createElement("span");
-                            commentElement.classList.add("vditor-comment");
-                            commentElement.setAttribute("data-cmtids", id);
-                            item.parentNode.insertBefore(commentElement, item);
-                            commentElement.appendChild(item);
                         }
                     }
-                });
+                );
                 const startElement = hasClosestBlock(rangeClone.startContainer);
                 if (startElement) {
                     if (blockStartElement) {
-                        startElement.insertAdjacentHTML("beforeend", blockStartElement.innerHTML);
+                        startElement.insertAdjacentHTML(
+                            "beforeend",
+                            blockStartElement.innerHTML
+                        );
                         blockStartElement.remove();
-                    } else if (startElement.textContent.trim().replace(Constants.ZWSP, "") === "" && removeStart) {
+                    } else if (
+                        startElement.textContent
+                            .trim()
+                            .replace(Constants.ZWSP, "") === "" &&
+                        removeStart
+                    ) {
                         startElement.remove();
                     }
                 }
                 const endElement = hasClosestBlock(rangeClone.endContainer);
                 if (endElement) {
                     if (blockEndElement) {
-                        endElement.insertAdjacentHTML("afterbegin", blockEndElement.innerHTML);
+                        endElement.insertAdjacentHTML(
+                            "afterbegin",
+                            blockEndElement.innerHTML
+                        );
                         blockEndElement.remove();
-                    } else if (endElement.textContent.trim().replace(Constants.ZWSP, "") === "" && removeEnd) {
+                    } else if (
+                        endElement.textContent
+                            .trim()
+                            .replace(Constants.ZWSP, "") === "" &&
+                        removeEnd
+                    ) {
                         endElement.remove();
                     }
                 }
                 range.insertNode(contents);
-                vditor.options.comment.add(id, range.toString(), this.getComments(vditor, true));
+                vditor.options.comment.add(
+                    id,
+                    range.toString(),
+                    this.getComments(vditor, true)
+                );
                 afterRenderEvent(vditor, {
                     enableAddUndoStack: true,
                     enableHint: false,
@@ -156,8 +206,9 @@ class WYSIWYG {
         if (vditor.currentMode === "wysiwyg" && vditor.options.comment.enable) {
             this.commentIds = [];
             this.element.querySelectorAll(".vditor-comment").forEach((item) => {
-                this.commentIds =
-                    this.commentIds.concat(item.getAttribute("data-cmtids").split(" "));
+                this.commentIds = this.commentIds.concat(
+                    item.getAttribute("data-cmtids").split(" ")
+                );
             });
             this.commentIds = Array.from(new Set(this.commentIds));
 
@@ -166,8 +217,11 @@ class WYSIWYG {
                 this.commentIds.forEach((id) => {
                     comments.push({
                         id,
-                        top:
-                            (this.element.querySelector(`.vditor-comment[data-cmtids="${id}"]`) as HTMLElement).offsetTop,
+                        top: (
+                            this.element.querySelector(
+                                `.vditor-comment[data-cmtids="${id}"]`
+                            ) as HTMLElement
+                        ).offsetTop,
                     });
                 });
                 return comments;
@@ -182,7 +236,11 @@ class WYSIWYG {
             const s = new Set(b);
             return a.filter((x) => !s.has(x));
         };
-        if (vditor.currentMode === "wysiwyg" && vditor.options.comment.enable && vditor.wysiwyg.commentIds.length > 0) {
+        if (
+            vditor.currentMode === "wysiwyg" &&
+            vditor.options.comment.enable &&
+            vditor.wysiwyg.commentIds.length > 0
+        ) {
             const oldIds = JSON.parse(JSON.stringify(this.commentIds));
             this.getComments(vditor);
             const removedIds = difference(oldIds, this.commentIds);
@@ -194,7 +252,10 @@ class WYSIWYG {
 
     public showComment() {
         const position = getCursorPosition(this.element);
-        this.selectPopover.setAttribute("style", `left:${position.left}px;display:block;top:${Math.max(-8, position.top - 21)}px`);
+        this.selectPopover.setAttribute(
+            "style",
+            `left:${position.left}px;display:block;top:${Math.max(-8, position.top - 21)}px`
+        );
     }
 
     public hideComment() {
@@ -221,7 +282,11 @@ class WYSIWYG {
 
         const codeElement = hasClosestByMatchTag(range.startContainer, "CODE");
         const codeEndElement = hasClosestByMatchTag(range.endContainer, "CODE");
-        if (codeElement && codeEndElement && codeEndElement.isSameNode(codeElement)) {
+        if (
+            codeElement &&
+            codeEndElement &&
+            codeEndElement.isSameNode(codeElement)
+        ) {
             let codeText = "";
             if (codeElement.parentElement.tagName === "PRE") {
                 codeText = range.toString();
@@ -240,20 +305,33 @@ class WYSIWYG {
             if (aTitle) {
                 aTitle = ` "${aTitle}"`;
             }
-            event.clipboardData.setData("text/plain",
-                `[${range.toString()}](${aElement.getAttribute("href")}${aTitle})`);
+            event.clipboardData.setData(
+                "text/plain",
+                `[${range.toString()}](${aElement.getAttribute("href")}${aTitle})`
+            );
             event.clipboardData.setData("text/html", "");
             return;
         }
 
         // 数学公式选区：仅复制可见文本
-        const startPreview = hasClosestByClassName(range.startContainer, "vditor-wysiwyg__preview") as HTMLElement;
-        const endPreview = hasClosestByClassName(range.endContainer, "vditor-wysiwyg__preview") as HTMLElement;
+        const startPreview = hasClosestByClassName(
+            range.startContainer,
+            "vditor-wysiwyg__preview"
+        ) as HTMLElement;
+        const endPreview = hasClosestByClassName(
+            range.endContainer,
+            "vditor-wysiwyg__preview"
+        ) as HTMLElement;
         const isMathPreview = (el: HTMLElement) => {
             const first = el.firstElementChild as HTMLElement | null;
             return !!first && first.classList.contains("language-math");
         };
-        if (startPreview && endPreview && startPreview.isSameNode(endPreview) && isMathPreview(startPreview)) {
+        if (
+            startPreview &&
+            endPreview &&
+            startPreview.isSameNode(endPreview) &&
+            isMathPreview(startPreview)
+        ) {
             event.clipboardData.setData("text/plain", range.toString());
             event.clipboardData.setData("text/html", "");
             return;
@@ -262,77 +340,122 @@ class WYSIWYG {
         // 默认：转换为 Markdown 文本
         const tempElement = document.createElement("div");
         tempElement.appendChild(range.cloneContents());
-        event.clipboardData.setData("text/plain", vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim());
+        event.clipboardData.setData(
+            "text/plain",
+            vditor.lute.VditorDOM2Md(tempElement.innerHTML).trim()
+        );
         event.clipboardData.setData("text/html", "");
     }
 
     private bindEvent(vditor: IVditor) {
         this.unbindListener();
-        window.addEventListener("scroll", this.scrollListener = () => {
-            hidePanel(vditor, ["hint"]);
-            if (this.popover.style.display !== "block" || this.selectPopover.style.display !== "block") {
-                return;
-            }
-            const top = parseInt(this.popover.getAttribute("data-top"), 10);
-            if (vditor.options.height !== "auto") {
-                if (vditor.options.toolbarConfig.pin && vditor.toolbar.element.getBoundingClientRect().top === 0) {
-                    const popoverTop = Math.max(window.scrollY - vditor.element.offsetTop - 8,
-                        Math.min(top - vditor.wysiwyg.element.scrollTop, this.element.clientHeight - 21)) + "px";
-                    if (this.popover.style.display === "block") {
-                        this.popover.style.top = popoverTop;
-                    }
-                    if (this.selectPopover.style.display === "block") {
-                        this.selectPopover.style.top = popoverTop;
+        window.addEventListener(
+            "scroll",
+            (this.scrollListener = () => {
+                hidePanel(vditor, ["hint"]);
+                if (
+                    this.popover.style.display !== "block" ||
+                    this.selectPopover.style.display !== "block"
+                ) {
+                    return;
+                }
+                const top = parseInt(this.popover.getAttribute("data-top"), 10);
+                if (vditor.options.height !== "auto") {
+                    if (
+                        vditor.options.toolbarConfig.pin &&
+                        vditor.toolbar.element.getBoundingClientRect().top === 0
+                    ) {
+                        const popoverTop =
+                            Math.max(
+                                window.scrollY - vditor.element.offsetTop - 8,
+                                Math.min(
+                                    top - vditor.wysiwyg.element.scrollTop,
+                                    this.element.clientHeight - 21
+                                )
+                            ) + "px";
+                        if (this.popover.style.display === "block") {
+                            this.popover.style.top = popoverTop;
+                        }
+                        if (this.selectPopover.style.display === "block") {
+                            this.selectPopover.style.top = popoverTop;
+                        }
                     }
+                    return;
+                } else if (!vditor.options.toolbarConfig.pin) {
+                    return;
                 }
-                return;
-            } else if (!vditor.options.toolbarConfig.pin) {
-                return;
-            }
-            const popoverTop1 = Math.max(top, (window.scrollY - vditor.element.offsetTop - 8)) + "px";
-            if (this.popover.style.display === "block") {
-                this.popover.style.top = popoverTop1;
-            }
-            if (this.selectPopover.style.display === "block") {
-                this.selectPopover.style.top = popoverTop1;
-            }
-        });
+                const popoverTop1 =
+                    Math.max(
+                        top,
+                        window.scrollY - vditor.element.offsetTop - 8
+                    ) + "px";
+                if (this.popover.style.display === "block") {
+                    this.popover.style.top = popoverTop1;
+                }
+                if (this.selectPopover.style.display === "block") {
+                    this.selectPopover.style.top = popoverTop1;
+                }
+            })
+        );
 
         this.element.addEventListener("scroll", () => {
             hidePanel(vditor, ["hint"]);
-            if (vditor.options.comment && vditor.options.comment.enable && vditor.options.comment.scroll) {
+            if (
+                vditor.options.comment &&
+                vditor.options.comment.enable &&
+                vditor.options.comment.scroll
+            ) {
                 vditor.options.comment.scroll(vditor.wysiwyg.element.scrollTop);
             }
             if (this.popover.style.display !== "block") {
                 return;
             }
-            const top = parseInt(this.popover.getAttribute("data-top"), 10) - vditor.wysiwyg.element.scrollTop;
+            const top =
+                parseInt(this.popover.getAttribute("data-top"), 10) -
+                vditor.wysiwyg.element.scrollTop;
             let max = -8;
-            if (vditor.options.toolbarConfig.pin && vditor.toolbar.element.getBoundingClientRect().top === 0) {
+            if (
+                vditor.options.toolbarConfig.pin &&
+                vditor.toolbar.element.getBoundingClientRect().top === 0
+            ) {
                 max = window.scrollY - vditor.element.offsetTop + max;
             }
-            const topPx = Math.max(max, Math.min(top, this.element.clientHeight - 21)) + "px";
+            const topPx =
+                Math.max(max, Math.min(top, this.element.clientHeight - 21)) +
+                "px";
             this.popover.style.top = topPx;
             this.selectPopover.style.top = topPx;
         });
 
-        this.element.addEventListener("paste", (event: ClipboardEvent & { target: HTMLElement }) => {
-            paste(vditor, event, {
-                pasteCode: (code: string) => {
-                    const range = getEditorRange(vditor);
-                    const node = document.createElement("template");
-                    node.innerHTML = code;
-                    range.insertNode(node.content.cloneNode(true));
-                    const blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
-                    if (blockElement) {
-                        blockElement.outerHTML = vditor.lute.SpinVditorDOM(blockElement.outerHTML);
-                    } else {
-                        vditor.wysiwyg.element.innerHTML = vditor.lute.SpinVditorDOM(vditor.wysiwyg.element.innerHTML);
-                    }
-                    setRangeByWbr(vditor.wysiwyg.element, range);
-                },
-            });
-        });
+        this.element.addEventListener(
+            "paste",
+            (event: ClipboardEvent & { target: HTMLElement }) => {
+                paste(vditor, event, {
+                    pasteCode: (code: string) => {
+                        const range = getEditorRange(vditor);
+                        const node = document.createElement("template");
+                        node.innerHTML = code;
+                        range.insertNode(node.content.cloneNode(true));
+                        const blockElement = hasClosestByAttribute(
+                            range.startContainer,
+                            "data-block",
+                            "0"
+                        );
+                        if (blockElement) {
+                            blockElement.outerHTML = vditor.lute.SpinVditorDOM(
+                                blockElement.outerHTML
+                            );
+                        } else {
+                            vditor.wysiwyg.element.innerHTML =
+                                vditor.lute.SpinVditorDOM(
+                                    vditor.wysiwyg.element.innerHTML
+                                );
+                        }
+                        setRangeByWbr(vditor.wysiwyg.element, range);
+                    },
+                });
+            }
+        );
 
         // 中文处理
         this.element.addEventListener("compositionstart", () => {
@@ -340,7 +463,9 @@ class WYSIWYG {
         });
 
         this.element.addEventListener("compositionend", (event: InputEvent) => {
-            const headingElement = hasClosestByHeadings(getSelection().getRangeAt(0).startContainer);
+            const headingElement = hasClosestByHeadings(
+                getSelection().getRangeAt(0).startContainer
+            );
             if (headingElement && headingElement.textContent === "") {
                 // heading 为空删除 https://github.com/Vanessa219/vditor/issues/150
                 renderToc(vditor);
@@ -353,7 +478,10 @@ class WYSIWYG {
         });
 
         this.element.addEventListener("input", (event: InputEvent) => {
-            if (event.inputType === "deleteByDrag" || event.inputType === "insertFromDrop") {
+            if (
+                event.inputType === "deleteByDrag" ||
+                event.inputType === "insertFromDrop"
+            ) {
                 // https://github.com/Vanessa219/vditor/issues/801 编辑器内容拖拽问题
                 return;
             }
@@ -362,7 +490,12 @@ class WYSIWYG {
                 afterRenderEvent(vditor);
                 return;
             }
-            if (this.composingLock || event.data === "‘" || event.data === "“" || event.data === "《") {
+            if (
+                this.composingLock ||
+                event.data === "‘" ||
+                event.data === "“" ||
+                event.data === "《"
+            ) {
                 afterRenderEvent(vditor);
                 return;
             }
@@ -378,14 +511,27 @@ class WYSIWYG {
             }
 
             // 前后空格处理
-            const startOffset = getSelectPosition(blockElement, vditor.wysiwyg.element, range).start;
+            const startOffset = getSelectPosition(
+                blockElement,
+                vditor.wysiwyg.element,
+                range
+            ).start;
 
             // 开始可以输入空格
             let startSpace = true;
-            for (let i = startOffset - 1; i > blockElement.textContent.substr(0, startOffset).lastIndexOf("\n"); i--) {
-                if (blockElement.textContent.charAt(i) !== " " &&
+            for (
+                let i = startOffset - 1;
+                i >
+                blockElement.textContent
+                    .substr(0, startOffset)
+                    .lastIndexOf("\n");
+                i--
+            ) {
+                if (
+                    blockElement.textContent.charAt(i) !== " " &&
                     // 多个 tab 前删除不形成代码块 https://github.com/Vanessa219/vditor/issues/162 1
-                    blockElement.textContent.charAt(i) !== "\t") {
+                    blockElement.textContent.charAt(i) !== "\t"
+                ) {
                     startSpace = false;
                     break;
                 }
@@ -396,8 +542,15 @@ class WYSIWYG {
 
             // 结尾可以输入空格
             let endSpace = true;
-            for (let i = startOffset - 1; i < blockElement.textContent.length; i++) {
-                if (blockElement.textContent.charAt(i) !== " " && blockElement.textContent.charAt(i) !== "\n") {
+            for (
+                let i = startOffset - 1;
+                i < blockElement.textContent.length;
+                i++
+            ) {
+                if (
+                    blockElement.textContent.charAt(i) !== " " &&
+                    blockElement.textContent.charAt(i) !== "\n"
+                ) {
                     endSpace = false;
                     break;
                 }
@@ -408,196 +561,275 @@ class WYSIWYG {
                 endSpace = false;
             }
 
-            const headingElement = hasClosestByHeadings(getSelection().getRangeAt(0).startContainer);
+            const headingElement = hasClosestByHeadings(
+                getSelection().getRangeAt(0).startContainer
+            );
             if (headingElement && headingElement.textContent === "") {
                 // heading 为空删除 https://github.com/Vanessa219/vditor/issues/150
                 renderToc(vditor);
                 headingElement.remove();
             }
 
-            if ((startSpace && blockElement.getAttribute("data-type") !== "code-block")
-                || endSpace || isHeadingMD(blockElement.innerHTML) ||
-                (isHrMD(blockElement.innerHTML) && blockElement.previousElementSibling)) {
+            if (
+                (startSpace &&
+                    blockElement.getAttribute("data-type") !== "code-block") ||
+                endSpace ||
+                isHeadingMD(blockElement.innerHTML) ||
+                (isHrMD(blockElement.innerHTML) &&
+                    blockElement.previousElementSibling)
+            ) {
                 if (typeof vditor.options.input === "function") {
                     vditor.options.input(getMarkdown(vditor));
                 }
                 return;
             }
             // https://github.com/Vanessa219/vditor/issues/1565
-            if (event.inputType === "insertParagraph" && this.element.innerHTML === '<p><br></p><p><br></p>') {
+            if (
+                event.inputType === "insertParagraph" &&
+                this.element.innerHTML === "<p><br></p><p><br></p>"
+            ) {
                 blockElement.previousElementSibling.remove();
             }
 
             input(vditor, range, event);
         });
 
-        this.element.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
-            if (event.target.tagName === "INPUT") {
-                const checkElement = event.target as HTMLInputElement;
-                if (checkElement.checked) {
-                    checkElement.setAttribute("checked", "checked");
-                } else {
-                    checkElement.removeAttribute("checked");
-                }
-                this.preventInput = true;
-                if (getSelection().rangeCount > 0) {
-                    setSelectionFocus(getSelection().getRangeAt(0));
+        this.element.addEventListener(
+            "click",
+            (event: MouseEvent & { target: HTMLElement }) => {
+                if (event.target.tagName === "INPUT") {
+                    const checkElement = event.target as HTMLInputElement;
+                    if (checkElement.checked) {
+                        checkElement.setAttribute("checked", "checked");
+                    } else {
+                        checkElement.removeAttribute("checked");
+                    }
+                    this.preventInput = true;
+                    if (getSelection().rangeCount > 0) {
+                        setSelectionFocus(getSelection().getRangeAt(0));
+                    }
+                    afterRenderEvent(vditor);
+                    return;
                 }
-                afterRenderEvent(vditor);
-                return;
-            }
 
-            if (event.target.tagName === "IMG" &&
-                // plantuml 图片渲染不进行提示
-                !event.target.parentElement.classList.contains("vditor-wysiwyg__preview")) {
-                if (event.target.getAttribute("data-type") === "link-ref") {
-                    genLinkRefPopover(vditor, event.target);
-                } else {
-                    genImagePopover(event, vditor);
+                if (
+                    event.target.tagName === "IMG" &&
+                    // plantuml 图片渲染不进行提示
+                    !event.target.parentElement.classList.contains(
+                        "vditor-wysiwyg__preview"
+                    )
+                ) {
+                    if (event.target.getAttribute("data-type") === "link-ref") {
+                        genLinkRefPopover(vditor, event.target);
+                    } else {
+                        genImagePopover(event, vditor);
+                    }
+                    return;
                 }
-                return;
-            }
 
-            // 打开链接
-            const a = hasClosestByMatchTag(event.target, "A");
-            if (a) {
-                if (vditor.options.link.click) {
-                    vditor.options.link.click(a);
-                } else if (vditor.options.link.isOpen) {
-                    window.open(a.getAttribute("href"));
+                // 打开链接
+                const a = hasClosestByMatchTag(event.target, "A");
+                if (a) {
+                    if (vditor.options.link.click) {
+                        vditor.options.link.click(a);
+                    } else if (vditor.options.link.isOpen) {
+                        window.open(a.getAttribute("href"));
+                    }
+                    event.preventDefault();
+                    return;
                 }
-                event.preventDefault();
-                return;
-            }
 
-            const range = getEditorRange(vditor);
-            if (event.target.isEqualNode(this.element) && this.element.lastElementChild && range.collapsed) {
-                const lastRect = this.element.lastElementChild.getBoundingClientRect();
-                if (event.y > lastRect.top + lastRect.height) {
-                    if (this.element.lastElementChild.tagName === "P" &&
-                        this.element.lastElementChild.textContent.trim().replace(Constants.ZWSP, "") === "") {
-                        range.selectNodeContents(this.element.lastElementChild);
-                        range.collapse(false);
-                    } else {
-                        this.element.insertAdjacentHTML("beforeend",
-                            `<p data-block="0">${Constants.ZWSP}<wbr></p>`);
-                        setRangeByWbr(this.element, range);
+                const range = getEditorRange(vditor);
+                if (
+                    event.target.isEqualNode(this.element) &&
+                    this.element.lastElementChild &&
+                    range.collapsed
+                ) {
+                    const lastRect =
+                        this.element.lastElementChild.getBoundingClientRect();
+                    if (event.y > lastRect.top + lastRect.height) {
+                        if (
+                            this.element.lastElementChild.tagName === "P" &&
+                            this.element.lastElementChild.textContent
+                                .trim()
+                                .replace(Constants.ZWSP, "") === ""
+                        ) {
+                            range.selectNodeContents(
+                                this.element.lastElementChild
+                            );
+                            range.collapse(false);
+                        } else {
+                            this.element.insertAdjacentHTML(
+                                "beforeend",
+                                `<p data-block="0">${Constants.ZWSP}<wbr></p>`
+                            );
+                            setRangeByWbr(this.element, range);
+                        }
                     }
                 }
-            }
-
-            highlightToolbarWYSIWYG(vditor);
 
-            // 点击后光标落于预览区，需展开代码块（无选区时）
-            let previewElement = hasClosestByClassName(event.target, "vditor-wysiwyg__preview");
-            if (!previewElement) {
-                previewElement =
-                    hasClosestByClassName(getEditorRange(vditor).startContainer, "vditor-wysiwyg__preview");
-            }
-            if (previewElement) {
-                const hasSelection = getSelectText(vditor.wysiwyg.element).trim().length > 0;
-                if (!hasSelection) {
-                    showCode(previewElement, vditor);
+                highlightToolbarWYSIWYG(vditor);
+
+                // 点击后光标落于预览区，需展开代码块（无选区时）
+                let previewElement = hasClosestByClassName(
+                    event.target,
+                    "vditor-wysiwyg__preview"
+                );
+                if (!previewElement) {
+                    previewElement = hasClosestByClassName(
+                        getEditorRange(vditor).startContainer,
+                        "vditor-wysiwyg__preview"
+                    );
+                }
+                if (previewElement) {
+                    const hasSelection =
+                        getSelectText(vditor.wysiwyg.element).trim().length > 0;
+                    if (!hasSelection) {
+                        showCode(previewElement, vditor);
+                    }
                 }
-            }
-
-            clickToc(event, vditor);
-        });
 
-        this.element.addEventListener("keyup", (event: KeyboardEvent & { target: HTMLElement }) => {
-            if (event.isComposing || isCtrl(event)) {
-                return;
-            }
-            // 除 md 处理、cell 内换行、table 添加新行/列、代码块语言切换、block render 换行、跳出/逐层跳出 blockquote、h6 换行、
-            // 任务列表换行、软换行外需在换行时调整文档位置
-            if (event.key === "Enter") {
-                scrollCenter(vditor);
-            }
-            if ((event.key === "Backspace" || event.key === "Delete") &&
-                vditor.wysiwyg.element.innerHTML !== "" && vditor.wysiwyg.element.childNodes.length === 1 &&
-                vditor.wysiwyg.element.firstElementChild && vditor.wysiwyg.element.firstElementChild.tagName === "P"
-                && vditor.wysiwyg.element.firstElementChild.childElementCount === 0
-                && (vditor.wysiwyg.element.textContent === "" || vditor.wysiwyg.element.textContent === "\n")) {
-                // 为空时显示 placeholder
-                vditor.wysiwyg.element.innerHTML = "";
+                clickToc(event, vditor);
             }
-            const range = getEditorRange(vditor);
-            if (event.key === "Backspace") {
-                // firefox headings https://github.com/Vanessa219/vditor/issues/211
-                if (isFirefox() && range.startContainer.textContent === "\n" && range.startOffset === 1) {
-                    range.startContainer.textContent = "";
+        );
+
+        this.element.addEventListener(
+            "keyup",
+            (event: KeyboardEvent & { target: HTMLElement }) => {
+                if (event.isComposing || isCtrl(event)) {
+                    return;
+                }
+                // 除 md 处理、cell 内换行、table 添加新行/列、代码块语言切换、block render 换行、跳出/逐层跳出 blockquote、h6 换行、
+                // 任务列表换行、软换行外需在换行时调整文档位置
+                if (event.key === "Enter") {
+                    scrollCenter(vditor);
+                }
+                if (
+                    (event.key === "Backspace" || event.key === "Delete") &&
+                    vditor.wysiwyg.element.innerHTML !== "" &&
+                    vditor.wysiwyg.element.childNodes.length === 1 &&
+                    vditor.wysiwyg.element.firstElementChild &&
+                    vditor.wysiwyg.element.firstElementChild.tagName === "P" &&
+                    vditor.wysiwyg.element.firstElementChild
+                        .childElementCount === 0 &&
+                    (vditor.wysiwyg.element.textContent === "" ||
+                        vditor.wysiwyg.element.textContent === "\n")
+                ) {
+                    // 为空时显示 placeholder
+                    vditor.wysiwyg.element.innerHTML = "";
+                }
+                const range = getEditorRange(vditor);
+                if (event.key === "Backspace") {
+                    // firefox headings https://github.com/Vanessa219/vditor/issues/211
+                    if (
+                        isFirefox() &&
+                        range.startContainer.textContent === "\n" &&
+                        range.startOffset === 1
+                    ) {
+                        range.startContainer.textContent = "";
+                    }
                 }
-            }
 
-            // 没有被块元素包裹
-            modifyPre(vditor, range);
+                // 没有被块元素包裹
+                modifyPre(vditor, range);
 
-            highlightToolbarWYSIWYG(vditor);
+                highlightToolbarWYSIWYG(vditor);
 
-            if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "Backspace"
-                && event.key !== "ArrowLeft" && event.key !== "ArrowUp") {
-                return;
-            }
+                if (
+                    event.key !== "ArrowDown" &&
+                    event.key !== "ArrowRight" &&
+                    event.key !== "Backspace" &&
+                    event.key !== "ArrowLeft" &&
+                    event.key !== "ArrowUp"
+                ) {
+                    return;
+                }
 
-            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
-                vditor.hint.render(vditor);
-            }
+                if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                    vditor.hint.render(vditor);
+                }
 
-            // 上下左右，删除遇到块预览的处理
-            let previewElement = hasClosestByClassName(range.startContainer, "vditor-wysiwyg__preview");
-            if (!previewElement && range.startContainer.nodeType !== 3 && range.startOffset > 0) {
-                // table 前删除遇到代码块
-                const blockRenderElement = range.startContainer as HTMLElement;
-                if (blockRenderElement.classList.contains("vditor-wysiwyg__block")) {
-                    previewElement = blockRenderElement.lastElementChild as HTMLElement;
+                // 上下左右，删除遇到块预览的处理
+                let previewElement = hasClosestByClassName(
+                    range.startContainer,
+                    "vditor-wysiwyg__preview"
+                );
+                if (
+                    !previewElement &&
+                    range.startContainer.nodeType !== 3 &&
+                    range.startOffset > 0
+                ) {
+                    // table 前删除遇到代码块
+                    const blockRenderElement =
+                        range.startContainer as HTMLElement;
+                    if (
+                        blockRenderElement.classList.contains(
+                            "vditor-wysiwyg__block"
+                        )
+                    ) {
+                        previewElement =
+                            blockRenderElement.lastElementChild as HTMLElement;
+                    }
                 }
-            }
-            if (!previewElement) {
-                return;
-            }
-            const previousElement = previewElement.previousElementSibling as HTMLElement;
-            if (previousElement.style.display === "none") {
-                if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                    showCode(previewElement, vditor);
-                } else {
-                    showCode(previewElement, vditor, false);
+                if (!previewElement) {
+                    return;
+                }
+                const previousElement =
+                    previewElement.previousElementSibling as HTMLElement;
+                if (previousElement.style.display === "none") {
+                    if (
+                        event.key === "ArrowDown" ||
+                        event.key === "ArrowRight"
+                    ) {
+                        showCode(previewElement, vditor);
+                    } else {
+                        showCode(previewElement, vditor, false);
+                    }
+                    return;
                 }
-                return;
-            }
 
-            let codeElement = previewElement.previousElementSibling as HTMLElement;
-            if (codeElement.tagName === "PRE") {
-                codeElement = codeElement.firstElementChild as HTMLElement;
-            }
+                let codeElement =
+                    previewElement.previousElementSibling as HTMLElement;
+                if (codeElement.tagName === "PRE") {
+                    codeElement = codeElement.firstElementChild as HTMLElement;
+                }
 
-            if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-                const blockRenderElement = previewElement.parentElement;
-                let nextNode = getRenderElementNextNode(blockRenderElement) as HTMLElement;
-                if (nextNode && nextNode.nodeType !== 3) {
-                    // 下一节点依旧为代码渲染块
-                    const nextRenderElement = nextNode.querySelector(".vditor-wysiwyg__preview") as HTMLElement;
-                    if (nextRenderElement) {
-                        showCode(nextRenderElement, vditor);
-                        return;
+                if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+                    const blockRenderElement = previewElement.parentElement;
+                    let nextNode = getRenderElementNextNode(
+                        blockRenderElement
+                    ) as HTMLElement;
+                    if (nextNode && nextNode.nodeType !== 3) {
+                        // 下一节点依旧为代码渲染块
+                        const nextRenderElement = nextNode.querySelector(
+                            ".vditor-wysiwyg__preview"
+                        ) as HTMLElement;
+                        if (nextRenderElement) {
+                            showCode(nextRenderElement, vditor);
+                            return;
+                        }
                     }
-                }
-                // 跳过渲染块，光标移动到下一个节点
-                if (nextNode.nodeType === 3) {
-                    // inline
-                    while (nextNode.textContent.length === 0 && nextNode.nextSibling) {
-                        // https://github.com/Vanessa219/vditor/issues/100 2
-                        nextNode = nextNode.nextSibling as HTMLElement;
+                    // 跳过渲染块，光标移动到下一个节点
+                    if (nextNode.nodeType === 3) {
+                        // inline
+                        while (
+                            nextNode.textContent.length === 0 &&
+                            nextNode.nextSibling
+                        ) {
+                            // https://github.com/Vanessa219/vditor/issues/100 2
+                            nextNode = nextNode.nextSibling as HTMLElement;
+                        }
+                        range.setStart(nextNode, 1);
+                    } else {
+                        // block
+                        range.setStart(nextNode.firstChild, 0);
                     }
-                    range.setStart(nextNode, 1);
                 } else {
-                    // block
-                    range.setStart(nextNode.firstChild, 0);
+                    range.selectNodeContents(codeElement);
+                    range.collapse(false);
                 }
-            } else {
-                range.selectNodeContents(codeElement);
-                range.collapse(false);
             }
-        });
+        );
     }
 }