@tiptap/extension-drag-handle-react 3.16.0 → 3.17.0

package/dist/index.cjs

@@ -38,10 +38,12 @@ var DragHandle = (props) => {
     onNodeChange,
     onElementDragStart,
     onElementDragEnd,
-    computePositionConfig = import_extension_drag_handle.defaultComputePositionConfig
+    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 nestedOptions = (0, import_react.useMemo)(() => (0, import_extension_drag_handle.normalizeNestedOptions)(nested), [JSON.stringify(nested)]);
   (0, import_react.useEffect)(() => {
     let initPlugin = null;
     if (!element) {
@@ -65,7 +67,8 @@ var DragHandle = (props) => {
         },
         onElementDragStart,
         onElementDragEnd,
-        onNodeChange
+        onNodeChange,
+        nestedOptions
       });
       plugin.current = initPlugin.plugin;
       editor.registerPlugin(plugin.current);
@@ -78,7 +81,16 @@ var DragHandle = (props) => {
         initPlugin = null;
       }
     };
-  }, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd]);
+  }, [
+    element,
+    editor,
+    onNodeChange,
+    pluginKey,
+    computePositionConfig,
+    onElementDragStart,
+    onElementDragEnd,
+    nestedOptions
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {

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  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    onElementDragStart,\n    onElementDragEnd,\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: {\n          ...defaultComputePositionConfig,\n          ...computePositionConfig,\n        },\n        onElementDragStart,\n        onElementDragEnd,\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, onElementDragStart, onElementDragEnd])\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,mCAKO;AAIP,mBAA4D;AAuExD;AA7DG,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,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;AAAA,UACrB,GAAG;AAAA,UACH,GAAG;AAAA,QACL;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,CAAC,SAAS,QAAQ,cAAc,WAAW,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE1G,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;;;ADrFA,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 { 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

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
+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'> & {
+type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {
     className?: string;
     onNodeChange?: (data: {
         node: Node | null;
@@ -13,6 +13,48 @@ type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'eleme
         pos: number;
     }) => void;
     children: ReactNode;
+    /**
+     * Enable drag handles for nested content (list items, blockquotes, etc.).
+     *
+     * When enabled, the drag handle will appear for nested blocks, not just
+     * top-level blocks. A rule-based scoring system determines which node
+     * to target based on cursor position and configured rules.
+     *
+     * @default false
+     *
+     * @example
+     * // Simple enable with sensible defaults
+     * <DragHandle editor={editor} nested>
+     *   <GripIcon />
+     * </DragHandle>
+     *
+     * @example
+     * // With custom configuration
+     * <DragHandle
+     *   editor={editor}
+     *   nested={{
+     *     edgeDetection: 'left',
+     *     allowedContainers: ['bulletList', 'orderedList'],
+     *   }}
+     * >
+     *   <GripIcon />
+     * </DragHandle>
+     *
+     * @example
+     * // With custom rules
+     * <DragHandle
+     *   editor={editor}
+     *   nested={{
+     *     rules: [{
+     *       id: 'excludeCodeBlocks',
+     *       evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,
+     *     }],
+     *   }}
+     * >
+     *   <GripIcon />
+     * </DragHandle>
+     */
+    nested?: boolean | NestedOptions;
 };
 declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { DragHandlePluginProps } from '@tiptap/extension-drag-handle';
+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'> & {
+type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {
     className?: string;
     onNodeChange?: (data: {
         node: Node | null;
@@ -13,6 +13,48 @@ type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'eleme
         pos: number;
     }) => void;
     children: ReactNode;
+    /**
+     * Enable drag handles for nested content (list items, blockquotes, etc.).
+     *
+     * When enabled, the drag handle will appear for nested blocks, not just
+     * top-level blocks. A rule-based scoring system determines which node
+     * to target based on cursor position and configured rules.
+     *
+     * @default false
+     *
+     * @example
+     * // Simple enable with sensible defaults
+     * <DragHandle editor={editor} nested>
+     *   <GripIcon />
+     * </DragHandle>
+     *
+     * @example
+     * // With custom configuration
+     * <DragHandle
+     *   editor={editor}
+     *   nested={{
+     *     edgeDetection: 'left',
+     *     allowedContainers: ['bulletList', 'orderedList'],
+     *   }}
+     * >
+     *   <GripIcon />
+     * </DragHandle>
+     *
+     * @example
+     * // With custom rules
+     * <DragHandle
+     *   editor={editor}
+     *   nested={{
+     *     rules: [{
+     *       id: 'excludeCodeBlocks',
+     *       evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,
+     *     }],
+     *   }}
+     * >
+     *   <GripIcon />
+     * </DragHandle>
+     */
+    nested?: boolean | NestedOptions;
 };
 declare const DragHandle: (props: DragHandleProps) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -2,9 +2,10 @@
 import {
   defaultComputePositionConfig,
   DragHandlePlugin,
-  dragHandlePluginDefaultKey
+  dragHandlePluginDefaultKey,
+  normalizeNestedOptions
 } from "@tiptap/extension-drag-handle";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var DragHandle = (props) => {
   const {
@@ -15,10 +16,12 @@ var DragHandle = (props) => {
     onNodeChange,
     onElementDragStart,
     onElementDragEnd,
-    computePositionConfig = defaultComputePositionConfig
+    computePositionConfig = defaultComputePositionConfig,
+    nested = false
   } = props;
   const [element, setElement] = useState(null);
   const plugin = useRef(null);
+  const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)]);
   useEffect(() => {
     let initPlugin = null;
     if (!element) {
@@ -42,7 +45,8 @@ var DragHandle = (props) => {
         },
         onElementDragStart,
         onElementDragEnd,
-        onNodeChange
+        onNodeChange,
+        nestedOptions
       });
       plugin.current = initPlugin.plugin;
       editor.registerPlugin(plugin.current);
@@ -55,7 +59,16 @@ var DragHandle = (props) => {
         initPlugin = null;
       }
     };
-  }, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd]);
+  }, [
+    element,
+    editor,
+    onNodeChange,
+    pluginKey,
+    computePositionConfig,
+    onElementDragStart,
+    onElementDragEnd,
+    nestedOptions
+  ]);
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/index.js.map

@@ -1 +1 @@
-{"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    onElementDragStart,\n    onElementDragEnd,\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: {\n          ...defaultComputePositionConfig,\n          ...computePositionConfig,\n        },\n        onElementDragStart,\n        onElementDragEnd,\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, onElementDragStart, onElementDragEnd])\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,EAEE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAyB,WAAW,QAAQ,gBAAgB;AAuExD;AA7DG,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,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;AAAA,UACrB,GAAG;AAAA,UACH,GAAG;AAAA,QACL;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,CAAC,SAAS,QAAQ,cAAc,WAAW,uBAAuB,oBAAoB,gBAAgB,CAAC;AAE1G,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;;;ACrFA,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 { 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":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/extension-drag-handle-react",
   "description": "drag handle extension for tiptap with react",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "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.16.0",
-    "@tiptap/pm": "^3.16.0",
-    "@tiptap/react": "^3.16.0"
+    "@tiptap/extension-drag-handle": "^3.17.0",
+    "@tiptap/pm": "^3.17.0",
+    "@tiptap/react": "^3.17.0"
   },
   "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.16.0",
-    "@tiptap/pm": "^3.16.0",
-    "@tiptap/react": "^3.16.0"
+    "@tiptap/extension-drag-handle": "^3.17.0",
+    "@tiptap/pm": "^3.17.0",
+    "@tiptap/react": "^3.17.0"
   },
   "scripts": {
     "build": "tsup",

package/src/DragHandle.tsx

@@ -1,20 +1,65 @@
 import {
   type DragHandlePluginProps,
+  type NestedOptions,
   defaultComputePositionConfig,
   DragHandlePlugin,
   dragHandlePluginDefaultKey,
+  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, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
 
-export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {
+export type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element' | 'nestedOptions'> & {
   className?: string
   onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void
   children: ReactNode
+
+  /**
+   * Enable drag handles for nested content (list items, blockquotes, etc.).
+   *
+   * When enabled, the drag handle will appear for nested blocks, not just
+   * top-level blocks. A rule-based scoring system determines which node
+   * to target based on cursor position and configured rules.
+   *
+   * @default false
+   *
+   * @example
+   * // Simple enable with sensible defaults
+   * <DragHandle editor={editor} nested>
+   *   <GripIcon />
+   * </DragHandle>
+   *
+   * @example
+   * // With custom configuration
+   * <DragHandle
+   *   editor={editor}
+   *   nested={{
+   *     edgeDetection: 'left',
+   *     allowedContainers: ['bulletList', 'orderedList'],
+   *   }}
+   * >
+   *   <GripIcon />
+   * </DragHandle>
+   *
+   * @example
+   * // With custom rules
+   * <DragHandle
+   *   editor={editor}
+   *   nested={{
+   *     rules: [{
+   *       id: 'excludeCodeBlocks',
+   *       evaluate: ({ node }) => node.type.name === 'codeBlock' ? 1000 : 0,
+   *     }],
+   *   }}
+   * >
+   *   <GripIcon />
+   * </DragHandle>
+   */
+  nested?: boolean | NestedOptions
 }
 
 export const DragHandle = (props: DragHandleProps) => {
@@ -27,10 +72,14 @@ export const DragHandle = (props: DragHandleProps) => {
     onElementDragStart,
     onElementDragEnd,
     computePositionConfig = defaultComputePositionConfig,
+    nested = false,
   } = props
   const [element, setElement] = useState<HTMLDivElement | null>(null)
   const plugin = useRef<Plugin | null>(null)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const nestedOptions = useMemo(() => normalizeNestedOptions(nested), [JSON.stringify(nested)])
+
   useEffect(() => {
     let initPlugin: {
       plugin: Plugin
@@ -61,6 +110,7 @@ export const DragHandle = (props: DragHandleProps) => {
         onElementDragStart,
         onElementDragEnd,
         onNodeChange,
+        nestedOptions,
       })
       plugin.current = initPlugin.plugin
 
@@ -75,7 +125,16 @@ export const DragHandle = (props: DragHandleProps) => {
         initPlugin = null
       }
     }
-  }, [element, editor, onNodeChange, pluginKey, computePositionConfig, onElementDragStart, onElementDragEnd])
+  }, [
+    element,
+    editor,
+    onNodeChange,
+    pluginKey,
+    computePositionConfig,
+    onElementDragStart,
+    onElementDragEnd,
+    nestedOptions,
+  ])
 
   return (
     <div