fix: readOnly 时菜单还可操作

wangeditor-team · Jul 8, 2021 · 0d4a29b · 0d4a29b
1 parent fea2faf
commit 0d4a29b
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 26 deletions.
diff --git a/packages/core/src/create/create-editor.ts b/packages/core/src/create/create-editor.ts
@@ -21,7 +21,6 @@ import {
   EDITOR_TO_CONFIG,
   HOVER_BAR_TO_EDITOR,
   EDITOR_TO_HOVER_BAR,
-  IS_READ_ONLY,
 } from '../utils/weak-maps'
 
 type PluginFnType = <T extends IDomEditor>(editor: T) => T
@@ -93,7 +92,7 @@ export default function (option: ICreateOption) {
   } else {
     editor.children = genDefaultContent()
   }
-  textarea.onEditorChange() // 初始化时触发一次，以便能初始化 textarea DOM 和 selection
+  textarea.changeViewState() // 初始化时触发一次，以便能初始化 textarea DOM 和 selection
 
   // 触发生命周期
   const { onCreated, onChange, onDestroyed } = editorConfig
@@ -107,10 +106,6 @@ export default function (option: ICreateOption) {
     editor.on('destroyed', () => onDestroyed(editor))
   }
 
-  // 记录编辑状态
-  const { readOnly } = editorConfig
-  IS_READ_ONLY.set(editor, !!readOnly)
-
   // 创建完毕，异步触发 created
   promiseResolveThen(() => editor.emit('created'))
 

diff --git a/packages/core/src/editor/dom-editor.ts b/packages/core/src/editor/dom-editor.ts
@@ -14,7 +14,6 @@ import {
   EDITOR_TO_ELEMENT,
   ELEMENT_TO_NODE,
   IS_FOCUSED,
-  IS_READ_ONLY,
   KEY_TO_ELEMENT,
   NODE_TO_INDEX,
   NODE_TO_KEY,
@@ -114,7 +113,8 @@ export const DomEditor = {
    * Check if the editor is in read-only mode.
    */
   isReadOnly(editor: IDomEditor): boolean {
-    return !!IS_READ_ONLY.get(editor)
+    const config = editor.getConfig()
+    return config.readOnly
   },
 
   /**

diff --git a/packages/core/src/editor/plugins/with-dom.ts b/packages/core/src/editor/plugins/with-dom.ts
@@ -347,7 +347,13 @@ export const withDOM = <T extends Editor>(editor: T) => {
   // 手动更新试图
   e.updateView = () => {
     const textarea = DomEditor.getTextarea(e)
-    textarea.onEditorChange()
+    textarea.changeViewState()
+
+    const toolbar = DomEditor.getToolbar(e)
+    toolbar && toolbar.changeToolbarState()
+
+    const hoverbar = DomEditor.getHoverbar(e)
+    hoverbar && hoverbar.changeHoverbarState()
   }
 
   // destroy

diff --git a/packages/core/src/menus/bar-item/BaseButton.ts b/packages/core/src/menus/bar-item/BaseButton.ts
@@ -9,6 +9,7 @@ import { IBarItem, getEditorInstance } from './index'
 import { clearSvgStyle } from '../helpers/helpers'
 import { promiseResolveThen } from '../../utils/util'
 import { addTooltip } from './tooltip'
+import { DomEditor } from '../../editor/dom-editor'
 
 abstract class BaseButton implements IBarItem {
   readonly $elem: Dom7Array = $(`<div class="w-e-bar-item"></div>`)
@@ -99,7 +100,12 @@ abstract class BaseButton implements IBarItem {
   private setDisabled() {
     const editor = getEditorInstance(this)
     const { $button } = this
-    const disabled = this.menu.isDisabled(editor)
+    let disabled = this.menu.isDisabled(editor)
+
+    if (editor.selection == null || DomEditor.isReadOnly(editor)) {
+      // 未选中，或者 readOnly ，强行设置为 disabled
+      disabled = true
+    }
 
     const className = 'disabled'
     if (disabled) {
@@ -113,7 +119,7 @@ abstract class BaseButton implements IBarItem {
     this.disabled = disabled // 记录下来
   }
 
-  onSelectionChange() {
+  changeMenuState() {
     this.setActive()
     this.setDisabled()
   }

diff --git a/packages/core/src/menus/bar-item/Select.ts b/packages/core/src/menus/bar-item/Select.ts
@@ -130,9 +130,14 @@ class BarItemSelect implements IBarItem {
   private setDisabled() {
     const editor = getEditorInstance(this)
     const menu = this.menu
-    const disabled = menu.isDisabled(editor)
+    let disabled = menu.isDisabled(editor)
     const $button = this.$button
 
+    if (editor.selection == null || DomEditor.isReadOnly(editor)) {
+      // 未选中，或者 readOnly ，强行设置为 disabled
+      disabled = true
+    }
+
     const className = 'disabled'
     if (disabled) {
       // 设置为 disabled
@@ -145,7 +150,7 @@ class BarItemSelect implements IBarItem {
     this.disabled = disabled // 记录下来
   }
 
-  onSelectionChange() {
+  changeMenuState() {
     this.setSelectedValue()
     this.setDisabled()
   }

diff --git a/packages/core/src/menus/bar-item/index.ts b/packages/core/src/menus/bar-item/index.ts
@@ -18,7 +18,7 @@ type MenuType = IButtonMenu | ISelectMenu | IDropPanelMenu | IModalMenu
 export interface IBarItem {
   $elem: Dom7Array
   menu: MenuType
-  onSelectionChange: () => void
+  changeMenuState: () => void
 }
 
 // menu -> barItem

diff --git a/packages/core/src/menus/bar/HoverBar.ts b/packages/core/src/menus/bar/HoverBar.ts
@@ -37,7 +37,7 @@ class HoverBar {
       textarea.$textAreaContainer.append($elem)
 
       // 绑定 editor onchange
-      editor.on('change', this.onEditorChange)
+      editor.on('change', this.changeHoverbarState)
 
       // 滚动时隐藏
       const hideAndClean = this.hideAndClean.bind(this)
@@ -68,7 +68,7 @@ class HoverBar {
   private changeItemsState() {
     promiseResolveThen(() => {
       this.hoverbarItems.forEach(item => {
-        item.onSelectionChange()
+        item.changeMenuState()
       })
     })
   }
@@ -190,7 +190,7 @@ class HoverBar {
   /**
    * editor onChange 时触发（涉及 DOM 操作，加防抖）
    */
-  private onEditorChange = debounce(() => {
+  changeHoverbarState = debounce(() => {
     // 获取选中的 node ，以及对应的 menu keys
     const { isShow } = this
     const { node = null, menuKeys = [] } = this.getSelectedNodeAndMenuKeys() || {}

diff --git a/packages/core/src/menus/bar/Toolbar.ts b/packages/core/src/menus/bar/Toolbar.ts
@@ -41,11 +41,11 @@ class Toolbar {
       this.registerItems()
 
       // 创建完，先模拟一次 onchange
-      this.onEditorChange()
+      this.changeToolbarState()
 
       // 监听 editor onchange
       const editor = this.getEditorInstance()
-      editor.on('change', this.onEditorChange)
+      editor.on('change', this.changeToolbarState)
     })
   }
 
@@ -151,9 +151,9 @@ class Toolbar {
   /**
    * editor onChange 时触发（涉及 DOM 操作，加防抖）
    */
-  private onEditorChange = debounce(() => {
+  changeToolbarState = debounce(() => {
     this.toolbarItems.forEach(toolbarItem => {
-      toolbarItem.onSelectionChange()
+      toolbarItem.changeMenuState()
     })
   }, 200)
 

diff --git a/packages/core/src/text-area/TextArea.ts b/packages/core/src/text-area/TextArea.ts
@@ -52,7 +52,7 @@ class TextArea {
       const editor = this.editorInstance
 
       // 监听 editor onchange
-      editor.on('change', this.onEditorChange.bind(this))
+      editor.on('change', this.changeViewState.bind(this))
 
       // editor 销毁时，解绑 selection change
       editor.on('destroyed', () => {
@@ -134,9 +134,9 @@ class TextArea {
   }
 
   /**
-   * editor.onchange 时触发
+   * 修改 view 状态
    */
-  onEditorChange() {
+  changeViewState() {
     const editor = this.editorInstance
 
     // 更新 DOM

diff --git a/packages/core/src/utils/weak-maps.ts b/packages/core/src/utils/weak-maps.ts
@@ -57,7 +57,6 @@ export const NODE_TO_KEY: WeakMap<Node, Key> = new WeakMap()
 /**
  * Weak maps for storing editor-related state.
  */
-export const IS_READ_ONLY: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_FOCUSED: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
 export const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()

diff --git a/packages/editor/examples/index.html b/packages/editor/examples/index.html
@@ -184,7 +184,11 @@
     console.log(`如果页面没有编辑器，点击 'create' 按钮创建`)
 
     // toggle readOnly
-    document.getElementById('btn-toggle-readOnly').addEventListener('click', () => {
+    document.getElementById('btn-toggle-readOnly').addEventListener('mousedown', (e) => {
+      // 使用 mousedown ，且 preventDefault ，否则触发编辑器 blur ，导致无法正确 focus
+      // TODO 文档中说明（以及其他的 editState）
+      e.preventDefault()
+
       editorConfig.readOnly = !editorConfig.readOnly
       editor.setConfig({ readOnly: editorConfig.readOnly })
     })