@tiptap/extension-drag-handle-react 2.23.0 → 2.23.1
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/DragHandle.d.ts +7 -0
- package/dist/DragHandle.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/index.umd.js.map +1 -1
- package/package.json +4 -4
- package/src/DragHandle.tsx +9 -1
package/dist/DragHandle.d.ts
CHANGED
|
@@ -11,6 +11,13 @@ export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>,
|
|
|
11
11
|
pos: number;
|
|
12
12
|
}) => void;
|
|
13
13
|
children: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Tippy.js options for the drag handle tooltip.
|
|
16
|
+
*
|
|
17
|
+
* **IMPORTANT**: Make sure to memoize this object - otherwise the object
|
|
18
|
+
* will cause the drag handle to be re-initialized on every render breaking it.
|
|
19
|
+
*/
|
|
20
|
+
tippyOptions?: DragHandlePluginProps['tippyOptions'];
|
|
14
21
|
};
|
|
15
22
|
export declare const DragHandle: (props: DragHandleProps) => React.JSX.Element;
|
|
16
23
|
export {};
|
package/dist/DragHandle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../src/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,qBAAqB,EACtB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,KAAK,EAAE,EACZ,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,QAAQ,EAAE,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../src/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,qBAAqB,EACtB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,KAAK,EAAE,EACZ,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAC;CACtD,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgDhD,CAAA"}
|
package/dist/index.cjs
CHANGED
|
@@ -10,7 +10,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
|
|
|
10
10
|
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
11
11
|
|
|
12
12
|
const DragHandle = (props) => {
|
|
13
|
-
const { className = 'drag-handle', children, editor, pluginKey = extensionDragHandle.dragHandlePluginDefaultKey, onNodeChange, tippyOptions
|
|
13
|
+
const { className = 'drag-handle', children, editor, pluginKey = extensionDragHandle.dragHandlePluginDefaultKey, onNodeChange, tippyOptions, } = props;
|
|
14
14
|
const [element, setElement] = React.useState(null);
|
|
15
15
|
const plugin = React.useRef(null);
|
|
16
16
|
React.useEffect(() => {
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n ReactNode, useEffect, useRef, useState,\n} 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 tippyOptions
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n ReactNode, useEffect, useRef, useState,\n} 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 /**\n * Tippy.js options for the drag handle tooltip.\n *\n * **IMPORTANT**: Make sure to memoize this object - otherwise the object\n * will cause the drag handle to be re-initialized on every render breaking it.\n */\n tippyOptions?: DragHandlePluginProps['tippyOptions'];\n};\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n tippyOptions,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\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 plugin.current = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n tippyOptions,\n onNodeChange,\n })\n\n editor.registerPlugin(plugin.current)\n }\n\n return () => {\n editor.unregisterPlugin(pluginKey)\n plugin.current = null\n }\n }, [element, editor, onNodeChange, pluginKey, tippyOptions])\n\n return (\n <div className={className} ref={setElement}>\n {children}\n </div>\n )\n}\n"],"names":["dragHandlePluginDefaultKey","useState","useRef","useEffect","DragHandlePlugin","React"],"mappings":";;;;;;;;;;;AA4Ba,MAAA,UAAU,GAAG,CAAC,KAAsB,KAAI;AACnD,IAAA,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GAAGA,8CAA0B,EACtC,YAAY,EACZ,YAAY,GACb,GAAG,KAAK;IACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;AACnE,IAAA,MAAM,MAAM,GAAGC,YAAM,CAAgB,IAAI,CAAC;IAE1CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;AACtB,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACnB,YAAA,MAAM,CAAC,OAAO,GAAGC,oCAAgB,CAAC;gBAChC,MAAM;gBACN,OAAO;gBACP,SAAS;gBACT,YAAY;gBACZ,YAAY;AACb,aAAA,CAAC;AAEF,YAAA,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC;AAClC,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,SAAC;AACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAE5D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAA,EACvC,QAAQ,CACL;AAEV;;;;;"}
|
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { DragHandlePlugin, dragHandlePluginDefaultKey } from '@tiptap/extension-
|
|
|
2
2
|
import React, { useState, useRef, useEffect } from 'react';
|
|
3
3
|
|
|
4
4
|
const DragHandle = (props) => {
|
|
5
|
-
const { className = 'drag-handle', children, editor, pluginKey = dragHandlePluginDefaultKey, onNodeChange, tippyOptions
|
|
5
|
+
const { className = 'drag-handle', children, editor, pluginKey = dragHandlePluginDefaultKey, onNodeChange, tippyOptions, } = props;
|
|
6
6
|
const [element, setElement] = useState(null);
|
|
7
7
|
const plugin = useRef(null);
|
|
8
8
|
useEffect(() => {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n ReactNode, useEffect, useRef, useState,\n} 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 tippyOptions
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n ReactNode, useEffect, useRef, useState,\n} 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 /**\n * Tippy.js options for the drag handle tooltip.\n *\n * **IMPORTANT**: Make sure to memoize this object - otherwise the object\n * will cause the drag handle to be re-initialized on every render breaking it.\n */\n tippyOptions?: DragHandlePluginProps['tippyOptions'];\n};\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n tippyOptions,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\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 plugin.current = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n tippyOptions,\n onNodeChange,\n })\n\n editor.registerPlugin(plugin.current)\n }\n\n return () => {\n editor.unregisterPlugin(pluginKey)\n plugin.current = null\n }\n }, [element, editor, onNodeChange, pluginKey, tippyOptions])\n\n return (\n <div className={className} ref={setElement}>\n {children}\n </div>\n )\n}\n"],"names":[],"mappings":";;;AA4Ba,MAAA,UAAU,GAAG,CAAC,KAAsB,KAAI;AACnD,IAAA,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,0BAA0B,EACtC,YAAY,EACZ,YAAY,GACb,GAAG,KAAK;IACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AACnE,IAAA,MAAM,MAAM,GAAG,MAAM,CAAgB,IAAI,CAAC;IAE1C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;AACtB,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACnB,YAAA,MAAM,CAAC,OAAO,GAAG,gBAAgB,CAAC;gBAChC,MAAM;gBACN,OAAO;gBACP,SAAS;gBACT,YAAY;gBACZ,YAAY;AACb,aAAA,CAAC;AAEF,YAAA,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC;AAClC,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,SAAC;AACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAE5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAA,EACvC,QAAQ,CACL;AAEV;;;;"}
|
package/dist/index.umd.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
})(this, (function (exports, extensionDragHandle, React) { 'use strict';
|
|
6
6
|
|
|
7
7
|
const DragHandle = (props) => {
|
|
8
|
-
const { className = 'drag-handle', children, editor, pluginKey = extensionDragHandle.dragHandlePluginDefaultKey, onNodeChange, tippyOptions
|
|
8
|
+
const { className = 'drag-handle', children, editor, pluginKey = extensionDragHandle.dragHandlePluginDefaultKey, onNodeChange, tippyOptions, } = props;
|
|
9
9
|
const [element, setElement] = React.useState(null);
|
|
10
10
|
const plugin = React.useRef(null);
|
|
11
11
|
React.useEffect(() => {
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n ReactNode, useEffect, useRef, useState,\n} 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 tippyOptions
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n DragHandlePlugin,\n dragHandlePluginDefaultKey,\n DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n ReactNode, useEffect, useRef, useState,\n} 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 /**\n * Tippy.js options for the drag handle tooltip.\n *\n * **IMPORTANT**: Make sure to memoize this object - otherwise the object\n * will cause the drag handle to be re-initialized on every render breaking it.\n */\n tippyOptions?: DragHandlePluginProps['tippyOptions'];\n};\n\nexport const DragHandle = (props: DragHandleProps) => {\n const {\n className = 'drag-handle',\n children,\n editor,\n pluginKey = dragHandlePluginDefaultKey,\n onNodeChange,\n tippyOptions,\n } = props\n const [element, setElement] = useState<HTMLDivElement | null>(null)\n const plugin = useRef<Plugin | null>(null)\n\n useEffect(() => {\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 plugin.current = DragHandlePlugin({\n editor,\n element,\n pluginKey,\n tippyOptions,\n onNodeChange,\n })\n\n editor.registerPlugin(plugin.current)\n }\n\n return () => {\n editor.unregisterPlugin(pluginKey)\n plugin.current = null\n }\n }, [element, editor, onNodeChange, pluginKey, tippyOptions])\n\n return (\n <div className={className} ref={setElement}>\n {children}\n </div>\n )\n}\n"],"names":["dragHandlePluginDefaultKey","useState","useRef","useEffect","DragHandlePlugin"],"mappings":";;;;;;AA4Ba,QAAA,UAAU,GAAG,CAAC,KAAsB,KAAI;EACnD,IAAA,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GAAGA,8CAA0B,EACtC,YAAY,EACZ,YAAY,GACb,GAAG,KAAK;MACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;EACnE,IAAA,MAAM,MAAM,GAAGC,YAAM,CAAgB,IAAI,CAAC;MAE1CC,eAAS,CAAC,MAAK;UACb,IAAI,CAAC,OAAO,EAAE;EACZ,YAAA,OAAO,MAAK;EACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;EACvB,aAAC;;EAGH,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;EACtB,YAAA,OAAO,MAAK;EACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;EACvB,aAAC;;EAGH,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;EACnB,YAAA,MAAM,CAAC,OAAO,GAAGC,oCAAgB,CAAC;kBAChC,MAAM;kBACN,OAAO;kBACP,SAAS;kBACT,YAAY;kBACZ,YAAY;EACb,aAAA,CAAC;EAEF,YAAA,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;;EAGvC,QAAA,OAAO,MAAK;EACV,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC;EAClC,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;EACvB,SAAC;EACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;EAE5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAA,EACvC,QAAQ,CACL;EAEV;;;;;;;;;;;"}
|
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": "2.23.
|
|
4
|
+
"version": "2.23.1",
|
|
5
5
|
"homepage": "https://tiptap.dev",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"tiptap",
|
|
@@ -41,9 +41,9 @@
|
|
|
41
41
|
"react-dom": "^16.8 || ^17 || ^18 || ^19"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@tiptap/extension-drag-handle": "^2.23.
|
|
45
|
-
"@tiptap/pm": "^2.23.
|
|
46
|
-
"@tiptap/react": "^2.23.
|
|
44
|
+
"@tiptap/extension-drag-handle": "^2.23.1",
|
|
45
|
+
"@tiptap/pm": "^2.23.1",
|
|
46
|
+
"@tiptap/react": "^2.23.1",
|
|
47
47
|
"@types/react": "^18.0.0",
|
|
48
48
|
"@types/react-dom": "^18.0.0",
|
|
49
49
|
"react": "^18.0.0",
|
package/src/DragHandle.tsx
CHANGED
|
@@ -16,6 +16,14 @@ export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>,
|
|
|
16
16
|
className?: string;
|
|
17
17
|
onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void;
|
|
18
18
|
children: ReactNode;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Tippy.js options for the drag handle tooltip.
|
|
22
|
+
*
|
|
23
|
+
* **IMPORTANT**: Make sure to memoize this object - otherwise the object
|
|
24
|
+
* will cause the drag handle to be re-initialized on every render breaking it.
|
|
25
|
+
*/
|
|
26
|
+
tippyOptions?: DragHandlePluginProps['tippyOptions'];
|
|
19
27
|
};
|
|
20
28
|
|
|
21
29
|
export const DragHandle = (props: DragHandleProps) => {
|
|
@@ -25,7 +33,7 @@ export const DragHandle = (props: DragHandleProps) => {
|
|
|
25
33
|
editor,
|
|
26
34
|
pluginKey = dragHandlePluginDefaultKey,
|
|
27
35
|
onNodeChange,
|
|
28
|
-
tippyOptions
|
|
36
|
+
tippyOptions,
|
|
29
37
|
} = props
|
|
30
38
|
const [element, setElement] = useState<HTMLDivElement | null>(null)
|
|
31
39
|
const plugin = useRef<Plugin | null>(null)
|