fix: 优化选中代码块不应该展示 hoverbar 的交互

wangeditor-team · Jun 21, 2021 · 33dcbd6 · 33dcbd6
1 parent 19e2f80
commit 33dcbd6
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/packages/core/src/config/index.ts b/packages/core/src/config/index.ts
@@ -47,6 +47,7 @@ export interface IConfig {
   toolbarKeys: Array<string | IMenuGroup>
   // 悬浮菜单栏 menu
   hoverbarKeys: Array<IHoverbarConf>
+
   // TODO 右键菜单栏 menu
 
   plugins: Array<PluginFnType>

diff --git a/packages/core/src/menus/bar/HoverBar.ts b/packages/core/src/menus/bar/HoverBar.ts
@@ -115,6 +115,7 @@ class HoverBar {
   private tryMatchNodes() {
     const editor = this.getEditorInstance()
     const { selection } = editor
+
     if (selection == null) return // 无选区，则隐藏
 
     // 获取 hover bar 配置

diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
@@ -10,7 +10,7 @@ import '@wangeditor/basic-modules/css/style.css'
 import '@wangeditor/table-module/css/style.css'
 import '@wangeditor/list-module/css/style.css'
 
-import { Node, Range, Text } from 'slate'
+import { Node, Text, Location, Editor } from 'slate'
 import {
   IDomEditor,
   createEditor,
@@ -287,11 +287,15 @@ let editor = createEditor(
       // 选中文字 hover bar
       {
         match: (editor: IDomEditor, n: Node) => {
-          // @ts-ignore
-          const { type } = n
           const { selection } = editor
           if (selection == null) return false // 无选区
-          if (Range.isCollapsed(selection)) return false // 未选中文字，选区的是折叠的
+
+          // 对于一些特殊的 element，例如 code，选中文字不应该显示该 hoverbar
+          const disableElementKeys = ['code']
+          const [parent] = Editor.parent(editor, selection as Location)
+
+          if (disableElementKeys.includes((parent as any).type)) return false
+
           if (Text.isText(n)) return true // 匹配 text node
           return false
         },