fix: divider - 键盘删除

wangeditor-team · Feb 23, 2022 · 31db059 · 31db059
1 parent 2652241
commit 31db059
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git a/packages/basic-modules/src/assets/divider.less b/packages/basic-modules/src/assets/divider.less
@@ -1,17 +1,16 @@
 @import "../../../vars.less";
 
 .w-e-textarea-divider {
-  padding: 10px 0;
-  cursor: pointer;
+  padding: 20px 20px;
+  margin: 20px auto;
+  border-radius: 3px;
 
-  &:hover {
-    background-color: @textarea-slight-bg-color;
-  }
+  // &:hover {
+  //   background-color: @textarea-slight-bg-color;
+  // }
 
   hr {
     display: block;
-    width: 90%;
-    margin: 20px auto;
     border: 0;
     height: 1px;
     background-color: @textarea-border-color;

diff --git a/packages/basic-modules/src/modules/divider/index.ts b/packages/basic-modules/src/modules/divider/index.ts
@@ -8,13 +8,13 @@ import withDivider from './plugin'
 import { renderDividerConf } from './render-elem'
 import { dividerToHtmlConf } from './elem-to-html'
 import { parseHtmlConf } from './parse-elem-html'
-import { insertDividerMenuConf, deleteDividerMenuConf } from './menu/index'
+import { insertDividerMenuConf } from './menu/index'
 
 const image: Partial<IModuleConf> = {
   renderElems: [renderDividerConf],
   elemsToHtml: [dividerToHtmlConf],
   parseElemsHtml: [parseHtmlConf],
-  menus: [insertDividerMenuConf, deleteDividerMenuConf],
+  menus: [insertDividerMenuConf],
   editorPlugin: withDivider,
 }
 

diff --git a/...modules/divider/menu/DeleteDividerMenu.ts → ...les/divider/menu/DeleteDividerMenu.ts.bak b/...modules/divider/menu/DeleteDividerMenu.ts → ...les/divider/menu/DeleteDividerMenu.ts.bak
diff --git a/packages/basic-modules/src/modules/divider/menu/index.ts b/packages/basic-modules/src/modules/divider/menu/index.ts
@@ -4,7 +4,7 @@
  */
 
 import InsertDividerMenu from './InsertDividerMenu'
-import DeleteDividerMenu from './DeleteDividerMenu'
+// import DeleteDividerMenu from './DeleteDividerMenu.ts'
 
 export const insertDividerMenuConf = {
   key: 'divider',
@@ -13,9 +13,10 @@ export const insertDividerMenuConf = {
   },
 }
 
-export const deleteDividerMenuConf = {
-  key: 'deleteDivider',
-  factory() {
-    return new DeleteDividerMenu()
-  },
-}
+// export const deleteDividerMenuConf = {
+//   key: 'deleteDivider',
+//   factory() {
+//     return new DeleteDividerMenu()
+//   },
+// }
+// divider 可用键盘删除了，所以注释掉该菜单 wangfupeng 22.02.23
diff --git a/packages/basic-modules/src/modules/divider/render-elem.tsx b/packages/basic-modules/src/modules/divider/render-elem.tsx
@@ -4,7 +4,7 @@
  */
 
 import { Element as SlateElement } from 'slate'
-import { jsx, VNode } from 'snabbdom'
+import { h, VNode } from 'snabbdom'
 import { IDomEditor, DomEditor } from '@wangeditor/core'
 
 function renderDivider(
@@ -17,15 +17,22 @@ function renderDivider(
   // 是否选中
   const selected = DomEditor.isNodeSelected(editor, elemNode)
 
-  const vnode = (
-    <div
-      contentEditable={false}
-      className="w-e-textarea-divider"
-      data-selected={selected ? 'true' : ''} // 标记为 选中
-      style={renderStyle}
-    >
-      <hr />
-    </div>
+  const vnode = h(
+    'div',
+    {
+      props: {
+        contentEditable: false,
+        className: 'w-e-textarea-divider',
+      },
+      dataset: {
+        selected: selected ? 'true' : '',
+      },
+      style: renderStyle,
+      on: {
+        mousedown: event => event.preventDefault(),
+      },
+    },
+    [h('hr')]
   )
   // 【注意】void node 中，renderElem 不用处理 children 。core 会统一处理。
 

diff --git a/packages/editor/src/init-default-config/config/hoverbar.ts b/packages/editor/src/init-default-config/config/hoverbar.ts
@@ -35,9 +35,6 @@ const COMMON_HOVERBAR_KEYS = {
       'deleteTable',
     ],
   },
-  divider: {
-    menuKeys: ['deleteDivider'],
-  },
 }
 
 export function genDefaultHoverbarKeys() {