@tiptap/extension-drag-handle-react 3.0.9 → 3.2.0
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 +9 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +9 -2
- package/dist/index.js.map +1 -1
- package/package.json +7 -7
- package/src/DragHandle.tsx +9 -2
package/dist/index.cjs
CHANGED
|
@@ -36,6 +36,8 @@ var DragHandle = (props) => {
|
|
|
36
36
|
editor,
|
|
37
37
|
pluginKey = import_extension_drag_handle.dragHandlePluginDefaultKey,
|
|
38
38
|
onNodeChange,
|
|
39
|
+
onElementDragStart,
|
|
40
|
+
onElementDragEnd,
|
|
39
41
|
computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig
|
|
40
42
|
} = props;
|
|
41
43
|
const [element, setElement] = (0, import_react.useState)(null);
|
|
@@ -57,7 +59,12 @@ var DragHandle = (props) => {
|
|
|
57
59
|
editor,
|
|
58
60
|
element,
|
|
59
61
|
pluginKey,
|
|
60
|
-
computePositionConfig: {
|
|
62
|
+
computePositionConfig: {
|
|
63
|
+
...import_extension_drag_handle.defaultComputePositionConfig,
|
|
64
|
+
...computePositionConfig
|
|
65
|
+
},
|
|
66
|
+
onElementDragStart,
|
|
67
|
+
onElementDragEnd,
|
|
61
68
|
onNodeChange
|
|
62
69
|
});
|
|
63
70
|
plugin.current = initPlugin.plugin;
|
|
@@ -71,7 +78,7 @@ var DragHandle = (props) => {
|
|
|
71
78
|
initPlugin = null;
|
|
72
79
|
}
|
|
73
80
|
};
|
|
74
|
-
}, [element, editor, onNodeChange, pluginKey, computePositionConfig]);
|
|
81
|
+
}, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd]);
|
|
75
82
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { visibility: "hidden", position: "absolute" }, ref: setElement, children });
|
|
76
83
|
};
|
|
77
84
|
|
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 defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useRef, useState } from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n className?: string\n onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n children: ReactNode\n}\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n computePositionConfig = defaultComputePositionConfig,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\n let initPlugin: {\n plugin: Plugin\n unbind: () => void\n } | null = null\n\n if (!element) {\n return () => {\n plugin.current = null\n }\n }\n\n if (editor.isDestroyed) {\n return () => {\n plugin.current = null\n }\n }\n\n if (!plugin.current) {\n initPlugin = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n computePositionConfig: {
|
|
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 defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useRef, useState } from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n className?: string\n onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n children: ReactNode\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 computePositionConfig = defaultComputePositionConfig,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\n let initPlugin: {\n plugin: Plugin\n unbind: () => void\n } | null = null\n\n if (!element) {\n return () => {\n plugin.current = null\n }\n }\n\n if (editor.isDestroyed) {\n return () => {\n plugin.current = null\n }\n }\n\n if (!plugin.current) {\n initPlugin = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n computePositionConfig: {\n ...defaultComputePositionConfig,\n ...computePositionConfig,\n },\n onElementDragStart,\n onElementDragEnd,\n onNodeChange,\n })\n plugin.current = initPlugin.plugin\n\n editor.registerPlugin(plugin.current)\n }\n\n return () => {\n editor.unregisterPlugin(pluginKey)\n plugin.current = null\n if (initPlugin) {\n initPlugin.unbind()\n initPlugin = null\n }\n }\n }, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd])\n\n return (\n <div className={className} style={{ visibility: 'hidden', position: 'absolute' }} ref={setElement}>\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAKO;AAIP,mBAA4D;AAuExD;AA7DG,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,EAC1B,IAAI;AACJ,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAgC,IAAI;AAClE,QAAM,aAAS,qBAAsB,IAAI;AAEzC,8BAAU,MAAM;AACd,QAAI,aAGO;AAEX,QAAI,CAAC,SAAS;AACZ,aAAO,MAAM;AACX,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB,aAAO,MAAM;AACX,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAEA,QAAI,CAAC,OAAO,SAAS;AACnB,uBAAa,+CAAiB;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,uBAAuB;AAAA,UACrB,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AACD,aAAO,UAAU,WAAW;AAE5B,aAAO,eAAe,OAAO,OAAO;AAAA,IACtC;AAEA,WAAO,MAAM;AACX,aAAO,iBAAiB,SAAS;AACjC,aAAO,UAAU;AACjB,UAAI,YAAY;AACd,mBAAW,OAAO;AAClB,qBAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,cAAc,WAAW,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE1G,SACE,4CAAC,SAAI,WAAsB,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW,GAAG,KAAK,YACpF,UACH;AAEJ;;;ADhFA,IAAO,gBAAQ;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -13,6 +13,8 @@ var DragHandle = (props) => {
|
|
|
13
13
|
editor,
|
|
14
14
|
pluginKey = dragHandlePluginDefaultKey,
|
|
15
15
|
onNodeChange,
|
|
16
|
+
onElementDragStart,
|
|
17
|
+
onElementDragEnd,
|
|
16
18
|
computePositionConfig = defaultComputePositionConfig
|
|
17
19
|
} = props;
|
|
18
20
|
const [element, setElement] = useState(null);
|
|
@@ -34,7 +36,12 @@ var DragHandle = (props) => {
|
|
|
34
36
|
editor,
|
|
35
37
|
element,
|
|
36
38
|
pluginKey,
|
|
37
|
-
computePositionConfig: {
|
|
39
|
+
computePositionConfig: {
|
|
40
|
+
...defaultComputePositionConfig,
|
|
41
|
+
...computePositionConfig
|
|
42
|
+
},
|
|
43
|
+
onElementDragStart,
|
|
44
|
+
onElementDragEnd,
|
|
38
45
|
onNodeChange
|
|
39
46
|
});
|
|
40
47
|
plugin.current = initPlugin.plugin;
|
|
@@ -48,7 +55,7 @@ var DragHandle = (props) => {
|
|
|
48
55
|
initPlugin = null;
|
|
49
56
|
}
|
|
50
57
|
};
|
|
51
|
-
}, [element, editor, onNodeChange, pluginKey, computePositionConfig]);
|
|
58
|
+
}, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd]);
|
|
52
59
|
return /* @__PURE__ */ jsx("div", { className, style: { visibility: "hidden", position: "absolute" }, ref: setElement, children });
|
|
53
60
|
};
|
|
54
61
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/DragHandle.tsx","../src/index.ts"],"sourcesContent":["import {\n type DragHandlePluginProps,\n defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useRef, useState } from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n className?: string\n onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n children: ReactNode\n}\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n computePositionConfig = defaultComputePositionConfig,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\n let initPlugin: {\n plugin: Plugin\n unbind: () => void\n } | null = null\n\n if (!element) {\n return () => {\n plugin.current = null\n }\n }\n\n if (editor.isDestroyed) {\n return () => {\n plugin.current = null\n }\n }\n\n if (!plugin.current) {\n initPlugin = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n computePositionConfig: {
|
|
1
|
+
{"version":3,"sources":["../src/DragHandle.tsx","../src/index.ts"],"sourcesContent":["import {\n type DragHandlePluginProps,\n defaultComputePositionConfig,\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Plugin } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useRef, useState } from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n className?: string\n onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n children: ReactNode\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 computePositionConfig = defaultComputePositionConfig,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\n let initPlugin: {\n plugin: Plugin\n unbind: () => void\n } | null = null\n\n if (!element) {\n return () => {\n plugin.current = null\n }\n }\n\n if (editor.isDestroyed) {\n return () => {\n plugin.current = null\n }\n }\n\n if (!plugin.current) {\n initPlugin = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n computePositionConfig: {\n ...defaultComputePositionConfig,\n ...computePositionConfig,\n },\n onElementDragStart,\n onElementDragEnd,\n onNodeChange,\n })\n plugin.current = initPlugin.plugin\n\n editor.registerPlugin(plugin.current)\n }\n\n return () => {\n editor.unregisterPlugin(pluginKey)\n plugin.current = null\n if (initPlugin) {\n initPlugin.unbind()\n initPlugin = null\n }\n }\n }, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd])\n\n return (\n <div className={className} style={{ visibility: 'hidden', position: 'absolute' }} ref={setElement}>\n {children}\n </div>\n )\n}\n","import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n"],"mappings":";AAAA;AAAA,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAyB,WAAW,QAAQ,gBAAgB;AAuExD;AA7DG,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,EAC1B,IAAI;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAAgC,IAAI;AAClE,QAAM,SAAS,OAAsB,IAAI;AAEzC,YAAU,MAAM;AACd,QAAI,aAGO;AAEX,QAAI,CAAC,SAAS;AACZ,aAAO,MAAM;AACX,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB,aAAO,MAAM;AACX,eAAO,UAAU;AAAA,MACnB;AAAA,IACF;AAEA,QAAI,CAAC,OAAO,SAAS;AACnB,mBAAa,iBAAiB;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,uBAAuB;AAAA,UACrB,GAAG;AAAA,UACH,GAAG;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AACD,aAAO,UAAU,WAAW;AAE5B,aAAO,eAAe,OAAO,OAAO;AAAA,IACtC;AAEA,WAAO,MAAM;AACX,aAAO,iBAAiB,SAAS;AACjC,aAAO,UAAU;AACjB,UAAI,YAAY;AACd,mBAAW,OAAO;AAClB,qBAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,cAAc,WAAW,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE1G,SACE,oBAAC,SAAI,WAAsB,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW,GAAG,KAAK,YACpF,UACH;AAEJ;;;AChFA,IAAO,gBAAQ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-drag-handle-react",
|
|
3
3
|
"description": "drag handle extension for tiptap with react",
|
|
4
|
-
"version": "3.0
|
|
4
|
+
"version": "3.2.0",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -38,18 +38,18 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
40
40
|
"react-dom": "^16.8 || ^17 || ^18 || ^19",
|
|
41
|
-
"@tiptap/extension-drag-handle": "^3.0
|
|
42
|
-
"@tiptap/pm": "^3.0
|
|
43
|
-
"@tiptap/react": "^3.0
|
|
41
|
+
"@tiptap/extension-drag-handle": "^3.2.0",
|
|
42
|
+
"@tiptap/pm": "^3.2.0",
|
|
43
|
+
"@tiptap/react": "^3.2.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@types/react": "^18.0.0",
|
|
47
47
|
"@types/react-dom": "^18.0.0",
|
|
48
48
|
"react": "^18.0.0",
|
|
49
49
|
"react-dom": "^18.0.0",
|
|
50
|
-
"@tiptap/extension-drag-handle": "^3.0
|
|
51
|
-
"@tiptap/pm": "^3.0
|
|
52
|
-
"@tiptap/react": "^3.0
|
|
50
|
+
"@tiptap/extension-drag-handle": "^3.2.0",
|
|
51
|
+
"@tiptap/pm": "^3.2.0",
|
|
52
|
+
"@tiptap/react": "^3.2.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "tsup",
|
package/src/DragHandle.tsx
CHANGED
|
@@ -24,6 +24,8 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
24
24
|
editor,
|
|
25
25
|
pluginKey = dragHandlePluginDefaultKey,
|
|
26
26
|
onNodeChange,
|
|
27
|
+
onElementDragStart,
|
|
28
|
+
onElementDragEnd,
|
|
27
29
|
computePositionConfig = defaultComputePositionConfig,
|
|
28
30
|
} = props
|
|
29
31
|
const [element, setElement] = useState<HTMLDivElement | null>(null)
|
|
@@ -52,7 +54,12 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
52
54
|
editor,
|
|
53
55
|
element,
|
|
54
56
|
pluginKey,
|
|
55
|
-
computePositionConfig: {
|
|
57
|
+
computePositionConfig: {
|
|
58
|
+
...defaultComputePositionConfig,
|
|
59
|
+
...computePositionConfig,
|
|
60
|
+
},
|
|
61
|
+
onElementDragStart,
|
|
62
|
+
onElementDragEnd,
|
|
56
63
|
onNodeChange,
|
|
57
64
|
})
|
|
58
65
|
plugin.current = initPlugin.plugin
|
|
@@ -68,7 +75,7 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
68
75
|
initPlugin = null
|
|
69
76
|
}
|
|
70
77
|
}
|
|
71
|
-
}, [element, editor, onNodeChange, pluginKey, computePositionConfig])
|
|
78
|
+
}, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd])
|
|
72
79
|
|
|
73
80
|
return (
|
|
74
81
|
<div className={className} style={{ visibility: 'hidden', position: 'absolute' }} ref={setElement}>
|