@tiptap/extension-drag-handle 2.24.1 → 3.0.0-beta.10

package/src/drag-handle.ts

@@ -1,26 +1,32 @@
-import { Editor, Extension } from '@tiptap/core'
-import { Node } from '@tiptap/pm/model'
-import { Props } from 'tippy.js'
+import type { ComputePositionConfig } from '@floating-ui/dom'
+import { type Editor, Extension } from '@tiptap/core'
+import type { Node } from '@tiptap/pm/model'
 
 import { DragHandlePlugin } from './drag-handle-plugin.js'
 
+export const defaultComputePositionConfig: ComputePositionConfig = {
+  placement: 'left-start',
+  strategy: 'absolute',
+}
+
 export interface DragHandleOptions {
   /**
-   * Renders an element that is positioned with tippy.js
+   * Renders an element that is positioned with the floating-ui/dom package
    */
-  render (): HTMLElement,
+  render(): HTMLElement
   /**
-   * Options for tippy.js
+   * Configuration for position computation of the drag handle
+   * using the floating-ui/dom package
    */
-  tippyOptions?: Partial<Props>,
+  computePositionConfig?: ComputePositionConfig
   /**
    * Locks the draghandle in place and visibility
    */
-  locked?: boolean,
+  locked?: boolean
   /**
    * Returns a node or null when a node is hovered over
    */
-  onNodeChange?: (options: { node: Node | null, editor: Editor }) => void,
+  onNodeChange?: (options: { node: Node | null; editor: Editor }) => void
 }
 
 declare module '@tiptap/core' {
@@ -29,15 +35,15 @@ declare module '@tiptap/core' {
       /**
        * Locks the draghandle in place and visibility
        */
-      lockDragHandle: () => ReturnType,
+      lockDragHandle: () => ReturnType
       /**
        * Unlocks the draghandle
        */
-      unlockDragHandle: () => ReturnType,
+      unlockDragHandle: () => ReturnType
       /**
        * Toggle draghandle lock state
        */
-      toggleDragHandle: () => ReturnType,
+      toggleDragHandle: () => ReturnType
     }
   }
 }
@@ -54,26 +60,34 @@ export const DragHandle = Extension.create<DragHandleOptions>({
 
         return element
       },
-      tippyOptions: {},
+      computePositionConfig: {},
       locked: false,
-      onNodeChange: () => { return null },
+      onNodeChange: () => {
+        return null
+      },
     }
   },
 
   addCommands() {
     return {
-      lockDragHandle: () => ({ editor }) => {
-        this.options.locked = true
-        return editor.commands.setMeta('lockDragHandle', this.options.locked)
-      },
-      unlockDragHandle: () => ({ editor }) => {
-        this.options.locked = false
-        return editor.commands.setMeta('lockDragHandle', this.options.locked)
-      },
-      toggleDragHandle: () => ({ editor }) => {
-        this.options.locked = !this.options.locked
-        return editor.commands.setMeta('lockDragHandle', this.options.locked)
-      },
+      lockDragHandle:
+        () =>
+        ({ editor }) => {
+          this.options.locked = true
+          return editor.commands.setMeta('lockDragHandle', this.options.locked)
+        },
+      unlockDragHandle:
+        () =>
+        ({ editor }) => {
+          this.options.locked = false
+          return editor.commands.setMeta('lockDragHandle', this.options.locked)
+        },
+      toggleDragHandle:
+        () =>
+        ({ editor }) => {
+          this.options.locked = !this.options.locked
+          return editor.commands.setMeta('lockDragHandle', this.options.locked)
+        },
     }
   },
 
@@ -82,11 +96,11 @@ export const DragHandle = Extension.create<DragHandleOptions>({
 
     return [
       DragHandlePlugin({
-        tippyOptions: this.options.tippyOptions,
+        computePositionConfig: { ...defaultComputePositionConfig, ...this.options.computePositionConfig },
         element,
         editor: this.editor,
         onNodeChange: this.options.onNodeChange,
-      }),
+      }).plugin,
     ]
   },
 })

package/src/helpers/dragHandler.ts

@@ -1,6 +1,6 @@
-import { Editor } from '@tiptap/core'
+import type { Editor } from '@tiptap/core'
 import { getSelectionRanges, NodeRangeSelection } from '@tiptap/extension-node-range'
-import { SelectionRange } from '@tiptap/pm/state'
+import type { SelectionRange } from '@tiptap/pm/state'
 
 import { cloneElement } from './cloneElement.js'
 import { findElementNextToCoords } from './findNextElementFromCursor.js'
@@ -11,7 +11,10 @@ function getDragHandleRanges(event: DragEvent, editor: Editor): SelectionRange[]
   const { doc } = editor.view.state
 
   const result = findElementNextToCoords({
-    editor, x: event.clientX, y: event.clientY, direction: 'right',
+    editor,
+    x: event.clientX,
+    y: event.clientY,
+    direction: 'right',
   })
 
   if (!result.resultNode || result.pos === null) {
@@ -55,14 +58,11 @@ export function dragHandler(event: DragEvent, editor: Editor) {
   const selectionRanges = getSelectionRanges($from, $to, 0)
   const isDragHandleWithinSelection = selectionRanges.some(range => {
     return dragHandleRanges.find(dragHandleRange => {
-      return dragHandleRange.$from === range.$from
-        && dragHandleRange.$to === range.$to
+      return dragHandleRange.$from === range.$from && dragHandleRange.$to === range.$to
     })
   })
 
-  const ranges = empty || !isDragHandleWithinSelection
-    ? dragHandleRanges
-    : selectionRanges
+  const ranges = empty || !isDragHandleWithinSelection ? dragHandleRanges : selectionRanges
 
   if (!ranges.length) {
     return

package/src/helpers/findNextElementFromCursor.ts

@@ -1,5 +1,5 @@
-import { Editor } from '@tiptap/core'
-import { Node } from '@tiptap/pm/model'
+import type { Editor } from '@tiptap/core'
+import type { Node } from '@tiptap/pm/model'
 
 export type FindElementNextToCoords = {
   x: number
@@ -9,9 +9,7 @@ export type FindElementNextToCoords = {
 }
 
 export const findElementNextToCoords = (options: FindElementNextToCoords) => {
-  const {
-    x, y, direction, editor,
-  } = options
+  const { x, y, direction, editor } = options
   let resultElement: HTMLElement | null = null
   let resultNode: Node | null = null
   let pos: number | null = null

package/src/helpers/getInnerCoords.ts

@@ -1,20 +1,16 @@
-import { EditorView } from '@tiptap/pm/view'
+import type { EditorView } from '@tiptap/pm/view'
 
 import { getComputedStyle } from './getComputedStyle.js'
 import { minMax } from './minMax.js'
 
-export function getInnerCoords(view: EditorView, x: number, y: number): { left: number, top: number } {
+export function getInnerCoords(view: EditorView, x: number, y: number): { left: number; top: number } {
   const paddingLeft = parseInt(getComputedStyle(view.dom, 'paddingLeft'), 10)
   const paddingRight = parseInt(getComputedStyle(view.dom, 'paddingRight'), 10)
   const borderLeft = parseInt(getComputedStyle(view.dom, 'borderLeftWidth'), 10)
   const borderRight = parseInt(getComputedStyle(view.dom, 'borderLeftWidth'), 10)
   const bounds = view.dom.getBoundingClientRect()
   const coords = {
-    left: minMax(
-      x,
-      bounds.left + paddingLeft + borderLeft,
-      bounds.right - paddingRight - borderRight,
-    ),
+    left: minMax(x, bounds.left + paddingLeft + borderLeft, bounds.right - paddingRight - borderRight),
     top: y,
   }
 

package/src/helpers/getOuterNode.ts

@@ -1,4 +1,4 @@
-import { Node } from '@tiptap/pm/model'
+import type { Node } from '@tiptap/pm/model'
 
 export const getOuterNodePos = (doc: Node, pos: number): number => {
   const resolvedPos = doc.resolve(pos)

package/dist/drag-handle-plugin.d.ts

@@ -1,20 +0,0 @@
-import { Editor } from '@tiptap/core';
-import { Node } from '@tiptap/pm/model';
-import { Plugin, PluginKey } from '@tiptap/pm/state';
-import { Props as TippyProps } from 'tippy.js';
-export interface DragHandlePluginProps {
-    pluginKey?: PluginKey | string;
-    editor: Editor;
-    element: HTMLElement;
-    onNodeChange?: (data: {
-        editor: Editor;
-        node: Node | null;
-        pos: number;
-    }) => void;
-    tippyOptions?: Partial<TippyProps>;
-}
-export declare const dragHandlePluginDefaultKey: PluginKey<any>;
-export declare const DragHandlePlugin: ({ pluginKey, element, editor, tippyOptions, onNodeChange, }: DragHandlePluginProps) => Plugin<{
-    locked: boolean;
-}>;
-//# sourceMappingURL=drag-handle-plugin.d.ts.map

package/dist/drag-handle-plugin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drag-handle-plugin.d.ts","sourceRoot":"","sources":["../src/drag-handle-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,OAAO,EACQ,MAAM,EAAE,SAAS,EAE/B,MAAM,kBAAkB,CAAA;AAEzB,OAAc,EAAY,KAAK,IAAI,UAAU,EAAE,MAAM,UAAU,CAAA;AA+C/D,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,WAAW,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAClF,YAAY,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;CACpC;AAED,eAAO,MAAM,0BAA0B,gBAA8B,CAAA;AAErE,eAAO,MAAM,gBAAgB,gEAM1B,qBAAqB;;EA0SvB,CAAA"}

package/dist/drag-handle.d.ts

@@ -1,44 +0,0 @@
-import { Editor, Extension } from '@tiptap/core';
-import { Node } from '@tiptap/pm/model';
-import { Props } from 'tippy.js';
-export interface DragHandleOptions {
-    /**
-     * Renders an element that is positioned with tippy.js
-     */
-    render(): HTMLElement;
-    /**
-     * Options for tippy.js
-     */
-    tippyOptions?: Partial<Props>;
-    /**
-     * Locks the draghandle in place and visibility
-     */
-    locked?: boolean;
-    /**
-     * Returns a node or null when a node is hovered over
-     */
-    onNodeChange?: (options: {
-        node: Node | null;
-        editor: Editor;
-    }) => void;
-}
-declare module '@tiptap/core' {
-    interface Commands<ReturnType> {
-        dragHandle: {
-            /**
-             * Locks the draghandle in place and visibility
-             */
-            lockDragHandle: () => ReturnType;
-            /**
-             * Unlocks the draghandle
-             */
-            unlockDragHandle: () => ReturnType;
-            /**
-             * Toggle draghandle lock state
-             */
-            toggleDragHandle: () => ReturnType;
-        };
-    }
-}
-export declare const DragHandle: Extension<DragHandleOptions, any>;
-//# sourceMappingURL=drag-handle.d.ts.map

package/dist/drag-handle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"drag-handle.d.ts","sourceRoot":"","sources":["../src/drag-handle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAIhC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,IAAK,WAAW,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE;QAAE,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACzE;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV;;eAEG;YACH,cAAc,EAAE,MAAM,UAAU,CAAC;YACjC;;eAEG;YACH,gBAAgB,EAAE,MAAM,UAAU,CAAC;YACnC;;eAEG;YACH,gBAAgB,EAAE,MAAM,UAAU,CAAC;SACpC,CAAA;KACF;CACF;AAED,eAAO,MAAM,UAAU,mCA+CrB,CAAA"}

package/dist/helpers/cloneElement.d.ts

@@ -1,2 +0,0 @@
-export declare function cloneElement(node: HTMLElement): HTMLElement;
-//# sourceMappingURL=cloneElement.d.ts.map

package/dist/helpers/cloneElement.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"cloneElement.d.ts","sourceRoot":"","sources":["../../src/helpers/cloneElement.ts"],"names":[],"mappings":"AAWA,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,eAU7C"}

package/dist/helpers/dragHandler.d.ts

@@ -1,3 +0,0 @@
-import { Editor } from '@tiptap/core';
-export declare function dragHandler(event: DragEvent, editor: Editor): void;
-//# sourceMappingURL=dragHandler.d.ts.map

package/dist/helpers/dragHandler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dragHandler.d.ts","sourceRoot":"","sources":["../../src/helpers/dragHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AA2CrC,wBAAgB,WAAW,CAAC,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,QA0D3D"}

package/dist/helpers/findNextElementFromCursor.d.ts

@@ -1,14 +0,0 @@
-import { Editor } from '@tiptap/core';
-import { Node } from '@tiptap/pm/model';
-export type FindElementNextToCoords = {
-    x: number;
-    y: number;
-    direction?: 'left' | 'right';
-    editor: Editor;
-};
-export declare const findElementNextToCoords: (options: FindElementNextToCoords) => {
-    resultElement: HTMLElement | null;
-    resultNode: Node | null;
-    pos: number | null;
-};
-//# sourceMappingURL=findNextElementFromCursor.d.ts.map

package/dist/helpers/findNextElementFromCursor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"findNextElementFromCursor.d.ts","sourceRoot":"","sources":["../../src/helpers/findNextElementFromCursor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAEvC,MAAM,MAAM,uBAAuB,GAAG;IACpC,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,uBAAuB,YAAa,uBAAuB;;;;CA4CvE,CAAA"}

package/dist/helpers/getComputedStyle.d.ts

@@ -1,2 +0,0 @@
-export declare function getComputedStyle(node: Element, property: keyof CSSStyleDeclaration): any;
-//# sourceMappingURL=getComputedStyle.d.ts.map

package/dist/helpers/getComputedStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getComputedStyle.d.ts","sourceRoot":"","sources":["../../src/helpers/getComputedStyle.ts"],"names":[],"mappings":"AAAA,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,GAAG,GAAG,CAIxF"}

package/dist/helpers/getInnerCoords.d.ts

@@ -1,6 +0,0 @@
-import { EditorView } from '@tiptap/pm/view';
-export declare function getInnerCoords(view: EditorView, x: number, y: number): {
-    left: number;
-    top: number;
-};
-//# sourceMappingURL=getInnerCoords.d.ts.map

package/dist/helpers/getInnerCoords.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getInnerCoords.d.ts","sourceRoot":"","sources":["../../src/helpers/getInnerCoords.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAK5C,wBAAgB,cAAc,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAgBpG"}

package/dist/helpers/getOuterNode.d.ts

@@ -1,4 +0,0 @@
-import { Node } from '@tiptap/pm/model';
-export declare const getOuterNodePos: (doc: Node, pos: number) => number;
-export declare const getOuterNode: (doc: Node, pos: number) => Node | null;
-//# sourceMappingURL=getOuterNode.d.ts.map

package/dist/helpers/getOuterNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getOuterNode.d.ts","sourceRoot":"","sources":["../../src/helpers/getOuterNode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAEvC,eAAO,MAAM,eAAe,QAAS,IAAI,OAAO,MAAM,KAAG,MAWxD,CAAA;AAED,eAAO,MAAM,YAAY,QAAS,IAAI,OAAO,MAAM,KAAG,IAAI,GAAG,IAkB5D,CAAA"}

package/dist/helpers/minMax.d.ts

@@ -1,2 +0,0 @@
-export declare function minMax(value?: number, min?: number, max?: number): number;
-//# sourceMappingURL=minMax.d.ts.map

package/dist/helpers/minMax.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"minMax.d.ts","sourceRoot":"","sources":["../../src/helpers/minMax.ts"],"names":[],"mappings":"AAAA,wBAAgB,MAAM,CAAC,KAAK,SAAI,EAAE,GAAG,SAAI,EAAE,GAAG,SAAI,GAAG,MAAM,CAE1D"}

package/dist/helpers/removeNode.d.ts

@@ -1,2 +0,0 @@
-export declare function removeNode(node: HTMLElement): void;
-//# sourceMappingURL=removeNode.d.ts.map

package/dist/helpers/removeNode.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"removeNode.d.ts","sourceRoot":"","sources":["../../src/helpers/removeNode.ts"],"names":[],"mappings":"AAAA,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,QAE3C"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAE7C,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AAEvC,eAAe,UAAU,CAAA"}