🎨 Vanessa219#27 toolbar

src/ts/ir/highlightToolbar.ts

@@ -0,0 +1,35 @@
+import {enableToolbar, removeCurrentToolbar, setCurrentToolbar} from "../toolbar/setToolbar";
+import {hasClosestByTag} from "../util/hasClosest";
+import {getEditorRange, selectIsEditor} from "../util/selection";
+
+export const highlightToolbar = (vditor: IVditor) => {
+    clearTimeout(vditor.ir.hlToolbarTimeoutId);
+    vditor.ir.hlToolbarTimeoutId = window.setTimeout(() => {
+        if (vditor.ir.element.getAttribute("contenteditable") === "false") {
+            return;
+        }
+        if (!selectIsEditor(vditor.ir.element)) {
+            return;
+        }
+
+        const allToolbar = ["headings", "bold", "italic", "strike", "line", "quote",
+            "list", "ordered-list", "check", "code", "inline-code", "upload", "link", "table", "record"];
+        removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
+        enableToolbar(vditor.toolbar.elements, allToolbar);
+
+        const range = getEditorRange(vditor.ir.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 = hasClosestByTag(typeElement, "H") as HTMLElement;
+        if (headingElement && headingElement.tagName.length === 2) {
+            setCurrentToolbar(vditor.toolbar.elements, ["headings"]);
+        }
+
+    }, 200);
+};

src/ts/ir/index.ts

@@ -6,12 +6,14 @@ import {hasClosestByClassName, hasClosestByMatchTag} from "../util/hasClosest";
 import {processPasteCode} from "../util/processPasteCode";
 import {getSelectPosition, insertHTML, setSelectionByPosition, setSelectionFocus} from "../util/selection";
 import {expandMarker} from "./expandMarker";
+import {highlightToolbar} from "./highlightToolbar";
 import {input} from "./input";
 import {processAfterRender, processCodeRender} from "./process";
 
 class IR {
     public element: HTMLPreElement;
     public processTimeoutId: number;
+    public hlToolbarTimeoutId: number;
     public composingLock: boolean = false;
     public preventInput: boolean;
 
@@ -191,6 +193,7 @@ class IR {
             }
 
             expandMarker(getSelection().getRangeAt(0), vditor);
+            highlightToolbar(vditor);
 
             // 点击后光标落于预览区
             const range = getSelection().getRangeAt(0);
@@ -211,6 +214,7 @@ class IR {
             if (event.isComposing || isCtrl(event)) {
                 return;
             }
+            highlightToolbar(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/input.ts

@@ -41,6 +41,7 @@ export const input = (vditor: IVditor, range: Range) => {
         }
 
         if (startSpace || endSpace) {
+            blockElement.classList.add("vditor-ir__node--expand");
             return;
         }
     }

src/ts/ir/process.ts

@@ -8,8 +8,9 @@ import {mathRender} from "../markdown/mathRender";
 import {mermaidRender} from "../markdown/mermaidRender";
 import {isSafari} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
-import {hasClosestByAttribute} from "../util/hasClosest";
-import {getEditorRange} from "../util/selection";
+import {hasClosestBlock, hasClosestByAttribute} from "../util/hasClosest";
+import {getEditorRange, setRangeByWbr} from "../util/selection";
+import {highlightToolbar} from "./highlightToolbar";
 
 export const processAfterRender = (vditor: IVditor, options = {
     enableAddUndoStack: true,
@@ -84,3 +85,40 @@ export const processCodeRender = (previewPanel: HTMLElement, vditor: IVditor) =>
         codeRender(previewPanel, vditor.options.lang);
     }
 };
+
+export const processHeading = (vditor: IVditor, value: string) => {
+    const range = getSelection().getRangeAt(0);
+    const headingElement = hasClosestBlock(range.startContainer);
+    if (headingElement) {
+        if (value === "") {
+            const headingMarkerElement = headingElement.querySelector(".vditor-ir__marker--heading");
+            range.selectNodeContents(headingMarkerElement)
+            document.execCommand("delete");
+        } else {
+            range.selectNodeContents(headingElement)
+            range.collapse(true)
+            document.execCommand("insertHTML", false, value);
+        }
+        highlightToolbar(vditor);
+    }
+};
+
+export const processToolbar = (vditor: IVditor, actionBtn: Element) => {
+    const range = getEditorRange(vditor.ir.element);
+    const commandName = actionBtn.getAttribute("data-type");
+    // 移除
+    if (actionBtn.classList.contains("vditor-menu--current")) {
+
+    } else {
+        // 添加
+        if (commandName === "line") {
+            let element = range.startContainer as HTMLElement;
+            if (element.nodeType === 3) {
+                element = range.startContainer.parentElement;
+            }
+            element.insertAdjacentHTML("afterend", '<hr data-block="0"><p data-block="0">\n<wbr></p>');
+            setRangeByWbr(vditor.ir.element, range);
+            processAfterRender(vditor);
+        }
+    }
+}

src/ts/ir/processKeydown.ts

@@ -212,4 +212,10 @@ export const processKeydown = (vditor: IVditor, event: KeyboardEvent) => {
             }
         }
     }
+
+    if (event.key === "Enter") {
+        scrollCenter(vditor.ir.element);
+    }
+
+    return false;
 };

src/ts/toolbar/EditMode.ts

@@ -8,7 +8,7 @@ import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
-import {disableToolbar, enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
+import {enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
 
 export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
     if (event) {
@@ -27,10 +27,10 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
     enableToolbar(vditor.toolbar.elements, allToolbar);
     removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
 
+    const irUnUsedToolbar = ["bold", "italic", "strike", "link", "list", "ordered-list", "check", "quote", "code", "inline-code", "table"]
+    showToolbar(vditor.toolbar.elements, irUnUsedToolbar)
     if (type === "ir") {
-        hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
-        disableToolbar(vditor.toolbar.elements, ["headings", "bold", "italic", "strike", "link", "list", "ordered-list", "check",
-            "line", "quote", "code", "inline-code", "table"]);
+        hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"].concat(irUnUsedToolbar));
         vditor.irUndo.resetIcon(vditor);
         vditor.sv.element.style.display = "none";
         vditor.preview.element.style.display = "none";
@@ -48,7 +48,7 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
 
         if (event) {
             // 初始化不 focus
-           vditor.ir.element.focus();
+            vditor.ir.element.focus();
         }
         setPadding(vditor);
 

src/ts/toolbar/Headings.ts

@@ -1,5 +1,6 @@
 import headingsSVG from "../../assets/icons/headings.svg";
 import {Constants} from "../constants";
+import {processHeading} from "../ir/process";
 import {insertText} from "../sv/insertText";
 import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
@@ -39,6 +40,8 @@ export class Headings extends MenuItem {
             if (vditor.currentMode === "wysiwyg" && actionBtn.classList.contains("vditor-menu--current")) {
                 removeHeading(vditor);
                 afterRenderEvent(vditor);
+            } else if (vditor.currentMode === "ir" && actionBtn.classList.contains("vditor-menu--current")) {
+                processHeading(vditor, "");
             } else {
                 if (this.panelElement.style.display === "block") {
                     this.panelElement.style.display = "none";
@@ -55,6 +58,8 @@ export class Headings extends MenuItem {
                 if (vditor.currentMode === "wysiwyg") {
                     setHeading(vditor, (event.target as HTMLElement).getAttribute("data-tag"));
                     afterRenderEvent(vditor);
+                } else if (vditor.currentMode === "ir") {
+                    processHeading(vditor, (event.target as HTMLElement).getAttribute("data-value"));
                 } else {
                     insertText(vditor, (event.target as HTMLElement).getAttribute("data-value"), "",
                         false, true);

src/ts/toolbar/MenuItem.ts

@@ -4,6 +4,7 @@ import {insertText} from "../sv/insertText";
 import {getEventName} from "../util/compatibility";
 import {updateHotkeyTip} from "../util/compatibility";
 import {toolbarEvent} from "../wysiwyg/toolbarEvent";
+import {processToolbar} from "../ir/process";
 
 export class MenuItem {
     public element: HTMLElement;
@@ -30,6 +31,8 @@ export class MenuItem {
             }
             if (vditor.currentMode === "wysiwyg") {
                 toolbarEvent(vditor, this.element.children[0]);
+            } else if (vditor.currentMode === "ir") {
+                processToolbar(vditor, this.element.children[0]);
             } else {
                 insertText(vditor, this.menuItem.prefix || "", this.menuItem.suffix || "",
                     replace, true);

src/ts/wysiwyg/toolbarEvent.ts

@@ -153,17 +153,10 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
 
     let useHighlight = true;
     let useRender = true;
-    if (actionBtn.classList.contains(Constants.CLASS_MENU_DISABLED)) {
-        return;
-    }
     if (vditor.wysiwyg.element.querySelector("wbr")) {
         vditor.wysiwyg.element.querySelector("wbr").remove();
     }
     const range = getEditorRange(vditor.wysiwyg.element);
-    if (!vditor.wysiwyg.element.contains(range.startContainer)) {
-        // 光标位于编辑器之外
-        vditor.wysiwyg.element.focus();
-    }
 
     let commandName = actionBtn.getAttribute("data-type");
 

types/index.d.ts

@@ -432,5 +432,6 @@ interface IVditor {
         composingLock: boolean,
         preventInput: boolean,
         processTimeoutId: number,
+        hlToolbarTimeoutId: number,
     };
 }