vditor 3.11.3 → 4.0.1

package/src/ts/markdown/mediaRender.ts

@@ -1,13 +1,15 @@
 import {getSearch} from "../util/function";
 
-const videoRender = (element: HTMLElement, url: string) => {
-    element.insertAdjacentHTML("afterend", `<video controls="controls" src="${url}"></video>`);
-    element.remove();
-};
-
-const audioRender = (element: HTMLElement, url: string) => {
-    element.insertAdjacentHTML("afterend", `<audio controls="controls" src="${url}"></audio>`);
-    element.remove();
+const replaceMedia = (element: HTMLElement, tag: "video" | "audio" | "iframe", url: string) => {
+    const media = element.ownerDocument.createElement(tag);
+    if (tag === "iframe") {
+        media.className = "iframe__video";
+    } else {
+        media.setAttribute("controls", "controls");
+    }
+    // 链接属性经 DOM 解码后可能包含引号，直接设置属性以保留 URL 的数据语义。
+    media.setAttribute("src", url);
+    element.replaceWith(media);
 };
 
 const iframeRender = (element: HTMLElement, url: string) => {
@@ -21,33 +23,20 @@ const iframeRender = (element: HTMLElement, url: string) => {
     const tedMatch = url.match(/(?:www\.|\/\/)ted\.com\/talks\/(\w+)/);
 
     if (youtubeMatch && youtubeMatch[1].length === 11) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="//www.youtube.com/embed/${youtubeMatch[1] +
-            (youtubeMatch[2] ? "?start=" + youtubeMatch[2] : "")}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `//www.youtube.com/embed/${youtubeMatch[1] +
+            (youtubeMatch[2] ? "?start=" + youtubeMatch[2] : "")}`);
     } else if (youkuMatch && youkuMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="//player.youku.com/embed/${youkuMatch[1]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `//player.youku.com/embed/${youkuMatch[1]}`);
     } else if (qqMatch && qqMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="https://v.qq.com/txp/iframe/player.html?vid=${qqMatch[1]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `https://v.qq.com/txp/iframe/player.html?vid=${qqMatch[1]}`);
     } else if (coubMatch && coubMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="//coub.com/embed/${coubMatch[1]}?muted=false&autostart=false&originalSize=true&startWithHD=true"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe",
+            `//coub.com/embed/${coubMatch[1]}?muted=false&autostart=false&originalSize=true&startWithHD=true`);
     } else if (facebookMatch && facebookMatch[0]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(facebookMatch[0])}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe",
+            `https://www.facebook.com/plugins/video.php?href=${encodeURIComponent(facebookMatch[0])}`);
     } else if (dailymotionMatch && dailymotionMatch[2]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video"
- src="https://www.dailymotion.com/embed/video/${dailymotionMatch[2]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `https://www.dailymotion.com/embed/video/${dailymotionMatch[2]}`);
     } else if (url.indexOf("bilibili.com") > -1 && (url.indexOf("bvid=") > -1 || (bilibiliMatch && bilibiliMatch[1]))) {
         const params: IObject = {
             bvid:  getSearch("bvid", url) || (bilibiliMatch && bilibiliMatch[1]),
@@ -75,13 +64,9 @@ const iframeRender = (element: HTMLElement, url: string) => {
                 src += "&";
             }
         });
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="${src}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", src);
     } else if (tedMatch && tedMatch[1]) {
-        element.insertAdjacentHTML("afterend",
-            `<iframe class="iframe__video" src="//embed.ted.com/talks/${tedMatch[1]}"></iframe>`);
-        element.remove();
+        replaceMedia(element, "iframe", `//embed.ted.com/talks/${tedMatch[1]}`);
     }
 };
 
@@ -95,9 +80,9 @@ export const mediaRender = (element: HTMLElement) => {
             return;
         }
         if (url.match(/^.+.(mp4|m4v|ogg|ogv|webm)$/)) {
-            videoRender(aElement, url);
+            replaceMedia(aElement, "video", url);
         } else if (url.match(/^.+.(mp3|wav|flac)$/)) {
-            audioRender(aElement, url);
+            replaceMedia(aElement, "audio", url);
         } else {
             iframeRender(aElement, url);
         }

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.16.1`, "vditorMermaidScript").then(() => {
+    addScript(`${cdn}/dist/js/mermaid/mermaid.min.js?v=11.17.2`, "vditorMermaidScript").then(() => {
         const config: any = {
             securityLevel: "loose", // 升级后无 https://github.com/siyuan-note/siyuan/issues/3587，可使用该选项
             altFontFamily: "sans-serif",

package/src/ts/markdown/previewRender.ts

@@ -62,6 +62,7 @@ export const md2html = (mdText: string, options?: IPreviewOptions) => {
         const lute = setLute({
             autoSpace: mergedOptions.markdown.autoSpace,
             callout: mergedOptions.markdown.callout,
+            inlineMath: mergedOptions.markdown.inlineMath,
             gfmAutoLink: mergedOptions.markdown.gfmAutoLink,
             codeBlockPreview: mergedOptions.markdown.codeBlockPreview,
             emojiSite: mergedOptions.emojiPath,

package/src/ts/markdown/setLute.ts

@@ -6,6 +6,7 @@ export const setLute = (options: ILuteOptions) => {
     lute.SetInlineMathAllowDigitAfterOpenMarker(options.inlineMathDigit);
     lute.SetAutoSpace(options.autoSpace);
     lute.SetCallout(options.callout);
+    lute.SetInlineMath(options.inlineMath);
     lute.SetToC(options.toc);
     lute.SetFootnotes(options.footnotes);
     lute.SetFixTermTypo(options.fixTermTypo);

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