@tiptap/extension-drag-handle 3.23.5 → 3.24.0

package/src/helpers/cloneElement.ts

@@ -1,7 +1,15 @@
-function getCSSText(element: Element) {
-  let value = ''
+function getCSSText(element: Element, properties?: string[]) {
   const style = getComputedStyle(element)
 
+  if (properties) {
+    return properties
+      .filter(p => p.trim().length > 0)
+      .map(p => `${p}:${style.getPropertyValue(p)};`)
+      .join('')
+  }
+
+  let value = ''
+
   for (let i = 0; i < style.length; i += 1) {
     value += `${style[i]}:${style.getPropertyValue(style[i])};`
   }
@@ -9,13 +17,16 @@ function getCSSText(element: Element) {
   return value
 }
 
-export function cloneElement(node: HTMLElement) {
+export function cloneElement(node: HTMLElement, properties?: string[]) {
   const clonedNode = node.cloneNode(true) as HTMLElement
   const sourceElements = [node, ...Array.from(node.getElementsByTagName('*'))] as HTMLElement[]
-  const targetElements = [clonedNode, ...Array.from(clonedNode.getElementsByTagName('*'))] as HTMLElement[]
+  const targetElements = [
+    clonedNode,
+    ...Array.from(clonedNode.getElementsByTagName('*')),
+  ] as HTMLElement[]
 
   sourceElements.forEach((sourceElement, index) => {
-    targetElements[index].style.cssText = getCSSText(sourceElement)
+    targetElements[index].style.cssText = getCSSText(sourceElement, properties)
   })
 
   return clonedNode

package/src/helpers/dragHandler.ts

@@ -68,6 +68,7 @@ export function dragHandler(
   editor: Editor,
   nestedOptions?: NormalizedNestedOptions,
   dragContext?: DragContext,
+  dragImageProperties?: string[],
 ) {
   const { view } = editor
 
@@ -126,7 +127,7 @@ export function dragHandler(
       return
     }
 
-    const clonedElement = cloneElement(element)
+    const clonedElement = cloneElement(element, dragImageProperties)
 
     clonedElement.style.margin = '0'
 

package/src/helpers/findNextElementFromCursor.ts

@@ -16,7 +16,10 @@ export type FindElementNextToCoords = {
 /**
  * Finds the draggable block element that is a direct child of view.dom
  */
-export function findClosestTopLevelBlock(element: Element, view: EditorView): HTMLElement | undefined {
+export function findClosestTopLevelBlock(
+  element: Element,
+  view: EditorView,
+): HTMLElement | undefined {
   let current: Element | null = element
 
   while (current?.parentElement && current.parentElement !== view.dom) {
@@ -43,7 +46,12 @@ function isValidRect(rect: DOMRect): boolean {
 /**
  * Clamps coordinates to content bounds with O(1) layout reads
  */
-function clampToContent(view: EditorView, x: number, y: number, inset = 5): { x: number; y: number } | null {
+function clampToContent(
+  view: EditorView,
+  x: number,
+  y: number,
+  inset = 5,
+): { x: number; y: number } | null {
   // Validate input coordinates are finite numbers
   if (!Number.isFinite(x) || !Number.isFinite(y)) {
     return null

package/src/helpers/getDraggedBlockDir.ts

@@ -38,7 +38,9 @@ export function getDraggedBlockElement(view: EditorView, pos: number): Element |
 export function getDraggedBlockDir(view: EditorView, pos: number): string {
   const draggedDom = getDraggedBlockElement(view, pos)
 
-  const contentDir = draggedDom ? getComputedStyle(draggedDom).direction : getComputedStyle(view.dom).direction
+  const contentDir = draggedDom
+    ? getComputedStyle(draggedDom).direction
+    : getComputedStyle(view.dom).direction
 
   return contentDir || 'ltr'
 }

package/src/helpers/getInnerCoords.ts

@@ -3,14 +3,22 @@ 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/normalizeOptions.ts

@@ -17,7 +17,9 @@ import { normalizeEdgeDetection } from './edgeDetection.js'
  * normalizeNestedOptions({ rules: [myRule], edgeDetection: 'none' })
  * // Returns: { enabled: true, rules: [myRule], edgeDetection: { edges: [], ... } }
  */
-export function normalizeNestedOptions(input: boolean | NestedOptions | undefined): NormalizedNestedOptions {
+export function normalizeNestedOptions(
+  input: boolean | NestedOptions | undefined,
+): NormalizedNestedOptions {
   if (input === false || input === undefined) {
     return {
       enabled: false,