From 85c25796e72baa3c2aded02207815eac3ae16858 Mon Sep 17 00:00:00 2001 From: cycleccc <2991205548@qq.com> Date: Tue, 5 Nov 2024 17:46:46 +0800 Subject: [PATCH] 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 | 7 +++++ .../text-area/event-handlers/beforeInput.ts | 28 ++++++++++++------- .../core/src/text-area/event-handlers/cut.ts | 16 +++++++---- packages/table-module/src/module/plugin.ts | 2 +- .../src/module/render-elem/render-table.tsx | 2 +- 5 files changed, 37 insertions(+), 18 deletions(-) create mode 100644 .changeset/hungry-cherries-eat.md diff --git a/.changeset/hungry-cherries-eat.md b/.changeset/hungry-cherries-eat.md new file mode 100644 index 00000000..fef026fb --- /dev/null +++ b/.changeset/hungry-cherries-eat.md @@ -0,0 +1,7 @@ +--- +'@wangeditor-next/table-module': patch +'@wangeditor-next/core': patch +'@wangeditor-next/editor': patch +--- + +278 bug选中区域同时选中了有序无序列表与表格单元格时进行删除操作后报错 diff --git a/packages/core/src/text-area/event-handlers/beforeInput.ts b/packages/core/src/text-area/event-handlers/beforeInput.ts index e7adaeec..eab90b48 100644 --- a/packages/core/src/text-area/event-handlers/beforeInput.ts +++ b/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: } } diff --git a/packages/core/src/text-area/event-handlers/cut.ts b/packages/core/src/text-area/event-handlers/cut.ts index f0bff037..f4631d8c 100644 --- a/packages/core/src/text-area/event-handlers/cut.ts +++ b/packages/core/src/text-area/event-handlers/cut.ts @@ -3,23 +3,26 @@ * @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) { @@ -27,6 +30,7 @@ function handleOnCut(e: Event, textarea: TextArea, editor: IDomEditor) { Editor.deleteFragment(editor) } else { const node = Node.parent(editor, selection.anchor.path) + if (Editor.isVoid(editor, node)) { Transforms.delete(editor) } diff --git a/packages/table-module/src/module/plugin.ts b/packages/table-module/src/module/plugin.ts index 9f3482c3..2de56691 100644 --- a/packages/table-module/src/module/plugin.ts +++ b/packages/table-module/src/module/plugin.ts @@ -96,7 +96,7 @@ function deleteCellBreak(newEditor: IDomEditor, unit: Parameters 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 diff --git a/packages/table-module/src/module/render-elem/render-table.tsx b/packages/table-module/src/module/render-elem/render-table.tsx index c8c621fa..9d8c438a 100644 --- a/packages/table-module/src/module/render-elem/render-table.tsx +++ b/packages/table-module/src/module/render-elem/render-table.tsx @@ -144,7 +144,7 @@ function renderTable(elemNode: SlateElement, children: VNode[] | null, editor: I {children} -
+
{columnWidths.map((width, index) => { let minWidth = width /**