Merge pull request #361 from NiclasDev63/new-drag-handle

Updated Drag Handle

Author: andrewdoro

apps/docs/guides/global-drag-handle.mdx

@@ -0,0 +1,83 @@
+---
+title: "Global Drag Handle (New)"
+description: "Drag and drop blocks across the editor"
+---
+
+<Steps>
+
+    <Step title="Install the extension">
+    Install the extension with a package manager of your choice.
+
+    ```NPM
+    $ npm i tiptap-extension-global-drag-handle
+    ```
+    ```Yarn
+    $ yarn add tiptap-extension-global-drag-handle
+    ```
+
+    In order to enjoy all the advantages of a drag handle, it is recommended to install the auto joiner extension as well, which allows you to automatically join various nodes such as 2 lists that are next to each other.
+
+    ```NPM
+    $ npm i tiptap-extension-auto-joiner
+    ```
+    ```Yarn
+    $ yarn add tiptap-extension-auto-joiner
+    ```
+
+    </Step>
+
+    <Step title="Add drag extension">
+        ```tsx
+        // extensions.ts
+        import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
+        import AutoJoiner from 'tiptap-extension-auto-joiner' // optional
+
+        export const defaultExtensions = [
+            GlobalDragHandle,
+            AutoJoiner, // optional
+            // other extensions
+        ];
+
+        // editor.tsx
+        const Editor = () => {
+            return <EditorContent extensions={defaultExtensions} />
+        }
+        ```
+    </Step>
+
+    <Step title="Configure the extension">
+        ```tsx
+        //extensions.ts
+        import GlobalDragHandle from 'tiptap-extension-global-drag-handle'
+        import AutoJoiner from 'tiptap-extension-auto-joiner' // optional
+
+        export const defaultExtensions = [
+            GlobalDragHandle.configure({
+                dragHandleWidth: 20,    // default
+
+                // The scrollTreshold specifies how close the user must drag an element to the edge of the lower/upper screen for automatic 
+                // scrolling to take place. For example, scrollTreshold = 100 means that scrolling starts automatically when the user drags an 
+                // element to a position that is max. 99px away from the edge of the screen
+                // You can set this to 0 to prevent auto scrolling caused by this extension
+                scrollTreshold: 100     // default
+            }),
+            AutoJoiner.configure({
+                elementsToJoin: ["bulletList", "orderedList"] // default
+            }),
+            // other extensions
+        ];
+
+        // editor.tsx
+        const Editor = () => {
+            return <EditorContent extensions={defaultExtensions} />
+        }
+        ```
+    </Step>
+
+    <Step title="Add styling">
+        By default the drag handle is headless, which means it doesn't contain any css. If you want to apply styling to the drag handle, use the class "drag-handle" in your css file.
+
+        Take a look at [this](https://github.com/steven-tey/novel/blob/main/apps/web/styles/prosemirror.css#L131) to see an example of drag handle styling.
+    </Step>
+
+</Steps>

apps/docs/mint.json

@@ -51,7 +51,8 @@
           ]
         },
         "guides/ai-command",
-        "guides/image-upload"
+        "guides/image-upload",
+        "guides/global-drag-handle"
       ]
     },
     {

packages/headless/package.json

@@ -54,6 +54,8 @@
     "@tiptap/react": "^2.1.7",
     "@tiptap/starter-kit": "^2.1.7",
     "@tiptap/suggestion": "^2.1.7",
+    "tiptap-extension-auto-joiner": "^0.1.1",
+    "tiptap-extension-global-drag-handle": "^0.1.2",
     "@types/node": "18.15.3",
     "cmdk": "^0.2.1",
     "jotai": "^2.6.4",

packages/headless/src/extensions/drag-and-drop.tsx

@@ -13,8 +13,10 @@ import { Markdown } from "tiptap-markdown";
 import Highlight from "@tiptap/extension-highlight";
 import UpdatedImage from "./updated-image";
 import CustomKeymap from "./custom-keymap";
-import DragAndDrop from "./drag-and-drop";
 import { ImageResizer } from "./image-resizer";
+import GlobalDragHandle from "tiptap-extension-global-drag-handle";
+import AutoJoiner from "tiptap-extension-auto-joiner";
+
 const PlaceholderExtension = Placeholder.configure({
   placeholder: ({ node }) => {
     if (node.type.name === "heading") {
@@ -38,7 +40,10 @@ const simpleExtensions = [
     transformCopiedText: true,
   }),
   CustomKeymap,
-  DragAndDrop,
+  GlobalDragHandle.configure({
+    scrollTreshold: 0,
+  }),
+  AutoJoiner,
 ] as const;
 
 const Horizontal = HorizontalRule.extend({