@tiptap/extension-drag-handle-react 3.22.5 → 3.23.1

package/dist/index.cjs

@@ -28,7 +28,7 @@ module.exports = __toCommonJS(index_exports);
 // 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 import_react_dom = require("react-dom");
 var DragHandle = (props) => {
   const {
     className = "drag-handle",
@@ -41,45 +41,48 @@ var DragHandle = (props) => {
     computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig,
     nested = false
   } = props;
-  const [element, setElement] = (0, import_react.useState)(null);
-  const plugin = (0, import_react.useRef)(null);
+  const [element] = (0, import_react.useState)(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("div");
+  });
   const nestedOptions = (0, import_react.useMemo)(() => (0, import_extension_drag_handle.normalizeNestedOptions)(nested), [JSON.stringify(nested)]);
   (0, import_react.useEffect)(() => {
-    let initPlugin = null;
     if (!element) {
-      return () => {
-        plugin.current = null;
-      };
+      return;
     }
-    if (editor.isDestroyed) {
-      return () => {
-        plugin.current = null;
-      };
+    element.className = className;
+    element.style.visibility = "hidden";
+    element.style.position = "absolute";
+    element.dataset.dragging = "false";
+  }, [className, element]);
+  (0, import_react.useEffect)(() => {
+    if (!element) {
+      return;
     }
-    if (!plugin.current) {
-      initPlugin = (0, import_extension_drag_handle.DragHandlePlugin)({
-        editor,
-        element,
-        pluginKey,
-        computePositionConfig: {
-          ...import_extension_drag_handle.defaultComputePositionConfig,
-          ...computePositionConfig
-        },
-        onElementDragStart,
-        onElementDragEnd,
-        onNodeChange,
-        nestedOptions
-      });
-      plugin.current = initPlugin.plugin;
-      editor.registerPlugin(plugin.current);
+    if (editor.isDestroyed) {
+      return;
     }
+    const { plugin, unbind } = (0, import_extension_drag_handle.DragHandlePlugin)({
+      editor,
+      element,
+      pluginKey,
+      computePositionConfig: {
+        ...import_extension_drag_handle.defaultComputePositionConfig,
+        ...computePositionConfig
+      },
+      onElementDragStart,
+      onElementDragEnd,
+      onNodeChange,
+      nestedOptions
+    });
+    editor.registerPlugin(plugin);
     return () => {
-      editor.unregisterPlugin(pluginKey);
-      plugin.current = null;
-      if (initPlugin) {
-        initPlugin.unbind();
-        initPlugin = null;
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
       }
+      unbind();
     };
   }, [
     element,
@@ -91,16 +94,10 @@ var DragHandle = (props) => {
     onElementDragEnd,
     nestedOptions
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      className,
-      style: { visibility: "hidden", position: "absolute" },
-      "data-dragging": "false",
-      ref: setElement,
-      children
-    }
-  );
+  if (!element) {
+    return null;
+  }
+  return (0, import_react_dom.createPortal)(children, element);
 };
 
 // src/index.ts

package/dist/index.cjs.map

@@ -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 { 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":[]}
+{"version":3,"sources":["../src/index.ts","../src/DragHandle.tsx"],"sourcesContent":["import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n","import {\n  type DragHandlePluginProps,\n  type NestedOptions,\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {\n  className?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n  children: ReactNode\n\n  /**\n   * Enable drag handles for nested content (list items, blockquotes, etc.).\n   *\n   * When enabled, the drag handle will appear for nested blocks, not just\n   * top-level blocks. A rule-based scoring system determines which node\n   * to target based on cursor position and configured rules.\n   *\n   * @default false\n   *\n   * @example\n   * // Simple enable with sensible defaults\n   * <DragHandle editor={editor} nested>\n   *   <GripIcon />\n   * </DragHandle>\n   *\n   * @example\n   * // With custom configuration\n   * <DragHandle\n   *   editor={editor}\n   *   nested={{\n   *     edgeDetection: 'left',\n   *     allowedContainers: ['bulletList', 'orderedList'],\n   *   }}\n   * >\n   *   <GripIcon />\n   * </DragHandle>\n   *\n   * @example\n   * // With custom rules\n   * <DragHandle\n   *   editor={editor}\n   *   nested={{\n   *     rules: [{\n   *       id: 'excludeCodeBlocks',\n   *       evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,\n   *     }],\n   *   }}\n   * >\n   *   <GripIcon />\n   * </DragHandle>\n   */\n  nested?: boolean | NestedOptions\n}\n\nexport const DragHandle = (props: DragHandleProps) => {\n  const {\n    className = 'drag-handle',\n    children,\n    editor,\n    pluginKey = dragHandlePluginDefaultKey,\n    onNodeChange,\n    onElementDragStart,\n    onElementDragEnd,\n    computePositionConfig = defaultComputePositionConfig,\n    nested = false,\n  } = props\n  const [element] = useState<HTMLDivElement | null>(() => {\n    if (typeof document === 'undefined') {\n      return null\n    }\n\n    return document.createElement('div')\n  })\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n  useEffect(() => {\n    if (!element) {\n      return\n    }\n\n    element.className = className\n    element.style.visibility = 'hidden'\n    element.style.position = 'absolute'\n    element.dataset.dragging = 'false'\n  }, [className, element])\n\n  useEffect(() => {\n    if (!element) {\n      return\n    }\n\n    if (editor.isDestroyed) {\n      return\n    }\n\n    const { plugin, unbind } = DragHandlePlugin({\n      editor,\n      element,\n      pluginKey,\n      computePositionConfig: {\n        ...defaultComputePositionConfig,\n        ...computePositionConfig,\n      },\n      onElementDragStart,\n      onElementDragEnd,\n      onNodeChange,\n      nestedOptions,\n    })\n\n    editor.registerPlugin(plugin)\n\n    return () => {\n      if (!editor.isDestroyed) {\n        editor.unregisterPlugin(pluginKey)\n      }\n      unbind()\n    }\n  }, [\n    element,\n    editor,\n    onNodeChange,\n    pluginKey,\n    computePositionConfig,\n    onElementDragStart,\n    onElementDragEnd,\n    nestedOptions,\n  ])\n\n  if (!element) {\n    return null\n  }\n\n  return createPortal(children, element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mCAOO;AAGP,mBAA6D;AAC7D,uBAA6B;AAqDtB,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB,SAAS;AAAA,EACX,IAAI;AACJ,QAAM,CAAC,OAAO,QAAI,uBAAgC,MAAM;AACtD,QAAI,OAAO,aAAa,aAAa;AACnC,aAAO;AAAA,IACT;AAEA,WAAO,SAAS,cAAc,KAAK;AAAA,EACrC,CAAC;AAGD,QAAM,oBAAgB,sBAAQ,UAAM,qDAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ,YAAY;AACpB,YAAQ,MAAM,aAAa;AAC3B,YAAQ,MAAM,WAAW;AACzB,YAAQ,QAAQ,WAAW;AAAA,EAC7B,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,8BAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,EAAE,QAAQ,OAAO,QAAI,+CAAiB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,eAAe,MAAM;AAE5B,WAAO,MAAM;AACX,UAAI,CAAC,OAAO,aAAa;AACvB,eAAO,iBAAiB,SAAS;AAAA,MACnC;AACA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,aAAO,+BAAa,UAAU,OAAO;AACvC;;;AD7IA,IAAO,gBAAQ;","names":[]}

package/dist/index.d.cts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import { DragHandlePluginProps, NestedOptions } 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' | 'nestedOptions'> & {
@@ -56,6 +56,6 @@ type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'eleme
      */
     nested?: boolean | NestedOptions;
 };
-declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
+declare const DragHandle: (props: DragHandleProps) => react.ReactPortal | null;
 
 export { DragHandle, type DragHandleProps, DragHandle as default };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
 import { DragHandlePluginProps, NestedOptions } 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' | 'nestedOptions'> & {
@@ -56,6 +56,6 @@ type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'eleme
      */
     nested?: boolean | NestedOptions;
 };
-declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
+declare const DragHandle: (props: DragHandleProps) => react.ReactPortal | null;
 
 export { DragHandle, type DragHandleProps, DragHandle as default };

package/dist/index.js

@@ -5,8 +5,8 @@ import {
   dragHandlePluginDefaultKey,
   normalizeNestedOptions
 } from "@tiptap/extension-drag-handle";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 var DragHandle = (props) => {
   const {
     className = "drag-handle",
@@ -19,45 +19,48 @@ var DragHandle = (props) => {
     computePositionConfig = defaultComputePositionConfig,
     nested = false
   } = props;
-  const [element, setElement] = useState(null);
-  const plugin = useRef(null);
+  const [element] = useState(() => {
+    if (typeof document === "undefined") {
+      return null;
+    }
+    return document.createElement("div");
+  });
   const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)]);
   useEffect(() => {
-    let initPlugin = null;
     if (!element) {
-      return () => {
-        plugin.current = null;
-      };
+      return;
     }
-    if (editor.isDestroyed) {
-      return () => {
-        plugin.current = null;
-      };
+    element.className = className;
+    element.style.visibility = "hidden";
+    element.style.position = "absolute";
+    element.dataset.dragging = "false";
+  }, [className, element]);
+  useEffect(() => {
+    if (!element) {
+      return;
     }
-    if (!plugin.current) {
-      initPlugin = DragHandlePlugin({
-        editor,
-        element,
-        pluginKey,
-        computePositionConfig: {
-          ...defaultComputePositionConfig,
-          ...computePositionConfig
-        },
-        onElementDragStart,
-        onElementDragEnd,
-        onNodeChange,
-        nestedOptions
-      });
-      plugin.current = initPlugin.plugin;
-      editor.registerPlugin(plugin.current);
+    if (editor.isDestroyed) {
+      return;
     }
+    const { plugin, unbind } = DragHandlePlugin({
+      editor,
+      element,
+      pluginKey,
+      computePositionConfig: {
+        ...defaultComputePositionConfig,
+        ...computePositionConfig
+      },
+      onElementDragStart,
+      onElementDragEnd,
+      onNodeChange,
+      nestedOptions
+    });
+    editor.registerPlugin(plugin);
     return () => {
-      editor.unregisterPlugin(pluginKey);
-      plugin.current = null;
-      if (initPlugin) {
-        initPlugin.unbind();
-        initPlugin = null;
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey);
       }
+      unbind();
     };
   }, [
     element,
@@ -69,16 +72,10 @@ var DragHandle = (props) => {
     onElementDragEnd,
     nestedOptions
   ]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      style: { visibility: "hidden", position: "absolute" },
-      "data-dragging": "false",
-      ref: setElement,
-      children
-    }
-  );
+  if (!element) {
+    return null;
+  }
+  return createPortal(children, element);
 };
 
 // src/index.ts

package/dist/index.js.map

@@ -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 { 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":[]}
+{"version":3,"sources":["../src/DragHandle.tsx","../src/index.ts"],"sourcesContent":["import {\n  type DragHandlePluginProps,\n  type NestedOptions,\n  defaultComputePositionConfig,\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  normalizeNestedOptions,\n} from '@tiptap/extension-drag-handle'\nimport type { Node } from '@tiptap/pm/model'\nimport type { Editor } from '@tiptap/react'\nimport { type ReactNode, useEffect, useMemo, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {\n  className?: string\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void\n  children: ReactNode\n\n  /**\n   * Enable drag handles for nested content (list items, blockquotes, etc.).\n   *\n   * When enabled, the drag handle will appear for nested blocks, not just\n   * top-level blocks. A rule-based scoring system determines which node\n   * to target based on cursor position and configured rules.\n   *\n   * @default false\n   *\n   * @example\n   * // Simple enable with sensible defaults\n   * <DragHandle editor={editor} nested>\n   *   <GripIcon />\n   * </DragHandle>\n   *\n   * @example\n   * // With custom configuration\n   * <DragHandle\n   *   editor={editor}\n   *   nested={{\n   *     edgeDetection: 'left',\n   *     allowedContainers: ['bulletList', 'orderedList'],\n   *   }}\n   * >\n   *   <GripIcon />\n   * </DragHandle>\n   *\n   * @example\n   * // With custom rules\n   * <DragHandle\n   *   editor={editor}\n   *   nested={{\n   *     rules: [{\n   *       id: 'excludeCodeBlocks',\n   *       evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,\n   *     }],\n   *   }}\n   * >\n   *   <GripIcon />\n   * </DragHandle>\n   */\n  nested?: boolean | NestedOptions\n}\n\nexport const DragHandle = (props: DragHandleProps) => {\n  const {\n    className = 'drag-handle',\n    children,\n    editor,\n    pluginKey = dragHandlePluginDefaultKey,\n    onNodeChange,\n    onElementDragStart,\n    onElementDragEnd,\n    computePositionConfig = defaultComputePositionConfig,\n    nested = false,\n  } = props\n  const [element] = useState<HTMLDivElement | null>(() => {\n    if (typeof document === 'undefined') {\n      return null\n    }\n\n    return document.createElement('div')\n  })\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])\n\n  useEffect(() => {\n    if (!element) {\n      return\n    }\n\n    element.className = className\n    element.style.visibility = 'hidden'\n    element.style.position = 'absolute'\n    element.dataset.dragging = 'false'\n  }, [className, element])\n\n  useEffect(() => {\n    if (!element) {\n      return\n    }\n\n    if (editor.isDestroyed) {\n      return\n    }\n\n    const { plugin, unbind } = DragHandlePlugin({\n      editor,\n      element,\n      pluginKey,\n      computePositionConfig: {\n        ...defaultComputePositionConfig,\n        ...computePositionConfig,\n      },\n      onElementDragStart,\n      onElementDragEnd,\n      onNodeChange,\n      nestedOptions,\n    })\n\n    editor.registerPlugin(plugin)\n\n    return () => {\n      if (!editor.isDestroyed) {\n        editor.unregisterPlugin(pluginKey)\n      }\n      unbind()\n    }\n  }, [\n    element,\n    editor,\n    onNodeChange,\n    pluginKey,\n    computePositionConfig,\n    onElementDragStart,\n    onElementDragEnd,\n    nestedOptions,\n  ])\n\n  if (!element) {\n    return null\n  }\n\n  return createPortal(children, element)\n}\n","import { DragHandle } from './DragHandle.js'\n\nexport * from './DragHandle.js'\n\nexport default DragHandle\n"],"mappings":";AAAA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP,SAAyB,WAAW,SAAS,gBAAgB;AAC7D,SAAS,oBAAoB;AAqDtB,IAAM,aAAa,CAAC,UAA2B;AACpD,QAAM;AAAA,IACJ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,IACxB,SAAS;AAAA,EACX,IAAI;AACJ,QAAM,CAAC,OAAO,IAAI,SAAgC,MAAM;AACtD,QAAI,OAAO,aAAa,aAAa;AACnC,aAAO;AAAA,IACT;AAEA,WAAO,SAAS,cAAc,KAAK;AAAA,EACrC,CAAC;AAGD,QAAM,gBAAgB,QAAQ,MAAM,uBAAuB,MAAM,GAAG,CAAC,KAAK,UAAU,MAAM,CAAC,CAAC;AAE5F,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,YAAQ,YAAY;AACpB,YAAQ,MAAM,aAAa;AAC3B,YAAQ,MAAM,WAAW;AACzB,YAAQ,QAAQ,WAAW;AAAA,EAC7B,GAAG,CAAC,WAAW,OAAO,CAAC;AAEvB,YAAU,MAAM;AACd,QAAI,CAAC,SAAS;AACZ;AAAA,IACF;AAEA,QAAI,OAAO,aAAa;AACtB;AAAA,IACF;AAEA,UAAM,EAAE,QAAQ,OAAO,IAAI,iBAAiB;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,QACrB,GAAG;AAAA,QACH,GAAG;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,WAAO,eAAe,MAAM;AAE5B,WAAO,MAAM;AACX,UAAI,CAAC,OAAO,aAAa;AACvB,eAAO,iBAAiB,SAAS;AAAA,MACnC;AACA,aAAO;AAAA,IACT;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,SAAO,aAAa,UAAU,OAAO;AACvC;;;AC7IA,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-drag-handle-react",
   "description": "drag handle extension for tiptap with react",
-  "version": "3.22.5",
+  "version": "3.23.1",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -38,18 +38,18 @@
   "peerDependencies": {
     "react": "^16.8 || ^17 || ^18 || ^19",
     "react-dom": "^16.8 || ^17 || ^18 || ^19",
-    "@tiptap/extension-drag-handle": "3.22.5",
-    "@tiptap/pm": "3.22.5",
-    "@tiptap/react": "3.22.5"
+    "@tiptap/extension-drag-handle": "3.23.1",
+    "@tiptap/pm": "3.23.1",
+    "@tiptap/react": "3.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@tiptap/extension-drag-handle": "^3.22.5",
-    "@tiptap/pm": "^3.22.5",
-    "@tiptap/react": "^3.22.5"
+    "@tiptap/extension-drag-handle": "^3.23.1",
+    "@tiptap/pm": "^3.23.1",
+    "@tiptap/react": "^3.23.1"
   },
   "scripts": {
     "build": "tsup",

package/src/DragHandle.tsx

@@ -7,9 +7,9 @@ import {
   normalizeNestedOptions,
 } from '@tiptap/extension-drag-handle'
 import type { Node } from '@tiptap/pm/model'
-import type { Plugin } from '@tiptap/pm/state'
 import type { Editor } from '@tiptap/react'
-import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
@@ -74,56 +74,58 @@ export const DragHandle = (props: DragHandleProps) => {
     computePositionConfig = defaultComputePositionConfig,
     nested = false,
   } = props
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const plugin = useRef<Plugin | null>(null)
+  const [element] = useState<HTMLDivElement | null>(() => {
+    if (typeof document === 'undefined') {
+      return null
+    }
+
+    return document.createElement('div')
+  })
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])
 
   useEffect(() => {
-    let initPlugin: {
-      plugin: Plugin
-      unbind: () => void
-    } | null = null
+    if (!element) {
+      return
+    }
+
+    element.className = className
+    element.style.visibility = 'hidden'
+    element.style.position = 'absolute'
+    element.dataset.dragging = 'false'
+  }, [className, element])
 
+  useEffect(() => {
     if (!element) {
-      return () => {
-        plugin.current = null
-      }
+      return
     }
 
     if (editor.isDestroyed) {
-      return () => {
-        plugin.current = null
-      }
+      return
     }
 
-    if (!plugin.current) {
-      initPlugin = DragHandlePlugin({
-        editor,
-        element,
-        pluginKey,
-        computePositionConfig: {
-          ...defaultComputePositionConfig,
-          ...computePositionConfig,
-        },
-        onElementDragStart,
-        onElementDragEnd,
-        onNodeChange,
-        nestedOptions,
-      })
-      plugin.current = initPlugin.plugin
+    const { plugin, unbind } = DragHandlePlugin({
+      editor,
+      element,
+      pluginKey,
+      computePositionConfig: {
+        ...defaultComputePositionConfig,
+        ...computePositionConfig,
+      },
+      onElementDragStart,
+      onElementDragEnd,
+      onNodeChange,
+      nestedOptions,
+    })
 
-      editor.registerPlugin(plugin.current)
-    }
+    editor.registerPlugin(plugin)
 
     return () => {
-      editor.unregisterPlugin(pluginKey)
-      plugin.current = null
-      if (initPlugin) {
-        initPlugin.unbind()
-        initPlugin = null
+      if (!editor.isDestroyed) {
+        editor.unregisterPlugin(pluginKey)
       }
+      unbind()
     }
   }, [
     element,
@@ -136,14 +138,9 @@ export const DragHandle = (props: DragHandleProps) => {
     nestedOptions,
   ])
 
-  return (
-    <div
-      className={className}
-      style={{ visibility: 'hidden', position: 'absolute' }}
-      data-dragging="false"
-      ref={setElement}
-    >
-      {children}
-    </div>
-  )
+  if (!element) {
+    return null
+  }
+
+  return createPortal(children, element)
 }