vditor 3.8.7

package/src/ts/preview/index.ts

@@ -0,0 +1,266 @@
+import {abcRender} from "../markdown/abcRender";
+import {chartRender} from "../markdown/chartRender";
+import {codeRender} from "../markdown/codeRender";
+import {flowchartRender} from "../markdown/flowchartRender";
+import {getMarkdown} from "../markdown/getMarkdown";
+import {graphvizRender} from "../markdown/graphvizRender";
+import {highlightRender} from "../markdown/highlightRender";
+import {mathRender} from "../markdown/mathRender";
+import {mediaRender} from "../markdown/mediaRender";
+import {mermaidRender} from "../markdown/mermaidRender";
+import {mindmapRender} from "../markdown/mindmapRender";
+import {plantumlRender} from "../markdown/plantumlRender";
+import {getEventName} from "../util/compatibility";
+import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {setSelectionFocus} from "../util/selection";
+import {previewImage} from "./image";
+
+export class Preview {
+    public element: HTMLElement;
+    private mdTimeoutId: number;
+
+    constructor(vditor: IVditor) {
+        this.element = document.createElement("div");
+        this.element.className = `vditor-preview`;
+
+        const previewElement = document.createElement("div");
+        previewElement.className = "vditor-reset";
+        if (vditor.options.classes.preview) {
+            previewElement.classList.add(vditor.options.classes.preview);
+        }
+        previewElement.style.maxWidth = vditor.options.preview.maxWidth + "px";
+        previewElement.addEventListener("copy", (event: ClipboardEvent & { target: HTMLElement }) => {
+            if (event.target.tagName === "TEXTAREA") {
+                // https://github.com/Vanessa219/vditor/issues/901
+                return;
+            }
+            const tempElement = document.createElement("div");
+            tempElement.className = "vditor-reset";
+            tempElement.appendChild(getSelection().getRangeAt(0).cloneContents());
+
+            this.copyToX(vditor, tempElement);
+            event.preventDefault();
+        });
+        previewElement.addEventListener("click", (event: MouseEvent & { target: HTMLElement }) => {
+            const spanElement = hasClosestByMatchTag(event.target, "SPAN");
+            if (spanElement && hasClosestByClassName(spanElement, "vditor-toc")) {
+                const headingElement =
+                    previewElement.querySelector("#" + spanElement.getAttribute("data-target-id")) as HTMLElement;
+                if (headingElement) {
+                    this.element.scrollTop = headingElement.offsetTop;
+                }
+                return;
+            }
+            if (event.target.tagName === "IMG") {
+                previewImage(event.target as HTMLImageElement, vditor.options.lang, vditor.options.theme);
+            }
+        });
+
+        const actions = vditor.options.preview.actions;
+        const actionElement = document.createElement("div");
+        actionElement.className = "vditor-preview__action";
+        const actionHtml: string[] = [];
+        for (let i = 0; i < actions.length; i++) {
+            const action = actions[i];
+            if (typeof action === "object") {
+                actionHtml.push(`<button type="button" data-type="${action.key}" class="${action.className}"${action.tooltip ? ` aria-label="${action.tooltip}"` : ""}">${action.text}</button>`);
+                continue;
+            }
+            switch (action) {
+                case "desktop":
+                    actionHtml.push(`<button type="button" class="vditor-preview__action--current" data-type="desktop">Desktop</button>`);
+                    break;
+                case "tablet":
+                    actionHtml.push(`<button type="button" data-type="tablet">Tablet</button>`);
+                    break;
+                case "mobile":
+                    actionHtml.push(`<button type="button" data-type="mobile">Mobile/Wechat</button>`);
+                    break;
+                case "mp-wechat":
+                    actionHtml.push(`<button type="button" data-type="mp-wechat" class="vditor-tooltipped vditor-tooltipped__w" aria-label="复制到公众号"><svg><use xlink:href="#vditor-icon-mp-wechat"></use></svg></button>`);
+                    break;
+                case "zhihu":
+                    actionHtml.push(`<button type="button" data-type="zhihu" class="vditor-tooltipped vditor-tooltipped__w" aria-label="复制到知乎"><svg><use xlink:href="#vditor-icon-zhihu"></use></svg></button>`);
+                    break;
+            }
+        }
+        actionElement.innerHTML = actionHtml.join("");
+        if (actions.length === 0) {
+            actionElement.style.display = "none";
+        }
+        this.element.appendChild(actionElement);
+        this.element.appendChild(previewElement);
+
+        actionElement.addEventListener(getEventName(), (event) => {
+            const btn = hasClosestByTag(event.target as HTMLElement, "BUTTON");
+            if (!btn) {
+                return;
+            }
+            const type = btn.getAttribute("data-type");
+            const actionCustom = actions.find((w: IPreviewActionCustom) => w?.key === type) as IPreviewActionCustom;
+            if (actionCustom) {
+                actionCustom.click(type);
+                return;
+            }
+
+            if (type === "mp-wechat" || type === "zhihu") {
+                this.copyToX(vditor, this.element.lastElementChild.cloneNode(true) as HTMLElement, type);
+                return;
+            }
+
+            if (type === "desktop") {
+                previewElement.style.width = "auto";
+            } else if (type === "tablet") {
+                previewElement.style.width = "780px";
+            } else {
+                previewElement.style.width = "360px";
+            }
+            if (previewElement.scrollWidth > previewElement.parentElement.clientWidth) {
+                previewElement.style.width = "auto";
+            }
+            this.render(vditor);
+            actionElement.querySelectorAll("button").forEach((item) => {
+                item.classList.remove("vditor-preview__action--current");
+            });
+            btn.classList.add("vditor-preview__action--current");
+        });
+    }
+
+    public render(vditor: IVditor, value?: string) {
+        clearTimeout(this.mdTimeoutId);
+
+        if (this.element.style.display === "none") {
+            if (this.element.getAttribute("data-type") === "renderPerformance") {
+                vditor.tip.hide();
+            }
+            return;
+        }
+
+        if (value) {
+            this.element.lastElementChild.innerHTML = value;
+            return;
+        }
+
+        if (getMarkdown(vditor)
+            .replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "") === "") {
+            this.element.lastElementChild.innerHTML = "";
+            return;
+        }
+
+        const renderStartTime = new Date().getTime();
+        const markdownText = getMarkdown(vditor);
+        this.mdTimeoutId = window.setTimeout(() => {
+            if (vditor.options.preview.url) {
+                const xhr = new XMLHttpRequest();
+                xhr.open("POST", vditor.options.preview.url);
+                xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+                xhr.onreadystatechange = () => {
+                    if (xhr.readyState === XMLHttpRequest.DONE) {
+                        if (xhr.status === 200) {
+                            const responseJSON = JSON.parse(xhr.responseText);
+                            if (responseJSON.code !== 0) {
+                                vditor.tip.show(responseJSON.msg);
+                                return;
+                            }
+                            if (vditor.options.preview.transform) {
+                                responseJSON.data = vditor.options.preview.transform(responseJSON.data);
+                            }
+                            this.element.lastElementChild.innerHTML = responseJSON.data;
+                            this.afterRender(vditor, renderStartTime);
+                        } else {
+                            let html = vditor.lute.Md2HTML(markdownText);
+                            if (vditor.options.preview.transform) {
+                                html = vditor.options.preview.transform(html);
+                            }
+                            this.element.lastElementChild.innerHTML = html;
+                            this.afterRender(vditor, renderStartTime);
+                        }
+                    }
+                };
+
+                xhr.send(JSON.stringify({markdownText}));
+            } else {
+                let html = vditor.lute.Md2HTML(markdownText);
+                if (vditor.options.preview.transform) {
+                    html = vditor.options.preview.transform(html);
+                }
+                this.element.lastElementChild.innerHTML = html;
+                this.afterRender(vditor, renderStartTime);
+            }
+        }, vditor.options.preview.delay);
+    }
+
+    private afterRender(vditor: IVditor, startTime: number) {
+        if (vditor.options.preview.parse) {
+            vditor.options.preview.parse(this.element);
+        }
+        const time = (new Date().getTime() - startTime);
+        if ((new Date().getTime() - startTime) > 2600) {
+            // https://github.com/b3log/vditor/issues/67
+            vditor.tip.show(window.VditorI18n.performanceTip.replace("${x}", time.toString()));
+            vditor.preview.element.setAttribute("data-type", "renderPerformance");
+        } else if (vditor.preview.element.getAttribute("data-type") === "renderPerformance") {
+            vditor.tip.hide();
+            vditor.preview.element.removeAttribute("data-type");
+        }
+        const cmtFocusElement = vditor.preview.element.querySelector(".vditor-comment--focus");
+        if (cmtFocusElement) {
+            cmtFocusElement.classList.remove("vditor-comment--focus");
+        }
+        codeRender(vditor.preview.element.lastElementChild as HTMLElement);
+        highlightRender(vditor.options.preview.hljs, vditor.preview.element.lastElementChild as HTMLElement,
+            vditor.options.cdn);
+        mermaidRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
+        flowchartRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
+        graphvizRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
+        chartRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
+        mindmapRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn, vditor.options.theme);
+        plantumlRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
+        abcRender(vditor.preview.element.lastElementChild as HTMLElement, vditor.options.cdn);
+        mediaRender(vditor.preview.element.lastElementChild as HTMLElement);
+        // toc render
+        const editorElement = vditor.preview.element;
+        let tocHTML = vditor.outline.render(vditor);
+        if (tocHTML === "") {
+            tocHTML = "[ToC]";
+        }
+        editorElement.querySelectorAll('[data-type="toc-block"]').forEach((item: HTMLElement) => {
+            item.innerHTML = tocHTML;
+            mathRender(item, {
+                cdn: vditor.options.cdn,
+                math: vditor.options.preview.math,
+            });
+        });
+        mathRender(vditor.preview.element.lastElementChild as HTMLElement, {
+            cdn: vditor.options.cdn,
+            math: vditor.options.preview.math,
+        });
+    }
+
+    private copyToX(vditor: IVditor, copyElement: HTMLElement, type = "mp-wechat") {
+        // fix math render
+        if (type !== "zhihu") {
+            copyElement.querySelectorAll(".katex-html .base").forEach((item: HTMLElement) => {
+                item.style.display = "initial";
+            });
+        } else {
+            copyElement.querySelectorAll(".language-math").forEach((item: HTMLElement) => {
+                item.outerHTML = `<img class="Formula-image" data-eeimg="true" src="//www.zhihu.com/equation?tex=" alt="${item.getAttribute("data-math")}\\" style="display: block; margin: 0 auto; max-width: 100%;">`;
+            });
+        }
+        // 防止背景色被粘贴到公众号中
+        copyElement.style.backgroundColor = "#fff";
+        // 代码背景
+        copyElement.querySelectorAll("code").forEach((item) => {
+            item.style.backgroundImage = "none";
+        });
+        this.element.append(copyElement);
+        const range = copyElement.ownerDocument.createRange();
+        range.selectNode(copyElement);
+        setSelectionFocus(range);
+        document.execCommand("copy");
+        this.element.lastElementChild.remove();
+        vditor.tip.show(`已复制，可到${type === "zhihu" ? "知乎" : "微信公众号平台"}进行粘贴`);
+    }
+}

package/src/ts/resize/index.ts

@@ -0,0 +1,57 @@
+
+export class Resize {
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor) {
+        this.element = document.createElement("div");
+        this.element.className = `vditor-resize vditor-resize--${vditor.options.resize.position}`;
+        this.element.innerHTML = `<div><svg><use xlink:href="#vditor-icon-resize"></use></svg></div>`;
+
+        this.bindEvent(vditor);
+    }
+
+    private bindEvent(vditor: IVditor) {
+        this.element.addEventListener("mousedown", (event: MouseEvent) => {
+
+            const documentSelf = document;
+            const y = event.clientY;
+            const height = vditor.element.offsetHeight;
+            const minHeight = 63 + vditor.element.querySelector(".vditor-toolbar").clientHeight;
+            documentSelf.ondragstart = () => false;
+
+            if (window.captureEvents) {
+                window.captureEvents();
+            }
+
+            this.element.classList.add("vditor-resize--selected");
+
+            documentSelf.onmousemove = (moveEvent: MouseEvent) => {
+                if (vditor.options.resize.position === "top") {
+                    vditor.element.style.height = Math.max(minHeight, height + (y - moveEvent.clientY)) + "px";
+                } else {
+                    vditor.element.style.height = Math.max(minHeight, height + (moveEvent.clientY - y)) + "px";
+                }
+                if (vditor.options.typewriterMode) {
+                    vditor.sv.element.style.paddingBottom =
+                        vditor.sv.element.parentElement.offsetHeight / 2 + "px";
+                }
+            };
+
+            documentSelf.onmouseup = () => {
+                if (vditor.options.resize.after) {
+                    vditor.options.resize.after(vditor.element.offsetHeight - height);
+                }
+
+                if (window.captureEvents) {
+                    window.captureEvents();
+                }
+                documentSelf.onmousemove = null;
+                documentSelf.onmouseup = null;
+                documentSelf.ondragstart = null;
+                documentSelf.onselectstart = null;
+                documentSelf.onselect = null;
+                this.element.classList.remove("vditor-resize--selected");
+            };
+        });
+    }
+}

package/src/ts/sv/index.ts

@@ -0,0 +1,119 @@
+import {isCtrl, isFirefox} from "../util/compatibility";
+import {
+    blurEvent,
+    copyEvent, cutEvent,
+    dropEvent,
+    focusEvent,
+    hotkeyEvent,
+    scrollCenter,
+    selectEvent,
+} from "../util/editorCommonEvent";
+import {paste} from "../util/fixBrowserBehavior";
+import {getSelectText} from "../util/getSelectText";
+import {inputEvent} from "./inputEvent";
+
+class Editor {
+    public range: Range;
+    public element: HTMLPreElement;
+    public composingLock: boolean = false;
+    public processTimeoutId: number;
+    public hlToolbarTimeoutId: number;
+    public preventInput: boolean;
+
+    constructor(vditor: IVditor) {
+        this.element = document.createElement("pre");
+        this.element.className = "vditor-sv vditor-reset";
+        this.element.setAttribute("placeholder", vditor.options.placeholder);
+        this.element.setAttribute("contenteditable", "true");
+        this.element.setAttribute("spellcheck", "false");
+
+        this.bindEvent(vditor);
+
+        focusEvent(vditor, this.element);
+        blurEvent(vditor, this.element);
+        hotkeyEvent(vditor, this.element);
+        selectEvent(vditor, this.element);
+        dropEvent(vditor, this.element);
+        copyEvent(vditor, this.element, this.copy);
+        cutEvent(vditor, this.element, this.copy);
+    }
+
+    private copy(event: ClipboardEvent, vditor: IVditor) {
+        event.stopPropagation();
+        event.preventDefault();
+        event.clipboardData.setData("text/plain", getSelectText(vditor[vditor.currentMode].element));
+    }
+
+    private bindEvent(vditor: IVditor) {
+        this.element.addEventListener("paste", (event: ClipboardEvent & { target: HTMLElement }) => {
+            paste(vditor, event, {
+                pasteCode: (code: string) => {
+                    document.execCommand("insertHTML", false, code);
+                },
+            });
+        });
+
+        this.element.addEventListener("scroll", () => {
+            if (vditor.preview.element.style.display !== "block") {
+                return;
+            }
+            const textScrollTop = this.element.scrollTop;
+            const textHeight = this.element.clientHeight;
+            const textScrollHeight = this.element.scrollHeight - parseFloat(this.element.style.paddingBottom || "0");
+            const preview = vditor.preview.element;
+            if ((textScrollTop / textHeight > 0.5)) {
+                preview.scrollTop = (textScrollTop + textHeight) *
+                    preview.scrollHeight / textScrollHeight - textHeight;
+            } else {
+                preview.scrollTop = textScrollTop *
+                    preview.scrollHeight / textScrollHeight;
+            }
+        });
+
+        this.element.addEventListener("compositionstart", (event: InputEvent) => {
+            this.composingLock = true;
+        });
+
+        this.element.addEventListener("compositionend", (event: InputEvent) => {
+            if (!isFirefox()) {
+                inputEvent(vditor, event);
+            }
+            this.composingLock = false;
+        });
+
+        this.element.addEventListener("input", (event: InputEvent) => {
+            if (event.inputType === "deleteByDrag" || event.inputType === "insertFromDrop") {
+                // https://github.com/Vanessa219/vditor/issues/801 编辑器内容拖拽问题
+                return;
+            }
+            if (this.composingLock ||  event.data === "‘" || event.data === "“" || event.data === "《") {
+                return;
+            }
+            if (this.preventInput) {
+                this.preventInput = false;
+                return;
+            }
+            inputEvent(vditor, event);
+        });
+
+        this.element.addEventListener("keyup", (event) => {
+            if (event.isComposing || isCtrl(event)) {
+                return;
+            }
+            if ((event.key === "Backspace" || event.key === "Delete") &&
+                vditor.sv.element.innerHTML !== "" && vditor.sv.element.childNodes.length === 1 &&
+                vditor.sv.element.firstElementChild && vditor.sv.element.firstElementChild.tagName === "DIV"
+                && vditor.sv.element.firstElementChild.childElementCount === 2
+                && (vditor.sv.element.firstElementChild.textContent === "" || vditor.sv.element.textContent === "\n")) {
+                // 为空时显示 placeholder
+                vditor.sv.element.innerHTML = "";
+                return;
+            }
+            if (event.key === "Enter") {
+                scrollCenter(vditor);
+            }
+        });
+    }
+}
+
+export {Editor};

package/src/ts/sv/inputEvent.ts

@@ -0,0 +1,207 @@
+import {scrollCenter} from "../util/editorCommonEvent";
+import {hasClosestByAttribute} from "../util/hasClosest";
+import {getSelectPosition, setRangeByWbr} from "../util/selection";
+import {getSideByType, processAfterRender, processSpinVditorSVDOM} from "./process";
+
+export const inputEvent = (vditor: IVditor, event?: InputEvent) => {
+    const range = getSelection().getRangeAt(0).cloneRange();
+    let startContainer = range.startContainer;
+    if (range.startContainer.nodeType !== 3 && (range.startContainer as HTMLElement).tagName === "DIV") {
+        startContainer = range.startContainer.childNodes[range.startOffset - 1];
+    }
+    let blockElement = hasClosestByAttribute(startContainer, "data-block", "0");
+    // 不调用 lute 解析
+    if (blockElement && event && (event.inputType === "deleteContentBackward" || event.data === " ")) {
+        // 开始可以输入空格
+        const startOffset = getSelectPosition(blockElement, vditor.sv.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) !== " " &&
+                // 多个 tab 前删除不形成代码块 https://github.com/Vanessa219/vditor/issues/162 1
+                blockElement.textContent.charAt(i) !== "\t") {
+                startSpace = false;
+                break;
+            }
+        }
+        if (startOffset === 0) {
+            startSpace = false;
+        }
+        if (startSpace) {
+            processAfterRender(vditor);
+            return;
+        }
+
+        if (event.inputType === "deleteContentBackward") {
+            // https://github.com/Vanessa219/vditor/issues/584 代码块 marker 删除
+            const codeBlockMarkerElement =
+                hasClosestByAttribute(startContainer, "data-type", "code-block-open-marker") ||
+                hasClosestByAttribute(startContainer, "data-type", "code-block-close-marker");
+            if (codeBlockMarkerElement) {
+                if (codeBlockMarkerElement.getAttribute("data-type") === "code-block-close-marker") {
+                    const openMarkerElement = getSideByType(startContainer, "code-block-open-marker");
+                    if (openMarkerElement) {
+                        openMarkerElement.textContent = codeBlockMarkerElement.textContent;
+                        processAfterRender(vditor);
+                        return;
+                    }
+                }
+                if (codeBlockMarkerElement.getAttribute("data-type") === "code-block-open-marker") {
+                    const openMarkerElement = getSideByType(startContainer, "code-block-close-marker", false);
+                    if (openMarkerElement) {
+                        openMarkerElement.textContent = codeBlockMarkerElement.textContent;
+                        processAfterRender(vditor);
+                        return;
+                    }
+                }
+            }
+            // https://github.com/Vanessa219/vditor/issues/877 数学公式输入删除生成节点
+            const mathBlockMarkerElement =
+                hasClosestByAttribute(startContainer, "data-type", "math-block-open-marker");
+            if (mathBlockMarkerElement) {
+                const mathBlockCloseElement = mathBlockMarkerElement.nextElementSibling.nextElementSibling;
+                if (mathBlockCloseElement && mathBlockCloseElement.getAttribute("data-type") === "math-block-close-marker") {
+                    mathBlockCloseElement.remove();
+                    processAfterRender(vditor);
+                }
+                return;
+            }
+
+            blockElement.querySelectorAll('[data-type="code-block-open-marker"]').forEach((item: HTMLElement) => {
+                if (item.textContent.length === 1) {
+                    item.remove();
+                }
+            });
+            blockElement.querySelectorAll('[data-type="code-block-close-marker"]').forEach((item: HTMLElement) => {
+                if (item.textContent.length === 1) {
+                    item.remove();
+                }
+            });
+
+            // 标题删除
+            const headingElement = hasClosestByAttribute(startContainer, "data-type", "heading-marker");
+            if (headingElement && headingElement.textContent.indexOf("#") === -1) {
+                processAfterRender(vditor);
+                return;
+            }
+        }
+        // 删除或空格不解析，否则会 format 回去
+        if ((event.data === " " || event.inputType === "deleteContentBackward") &&
+            (hasClosestByAttribute(startContainer, "data-type", "padding") // 场景：b 前进行删除 [> 1. a\n>   b]
+                || hasClosestByAttribute(startContainer, "data-type", "li-marker")  // 场景：删除最后一个字符 [* 1\n* ]
+                || hasClosestByAttribute(startContainer, "data-type", "task-marker")  // 场景：删除最后一个字符 [* [ ] ]
+                || hasClosestByAttribute(startContainer, "data-type", "blockquote-marker")  // 场景：删除最后一个字符 [> ]
+            )) {
+            processAfterRender(vditor);
+            return;
+        }
+    }
+    if (blockElement && blockElement.textContent.trimRight() === "$$") {
+        // 内联数学公式
+        processAfterRender(vditor);
+        return;
+    }
+    if (!blockElement) {
+        blockElement = vditor.sv.element;
+    }
+    if (blockElement.firstElementChild?.getAttribute("data-type") === "link-ref-defs-block") {
+        // 修改链接引用
+        blockElement = vditor.sv.element;
+    }
+    if (hasClosestByAttribute(startContainer, "data-type", "footnotes-link")) {
+        // 修改脚注角标
+        blockElement = vditor.sv.element;
+    }
+    // 添加光标位置
+    if (blockElement.textContent.indexOf(Lute.Caret) === -1) {
+        // 点击工具栏会插入 Caret
+        range.insertNode(document.createTextNode(Lute.Caret));
+    }
+    // 清除浏览器自带的样式
+    blockElement.querySelectorAll("[style]").forEach((item) => { // 不可前置，否则会影响 newline 的样式
+        item.removeAttribute("style");
+    });
+    blockElement.querySelectorAll("font").forEach((item) => { // 不可前置，否则会影响光标的位置
+        item.outerHTML = item.innerHTML;
+    });
+    let html = blockElement.textContent;
+    const isSVElement = blockElement.isEqualNode(vditor.sv.element);
+    if (isSVElement) {
+        html = blockElement.textContent;
+    } else {
+        // 添加前一个块元素
+        if (blockElement.previousElementSibling) {
+            html = blockElement.previousElementSibling.textContent + html;
+            blockElement.previousElementSibling.remove();
+        }
+        if (blockElement.previousElementSibling && html.indexOf("---\n") === 0) {
+            // 确认 yaml-front 是否为首行
+            html = blockElement.previousElementSibling.textContent + html;
+            blockElement.previousElementSibling.remove();
+        }
+
+        // 添加链接引用
+        vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item, index) => {
+            if (index === 0 && item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
+                html += "\n" + item.parentElement.textContent;
+                item.parentElement.remove();
+            }
+        });
+
+        // 添加脚注
+        vditor.sv.element.querySelectorAll("[data-type='footnotes-link']").forEach((item, index) => {
+            if (index === 0 && item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
+                html += "\n" + item.parentElement.textContent;
+                item.parentElement.remove();
+            }
+        });
+    }
+    html = processSpinVditorSVDOM(html, vditor);
+    if (isSVElement) {
+        blockElement.innerHTML = html;
+    } else {
+        blockElement.outerHTML = html;
+    }
+
+    let firstLinkRefDefElement: Element;
+    const allLinkRefDefsElement = vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']");
+    allLinkRefDefsElement.forEach((item, index) => {
+        if (index === 0) {
+            firstLinkRefDefElement = item.parentElement;
+        } else {
+            firstLinkRefDefElement.lastElementChild.remove();
+            firstLinkRefDefElement.insertAdjacentHTML("beforeend", `${item.parentElement.innerHTML}`);
+            item.parentElement.remove();
+        }
+    });
+    if (allLinkRefDefsElement.length > 0) {
+        vditor.sv.element.insertAdjacentElement("beforeend", firstLinkRefDefElement);
+    }
+
+    // 脚注合并后添加的末尾
+    let firstFootnoteElement: Element;
+    const allFootnoteElement = vditor.sv.element.querySelectorAll("[data-type='footnotes-link']");
+    allFootnoteElement.forEach((item, index) => {
+        if (index === 0) {
+            firstFootnoteElement = item.parentElement;
+        } else {
+            firstFootnoteElement.lastElementChild.remove();
+            firstFootnoteElement.insertAdjacentHTML("beforeend", `${item.parentElement.innerHTML}`);
+            item.parentElement.remove();
+        }
+    });
+    if (allFootnoteElement.length > 0) {
+        vditor.sv.element.insertAdjacentElement("beforeend", firstFootnoteElement);
+    }
+
+    setRangeByWbr(vditor.sv.element, range);
+
+    scrollCenter(vditor);
+
+    processAfterRender(vditor, {
+        enableAddUndoStack: true,
+        enableHint: true,
+        enableInput: true,
+    });
+};