@tiptap/extension-drag-handle-react 3.20.1 → 3.20.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/package.json +7 -7
- package/dist/index.cjs +0 -112
- package/dist/index.cjs.map +0 -1
- package/dist/index.d.cts +0 -61
- package/dist/index.d.ts +0 -61
- package/dist/index.js +0 -90
- package/dist/index.js.map +0 -1
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.20.
|
|
4
|
+
"version": "3.20.3",
|
|
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.20.
|
|
42
|
-
"@tiptap/pm": "^3.20.
|
|
43
|
-
"@tiptap/react": "^3.20.
|
|
41
|
+
"@tiptap/extension-drag-handle": "^3.20.3",
|
|
42
|
+
"@tiptap/pm": "^3.20.3",
|
|
43
|
+
"@tiptap/react": "^3.20.3"
|
|
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.20.
|
|
51
|
-
"@tiptap/pm": "^3.20.
|
|
52
|
-
"@tiptap/react": "^3.20.
|
|
50
|
+
"@tiptap/extension-drag-handle": "^3.20.3",
|
|
51
|
+
"@tiptap/pm": "^3.20.3",
|
|
52
|
+
"@tiptap/react": "^3.20.3"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "tsup",
|
package/dist/index.cjs
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var index_exports = {};
|
|
22
|
-
__export(index_exports, {
|
|
23
|
-
DragHandle: () => DragHandle,
|
|
24
|
-
default: () => index_default
|
|
25
|
-
});
|
|
26
|
-
module.exports = __toCommonJS(index_exports);
|
|
27
|
-
|
|
28
|
-
// src/DragHandle.tsx
|
|
29
|
-
var import_extension_drag_handle = require("@tiptap/extension-drag-handle");
|
|
30
|
-
var import_react = require("react");
|
|
31
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
32
|
-
var DragHandle = (props) => {
|
|
33
|
-
const {
|
|
34
|
-
className = "drag-handle",
|
|
35
|
-
children,
|
|
36
|
-
editor,
|
|
37
|
-
pluginKey = import_extension_drag_handle.dragHandlePluginDefaultKey,
|
|
38
|
-
onNodeChange,
|
|
39
|
-
onElementDragStart,
|
|
40
|
-
onElementDragEnd,
|
|
41
|
-
computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig,
|
|
42
|
-
nested = false
|
|
43
|
-
} = props;
|
|
44
|
-
const [element, setElement] = (0, import_react.useState)(null);
|
|
45
|
-
const plugin = (0, import_react.useRef)(null);
|
|
46
|
-
const nestedOptions = (0, import_react.useMemo)(() => (0, import_extension_drag_handle.normalizeNestedOptions)(nested), [JSON.stringify(nested)]);
|
|
47
|
-
(0, import_react.useEffect)(() => {
|
|
48
|
-
let initPlugin = null;
|
|
49
|
-
if (!element) {
|
|
50
|
-
return () => {
|
|
51
|
-
plugin.current = null;
|
|
52
|
-
};
|
|
53
|
-
}
|
|
54
|
-
if (editor.isDestroyed) {
|
|
55
|
-
return () => {
|
|
56
|
-
plugin.current = null;
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
if (!plugin.current) {
|
|
60
|
-
initPlugin = (0, import_extension_drag_handle.DragHandlePlugin)({
|
|
61
|
-
editor,
|
|
62
|
-
element,
|
|
63
|
-
pluginKey,
|
|
64
|
-
computePositionConfig: {
|
|
65
|
-
...import_extension_drag_handle.defaultComputePositionConfig,
|
|
66
|
-
...computePositionConfig
|
|
67
|
-
},
|
|
68
|
-
onElementDragStart,
|
|
69
|
-
onElementDragEnd,
|
|
70
|
-
onNodeChange,
|
|
71
|
-
nestedOptions
|
|
72
|
-
});
|
|
73
|
-
plugin.current = initPlugin.plugin;
|
|
74
|
-
editor.registerPlugin(plugin.current);
|
|
75
|
-
}
|
|
76
|
-
return () => {
|
|
77
|
-
editor.unregisterPlugin(pluginKey);
|
|
78
|
-
plugin.current = null;
|
|
79
|
-
if (initPlugin) {
|
|
80
|
-
initPlugin.unbind();
|
|
81
|
-
initPlugin = null;
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
|
-
}, [
|
|
85
|
-
element,
|
|
86
|
-
editor,
|
|
87
|
-
onNodeChange,
|
|
88
|
-
pluginKey,
|
|
89
|
-
computePositionConfig,
|
|
90
|
-
onElementDragStart,
|
|
91
|
-
onElementDragEnd,
|
|
92
|
-
nestedOptions
|
|
93
|
-
]);
|
|
94
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
95
|
-
"div",
|
|
96
|
-
{
|
|
97
|
-
className,
|
|
98
|
-
style: { visibility: "hidden", position: "absolute" },
|
|
99
|
-
"data-dragging": "false",
|
|
100
|
-
ref: setElement,
|
|
101
|
-
children
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
};
|
|
105
|
-
|
|
106
|
-
// src/index.ts
|
|
107
|
-
var index_default = DragHandle;
|
|
108
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
109
|
-
0 && (module.exports = {
|
|
110
|
-
DragHandle
|
|
111
|
-
});
|
|
112
|
-
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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 { Plugin } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo, 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' | '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, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\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 nestedOptions,\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 }, [\n element,\n editor,\n onNodeChange,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\n return (\n <div\n className={className}\n style={{ visibility: 'hidden', position: 'absolute' }}\n data-dragging=\"false\"\n ref={setElement}\n >\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAOO;AAIP,mBAAqE;AAgIjE;AA3EG,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,SAAS,UAAU,QAAI,uBAAgC,IAAI;AAClE,QAAM,aAAS,qBAAsB,IAAI;AAGzC,QAAM,oBAAgB,sBAAQ,UAAM,qDAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,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,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;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,MACpD,iBAAc;AAAA,MACd,KAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;;;ADhJA,IAAO,gBAAQ;","names":[]}
|
package/dist/index.d.cts
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle';
|
|
3
|
-
import { Node } from '@tiptap/pm/model';
|
|
4
|
-
import { Editor } from '@tiptap/react';
|
|
5
|
-
import { ReactNode } from 'react';
|
|
6
|
-
|
|
7
|
-
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
8
|
-
type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {
|
|
9
|
-
className?: string;
|
|
10
|
-
onNodeChange?: (data: {
|
|
11
|
-
node: Node | null;
|
|
12
|
-
editor: Editor;
|
|
13
|
-
pos: number;
|
|
14
|
-
}) => void;
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* Enable drag handles for nested content (list items, blockquotes, etc.).
|
|
18
|
-
*
|
|
19
|
-
* When enabled, the drag handle will appear for nested blocks, not just
|
|
20
|
-
* top-level blocks. A rule-based scoring system determines which node
|
|
21
|
-
* to target based on cursor position and configured rules.
|
|
22
|
-
*
|
|
23
|
-
* @default false
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* // Simple enable with sensible defaults
|
|
27
|
-
* <DragHandle editor={editor} nested>
|
|
28
|
-
* <GripIcon />
|
|
29
|
-
* </DragHandle>
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* // With custom configuration
|
|
33
|
-
* <DragHandle
|
|
34
|
-
* editor={editor}
|
|
35
|
-
* nested={{
|
|
36
|
-
* edgeDetection: 'left',
|
|
37
|
-
* allowedContainers: ['bulletList', 'orderedList'],
|
|
38
|
-
* }}
|
|
39
|
-
* >
|
|
40
|
-
* <GripIcon />
|
|
41
|
-
* </DragHandle>
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* // With custom rules
|
|
45
|
-
* <DragHandle
|
|
46
|
-
* editor={editor}
|
|
47
|
-
* nested={{
|
|
48
|
-
* rules: [{
|
|
49
|
-
* id: 'excludeCodeBlocks',
|
|
50
|
-
* evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,
|
|
51
|
-
* }],
|
|
52
|
-
* }}
|
|
53
|
-
* >
|
|
54
|
-
* <GripIcon />
|
|
55
|
-
* </DragHandle>
|
|
56
|
-
*/
|
|
57
|
-
nested?: boolean | NestedOptions;
|
|
58
|
-
};
|
|
59
|
-
declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
|
|
60
|
-
|
|
61
|
-
export { DragHandle, type DragHandleProps, DragHandle as default };
|
package/dist/index.d.ts
DELETED
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { DragHandlePluginProps, NestedOptions } from '@tiptap/extension-drag-handle';
|
|
3
|
-
import { Node } from '@tiptap/pm/model';
|
|
4
|
-
import { Editor } from '@tiptap/react';
|
|
5
|
-
import { ReactNode } from 'react';
|
|
6
|
-
|
|
7
|
-
type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
|
|
8
|
-
type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {
|
|
9
|
-
className?: string;
|
|
10
|
-
onNodeChange?: (data: {
|
|
11
|
-
node: Node | null;
|
|
12
|
-
editor: Editor;
|
|
13
|
-
pos: number;
|
|
14
|
-
}) => void;
|
|
15
|
-
children: ReactNode;
|
|
16
|
-
/**
|
|
17
|
-
* Enable drag handles for nested content (list items, blockquotes, etc.).
|
|
18
|
-
*
|
|
19
|
-
* When enabled, the drag handle will appear for nested blocks, not just
|
|
20
|
-
* top-level blocks. A rule-based scoring system determines which node
|
|
21
|
-
* to target based on cursor position and configured rules.
|
|
22
|
-
*
|
|
23
|
-
* @default false
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* // Simple enable with sensible defaults
|
|
27
|
-
* <DragHandle editor={editor} nested>
|
|
28
|
-
* <GripIcon />
|
|
29
|
-
* </DragHandle>
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* // With custom configuration
|
|
33
|
-
* <DragHandle
|
|
34
|
-
* editor={editor}
|
|
35
|
-
* nested={{
|
|
36
|
-
* edgeDetection: 'left',
|
|
37
|
-
* allowedContainers: ['bulletList', 'orderedList'],
|
|
38
|
-
* }}
|
|
39
|
-
* >
|
|
40
|
-
* <GripIcon />
|
|
41
|
-
* </DragHandle>
|
|
42
|
-
*
|
|
43
|
-
* @example
|
|
44
|
-
* // With custom rules
|
|
45
|
-
* <DragHandle
|
|
46
|
-
* editor={editor}
|
|
47
|
-
* nested={{
|
|
48
|
-
* rules: [{
|
|
49
|
-
* id: 'excludeCodeBlocks',
|
|
50
|
-
* evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,
|
|
51
|
-
* }],
|
|
52
|
-
* }}
|
|
53
|
-
* >
|
|
54
|
-
* <GripIcon />
|
|
55
|
-
* </DragHandle>
|
|
56
|
-
*/
|
|
57
|
-
nested?: boolean | NestedOptions;
|
|
58
|
-
};
|
|
59
|
-
declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
|
|
60
|
-
|
|
61
|
-
export { DragHandle, type DragHandleProps, DragHandle as default };
|
package/dist/index.js
DELETED
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
// src/DragHandle.tsx
|
|
2
|
-
import {
|
|
3
|
-
defaultComputePositionConfig,
|
|
4
|
-
DragHandlePlugin,
|
|
5
|
-
dragHandlePluginDefaultKey,
|
|
6
|
-
normalizeNestedOptions
|
|
7
|
-
} from "@tiptap/extension-drag-handle";
|
|
8
|
-
import { useEffect, useMemo, useRef, useState } from "react";
|
|
9
|
-
import { jsx } from "react/jsx-runtime";
|
|
10
|
-
var DragHandle = (props) => {
|
|
11
|
-
const {
|
|
12
|
-
className = "drag-handle",
|
|
13
|
-
children,
|
|
14
|
-
editor,
|
|
15
|
-
pluginKey = dragHandlePluginDefaultKey,
|
|
16
|
-
onNodeChange,
|
|
17
|
-
onElementDragStart,
|
|
18
|
-
onElementDragEnd,
|
|
19
|
-
computePositionConfig = defaultComputePositionConfig,
|
|
20
|
-
nested = false
|
|
21
|
-
} = props;
|
|
22
|
-
const [element, setElement] = useState(null);
|
|
23
|
-
const plugin = useRef(null);
|
|
24
|
-
const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)]);
|
|
25
|
-
useEffect(() => {
|
|
26
|
-
let initPlugin = null;
|
|
27
|
-
if (!element) {
|
|
28
|
-
return () => {
|
|
29
|
-
plugin.current = null;
|
|
30
|
-
};
|
|
31
|
-
}
|
|
32
|
-
if (editor.isDestroyed) {
|
|
33
|
-
return () => {
|
|
34
|
-
plugin.current = null;
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
if (!plugin.current) {
|
|
38
|
-
initPlugin = DragHandlePlugin({
|
|
39
|
-
editor,
|
|
40
|
-
element,
|
|
41
|
-
pluginKey,
|
|
42
|
-
computePositionConfig: {
|
|
43
|
-
...defaultComputePositionConfig,
|
|
44
|
-
...computePositionConfig
|
|
45
|
-
},
|
|
46
|
-
onElementDragStart,
|
|
47
|
-
onElementDragEnd,
|
|
48
|
-
onNodeChange,
|
|
49
|
-
nestedOptions
|
|
50
|
-
});
|
|
51
|
-
plugin.current = initPlugin.plugin;
|
|
52
|
-
editor.registerPlugin(plugin.current);
|
|
53
|
-
}
|
|
54
|
-
return () => {
|
|
55
|
-
editor.unregisterPlugin(pluginKey);
|
|
56
|
-
plugin.current = null;
|
|
57
|
-
if (initPlugin) {
|
|
58
|
-
initPlugin.unbind();
|
|
59
|
-
initPlugin = null;
|
|
60
|
-
}
|
|
61
|
-
};
|
|
62
|
-
}, [
|
|
63
|
-
element,
|
|
64
|
-
editor,
|
|
65
|
-
onNodeChange,
|
|
66
|
-
pluginKey,
|
|
67
|
-
computePositionConfig,
|
|
68
|
-
onElementDragStart,
|
|
69
|
-
onElementDragEnd,
|
|
70
|
-
nestedOptions
|
|
71
|
-
]);
|
|
72
|
-
return /* @__PURE__ */ jsx(
|
|
73
|
-
"div",
|
|
74
|
-
{
|
|
75
|
-
className,
|
|
76
|
-
style: { visibility: "hidden", position: "absolute" },
|
|
77
|
-
"data-dragging": "false",
|
|
78
|
-
ref: setElement,
|
|
79
|
-
children
|
|
80
|
-
}
|
|
81
|
-
);
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
// src/index.ts
|
|
85
|
-
var index_default = DragHandle;
|
|
86
|
-
export {
|
|
87
|
-
DragHandle,
|
|
88
|
-
index_default as default
|
|
89
|
-
};
|
|
90
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
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 { Plugin } from '@tiptap/pm/state'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo, 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' | '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, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\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 nestedOptions,\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 }, [\n element,\n editor,\n onNodeChange,\n pluginKey,\n computePositionConfig,\n onElementDragStart,\n onElementDragEnd,\n nestedOptions,\n ])\n\n return (\n <div\n className={className}\n style={{ visibility: 'hidden', position: 'absolute' }}\n data-dragging=\"false\"\n ref={setElement}\n >\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,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAyB,WAAW,SAAS,QAAQ,gBAAgB;AAgIjE;AA3EG,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,SAAS,UAAU,IAAI,SAAgC,IAAI;AAClE,QAAM,SAAS,OAAsB,IAAI;AAGzC,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,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,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;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW;AAAA,MACpD,iBAAc;AAAA,MACd,KAAK;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;;;AChJA,IAAO,gBAAQ;","names":[]}
|