🎨 fix #230

Vanessa219 · Mar 23, 2020 · b00a213 · b00a213
1 parent 67fa5a0
commit b00a213
Show file tree

Hide file tree

Showing 16 changed files with 77 additions and 46 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -153,9 +153,9 @@ class Vditor extends VditorMethod {
     public enable() {
         enableToolbar(this.vditor.toolbar.elements, ["emoji", "headings", "bold", "italic", "strike", "link",
             "list", "ordered-list", "check", "quote", "line", "code", "inline-code", "upload", "record", "table", "wysiwyg"]);
-        this.vditor.undo.enableIcon(this.vditor);
+        this.vditor.undo.resetIcon(this.vditor);
         this.vditor.sv.element.setAttribute("contenteditable", "true");
-        this.vditor.wysiwygUndo.enableIcon(this.vditor);
+        this.vditor.wysiwygUndo.resetIcon(this.vditor);
         this.vditor.wysiwyg.element.setAttribute("contenteditable", "true");
         this.vditor.ir.element.setAttribute("contenteditable", "true");
     }

diff --git a/src/ts/constants.ts b/src/ts/constants.ts
@@ -6,4 +6,5 @@ export {_VDITOR_VERSION as VDITOR_VERSION};
 
 export abstract class Constants {
     public static readonly ZWSP: string = "\u200b";
+    public static readonly CLASS_MENU_DISABLED: string = "vditor-menu--disabled";
 }
diff --git a/src/ts/toolbar/EditMode.ts b/src/ts/toolbar/EditMode.ts
@@ -7,7 +7,8 @@ import {getEventName, updateHotkeyTip} from "../util/compatibility";
 import {getMarkdown} from "../util/getMarkdown";
 import {renderDomByMd} from "../wysiwyg/renderDomByMd";
 import {MenuItem} from "./MenuItem";
-import {enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar, setToolbarEnabled} from "./setToolbar";
+import {disableToolbar, enableToolbar, hidePanel, hideToolbar, removeCurrentToolbar, showToolbar} from "./setToolbar";
+import {Constants} from "../constants";
 
 export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
     if (event) {
@@ -26,8 +27,8 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
 
     if (type === "ir") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
-        setToolbarEnabled(vditor.toolbar.elements, false);
-        setToolbarEnabled(vditor.toolbar.elements, true, ["edit-mode"]);
+        disableToolbar(vditor.toolbar.elements, allToolbar);
+        vditor.irUndo.resetIcon(vditor);
         vditor.sv.element.style.display = "none";
         vditor.preview.element.style.display = "none";
         vditor.wysiwyg.element.parentElement.style.display = "none";
@@ -49,8 +50,8 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
         setPadding(vditor);
     } else if (type === "wysiwyg") {
         hideToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
-        setToolbarEnabled(vditor.toolbar.elements)
-        vditor.toolbar.element.style.display = "block";
+        enableToolbar(vditor.toolbar.elements, allToolbar);
+        vditor.wysiwygUndo.resetIcon(vditor);
         vditor.sv.element.style.display = "none";
         vditor.preview.element.style.display = "none";
         vditor.wysiwyg.element.parentElement.style.display = "block";
@@ -67,10 +68,9 @@ export const setEditMode = (vditor: IVditor, type: string, event?: Event) => {
         setPadding(vditor);
     } else if (type === "sv") {
         showToolbar(vditor.toolbar.elements, ["format", "both", "preview"]);
-        setToolbarEnabled(vditor.toolbar.elements)
-        vditor.toolbar.element.style.display = "block";
-        removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
         enableToolbar(vditor.toolbar.elements, allToolbar);
+        removeCurrentToolbar(vditor.toolbar.elements, allToolbar);
+        vditor.undo.resetIcon(vditor);
         vditor.wysiwyg.element.parentElement.style.display = "none";
         vditor.ir.element.parentElement.style.display = "none";
         if (vditor.currentPreviewMode === "both") {
@@ -115,7 +115,7 @@ export class EditMode extends MenuItem {
 
     public _bindEvent(vditor: IVditor) {
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
 

diff --git a/src/ts/toolbar/Emoji.ts b/src/ts/toolbar/Emoji.ts
@@ -4,6 +4,7 @@ import {getEventName} from "../util/compatibility";
 import {getEditorRange, insertHTML, setSelectionFocus} from "../util/selection";
 import {MenuItem} from "./MenuItem";
 import {hidePanel} from "./setToolbar";
+import {Constants} from "../constants";
 
 export class Emoji extends MenuItem {
     public element: HTMLElement;
@@ -43,7 +44,7 @@ data-value=":${key}: " data-key=":${key}:" class="vditor-emojis__icon" src="${em
 
     public _bindEvent(vditor: IVditor) {
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
             if (this.panelElement.style.display === "block") {

diff --git a/src/ts/toolbar/Headings.ts b/src/ts/toolbar/Headings.ts
@@ -5,6 +5,7 @@ import {afterRenderEvent} from "../wysiwyg/afterRenderEvent";
 import {removeHeading, setHeading} from "../wysiwyg/setHeading";
 import {MenuItem} from "./MenuItem";
 import {hidePanel} from "./setToolbar";
+import {Constants} from "../constants";
 
 export class Headings extends MenuItem {
     public element: HTMLElement;
@@ -30,7 +31,7 @@ export class Headings extends MenuItem {
 
     public _bindEvent(vditor: IVditor) {
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
 

diff --git a/src/ts/toolbar/MenuItem.ts b/src/ts/toolbar/MenuItem.ts
@@ -3,6 +3,7 @@ import {insertText} from "../sv/insertText";
 import {getEventName} from "../util/compatibility";
 import {updateHotkeyTip} from "../util/compatibility";
 import {toolbarEvent} from "../wysiwyg/toolbarEvent";
+import {Constants} from "../constants";
 
 export class MenuItem {
     public element: HTMLElement;
@@ -24,7 +25,7 @@ export class MenuItem {
 
     public bindEvent(vditor: IVditor, replace: boolean = false) {
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
             if (vditor.currentMode === "wysiwyg") {

diff --git a/src/ts/toolbar/Record.ts b/src/ts/toolbar/Record.ts
@@ -4,6 +4,7 @@ import {uploadFiles} from "../upload/index";
 import {getEventName} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
 import {RecordMedia} from "./RecordMedia";
+import {Constants} from "../constants";
 
 export class Record extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
@@ -16,7 +17,7 @@ export class Record extends MenuItem {
     public _bindEvent(vditor: IVditor) {
         let mediaRecorder: RecordMedia;
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
             event.preventDefault();

diff --git a/src/ts/toolbar/Redo.ts b/src/ts/toolbar/Redo.ts
@@ -2,14 +2,15 @@ import redoSVG from "../../assets/icons/redo.svg";
 import {getEventName} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
 import {disableToolbar} from "./setToolbar";
+import {Constants} from "../constants";
 
 export class Redo extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
         this.element.children[0].innerHTML = menuItem.icon || redoSVG;
         disableToolbar({redo: this.element}, ["redo"]);
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
             if (vditor.currentMode === "sv") {

diff --git a/src/ts/toolbar/Undo.ts b/src/ts/toolbar/Undo.ts
@@ -2,14 +2,15 @@ import undoSVG from "../../assets/icons/undo.svg";
 import {getEventName} from "../util/compatibility";
 import {MenuItem} from "./MenuItem";
 import {disableToolbar} from "./setToolbar";
+import {Constants} from "../constants";
 
 export class Undo extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
         this.element.children[0].innerHTML = menuItem.icon || undoSVG;
         disableToolbar({undo: this.element}, ["undo"]);
         this.element.children[0].addEventListener(getEventName(), (event) => {
-            if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+            if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                 return;
             }
             if (vditor.currentMode === "sv") {

diff --git a/src/ts/toolbar/Upload.ts b/src/ts/toolbar/Upload.ts
@@ -1,6 +1,7 @@
 import uploadSVG from "../../assets/icons/upload.svg";
 import {uploadFiles} from "../upload/index";
 import {MenuItem} from "./MenuItem";
+import {Constants} from "../constants";
 
 export class Upload extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
@@ -16,7 +17,7 @@ export class Upload extends MenuItem {
     public _bindEvent(vditor: IVditor) {
         this.element.querySelector("input").addEventListener("change",
             (event: InputEvent & { target: HTMLInputElement }) => {
-                if (this.element.firstElementChild.classList.contains("vditor-menu--disabled")) {
+                if (this.element.firstElementChild.classList.contains(Constants.CLASS_MENU_DISABLED)) {
                     return;
                 }
                 if (event.target.files.length === 0) {

diff --git a/src/ts/toolbar/setToolbar.ts b/src/ts/toolbar/setToolbar.ts
@@ -1,3 +1,5 @@
+import {Constants} from "../constants";
+
 export const removeCurrentToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
     names.forEach((name) => {
         if (!toolbar[name]) {
@@ -28,8 +30,8 @@ export const enableToolbar = (toolbar: { [key: string]: HTMLElement }, names: st
             return;
         }
         const itemElement = toolbar[name].children[0];
-        if (itemElement && itemElement.classList.contains("vditor-menu--disabled")) {
-            itemElement.classList.remove("vditor-menu--disabled");
+        if (itemElement && itemElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            itemElement.classList.remove(Constants.CLASS_MENU_DISABLED);
         }
     });
 };
@@ -40,31 +42,12 @@ export const disableToolbar = (toolbar: { [key: string]: HTMLElement }, names: s
             return;
         }
         const itemElement = toolbar[name].children[0];
-        if (itemElement && !itemElement.classList.contains("vditor-menu--disabled")) {
-            itemElement.classList.add("vditor-menu--disabled");
+        if (itemElement && !itemElement.classList.contains(Constants.CLASS_MENU_DISABLED)) {
+            itemElement.classList.add(Constants.CLASS_MENU_DISABLED);
         }
     });
 };
 
-const CLASS_DISABLED = 'vditor-menu--disabled'
-
-/** 
- * 设置工具栏内容启用/禁用状态。
- * @param enabled 启用或者禁用
- * @param names 指定要操作的元素名称。默认为全部元素。
- */
-export function setToolbarEnabled(
-  toolbar: { [key: string]: HTMLElement },
-  enabled: boolean = true,
-  names?: string[]
-): void {
-  for (const [k, v] of Object.entries(toolbar)) {
-    if (!names || names.includes(k)) {
-      v.classList.toggle(CLASS_DISABLED, !enabled);
-    }
-  }
-}
-
 export const hideToolbar = (toolbar: { [key: string]: HTMLElement }, names: string[]) => {
     names.forEach((name) => {
         if (!toolbar[name]) {

diff --git a/src/ts/undo/IRUndo.ts b/src/ts/undo/IRUndo.ts
@@ -3,6 +3,7 @@ import {processAfterRender} from "../ir/process";
 import {isFirefox, isSafari} from "../util/compatibility";
 import {scrollCenter} from "../util/editorCommenEvent";
 import {setRangeByWbr, setSelectionFocus} from "../util/selection";
+import {disableToolbar, enableToolbar} from "../toolbar/setToolbar";
 
 class IRUndo {
     private undoStack: patch_obj[][];
@@ -21,6 +22,20 @@ class IRUndo {
         this.hasUndo = false;
     }
 
+    public resetIcon(vditor: IVditor) {
+        if (this.undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"])
+        }
+
+        if (this.redoStack.length !== 0) {
+            enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"])
+        }
+    }
+
     public undo(vditor: IVditor) {
         if (vditor.ir.element.getAttribute("contenteditable") === "false") {
             return;
@@ -100,6 +115,10 @@ class IRUndo {
             this.redoStack = [];
             this.hasUndo = false;
         }
+
+        if (this.undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
     }
 
     private renderDiff(state: patch_obj[], vditor: IVditor, isRedo: boolean = false) {
@@ -125,6 +144,18 @@ class IRUndo {
             enableHint: false,
             enableInput: true,
         });
+
+        if (this.undoStack.length > 1) {
+            enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"]);
+        }
+
+        if (this.redoStack.length !== 0) {
+            enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"]);
+        }
     }
 }
 

diff --git a/src/ts/undo/WysiwygUndo.ts b/src/ts/undo/WysiwygUndo.ts
@@ -25,13 +25,17 @@ class WysiwygUndo {
         this.hasUndo = false;
     }
 
-    public enableIcon(vditor: IVditor) {
+    public resetIcon(vditor: IVditor) {
         if (this.undoStack.length > 1) {
             enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"])
         }
 
         if (this.redoStack.length !== 0) {
             enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"])
         }
     }
 

diff --git a/src/ts/undo/index.ts b/src/ts/undo/index.ts
@@ -24,13 +24,17 @@ class Undo {
         this.hasUndo = false;
     }
 
-    public enableIcon(vditor: IVditor) {
+    public resetIcon(vditor: IVditor) {
         if (this.undoStack.length > 1) {
             enableToolbar(vditor.toolbar.elements, ["undo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["undo"])
         }
 
         if (this.redoStack.length !== 0) {
             enableToolbar(vditor.toolbar.elements, ["redo"]);
+        } else {
+            disableToolbar(vditor.toolbar.elements, ["redo"])
         }
     }
 

diff --git a/src/ts/wysiwyg/toolbarEvent.ts b/src/ts/wysiwyg/toolbarEvent.ts
@@ -153,7 +153,7 @@ export const toolbarEvent = (vditor: IVditor, actionBtn: Element) => {
 
     let useHighlight = true;
     let useRender = true;
-    if (actionBtn.classList.contains("vditor-menu--disabled")) {
+    if (actionBtn.classList.contains(Constants.CLASS_MENU_DISABLED)) {
         return;
     }
     if (vditor.wysiwyg.element.querySelector("wbr")) {

diff --git a/types/index.d.ts b/types/index.d.ts
@@ -399,20 +399,21 @@ interface IVditor {
         undo(vditor: IVditor): void
         addToUndoStack(vditor: IVditor): void
         recordFirstPosition(vditor: IVditor): void,
-        enableIcon(vditor: IVditor): void,
+        resetIcon(vditor: IVditor): void,
     };
     wysiwygUndo?: {
         redo(vditor: IVditor): void
         undo(vditor: IVditor): void
         addToUndoStack(vditor: IVditor): void
         recordFirstWbr(vditor: IVditor, event: KeyboardEvent): void,
-        enableIcon(vditor: IVditor): void,
+        resetIcon(vditor: IVditor): void,
     };
     irUndo?: {
         redo(vditor: IVditor): void
         undo(vditor: IVditor): void
         addToUndoStack(vditor: IVditor): void
         recordFirstWbr(vditor: IVditor, event: KeyboardEvent): void,
+        resetIcon(vditor: IVditor): void,
     };
     wysiwyg?: {
         element: HTMLPreElement,