fix(table): disable deletion when the part of table is selected (#312)

* fix(table): add contentEditable props

* fix(table): disable deletion when the part of table is selected

* Create hungry-cherries-eat.md

.changeset/hungry-cherries-eat.md

@@ -0,0 +1,7 @@
+---
+'@wangeditor-next/table-module': patch
+'@wangeditor-next/core': patch
+'@wangeditor-next/editor': patch
+---
+
+278 bug选中区域同时选中了有序无序列表与表格单元格时进行删除操作后报错

packages/core/src/text-area/event-handlers/beforeInput.ts

@@ -3,14 +3,15 @@
  * @author wangfupeng
  */
 
-import { Editor, Transforms, Range } from 'slate'
+import { Editor, Range, Transforms } from 'slate'
+
 import { DomEditor } from '../../editor/dom-editor'
 import { IDomEditor } from '../../editor/interface'
-import TextArea from '../TextArea'
-import { hasEditableTarget } from '../helpers'
 import { DOMStaticRange, isDataTransfer } from '../../utils/dom'
 import { HAS_BEFORE_INPUT_SUPPORT } from '../../utils/ua'
 import { EDITOR_TO_CAN_PASTE } from '../../utils/weak-maps'
+import { hasEditableTarget } from '../helpers'
+import TextArea from '../TextArea'
 
 // 补充 beforeInput event 的属性
 interface BeforeInputEventType {
@@ -25,9 +26,9 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
   const event = e as Event & BeforeInputEventType
   const { readOnly } = editor.getConfig()
 
-  if (!HAS_BEFORE_INPUT_SUPPORT) return // 有些浏览器完全不支持 beforeInput ，会用 keypress 和 keydown 兼容
-  if (readOnly) return
-  if (!hasEditableTarget(editor, event.target)) return
+  if (!HAS_BEFORE_INPUT_SUPPORT) { return } // 有些浏览器完全不支持 beforeInput ，会用 keypress 和 keydown 兼容
+  if (readOnly) { return }
+  if (!hasEditableTarget(editor, event.target)) { return }
 
   const { selection } = editor
   const { inputType: type } = event
@@ -53,6 +54,7 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
         exactMatch: false,
         suppressThrow: false,
       })
+
       if (!selection || !Range.equals(selection, range)) {
         Transforms.select(editor, range)
       }
@@ -62,9 +64,14 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
   // COMPAT: If the selection is expanded, even if the command seems like
   // a delete forward/backward command it should delete the selection.
   if (selection && Range.isExpanded(selection) && type.startsWith('delete')) {
-    const direction = type.endsWith('Backward') ? 'backward' : 'forward'
-    Editor.deleteFragment(editor, { direction })
-    return
+    const selectedElems = DomEditor.getSelectedElems(editor)
+
+    if (!(selectedElems.length > 0 && selectedElems[0].type === 'table')) {
+      const direction = type.endsWith('Backward') ? 'backward' : 'forward'
+
+      Editor.deleteFragment(editor, { direction })
+      return
+    }
   }
 
   // 根据 beforeInput 的 event.inputType
@@ -135,7 +142,7 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
     case 'insertReplacementText':
     case 'insertText': {
       if (type === 'insertFromPaste') {
-        if (!EDITOR_TO_CAN_PASTE.get(editor)) break // 不可默认粘贴
+        if (!EDITOR_TO_CAN_PASTE.get(editor)) { break } // 不可默认粘贴
       }
 
       if (isDataTransfer(data)) {
@@ -146,6 +153,7 @@ function handleBeforeInput(e: Event, textarea: TextArea, editor: IDomEditor) {
       }
       break
     }
+    default:
   }
 }
 

packages/core/src/text-area/event-handlers/cut.ts

@@ -3,30 +3,34 @@
  * @author wangfupeng
  */
 
-import { Editor, Range, Node, Transforms } from 'slate'
+import {
+  Editor, Node, Range, Transforms,
+} from 'slate'
+
 import { IDomEditor } from '../../editor/interface'
-import TextArea from '../TextArea'
 import { hasEditableTarget } from '../helpers'
+import TextArea from '../TextArea'
 
 function handleOnCut(e: Event, textarea: TextArea, editor: IDomEditor) {
   const event = e as ClipboardEvent
   const { selection } = editor
   const { readOnly } = editor.getConfig()
 
-  if (readOnly) return
-  if (!hasEditableTarget(editor, event.target)) return
-
+  if (readOnly) { return }
   event.preventDefault()
+  if (!hasEditableTarget(editor, event.target)) { return }
 
   const data = event.clipboardData
-  if (data == null) return
+
+  if (data == null) { return }
   editor.setFragmentData(data)
 
   if (selection) {
     if (Range.isExpanded(selection)) {
       Editor.deleteFragment(editor)
     } else {
       const node = Node.parent(editor, selection.anchor.path)
+
       if (Editor.isVoid(editor, node)) {
         Transforms.delete(editor)
       }

packages/table-module/src/module/plugin.ts

@@ -96,7 +96,7 @@ function deleteCellBreak(newEditor: IDomEditor, unit: Parameters<IDomEditor['del
     match: n => DomEditor.checkNodeType(n, 'table-cell'),
   })
 
-  if (aboveCell == null || !Path.equals(aboveCell[1], cellNodeEntry[1])) { return false }
+  if (aboveCell == null || cellNodeEntry == null || !Path.equals(aboveCell[1], cellNodeEntry[1])) { return false }
   const targetNode = Editor.node(newEditor, targetPoint)
 
   if (!Text.isText(targetNode[0]) || targetNode[0].text.length < 2) { return false } // 如果存在\n\r，那长度必定大于2

packages/table-module/src/module/render-elem/render-table.tsx

@@ -144,7 +144,7 @@ function renderTable(elemNode: SlateElement, children: VNode[] | null, editor: I
         <tbody>{children}</tbody>
       </table>
 
-      <div className="column-resizer" contenteditable="false">
+      <div className="column-resizer" contentEditable={false}>
         {columnWidths.map((width, index) => {
           let minWidth = width
           /**