@yltrcc/vditor 0.0.1

package/src/ts/toolbar/setToolbar.ts

@@ -0,0 +1,120 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+
+export const removeCurrentToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && itemElement.classList.contains("vditor-menu--current")) {
+            itemElement.classList.remove("vditor-menu--current");
+        }
+    });
+};
+
+export const setCurrentToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && !itemElement.classList.contains("vditor-menu--current")) {
+            itemElement.classList.add("vditor-menu--current");
+        }
+    });
+};
+
+export const enableToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && itemElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            itemElement.classList.remove(Constants.CLASS_MENU_DISABLED);
+        }
+    });
+};
+
+export const disableToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        const itemElement = toolbar[name].children[0];
+        if (itemElement && !itemElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            itemElement.classList.add(Constants.CLASS_MENU_DISABLED);
+        }
+    });
+};
+
+export const hideToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        if (toolbar[name]) {
+            toolbar[name].style.display = "none";
+        }
+    });
+};
+
+export const showToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
+    names.forEach((name) => {
+        if (!toolbar[name]) {
+            return;
+        }
+        if (toolbar[name]) {
+            toolbar[name].style.display = "block";
+        }
+    });
+};
+
+// "subToolbar", "hint", "popover"
+export const hidePanel = (vditor: IVditor, panels: string[], exceptElement?: HTMLElement) => {
+    if (panels.includes("subToolbar")) {
+        vditor.toolbar.element.querySelectorAll(".vditor-hint").forEach((item: HTMLElement) => {
+            if (exceptElement && item.isEqualNode(exceptElement)) {
+                return;
+            }
+            item.style.display = "none";
+        });
+        if (vditor.toolbar.elements.emoji) {
+            (vditor.toolbar.elements.emoji.lastElementChild as HTMLElement).style.display = "none";
+        }
+    }
+    if (panels.includes("hint")) {
+        vditor.hint.element.style.display = "none";
+    }
+    if (vditor.wysiwyg.popover && panels.includes("popover")) {
+        vditor.wysiwyg.popover.style.display = "none";
+    }
+};
+
+export const toggleSubMenu = (vditor: IVditor, panelElement: HTMLElement, actionBtn: Element, level: number) => {
+    actionBtn.addEventListener(getEventName(), (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (actionBtn.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            return;
+        }
+        vditor.toolbar.element.querySelectorAll(".vditor-hint--current").forEach((item) => {
+            item.classList.remove("vditor-hint--current");
+        });
+        if (panelElement.style.display === "block") {
+            panelElement.style.display = "none";
+        } else {
+            hidePanel(vditor, ["subToolbar", "hint", "popover"], actionBtn.parentElement.parentElement);
+            if (!actionBtn.classList.contains("vditor-tooltipped")) {
+                actionBtn.classList.add("vditor-hint--current");
+            }
+            panelElement.style.display = "block";
+            if (vditor.toolbar.element.getBoundingClientRect().right - actionBtn.getBoundingClientRect().right < 250) {
+                panelElement.classList.add("vditor-panel--left");
+            } else {
+                panelElement.classList.remove("vditor-panel--left");
+            }
+        }
+    });
+};

package/src/ts/ui/initUI.ts

@@ -0,0 +1,180 @@
+import {Constants} from "../constants";
+import {setEditMode} from "../toolbar/EditMode";
+import {hidePanel} from "../toolbar/setToolbar";
+import {accessLocalStorage} from "../util/compatibility";
+import {setContentTheme} from "./setContentTheme";
+import {setTheme} from "./setTheme";
+
+export const initUI = (vditor: IVditor) => {
+  vditor.element.innerHTML = "";
+  vditor.element.classList.add("vditor");
+  // 支持 RTL
+  if (vditor.options.rtl) {
+    vditor.element.setAttribute("dir", "rtl")
+  }
+  setTheme(vditor);
+  setContentTheme(vditor.options.preview.theme.current, vditor.options.preview.theme.path);
+  if (typeof vditor.options.height === "number") {
+    vditor.element.style.height = vditor.options.height + "px";
+  } else {
+    vditor.element.style.height = vditor.options.height;
+  }
+  if (typeof vditor.options.minHeight === "number") {
+    vditor.element.style.minHeight = vditor.options.minHeight + "px";
+  }
+  if (typeof vditor.options.width === "number") {
+    vditor.element.style.width = vditor.options.width + "px";
+  } else {
+    vditor.element.style.width = vditor.options.width;
+  }
+
+  vditor.element.appendChild(vditor.toolbar.element);
+
+  const contentElement = document.createElement("div");
+  contentElement.className = "vditor-content";
+
+  if (vditor.options.outline.position === "left") {
+    contentElement.appendChild(vditor.outline.element);
+  }
+
+  contentElement.appendChild(vditor.wysiwyg.element.parentElement);
+
+  contentElement.appendChild(vditor.sv.element);
+
+  contentElement.appendChild(vditor.ir.element.parentElement);
+
+  contentElement.appendChild(vditor.preview.element);
+
+  if (vditor.toolbar.elements.devtools) {
+    contentElement.appendChild(vditor.devtools.element);
+  }
+
+  if (vditor.options.outline.position === "right") {
+    vditor.outline.element.classList.add("vditor-outline--right");
+    contentElement.appendChild(vditor.outline.element);
+  }
+
+  if (vditor.upload) {
+    contentElement.appendChild(vditor.upload.element);
+  }
+
+  if (vditor.options.resize.enable) {
+    contentElement.appendChild(vditor.resize.element);
+  }
+
+  contentElement.appendChild(vditor.hint.element);
+
+  contentElement.appendChild(vditor.tip.element);
+
+  vditor.element.appendChild(contentElement);
+
+  contentElement.addEventListener("click", () => {
+    hidePanel(vditor, ["subToolbar"]);
+  });
+
+  if (vditor.toolbar.elements.export) {
+    // for export pdf
+    vditor.element.insertAdjacentHTML("beforeend",
+      '<iframe id="vditorExportIframe" style="width: 100%;height: 0;border: 0"></iframe>');
+  }
+
+  setEditMode(vditor, vditor.options.mode, afterRender(vditor));
+
+  document.execCommand("DefaultParagraphSeparator", false, "p");
+
+  if (navigator.userAgent.indexOf("iPhone") > -1 && typeof window.visualViewport !== "undefined") {
+    // https://github.com/Vanessa219/vditor/issues/379
+    let pendingUpdate = false;
+    const viewportHandler = (event: Event) => {
+      if (pendingUpdate) {
+        return;
+      }
+      pendingUpdate = true;
+
+      requestAnimationFrame(() => {
+        pendingUpdate = false;
+        const layoutViewport = vditor.toolbar.element;
+        layoutViewport.style.transform = "none";
+        if (layoutViewport.getBoundingClientRect().top < 0) {
+          layoutViewport.style.transform = `translate(0, ${-layoutViewport.getBoundingClientRect().top}px)`;
+        }
+      });
+    };
+    window.visualViewport.addEventListener("scroll", viewportHandler);
+    window.visualViewport.addEventListener("resize", viewportHandler);
+  }
+};
+
+export const setPadding = (vditor: IVditor) => {
+  const minPadding = window.innerWidth <= Constants.MOBILE_WIDTH ? 10 : 35;
+  if (vditor.wysiwyg.element.parentElement.style.display !== "none") {
+    const padding = (vditor.wysiwyg.element.parentElement.clientWidth
+      - vditor.options.preview.maxWidth) / 2;
+    vditor.wysiwyg.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
+  }
+
+  if (vditor.ir.element.parentElement.style.display !== "none") {
+    const padding = (vditor.ir.element.parentElement.clientWidth
+      - vditor.options.preview.maxWidth) / 2;
+    vditor.ir.element.style.padding = `10px ${Math.max(minPadding, padding)}px`;
+  }
+
+  if (vditor.preview.element.style.display !== "block") {
+    vditor.toolbar.element.style.paddingLeft = Math.max(5,
+      parseInt(vditor[vditor.currentMode].element.style.paddingLeft || "0", 10) +
+      (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
+  } else {
+    vditor.toolbar.element.style.paddingLeft = (5 +
+      (vditor.options.outline.position === "left" ? vditor.outline.element.offsetWidth : 0)) + "px";
+  }
+};
+
+export const setTypewriterPosition = (vditor: IVditor) => {
+  if (!vditor.options.typewriterMode) {
+    return;
+  }
+  let height: number = window.innerHeight;
+  if (typeof vditor.options.height === "number") {
+    height = vditor.options.height;
+    if (typeof vditor.options.minHeight === "number") {
+      height = Math.max(height, vditor.options.minHeight);
+    }
+    height = Math.min(window.innerHeight, height);
+  } else {
+    height = vditor.element.clientHeight;
+  }
+  if (vditor.element.classList.contains("vditor--fullscreen")) {
+    height = window.innerHeight;
+  }
+  // 由于 Firefox padding-bottom bug，只能使用 :after
+  vditor[vditor.currentMode].element.style.setProperty("--editor-bottom",
+    ((height - vditor.toolbar.element.offsetHeight) / 2) + "px");
+};
+
+let resizeCb: () => void;
+
+export function UIUnbindListener() {
+  window.removeEventListener("resize", resizeCb);
+}
+
+const afterRender = (vditor: IVditor) => {
+  setTypewriterPosition(vditor);
+  UIUnbindListener();
+  window.addEventListener("resize", resizeCb = () => {
+    setPadding(vditor);
+    setTypewriterPosition(vditor);
+  });
+
+  // set default value
+  let initValue = accessLocalStorage() && localStorage.getItem(vditor.options.cache.id);
+  if (!vditor.options.cache.enable || !initValue) {
+    if (vditor.options.value) {
+      initValue = vditor.options.value;
+    } else if (vditor.originalInnerHTML) {
+      initValue = vditor.lute.HTML2Md(vditor.originalInnerHTML);
+    } else if (!vditor.options.cache.enable) {
+      initValue = "";
+    }
+  }
+  return initValue || "";
+};

package/src/ts/ui/setCodeTheme.ts

@@ -0,0 +1,16 @@
+import {Constants} from "../constants";
+import {addStyle} from "../util/addStyle";
+
+export const setCodeTheme = (codeTheme: string, cdn = Constants.CDN) => {
+    if (!Constants.CODE_THEME.includes(codeTheme)) {
+        codeTheme = "github";
+    }
+    const vditorHljsStyle = document.getElementById("vditorHljsStyle") as HTMLLinkElement;
+    const href = `${cdn}/dist/js/highlight.js/styles/${codeTheme}.min.css`;
+    if (!vditorHljsStyle) {
+        addStyle(href, "vditorHljsStyle");
+    } else if (vditorHljsStyle.getAttribute('href') !== href) {
+        vditorHljsStyle.remove();
+        addStyle(href, "vditorHljsStyle");
+    }
+};

package/src/ts/ui/setContentTheme.ts

@@ -0,0 +1,15 @@
+import {addStyle} from "../util/addStyle";
+
+export const setContentTheme = (contentTheme: string, path: string) => {
+    if (!contentTheme || !path) {
+        return;
+    }
+    const vditorContentTheme = document.getElementById("vditorContentTheme") as HTMLLinkElement;
+    const cssPath = `${path}/${contentTheme}.css`;
+    if (!vditorContentTheme) {
+        addStyle(cssPath, "vditorContentTheme");
+    } else if (vditorContentTheme.getAttribute("href") !== cssPath) {
+        vditorContentTheme.remove();
+        addStyle(cssPath, "vditorContentTheme");
+    }
+};

package/src/ts/ui/setPreviewMode.ts

@@ -0,0 +1,31 @@
+import {removeCurrentToolbar} from "../toolbar/setToolbar";
+import {setCurrentToolbar} from "../toolbar/setToolbar";
+
+export const setPreviewMode = (mode: "both" | "editor", vditor: IVditor) => {
+    if (vditor.options.preview.mode === mode) {
+        return;
+    }
+    vditor.options.preview.mode = mode;
+
+    switch (mode) {
+        case "both":
+            vditor.sv.element.style.display = "block";
+            vditor.preview.element.style.display = "block";
+            vditor.preview.render(vditor);
+
+            setCurrentToolbar(vditor.toolbar.elements, ["both"]);
+            break;
+        case "editor":
+            vditor.sv.element.style.display = "block";
+            vditor.preview.element.style.display = "none";
+
+            removeCurrentToolbar(vditor.toolbar.elements, ["both"]);
+            break;
+        default:
+            break;
+    }
+
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
+    }
+};

package/src/ts/ui/setTheme.ts

@@ -0,0 +1,7 @@
+export const setTheme = (vditor: IVditor) => {
+    if (vditor.options.theme === "dark") {
+        vditor.element.classList.add("vditor--dark");
+    } else {
+        vditor.element.classList.remove("vditor--dark");
+    }
+};

package/src/ts/undo/index.ts

@@ -0,0 +1,270 @@
+import * as DiffMatchPatch from "diff-match-patch";
+import {disableToolbar, enableToolbar, hidePanel} from "../toolbar/setToolbar";
+import {isFirefox, isSafari} from "../util/compatibility";
+import {scrollCenter} from "../util/editorCommonEvent";
+import {execAfterRender} from "../util/fixBrowserBehavior";
+import {highlightToolbar} from "../util/highlightToolbar";
+import {processCodeRender} from "../util/processCode";
+import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {renderToc} from "../util/toc";
+
+interface IUndo {
+    hasUndo: boolean;
+    lastText: string;
+    redoStack: DiffMatchPatch.patch_obj[][];
+    undoStack: DiffMatchPatch.patch_obj[][];
+}
+
+class Undo {
+    private stackSize = 50;
+    private dmp: any;
+    private wysiwyg: IUndo;
+    private ir: IUndo;
+    private sv: IUndo;
+
+    constructor() {
+        this.resetStack();
+        // @ts-ignore
+        this.dmp = new DiffMatchPatch();
+    }
+
+    public clearStack(vditor: IVditor) {
+        this.resetStack();
+        this.resetIcon(vditor);
+    }
+
+    public resetIcon(vditor: IVditor) {
+        if (!vditor.toolbar) {
+            return;
+        }
+
+        if (this[vditor.currentMode].undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+
+        if (this[vditor.currentMode].redoStack.length !== 0) {
+            enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
+    }
+
+    public undo(vditor: IVditor) {
+        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        if (this[vditor.currentMode].undoStack.length < 2) {
+            return;
+        }
+        const state = this[vditor.currentMode].undoStack.pop();
+        if (!state) {
+            return;
+        }
+        this[vditor.currentMode].redoStack.push(state);
+        this.renderDiff(state, vditor);
+        this[vditor.currentMode].hasUndo = true;
+        // undo 操作后，需要关闭 hint
+        hidePanel(vditor, ["hint"]);
+    }
+
+    public redo(vditor: IVditor) {
+        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        const state = this[vditor.currentMode].redoStack.pop();
+        if (!state) {
+            return;
+        }
+        this[vditor.currentMode].undoStack.push(state);
+        this.renderDiff(state, vditor, true);
+    }
+
+    public recordFirstPosition(vditor: IVditor, event: KeyboardEvent) {
+        if (getSelection().rangeCount === 0) {
+            return;
+        }
+        if (this[vditor.currentMode].undoStack.length !== 1 || this[vditor.currentMode].undoStack[0].length === 0 ||
+            this[vditor.currentMode].redoStack.length > 0) {
+            return;
+        }
+        if (isFirefox() && event.key === "Backspace") {
+            // Firefox 第一次删除无效
+            return;
+        }
+        if (isSafari()) {
+            // Safari keydown 在 input 之后，不需要重复记录历史
+            return;
+        }
+        const text = this.addCaret(vditor);
+        if (text.replace("<wbr>", "").replace(" vditor-ir__node--expand", "")
+            !== this[vditor.currentMode].undoStack[0][0].diffs[0][1].replace("<wbr>", "")) {
+            // 当还不没有存入 undo 栈时，按下 ctrl 后会覆盖 lastText
+            return;
+        }
+        this[vditor.currentMode].undoStack[0][0].diffs[0][1] = text;
+        this[vditor.currentMode].lastText = text;
+        // 不能添加 setSelectionFocus(cloneRange); 否则 windows chrome 首次输入会烂
+    }
+
+    public addToUndoStack(vditor: IVditor) {
+        // afterRenderEvent.ts 已经 debounce
+        const text = this.addCaret(vditor, true);
+        const diff = this.dmp.diff_main(text, this[vditor.currentMode].lastText, true);
+        const patchList = this.dmp.patch_make(text, this[vditor.currentMode].lastText, diff);
+        if (patchList.length === 0 && this[vditor.currentMode].undoStack.length > 0) {
+            return;
+        }
+        this[vditor.currentMode].lastText = text;
+        this[vditor.currentMode].undoStack.push(patchList);
+        if (this[vditor.currentMode].undoStack.length > this.stackSize) {
+            this[vditor.currentMode].undoStack.shift();
+        }
+        if (this[vditor.currentMode].hasUndo) {
+            this[vditor.currentMode].redoStack = [];
+            this[vditor.currentMode].hasUndo = false;
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
+
+        if (this[vditor.currentMode].undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+    }
+
+    private renderDiff(state: DiffMatchPatch.patch_obj[], vditor: IVditor, isRedo: boolean = false) {
+        let text;
+        if (isRedo) {
+            const redoPatchList = this.dmp.patch_deepCopy(state).reverse();
+            redoPatchList.forEach((patch: DiffMatchPatch.patch_obj) => {
+                patch.diffs.forEach((diff: any) => {
+                    diff[0] = -diff[0];
+                });
+            });
+            text = this.dmp.patch_apply(redoPatchList, this[vditor.currentMode].lastText)[0];
+        } else {
+            text = this.dmp.patch_apply(state, this[vditor.currentMode].lastText)[0];
+        }
+
+        this[vditor.currentMode].lastText = text;
+        vditor[vditor.currentMode].element.innerHTML = text;
+        if (vditor.currentMode !== "sv") {
+            vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview`)
+                .forEach((blockElement: HTMLElement) => {
+                    if (blockElement.parentElement.querySelector(".language-echarts")) {
+                        if (vditor.currentMode === "ir") {
+                            blockElement.parentElement.outerHTML = vditor.lute.SpinVditorIRDOM(blockElement.parentElement.outerHTML);
+                        } else {
+                            blockElement.parentElement.outerHTML = vditor.lute.SpinVditorDOM(blockElement.parentElement.outerHTML);
+                        }
+                    }
+                });
+            vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='2']`)
+                .forEach((blockElement: HTMLElement) => {
+                    processCodeRender(blockElement, vditor);
+                });
+        }
+
+        if (!vditor[vditor.currentMode].element.querySelector("wbr")) {
+            // Safari 第一次输入没有光标，需手动定位到结尾
+            const range = getSelection().getRangeAt(0);
+            range.setEndBefore(vditor[vditor.currentMode].element);
+            range.collapse(false);
+        } else {
+            setRangeByWbr(
+                vditor[vditor.currentMode].element, vditor[vditor.currentMode].element.ownerDocument.createRange());
+            scrollCenter(vditor);
+        }
+
+        renderToc(vditor);
+
+        execAfterRender(vditor, {
+            enableAddUndoStack: false,
+            enableHint: false,
+            enableInput: true,
+        });
+        highlightToolbar(vditor);
+
+        vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='2']`)
+            .forEach((item: HTMLElement) => {
+                processCodeRender(item, vditor);
+            });
+
+        if (this[vditor.currentMode].undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+
+        if (this[vditor.currentMode].redoStack.length !== 0) {
+            enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
+    }
+
+    private resetStack() {
+        this.ir = {
+            hasUndo: false,
+            lastText: "",
+            redoStack: [],
+            undoStack: [],
+        };
+        this.sv = {
+            hasUndo: false,
+            lastText: "",
+            redoStack: [],
+            undoStack: [],
+        };
+        this.wysiwyg = {
+            hasUndo: false,
+            lastText: "",
+            redoStack: [],
+            undoStack: [],
+        };
+    }
+
+    private addCaret(vditor: IVditor, setFocus = false) {
+        let cloneRange: Range;
+        if (getSelection().rangeCount !== 0 && !vditor[vditor.currentMode].element.querySelector("wbr")) {
+            const range = getSelection().getRangeAt(0);
+            if (vditor[vditor.currentMode].element.contains(range.startContainer)) {
+                cloneRange = range.cloneRange();
+                const wbrElement = document.createElement("span");
+                wbrElement.className = "vditor-wbr";
+                range.insertNode(wbrElement);
+            }
+        }
+        // 移除数学公式、echart 渲染 https://github.com/Vanessa219/vditor/issues/1738
+        const cloneElement = vditor[vditor.currentMode].element.cloneNode(true) as HTMLElement;
+        cloneElement.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='1']`)
+            .forEach((item: HTMLElement) => {
+                if (!item.firstElementChild) {
+                    return;
+                }
+                if (item.firstElementChild.classList.contains("language-echarts") ||
+                    item.firstElementChild.classList.contains("language-plantuml") ||
+                    item.firstElementChild.classList.contains("language-mindmap")) {
+                    item.firstElementChild.removeAttribute("_echarts_instance_");
+                    item.firstElementChild.removeAttribute("data-processed");
+                    item.firstElementChild.innerHTML = item.previousElementSibling.firstElementChild.innerHTML;
+                    item.setAttribute("data-render", "2");
+                } else if (item.firstElementChild.classList.contains("language-math")) {
+                    item.setAttribute("data-render", "2");
+                    item.firstElementChild.textContent = item.firstElementChild.getAttribute("data-math");
+                    item.firstElementChild.removeAttribute("data-math");
+                }
+            });
+        const text = cloneElement.innerHTML;
+        vditor[vditor.currentMode].element.querySelectorAll(".vditor-wbr").forEach((item) => {
+            item.remove();
+            // 使用 item.outerHTML = "" 会产生 https://github.com/Vanessa219/vditor/pull/686;
+        });
+        if (setFocus && cloneRange) {
+            setSelectionFocus(cloneRange);
+        }
+        return text.replace('<span class="vditor-wbr"></span>', "<wbr>");
+    }
+}
+
+export {Undo};

package/src/ts/upload/getElement.ts

@@ -0,0 +1,10 @@
+export const getElement = (vditor: IVditor) => {
+    switch (vditor.currentMode) {
+        case "ir":
+            return vditor.ir.element;
+        case "wysiwyg":
+            return vditor.wysiwyg.element;
+        case "sv":
+            return vditor.sv.element;
+    }
+};