@tiptap/extension-drag-handle-react 2.22.0

package/README.md

@@ -0,0 +1,14 @@
+# @tiptap/extension-drag-handle-react
+[![Version](https://img.shields.io/npm/v/@tiptap/extension-drag-handle-react.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-drag-handle-react)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-drag-handle-react.svg)](https://npmcharts.com/compare/tiptap?minimal=true)
+[![License](https://img.shields.io/npm/l/@tiptap/extension-drag-handle-react.svg)](https://www.npmjs.com/package/@tiptap/extension-drag-handle-react)
+[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis)
+
+## Introduction
+Tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
+
+## Official Documentation
+Documentation can be found on the [Tiptap website](https://tiptap.dev).
+
+## License
+Tiptap is open sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap/blob/main/LICENSE.md).

package/dist/DragHandle.d.ts

@@ -0,0 +1,17 @@
+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;
+};
+export declare const DragHandle: (props: DragHandleProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=DragHandle.d.ts.map

package/dist/DragHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle.d.ts","sourceRoot":"","sources":["../src/DragHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,qBAAqB,EACtB,MAAM,+BAA+B,CAAA;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AACtC,OAAO,KAAK,EAAE,EACZ,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,KAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEvE,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,qBAAqB,EAAE,WAAW,CAAC,EAAE,SAAS,CAAC,GAAG;IAC5F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,UAAU,UAAW,eAAe,sBAgDhD,CAAA"}

package/dist/index.cjs

@@ -0,0 +1,47 @@
+'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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+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));
+};
+
+exports.DragHandle = DragHandle;
+exports.default = DragHandle;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n  ReactNode, useEffect, useRef, useState,\n} from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n  className?: string;\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void;\n  children: ReactNode;\n};\n\nexport const DragHandle = (props: DragHandleProps) => {\n  const {\n    className = 'drag-handle',\n    children,\n    editor,\n    pluginKey = dragHandlePluginDefaultKey,\n    onNodeChange,\n    tippyOptions = {},\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":";;;;;;;;;;;AAoBa,MAAA,UAAU,GAAG,CAAC,KAAsB,KAAI;IACnD,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GAAGA,8CAA0B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,GAClB,GAAG,KAAK;IACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;AACnE,IAAA,MAAM,MAAM,GAAGC,YAAM,CAAgB,IAAI,CAAC;IAE1CC,eAAS,CAAC,MAAK;QACb,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;AACtB,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACnB,YAAA,MAAM,CAAC,OAAO,GAAGC,oCAAgB,CAAC;gBAChC,MAAM;gBACN,OAAO;gBACP,SAAS;gBACT,YAAY;gBACZ,YAAY;AACb,aAAA,CAAC;AAEF,YAAA,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC;AAClC,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,SAAC;AACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAE5D,IAAA,QACEC,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAA,EACvC,QAAQ,CACL;AAEV;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { DragHandle } from './DragHandle.js';
+export * from './DragHandle.js';
+export default DragHandle;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

@@ -0,0 +1,38 @@
+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));
+};
+
+export { DragHandle, DragHandle as default };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n  ReactNode, useEffect, useRef, useState,\n} from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n  className?: string;\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void;\n  children: ReactNode;\n};\n\nexport const DragHandle = (props: DragHandleProps) => {\n  const {\n    className = 'drag-handle',\n    children,\n    editor,\n    pluginKey = dragHandlePluginDefaultKey,\n    onNodeChange,\n    tippyOptions = {},\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":";;;AAoBa,MAAA,UAAU,GAAG,CAAC,KAAsB,KAAI;IACnD,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GAAG,0BAA0B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,GAClB,GAAG,KAAK;IACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC;AACnE,IAAA,MAAM,MAAM,GAAG,MAAM,CAAgB,IAAI,CAAC;IAE1C,SAAS,CAAC,MAAK;QACb,IAAI,CAAC,OAAO,EAAE;AACZ,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;AACtB,YAAA,OAAO,MAAK;AACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,aAAC;;AAGH,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;AACnB,YAAA,MAAM,CAAC,OAAO,GAAG,gBAAgB,CAAC;gBAChC,MAAM;gBACN,OAAO;gBACP,SAAS;gBACT,YAAY;gBACZ,YAAY;AACb,aAAA,CAAC;AAEF,YAAA,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvC,QAAA,OAAO,MAAK;AACV,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC;AAClC,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACvB,SAAC;AACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;AAE5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAA,EACvC,QAAQ,CACL;AAEV;;;;"}

package/dist/index.umd.js

@@ -0,0 +1,46 @@
+(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

@@ -0,0 +1 @@
+{"version":3,"file":"index.umd.js","sources":["../src/DragHandle.tsx"],"sourcesContent":["import {\n  DragHandlePlugin,\n  dragHandlePluginDefaultKey,\n  DragHandlePluginProps,\n} from '@tiptap/extension-drag-handle'\nimport { Node } from '@tiptap/pm/model'\nimport { Plugin } from '@tiptap/pm/state'\nimport { Editor } from '@tiptap/react'\nimport React, {\n  ReactNode, useEffect, useRef, useState,\n} from 'react'\n\ntype Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;\n\nexport type DragHandleProps = Omit<Optional<DragHandlePluginProps, 'pluginKey'>, 'element'> & {\n  className?: string;\n  onNodeChange?: (data: { node: Node | null; editor: Editor; pos: number }) => void;\n  children: ReactNode;\n};\n\nexport const DragHandle = (props: DragHandleProps) => {\n  const {\n    className = 'drag-handle',\n    children,\n    editor,\n    pluginKey = dragHandlePluginDefaultKey,\n    onNodeChange,\n    tippyOptions = {},\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":";;;;;;AAoBa,QAAA,UAAU,GAAG,CAAC,KAAsB,KAAI;MACnD,MAAM,EACJ,SAAS,GAAG,aAAa,EACzB,QAAQ,EACR,MAAM,EACN,SAAS,GAAGA,8CAA0B,EACtC,YAAY,EACZ,YAAY,GAAG,EAAE,GAClB,GAAG,KAAK;MACT,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAwB,IAAI,CAAC;EACnE,IAAA,MAAM,MAAM,GAAGC,YAAM,CAAgB,IAAI,CAAC;MAE1CC,eAAS,CAAC,MAAK;UACb,IAAI,CAAC,OAAO,EAAE;EACZ,YAAA,OAAO,MAAK;EACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;EACvB,aAAC;;EAGH,QAAA,IAAI,MAAM,CAAC,WAAW,EAAE;EACtB,YAAA,OAAO,MAAK;EACV,gBAAA,MAAM,CAAC,OAAO,GAAG,IAAI;EACvB,aAAC;;EAGH,QAAA,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE;EACnB,YAAA,MAAM,CAAC,OAAO,GAAGC,oCAAgB,CAAC;kBAChC,MAAM;kBACN,OAAO;kBACP,SAAS;kBACT,YAAY;kBACZ,YAAY;EACb,aAAA,CAAC;EAEF,YAAA,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,OAAO,CAAC;;EAGvC,QAAA,OAAO,MAAK;EACV,YAAA,MAAM,CAAC,gBAAgB,CAAC,SAAS,CAAC;EAClC,YAAA,MAAM,CAAC,OAAO,GAAG,IAAI;EACvB,SAAC;EACH,KAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC,CAAC;EAE5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAA,EACvC,QAAQ,CACL;EAEV;;;;;;;;;;;"}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@tiptap/extension-drag-handle-react",
+  "description": "drag handle extension for tiptap with react",
+  "version": "2.22.0",
+  "homepage": "https://tiptap.dev",
+  "keywords": [
+    "tiptap",
+    "tiptap extension"
+  ],
+  "license": "MIT",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ueberdosis"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/extension-drag-handle-react"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "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"
+  },
+  "devDependencies": {
+    "@tiptap/extension-drag-handle": "^2.22.0",
+    "@tiptap/pm": "^2.22.0",
+    "@tiptap/react": "^2.22.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/DragHandle.tsx

@@ -0,0 +1,69 @@
+import {
+  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'
+
+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;
+};
+
+export const DragHandle = (props: DragHandleProps) => {
+  const {
+    className = 'drag-handle',
+    children,
+    editor,
+    pluginKey = dragHandlePluginDefaultKey,
+    onNodeChange,
+    tippyOptions = {},
+  } = props
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
+  const plugin = useRef<Plugin | null>(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 (
+    <div className={className} ref={setElement}>
+      {children}
+    </div>
+  )
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import { DragHandle } from './DragHandle.js'
+
+export * from './DragHandle.js'
+
+export default DragHandle