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

Updated Drag Handle

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:/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/index.ts

@@ -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({