feat: add global drag and drop function to the editor

example/src/App.vue

@@ -43,6 +43,7 @@ import {
   RichTextEditor,
   useEditor,
   ExtensionIndent,
+  ExtensionDraggable,
   ExtensionColumns,
   ExtensionColumn,
   ExtensionNodeSelected,
@@ -59,7 +60,11 @@ const editor = useEditor({
     ExtensionBulletList,
     ExtensionCode,
     ExtensionDocument,
-    ExtensionDropcursor,
+    ExtensionDropcursor.configure({
+      width: 2,
+      class: "dropcursor",
+      color: "skyblue",
+    }),
     ExtensionGapcursor,
     ExtensionHardBreak,
     ExtensionHeading,
@@ -102,6 +107,7 @@ const editor = useEditor({
     ExtensionColor,
     ExtensionFontSize,
     ExtensionIndent,
+    ExtensionDraggable,
     ExtensionColumns,
     ExtensionColumn,
     ExtensionNodeSelected,

packages/editor/src/components/bubble/BubbleMenuPlugin.ts

@@ -8,11 +8,14 @@ import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
 import type { EditorView } from "@tiptap/pm/view";
 import tippy, { type Instance, type Props, sticky } from "tippy.js";
 
+export interface TippyOptionProps extends Props {
+  fixed?: boolean;
+}
 export interface BubbleMenuPluginProps {
   pluginKey: PluginKey | string;
   editor: Editor;
   element: HTMLElement;
-  tippyOptions?: Partial<Props>;
+  tippyOptions?: Partial<TippyOptionProps>;
   updateDelay?: number;
   shouldShow?:
     | ((props: {
@@ -44,9 +47,9 @@ export class BubbleMenuView {
 
   public preventHide = false;
 
-  public tippy: Instance | undefined;
+  public tippy: Instance<TippyOptionProps> | undefined;
 
-  public tippyOptions?: Partial<Props>;
+  public tippyOptions?: Partial<TippyOptionProps>;
 
   public getRenderContainer?: BubbleMenuPluginProps["getRenderContainer"];
 
@@ -97,8 +100,6 @@ export class BubbleMenuView {
       capture: true,
     });
     this.view.dom.addEventListener("dragstart", this.dragstartHandler);
-    // this.editor.on("focus", this.focusHandler);
-    // this.editor.on('blur', this.blurHandler);
     this.tippyOptions = tippyOptions || {};
     // Detaches menu content from its current parent
     this.element.remove();
@@ -113,11 +114,6 @@ export class BubbleMenuView {
     this.hide();
   };
 
-  // focusHandler = () => {
-  //   // we use `setTimeout` to make sure `selection` is already updated
-  //   setTimeout(() => this.update(this.editor.view));
-  // };
-
   blurHandler = ({ event }: { event: FocusEvent }) => {
     if (this.preventHide) {
       this.preventHide = false;
@@ -157,7 +153,7 @@ export class BubbleMenuView {
       content: this.element,
       interactive: true,
       trigger: "manual",
-      placement: "top",
+      placement: "bottom-start",
       hideOnClick: "toggle",
       plugins: [sticky],
       ...Object.assign(
@@ -169,6 +165,7 @@ export class BubbleMenuView {
                 moveTransition: "transform 0.2s ease-in-out",
               }
             : {}),
+          fixed: true,
         },
         this.tippyOptions
       ),
@@ -203,24 +200,21 @@ export class BubbleMenuView {
     const from = Math.min(...ranges.map((range) => range.$from.pos));
     const to = Math.max(...ranges.map((range) => range.$to.pos));
     // prevent the menu from being obscured
-    const tippyParentNode = this.tippy?.popper.parentNode;
-    const siblings =
-      tippyParentNode?.querySelectorAll("[data-tippy-root]") ?? [];
     const placement = this.tippyOptions?.placement
       ? this.tippyOptions?.placement
       : isNodeSelection(selection)
-      ? siblings.length > 1
+      ? ACTIVE_BUBBLE_MENUS.length > 1
         ? "bottom"
         : "top"
+      : this.tippy.props.fixed
+      ? "bottom-start"
       : Math.abs(cursorAt - to) <= Math.abs(cursorAt - from)
-      ? siblings.length > 1
-        ? "top-start"
-        : "bottom-start"
+      ? "bottom-start"
       : "top-start";
+
     const domAtPos = view.domAtPos(from).node as HTMLElement;
     const nodeDOM = view.nodeDOM(from) as HTMLElement;
     const node = nodeDOM || domAtPos;
-
     const shouldShow =
       this.editor.isEditable &&
       this.shouldShow?.({
@@ -246,7 +240,7 @@ export class BubbleMenuView {
     );
     const offset = this.tippyOptions?.offset as [number, number];
     const offsetX = offset?.[0] ?? 0;
-    const offsetY = otherBubbleMenus.length
+    let offsetY = otherBubbleMenus.length
       ? otherBubbleMenus.reduce((prev, instance, currentIndex, array) => {
           const prevY = array[currentIndex - 1]
             ? array[currentIndex - 1]?.popperInstance?.state?.modifiersData
@@ -264,6 +258,9 @@ export class BubbleMenuView {
           return prev;
         }, 0)
       : offset?.[1] ?? 10;
+    if (!offsetY) {
+      offsetY = 10;
+    }
     this.tippy?.setProps({
       offset: [offsetX, offsetY],
       placement,

packages/editor/src/extensions/audio/index.ts

@@ -269,6 +269,22 @@ const Audio = Node.create<ExtensionOptions>({
           ],
         };
       },
+      getDraggable() {
+        return {
+          getRenderContainer({ dom }) {
+            let container = dom;
+            while (
+              container &&
+              !container.hasAttribute("data-node-view-wrapper")
+            ) {
+              container = container.parentElement;
+            }
+            return {
+              el: container,
+            };
+          },
+        };
+      },
     };
   },
 });

packages/editor/src/extensions/blockquote/index.ts

@@ -28,6 +28,22 @@ const Blockquote = TiptapBlockquote.extend<
           },
         };
       },
+      getDraggable() {
+        return {
+          getRenderContainer({ dom }) {
+            let element: HTMLElement | null = dom;
+            while (element && element.parentElement) {
+              if (element.tagName === "BLOCKQUOTE") {
+                break;
+              }
+              element = element.parentElement;
+            }
+            return {
+              el: element,
+            };
+          },
+        };
+      },
     };
   },
 });

packages/editor/src/extensions/bullet-list/index.ts

@@ -38,6 +38,22 @@ const BulletList = TiptapBulletList.extend<
           },
         };
       },
+      getDraggable() {
+        return {
+          getRenderContainer({ dom }) {
+            let container = dom;
+            while (container && !(container.tagName === "LI")) {
+              container = container.parentElement as HTMLElement;
+            }
+            return {
+              el: container,
+              dragDomOffset: {
+                x: -12,
+              },
+            };
+          },
+        };
+      },
     };
   },
   addExtensions() {

packages/editor/src/extensions/code-block/code-block.ts

@@ -74,6 +74,22 @@ const updateIndent = (tr: Transaction, type: IndentType): Transaction => {
   return tr;
 };
 
+const getRenderContainer = (node: HTMLElement) => {
+  let container = node;
+  // 文本节点
+  if (container.nodeName === "#text") {
+    container = node.parentElement as HTMLElement;
+  }
+  while (
+    container &&
+    container.classList &&
+    !container.classList.contains("code-node")
+  ) {
+    container = container.parentElement as HTMLElement;
+  }
+  return container;
+};
+
 export default CodeBlockLowlight.extend<
   CustomCodeBlockLowlightOptions & CodeBlockLowlightOptions
 >({
@@ -195,19 +211,7 @@ export default CodeBlockLowlight.extend<
             return isActive(state, CodeBlockLowlight.name);
           },
           getRenderContainer: (node: HTMLElement) => {
-            let container = node;
-            // 文本节点
-            if (container.nodeName === "#text") {
-              container = node.parentElement as HTMLElement;
-            }
-            while (
-              container &&
-              container.classList &&
-              !container.classList.contains("code-node")
-            ) {
-              container = container.parentElement as HTMLElement;
-            }
-            return container;
+            return getRenderContainer(node);
           },
           items: [
             {
@@ -222,6 +226,15 @@ export default CodeBlockLowlight.extend<
           ],
         };
       },
+      getDraggable() {
+        return {
+          getRenderContainer({ dom }: { dom: HTMLElement }) {
+            return {
+              el: getRenderContainer(dom),
+            };
+          },
+        };
+      },
     };
   },
 });

packages/editor/src/extensions/columns/columns.ts

@@ -19,6 +19,7 @@ import MdiDeleteForeverOutline from "~icons/mdi/delete-forever-outline?color=red
 import { i18n } from "@/locales";
 import { deleteNode } from "@/utils";
 import MdiCollage from "~icons/mdi/collage";
+import { ExtensionOptions } from "@/types";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
@@ -168,7 +169,7 @@ const gotoCol = (state: EditorState, dispatch: any, type: GotoColType) => {
   return false;
 };
 
-const Columns = Node.create({
+const Columns = Node.create<ExtensionOptions>({
   name: "columns",
   group: "block",
   priority: 10,
@@ -179,7 +180,6 @@ const Columns = Node.create({
 
   addOptions() {
     return {
-      ...this.parent?.(),
       HTMLAttributes: {
         class: "columns",
       },
@@ -295,6 +295,23 @@ const Columns = Node.create({
           ],
         };
       },
+      getDraggable() {
+        return {
+          getRenderContainer({ dom }) {
+            let container = dom;
+            while (container && !container.classList.contains("columns")) {
+              container = container.parentElement as HTMLElement;
+            }
+            return {
+              el: container,
+              dragDomOffset: {
+                y: -5,
+              },
+            };
+          },
+          allowPropagationDownward: true,
+        };
+      },
     };
   },