vditor 3.8.7

package/src/ts/toolbar/Outline.ts

@@ -0,0 +1,21 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Outline extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        if (vditor.options.outline) {
+            this.element.firstElementChild.classList.add("vditor-menu--current");
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            const btnElement = vditor.toolbar.elements.outline.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.options.outline.enable = !this.element.firstElementChild.classList.contains("vditor-menu--current");
+            vditor.outline.toggle(vditor, vditor.options.outline.enable);
+        });
+    }
+}

package/src/ts/toolbar/Preview.ts

@@ -0,0 +1,55 @@
+import {Constants} from "../constants";
+import {setPadding} from "../ui/initUI";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar, enableToolbar, hidePanel} from "./setToolbar";
+
+export class Preview extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            const btnElement = this.element.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+
+            const toolbars = Constants.EDIT_TOOLBARS.concat(["both", "edit-mode", "devtools"]);
+            if (btnElement.classList.contains("vditor-menu--current")) {
+                btnElement.classList.remove("vditor-menu--current");
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.style.display = "block";
+                    if (vditor.options.preview.mode === "both") {
+                        vditor.preview.element.style.display = "block";
+                    } else {
+                        vditor.preview.element.style.display = "none";
+                    }
+                } else {
+                    vditor[vditor.currentMode].element.parentElement.style.display = "block";
+                    vditor.preview.element.style.display = "none";
+                }
+                enableToolbar(vditor.toolbar.elements, toolbars);
+                vditor.outline.render(vditor);
+            } else {
+                disableToolbar(vditor.toolbar.elements, toolbars);
+                vditor.preview.element.style.display = "block";
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.style.display = "none";
+                } else {
+                    vditor[vditor.currentMode].element.parentElement.style.display = "none";
+                }
+                vditor.preview.render(vditor);
+                btnElement.classList.add("vditor-menu--current");
+                hidePanel(vditor, ["subToolbar", "hint", "popover"]);
+                setTimeout(() => {
+                    vditor.outline.render(vditor);
+                }, vditor.options.preview.delay + 10);
+            }
+            setPadding(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Record.ts

@@ -0,0 +1,60 @@
+import {Constants} from "../constants";
+import {uploadFiles} from "../upload/index";
+import {getEventName} from "../util/compatibility";
+import {RecordMedia} from "../util/RecordMedia";
+import {MenuItem} from "./MenuItem";
+
+export class Record extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        let mediaRecorder: RecordMedia;
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            const editorElement = vditor[vditor.currentMode].element;
+            if (!mediaRecorder) {
+                navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
+                    mediaRecorder = new RecordMedia(mediaStream);
+                    mediaRecorder.recorder.onaudioprocess = (e: AudioProcessingEvent) => {
+                        // Do nothing if not recording:
+                        if (!mediaRecorder.isRecording) {
+                            return;
+                        }
+
+                        // Copy the data from the input buffers;
+                        const left = e.inputBuffer.getChannelData(0);
+                        const right = e.inputBuffer.getChannelData(1);
+                        mediaRecorder.cloneChannelData(left, right);
+                    };
+                    mediaRecorder.startRecordingNewWavFile();
+                    vditor.tip.show(window.VditorI18n.recording);
+                    editorElement.setAttribute("contenteditable", "false");
+                    this.element.children[0].classList.add("vditor-menu--current");
+                }).catch(() => {
+                    vditor.tip.show(window.VditorI18n["record-tip"]);
+                });
+                return;
+            }
+
+            if (mediaRecorder.isRecording) {
+                mediaRecorder.stopRecording();
+                vditor.tip.hide();
+                const file: File = new File([mediaRecorder.buildWavFileBlob()],
+                    `record${(new Date()).getTime()}.wav`, {type: "video/webm"});
+                uploadFiles(vditor, [file]);
+                this.element.children[0].classList.remove("vditor-menu--current");
+            } else {
+                vditor.tip.show(window.VditorI18n.recording);
+                editorElement.setAttribute("contenteditable", "false");
+                mediaRecorder.startRecordingNewWavFile();
+                this.element.children[0].classList.add("vditor-menu--current");
+            }
+        });
+    }
+}

package/src/ts/toolbar/Redo.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar} from "./setToolbar";
+
+export class Redo extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        disableToolbar({redo: this.element}, ["redo"]);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.undo.redo(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Undo.ts

@@ -0,0 +1,18 @@
+import {Constants} from "../constants";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+import {disableToolbar} from "./setToolbar";
+
+export class Undo extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        disableToolbar({undo: this.element}, ["undo"]);
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            vditor.undo.undo(vditor);
+        });
+    }
+}

package/src/ts/toolbar/Upload.ts

@@ -0,0 +1,41 @@
+import {Constants} from "../constants";
+import {uploadFiles} from "../upload";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Upload extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        let inputHTML = '<input type="file"';
+        if (vditor.options.upload.multiple) {
+            inputHTML += ' multiple="multiple"';
+        }
+        if (vditor.options.upload.accept) {
+            inputHTML += ` accept="${vditor.options.upload.accept}"`;
+        }
+        this.element.children[0].innerHTML = `${(menuItem.icon || '<svg><use xlink:href="#vditor-icon-upload"></use></svg>')}${inputHTML}>`;
+        this._bindEvent(vditor);
+    }
+
+    public _bindEvent(vditor: IVditor) {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                event.stopPropagation();
+                event.preventDefault();
+                return;
+            }
+        });
+        this.element.querySelector("input").addEventListener("change",
+            (event: InputEvent & { target: HTMLInputElement }) => {
+                if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    return;
+                }
+                if (event.target.files.length === 0) {
+                    return;
+                }
+                uploadFiles(vditor, event.target.files, event.target);
+            });
+    }
+}

package/src/ts/toolbar/index.ts

@@ -0,0 +1,175 @@
+import {getEventName} from "../util/compatibility";
+import {Both} from "./Both";
+import {Br} from "./Br";
+import {CodeTheme} from "./CodeTheme";
+import {ContentTheme} from "./ContentTheme";
+import {Counter} from "./Counter";
+import {Custom} from "./Custom";
+import {Devtools} from "./Devtools";
+import {Divider} from "./Divider";
+import {EditMode} from "./EditMode";
+import {Emoji} from "./Emoji";
+import {Export} from "./Export";
+import {Fullscreen} from "./Fullscreen";
+import {Headings} from "./Headings";
+import {Help} from "./Help";
+import {Indent} from "./Indent";
+import {Info} from "./Info";
+import {InsertAfter} from "./InsertAfter";
+import {InsertBefore} from "./InsertBefore";
+import {MenuItem} from "./MenuItem";
+import {Outdent} from "./Outdent";
+import {Outline} from "./Outline";
+import {Preview} from "./Preview";
+import {Record} from "./Record";
+import {Redo} from "./Redo";
+import {toggleSubMenu} from "./setToolbar";
+import {Undo} from "./Undo";
+import {Upload} from "./Upload";
+
+export class Toolbar {
+    public elements: { [key: string]: HTMLElement };
+    public element: HTMLElement;
+
+    constructor(vditor: IVditor) {
+        const options = vditor.options;
+        this.elements = {};
+
+        this.element = document.createElement("div");
+        this.element.className = "vditor-toolbar";
+
+        options.toolbar.forEach((menuItem: IMenuItem, i: number) => {
+            const itemElement = this.genItem(vditor, menuItem, i);
+            this.element.appendChild(itemElement);
+            if (menuItem.toolbar) {
+                const panelElement = document.createElement("div");
+                panelElement.className = "vditor-hint vditor-panel--arrow";
+                panelElement.addEventListener(getEventName(), (event) => {
+                    panelElement.style.display = "none";
+                });
+                menuItem.toolbar.forEach((subMenuItem: IMenuItem, subI: number) => {
+                    subMenuItem.level = 2;
+                    panelElement.appendChild(this.genItem(vditor, subMenuItem, i + subI));
+                });
+                itemElement.appendChild(panelElement);
+                toggleSubMenu(vditor, panelElement, itemElement.children[0], 2);
+            }
+        });
+
+        if (vditor.options.toolbarConfig.hide) {
+            this.element.classList.add("vditor-toolbar--hide");
+        }
+        if (vditor.options.toolbarConfig.pin) {
+            this.element.classList.add("vditor-toolbar--pin");
+        }
+
+        if (vditor.options.counter.enable) {
+            vditor.counter = new Counter(vditor);
+            this.element.appendChild(vditor.counter.element);
+        }
+    }
+
+    private genItem(vditor: IVditor, menuItem: IMenuItem, index: number) {
+        let menuItemObj;
+        switch (menuItem.name) {
+            case "bold":
+            case "italic":
+            case "more":
+            case "strike":
+            case "line":
+            case "quote":
+            case "list":
+            case "ordered-list":
+            case "check":
+            case "code":
+            case "inline-code":
+            case "link":
+            case "table":
+                menuItemObj = new MenuItem(vditor, menuItem);
+                break;
+            case "emoji":
+                menuItemObj = new Emoji(vditor, menuItem);
+                break;
+            case "headings":
+                menuItemObj = new Headings(vditor, menuItem);
+                break;
+            case "|":
+                menuItemObj = new Divider();
+                break;
+            case "br":
+                menuItemObj = new Br();
+                break;
+            case "undo":
+                menuItemObj = new Undo(vditor, menuItem);
+                break;
+            case "redo":
+                menuItemObj = new Redo(vditor, menuItem);
+                break;
+            case "help":
+                menuItemObj = new Help(vditor, menuItem);
+                break;
+            case "both":
+                menuItemObj = new Both(vditor, menuItem);
+                break;
+            case "preview":
+                menuItemObj = new Preview(vditor, menuItem);
+                break;
+            case "fullscreen":
+                menuItemObj = new Fullscreen(vditor, menuItem);
+                break;
+            case "upload":
+                menuItemObj = new Upload(vditor, menuItem);
+                break;
+            case "record":
+                menuItemObj = new Record(vditor, menuItem);
+                break;
+            case "info":
+                menuItemObj = new Info(vditor, menuItem);
+                break;
+            case "edit-mode":
+                menuItemObj = new EditMode(vditor, menuItem);
+                break;
+            case "devtools":
+                menuItemObj = new Devtools(vditor, menuItem);
+                break;
+            case "outdent":
+                menuItemObj = new Outdent(vditor, menuItem);
+                break;
+            case "indent":
+                menuItemObj = new Indent(vditor, menuItem);
+                break;
+            case "outline":
+                menuItemObj = new Outline(vditor, menuItem);
+                break;
+            case "insert-after":
+                menuItemObj = new InsertAfter(vditor, menuItem);
+                break;
+            case "insert-before":
+                menuItemObj = new InsertBefore(vditor, menuItem);
+                break;
+            case "code-theme":
+                menuItemObj = new CodeTheme(vditor, menuItem);
+                break;
+            case "content-theme":
+                menuItemObj = new ContentTheme(vditor, menuItem);
+                break;
+            case "export":
+                menuItemObj = new Export(vditor, menuItem);
+                break;
+            default:
+                menuItemObj = new Custom(vditor, menuItem);
+                break;
+        }
+
+        if (!menuItemObj) {
+            return;
+        }
+        let key = menuItem.name;
+        if (key === "br" || key === "|") {
+            key = key + index;
+        }
+
+        this.elements[key] = menuItemObj.element;
+        return menuItemObj.element;
+    }
+}

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,164 @@
+import {Constants} from "../constants";
+import {setEditMode} from "../toolbar/EditMode";
+import {accessLocalStorage} from "../util/compatibility";
+import {setContentTheme} from "./setContentTheme";
+import {setTheme} from "./setTheme";
+
+declare global {
+    interface Window {
+        visualViewport: HTMLElement;
+    }
+}
+
+export const initUI = (vditor: IVditor) => {
+    vditor.element.innerHTML = "";
+    vditor.element.classList.add("vditor");
+    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";
+    }
+    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);
+
+    if (vditor.toolbar.elements.export) {
+        // for export pdf
+        vditor.element.insertAdjacentHTML("beforeend",
+            '<iframe style="width: 100%;height: 0;border: 0"></iframe>');
+    }
+
+    setEditMode(vditor, vditor.options.mode, afterRender(vditor, contentElement));
+
+    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.currentMode === "sv") {
+        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";
+    }
+};
+
+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);
+    }
+    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");
+};
+
+const afterRender = (vditor: IVditor, contentElement: HTMLElement) => {
+    setTypewriterPosition(vditor);
+
+    window.addEventListener("resize", () => {
+        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 || "";
+};