vditor 3.11.2 → 4.0.0

package/src/ts/sv/process.ts

@@ -1,104 +1,14 @@
 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 replaceSelection = (vditor: IVditor, text: string, selectionMode: SelectionMode = "end") => {
+    const element = vditor.sv.element;
+    element.setRangeText(text, element.selectionStart, element.selectionEnd, selectionMode);
+    element.focus();
 };
 
-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 processPaste = (vditor: IVditor, text: string) => {
+    replaceSelection(vditor, text);
 };
 
 export const processAfterRender = (vditor: IVditor, options = {
@@ -106,10 +16,6 @@ export const processAfterRender = (vditor: IVditor, options = {
     enableHint: false,
     enableInput: true,
 }) => {
-    if (options.enableHint) {
-        vditor.hint.render(vditor);
-    }
-
     vditor.preview.render(vditor);
 
     const text = getMarkdown(vditor);
@@ -141,75 +47,53 @@ export const processAfterRender = (vditor: IVditor, options = {
 };
 
 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);
+    const element = vditor.sv.element;
+    const lineStart = element.value.lastIndexOf("\n", element.selectionStart - 1) + 1;
+    const lineEndIndex = element.value.indexOf("\n", element.selectionEnd);
+    const lineEnd = lineEndIndex === -1 ? element.value.length : lineEndIndex;
+    const selectedLines = element.value.substring(lineStart, lineEnd);
+    const heading = value ? value + selectedLines.replace(/^#{1,6}\s+/, "") : selectedLines.replace(/^#{1,6}\s+/, "");
+    element.setRangeText(heading, lineStart, lineEnd, "select");
+    element.focus();
+    processAfterRender(vditor);
 };
 
 export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: string, suffix: string) => {
-    const range = getEditorRange(vditor);
+    const element = vditor.sv.element;
     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" ||
+    const start = element.selectionStart;
+    const end = element.selectionEnd;
+    const selectedText = element.value.substring(start, end);
+    let text = "";
+    let selectionStart = start + prefix.length;
+    let selectionEnd = selectionStart + selectedText.length;
+
+    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;
-        }
+        const lineStart = element.value.lastIndexOf("\n", start - 1) + 1;
+        const lineEndIndex = element.value.indexOf("\n", end);
+        const lineEnd = lineEndIndex === -1 ? element.value.length : lineEndIndex;
+        const lines = element.value.substring(lineStart, lineEnd);
+        text = lines.split("\n").map((line) => prefix + line).join("\n");
+        element.setRangeText(text, lineStart, lineEnd, "select");
+    } else if (commandName === "line") {
+        text = `${start === 0 ? "" : "\n\n"}${prefix}\n`;
+        element.setRangeText(text, start, end, "end");
+    } else if (commandName === "code") {
+        text = `${prefix}\n${selectedText}${suffix}`;
+        element.setRangeText(text, start, end, "end");
+        selectionStart = start + prefix.length + 1;
+        selectionEnd = selectionStart + selectedText.length;
+        element.setSelectionRange(selectionStart, selectionEnd);
+    } else if (commandName === "table") {
+        text = `${start === 0 ? "" : "\n\n"}${prefix}${suffix}`;
+        element.setRangeText(text, start, end, "end");
+    } else {
+        text = `${prefix}${selectedText}${suffix}`;
+        element.setRangeText(text, start, end, "end");
+        element.setSelectionRange(selectionStart, selectionEnd);
     }
-    setRangeByWbr(vditor.sv.element, range);
+
+    element.focus();
     processAfterRender(vditor);
 };

package/src/ts/sv/processKeydown.ts

@@ -1,10 +1,5 @@
 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";
+import {processAfterRender} from "./process";
 
 export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
     vditor.sv.composingLock = event.isComposing;
@@ -16,187 +11,25 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
         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;
+    if (event.key !== "Tab" || isCtrl(event) || event.altKey) {
+        return false;
     }
 
-    // 删除后光标前有 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;
+    const element = vditor.sv.element;
+    const start = element.selectionStart;
+    const end = element.selectionEnd;
+    if (event.shiftKey) {
+        const lineStart = element.value.lastIndexOf("\n", start - 1) + 1;
+        const indentation = element.value.substring(lineStart, start).match(/^(\t| {1,4})/);
+        if (indentation) {
+            element.setRangeText("", lineStart, lineStart + indentation[0].length, "end");
+            element.setSelectionRange(start - indentation[0].length, end - indentation[0].length);
+        }
+    } else {
+        element.setRangeText(vditor.options.tab, start, end, "end");
+    }
+    processAfterRender(vditor);
+    event.preventDefault();
+    return true;
 };

package/src/ts/toolbar/EditMode.ts

@@ -2,7 +2,7 @@ import {Constants} from "../constants";
 import {processAfterRender} from "../ir/process";
 import {getMarkdown} from "../markdown/getMarkdown";
 import {mathRender} from "../markdown/mathRender";
-import {processAfterRender as processSVAfterRender, processSpinVditorSVDOM} from "../sv/process";
+import {processAfterRender as processSVAfterRender} from "../sv/process";
 import {setPadding, setTypewriterPosition} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {highlightToolbar} from "../util/highlightToolbar";
@@ -18,7 +18,6 @@ import {
     removeCurrentToolbar,
     showToolbar, toggleSubMenu,
 } from "./setToolbar";
-import {combineFootnote} from "../sv/combineFootnote";
 
 export const setEditMode = (vditor: IVditor, type: string, event: Event | string) => {
     let markdownText;
@@ -114,16 +113,10 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
 
         vditor.lute.SetVditorIR(false);
         vditor.lute.SetVditorWYSIWYG(false);
-        vditor.lute.SetVditorSV(true);
+        vditor.lute.SetVditorSV(false);
 
         vditor.currentMode = "sv";
-        let svHTML = processSpinVditorSVDOM(markdownText, vditor);
-        if (svHTML === "<div data-block='0'></div>") {
-            // https://github.com/Vanessa219/vditor/issues/654 SV 模式 Placeholder 显示问题
-            svHTML = "";
-        }
-        vditor.sv.element.innerHTML = svHTML;
-        combineFootnote(vditor.sv.element)
+        vditor.sv.element.value = markdownText;
         processSVAfterRender(vditor, {
             enableAddUndoStack: true,
             enableHint: false,

package/src/ts/toolbar/Emoji.ts

@@ -6,6 +6,7 @@ import {MenuItem} from "./MenuItem";
 import {toggleSubMenu} from "./setToolbar";
 import {hasClosestBlock} from "../util/hasClosest";
 import {modifyPre} from "../wysiwyg/inlineTag";
+import {processPaste} from "../sv/process";
 
 export class Emoji extends MenuItem {
     public element: HTMLElement;
@@ -44,6 +45,12 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
             if (btnElement) {
                 event.preventDefault();
                 const value = btnElement.getAttribute("data-value");
+                if (vditor.currentMode === "sv") {
+                    processPaste(vditor, value);
+                    (this.element.lastElementChild as HTMLElement).style.display = "none";
+                    execAfterRender(vditor);
+                    return;
+                }
                 const range = getEditorRange(vditor);
                 let html = value;
                 if (vditor.currentMode === "wysiwyg") {
@@ -51,7 +58,7 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
                 } else if (vditor.currentMode === "ir") {
                     html = vditor.lute.SpinVditorIRDOM(value);
                 }
-                if (value.indexOf(":") > -1 && vditor.currentMode !== "sv") {
+                if (value.indexOf(":") > -1) {
                     const tempElement = document.createElement("div");
                     tempElement.innerHTML = html;
                     html = tempElement.firstElementChild.firstElementChild.outerHTML + " ";

package/src/ts/toolbar/Record.ts

@@ -34,7 +34,11 @@ export class Record extends MenuItem {
                     };
                     mediaRecorder.startRecordingNewWavFile();
                     vditor.tip.show(window.VditorI18n.recording);
-                    editorElement.setAttribute("contenteditable", "false");
+                    if (vditor.currentMode === "sv") {
+                        vditor.sv.element.disabled = true;
+                    } else {
+                        editorElement.setAttribute("contenteditable", "false");
+                    }
                     this.element.children[0].classList.add("vditor-menu--current");
                 }).catch(() => {
                     vditor.tip.show(window.VditorI18n["record-tip"]);
@@ -51,7 +55,11 @@ export class Record extends MenuItem {
                 this.element.children[0].classList.remove("vditor-menu--current");
             } else {
                 vditor.tip.show(window.VditorI18n.recording);
-                editorElement.setAttribute("contenteditable", "false");
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.disabled = true;
+                } else {
+                    editorElement.setAttribute("contenteditable", "false");
+                }
                 mediaRecorder.startRecordingNewWavFile();
                 this.element.children[0].classList.add("vditor-menu--current");
             }

package/src/ts/toolbar/index.ts

@@ -181,6 +181,9 @@ export class Toolbar {
         if (!menuItemObj) {
             return;
         }
+        menuItemObj.element.querySelectorAll("button").forEach((button) => {
+            button.setAttribute("type", "button");
+        });
         let key = menuItem.name;
         if (key === "br" || key === "|") {
             key = key + index;

package/src/ts/ui/initUI.ts

@@ -146,9 +146,13 @@ export const setTypewriterPosition = (vditor: IVditor) => {
   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 editorBottom = ((height - vditor.toolbar.element.offsetHeight) / 2) + "px";
+  if (vditor.currentMode === "sv") {
+    vditor.sv.element.style.paddingBottom = editorBottom;
+  } else {
+    // 由于 Firefox padding-bottom bug，只能使用 :after
+    vditor[vditor.currentMode].element.style.setProperty("--editor-bottom", editorBottom);
+  }
 };
 
 let resizeCb: () => void;