vditor 3.11.3 → 4.0.0

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;

package/src/ts/undo/index.ts

@@ -52,7 +52,8 @@ class Undo {
     }
 
     public undo(vditor: IVditor) {
-        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+        if (vditor.currentMode === "sv" ? vditor.sv.element.disabled :
+            vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
             return;
         }
         if (this[vditor.currentMode].undoStack.length < 2) {
@@ -70,7 +71,8 @@ class Undo {
     }
 
     public redo(vditor: IVditor) {
-        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+        if (vditor.currentMode === "sv" ? vditor.sv.element.disabled :
+            vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
             return;
         }
         const state = this[vditor.currentMode].redoStack.pop();
@@ -82,7 +84,7 @@ class Undo {
     }
 
     public recordFirstPosition(vditor: IVditor, event: KeyboardEvent) {
-        if (getSelection().rangeCount === 0) {
+        if (vditor.currentMode !== "sv" && getSelection().rangeCount === 0) {
             return;
         }
         if (this[vditor.currentMode].undoStack.length !== 1 || this[vditor.currentMode].undoStack[0].length === 0 ||
@@ -147,8 +149,15 @@ class Undo {
         }
 
         this[vditor.currentMode].lastText = text;
-        vditor[vditor.currentMode].element.innerHTML = text;
-        if (vditor.currentMode !== "sv") {
+        if (vditor.currentMode === "sv") {
+            const caretIndex = text.indexOf("<wbr>");
+            vditor.sv.element.value = text.replace("<wbr>", "");
+            vditor.sv.element.focus();
+            if (caretIndex > -1) {
+                vditor.sv.element.setSelectionRange(caretIndex, caretIndex);
+            }
+        } else {
+            vditor[vditor.currentMode].element.innerHTML = text;
             vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview`)
                 .forEach((blockElement: HTMLElement) => {
                     if (blockElement.parentElement.querySelector(".language-echarts")) {
@@ -163,17 +172,16 @@ class Undo {
                 .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);
+            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);
@@ -183,7 +191,9 @@ class Undo {
             enableHint: false,
             enableInput: true,
         });
-        highlightToolbar(vditor);
+        if (vditor.currentMode !== "sv") {
+            highlightToolbar(vditor);
+        }
 
         vditor[vditor.currentMode].element.querySelectorAll(`.vditor-${vditor.currentMode}__preview[data-render='2']`)
             .forEach((item: HTMLElement) => {
@@ -225,6 +235,11 @@ class Undo {
     }
 
     private addCaret(vditor: IVditor, setFocus = false) {
+        if (vditor.currentMode === "sv") {
+            const element = vditor.sv.element;
+            return element.value.substring(0, element.selectionStart) + "<wbr>" +
+                element.value.substring(element.selectionStart);
+        }
         let cloneRange: Range;
         if (getSelection().rangeCount !== 0 && !vditor[vditor.currentMode].element.querySelector("wbr")) {
             const range = getSelection().getRangeAt(0);

package/src/ts/upload/index.ts

@@ -1,11 +1,14 @@
-import { getEditorRange, setSelectionFocus } from "../util/selection";
-import { getElement } from "./getElement";
-import { setHeaders } from "./setHeaders";
+import {getEditorRange, setSelectionFocus} from "../util/selection";
+import {processAfterRender as processSVAfterRender, processPaste} from "../sv/process";
+import {getElement} from "./getElement";
+import {setHeaders} from "./setHeaders";
 
 class Upload {
     public element: HTMLElement;
     public isUploading: boolean;
     public range: Range;
+    public selectionEnd: number;
+    public selectionStart: number;
 
     constructor() {
         this.isUploading = false;
@@ -146,9 +149,25 @@ const genUploadedLabel = (responseText: string, vditor: IVditor) => {
             }
         }
     });
-    setSelectionFocus(vditor.upload.range);
-    document.execCommand("insertHTML", false, succFileText);
-    vditor.upload.range = getSelection().getRangeAt(0).cloneRange();
+    if (!succFileText) {
+        if (vditor.currentMode === "sv") {
+            vditor.sv.element.setSelectionRange(vditor.upload.selectionStart, vditor.upload.selectionEnd);
+        } else {
+            setSelectionFocus(vditor.upload.range);
+        }
+        return;
+    }
+    if (vditor.currentMode === "sv") {
+        vditor.sv.element.setSelectionRange(vditor.upload.selectionStart, vditor.upload.selectionEnd);
+        processPaste(vditor, succFileText);
+        processSVAfterRender(vditor);
+        vditor.upload.selectionStart = vditor.sv.element.selectionStart;
+        vditor.upload.selectionEnd = vditor.sv.element.selectionEnd;
+    } else {
+        setSelectionFocus(vditor.upload.range);
+        document.execCommand("insertHTML", false, succFileText);
+        vditor.upload.range = getSelection().getRangeAt(0).cloneRange();
+    }
 };
 
 const uploadFiles =
@@ -197,7 +216,12 @@ const uploadFiles =
         }
         const editorElement = getElement(vditor);
 
-        vditor.upload.range = getEditorRange(vditor);
+        if (vditor.currentMode === "sv") {
+            vditor.upload.selectionStart = vditor.sv.element.selectionStart;
+            vditor.upload.selectionEnd = vditor.sv.element.selectionEnd;
+        } else {
+            vditor.upload.range = getEditorRange(vditor);
+        }
 
         const validateResult = validateFile(vditor, fileList);
         if (validateResult.length === 0) {
@@ -229,11 +253,19 @@ const uploadFiles =
         }
         setHeaders(vditor, xhr);
         vditor.upload.isUploading = true;
-        editorElement.setAttribute("contenteditable", "false");
+        if (vditor.currentMode === "sv") {
+            vditor.sv.element.disabled = true;
+        } else {
+            editorElement.setAttribute("contenteditable", "false");
+        }
         xhr.onreadystatechange = () => {
             if (xhr.readyState === XMLHttpRequest.DONE) {
                 vditor.upload.isUploading = false;
-                editorElement.setAttribute("contenteditable", "true");
+                if (vditor.currentMode === "sv") {
+                    vditor.sv.element.disabled = false;
+                } else {
+                    editorElement.setAttribute("contenteditable", "true");
+                }
                 if (xhr.status >= 200 && xhr.status < 300) {
                     if (vditor.options.upload.success) {
                         vditor.options.upload.success(editorElement, xhr.responseText);
@@ -270,4 +302,4 @@ const uploadFiles =
         xhr.send(formData);
     };
 
-export { Upload, uploadFiles };
+export {Upload, uploadFiles};

package/src/ts/util/editorCommonEvent.ts

@@ -45,18 +45,22 @@ export const blurEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             if (expandElement) {
                 expandElement.classList.remove("vditor-ir__node--expand");
             }
-        } else if (vditor.currentMode === "wysiwyg" &&
-            !vditor.wysiwyg.selectPopover.contains(event.relatedTarget as HTMLElement)) {
-            vditor.wysiwyg.hideComment();
+            vditor.ir.range = getEditorRange(vditor);
+        } else if (vditor.currentMode === "wysiwyg") {
+            if (!vditor.wysiwyg.selectPopover.contains(event.relatedTarget as HTMLElement)) {
+                vditor.wysiwyg.hideComment();
+            }
+            vditor.wysiwyg.range = getEditorRange(vditor);
         }
-        vditor[vditor.currentMode].range = getEditorRange(vditor);
         if (vditor.options.blur) {
             vditor.options.blur(getMarkdown(vditor));
         }
     });
 };
 
-export const dropEvent = (vditor: IVditor, editorElement: HTMLElement) => {
+export const dropEvent = (vditor: IVditor, editorElement: HTMLElement, pasteCode = (code: string) => {
+    document.execCommand("insertHTML", false, code);
+}) => {
     editorElement.addEventListener("dragstart", (event) => {
         // 选中编辑器中的文字进行拖拽
         event.dataTransfer.setData(Constants.DROP_EDITOR, Constants.DROP_EDITOR);
@@ -69,9 +73,7 @@ export const dropEvent = (vditor: IVditor, editorElement: HTMLElement) => {
             } else if (event.dataTransfer.types.includes("Files") || event.dataTransfer.types.includes("text/html")) {
                 // 外部文件拖入编辑器中或者编辑器内选中文字拖拽
                 paste(vditor, event, {
-                    pasteCode: (code: string) => {
-                        document.execCommand("insertHTML", false, code);
-                    },
+                    pasteCode,
                 });
             }
         });
@@ -102,7 +104,14 @@ export const scrollCenter = (vditor: IVditor) => {
         return;
     }
     const editorElement = vditor[vditor.currentMode].element;
-    const cursorTop = getCursorPosition(editorElement).top;
+    let cursorTop: number;
+    if (vditor.currentMode === "sv") {
+        const lineHeight = parseInt(getComputedStyle(vditor.sv.element).lineHeight, 10) || 22;
+        cursorTop = (vditor.sv.element.value.substring(0, vditor.sv.element.selectionStart).split("\n").length - 1) *
+            lineHeight;
+    } else {
+        cursorTop = getCursorPosition(editorElement).top;
+    }
     if (vditor.options.height === "auto" && !vditor.element.classList.contains("vditor--fullscreen")) {
         window.scrollTo(window.scrollX,
             cursorTop + vditor.element.offsetTop + vditor.toolbar.element.offsetHeight - window.innerHeight / 2 + 10);