vditor 3.11.3 → 4.0.0

package/src/index.ts

@@ -13,7 +13,6 @@ import {Outline} from "./ts/outline/index";
 import {Preview} from "./ts/preview/index";
 import {Resize} from "./ts/resize/index";
 import {Editor} from "./ts/sv/index";
-import {inputEvent} from "./ts/sv/inputEvent";
 import {processAfterRender as processSVAfterRender, processPaste} from "./ts/sv/process";
 import {Tip} from "./ts/tip/index";
 import {Toolbar} from "./ts/toolbar/index";
@@ -167,10 +166,11 @@ class Vditor extends VditorMethod {
             this.vditor.toolbar.elements,
             Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
         );
-        this.vditor[this.vditor.currentMode].element.setAttribute(
-            "contenteditable",
-            "false",
-        );
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.disabled = true;
+        } else {
+            this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "false");
+        }
     }
 
     /** 解除编辑器禁用 */
@@ -180,7 +180,11 @@ class Vditor extends VditorMethod {
             Constants.EDIT_TOOLBARS.concat(["undo", "redo", "fullscreen", "edit-mode"]),
         );
         this.vditor.undo.resetIcon(this.vditor);
-        this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
+        if (this.vditor.currentMode === "sv") {
+            this.vditor.sv.element.disabled = false;
+        } else {
+            this.vditor[this.vditor.currentMode].element.setAttribute("contenteditable", "true");
+        }
     }
 
     /** 返回选中的字符串 */
@@ -188,7 +192,10 @@ class Vditor extends VditorMethod {
         if (this.vditor.currentMode === "wysiwyg") {
             return getSelectText(this.vditor.wysiwyg.element);
         } else if (this.vditor.currentMode === "sv") {
-            return getSelectText(this.vditor.sv.element);
+            return this.vditor.sv.element.value.substring(
+                this.vditor.sv.element.selectionStart,
+                this.vditor.sv.element.selectionEnd,
+            );
         } else if (this.vditor.currentMode === "ir") {
             return getSelectText(this.vditor.ir.element);
         }
@@ -201,6 +208,15 @@ class Vditor extends VditorMethod {
 
     /** 获取焦点位置 */
     public getCursorPosition() {
+        if (this.vditor.currentMode === "sv") {
+            const element = this.vditor.sv.element;
+            const lineHeight = parseInt(getComputedStyle(element).lineHeight, 10) || 22;
+            const line = element.value.substring(0, element.selectionStart).split("\n").length - 1;
+            return {
+                left: 0,
+                top: line * lineHeight - element.scrollTop,
+            };
+        }
         return getCursorPosition(this.vditor[this.vditor.currentMode].element);
     }
 
@@ -258,6 +274,14 @@ class Vditor extends VditorMethod {
 
     /** 删除选中内容 */
     public deleteValue() {
+        if (this.vditor.currentMode === "sv") {
+            if (this.vditor.sv.element.selectionStart === this.vditor.sv.element.selectionEnd) {
+                return;
+            }
+            processPaste(this.vditor, "");
+            processSVAfterRender(this.vditor);
+            return;
+        }
         if (window.getSelection().isCollapsed) {
             return;
         }
@@ -266,11 +290,23 @@ class Vditor extends VditorMethod {
 
     /** 更新选中内容 */
     public updateValue(value: string) {
+        if (this.vditor.currentMode === "sv") {
+            processPaste(this.vditor, value);
+            processSVAfterRender(this.vditor);
+            return;
+        }
         document.execCommand("insertHTML", false, value);
     }
 
     /** 在焦点处插入内容，并默认进行 Markdown 渲染 */
     public insertValue(value: string, render = true) {
+        if (this.vditor.currentMode === "sv") {
+            processPaste(this.vditor, value);
+            if (render) {
+                processSVAfterRender(this.vditor);
+            }
+            return;
+        }
         const range = getEditorRange(this.vditor);
         range.collapse(true);
         // https://github.com/Vanessa219/vditor/issues/716
@@ -279,12 +315,7 @@ class Vditor extends VditorMethod {
         tmpElement.innerHTML = value;
         range.insertNode(tmpElement.content.cloneNode(true));
         range.collapse(false);
-        if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.preventInput = true;
-            if (render) {
-                inputEvent(this.vditor);
-            }
-        } else if (this.vditor.currentMode === "wysiwyg") {
+        if (this.vditor.currentMode === "wysiwyg") {
             // 由于 https://github.com/Vanessa219/vditor/issues/1566 不能使用 this.vditor.wysiwyg.preventInput = true;
             if (render) {
                 input(this.vditor, getSelection().getRangeAt(0));
@@ -314,7 +345,7 @@ class Vditor extends VditorMethod {
     /** 设置编辑器内容 */
     public setValue(markdown: string, clearStack = false) {
         if (this.vditor.currentMode === "sv") {
-            this.vditor.sv.element.innerHTML = `<div data-block='0'>${this.vditor.lute.SpinVditorSVDOM(markdown)}</div>`;
+            this.vditor.sv.element.value = markdown;
             processSVAfterRender(this.vditor, {
                 enableAddUndoStack: true,
                 enableHint: false,

package/src/ts/hint/index.ts

@@ -23,6 +23,10 @@ export class Hint {
     }
 
     public render(vditor: IVditor) {
+        if (vditor.currentMode === "sv") {
+            this.element.style.display = "none";
+            return;
+        }
         if (!window.getSelection().focusNode) {
             return;
         }
@@ -128,6 +132,9 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
 
     public fillEmoji = (element: HTMLElement, vditor: IVditor) => {
         this.element.style.display = "none";
+        if (vditor.currentMode === "sv") {
+            return;
+        }
 
         const value = decodeURIComponent(element.getAttribute("data-value"));
         const range: Range = window.getSelection().getRangeAt(0);
@@ -172,9 +179,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
         range.deleteContents();
 
         if (vditor.options.hint.parse) {
-            if (vditor.currentMode === "sv") {
-                insertHTML(vditor.lute.SpinVditorSVDOM(value), vditor);
-            } else if (vditor.currentMode === "wysiwyg") {
+            if (vditor.currentMode === "wysiwyg") {
                 insertHTML(vditor.lute.SpinVditorDOM(value), vditor);
             } else {
                 insertHTML(vditor.lute.SpinVditorIRDOM(value), vditor);
@@ -182,7 +187,7 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
         } else {
             insertHTML(value, vditor);
         }
-        if (this.splitChar === ":" && value.indexOf(":") > -1 && vditor.currentMode !== "sv") {
+        if (this.splitChar === ":" && value.indexOf(":") > -1) {
             range.insertNode(document.createTextNode(" "));
         }
         range.collapse(false);

package/src/ts/ir/highlightToolbarIR.ts

@@ -5,12 +5,12 @@ import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
 import {getEditorRange, selectIsEditor} from "../util/selection";
 
 export const highlightToolbarIR = (vditor: IVditor) => {
-    clearTimeout(vditor[vditor.currentMode].hlToolbarTimeoutId);
-    vditor[vditor.currentMode].hlToolbarTimeoutId = window.setTimeout(() => {
-        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+    clearTimeout(vditor.ir.hlToolbarTimeoutId);
+    vditor.ir.hlToolbarTimeoutId = window.setTimeout(() => {
+        if (vditor.ir.element.getAttribute("contenteditable") === "false") {
             return;
         }
-        if (!selectIsEditor(vditor[vditor.currentMode].element)) {
+        if (!selectIsEditor(vditor.ir.element)) {
             return;
         }
 

package/src/ts/markdown/getMarkdown.ts

@@ -2,11 +2,11 @@ import {code160to32} from "../util/code160to32";
 
 export const getMarkdown = (vditor: IVditor) => {
     if (vditor.currentMode === "sv") {
-        return code160to32(`${vditor.sv.element.textContent}\n`.replace(/\n\n$/, "\n"));
+        return code160to32(`${vditor.sv.element.value}\n`.replace(/\n\n$/, "\n"));
     } else if (vditor.currentMode === "wysiwyg") {
-        return vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML);
+        return code160to32(vditor.lute.VditorDOM2Md(vditor.wysiwyg.element.innerHTML));
     } else if (vditor.currentMode === "ir") {
-        return vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML);
+        return code160to32(vditor.lute.VditorIRDOM2Md(vditor.ir.element.innerHTML));
     }
     return "";
 };

package/src/ts/sv/index.ts

@@ -1,55 +1,39 @@
-import {isCtrl, isFirefox} from "../util/compatibility";
-import {
-    blurEvent,
-    copyEvent, cutEvent,
-    dropEvent,
-    focusEvent,
-    hotkeyEvent,
-    scrollCenter,
-    selectEvent,
-} from "../util/editorCommonEvent";
+import {getMarkdown} from "../markdown/getMarkdown";
+import {isFirefox} from "../util/compatibility";
+import {dropEvent, focusEvent, hotkeyEvent} from "../util/editorCommonEvent";
 import {paste} from "../util/fixBrowserBehavior";
-import {getSelectText} from "../util/getSelectText";
-import {inputEvent} from "./inputEvent";
-import {processAfterRender} from "./process";
+import {processAfterRender, processPaste} from "./process";
 
 class Editor {
-    public range: Range;
-    public element: HTMLPreElement;
+    public element: HTMLTextAreaElement;
     public composingLock: boolean = false;
     public processTimeoutId: number;
-    public hlToolbarTimeoutId: number;
-    public preventInput: boolean;
 
     constructor(vditor: IVditor) {
-        this.element = document.createElement("pre");
+        this.element = document.createElement("textarea");
         this.element.className = "vditor-sv vditor-reset";
-        this.element.setAttribute("placeholder", vditor.options.placeholder);
-        this.element.setAttribute("contenteditable", "true");
-        this.element.setAttribute("spellcheck", "false");
+        this.element.placeholder = vditor.options.placeholder;
+        this.element.spellcheck = false;
 
         this.bindEvent(vditor);
-
         focusEvent(vditor, this.element);
-        blurEvent(vditor, this.element);
         hotkeyEvent(vditor, this.element);
-        selectEvent(vditor, this.element);
-        dropEvent(vditor, this.element);
-        copyEvent(vditor, this.element, this.copy);
-        cutEvent(vditor, this.element, this.copy);
-    }
-
-    private copy(event: ClipboardEvent, vditor: IVditor) {
-        event.stopPropagation();
-        event.preventDefault();
-        event.clipboardData.setData("text/plain", getSelectText(vditor[vditor.currentMode].element));
+        dropEvent(vditor, this.element, (code: string) => {
+            processPaste(vditor, code.replace(/&lt;/g, "<").replace(/&amp;/g, "&"));
+        });
     }
 
     private bindEvent(vditor: IVditor) {
-        this.element.addEventListener("paste", (event: ClipboardEvent & { target: HTMLElement }) => {
+        this.element.addEventListener("blur", () => {
+            if (vditor.options.blur) {
+                vditor.options.blur(getMarkdown(vditor));
+            }
+        });
+
+        this.element.addEventListener("paste", (event: ClipboardEvent & {target: HTMLElement}) => {
             paste(vditor, event, {
                 pasteCode: (code: string) => {
-                    document.execCommand("insertHTML", false, code);
+                    processPaste(vditor, code.replace(/&lt;/g, "<").replace(/&amp;/g, "&"));
                 },
             });
         });
@@ -62,61 +46,38 @@ class Editor {
             const textHeight = this.element.clientHeight;
             const textScrollHeight = this.element.scrollHeight - parseFloat(this.element.style.paddingBottom || "0");
             const preview = vditor.preview.element;
-            if ((textScrollTop / textHeight > 0.5)) {
-                preview.scrollTop = (textScrollTop + textHeight) *
-                    preview.scrollHeight / textScrollHeight - textHeight;
+            if (textScrollTop / textHeight > 0.5) {
+                preview.scrollTop = (textScrollTop + textHeight) * preview.scrollHeight / textScrollHeight - textHeight;
             } else {
-                preview.scrollTop = textScrollTop *
-                    preview.scrollHeight / textScrollHeight;
+                preview.scrollTop = textScrollTop * preview.scrollHeight / textScrollHeight;
             }
         });
 
-        this.element.addEventListener("compositionstart", (event: InputEvent) => {
+        this.element.addEventListener("compositionstart", () => {
             this.composingLock = true;
         });
 
-        this.element.addEventListener("compositionend", (event: InputEvent) => {
+        this.element.addEventListener("compositionend", () => {
+            this.composingLock = false;
             if (!isFirefox()) {
-                inputEvent(vditor, event);
+                processAfterRender(vditor);
             }
-            this.composingLock = false;
         });
 
-        this.element.addEventListener("input", (event: InputEvent) => {
-            if (event.inputType === "deleteByDrag" || event.inputType === "insertFromDrop") {
-                // https://github.com/Vanessa219/vditor/issues/801 编辑器内容拖拽问题
-                return;
-            }
-            if (this.composingLock ||  event.data === "‘" || event.data === "“" || event.data === "《") {
-                return;
-            }
-            if (this.preventInput) {
-                this.preventInput = false;
-                processAfterRender(vditor, {
-                  enableAddUndoStack: true,
-                  enableHint: true,
-                  enableInput: true,
-                });
-                return;
+        this.element.addEventListener("input", () => {
+            if (!this.composingLock) {
+                processAfterRender(vditor);
             }
-            inputEvent(vditor, event);
         });
 
-        this.element.addEventListener("keyup", (event) => {
-            if (event.isComposing || isCtrl(event)) {
-                return;
-            }
-            if ((event.key === "Backspace" || event.key === "Delete") &&
-                vditor.sv.element.innerHTML !== "" && vditor.sv.element.childNodes.length === 1 &&
-                vditor.sv.element.firstElementChild && vditor.sv.element.firstElementChild.tagName === "DIV"
-                && vditor.sv.element.firstElementChild.childElementCount === 2
-                && (vditor.sv.element.firstElementChild.textContent === "" || vditor.sv.element.textContent === "\n")) {
-                // 为空时显示 placeholder
-                vditor.sv.element.innerHTML = "";
-                return;
-            }
-            if (event.key === "Enter") {
-                scrollCenter(vditor);
+        this.element.addEventListener("select", () => {
+            const selectedText = this.element.value.substring(this.element.selectionStart, this.element.selectionEnd);
+            if (selectedText.trim()) {
+                if (vditor.options.select) {
+                    vditor.options.select(selectedText);
+                }
+            } else if (vditor.options.unSelect) {
+                vditor.options.unSelect();
             }
         });
     }

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);
 };