vditor 3.11.2 → 4.0.0

package/src/ts/ir/process.ts

@@ -1,5 +1,6 @@
 import {Constants} from "../constants";
 import {getMarkdown} from "../markdown/getMarkdown";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 import {removeCurrentToolbar} from "../toolbar/setToolbar";
 import {accessLocalStorage} from "../util/compatibility";
 import {listToggle} from "../util/fixBrowserBehavior";
@@ -41,6 +42,7 @@ export const processAfterRender = (vditor: IVditor, options = {
     enableHint: false,
     enableInput: true,
 }) => {
+    renderImageCaptions(vditor.ir.element, "ir", vditor.options.preview.markdown.imageCaption);
     if (options.enableHint) {
         processHint(vditor);
     }
@@ -96,12 +98,25 @@ export const processHeading = (vditor: IVditor, value: string) => {
 const removeInline = (range: Range, vditor: IVditor, type: string) => {
     const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", type) as HTMLElement;
     if (inlineElement) {
+        const keepSelection = !range.collapsed;
         inlineElement.firstElementChild.remove();
         inlineElement.lastElementChild.remove();
+        if (keepSelection) {
+            const endRange = range.cloneRange();
+            endRange.collapse(false);
+            endRange.insertNode(document.createElement("wbr"));
+        }
         range.insertNode(document.createElement("wbr"));
         const tempElement = document.createElement("div");
         tempElement.innerHTML = vditor.lute.SpinVditorIRDOM(inlineElement.outerHTML);
         inlineElement.outerHTML = tempElement.firstElementChild.innerHTML.trim();
+        if (keepSelection) {
+            setRangeByWbr(vditor.ir.element, range);
+            const endWbrElement = vditor.ir.element.querySelector("wbr");
+            range.setEndBefore(endWbrElement);
+            endWbrElement.remove();
+            setSelectionFocus(range);
+        }
     }
 };
 
@@ -182,6 +197,7 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
         } else if (commandName === "italic" || commandName === "bold" || commandName === "strike"
             || commandName === "inline-code" || commandName === "code" || commandName === "table") {
             let html;
+            let keepSelection = false;
             if (range.toString() === "") {
                 html = `${prefix}<wbr>${suffix}`;
             } else {
@@ -190,7 +206,8 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
                 } else if (commandName === "table") {
                     html = `${prefix}${range.toString()}<wbr>${suffix}`;
                 } else {
-                    html = `${prefix}${range.toString()}${suffix}<wbr>`;
+                    html = `${prefix}<wbr>${range.toString()}<wbr>${suffix}`;
+                    keepSelection = true;
                 }
                 range.deleteContents();
             }
@@ -202,6 +219,12 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
             spanElement.innerHTML = html;
             range.insertNode(spanElement);
             input(vditor, range);
+            if (keepSelection) {
+                const endWbrElement = vditor.ir.element.querySelector("wbr");
+                range.setEndBefore(endWbrElement);
+                endWbrElement.remove();
+                setSelectionFocus(range);
+            }
 
             if (commandName === "table") {
                 range.selectNodeContents(getSelection().getRangeAt(0).startContainer.parentElement);

package/src/ts/markdown/adapterRender.ts

@@ -31,6 +31,10 @@ export const graphvizRenderAdapter = {
     getCode: (el: Element) => el.textContent,
     getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-graphviz"),
 };
+export const wavedromRenderAdapter = {
+    getCode: (el: Element) => el.textContent,
+    getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-wavedrom"),
+};
 export const flowchartRenderAdapter = {
     getCode: (el: Element) => el.textContent,
     getElements: (el: HTMLElement | Document) => el.querySelectorAll(".language-flowchart"),

package/src/ts/markdown/getHTML.ts

@@ -1,11 +1,14 @@
 import {getMarkdown} from "./getMarkdown";
+import {renderImageCaptionHTML} from "./imageCaptionRender";
 
 export const getHTML = (vditor: IVditor) => {
+    let html = "";
     if (vditor.currentMode === "sv") {
-        return vditor.lute.Md2HTML(getMarkdown(vditor));
+        html = vditor.lute.Md2HTML(getMarkdown(vditor));
     } else if (vditor.currentMode === "wysiwyg") {
-        return vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
+        html = vditor.lute.VditorDOM2HTML(vditor.wysiwyg.element.innerHTML);
     } else if (vditor.currentMode === "ir") {
-        return vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
+        html = vditor.lute.VditorIRDOM2HTML(vditor.ir.element.innerHTML);
     }
+    return renderImageCaptionHTML(html, vditor.options.preview.markdown.imageCaption);
 };

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/markdown/imageCaptionRender.ts

@@ -0,0 +1,175 @@
+const getContentNodes = (element: Element, ignoreIRMarkers = false) => {
+    return Array.from(element.childNodes).filter((node) => {
+        if (node.nodeType === Node.COMMENT_NODE) {
+            return false;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            return node.textContent.replace(/\u200b/g, "").trim() !== "";
+        }
+        if (!(node instanceof HTMLElement)) {
+            return true;
+        }
+        if (node.tagName === "WBR") {
+            return false;
+        }
+        return !ignoreIRMarkers || !node.classList.contains("vditor-ir__marker");
+    });
+};
+
+const getWYSIWYGImage = (paragraph: HTMLParagraphElement) => {
+    const nodes = getContentNodes(paragraph);
+    if (nodes.length !== 1 || !(nodes[0] instanceof HTMLElement)) {
+        return undefined;
+    }
+
+    const container = nodes[0];
+    if (container instanceof HTMLImageElement) {
+        return {
+            container,
+            image: container,
+        };
+    }
+    if (container instanceof HTMLAnchorElement) {
+        const linkNodes = getContentNodes(container);
+        if (linkNodes.length === 1 && linkNodes[0] instanceof HTMLImageElement) {
+            return {
+                container,
+                image: linkNodes[0],
+            };
+        }
+    }
+    return undefined;
+};
+
+const getIRImage = (paragraph: HTMLParagraphElement) => {
+    const nodes = getContentNodes(paragraph);
+    if (nodes.length !== 1 || !(nodes[0] instanceof HTMLElement)) {
+        return undefined;
+    }
+
+    let imageNode = nodes[0];
+    if (imageNode.getAttribute("data-type") === "a") {
+        const linkNodes = getContentNodes(imageNode, true);
+        if (linkNodes.length !== 1 || !(linkNodes[0] instanceof HTMLElement)) {
+            return undefined;
+        }
+        imageNode = linkNodes[0];
+    }
+    if (imageNode.getAttribute("data-type") !== "img") {
+        return undefined;
+    }
+
+    const image = imageNode.querySelector(":scope > img");
+    const titleMarker = imageNode.querySelector<HTMLElement>(":scope > .vditor-ir__marker--title");
+    if (!(image instanceof HTMLImageElement) || !titleMarker) {
+        return undefined;
+    }
+
+    const markerText = titleMarker.textContent.trim();
+    const closeMarker = markerText[0] === "(" ? ")" : markerText[0];
+    if (markerText.length < 2 || !["\"", "'", "("].includes(markerText[0]) ||
+        markerText[markerText.length - 1] !== closeMarker) {
+        return undefined;
+    }
+    return {
+        caption: markerText.slice(1, -1).trim(),
+        container: imageNode,
+        image,
+    };
+};
+
+const unwrapWYSIWYGCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("span.vditor-image[data-image-caption]").forEach((wrapper) => {
+        while (wrapper.firstChild) {
+            wrapper.parentNode.insertBefore(wrapper.firstChild, wrapper);
+        }
+        wrapper.remove();
+    });
+};
+
+const resetIRCaptions = (element: HTMLElement) => {
+    element.querySelectorAll(".vditor-image[data-image-caption]").forEach((imageNode) => {
+        imageNode.classList.remove("vditor-image");
+        imageNode.removeAttribute("data-image-caption");
+    });
+};
+
+const renderPreviewCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("p").forEach((paragraph: HTMLParagraphElement) => {
+        const imageData = getWYSIWYGImage(paragraph);
+        const caption = imageData?.image.getAttribute("title")?.trim();
+        if (!imageData || !caption) {
+            return;
+        }
+
+        const figure = document.createElement("figure");
+        Array.from(paragraph.attributes).forEach((attribute) => {
+            figure.setAttribute(attribute.name, attribute.value);
+        });
+        figure.classList.add("vditor-image");
+        const figcaption = document.createElement("figcaption");
+        figcaption.textContent = caption;
+        figure.append(imageData.container, figcaption);
+        paragraph.replaceWith(figure);
+    });
+};
+
+const renderWYSIWYGCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("p").forEach((paragraph: HTMLParagraphElement) => {
+        const imageData = getWYSIWYGImage(paragraph);
+        const caption = imageData?.image.getAttribute("title")?.trim();
+        if (!imageData || !caption) {
+            return;
+        }
+
+        const wrapper = document.createElement("span");
+        wrapper.className = "vditor-image";
+        wrapper.setAttribute("data-image-caption", caption);
+        imageData.container.replaceWith(wrapper);
+        wrapper.append(imageData.container);
+    });
+};
+
+const renderIRCaptions = (element: HTMLElement) => {
+    element.querySelectorAll("p").forEach((paragraph: HTMLParagraphElement) => {
+        const imageData = getIRImage(paragraph);
+        if (!imageData?.caption) {
+            return;
+        }
+        imageData.container.classList.add("vditor-image");
+        imageData.container.setAttribute("data-image-caption", imageData.caption);
+    });
+};
+
+export const renderImageCaptions = (
+    element: HTMLElement,
+    mode: "preview" | "wysiwyg" | "ir",
+    enable: boolean,
+) => {
+    if (mode === "wysiwyg") {
+        unwrapWYSIWYGCaptions(element);
+    } else if (mode === "ir") {
+        resetIRCaptions(element);
+    }
+    if (!enable) {
+        return;
+    }
+
+    if (mode === "preview") {
+        renderPreviewCaptions(element);
+    } else if (mode === "wysiwyg") {
+        renderWYSIWYGCaptions(element);
+    } else {
+        renderIRCaptions(element);
+    }
+};
+
+export const renderImageCaptionHTML = (html: string, enable: boolean) => {
+    if (!enable) {
+        return html;
+    }
+    const container = document.createElement("div");
+    container.innerHTML = html;
+    renderImageCaptions(container, "preview", true);
+    return container.innerHTML;
+};

package/src/ts/markdown/mermaidRender.ts

@@ -13,7 +13,7 @@ export const mermaidRender = (element: (HTMLElement | Document) = document, cdn
     if (mermaidElements.length === 0) {
         return;
     }
-    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.6.0`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.16.1`, "vditorMermaidScript").then(() => {
         const config: any = {
             securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
             altFontFamily: "sans-serif",

package/src/ts/markdown/previewRender.ts

@@ -10,6 +10,7 @@ import {codeRender} from "./codeRender";
 import {flowchartRender} from "./flowchartRender";
 import {graphvizRender} from "./graphvizRender";
 import {highlightRender} from "./highlightRender";
+import {renderImageCaptionHTML} from "./imageCaptionRender";
 import {lazyLoadImageRender} from "./lazyLoadImageRender";
 import {mathRender} from "./mathRender";
 import {mediaRender} from "./mediaRender";
@@ -20,6 +21,7 @@ import {mindmapRender} from "./mindmapRender";
 import {plantumlRender} from "./plantumlRender";
 import {setLute} from "./setLute";
 import {speechRender} from "./speechRender";
+import {wavedromRender} from "./wavedromRender";
 
 const mergeOptions = (options?: IPreviewOptions) => {
     const defaultOption: IPreviewOptions = {
@@ -59,6 +61,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
     return addScript(`${mergedOptions.cdn}/dist/js/lute/lute.min.js`, "vditorLuteScript").then(() => {
         const lute = setLute({
             autoSpace: mergedOptions.markdown.autoSpace,
+            callout: mergedOptions.markdown.callout,
             gfmAutoLink: mergedOptions.markdown.gfmAutoLink,
             codeBlockPreview: mergedOptions.markdown.codeBlockPreview,
             emojiSite: mergedOptions.emojiPath,
@@ -75,6 +78,8 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             mathBlockPreview: mergedOptions.markdown.mathBlockPreview,
             paragraphBeginningSpace: mergedOptions.markdown.paragraphBeginningSpace,
             sanitize: mergedOptions.markdown.sanitize,
+            sub: mergedOptions.markdown.sub,
+            sup: mergedOptions.markdown.sup,
             toc: mergedOptions.markdown.toc,
         });
         if (options?.renderers) {
@@ -85,7 +90,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
             });
         }
         lute.SetHeadingID(true);
-        return lute.Md2HTML(mdText);
+        return renderImageCaptionHTML(lute.Md2HTML(mdText), mergedOptions.markdown.imageCaption);
     });
 };
 
@@ -136,6 +141,7 @@ export const previewRender = async (previewElement: HTMLDivElement, markdown: st
     markmapRender(previewElement, mergedOptions.cdn);
     flowchartRender(previewElement, mergedOptions.cdn);
     graphvizRender(previewElement, mergedOptions.cdn);
+    wavedromRender(previewElement, mergedOptions.cdn);
     chartRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     mindmapRender(previewElement, mergedOptions.cdn, mergedOptions.mode);
     plantumlRender(previewElement, mergedOptions.cdn);

package/src/ts/markdown/setLute.ts

@@ -5,6 +5,7 @@ export const setLute = (options: ILuteOptions) => {
     lute.SetHeadingAnchor(options.headingAnchor);
     lute.SetInlineMathAllowDigitAfterOpenMarker(options.inlineMathDigit);
     lute.SetAutoSpace(options.autoSpace);
+    lute.SetCallout(options.callout);
     lute.SetToC(options.toc);
     lute.SetFootnotes(options.footnotes);
     lute.SetFixTermTypo(options.fixTermTypo);
@@ -20,5 +21,7 @@ export const setLute = (options: ILuteOptions) => {
     if (options.lazyLoadImage) {
         lute.SetImageLazyLoading(options.lazyLoadImage);
     }
+    lute.SetSup(options.sup);
+    lute.SetSub(options.sub);
     return lute;
 };

package/src/ts/markdown/wavedromRender.ts

@@ -0,0 +1,54 @@
+import {Constants} from "../constants";
+import {addScript} from "../util/addScript";
+import {looseJsonParse} from "../util/function";
+import {wavedromRenderAdapter} from "./adapterRender";
+
+declare const wavedrom: {
+    renderWaveElement(index: number, source: object, element: HTMLElement, skin: object, notFirstSignal: boolean): void;
+    waveSkin: object;
+};
+
+let wavedromIndex = 0;
+
+export const wavedromRender = (element: (HTMLElement | Document) = document, cdn = Constants.CDN) => {
+    const wavedromElements = wavedromRenderAdapter.getElements(element);
+    if (wavedromElements.length === 0) {
+        return;
+    }
+
+    addScript(`${cdn}/dist/js/wavedrom/wavedrom.min.js?v=3.6.2`, "vditorWavedromScript").then(() => {
+        wavedromElements.forEach(async (item: HTMLElement) => {
+            if (item.parentElement.classList.contains("vditor-wysiwyg__pre") ||
+                item.parentElement.classList.contains("vditor-ir__marker--pre")) {
+                return;
+            }
+
+            const code = wavedromRenderAdapter.getCode(item);
+            if (item.getAttribute("data-processed") === "true" || code.trim() === "") {
+                return;
+            }
+
+            let renderElement = item;
+            if (item.tagName === "CODE") {
+                renderElement = document.createElement("div");
+                Array.from(item.attributes).forEach((attribute) => {
+                    renderElement.setAttribute(attribute.name, attribute.value);
+                });
+                item.replaceWith(renderElement);
+            }
+
+            try {
+                const source = await looseJsonParse(code);
+                wavedrom.renderWaveElement(wavedromIndex, source, renderElement, wavedrom.waveSkin, false);
+                wavedromIndex++;
+            } catch (error) {
+                const message = error instanceof Error ? error.message : String(error);
+                const lineBreak = document.createElement("br");
+                renderElement.replaceChildren(document.createTextNode("wavedrom render error:"), lineBreak,
+                    document.createTextNode(message));
+                renderElement.classList.add("vditor-reset--error");
+            }
+            renderElement.setAttribute("data-processed", "true");
+        });
+    });
+};

package/src/ts/preview/index.ts

@@ -5,6 +5,7 @@ import {flowchartRender} from "../markdown/flowchartRender";
 import {getMarkdown} from "../markdown/getMarkdown";
 import {graphvizRender} from "../markdown/graphvizRender";
 import {highlightRender} from "../markdown/highlightRender";
+import {renderImageCaptions} from "../markdown/imageCaptionRender";
 import {mathRender} from "../markdown/mathRender";
 import {mediaRender} from "../markdown/mediaRender";
 import {mermaidRender} from "../markdown/mermaidRender";
@@ -12,6 +13,7 @@ import {SMILESRender} from "../markdown/SMILESRender";
 import {markmapRender} from "../markdown/markmapRender";
 import {mindmapRender} from "../markdown/mindmapRender";
 import {plantumlRender} from "../markdown/plantumlRender";
+import {wavedromRender} from "../markdown/wavedromRender";
 import {getEventName} from "../util/compatibility";
 import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {hasClosestByTag} from "../util/hasClosestByHeadings";
@@ -152,6 +154,7 @@ export class Preview {
 
         if (value) {
             this.previewElement.innerHTML = value;
+            renderImageCaptions(this.previewElement, "preview", vditor.options.preview.markdown.imageCaption);
             return;
         }
 
@@ -205,6 +208,7 @@ export class Preview {
     }
 
     private afterRender(vditor: IVditor, startTime: number) {
+        renderImageCaptions(this.previewElement, "preview", vditor.options.preview.markdown.imageCaption);
         if (vditor.options.preview.parse) {
             vditor.options.preview.parse(this.element);
         }
@@ -229,6 +233,7 @@ export class Preview {
         SMILESRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         flowchartRender(vditor.preview.previewElement, vditor.options.cdn);
         graphvizRender(vditor.preview.previewElement, vditor.options.cdn);
+        wavedromRender(vditor.preview.previewElement, vditor.options.cdn);
         chartRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         mindmapRender(vditor.preview.previewElement, vditor.options.cdn, vditor.options.theme);
         plantumlRender(vditor.preview.previewElement, vditor.options.cdn);

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