:recycle: 移除 sv 模式工具栏高亮

src/ts/ir/highlightToolbarIR.ts

@@ -1,9 +1,64 @@
-import {disableToolbar, enableToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
-import {hasClosestByMatchTag} from "../util/hasClosest";
-import {highlightToolbarIRSV} from "../util/highlightToolbar";
+import {Constants} from "../constants";
+import {disableToolbar, enableToolbar, removeCurrentToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
+import {hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest";
+import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
+import {getEditorRange, selectIsEditor} from "../util/selection";
 
 export const highlightToolbarIR = (vditor: IVditor) => {
-    highlightToolbarIRSV(vditor, (typeElement: HTMLElement) => {
+    clearTimeout(vditor[vditor.currentMode].hlToolbarTimeoutId);
+    vditor[vditor.currentMode].hlToolbarTimeoutId = window.setTimeout(() => {
+        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        if (!selectIsEditor(vditor[vditor.currentMode].element)) {
+            return;
+        }
+
+        removeCurrentToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
+        enableToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
+
+        const range = getEditorRange(vditor[vditor.currentMode].element);
+        let typeElement = range.startContainer as HTMLElement;
+        if (range.startContainer.nodeType === 3) {
+            typeElement = range.startContainer.parentElement;
+        }
+        if (typeElement.classList.contains("vditor-reset")) {
+            typeElement = typeElement.childNodes[range.startOffset] as HTMLElement;
+        }
+
+        const headingElement = vditor.currentMode === "sv" ?
+            hasClosestByAttribute(typeElement, "data-type", "heading") : hasClosestByHeadings(typeElement);
+        if (headingElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["headings"]);
+        }
+
+        const quoteElement =
+            vditor.currentMode === "sv" ? hasClosestByAttribute(typeElement, "data-type", "blockquote") :
+                hasClosestByMatchTag(typeElement, "BLOCKQUOTE");
+        if (quoteElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["quote"]);
+        }
+
+        const strongElement = hasClosestByAttribute(typeElement, "data-type", "strong");
+        if (strongElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["bold"]);
+        }
+
+        const emElement = hasClosestByAttribute(typeElement, "data-type", "em");
+        if (emElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["italic"]);
+        }
+
+        const sElement = hasClosestByAttribute(typeElement, "data-type", "s");
+        if (sElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["strike"]);
+        }
+
+        const aElement = hasClosestByAttribute(typeElement, "data-type", "a");
+        if (aElement) {
+            setCurrentToolbar(vditor.toolbar.elements, ["link"]);
+        }
+
         const liElement = hasClosestByMatchTag(typeElement, "LI");
         if (liElement) {
             if (liElement.classList.contains("vditor-task")) {
@@ -17,5 +72,26 @@ export const highlightToolbarIR = (vditor: IVditor) => {
         } else {
             disableToolbar(vditor.toolbar.elements, ["outdent", "indent"]);
         }
-    });
+
+        const codeBlockElement = hasClosestByAttribute(typeElement, "data-type", "code-block");
+        if (codeBlockElement) {
+            disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
+                "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"]);
+            setCurrentToolbar(vditor.toolbar.elements, ["code"]);
+        }
+
+        const codeElement = hasClosestByAttribute(typeElement, "data-type", "code");
+        if (codeElement) {
+            disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
+                "list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
+            setCurrentToolbar(vditor.toolbar.elements, ["inline-code"]);
+        }
+
+        const tableElement = hasClosestByAttribute(typeElement, "data-type", "table");
+        if (tableElement) {
+            disableToolbar(vditor.toolbar.elements, ["headings", "list", "ordered-list", "check", "line",
+                "quote", "code", "table"]);
+        }
+
+    }, 200);
 };

src/ts/sv/highlightToolbarSV.ts

@@ -1,15 +0,0 @@
-import {setCurrentToolbar} from "../toolbar/setToolbar";
-import {hasClosestByAttribute} from "../util/hasClosest";
-import {highlightToolbarIRSV} from "../util/highlightToolbar";
-
-export const highlightToolbarSV = (vditor: IVditor) => {
-    highlightToolbarIRSV(vditor, (typeElement: HTMLElement) => {
-        if (hasClosestByAttribute(typeElement, "data-type", "ul")) {
-            setCurrentToolbar(vditor.toolbar.elements, ["list"]);
-        } else if (hasClosestByAttribute(typeElement, "data-type", "ol")) {
-            setCurrentToolbar(vditor.toolbar.elements, ["ordered-list"]);
-        } else if (hasClosestByAttribute(typeElement, "data-type", "task")) {
-            setCurrentToolbar(vditor.toolbar.elements, ["check"]);
-        }
-    });
-};

src/ts/sv/index.ts

@@ -2,7 +2,6 @@ import {isCtrl, isFirefox} from "../util/compatibility";
 import {blurEvent, dropEvent, focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommonEvent";
 import {paste} from "../util/fixBrowserBehavior";
 import {getSelectText} from "../util/getSelectText";
-import {highlightToolbarSV} from "./highlightToolbarSV";
 import {inputEvent} from "./inputEvent";
 
 class Editor {
@@ -82,15 +81,10 @@ class Editor {
             inputEvent(vditor, event);
         });
 
-        this.element.addEventListener("click", (event: InputEvent) => {
-            highlightToolbarSV(vditor);
-        });
-
         this.element.addEventListener("keyup", (event) => {
             if (event.isComposing || isCtrl(event)) {
                 return;
             }
-            highlightToolbarSV(vditor);
             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 === "SPAN"

src/ts/sv/process.ts

@@ -3,7 +3,6 @@ import {accessLocalStorage} from "../util/compatibility";
 import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
 import {log} from "../util/log";
 import {getEditorRange, setRangeByWbr} from "../util/selection";
-import {highlightToolbarSV} from "./highlightToolbarSV";
 import {inputEvent} from "./inputEvent";
 
 export const processSpinVditorSVDOM = (html: string, vditor: IVditor) => {
@@ -81,17 +80,6 @@ export const processHeading = (vditor: IVditor, value: string) => {
         } else {
             document.execCommand("insertHTML", false, value);
         }
-        highlightToolbarSV(vditor);
-    }
-};
-
-const removeInline = (range: Range, vditor: IVditor, type: string) => {
-    const inlineElement = hasClosestByAttribute(range.startContainer, "data-type", type) as HTMLElement;
-    if (inlineElement) {
-        inlineElement.firstElementChild.remove();
-        inlineElement.lastElementChild.remove();
-        range.insertNode(document.createElement("wbr"));
-        inlineElement.outerHTML = inlineElement.firstElementChild.innerHTML;
     }
 };
 
@@ -102,130 +90,78 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
     if (typeElement.nodeType === 3) {
         typeElement = typeElement.parentElement;
     }
-    // 移除
-    if (actionBtn.classList.contains("vditor-menu--current")) {
-        if (commandName === "quote") {
-            const quoteElement = hasClosestByAttribute(range.startContainer, "data-type", "blockquote");
-            if (quoteElement) {
-                quoteElement.querySelectorAll('[data-type="blockquote-line"]').forEach((item: HTMLElement) => {
-                    item.firstElementChild.remove();
-                });
-                inputEvent(vditor);
-                highlightToolbarSV(vditor);
-                return;
-            }
-        } else if (commandName === "link") {
-            const aElement = hasClosestByAttribute(range.startContainer, "data-type", "a") as HTMLElement;
-            if (aElement) {
-                const aTextElement = hasClosestByAttribute(range.startContainer, "data-type", "link-text");
-                if (aTextElement) {
-                    range.insertNode(document.createElement("wbr"));
-                    aElement.outerHTML = aTextElement.innerHTML;
-                } else {
-                    aElement.outerHTML = aElement.querySelector('[data-type="link-text"]').innerHTML + "<wbr>";
-                }
-            }
-        } else if (commandName === "italic") {
-            removeInline(range, vditor, "em");
-        } else if (commandName === "bold") {
-            removeInline(range, vditor, "strong");
-        } else if (commandName === "strike") {
-            removeInline(range, vditor, "s");
-        } else if (commandName === "inline-code") {
-            removeInline(range, vditor, "code");
-        } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
-            const listElement = hasClosestBlock(range.startContainer);
-            if (listElement) {
-                listElement.querySelectorAll('[data-type="li-marker"').forEach((item: HTMLElement) => {
-                    item.remove();
-                });
-                listElement.querySelectorAll('[data-type="task-marker"').forEach((item: HTMLElement) => {
-                    item.remove();
-                });
-                inputEvent(vditor);
-                highlightToolbarSV(vditor);
-                return;
-            }
-        }
-    } else {
-        // 添加
-        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">
+    // 添加
+    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);
-        if (commandName === "line") {
-            if (blockElement) {
-                const hrHTML = `<div data-type="thematic-break" class="vditor-sv__marker"><span class="vditor-sv__marker">---
+        setRangeByWbr(vditor.sv.element, range);
+    }
+    const blockElement = hasClosestBlock(range.startContainer);
+    if (commandName === "line") {
+        if (blockElement) {
+            const hrHTML = `<div data-type="thematic-break" class="vditor-sv__marker"><span class="vditor-sv__marker">---
 
 </span></div><wbr>`;
-                if (blockElement.textContent.trim() === "") {
-                    blockElement.outerHTML = hrHTML;
-                } else {
-                    blockElement.insertAdjacentHTML("afterend", hrHTML);
-                }
-            }
-        } else if (commandName === "quote") {
-            if (blockElement) {
-                blockElement.insertAdjacentText("afterbegin", "> ");
-                inputEvent(vditor);
-                highlightToolbarSV(vditor);
-                return;
-            }
-        } else if (commandName === "link") {
-            let html;
-            if (range.toString() === "") {
-                html = `${prefix}${Lute.Caret}${suffix}`;
+            if (blockElement.textContent.trim() === "") {
+                blockElement.outerHTML = hrHTML;
             } else {
-                html = `${prefix}${range.toString()}${suffix.replace(")", Lute.Caret + ")")}`;
+                blockElement.insertAdjacentHTML("afterend", hrHTML);
             }
-            document.execCommand("insertHTML", false, html);
-            highlightToolbarSV(vditor);
+        }
+    } else if (commandName === "quote") {
+        if (blockElement) {
+            blockElement.insertAdjacentText("afterbegin", "> ");
+            inputEvent(vditor);
             return;
-        } else if (commandName === "italic" || commandName === "bold" || commandName === "strike"
-            || commandName === "inline-code" || commandName === "code" || commandName === "table") {
-            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") {
-                html = "\n" + html;
+        }
+    } else 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") {
+        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") {
+            html = "\n" + html;
+        }
+        document.execCommand("insertHTML", false, html);
+        return;
+    } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
+        if (blockElement) {
+            const type = blockElement.getAttribute("data-type");
+            let listMarker = "* ";
+            if (commandName === "check") {
+                listMarker = "* [ ] ";
+            } else if (commandName === "ordered-list") {
+                listMarker = "1. ";
             }
-            document.execCommand("insertHTML", false, html);
-            highlightToolbarSV(vditor);
-            return;
-        } else if (commandName === "check" || commandName === "list" || commandName === "ordered-list") {
-            if (blockElement) {
-                const type = blockElement.getAttribute("data-type");
-                let listMarker = "* ";
-                if (commandName === "check") {
-                    listMarker = "* [ ] ";
-                } else if (commandName === "ordered-list") {
-                    listMarker = "1. ";
-                }
-                if (type !== "ul" && type !== "ol" && type !== "task") {
-                    blockElement.insertAdjacentText("afterbegin", listMarker);
-                } else {
-                    blockElement.querySelectorAll('[data-type="li-marker"').forEach((item: HTMLElement) => {
-                        item.textContent = listMarker;
+            if (type !== "ul" && type !== "ol" && type !== "task") {
+                blockElement.insertAdjacentText("afterbegin", listMarker);
+            } else {
+                blockElement.querySelectorAll('[data-type="li-marker"').forEach((item: HTMLElement) => {
+                    item.textContent = listMarker;
+                });
+                if (commandName !== "check") {
+                    blockElement.querySelectorAll('[data-type="task-marker"').forEach((item: HTMLElement) => {
+                        item.remove();
                     });
-                    if (commandName !== "check") {
-                        blockElement.querySelectorAll('[data-type="task-marker"').forEach((item: HTMLElement) => {
-                            item.remove();
-                        });
-                    }
                 }
-                inputEvent(vditor);
-                highlightToolbarSV(vditor);
-                return;
             }
+            inputEvent(vditor);
+            return;
         }
     }
     setRangeByWbr(vditor.sv.element, range);
     processAfterRender(vditor);
-    highlightToolbarSV(vditor);
 };

src/ts/util/highlightToolbar.ts

@@ -1,98 +1,10 @@
-import {Constants} from "../constants";
 import {highlightToolbarIR} from "../ir/highlightToolbarIR";
-import {highlightToolbarSV} from "../sv/highlightToolbarSV";
-import {disableToolbar, enableToolbar, removeCurrentToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
-import {hasClosestByAttribute, hasClosestByMatchTag} from "../util/hasClosest";
-import {hasClosestByHeadings} from "../util/hasClosestByHeadings";
-import {getEditorRange, selectIsEditor} from "../util/selection";
 import {highlightToolbarWYSIWYG} from "../wysiwyg/highlightToolbarWYSIWYG";
 
-export const highlightToolbarIRSV = (vditor: IVditor, processLi: (node: HTMLElement) => void) => {
-    clearTimeout(vditor[vditor.currentMode].hlToolbarTimeoutId);
-    vditor[vditor.currentMode].hlToolbarTimeoutId = window.setTimeout(() => {
-        if (vditor[vditor.currentMode].element.getAttribute("contenteditable") === "false") {
-            return;
-        }
-        if (!selectIsEditor(vditor[vditor.currentMode].element)) {
-            return;
-        }
-
-        removeCurrentToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
-        enableToolbar(vditor.toolbar.elements, Constants.EDIT_TOOLBARS);
-
-        const range = getEditorRange(vditor[vditor.currentMode].element);
-        let typeElement = range.startContainer as HTMLElement;
-        if (range.startContainer.nodeType === 3) {
-            typeElement = range.startContainer.parentElement;
-        }
-        if (typeElement.classList.contains("vditor-reset")) {
-            typeElement = typeElement.childNodes[range.startOffset] as HTMLElement;
-        }
-
-        const headingElement = vditor.currentMode === "sv" ?
-            hasClosestByAttribute(typeElement, "data-type", "heading") : hasClosestByHeadings(typeElement);
-        if (headingElement) {
-            setCurrentToolbar(vditor.toolbar.elements, ["headings"]);
-        }
-
-        const quoteElement =
-            vditor.currentMode === "sv" ? hasClosestByAttribute(typeElement, "data-type", "blockquote") :
-                hasClosestByMatchTag(typeElement, "BLOCKQUOTE");
-        if (quoteElement) {
-            setCurrentToolbar(vditor.toolbar.elements, ["quote"]);
-        }
-
-        const strongElement = hasClosestByAttribute(typeElement, "data-type", "strong");
-        if (strongElement) {
-            setCurrentToolbar(vditor.toolbar.elements, ["bold"]);
-        }
-
-        const emElement = hasClosestByAttribute(typeElement, "data-type", "em");
-        if (emElement) {
-            setCurrentToolbar(vditor.toolbar.elements, ["italic"]);
-        }
-
-        const sElement = hasClosestByAttribute(typeElement, "data-type", "s");
-        if (sElement) {
-            setCurrentToolbar(vditor.toolbar.elements, ["strike"]);
-        }
-
-        const aElement = hasClosestByAttribute(typeElement, "data-type", "a");
-        if (aElement) {
-            setCurrentToolbar(vditor.toolbar.elements, ["link"]);
-        }
-
-        processLi(typeElement);
-
-        const codeBlockElement = hasClosestByAttribute(typeElement, "data-type", "code-block");
-        if (codeBlockElement) {
-            disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
-                "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"]);
-            setCurrentToolbar(vditor.toolbar.elements, ["code"]);
-        }
-
-        const codeElement = hasClosestByAttribute(typeElement, "data-type", "code");
-        if (codeElement) {
-            disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "line", "quote",
-                "list", "ordered-list", "check", "code", "upload", "link", "table", "record"]);
-            setCurrentToolbar(vditor.toolbar.elements, ["inline-code"]);
-        }
-
-        const tableElement = hasClosestByAttribute(typeElement, "data-type", "table");
-        if (tableElement) {
-            disableToolbar(vditor.toolbar.elements, ["headings", "list", "ordered-list", "check", "line",
-                "quote", "code", "table"]);
-        }
-
-    }, 200);
-};
-
 export const highlightToolbar = (vditor: IVditor) => {
     if (vditor.currentMode === "wysiwyg") {
         highlightToolbarWYSIWYG(vditor);
     } else if (vditor.currentMode === "ir") {
         highlightToolbarIR(vditor);
-    } else if (vditor.currentMode === "sv") {
-        highlightToolbarSV(vditor);
     }
 };