@tiptap/extension-drag-handle-react 2.24.1 → 3.0.0-beta.10

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025, Tiptap GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -1,47 +1,84 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var extensionDragHandle = require('@tiptap/extension-drag-handle');
-var React = require('react');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DragHandle: () => DragHandle,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
 
-const DragHandle = (props) => {
-    const { className = 'drag-handle', children, editor, pluginKey = extensionDragHandle.dragHandlePluginDefaultKey, onNodeChange, tippyOptions, } = props;
-    const [element, setElement] = React.useState(null);
-    const plugin = React.useRef(null);
-    React.useEffect(() => {
-        if (!element) {
-            return () => {
-                plugin.current = null;
-            };
-        }
-        if (editor.isDestroyed) {
-            return () => {
-                plugin.current = null;
-            };
-        }
-        if (!plugin.current) {
-            plugin.current = extensionDragHandle.DragHandlePlugin({
-                editor,
-                element,
-                pluginKey,
-                tippyOptions,
-                onNodeChange,
-            });
-            editor.registerPlugin(plugin.current);
-        }
-        return () => {
-            editor.unregisterPlugin(pluginKey);
-            plugin.current = null;
-        };
-    }, [element, editor, onNodeChange, pluginKey, tippyOptions]);
-    return (React__default.default.createElement("div", { className: className, ref: setElement }, children));
+// src/DragHandle.tsx
+var import_extension_drag_handle = require("@tiptap/extension-drag-handle");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DragHandle = (props) => {
+  const {
+    className = "drag-handle",
+    children,
+    editor,
+    pluginKey = import_extension_drag_handle.dragHandlePluginDefaultKey,
+    onNodeChange,
+    computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig
+  } = props;
+  const [element, setElement] = (0, import_react.useState)(null);
+  const plugin = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    let initPlugin = null;
+    if (!element) {
+      return () => {
+        plugin.current = null;
+      };
+    }
+    if (editor.isDestroyed) {
+      return () => {
+        plugin.current = null;
+      };
+    }
+    if (!plugin.current) {
+      initPlugin = (0, import_extension_drag_handle.DragHandlePlugin)({
+        editor,
+        element,
+        pluginKey,
+        computePositionConfig: { ...import_extension_drag_handle.defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange
+      });
+      plugin.current = initPlugin.plugin;
+      editor.registerPlugin(plugin.current);
+    }
+    return () => {
+      editor.unregisterPlugin(pluginKey);
+      plugin.current = null;
+      if (initPlugin) {
+        initPlugin.unbind();
+        initPlugin = null;
+      }
+    };
+  }, [element, editor, onNodeChange, pluginKey, computePositionConfig]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { visibility: "hidden", position: "absolute" }, ref: setElement, children });
 };
 
-exports.DragHandle = DragHandle;
-exports.default = DragHandle;
-//# sourceMappingURL=index.cjs.map
+// src/index.ts
+var index_default = DragHandle;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DragHandle
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -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  /**\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;;;;;"}
+{"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: { ...defaultComputePositionConfig, ...computePositionConfig },\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])\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;AAgExD;AAtDG,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;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,EAAE,GAAG,2DAA8B,GAAG,sBAAsB;AAAA,QACnF;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,qBAAqB,CAAC;AAEpE,SACE,4CAAC,SAAI,WAAsB,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW,GAAG,KAAK,YACpF,UACH;AAEJ;;;ADzEA,IAAO,gBAAQ;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
+import { Node } from '@tiptap/pm/model';
+import { Editor } from '@tiptap/react';
+import { ReactNode } from 'react';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
+    className?: string;
+    onNodeChange?: (data: {
+        node: Node | null;
+        editor: Editor;
+        pos: number;
+    }) => void;
+    children: ReactNode;
+};
+declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
+
+export { DragHandle, type DragHandleProps, DragHandle as default };

package/dist/index.d.ts

@@ -1,4 +1,19 @@
-import { DragHandle } from './DragHandle.js';
-export * from './DragHandle.js';
-export default DragHandle;
-//# sourceMappingURL=index.d.ts.map
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
+import { Node } from '@tiptap/pm/model';
+import { Editor } from '@tiptap/react';
+import { ReactNode } from 'react';
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
+    className?: string;
+    onNodeChange?: (data: {
+        node: Node | null;
+        editor: Editor;
+        pos: number;
+    }) => void;
+    children: ReactNode;
+};
+declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
+
+export { DragHandle, type DragHandleProps, DragHandle as default };

package/dist/index.js

@@ -1,38 +1,61 @@
-import { DragHandlePlugin, dragHandlePluginDefaultKey } from '@tiptap/extension-drag-handle';
-import React, { useState, useRef, useEffect } from 'react';
-
-const DragHandle = (props) => {
-    const { className = 'drag-handle', children, editor, pluginKey = dragHandlePluginDefaultKey, onNodeChange, tippyOptions, } = props;
-    const [element, setElement] = useState(null);
-    const plugin = useRef(null);
-    useEffect(() => {
-        if (!element) {
-            return () => {
-                plugin.current = null;
-            };
-        }
-        if (editor.isDestroyed) {
-            return () => {
-                plugin.current = null;
-            };
-        }
-        if (!plugin.current) {
-            plugin.current = DragHandlePlugin({
-                editor,
-                element,
-                pluginKey,
-                tippyOptions,
-                onNodeChange,
-            });
-            editor.registerPlugin(plugin.current);
-        }
-        return () => {
-            editor.unregisterPlugin(pluginKey);
-            plugin.current = null;
-        };
-    }, [element, editor, onNodeChange, pluginKey, tippyOptions]);
-    return (React.createElement("div", { className: className, ref: setElement }, children));
+// src/DragHandle.tsx
+import {
+  defaultComputePositionConfig,
+  DragHandlePlugin,
+  dragHandlePluginDefaultKey
+} from "@tiptap/extension-drag-handle";
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DragHandle = (props) => {
+  const {
+    className = "drag-handle",
+    children,
+    editor,
+    pluginKey = dragHandlePluginDefaultKey,
+    onNodeChange,
+    computePositionConfig = defaultComputePositionConfig
+  } = props;
+  const [element, setElement] = useState(null);
+  const plugin = useRef(null);
+  useEffect(() => {
+    let initPlugin = null;
+    if (!element) {
+      return () => {
+        plugin.current = null;
+      };
+    }
+    if (editor.isDestroyed) {
+      return () => {
+        plugin.current = null;
+      };
+    }
+    if (!plugin.current) {
+      initPlugin = DragHandlePlugin({
+        editor,
+        element,
+        pluginKey,
+        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
+        onNodeChange
+      });
+      plugin.current = initPlugin.plugin;
+      editor.registerPlugin(plugin.current);
+    }
+    return () => {
+      editor.unregisterPlugin(pluginKey);
+      plugin.current = null;
+      if (initPlugin) {
+        initPlugin.unbind();
+        initPlugin = null;
+      }
+    };
+  }, [element, editor, onNodeChange, pluginKey, computePositionConfig]);
+  return /* @__PURE__ */ jsx("div", { className, style: { visibility: "hidden", position: "absolute" }, ref: setElement, children });
 };
 
-export { DragHandle, DragHandle as default };
-//# sourceMappingURL=index.js.map
+// src/index.ts
+var index_default = DragHandle;
+export {
+  DragHandle,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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  /**\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;;;;"}
+{"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: { ...defaultComputePositionConfig, ...computePositionConfig },\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])\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;AAgExD;AAtDG,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;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,EAAE,GAAG,8BAA8B,GAAG,sBAAsB;AAAA,QACnF;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,qBAAqB,CAAC;AAEpE,SACE,oBAAC,SAAI,WAAsB,OAAO,EAAE,YAAY,UAAU,UAAU,WAAW,GAAG,KAAK,YACpF,UACH;AAEJ;;;ACzEA,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-drag-handle-react",
   "description": "drag handle extension for tiptap with react",
-  "version": "2.24.1",
+  "version": "3.0.0-beta.10",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -20,37 +20,39 @@
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
   },
   "main": "dist/index.cjs",
   "module": "dist/index.js",
-  "umd": "dist/index.umd.js",
   "types": "dist/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
   "peerDependencies": {
-    "@tiptap/extension-drag-handle": "^2.14.0",
-    "@tiptap/pm": "^2.7.0",
-    "@tiptap/react": "^2.7.0",
     "react": "^16.8 || ^17 || ^18 || ^19",
-    "react-dom": "^16.8 || ^17 || ^18 || ^19"
+    "react-dom": "^16.8 || ^17 || ^18 || ^19",
+    "@tiptap/extension-drag-handle": "3.0.0-beta.10",
+    "@tiptap/pm": "3.0.0-beta.10",
+    "@tiptap/react": "3.0.0-beta.10"
   },
   "devDependencies": {
-    "@tiptap/extension-drag-handle": "^2.24.1",
-    "@tiptap/pm": "^2.24.1",
-    "@tiptap/react": "^2.24.1",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "@tiptap/extension-drag-handle": "3.0.0-beta.10",
+    "@tiptap/pm": "3.0.0-beta.10",
+    "@tiptap/react": "3.0.0-beta.10"
   },
   "scripts": {
-    "clean": "rm -rf dist",
-    "build": "npm run clean && rollup -c"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/DragHandle.tsx

@@ -1,30 +1,21 @@
 import {
+  type DragHandlePluginProps,
+  defaultComputePositionConfig,
   DragHandlePlugin,
   dragHandlePluginDefaultKey,
-  DragHandlePluginProps,
 } from '@tiptap/extension-drag-handle'
-import { Node } from '@tiptap/pm/model'
-import { Plugin } from '@tiptap/pm/state'
-import { Editor } from '@tiptap/react'
-import React, {
-  ReactNode, useEffect, useRef, useState,
-} from 'react'
+import type { Node } from '@tiptap/pm/model'
+import type { Plugin } from '@tiptap/pm/state'
+import type { Editor } from '@tiptap/react'
+import { type ReactNode, useEffect, useRef, useState } from 'react'
 
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
 export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
-  className?: string;
-  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void;
-  children: ReactNode;
-
-  /**
-   * Tippy.js options for the drag handle tooltip.
-   *
-   * **IMPORTANT**: Make sure to memoize this object - otherwise the object
-   * will cause the drag handle to be re-initialized on every render breaking it.
-   */
-  tippyOptions?: DragHandlePluginProps['tippyOptions'];
-};
+  className?: string
+  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void
+  children: ReactNode
+}
 
 export const DragHandle = (props: DragHandleProps) => {
   const {
@@ -33,12 +24,17 @@ export const DragHandle = (props: DragHandleProps) => {
     editor,
     pluginKey = dragHandlePluginDefaultKey,
     onNodeChange,
-    tippyOptions,
+    computePositionConfig = defaultComputePositionConfig,
   } = props
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const plugin = useRef<Plugin | null>(null)
 
   useEffect(() => {
+    let initPlugin: {
+      plugin: Plugin
+      unbind: () => void
+    } | null = null
+
     if (!element) {
       return () => {
         plugin.current = null
@@ -52,13 +48,14 @@ export const DragHandle = (props: DragHandleProps) => {
     }
 
     if (!plugin.current) {
-      plugin.current = DragHandlePlugin({
+      initPlugin = DragHandlePlugin({
         editor,
         element,
         pluginKey,
-        tippyOptions,
+        computePositionConfig: { ...defaultComputePositionConfig, ...computePositionConfig },
         onNodeChange,
       })
+      plugin.current = initPlugin.plugin
 
       editor.registerPlugin(plugin.current)
     }
@@ -66,11 +63,15 @@ export const DragHandle = (props: DragHandleProps) => {
     return () => {
       editor.unregisterPlugin(pluginKey)
       plugin.current = null
+      if (initPlugin) {
+        initPlugin.unbind()
+        initPlugin = null
+      }
     }
-  }, [element, editor, onNodeChange, pluginKey, tippyOptions])
+  }, [element, editor, onNodeChange, pluginKey, computePositionConfig])
 
   return (
-    <div className={className} ref={setElement}>
+    <div className={className} style={{ visibility: 'hidden', position: 'absolute' }} ref={setElement}>
       {children}
     </div>
   )

package/dist/DragHandle.d.ts

@@ -1,24 +0,0 @@
-import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
-import { Node } from '@tiptap/pm/model';
-import { Editor } from '@tiptap/react';
-import React, { ReactNode } from 'react';
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
-export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
-    className?: string;
-    onNodeChange?: (data: {
-        node: Node | null;
-        editor: Editor;
-        pos: number;
-    }) => void;
-    children: ReactNode;
-    /**
-     * Tippy.js options for the drag handle tooltip.
-     *
-     * **IMPORTANT**: Make sure to memoize this object - otherwise the object
-     * will cause the drag handle to be re-initialized on every render breaking it.
-     */
-    tippyOptions?: DragHandlePluginProps['tippyOptions'];
-};
-export declare const DragHandle: (props: DragHandleProps) => React.JSX.Element;
-export {};
-//# sourceMappingURL=DragHandle.d.ts.map

package/dist/DragHandle.d.ts.map

@@ -1 +0,0 @@
-{"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.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,cAAc,iBAAiB,CAAA;AAE/B,eAAe,UAAU,CAAA"}

package/dist/index.umd.js

@@ -1,46 +0,0 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tiptap/extension-drag-handle'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@tiptap/extension-drag-handle', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@tiptap/extension-drag-handle-react"] = {}, global.extensionDragHandle, global.React));
-})(this, (function (exports, extensionDragHandle, React) { 'use strict';
-
-  const DragHandle = (props) => {
-      const { className = 'drag-handle', children, editor, pluginKey = extensionDragHandle.dragHandlePluginDefaultKey, onNodeChange, tippyOptions, } = props;
-      const [element, setElement] = React.useState(null);
-      const plugin = React.useRef(null);
-      React.useEffect(() => {
-          if (!element) {
-              return () => {
-                  plugin.current = null;
-              };
-          }
-          if (editor.isDestroyed) {
-              return () => {
-                  plugin.current = null;
-              };
-          }
-          if (!plugin.current) {
-              plugin.current = extensionDragHandle.DragHandlePlugin({
-                  editor,
-                  element,
-                  pluginKey,
-                  tippyOptions,
-                  onNodeChange,
-              });
-              editor.registerPlugin(plugin.current);
-          }
-          return () => {
-              editor.unregisterPlugin(pluginKey);
-              plugin.current = null;
-          };
-      }, [element, editor, onNodeChange, pluginKey, tippyOptions]);
-      return (React.createElement("div", { className: className, ref: setElement }, children));
-  };
-
-  exports.DragHandle = DragHandle;
-  exports.default = DragHandle;
-
-  Object.defineProperty(exports, '__esModule', { value: true });
-
-}));
-//# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;"}