:recycle: highlightToolbar

demo/index.js

@@ -51,7 +51,7 @@ if (window.innerWidth < 768) {
 
 window.vditor = new Vditor('vditor', {
   toolbar,
-  mode: 'sv',
+  // mode: 'sv',
   height: window.innerHeight + 100,
   outline: true,
   debugger: true,

src/index.ts

@@ -103,8 +103,8 @@ class Vditor extends VditorMethod {
             this.vditor.upload = new Upload();
         }
 
-        const lutePath = `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`;
-        // const lutePath = "src/js/lute/lute.min.js";
+        // const lutePath = `http://192.168.0.107:9090/lute.min.js?${new Date().getTime()}`;
+        const lutePath = "src/js/lute/lute.min.js";
         // const lutePath = `${mergedOptions.cdn}/dist/js/lute/lute.min.js`;
         addScript(lutePath, "vditorLuteScript").then(() => {
             this.vditor.lute = setLute({

src/ts/ir/highlightToolbar.ts → src/ts/ir/highlightToolbarIR.ts

@@ -1,8 +1,8 @@
 import {disableToolbar, enableToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
 import {hasClosestByMatchTag} from "../util/hasClosest";
-import {highlightToolbarIRSV} from "../util/highlightToolbarIRSV";
+import {highlightToolbarIRSV} from "../util/highlightToolbar";
 
-export const highlightToolbar = (vditor: IVditor) => {
+export const highlightToolbarIR = (vditor: IVditor) => {
     highlightToolbarIRSV(vditor, (typeElement: HTMLElement) => {
         const liElement = hasClosestByMatchTag(typeElement, "LI");
         if (liElement) {

src/ts/ir/index.ts

@@ -9,7 +9,7 @@ import {
     setSelectionFocus,
 } from "../util/selection";
 import {expandMarker} from "./expandMarker";
-import {highlightToolbar} from "./highlightToolbar";
+import {highlightToolbarIR} from "./highlightToolbarIR";
 import {input} from "./input";
 import {processAfterRender, processHint} from "./process";
 
@@ -142,7 +142,7 @@ class IR {
             }
 
             expandMarker(range, vditor);
-            highlightToolbar(vditor);
+            highlightToolbarIR(vditor);
         });
 
         this.element.addEventListener("keyup", (event) => {
@@ -152,7 +152,7 @@ class IR {
             if (event.key === "Enter") {
                 scrollCenter(vditor);
             }
-            highlightToolbar(vditor);
+            highlightToolbarIR(vditor);
             if ((event.key === "Backspace" || event.key === "Delete") &&
                 vditor.ir.element.innerHTML !== "" && vditor.ir.element.childNodes.length === 1 &&
                 vditor.ir.element.firstElementChild && vditor.ir.element.firstElementChild.tagName === "P"

src/ts/ir/process.ts

@@ -4,7 +4,7 @@ import {accessLocalStorage, isSafari} from "../util/compatibility";
 import {listToggle, renderToc} from "../util/fixBrowserBehavior";
 import {hasClosestBlock, hasClosestByAttribute, hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {getEditorRange, getSelectPosition, setRangeByWbr, setSelectionFocus} from "../util/selection";
-import {highlightToolbar} from "./highlightToolbar";
+import {highlightToolbarIR} from "./highlightToolbarIR";
 
 export const processHint = (vditor: IVditor) => {
     vditor.hint.render(vditor);
@@ -87,7 +87,7 @@ export const processHeading = (vditor: IVditor, value: string) => {
             range.collapse(true);
             document.execCommand("insertHTML", false, value);
         }
-        highlightToolbar(vditor);
+        highlightToolbarIR(vditor);
         renderToc(vditor);
     }
 };
@@ -193,5 +193,5 @@ export const processToolbar = (vditor: IVditor, actionBtn: Element, prefix: stri
     }
     setRangeByWbr(vditor.ir.element, range);
     processAfterRender(vditor);
-    highlightToolbar(vditor);
+    highlightToolbarIR(vditor);
 };

src/ts/sv/highlightToolbar.ts → src/ts/sv/highlightToolbarSV.ts

@@ -1,8 +1,8 @@
 import {setCurrentToolbar} from "../toolbar/setToolbar";
 import {hasClosestByAttribute} from "../util/hasClosest";
-import {highlightToolbarIRSV} from "../util/highlightToolbarIRSV";
+import {highlightToolbarIRSV} from "../util/highlightToolbar";
 
-export const highlightToolbar = (vditor: IVditor) => {
+export const highlightToolbarSV = (vditor: IVditor) => {
     highlightToolbarIRSV(vditor, (typeElement: HTMLElement) => {
         const ulElement = hasClosestByAttribute(typeElement, "data-type", "ul");
         if (ulElement) {

src/ts/sv/index.ts

@@ -2,7 +2,7 @@ import {uploadFiles} from "../upload/index";
 import {isCtrl} from "../util/compatibility";
 import {blurEvent, focusEvent, hotkeyEvent, selectEvent} from "../util/editorCommonEvent";
 import {getSelectText} from "./getSelectText";
-import {highlightToolbar} from "./highlightToolbar";
+import {highlightToolbarSV} from "./highlightToolbarSV";
 import {html2md} from "./html2md";
 import {inputEvent} from "./inputEvent";
 import {insertText} from "./insertText";
@@ -127,14 +127,14 @@ class Editor {
         });
 
         this.element.addEventListener("click", (event: InputEvent) => {
-            highlightToolbar(vditor);
+            highlightToolbarSV(vditor);
         });
 
         this.element.addEventListener("keyup", (event) => {
             if (event.isComposing || isCtrl(event)) {
                 return;
             }
-            highlightToolbar(vditor);
+            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 === "DIV"

src/ts/toolbar/EditMode.ts

@@ -1,14 +1,12 @@
 import {Constants} from "../constants";
 import {i18n} from "../i18n";
-import {highlightToolbar as IRHighlightToolbar} from "../ir/highlightToolbar";
 import {processAfterRender} from "../ir/process";
 import {getMarkdown} from "../markdown/getMarkdown";
-import {highlightToolbar as SVHighlightToolbar} from "../sv/highlightToolbar";
 import {processAfterRender as processSVAfterRender} from "../sv/process";
 import {setPadding, setTypewriterPosition} from "../ui/initUI";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
+import {highlightToolbar} from "../util/highlightToolbar";
 import {processCodeRender} from "../util/processCode";
-import {highlightToolbar} from "../wysiwyg/highlightToolbar";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
 import {
@@ -66,12 +64,6 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
         vditor.ir.element.querySelectorAll(".vditor-ir__preview[data-render='2']").forEach((item: HTMLElement) => {
             processCodeRender(item, vditor);
         });
-
-        if (typeof event !== "string") {
-            // 初始化不 focus
-            vditor.ir.element.focus();
-            IRHighlightToolbar(vditor);
-        }
     } else if (type === "wysiwyg") {
         hideToolbar(vditor.toolbar.elements, ["both"]);
         showToolbar(vditor.toolbar.elements, ["outdent", "indent", "outline", "insert-before", "insert-after"]);
@@ -88,12 +80,6 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
             enableHint: false,
             enableInput: false,
         });
-
-        if (typeof event !== "string") {
-            // 初始化不 focus
-            vditor.wysiwyg.element.focus();
-            highlightToolbar(vditor);
-        }
         vditor.wysiwyg.popover.style.display = "none";
     } else if (type === "sv") {
         showToolbar(vditor.toolbar.elements, ["both"]);
@@ -113,13 +99,13 @@ export const setEditMode = (vditor: IVditor, type: string, event: Event | string
             enableHint: false,
             enableInput: false,
         });
-        if (typeof event !== "string") {
-            // 初始化不 focus
-            vditor.sv.element.focus();
-            SVHighlightToolbar(vditor);
-        }
         setPadding(vditor);
     }
+    if (typeof event !== "string") {
+        // 初始化不 focus
+        vditor[vditor.currentMode].element.focus();
+        highlightToolbar(vditor);
+    }
     if (typeof event === "string") {
         vditor.outline.render(vditor);
     }

src/ts/util/fixBrowserBehavior.ts

@@ -1,5 +1,4 @@
 import {Constants} from "../constants";
-import {highlightToolbar as highlightToolbarIR} from "../ir/highlightToolbar";
 import {input as IRInput} from "../ir/input";
 import {processAfterRender} from "../ir/process";
 import {processAfterRender as processSVAfterRender} from "../sv/process";
@@ -7,7 +6,6 @@ import {uploadFiles} from "../upload";
 import {setHeaders} from "../upload/setHeaders";
 import {processCodeRender, processPasteCode} from "../util/processCode";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
-import {highlightToolbar} from "../wysiwyg/highlightToolbar";
 import {input} from "../wysiwyg/input";
 import {isCtrl, isFirefox} from "./compatibility";
 import {scrollCenter} from "./editorCommonEvent";
@@ -20,6 +18,7 @@ import {
 } from "./hasClosest";
 import {getLastNode} from "./hasClosest";
 import {hasClosestByHeadings} from "./hasClosestByHeadings";
+import {highlightToolbar} from "./highlightToolbar";
 import {matchHotKey} from "./hotKey";
 import {
     getEditorRange,
@@ -77,11 +76,7 @@ export const insertEmptyBlock = (vditor: IVditor, position: InsertPosition) => {
     if (blockElement) {
         blockElement.insertAdjacentHTML(position, `<p data-block="0">${Constants.ZWSP}<wbr>\n</p>`);
         setRangeByWbr(vditor[vditor.currentMode].element, range);
-        if (vditor.currentMode === "ir") {
-            highlightToolbarIR(vditor);
-        } else {
-            highlightToolbar(vditor);
-        }
+        highlightToolbar(vditor);
         execAfterRender(vditor);
     }
 };
@@ -273,9 +268,7 @@ export const listIndent = (vditor: IVditor, liElement: HTMLElement, range: Range
                 });
         }
         execAfterRender(vditor);
-        if (vditor.currentMode === "wysiwyg") {
-            highlightToolbar(vditor);
-        }
+        highlightToolbar(vditor);
     } else {
         vditor[vditor.currentMode].element.focus();
     }
@@ -330,9 +323,7 @@ export const listOutdent = (vditor: IVditor, liElement: HTMLElement, range: Rang
                 });
         }
         execAfterRender(vditor);
-        if (vditor.currentMode === "wysiwyg") {
-            highlightToolbar(vditor);
-        }
+        highlightToolbar(vditor);
     } else {
         vditor[vditor.currentMode].element.focus();
     }
@@ -433,13 +424,17 @@ export const renderToc = (vditor: IVditor) => {
     tocElement.innerHTML = tocHTML || "[ToC]";
 };
 
-export const execAfterRender = (vditor: IVditor) => {
+export const execAfterRender = (vditor: IVditor, options = {
+    enableAddUndoStack: true,
+    enableHint: false,
+    enableInput: true,
+}) => {
     if (vditor.currentMode === "wysiwyg") {
-        afterRenderEvent(vditor);
+        afterRenderEvent(vditor, options);
     } else if (vditor.currentMode === "ir") {
-        processAfterRender(vditor);
+        processAfterRender(vditor, options);
     } else if (vditor.currentMode === "sv") {
-        processSVAfterRender(vditor);
+        processSVAfterRender(vditor, options);
     }
 };
 
@@ -668,9 +663,7 @@ export const deleteColumn =
             const cells = tableElement.rows[i].cells;
             if (cells.length === 1) {
                 tableElement.remove();
-                if (vditor.currentMode === "wysiwyg") {
-                    highlightToolbar(vditor);
-                }
+                highlightToolbar(vditor);
                 break;
             }
             cells[index].remove();

src/ts/util/highlightToolbarIRSV.ts → src/ts/util/highlightToolbar.ts

@@ -1,8 +1,11 @@
 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);
@@ -80,3 +83,13 @@ export const highlightToolbarIRSV = (vditor: IVditor, processLi: (node: HTMLElem
 
     }, 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);
+    }
+};

src/ts/wysiwyg/highlightToolbar.ts → src/ts/wysiwyg/highlightToolbarWYSIWYG.ts

@@ -28,7 +28,7 @@ import {getEditorRange, selectIsEditor, setRangeByWbr, setSelectionFocus} from "
 import {afterRenderEvent} from "./afterRenderEvent";
 import {removeBlockElement} from "./processKeydown";
 
-export const highlightToolbar = (vditor: IVditor) => {
+export const highlightToolbarWYSIWYG = (vditor: IVditor) => {
     clearTimeout(vditor.wysiwyg.hlToolbarTimeoutId);
     vditor.wysiwyg.hlToolbarTimeoutId = window.setTimeout(() => {
         if (vditor.wysiwyg.element.getAttribute("contenteditable") === "false") {
@@ -680,7 +680,7 @@ const genUp = (range: Range, element: HTMLElement, vditor: IVditor) => {
         previousElement.insertAdjacentElement("beforebegin", element);
         setRangeByWbr(vditor.wysiwyg.element, range);
         afterRenderEvent(vditor);
-        highlightToolbar(vditor);
+        highlightToolbarWYSIWYG(vditor);
         scrollCenter(vditor);
     };
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", upElement);
@@ -702,7 +702,7 @@ const genDown = (range: Range, element: HTMLElement, vditor: IVditor) => {
         nextElement.insertAdjacentElement("afterend", element);
         setRangeByWbr(vditor.wysiwyg.element, range);
         afterRenderEvent(vditor);
-        highlightToolbar(vditor);
+        highlightToolbarWYSIWYG(vditor);
         scrollCenter(vditor);
     };
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", downElement);
@@ -721,7 +721,7 @@ const genClose = (element: HTMLElement, vditor: IVditor) => {
         setSelectionFocus(range);
         element.remove();
         afterRenderEvent(vditor);
-        highlightToolbar(vditor);
+        highlightToolbarWYSIWYG(vditor);
     };
     vditor.wysiwyg.popover.insertAdjacentElement("beforeend", close);
 };

src/ts/wysiwyg/index.ts

@@ -15,7 +15,7 @@ import {
     setRangeByWbr,
 } from "../util/selection";
 import {afterRenderEvent} from "./afterRenderEvent";
-import {genImagePopover, highlightToolbar} from "./highlightToolbar";
+import {genImagePopover, highlightToolbarWYSIWYG} from "./highlightToolbarWYSIWYG";
 import {getRenderElementNextNode, modifyPre} from "./inlineTag";
 import {input} from "./input";
 import {showCode} from "./showCode";
@@ -264,7 +264,7 @@ class WYSIWYG {
                 }
             }
 
-            highlightToolbar(vditor);
+            highlightToolbarWYSIWYG(vditor);
 
             // 点击后光标落于预览区，需展开代码块
             let previewElement = hasClosestByClassName(event.target, "vditor-wysiwyg__preview");
@@ -304,7 +304,7 @@ class WYSIWYG {
             // 没有被块元素包裹
             modifyPre(vditor, range);
 
-            highlightToolbar(vditor);
+            highlightToolbarWYSIWYG(vditor);
 
             if (event.key !== "ArrowDown" && event.key !== "ArrowRight" && event.key !== "Backspace"
                 && event.key !== "ArrowLeft" && event.key !== "ArrowUp") {

src/ts/wysiwyg/toolbarEvent.ts

@@ -5,7 +5,7 @@ import {hasClosestBlock, hasClosestByMatchTag} from "../util/hasClosest";
 import {processCodeRender} from "../util/processCode";
 import {getEditorRange, setRangeByWbr, setSelectionFocus} from "../util/selection";
 import {afterRenderEvent} from "./afterRenderEvent";
-import {genAPopover, highlightToolbar} from "./highlightToolbar";
+import {genAPopover, highlightToolbarWYSIWYG} from "./highlightToolbarWYSIWYG";
 import {getNextHTML, getPreviousHTML, splitElement} from "./inlineTag";
 
 const cancelBES = (range: Range, vditor: IVditor, commandName: string) => {
@@ -315,7 +315,7 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element, event: Event)
     }
 
     if (useHighlight) {
-        highlightToolbar(vditor);
+        highlightToolbarWYSIWYG(vditor);
     }
 
     if (useRender) {