@tiptap/extension-drag-handle-react 3.23.4 → 3.23.6

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.
Files changed (6) hide show
  1. package/dist/index.cjs +3 -0
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +3 -0
  4. package/dist/index.js.map +1 -1
  5. package/package.json +7 -7
  6. package/src/DragHandle.tsx +3 -0
package/dist/index.cjs CHANGED
@@ -38,6 +38,7 @@ var DragHandle = (props) => {
38
38
  onNodeChange,
39
39
  onElementDragStart,
40
40
  onElementDragEnd,
41
+ getReferencedVirtualElement,
41
42
  computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig,
42
43
  nested = false
43
44
  } = props;
@@ -75,6 +76,7 @@ var DragHandle = (props) => {
75
76
  onElementDragStart,
76
77
  onElementDragEnd,
77
78
  onNodeChange,
79
+ getReferencedVirtualElement,
78
80
  nestedOptions
79
81
  });
80
82
  editor.registerPlugin(plugin);
@@ -88,6 +90,7 @@ var DragHandle = (props) => {
88
90
  element,
89
91
  editor,
90
92
  onNodeChange,
93
+ getReferencedVirtualElement,
91
94
  pluginKey,
92
95
  computePositionConfig,
93
96
  onElementDragStart,
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, useState } 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<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {\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 computePositionConfig = defaultComputePositionConfig,\n nested = false,\n } = props\n const [element] = useState<HTMLDivElement | null>(() => {\n if (typeof document === 'undefined') {\n return null\n }\n\n return document.createElement('div')\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n element.className = className\n element.style.visibility = 'hidden'\n element.style.position = 'absolute'\n element.dataset.dragging = 'false'\n }, [className, element])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n if (editor.isDestroyed) {\n return\n }\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 nestedOptions,\n })\n\n editor.registerPlugin(plugin)\n\n return () => {\n if (!editor.isDestroyed) {\n editor.unregisterPlugin(pluginKey)\n }\n unbind()\n }\n }, [\n element,\n editor,\n onNodeChange,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\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,mBAA6D;AAC7D,uBAA6B;AAqDtB,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,IACxB,SAAS;AAAA,EACX,IAAI;AACJ,QAAM,CAAC,OAAO,QAAI,uBAAgC,MAAM;AACtD,QAAI,OAAO,aAAa,aAAa;AACnC,aAAO;AAAA,IACT;AAEA,WAAO,SAAS,cAAc,KAAK;AAAA,EACrC,CAAC;AAGD,QAAM,oBAAgB,sBAAQ,UAAM,qDAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ,YAAY;AACpB,YAAQ,MAAM,aAAa;AAC3B,YAAQ,MAAM,WAAW;AACzB,YAAQ,QAAQ,WAAW;AAAA,EAC7B,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,EAAE,QAAQ,OAAO,QAAI,+CAAiB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,MACL;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,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,aAAO,+BAAa,UAAU,OAAO;AACvC;;;AD7IA,IAAO,gBAAQ;","names":[]}
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, useState } 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<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {\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 [element] = useState<HTMLDivElement | null>(() => {\n if (typeof document === 'undefined') {\n return null\n }\n\n return document.createElement('div')\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n element.className = className\n element.style.visibility = 'hidden'\n element.style.position = 'absolute'\n element.dataset.dragging = 'false'\n }, [className, element])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n if (editor.isDestroyed) {\n return\n }\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 element,\n editor,\n onNodeChange,\n getReferencedVirtualElement,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\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,mBAA6D;AAC7D,uBAA6B;AAqDtB,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,CAAC,OAAO,QAAI,uBAAgC,MAAM;AACtD,QAAI,OAAO,aAAa,aAAa;AACnC,aAAO;AAAA,IACT;AAEA,WAAO,SAAS,cAAc,KAAK;AAAA,EACrC,CAAC;AAGD,QAAM,oBAAgB,sBAAQ,UAAM,qDAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ,YAAY;AACpB,YAAQ,MAAM,aAAa;AAC3B,YAAQ,MAAM,WAAW;AACzB,YAAQ,QAAQ,WAAW;AAAA,EAC7B,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,EAAE,QAAQ,OAAO,QAAI,+CAAiB;AAAA,MAC1C;AAAA,MACA;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,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,aAAO,+BAAa,UAAU,OAAO;AACvC;;;ADhJA,IAAO,gBAAQ;","names":[]}
package/dist/index.js CHANGED
@@ -16,6 +16,7 @@ var DragHandle = (props) => {
16
16
  onNodeChange,
17
17
  onElementDragStart,
18
18
  onElementDragEnd,
19
+ getReferencedVirtualElement,
19
20
  computePositionConfig = defaultComputePositionConfig,
20
21
  nested = false
21
22
  } = props;
@@ -53,6 +54,7 @@ var DragHandle = (props) => {
53
54
  onElementDragStart,
54
55
  onElementDragEnd,
55
56
  onNodeChange,
57
+ getReferencedVirtualElement,
56
58
  nestedOptions
57
59
  });
58
60
  editor.registerPlugin(plugin);
@@ -66,6 +68,7 @@ var DragHandle = (props) => {
66
68
  element,
67
69
  editor,
68
70
  onNodeChange,
71
+ getReferencedVirtualElement,
69
72
  pluginKey,
70
73
  computePositionConfig,
71
74
  onElementDragStart,
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, useState } 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<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {\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 computePositionConfig = defaultComputePositionConfig,\n nested = false,\n } = props\n const [element] = useState<HTMLDivElement | null>(() => {\n if (typeof document === 'undefined') {\n return null\n }\n\n return document.createElement('div')\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n element.className = className\n element.style.visibility = 'hidden'\n element.style.position = 'absolute'\n element.dataset.dragging = 'false'\n }, [className, element])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n if (editor.isDestroyed) {\n return\n }\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 nestedOptions,\n })\n\n editor.registerPlugin(plugin)\n\n return () => {\n if (!editor.isDestroyed) {\n editor.unregisterPlugin(pluginKey)\n }\n unbind()\n }\n }, [\n element,\n editor,\n onNodeChange,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\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,gBAAgB;AAC7D,SAAS,oBAAoB;AAqDtB,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,IACxB,SAAS;AAAA,EACX,IAAI;AACJ,QAAM,CAAC,OAAO,IAAI,SAAgC,MAAM;AACtD,QAAI,OAAO,aAAa,aAAa;AACnC,aAAO;AAAA,IACT;AAEA,WAAO,SAAS,cAAc,KAAK;AAAA,EACrC,CAAC;AAGD,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ,YAAY;AACpB,YAAQ,MAAM,aAAa;AAC3B,YAAQ,MAAM,WAAW;AACzB,YAAQ,QAAQ,WAAW;AAAA,EAC7B,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,EAAE,QAAQ,OAAO,IAAI,iBAAiB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,MACL;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,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,aAAa,UAAU,OAAO;AACvC;;;AC7IA,IAAO,gBAAQ;","names":[]}
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, useState } 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<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {\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 [element] = useState<HTMLDivElement | null>(() => {\n if (typeof document === 'undefined') {\n return null\n }\n\n return document.createElement('div')\n })\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n element.className = className\n element.style.visibility = 'hidden'\n element.style.position = 'absolute'\n element.dataset.dragging = 'false'\n }, [className, element])\n\n useEffect(() => {\n if (!element) {\n return\n }\n\n if (editor.isDestroyed) {\n return\n }\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 element,\n editor,\n onNodeChange,\n getReferencedVirtualElement,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\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,gBAAgB;AAC7D,SAAS,oBAAoB;AAqDtB,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,CAAC,OAAO,IAAI,SAAgC,MAAM;AACtD,QAAI,OAAO,aAAa,aAAa;AACnC,aAAO;AAAA,IACT;AAEA,WAAO,SAAS,cAAc,KAAK;AAAA,EACrC,CAAC;AAGD,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ,YAAY;AACpB,YAAQ,MAAM,aAAa;AAC3B,YAAQ,MAAM,WAAW;AACzB,YAAQ,QAAQ,WAAW;AAAA,EAC7B,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,EAAE,QAAQ,OAAO,IAAI,iBAAiB;AAAA,MAC1C;AAAA,MACA;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,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,aAAa,UAAU,OAAO;AACvC;;;AChJA,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.23.4",
4
+ "version": "3.23.6",
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.23.4",
42
- "@tiptap/pm": "3.23.4",
43
- "@tiptap/react": "3.23.4"
41
+ "@tiptap/extension-drag-handle": "3.23.6",
42
+ "@tiptap/pm": "3.23.6",
43
+ "@tiptap/react": "3.23.6"
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.23.4",
51
- "@tiptap/pm": "^3.23.4",
52
- "@tiptap/react": "^3.23.4"
50
+ "@tiptap/extension-drag-handle": "^3.23.6",
51
+ "@tiptap/pm": "^3.23.6",
52
+ "@tiptap/react": "^3.23.6"
53
53
  },
54
54
  "scripts": {
55
55
  "build": "tsup",
package/src/DragHandle.tsx CHANGED
@@ -71,6 +71,7 @@ export const DragHandle = (props: DragHandleProps) => {
71
71
  onNodeChange,
72
72
  onElementDragStart,
73
73
  onElementDragEnd,
74
+ getReferencedVirtualElement,
74
75
  computePositionConfig = defaultComputePositionConfig,
75
76
  nested = false,
76
77
  } = props
@@ -116,6 +117,7 @@ export const DragHandle = (props: DragHandleProps) => {
116
117
  onElementDragStart,
117
118
  onElementDragEnd,
118
119
  onNodeChange,
120
+ getReferencedVirtualElement,
119
121
  nestedOptions,
120
122
  })
121
123
 
@@ -131,6 +133,7 @@ export const DragHandle = (props: DragHandleProps) => {
131
133
  element,
132
134
  editor,
133
135
  onNodeChange,
136
+ getReferencedVirtualElement,
134
137
  pluginKey,
135
138
  computePositionConfig,
136
139
  onElementDragStart,