@yltrcc/vditor 0.0.1

package/src/ts/sv/inputEvent.ts

@@ -0,0 +1,188 @@
+import {scrollCenter} from "../util/editorCommonEvent";
+import {hasClosestByAttribute} from "../util/hasClosest";
+import {getSelectPosition, setRangeByWbr} from "../util/selection";
+import {getSideByType, processAfterRender, processSpinVditorSVDOM} from "./process";
+import {combineFootnote} from "./combineFootnote";
+
+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();
+        }
+        // 添加链接引用
+        let footnotes = ""
+
+        vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item, index) => {
+            if (item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
+                footnotes += item.parentElement.textContent + "\n";
+                item.parentElement.remove();
+            }
+        });
+
+        // 添加脚注到文章头，便于lute处理
+        vditor.sv.element.querySelectorAll("[data-type='footnotes-link']").forEach((item, index) => {
+            if (item && !(blockElement as HTMLElement).isEqualNode(item.parentElement)) {
+                footnotes += item.parentElement.textContent + "\n";
+                item.parentElement.remove();
+            }
+        });
+        html = footnotes + html;
+    }
+    html = processSpinVditorSVDOM(html, vditor);
+    if (isSVElement) {
+        blockElement.innerHTML = html;
+    } else {
+        blockElement.outerHTML = html;
+    }
+
+    vditor.sv.element.querySelectorAll("[data-type='link-ref-defs-block']").forEach((item) => {
+        vditor.sv.element.insertAdjacentElement("beforeend", item.parentElement)
+    })
+
+    // 合并脚注
+    combineFootnote(vditor.sv.element, (root: HTMLElement) => {
+        vditor.sv.element.insertAdjacentElement("beforeend", root)
+    })
+
+    setRangeByWbr(vditor.sv.element, range);
+
+    scrollCenter(vditor);
+
+    processAfterRender(vditor, {
+        enableAddUndoStack: true,
+        enableHint: true,
+        enableInput: true,
+    });
+};

package/src/ts/sv/process.ts

@@ -0,0 +1,215 @@
+import {getMarkdown} from "../markdown/getMarkdown";
+import {accessLocalStorage} from "../util/compatibility";
+import {scrollCenter} from "../util/editorCommonEvent";
+import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {log} from "../util/log";
+import {getEditorRange, setRangeByWbr} from "../util/selection";
+import {inputEvent} from "./inputEvent";
+import {combineFootnote} from "./combineFootnote";
+
+
+export const processPaste = (vditor: IVditor, text: string) => {
+    const range = getEditorRange(vditor);
+    range.extractContents();
+    range.insertNode(document.createTextNode(Lute.Caret));
+    range.insertNode(document.createTextNode(text));
+    let blockElement = hasClosestByAttribute(range.startContainer, "data-block", "0");
+    if (!blockElement) {
+        blockElement = vditor.sv.element;
+    }
+    let spinHTML = vditor.lute.SpinVditorSVDOM(blockElement.textContent)
+    spinHTML = "<div data-block='0'>" +
+        spinHTML.replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+        "</div>";
+    if (blockElement.isEqualNode(vditor.sv.element)) {
+        blockElement.innerHTML = spinHTML;
+    } else {
+        blockElement.outerHTML = spinHTML;
+    }
+    combineFootnote(vditor.sv.element)
+    setRangeByWbr(vditor.sv.element, range);
+
+    scrollCenter(vditor);
+};
+
+export const getSideByType = (spanNode: Node, type: string, isPrevious = true) => {
+    let sideElement = spanNode as Element;
+    if (sideElement.nodeType === 3) {
+        sideElement = sideElement.parentElement;
+    }
+    while (sideElement) {
+        if (sideElement.getAttribute("data-type") === type) {
+            return sideElement;
+        }
+        if (isPrevious) {
+            sideElement = sideElement.previousElementSibling;
+        } else {
+            sideElement = sideElement.nextElementSibling;
+        }
+    }
+    return false;
+};
+
+export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
+    log("SpinVditorSVDOM", html, "argument", vditor.options.debugger);
+    const spinHTML = vditor.lute.SpinVditorSVDOM(html)
+    html = "<div data-block='0'>" +
+        spinHTML.replace(/<span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span><span data-type="newline"><br \/><span style="display: none">\n<\/span><\/span></g, '<span data-type="newline"><br /><span style="display: none">\n</span></span><span data-type="newline"><br /><span style="display: none">\n</span></span></div><div data-block="0"><') +
+        "</div>";
+    log("SpinVditorSVDOM", html, "result", vditor.options.debugger);
+    return html;
+};
+
+export const processPreviousMarkers = (spanElement: HTMLElement) => {
+    const spanType = spanElement.getAttribute("data-type");
+    let previousElement = spanElement.previousElementSibling;
+    // 有内容的子列表/标题，在其 marker 后换行
+    let markerText = (spanType && spanType !== "text" && spanType !== "table" && spanType !== "heading-marker" &&
+        spanType !== "newline" && spanType !== "yaml-front-matter-open-marker" && spanType !== "yaml-front-matter-close-marker"
+        && spanType !== "code-block-info" && spanType !== "code-block-close-marker" && spanType !== "code-block-open-marker") ?
+        spanElement.textContent : "";
+    let hasNL = false;
+    if (spanType === "newline") {
+        hasNL = true;
+    }
+    while (previousElement && !hasNL) {
+        const previousType = previousElement.getAttribute("data-type");
+        if (previousType === "li-marker" || previousType === "blockquote-marker" || previousType === "task-marker" ||
+            previousType === "padding") {
+            const previousText = previousElement.textContent;
+            if (previousType === "li-marker" &&
+                (spanType === "code-block-open-marker" || spanType === "code-block-info")) {
+                // https://github.com/Vanessa219/vditor/issues/586
+                markerText = previousText.replace(/\S/g, " ") + markerText;
+            } else if (spanType === "code-block-close-marker" &&
+                previousElement.nextElementSibling.isSameNode(spanElement)) {
+                // https://github.com/Vanessa219/vditor/issues/594
+                const openMarker = getSideByType(spanElement, "code-block-open-marker");
+                if (openMarker && openMarker.previousElementSibling) {
+                    previousElement = openMarker.previousElementSibling;
+                    markerText = previousText + markerText;
+                }
+            } else {
+                markerText = previousText + markerText;
+            }
+        } else if (previousType === "newline") {
+            hasNL = true;
+        }
+        previousElement = previousElement.previousElementSibling;
+    }
+    return markerText;
+};
+
+export const processAfterRender = (vditor: IVditor, options = {
+    enableAddUndoStack: true,
+    enableHint: false,
+    enableInput: true,
+}) => {
+    if (options.enableHint) {
+        vditor.hint.render(vditor);
+    }
+
+    vditor.preview.render(vditor);
+
+    const text = getMarkdown(vditor);
+    if (typeof vditor.options.input === "function" && options.enableInput) {
+        vditor.options.input(text);
+    }
+
+    if (vditor.options.counter.enable) {
+        vditor.counter.render(vditor, text);
+    }
+
+    if (vditor.options.cache.enable && accessLocalStorage()) {
+        localStorage.setItem(vditor.options.cache.id, text);
+        if (vditor.options.cache.after) {
+            vditor.options.cache.after(text);
+        }
+    }
+
+    if (vditor.devtools) {
+        vditor.devtools.renderEchart(vditor);
+    }
+
+    clearTimeout(vditor.sv.processTimeoutId);
+    vditor.sv.processTimeoutId = window.setTimeout(() => {
+        if (options.enableAddUndoStack && !vditor.sv.composingLock) {
+            vditor.undo.addToUndoStack(vditor);
+        }
+    }, vditor.options.undoDelay);
+};
+
+export const processHeading = (vditor: IVditor, value: string) => {
+    const range = getEditorRange(vditor);
+    const headingElement = hasClosestByTag(range.startContainer, "SPAN");
+    if (headingElement && headingElement.textContent.trim() !== "") {
+        value = "\n" + value;
+    }
+    range.collapse(true);
+    document.execCommand("insertHTML", false, value);
+};
+
+export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: string, suffix: string) => {
+    const range = getEditorRange(vditor);
+    const commandName = actionBtn.getAttribute("data-type");
+    // 添加
+    if (vditor.sv.element.childNodes.length === 0) {
+        vditor.sv.element.innerHTML = `<span data-type="p" data-block="0"><span data-type="text"><wbr></span></span><span data-type="newline"><br><span style="display: none">
+</span></span>`;
+        setRangeByWbr(vditor.sv.element, range);
+    }
+    const blockElement = hasClosestBlock(range.startContainer);
+    const spanElement = hasClosestByTag(range.startContainer, "SPAN");
+    if (!blockElement) {
+        return;
+    }
+    if (commandName === "link") {
+        let html;
+        if (range.toString() === "") {
+            html = `${prefix}${Lute.Caret}${suffix}`;
+        } else {
+            html = `${prefix}${range.toString()}${suffix.replace(")", Lute.Caret + ")")}`;
+        }
+        document.execCommand("insertHTML", false, html);
+        return;
+    } else if (commandName === "italic" || commandName === "bold" || commandName === "strike" ||
+        commandName === "inline-code" || commandName === "code" || commandName === "table" || commandName === "line") {
+        let html;
+        // https://github.com/Vanessa219/vditor/issues/563 代码块不需要后面的 ```
+        if (range.toString() === "") {
+            html = `${prefix}${Lute.Caret}${commandName === "code" ? "" : suffix}`;
+        } else {
+            html = `${prefix}${range.toString()}${Lute.Caret}${commandName === "code" ? "" : suffix}`;
+        }
+        if (commandName === "table" || (commandName === "code" && spanElement && spanElement.textContent !== "")) {
+            html = "\n\n" + html;
+        } else if (commandName === "line") {
+            html = `\n\n${prefix}\n${Lute.Caret}`;
+        }
+        document.execCommand("insertHTML", false, html);
+        return;
+    } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list" ||
+        commandName === "quote") {
+        if (spanElement) {
+            let marker = "* ";
+            if (commandName === "check") {
+                marker = "* [ ] ";
+            } else if (commandName === "ordered-list") {
+                marker = "1. ";
+            } else if (commandName === "quote") {
+                marker = "> ";
+            }
+            const newLine = getSideByType(spanElement, "newline");
+            if (newLine) {
+                newLine.insertAdjacentText("afterend", marker);
+            } else {
+                blockElement.insertAdjacentText("afterbegin", marker);
+            }
+            inputEvent(vditor);
+            return;
+        }
+    }
+    setRangeByWbr(vditor.sv.element, range);
+    processAfterRender(vditor);
+};

package/src/ts/sv/processKeydown.ts

@@ -0,0 +1,202 @@
+import {isCtrl} from "../util/compatibility";
+import {fixTab} from "../util/fixBrowserBehavior";
+import {hasClosestByAttribute} from "../util/hasClosest";
+import {hasClosestByTag} from "../util/hasClosestByHeadings";
+import {getEditorRange, getSelectPosition} from "../util/selection";
+import {inputEvent} from "./inputEvent";
+import {processAfterRender, processPreviousMarkers} from "./process";
+
+export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
+    vditor.sv.composingLock = event.isComposing;
+    if (event.isComposing) {
+        return false;
+    }
+
+    if (event.key.indexOf("Arrow") === -1 && event.key !== "Meta" && event.key !== "Control" && event.key !== "Alt" &&
+        event.key !== "Shift" && event.key !== "CapsLock" && event.key !== "Escape" && !/^F\d{1,2}$/.test(event.key)) {
+        vditor.undo.recordFirstPosition(vditor, event);
+    }
+    // 仅处理以下快捷键操作
+    if (event.key !== "Enter" && event.key !== "Tab" && event.key !== "Backspace" && event.key.indexOf("Arrow") === -1
+        && !isCtrl(event) && event.key !== "Escape") {
+        return false;
+    }
+    const range = getEditorRange(vditor);
+    let startContainer = range.startContainer;
+    if (range.startContainer.nodeType !== 3 && (range.startContainer as HTMLElement).tagName === "DIV") {
+        startContainer = range.startContainer.childNodes[range.startOffset - 1];
+    }
+    const textElement = hasClosestByAttribute(startContainer, "data-type", "text");
+
+    // blockquote
+    let blockquoteMarkerElement = hasClosestByAttribute(startContainer, "data-type", "blockquote-marker");
+    if (!blockquoteMarkerElement && range.startOffset === 0 && textElement && textElement.previousElementSibling &&
+        textElement.previousElementSibling.getAttribute("data-type") === "blockquote-marker") {
+        blockquoteMarkerElement = textElement.previousElementSibling as HTMLElement;
+    }
+    // 回车逐个删除 blockquote marker 标记
+    if (blockquoteMarkerElement) {
+        if (event.key === "Enter" && !isCtrl(event) && !event.altKey &&
+            blockquoteMarkerElement.nextElementSibling.textContent.trim() === "" &&
+            getSelectPosition(blockquoteMarkerElement, vditor.sv.element, range).start ===
+            blockquoteMarkerElement.textContent.length) {
+            if (blockquoteMarkerElement.previousElementSibling?.getAttribute("data-type") === "padding") {
+                // 列表中存在多行 BQ 时，标记回车需跳出列表
+                blockquoteMarkerElement.previousElementSibling.setAttribute("data-action", "enter-remove");
+            }
+            blockquoteMarkerElement.remove();
+            processAfterRender(vditor);
+            event.preventDefault();
+            return true;
+        }
+    }
+
+    // list item
+    const listMarkerElement = hasClosestByAttribute(startContainer, "data-type", "li-marker") as HTMLElement;
+    const taskMarkerElement = hasClosestByAttribute(startContainer, "data-type", "task-marker") as HTMLElement;
+    let listLastMarkerElement = listMarkerElement;
+    if (!listLastMarkerElement) {
+        if (taskMarkerElement && taskMarkerElement.nextElementSibling.getAttribute("data-type") !== "task-marker") {
+            listLastMarkerElement = taskMarkerElement;
+        }
+    }
+    if (!listLastMarkerElement && range.startOffset === 0 && textElement && textElement.previousElementSibling &&
+        (textElement.previousElementSibling.getAttribute("data-type") === "li-marker" ||
+            textElement.previousElementSibling.getAttribute("data-type") === "task-marker")) {
+        listLastMarkerElement = textElement.previousElementSibling as HTMLElement;
+    }
+    if (listLastMarkerElement) {
+        const startIndex = getSelectPosition(listLastMarkerElement, vditor.sv.element, range).start;
+        const isTask = listLastMarkerElement.getAttribute("data-type") === "task-marker";
+        let listFirstMarkerElement = listLastMarkerElement;
+        if (isTask) {
+            listFirstMarkerElement = listLastMarkerElement.previousElementSibling.previousElementSibling
+                .previousElementSibling as HTMLElement;
+        }
+        if (startIndex === listLastMarkerElement.textContent.length) {
+            // 回车清空列表标记符
+            if (event.key === "Enter" && !isCtrl(event) && !event.altKey && !event.shiftKey &&
+                listLastMarkerElement.nextElementSibling.textContent.trim() === "") {
+                if (listFirstMarkerElement.previousElementSibling?.getAttribute("data-type") === "padding") {
+                    listFirstMarkerElement.previousElementSibling.remove();
+                    inputEvent(vditor);
+                } else {
+                    if (isTask) {
+                        listFirstMarkerElement.remove();
+                        listLastMarkerElement.previousElementSibling.previousElementSibling.remove();
+                        listLastMarkerElement.previousElementSibling.remove();
+                    }
+                    listLastMarkerElement.nextElementSibling.remove();
+                    listLastMarkerElement.remove();
+                    processAfterRender(vditor);
+                }
+                event.preventDefault();
+                return true;
+            }
+            // 第一个 marker 后 tab 进行缩进
+            if (event.key === "Tab") {
+                if (event.shiftKey) {
+                    if (listFirstMarkerElement.previousElementSibling.getAttribute("data-type") === "padding") {
+                        listFirstMarkerElement.previousElementSibling.remove();
+                    }
+                } else {
+                    listFirstMarkerElement.insertAdjacentHTML("beforebegin",
+                        `<span data-type="padding">${listFirstMarkerElement.textContent.replace(/\S/g, " ")}</span>`);
+                }
+                if (/^\d/.test(listFirstMarkerElement.textContent)) {
+                    listFirstMarkerElement.textContent = listFirstMarkerElement.textContent.replace(/^\d{1,}/, "1");
+                    range.selectNodeContents(listLastMarkerElement.firstChild);
+                    range.collapse(false);
+                }
+                inputEvent(vditor);
+                event.preventDefault();
+                return true;
+            }
+        }
+    }
+
+    // tab
+    if (fixTab(vditor, range, event)) {
+        return true;
+    }
+
+    const blockElement = hasClosestByAttribute(startContainer, "data-block", "0");
+    const spanElement = hasClosestByTag(startContainer, "SPAN");
+    // 回车
+    if (event.key === "Enter" && !isCtrl(event) && !event.altKey && !event.shiftKey && blockElement) {
+        let isFirst = false;
+        const newLineMatch = blockElement.textContent.match(/^\n+/);
+        if (getSelectPosition(blockElement, vditor.sv.element).start <= (newLineMatch ? newLineMatch[0].length : 0)) {
+            // 允许段落开始换行
+            isFirst = true;
+        }
+        let newLineText = "\n";
+        if (spanElement) {
+            if (spanElement.previousElementSibling?.getAttribute("data-action") === "enter-remove") {
+                // https://github.com/Vanessa219/vditor/issues/596
+                spanElement.previousElementSibling.remove();
+                processAfterRender(vditor);
+                event.preventDefault();
+                return true;
+            } else {
+                newLineText += processPreviousMarkers(spanElement);
+            }
+        }
+        range.insertNode(document.createTextNode(newLineText));
+        range.collapse(false);
+        if (blockElement && blockElement.textContent.trim() !== "" && !isFirst) {
+            inputEvent(vditor);
+        } else {
+            processAfterRender(vditor);
+        }
+        event.preventDefault();
+        return true;
+    }
+
+    // 删除后光标前有 newline 的处理
+    if (event.key === "Backspace" && !isCtrl(event) && !event.altKey && !event.shiftKey) {
+        if (spanElement && spanElement.previousElementSibling?.getAttribute("data-type") === "newline" &&
+            getSelectPosition(spanElement, vditor.sv.element, range).start === 1 &&
+            // 飘号的处理需在 inputEvent 中，否则上下飘号对不齐
+            spanElement.getAttribute("data-type").indexOf("code-block-") === -1) {
+            // 光标在每一行的第一个字符后
+            range.setStart(spanElement, 0);
+            range.extractContents();
+            if (spanElement.textContent.trim() !== "") {
+                inputEvent(vditor);
+            } else {
+                processAfterRender(vditor);
+            }
+            event.preventDefault();
+            return true;
+        }
+        // 每一段第一个字符前
+        if (blockElement && getSelectPosition(blockElement, vditor.sv.element, range).start === 0 &&
+            blockElement.previousElementSibling) {
+            range.extractContents();
+            let previousLastElement = blockElement.previousElementSibling.lastElementChild;
+            if (previousLastElement.getAttribute("data-type") === "newline") {
+                previousLastElement.remove();
+                previousLastElement = blockElement.previousElementSibling.lastElementChild;
+            }
+            // 场景：末尾无法删除 [```\ntext\n```\n\n]
+            if (previousLastElement.getAttribute("data-type") !== "newline") {
+                previousLastElement.insertAdjacentHTML("afterend", blockElement.innerHTML);
+                blockElement.remove();
+            }
+            if (blockElement.textContent.trim() !== "" && !blockElement.previousElementSibling?.querySelector('[data-type="code-block-open-marker"]')) {
+                inputEvent(vditor);
+            } else {
+                if (previousLastElement.getAttribute("data-type") !== "newline") {
+                    // https://github.com/Vanessa219/vditor/issues/597
+                    range.selectNodeContents(previousLastElement.lastChild);
+                    range.collapse(false);
+                }
+                processAfterRender(vditor);
+            }
+            event.preventDefault();
+            return true;
+        }
+    }
+    return false;
+};

package/src/ts/tip/index.ts

@@ -0,0 +1,39 @@
+export class Tip {
+    public element: HTMLElement;
+
+    constructor() {
+        this.element = document.createElement("div");
+        this.element.className = "vditor-tip";
+    }
+
+    public show(text: string, time: number = 6000) {
+        this.element.className = "vditor-tip vditor-tip--show";
+        if (time === 0) {
+            this.element.innerHTML = `<div class="vditor-tip__content">${text}
+<div class="vditor-tip__close">X</div></div>`;
+            this.element.querySelector(".vditor-tip__close").addEventListener("click", () => {
+                this.hide();
+            });
+        } else {
+            this.element.innerHTML = `<div class="vditor-tip__content">${text}</div>`;
+            setTimeout(() => {
+                this.hide();
+            }, time);
+        }
+
+        // 需在动画结束后才能确定位置
+        this.element.removeAttribute("style")
+        setTimeout(() => {
+            const rect = this.element.getBoundingClientRect();
+            if (rect.top < 46) {
+                this.element.style.position = "fixed"
+                this.element.style.top = "46px"
+            }
+        }, 150);
+    }
+
+    public hide() {
+        this.element.className = "vditor-messageElementtip";
+        this.element.innerHTML = "";
+    }
+}

package/src/ts/toolbar/Both.ts

@@ -0,0 +1,28 @@
+import {Constants} from "../constants";
+import {setPreviewMode} from "../ui/setPreviewMode";
+import {getEventName} from "../util/compatibility";
+import {MenuItem} from "./MenuItem";
+
+export class Both extends MenuItem {
+    constructor(vditor: IVditor, menuItem: IMenuItem) {
+        super(vditor, menuItem);
+        if (vditor.options.preview.mode === "both") {
+            this.element.children[0].classList.add("vditor-menu--current");
+        }
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            const btnElement = this.element.firstElementChild;
+            if (btnElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+                return;
+            }
+            event.preventDefault();
+            if (vditor.currentMode !== "sv") {
+                return;
+            }
+            if (vditor.options.preview.mode === "both") {
+                setPreviewMode("editor", vditor);
+            } else {
+                setPreviewMode("both", vditor);
+            }
+        });
+    }
+}