@tiptap/extension-drag-handle-react 3.27.1 → 3.27.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +18 -15
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +19 -16
- package/dist/index.js.map +1 -1
- package/package.json +14 -14
- package/src/DragHandle.spec.ts +105 -0
- package/src/DragHandle.tsx +18 -13
package/dist/index.cjs
CHANGED
|
@@ -42,32 +42,35 @@ var DragHandle = (props) => {
|
|
|
42
42
|
computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig,
|
|
43
43
|
nested = false
|
|
44
44
|
} = props;
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
return document.createElement("div");
|
|
50
|
-
});
|
|
45
|
+
const elementRef = (0, import_react.useRef)(null);
|
|
46
|
+
if (elementRef.current === null && typeof document !== "undefined") {
|
|
47
|
+
elementRef.current = document.createElement("div");
|
|
48
|
+
}
|
|
51
49
|
const nestedOptions = (0, import_react.useMemo)(() => (0, import_extension_drag_handle.normalizeNestedOptions)(nested), [JSON.stringify(nested)]);
|
|
52
50
|
(0, import_react.useEffect)(() => {
|
|
53
|
-
|
|
51
|
+
const element2 = elementRef.current;
|
|
52
|
+
if (!element2) {
|
|
54
53
|
return;
|
|
55
54
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
element.style.position = "absolute";
|
|
59
|
-
element.dataset.dragging = "false";
|
|
60
|
-
}, [className, element]);
|
|
55
|
+
element2.className = className;
|
|
56
|
+
}, [className]);
|
|
61
57
|
(0, import_react.useEffect)(() => {
|
|
62
|
-
if (
|
|
58
|
+
if (typeof document === "undefined") {
|
|
63
59
|
return;
|
|
64
60
|
}
|
|
65
61
|
if (editor.isDestroyed) {
|
|
66
62
|
return;
|
|
67
63
|
}
|
|
64
|
+
const element2 = elementRef.current;
|
|
65
|
+
if (!element2) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
element2.style.visibility = "hidden";
|
|
69
|
+
element2.style.position = "absolute";
|
|
70
|
+
element2.dataset.dragging = "false";
|
|
68
71
|
const { plugin, unbind } = (0, import_extension_drag_handle.DragHandlePlugin)({
|
|
69
72
|
editor,
|
|
70
|
-
element,
|
|
73
|
+
element: element2,
|
|
71
74
|
pluginKey,
|
|
72
75
|
computePositionConfig: {
|
|
73
76
|
...import_extension_drag_handle.defaultComputePositionConfig,
|
|
@@ -87,7 +90,6 @@ var DragHandle = (props) => {
|
|
|
87
90
|
unbind();
|
|
88
91
|
};
|
|
89
92
|
}, [
|
|
90
|
-
element,
|
|
91
93
|
editor,
|
|
92
94
|
onNodeChange,
|
|
93
95
|
getReferencedVirtualElement,
|
|
@@ -97,6 +99,7 @@ var DragHandle = (props) => {
|
|
|
97
99
|
onElementDragEnd,
|
|
98
100
|
nestedOptions
|
|
99
101
|
]);
|
|
102
|
+
const element = elementRef.current;
|
|
100
103
|
if (!element) {
|
|
101
104
|
return null;
|
|
102
105
|
}
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/DragHandle.tsx"],"sourcesContent":["import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n","import {\n type DragHandlePluginProps,\n type NestedOptions,\n defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/DragHandle.tsx"],"sourcesContent":["import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n","import {\n type DragHandlePluginProps,\n type NestedOptions,\n defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<\n Optional<DragHandlePluginProps, 'pluginKey'>,\n 'element' | 'nestedOptions'\n> & {\n className?: string\n onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n children: ReactNode\n\n /**\n * Enable drag handles for nested content (list items, blockquotes, etc.).\n *\n * When enabled, the drag handle will appear for nested blocks, not just\n * top-level blocks. A rule-based scoring system determines which node\n * to target based on cursor position and configured rules.\n *\n * @default false\n *\n * @example\n * // Simple enable with sensible defaults\n * <DragHandle editor={editor} nested>\n * <GripIcon />\n * </DragHandle>\n *\n * @example\n * // With custom configuration\n * <DragHandle\n * editor={editor}\n * nested={{\n * edgeDetection: 'left',\n * allowedContainers: ['bulletList', 'orderedList'],\n * }}\n * >\n * <GripIcon />\n * </DragHandle>\n *\n * @example\n * // With custom rules\n * <DragHandle\n * editor={editor}\n * nested={{\n * rules: [{\n * id: 'excludeCodeBlocks',\n * evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,\n * }],\n * }}\n * >\n * <GripIcon />\n * </DragHandle>\n */\n nested?: boolean | NestedOptions\n}\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n onElementDragStart,\n onElementDragEnd,\n getReferencedVirtualElement,\n computePositionConfig = defaultComputePositionConfig,\n nested = false,\n } = props\n const elementRef = useRef<HTMLDivElement | null>(null)\n\n if (elementRef.current === null && typeof document !== 'undefined') {\n elementRef.current = document.createElement('div')\n }\n\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n useEffect(() => {\n const element = elementRef.current\n if (!element) {\n return\n }\n\n element.className = className\n }, [className])\n\n useEffect(() => {\n if (typeof document === 'undefined') {\n return\n }\n\n if (editor.isDestroyed) {\n return\n }\n\n const element = elementRef.current\n if (!element) {\n return\n }\n\n element.style.visibility = 'hidden'\n element.style.position = 'absolute'\n element.dataset.dragging = 'false'\n\n const { plugin, unbind } = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n computePositionConfig: {\n ...defaultComputePositionConfig,\n ...computePositionConfig,\n },\n onElementDragStart,\n onElementDragEnd,\n onNodeChange,\n getReferencedVirtualElement,\n nestedOptions,\n })\n\n editor.registerPlugin(plugin)\n\n return () => {\n if (!editor.isDestroyed) {\n editor.unregisterPlugin(pluginKey)\n }\n unbind()\n }\n }, [\n editor,\n onNodeChange,\n getReferencedVirtualElement,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\n const element = elementRef.current\n if (!element) {\n return null\n }\n\n return createPortal(children, element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAOO;AAGP,mBAA2D;AAC3D,uBAA6B;AAwDtB,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB,SAAS;AAAA,EACX,IAAI;AACJ,QAAM,iBAAa,qBAA8B,IAAI;AAErD,MAAI,WAAW,YAAY,QAAQ,OAAO,aAAa,aAAa;AAClE,eAAW,UAAU,SAAS,cAAc,KAAK;AAAA,EACnD;AAGA,QAAM,oBAAgB,sBAAQ,UAAM,qDAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,8BAAU,MAAM;AACd,UAAMA,WAAU,WAAW;AAC3B,QAAI,CAACA,UAAS;AACZ;AAAA,IACF;AAEA,IAAAA,SAAQ,YAAY;AAAA,EACtB,GAAG,CAAC,SAAS,CAAC;AAEd,8BAAU,MAAM;AACd,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAMA,WAAU,WAAW;AAC3B,QAAI,CAACA,UAAS;AACZ;AAAA,IACF;AAEA,IAAAA,SAAQ,MAAM,aAAa;AAC3B,IAAAA,SAAQ,MAAM,WAAW;AACzB,IAAAA,SAAQ,QAAQ,WAAW;AAE3B,UAAM,EAAE,QAAQ,OAAO,QAAI,+CAAiB;AAAA,MAC1C;AAAA,MACA,SAAAA;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,eAAe,MAAM;AAE5B,WAAO,MAAM;AACX,UAAI,CAAC,OAAO,aAAa;AACvB,eAAO,iBAAiB,SAAS;AAAA,MACnC;AACA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,aAAO,+BAAa,UAAU,OAAO;AACvC;;;ADxJA,IAAO,gBAAQ;","names":["element"]}
|
package/dist/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
dragHandlePluginDefaultKey,
|
|
6
6
|
normalizeNestedOptions
|
|
7
7
|
} from "@tiptap/extension-drag-handle";
|
|
8
|
-
import { useEffect, useMemo,
|
|
8
|
+
import { useEffect, useMemo, useRef } from "react";
|
|
9
9
|
import { createPortal } from "react-dom";
|
|
10
10
|
var DragHandle = (props) => {
|
|
11
11
|
const {
|
|
@@ -20,32 +20,35 @@ var DragHandle = (props) => {
|
|
|
20
20
|
computePositionConfig = defaultComputePositionConfig,
|
|
21
21
|
nested = false
|
|
22
22
|
} = props;
|
|
23
|
-
const
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
return document.createElement("div");
|
|
28
|
-
});
|
|
23
|
+
const elementRef = useRef(null);
|
|
24
|
+
if (elementRef.current === null && typeof document !== "undefined") {
|
|
25
|
+
elementRef.current = document.createElement("div");
|
|
26
|
+
}
|
|
29
27
|
const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)]);
|
|
30
28
|
useEffect(() => {
|
|
31
|
-
|
|
29
|
+
const element2 = elementRef.current;
|
|
30
|
+
if (!element2) {
|
|
32
31
|
return;
|
|
33
32
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
element.style.position = "absolute";
|
|
37
|
-
element.dataset.dragging = "false";
|
|
38
|
-
}, [className, element]);
|
|
33
|
+
element2.className = className;
|
|
34
|
+
}, [className]);
|
|
39
35
|
useEffect(() => {
|
|
40
|
-
if (
|
|
36
|
+
if (typeof document === "undefined") {
|
|
41
37
|
return;
|
|
42
38
|
}
|
|
43
39
|
if (editor.isDestroyed) {
|
|
44
40
|
return;
|
|
45
41
|
}
|
|
42
|
+
const element2 = elementRef.current;
|
|
43
|
+
if (!element2) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
element2.style.visibility = "hidden";
|
|
47
|
+
element2.style.position = "absolute";
|
|
48
|
+
element2.dataset.dragging = "false";
|
|
46
49
|
const { plugin, unbind } = DragHandlePlugin({
|
|
47
50
|
editor,
|
|
48
|
-
element,
|
|
51
|
+
element: element2,
|
|
49
52
|
pluginKey,
|
|
50
53
|
computePositionConfig: {
|
|
51
54
|
...defaultComputePositionConfig,
|
|
@@ -65,7 +68,6 @@ var DragHandle = (props) => {
|
|
|
65
68
|
unbind();
|
|
66
69
|
};
|
|
67
70
|
}, [
|
|
68
|
-
element,
|
|
69
71
|
editor,
|
|
70
72
|
onNodeChange,
|
|
71
73
|
getReferencedVirtualElement,
|
|
@@ -75,6 +77,7 @@ var DragHandle = (props) => {
|
|
|
75
77
|
onElementDragEnd,
|
|
76
78
|
nestedOptions
|
|
77
79
|
]);
|
|
80
|
+
const element = elementRef.current;
|
|
78
81
|
if (!element) {
|
|
79
82
|
return null;
|
|
80
83
|
}
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/DragHandle.tsx","../src/index.ts"],"sourcesContent":["import {\n type DragHandlePluginProps,\n type NestedOptions,\n defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo,
|
|
1
|
+
{"version":3,"sources":["../src/DragHandle.tsx","../src/index.ts"],"sourcesContent":["import {\n type DragHandlePluginProps,\n type NestedOptions,\n defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo, useRef } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<\n Optional<DragHandlePluginProps, 'pluginKey'>,\n 'element' | 'nestedOptions'\n> & {\n className?: string\n onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n children: ReactNode\n\n /**\n * Enable drag handles for nested content (list items, blockquotes, etc.).\n *\n * When enabled, the drag handle will appear for nested blocks, not just\n * top-level blocks. A rule-based scoring system determines which node\n * to target based on cursor position and configured rules.\n *\n * @default false\n *\n * @example\n * // Simple enable with sensible defaults\n * <DragHandle editor={editor} nested>\n * <GripIcon />\n * </DragHandle>\n *\n * @example\n * // With custom configuration\n * <DragHandle\n * editor={editor}\n * nested={{\n * edgeDetection: 'left',\n * allowedContainers: ['bulletList', 'orderedList'],\n * }}\n * >\n * <GripIcon />\n * </DragHandle>\n *\n * @example\n * // With custom rules\n * <DragHandle\n * editor={editor}\n * nested={{\n * rules: [{\n * id: 'excludeCodeBlocks',\n * evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,\n * }],\n * }}\n * >\n * <GripIcon />\n * </DragHandle>\n */\n nested?: boolean | NestedOptions\n}\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n onElementDragStart,\n onElementDragEnd,\n getReferencedVirtualElement,\n computePositionConfig = defaultComputePositionConfig,\n nested = false,\n } = props\n const elementRef = useRef<HTMLDivElement | null>(null)\n\n if (elementRef.current === null && typeof document !== 'undefined') {\n elementRef.current = document.createElement('div')\n }\n\n // oxlint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n useEffect(() => {\n const element = elementRef.current\n if (!element) {\n return\n }\n\n element.className = className\n }, [className])\n\n useEffect(() => {\n if (typeof document === 'undefined') {\n return\n }\n\n if (editor.isDestroyed) {\n return\n }\n\n const element = elementRef.current\n if (!element) {\n return\n }\n\n element.style.visibility = 'hidden'\n element.style.position = 'absolute'\n element.dataset.dragging = 'false'\n\n const { plugin, unbind } = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n computePositionConfig: {\n ...defaultComputePositionConfig,\n ...computePositionConfig,\n },\n onElementDragStart,\n onElementDragEnd,\n onNodeChange,\n getReferencedVirtualElement,\n nestedOptions,\n })\n\n editor.registerPlugin(plugin)\n\n return () => {\n if (!editor.isDestroyed) {\n editor.unregisterPlugin(pluginKey)\n }\n unbind()\n }\n }, [\n editor,\n onNodeChange,\n getReferencedVirtualElement,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\n const element = elementRef.current\n if (!element) {\n return null\n }\n\n return createPortal(children, element)\n}\n","import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n"],"mappings":";AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAyB,WAAW,SAAS,cAAc;AAC3D,SAAS,oBAAoB;AAwDtB,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB,SAAS;AAAA,EACX,IAAI;AACJ,QAAM,aAAa,OAA8B,IAAI;AAErD,MAAI,WAAW,YAAY,QAAQ,OAAO,aAAa,aAAa;AAClE,eAAW,UAAU,SAAS,cAAc,KAAK;AAAA,EACnD;AAGA,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,YAAU,MAAM;AACd,UAAMA,WAAU,WAAW;AAC3B,QAAI,CAACA,UAAS;AACZ;AAAA,IACF;AAEA,IAAAA,SAAQ,YAAY;AAAA,EACtB,GAAG,CAAC,SAAS,CAAC;AAEd,YAAU,MAAM;AACd,QAAI,OAAO,aAAa,aAAa;AACnC;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAMA,WAAU,WAAW;AAC3B,QAAI,CAACA,UAAS;AACZ;AAAA,IACF;AAEA,IAAAA,SAAQ,MAAM,aAAa;AAC3B,IAAAA,SAAQ,MAAM,WAAW;AACzB,IAAAA,SAAQ,QAAQ,WAAW;AAE3B,UAAM,EAAE,QAAQ,OAAO,IAAI,iBAAiB;AAAA,MAC1C;AAAA,MACA,SAAAA;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,eAAe,MAAM;AAE5B,WAAO,MAAM;AACX,UAAI,CAAC,OAAO,aAAa;AACvB,eAAO,iBAAiB,SAAS;AAAA,MACnC;AACA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,aAAa,UAAU,OAAO;AACvC;;;ACxJA,IAAO,gBAAQ;","names":["element"]}
|
package/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-drag-handle-react",
|
|
3
|
-
"version": "3.27.
|
|
3
|
+
"version": "3.27.3",
|
|
4
4
|
"description": "drag handle extension for tiptap with react",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"tiptap",
|
|
7
7
|
"tiptap extension"
|
|
8
8
|
],
|
|
9
9
|
"homepage": "https://tiptap.dev",
|
|
10
|
+
"bugs": {
|
|
11
|
+
"url": "https://github.com/ueberdosis/tiptap/issues"
|
|
12
|
+
},
|
|
10
13
|
"license": "MIT",
|
|
11
14
|
"repository": {
|
|
12
15
|
"type": "git",
|
|
13
16
|
"url": "https://github.com/ueberdosis/tiptap",
|
|
14
17
|
"directory": "packages/extension-drag-handle-react"
|
|
15
18
|
},
|
|
16
|
-
"bugs": {
|
|
17
|
-
"url": "https://github.com/ueberdosis/tiptap/issues"
|
|
18
|
-
},
|
|
19
19
|
"funding": {
|
|
20
20
|
"type": "github",
|
|
21
21
|
"url": "https://github.com/sponsors/ueberdosis"
|
|
@@ -39,20 +39,20 @@
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@types/react": "^
|
|
43
|
-
"@types/react-dom": "^
|
|
44
|
-
"react": "^
|
|
45
|
-
"react-dom": "^
|
|
46
|
-
"@tiptap/extension-drag-handle": "^3.27.
|
|
47
|
-
"@tiptap/
|
|
48
|
-
"@tiptap/
|
|
42
|
+
"@types/react": "^19.0.0",
|
|
43
|
+
"@types/react-dom": "^19.0.0",
|
|
44
|
+
"react": "^19.0.0",
|
|
45
|
+
"react-dom": "^19.0.0",
|
|
46
|
+
"@tiptap/extension-drag-handle": "^3.27.3",
|
|
47
|
+
"@tiptap/pm": "^3.27.3",
|
|
48
|
+
"@tiptap/react": "^3.27.3"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
51
51
|
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
52
52
|
"react-dom": "^16.8 || ^17 || ^18 || ^19",
|
|
53
|
-
"@tiptap/
|
|
54
|
-
"@tiptap/
|
|
55
|
-
"@tiptap/react": "3.27.
|
|
53
|
+
"@tiptap/extension-drag-handle": "3.27.3",
|
|
54
|
+
"@tiptap/pm": "3.27.3",
|
|
55
|
+
"@tiptap/react": "3.27.3"
|
|
56
56
|
},
|
|
57
57
|
"scripts": {
|
|
58
58
|
"build": "tsup"
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
import { render } from '@testing-library/react'
|
|
2
|
+
import React from 'react'
|
|
3
|
+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
|
|
4
|
+
|
|
5
|
+
import { DragHandle } from './DragHandle.js'
|
|
6
|
+
|
|
7
|
+
const { dragHandlePluginMock, unbindMock } = vi.hoisted(() => ({
|
|
8
|
+
dragHandlePluginMock: vi.fn(() => ({
|
|
9
|
+
plugin: { spec: { key: 'dragHandle' } },
|
|
10
|
+
unbind: unbindMock,
|
|
11
|
+
})),
|
|
12
|
+
unbindMock: vi.fn(),
|
|
13
|
+
}))
|
|
14
|
+
|
|
15
|
+
vi.mock('@tiptap/extension-drag-handle', () => ({
|
|
16
|
+
DragHandlePlugin: dragHandlePluginMock,
|
|
17
|
+
dragHandlePluginDefaultKey: 'dragHandle',
|
|
18
|
+
defaultComputePositionConfig: {},
|
|
19
|
+
normalizeNestedOptions: (value: unknown) => value,
|
|
20
|
+
}))
|
|
21
|
+
|
|
22
|
+
function createEditor() {
|
|
23
|
+
return {
|
|
24
|
+
isDestroyed: false,
|
|
25
|
+
registerPlugin: vi.fn(),
|
|
26
|
+
unregisterPlugin: vi.fn(),
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
describe('DragHandle', () => {
|
|
31
|
+
beforeEach(() => {
|
|
32
|
+
dragHandlePluginMock.mockClear()
|
|
33
|
+
unbindMock.mockClear()
|
|
34
|
+
})
|
|
35
|
+
|
|
36
|
+
afterEach(() => {
|
|
37
|
+
document.body.innerHTML = ''
|
|
38
|
+
})
|
|
39
|
+
|
|
40
|
+
it('survives the React 19 strict-mode double mount with a stable portal element', () => {
|
|
41
|
+
const editor = createEditor()
|
|
42
|
+
|
|
43
|
+
let result: ReturnType<typeof render> | undefined
|
|
44
|
+
const renderInStrictMode = () => {
|
|
45
|
+
result = render(
|
|
46
|
+
React.createElement(
|
|
47
|
+
React.StrictMode,
|
|
48
|
+
null,
|
|
49
|
+
React.createElement(DragHandle, {
|
|
50
|
+
editor: editor as never,
|
|
51
|
+
children: React.createElement('button', { type: 'button' }, 'Drag'),
|
|
52
|
+
} as never),
|
|
53
|
+
),
|
|
54
|
+
)
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
expect(renderInStrictMode).not.toThrow()
|
|
58
|
+
|
|
59
|
+
// StrictMode mounts, tears down, then remounts the effect in development.
|
|
60
|
+
// Every setup pass must reuse the same element instance created via useRef.
|
|
61
|
+
expect(dragHandlePluginMock.mock.calls.length).toBeGreaterThan(1)
|
|
62
|
+
const elements = dragHandlePluginMock.mock.calls.map(([options]) => options.element)
|
|
63
|
+
const [firstElement] = elements
|
|
64
|
+
|
|
65
|
+
expect(firstElement).toBeInstanceOf(HTMLDivElement)
|
|
66
|
+
expect(elements.every(element => element === firstElement)).toBe(true)
|
|
67
|
+
expect(unbindMock).toHaveBeenCalled()
|
|
68
|
+
expect(firstElement.textContent).toContain('Drag')
|
|
69
|
+
|
|
70
|
+
result?.unmount()
|
|
71
|
+
|
|
72
|
+
expect(editor.unregisterPlugin).toHaveBeenCalledWith('dragHandle')
|
|
73
|
+
expect(unbindMock).toHaveBeenCalled()
|
|
74
|
+
})
|
|
75
|
+
|
|
76
|
+
it('updates className without re-registering the plugin', () => {
|
|
77
|
+
const editor = createEditor()
|
|
78
|
+
|
|
79
|
+
const { rerender } = render(
|
|
80
|
+
React.createElement(DragHandle, {
|
|
81
|
+
editor: editor as never,
|
|
82
|
+
className: 'drag-handle',
|
|
83
|
+
children: React.createElement('span', null, 'Handle'),
|
|
84
|
+
} as never),
|
|
85
|
+
)
|
|
86
|
+
|
|
87
|
+
const registerCount = editor.registerPlugin.mock.calls.length
|
|
88
|
+
const unregisterCount = editor.unregisterPlugin.mock.calls.length
|
|
89
|
+
const element = dragHandlePluginMock.mock.calls[0][0].element
|
|
90
|
+
|
|
91
|
+
expect(element.className).toBe('drag-handle')
|
|
92
|
+
|
|
93
|
+
rerender(
|
|
94
|
+
React.createElement(DragHandle, {
|
|
95
|
+
editor: editor as never,
|
|
96
|
+
className: 'drag-handle-updated',
|
|
97
|
+
children: React.createElement('span', null, 'Handle'),
|
|
98
|
+
} as never),
|
|
99
|
+
)
|
|
100
|
+
|
|
101
|
+
expect(element.className).toBe('drag-handle-updated')
|
|
102
|
+
expect(editor.registerPlugin.mock.calls.length).toBe(registerCount)
|
|
103
|
+
expect(editor.unregisterPlugin.mock.calls.length).toBe(unregisterCount)
|
|
104
|
+
})
|
|
105
|
+
})
|
package/src/DragHandle.tsx
CHANGED
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
} from '@tiptap/extension-drag-handle'
|
|
9
9
|
import type { Node } from '@tiptap/pm/model'
|
|
10
10
|
import type { Editor } from '@tiptap/react'
|
|
11
|
-
import { type ReactNode, useEffect, useMemo,
|
|
11
|
+
import { type ReactNode, useEffect, useMemo, useRef } from 'react'
|
|
12
12
|
import { createPortal } from 'react-dom'
|
|
13
13
|
|
|
14
14
|
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
|
|
@@ -78,30 +78,26 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
78
78
|
computePositionConfig = defaultComputePositionConfig,
|
|
79
79
|
nested = false,
|
|
80
80
|
} = props
|
|
81
|
-
const
|
|
82
|
-
if (typeof document === 'undefined') {
|
|
83
|
-
return null
|
|
84
|
-
}
|
|
81
|
+
const elementRef = useRef<HTMLDivElement | null>(null)
|
|
85
82
|
|
|
86
|
-
|
|
87
|
-
|
|
83
|
+
if (elementRef.current === null && typeof document !== 'undefined') {
|
|
84
|
+
elementRef.current = document.createElement('div')
|
|
85
|
+
}
|
|
88
86
|
|
|
89
87
|
// oxlint-disable-next-line react-hooks/exhaustive-deps
|
|
90
88
|
const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])
|
|
91
89
|
|
|
92
90
|
useEffect(() => {
|
|
91
|
+
const element = elementRef.current
|
|
93
92
|
if (!element) {
|
|
94
93
|
return
|
|
95
94
|
}
|
|
96
95
|
|
|
97
96
|
element.className = className
|
|
98
|
-
|
|
99
|
-
element.style.position = 'absolute'
|
|
100
|
-
element.dataset.dragging = 'false'
|
|
101
|
-
}, [className, element])
|
|
97
|
+
}, [className])
|
|
102
98
|
|
|
103
99
|
useEffect(() => {
|
|
104
|
-
if (
|
|
100
|
+
if (typeof document === 'undefined') {
|
|
105
101
|
return
|
|
106
102
|
}
|
|
107
103
|
|
|
@@ -109,6 +105,15 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
109
105
|
return
|
|
110
106
|
}
|
|
111
107
|
|
|
108
|
+
const element = elementRef.current
|
|
109
|
+
if (!element) {
|
|
110
|
+
return
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
element.style.visibility = 'hidden'
|
|
114
|
+
element.style.position = 'absolute'
|
|
115
|
+
element.dataset.dragging = 'false'
|
|
116
|
+
|
|
112
117
|
const { plugin, unbind } = DragHandlePlugin({
|
|
113
118
|
editor,
|
|
114
119
|
element,
|
|
@@ -133,7 +138,6 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
133
138
|
unbind()
|
|
134
139
|
}
|
|
135
140
|
}, [
|
|
136
|
-
element,
|
|
137
141
|
editor,
|
|
138
142
|
onNodeChange,
|
|
139
143
|
getReferencedVirtualElement,
|
|
@@ -144,6 +148,7 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
144
148
|
nestedOptions,
|
|
145
149
|
])
|
|
146
150
|
|
|
151
|
+
const element = elementRef.current
|
|
147
152
|
if (!element) {
|
|
148
153
|
return null
|
|
149
154
|
}
|