fix: resolving the issue of the draggable extension not working in the editor (#5570)

#### What type of PR is this?

/kind bug
/area editor
/milestone 2.14.x

#### What this PR does / why we need it:

解决在默认编辑器中,插件扩展 getDraggable 方法可能无效的问题。向 handleDrop 中添加属性 `selection`,方便插件对当前拖拽元素进行处理。

部分插件拖拽之后可能无效果,此时需要插件自行实现 `handleDrop` 方法来处理拖拽后的情况。

#### How to test it?

测试 getDraggable 方法是否正常。插件中使用此方法是否显示拖拽图标。

#### Which issue(s) this PR fixes:

Fixes #5208 

#### Does this PR introduce a user-facing change?
```release-note
解决默认编辑器 getDraggable 在部分插件中失效的问题。
```
pull/5602/head
Takagi 2024-03-27 12:26:06 +08:00 committed by GitHub
parent b8293faafd
commit 1a19bdcb54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 4 deletions

View File

@ -379,12 +379,14 @@ export interface DraggableItem {
slice, slice,
insertPos, insertPos,
node, node,
selection,
}: { }: {
view: EditorView; view: EditorView;
event: DragEvent; event: DragEvent;
slice: Slice; slice: Slice;
insertPos: number; insertPos: number;
node: Node; node: Node;
selection: Selection;
}) => boolean | void; }) => boolean | void;
allowPropagationDownward?: boolean; // 是否允许拖拽事件向内部传播, allowPropagationDownward?: boolean; // 是否允许拖拽事件向内部传播,
} }

View File

@ -470,11 +470,12 @@ const Draggable = Extension.create({
const pos = view.posAtCoords(coords); const pos = view.posAtCoords(coords);
if (!pos || !pos.pos) return false; if (!pos || !pos.pos) return false;
const nodeDom = const nodePos = pos.inside > -1 ? pos.inside : pos.pos;
view.nodeDOM(pos.pos) ||
view.domAtPos(pos.pos)?.node ||
event.target;
const nodeDom =
view.nodeDOM(nodePos) ||
view.domAtPos(nodePos)?.node ||
event.target;
if (!nodeDom) { if (!nodeDom) {
hideDragHandleDOM(); hideDragHandleDOM();
return false; return false;
@ -555,6 +556,7 @@ const Draggable = Extension.create({
slice, slice,
insertPos, insertPos,
node: activeNode?.node as Node, node: activeNode?.node as Node,
selection: activeSelection,
}); });
if (typeof handleDrop === "boolean") { if (typeof handleDrop === "boolean") {
isDisableDrop = handleDrop; isDisableDrop = handleDrop;

View File

@ -5,6 +5,7 @@ import type {
Slice, Slice,
EditorState, EditorState,
EditorView, EditorView,
Selection,
} from "@/tiptap/pm"; } from "@/tiptap/pm";
import type { Component } from "vue"; import type { Component } from "vue";
export interface ToolbarItem { export interface ToolbarItem {
@ -120,12 +121,14 @@ export interface DraggableItem {
slice, slice,
insertPos, insertPos,
node, node,
selection,
}: { }: {
view: EditorView; view: EditorView;
event: DragEvent; event: DragEvent;
slice: Slice; slice: Slice;
insertPos: number; insertPos: number;
node: Node; node: Node;
selection: Selection;
}) => boolean | void; }) => boolean | void;
// allow drag-and-drop query propagation downward // allow drag-and-drop query propagation downward
allowPropagationDownward?: boolean; allowPropagationDownward?: boolean;