@tiptap/extension-drag-handle-react 3.23.5 → 3.24.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.map +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +24 -25
- package/src/DragHandle.tsx +5 -2
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
|
|
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<\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 [element] = useState<HTMLDivElement | null>(() => {\n if (typeof document === 'undefined') {\n return null\n }\n\n return 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 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;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,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;;;ADnJA,IAAO,gBAAQ;","names":[]}
|
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
|
|
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<\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 [element] = useState<HTMLDivElement | null>(() => {\n if (typeof document === 'undefined') {\n return null\n }\n\n return 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 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;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,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;;;ACnJA,IAAO,gBAAQ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,23 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tiptap/extension-drag-handle-react",
|
|
3
|
+
"version": "3.24.0",
|
|
3
4
|
"description": "drag handle extension for tiptap with react",
|
|
4
|
-
"version": "3.23.5",
|
|
5
|
-
"homepage": "https://tiptap.dev",
|
|
6
5
|
"keywords": [
|
|
7
6
|
"tiptap",
|
|
8
7
|
"tiptap extension"
|
|
9
8
|
],
|
|
9
|
+
"homepage": "https://tiptap.dev",
|
|
10
10
|
"license": "MIT",
|
|
11
|
-
"funding": {
|
|
12
|
-
"type": "github",
|
|
13
|
-
"url": "https://github.com/sponsors/ueberdosis"
|
|
14
|
-
},
|
|
15
11
|
"repository": {
|
|
16
12
|
"type": "git",
|
|
17
13
|
"url": "https://github.com/ueberdosis/tiptap",
|
|
18
14
|
"directory": "packages/extension-drag-handle-react"
|
|
19
15
|
},
|
|
16
|
+
"funding": {
|
|
17
|
+
"type": "github",
|
|
18
|
+
"url": "https://github.com/sponsors/ueberdosis"
|
|
19
|
+
},
|
|
20
|
+
"files": [
|
|
21
|
+
"src",
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
20
24
|
"type": "module",
|
|
25
|
+
"main": "dist/index.cjs",
|
|
26
|
+
"module": "dist/index.js",
|
|
27
|
+
"types": "dist/index.d.ts",
|
|
21
28
|
"exports": {
|
|
22
29
|
".": {
|
|
23
30
|
"types": {
|
|
@@ -28,31 +35,23 @@
|
|
|
28
35
|
"require": "./dist/index.cjs"
|
|
29
36
|
}
|
|
30
37
|
},
|
|
31
|
-
"main": "dist/index.cjs",
|
|
32
|
-
"module": "dist/index.js",
|
|
33
|
-
"types": "dist/index.d.ts",
|
|
34
|
-
"files": [
|
|
35
|
-
"src",
|
|
36
|
-
"dist"
|
|
37
|
-
],
|
|
38
|
-
"peerDependencies": {
|
|
39
|
-
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
40
|
-
"react-dom": "^16.8 || ^17 || ^18 || ^19",
|
|
41
|
-
"@tiptap/extension-drag-handle": "3.23.5",
|
|
42
|
-
"@tiptap/pm": "3.23.5",
|
|
43
|
-
"@tiptap/react": "3.23.5"
|
|
44
|
-
},
|
|
45
38
|
"devDependencies": {
|
|
46
39
|
"@types/react": "^18.0.0",
|
|
47
40
|
"@types/react-dom": "^18.0.0",
|
|
48
41
|
"react": "^18.0.0",
|
|
49
42
|
"react-dom": "^18.0.0",
|
|
50
|
-
"@tiptap/extension-drag-handle": "^3.
|
|
51
|
-
"@tiptap/pm": "^3.
|
|
52
|
-
"@tiptap/react": "^3.
|
|
43
|
+
"@tiptap/extension-drag-handle": "^3.24.0",
|
|
44
|
+
"@tiptap/pm": "^3.24.0",
|
|
45
|
+
"@tiptap/react": "^3.24.0"
|
|
46
|
+
},
|
|
47
|
+
"peerDependencies": {
|
|
48
|
+
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
49
|
+
"react-dom": "^16.8 || ^17 || ^18 || ^19",
|
|
50
|
+
"@tiptap/extension-drag-handle": "3.24.0",
|
|
51
|
+
"@tiptap/pm": "3.24.0",
|
|
52
|
+
"@tiptap/react": "3.24.0"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
|
-
"build": "tsup"
|
|
56
|
-
"lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
|
|
55
|
+
"build": "tsup"
|
|
57
56
|
}
|
|
58
57
|
}
|
package/src/DragHandle.tsx
CHANGED
|
@@ -13,7 +13,10 @@ import { createPortal } from 'react-dom'
|
|
|
13
13
|
|
|
14
14
|
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
|
|
15
15
|
|
|
16
|
-
export type DragHandleProps = Omit<
|
|
16
|
+
export type DragHandleProps = Omit<
|
|
17
|
+
Optional<DragHandlePluginProps, 'pluginKey'>,
|
|
18
|
+
'element' | 'nestedOptions'
|
|
19
|
+
> & {
|
|
17
20
|
className?: string
|
|
18
21
|
onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void
|
|
19
22
|
children: ReactNode
|
|
@@ -83,7 +86,7 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
83
86
|
return document.createElement('div')
|
|
84
87
|
})
|
|
85
88
|
|
|
86
|
-
//
|
|
89
|
+
// oxlint-disable-next-line react-hooks/exhaustive-deps
|
|
87
90
|
const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])
|
|
88
91
|
|
|
89
92
|
useEffect(() => {
|