refactor: panel and modal

packages/basic-modules/src/modules/image/menu/EditImage.ts

@@ -4,7 +4,7 @@
  */
 
 import { Node, Transforms, Range } from 'slate'
-import { IModalMenu, IDomEditor, DomEditor, hideAllPanelsAndModals } from '@wangeditor/core'
+import { IModalMenu, IDomEditor, DomEditor } from '@wangeditor/core'
 import $, { Dom7Array } from '../../../utils/dom'
 import { genRandomStr } from '../../../utils/util'
 import { genModalInputElems, genModalButtonElems } from '../../_helpers/menu'
@@ -92,7 +92,7 @@ class EditImage implements IModalMenu {
         const alt = $(`#${altInputId}`).val()
         const url = $(`#${urlInputId}`).val()
         this.updateImage(editor, src, alt, url)
-        hideAllPanelsAndModals() // 隐藏 modal
+        editor.hidePanelOrModal() // 隐藏 modal
       })
 
       // 记录属性，重要

packages/basic-modules/src/modules/image/menu/InsertImage.ts

@@ -4,7 +4,7 @@
  */
 
 import { Editor, Transforms, Range, Node } from 'slate'
-import { IModalMenu, IDomEditor, DomEditor, hideAllPanelsAndModals } from '@wangeditor/core'
+import { IModalMenu, IDomEditor, DomEditor } from '@wangeditor/core'
 import $, { Dom7Array } from '../../../utils/dom'
 import { genRandomStr } from '../../../utils/util'
 import { genModalInputElems, genModalButtonElems } from '../../_helpers/menu'
@@ -97,7 +97,7 @@ class InsertImage implements IModalMenu {
         const alt = $(`#${altInputId}`).val().trim()
         const url = $(`#${urlInputId}`).val().trim()
         this.insertImage(editor, src, alt, url)
-        hideAllPanelsAndModals() // 隐藏 modal
+        editor.hidePanelOrModal() // 隐藏 modal
       })
 
       // 记录属性，重要

packages/basic-modules/src/modules/link/menu/InsertLink.ts

@@ -4,7 +4,7 @@
  */
 
 import { Editor, Transforms, Range, Node } from 'slate'
-import { IModalMenu, IDomEditor, DomEditor, hideAllPanelsAndModals } from '@wangeditor/core'
+import { IModalMenu, IDomEditor, DomEditor } from '@wangeditor/core'
 import $, { Dom7Array } from '../../../utils/dom'
 import { genRandomStr } from '../../../utils/util'
 import { genModalInputElems, genModalButtonElems } from '../../_helpers/menu'
@@ -71,7 +71,7 @@ class InsertLinkMenu implements IModalMenu {
         const text = $(`#${textInputId}`).val()
         const url = $(`#${urlInputId}`).val()
         insertLink(editor, text, url) // 插入链接
-        hideAllPanelsAndModals() // 隐藏 modal
+        editor.hidePanelOrModal() // 隐藏 modal
       })
 
       // 记录属性，重要

packages/basic-modules/src/modules/link/menu/UpdateLink.ts

@@ -4,7 +4,7 @@
  */
 
 import { Node } from 'slate'
-import { IModalMenu, IDomEditor, DomEditor, hideAllPanelsAndModals } from '@wangeditor/core'
+import { IModalMenu, IDomEditor, DomEditor } from '@wangeditor/core'
 import $, { Dom7Array } from '../../../utils/dom'
 import { genRandomStr } from '../../../utils/util'
 import { genModalInputElems, genModalButtonElems } from '../../_helpers/menu'
@@ -93,7 +93,7 @@ class UpdateLinkMenu implements IModalMenu {
         const url = $(`#${urlInputId}`).val()
         updateLink(editor, text, url) // 修改链接
 
-        hideAllPanelsAndModals() // 隐藏 modal
+        editor.hidePanelOrModal() // 隐藏 modal
       })
 
       // 记录属性，重要

packages/code-highlight/src/module/menu/config.ts

@@ -7,6 +7,8 @@ export function genCodeLangs() {
   // 1. text value 对应关系参考 prism 官网 https://prismjs.com/#supported-languages
   // 2. 要加入一个新语言时，要引入相应的 js 模块（代码在 `vender/prism.ts`），例如 `import 'prismjs/components/prism-php'`
 
+  // TODO 在文档中说明，不能自己随意增加 lang ，可以删除。增加 lang 需提交 issue
+
   return [
     { text: 'CSS', value: 'css' },
     { text: 'HTML', value: 'html' },

packages/core/src/create-editor.ts

@@ -66,6 +66,16 @@ function create(option: ICreateOption) {
   const textarea = new TextArea(textareaSelector)
   EDITOR_TO_TEXTAREA.set(editor, textarea)
   TEXTAREA_TO_EDITOR.set(textarea, editor)
+  // 判断 textarea 最小高度，并给出提示
+  promiseResolveThen(() => {
+    const $textarea = textarea.$textArea
+    if ($textarea == null) return
+    if ($textarea.height() < 300) {
+      let info = '编辑区域高度 < 300px 这可能会导致 modal hoverbar 定位异常'
+      info += '\nTextarea height < 300px . This may be cause modal and hoverbar position error'
+      console.warn(info, $textarea)
+    }
+  })
 
   // 创建 toolbar DOM
   let toolbar: Toolbar | null = null
@@ -89,6 +99,14 @@ function create(option: ICreateOption) {
     EDITOR_TO_HOVER_BAR.set(editor, hoverbar)
   }
 
+  // 隐藏 panel and modal
+  editor.on('change', () => {
+    editor.hidePanelOrModal()
+  })
+  editor.on('scroll', () => {
+    editor.hidePanelOrModal()
+  })
+
   // 初始化内容
   if (initContent && initContent.length) {
     editor.children = initContent
@@ -97,38 +115,24 @@ function create(option: ICreateOption) {
   }
   textarea.onEditorChange() // 初始化时触发一次，以便能初始化 textarea DOM 和 selection
 
-  // editor onCreated
-  editor.on('created', () => {
-    // 触发用户配置的 onCreated 函数
-    if (editorConfig.onCreated) editorConfig.onCreated(editor)
-  })
-  promiseResolveThen(() => editor.emit('created'))
-
-  // editor onchange
-  editor.on('change', () => {
-    // 触发用户配置的 onchange 函数
-    if (editorConfig.onChange) editorConfig.onChange(editor)
-  })
-
-  // editor onDestroyed
-  editor.on('destroyed', () => {
-    // 触发用户配置的 onDestroyed 函数
-    if (editorConfig.onDestroyed) editorConfig.onDestroyed(editor)
-  })
+  // 触发生命周期
+  const { onCreated, onChange, onDestroyed } = editorConfig
+  if (onCreated) {
+    editor.on('created', () => onCreated(editor))
+  }
+  if (onChange) {
+    editor.on('change', () => onChange(editor))
+  }
+  if (onDestroyed) {
+    editor.on('destroyed', () => onDestroyed(editor))
+  }
 
   // 记录编辑状态
-  IS_READ_ONLY.set(editor, !!editorConfig.readOnly)
+  const { readOnly } = editorConfig
+  IS_READ_ONLY.set(editor, !!readOnly)
 
-  // 判断 textarea 最小高度，并给出提示
-  promiseResolveThen(() => {
-    const $textarea = textarea.$textArea
-    if ($textarea == null) return
-    if ($textarea.height() < 300) {
-      let info = '编辑区域高度 < 300px 这可能会导致 modal hoverbar 定位异常'
-      info += '\nTextarea height < 300px . This may be cause modal and hoverbar position error'
-      console.warn(info, $textarea)
-    }
-  })
+  // 创建完毕，异步触发 created
+  promiseResolveThen(() => editor.emit('created'))
 
   return editor
 }

packages/core/src/editor/dom-editor.ts

@@ -58,6 +58,7 @@ export interface IDomEditor extends Editor {
   alert: (info: string, type: AlertType) => void
   scrollToElem: (id: string) => void
   showProgressBar: (progress: number) => void
+  hidePanelOrModal: () => void
   // 自定义事件
   on: (type: string, listener: ee.EventListener) => void
   off: (type: string, listener: ee.EventListener) => void

packages/core/src/editor/with-dom.ts

@@ -5,7 +5,13 @@
 
 import { Editor, Node, Path, Operation, Transforms, Range } from 'slate'
 import { IDomEditor, DomEditor } from './dom-editor'
-import { NODE_TO_KEY, EDITOR_TO_CONFIG, EDITOR_TO_SELECTION, IS_FOCUSED } from '../utils/weak-maps'
+import {
+  NODE_TO_KEY,
+  EDITOR_TO_CONFIG,
+  EDITOR_TO_SELECTION,
+  IS_FOCUSED,
+  EDITOR_TO_PANEL_AND_MODAL,
+} from '../utils/weak-maps'
 import { Key } from '../utils/key'
 import { isDOMText, getPlainText } from '../utils/dom'
 import { IConfig } from '../config/index'
@@ -333,6 +339,13 @@ export const withDOM = <T extends Editor>(editor: T) => {
     }
   }
 
+  // 隐藏 panel 或 modal
+  e.hidePanelOrModal = () => {
+    const set = EDITOR_TO_PANEL_AND_MODAL.get(e)
+    if (set == null) return
+    set.forEach(panelOrModal => panelOrModal.hide())
+  }
+
   // 最后要返回 editor 实例 - 重要！！！
   return e
 }

packages/core/src/menus/bar-item/BaseButton.ts

@@ -7,7 +7,6 @@ import { IButtonMenu, IDropPanelMenu, IModalMenu } from '../interface'
 import $, { Dom7Array } from '../../utils/dom'
 import { IBarItem, getEditorInstance } from './index'
 import { clearSvgStyle } from '../helpers/helpers'
-import { hideAllPanelsAndModals } from '../panel-and-modal/index'
 import { promiseResolveThen } from '../../utils/util'
 
 abstract class BaseButton implements IBarItem {
@@ -63,16 +62,17 @@ abstract class BaseButton implements IBarItem {
     this.setActive()
     this.setDisabled()
 
-    // click
-    this.$button.on('click', e => {
-      e.stopPropagation() // 阻止冒泡，避免隐藏 panel 和 modal
+    // button click
+    this.$button.on('mousedown', e => {
+      e.preventDefault()
+      const editor = getEditorInstance(this)
 
-      hideAllPanelsAndModals() // 隐藏当前的各种 panel
+      editor.hidePanelOrModal() // 隐藏当前的各种 panel
 
       if (this.disabled) return
 
       this.exec() // 执行 menu.exec
-      this.onClick() // 执行其他的逻辑
+      this.onButtonClick() // 执行其他的逻辑
     })
   }
 
@@ -87,7 +87,7 @@ abstract class BaseButton implements IBarItem {
   }
 
   // 交给子类去扩展
-  abstract onClick(): void
+  abstract onButtonClick(): void
 
   private setActive() {
     const editor = getEditorInstance(this)

packages/core/src/menus/bar-item/DropPanelButton.ts

@@ -24,7 +24,7 @@ class DropPanelButton extends BaseButton {
   }
 
   // button 点击之后
-  onClick() {
+  onButtonClick() {
     if (this.menu.showDropPanel) {
       this.handleDropPanel()
     }
@@ -38,7 +38,7 @@ class DropPanelButton extends BaseButton {
 
     if (this.dropPanel == null) {
       // 初次创建
-      const dropPanel = new DropPanel()
+      const dropPanel = new DropPanel(editor)
       const $content = menu.getPanelContentElem(editor)
       dropPanel.renderContent($content)
       dropPanel.appendTo(this.$elem)

packages/core/src/menus/bar-item/ModalButton.ts

@@ -7,7 +7,6 @@ import { Element } from 'slate'
 import { IModalMenu, IPositionStyle } from '../interface'
 import BaseButton from './BaseButton'
 import Modal from '../panel-and-modal/Modal'
-import { EDITOR_TO_TEXTAREA } from '../../utils/weak-maps'
 import { getEditorInstance } from './index'
 import { getPositionBySelection, getPositionByNode, correctPosition } from '../helpers/position'
 import { DomEditor } from '../../editor/dom-editor'
@@ -21,7 +20,7 @@ class ModalButton extends BaseButton {
     this.menu = menu
   }
 
-  onClick() {
+  onButtonClick() {
     if (this.menu.showModal) {
       this.handleModal()
     }
@@ -45,11 +44,12 @@ class ModalButton extends BaseButton {
 
   // 显示/隐藏 modal
   private handleModal() {
+    const editor = getEditorInstance(this)
     const menu = this.menu
 
     if (this.modal == null) {
       // 初次创建
-      const modal = new Modal(menu.modalWidth)
+      const modal = new Modal(editor, menu.modalWidth)
       this.renderAndShowModal(modal, true)
 
       // 记录下来，防止重复创建

packages/core/src/menus/bar-item/Select.ts

@@ -6,9 +6,8 @@
 import $, { Dom7Array } from '../../utils/dom'
 import { IBarItem, getEditorInstance } from './index'
 import { IOption, ISelectMenu } from '../interface'
-import SelectList from './SelectList'
+import SelectList from '../panel-and-modal/SelectList'
 import { gen$downArrow } from '../helpers/helpers'
-import { hideAllPanelsAndModals } from '../panel-and-modal/index'
 import { DomEditor } from '../../editor/dom-editor'
 import { promiseResolveThen } from '../../utils/util'
 
@@ -56,10 +55,11 @@ class BarItemSelect implements IBarItem {
     // 设置 select 属性
     this.setSelectedValue()
 
-    // click
-    this.$button.on('click', (e: Event) => {
-      e.stopPropagation()
-      hideAllPanelsAndModals() // 隐藏当前的各种 panel
+    // select button click
+    this.$button.on('mousedown', (e: Event) => {
+      e.preventDefault()
+      const editor = getEditorInstance(this)
+      editor.hidePanelOrModal() // 隐藏当前的各种 panel
       this.trigger()
     })
   }
@@ -75,7 +75,7 @@ class BarItemSelect implements IBarItem {
     // 显示下拉列表
     if (this.selectList == null) {
       // 初次创建，渲染 list 并显示
-      this.selectList = new SelectList()
+      this.selectList = new SelectList(editor)
       const selectList = this.selectList
       const options = menu.getOptions(editor)
       selectList.renderList(options)

packages/core/src/menus/bar-item/SimpleButton.ts

@@ -10,7 +10,7 @@ class SimpleButton extends BaseButton {
   constructor(menu: IButtonMenu, inGroup = false) {
     super(menu, inGroup)
   }
-  onClick() {
+  onButtonClick() {
     // menu.exec 已经在 BaseButton 实现了
     // 所以，此处不用做任何逻辑
   }

packages/core/src/menus/bar/HoverBar.ts

@@ -30,6 +30,7 @@ class HoverBar {
 
       // 将 elem 渲染为 DOM
       const $elem = this.$elem
+      $elem.on('mousedown', e => e.preventDefault()) // 防止点击失焦
       const textarea = DomEditor.getTextarea(editor)
       textarea.$textAreaContainer.append($elem)
 

packages/core/src/menus/bar/Toolbar.ts

@@ -29,7 +29,7 @@ class Toolbar {
       throw new Error(`Cannot find toolbar DOM by selector '${selector}'`)
     }
     const $toolbar = $(`<div class="w-e-bar w-e-bar-show w-e-toolbar"></div>`)
-    $toolbar.on('mousedown', e => e.preventDefault())
+    $toolbar.on('mousedown', e => e.preventDefault()) // 防止点击失焦
     $box.append($toolbar)
     this.$toolbar = $toolbar
 

packages/core/src/menus/index.ts

@@ -12,4 +12,3 @@ export {
   IMenuConf,
   IOption,
 } from './interface'
-export { hideAllPanelsAndModals } from './panel-and-modal/index'