@blockslides/extension-drag-handle 0.1.0

package/src/helpers/dragHandler.ts

@@ -0,0 +1,102 @@
+import type { Editor } from '@blockslides/core'
+import { getSelectionRanges, NodeRangeSelection } from '@blockslides/extension-node-range'
+import type { SelectionRange } from '@blockslides/pm/state'
+
+import { cloneElement } from './cloneElement.js'
+import { findElementNextToCoords } from './findNextElementFromCursor.js'
+import { getInnerCoords } from './getInnerCoords.js'
+import { removeNode } from './removeNode.js'
+
+function getDragHandleRanges(event: DragEvent, editor: Editor): SelectionRange[] {
+  const { doc } = editor.view.state
+
+  const result = findElementNextToCoords({
+    editor,
+    x: event.clientX,
+    y: event.clientY,
+    direction: 'right',
+  })
+
+  if (!result.resultNode || result.pos === null) {
+    return []
+  }
+
+  const x = event.clientX
+
+  // @ts-ignore
+  const coords = getInnerCoords(editor.view, x, event.clientY)
+  const posAtCoords = editor.view.posAtCoords(coords)
+
+  if (!posAtCoords) {
+    return []
+  }
+
+  const { pos } = posAtCoords
+  const nodeAt = doc.resolve(pos).parent
+
+  if (!nodeAt) {
+    return []
+  }
+
+  const $from = doc.resolve(result.pos)
+  const $to = doc.resolve(result.pos + 1)
+
+  return getSelectionRanges($from, $to, 0)
+}
+
+export function dragHandler(event: DragEvent, editor: Editor) {
+  const { view } = editor
+
+  if (!event.dataTransfer) {
+    return
+  }
+
+  const { empty, $from, $to } = view.state.selection
+
+  const dragHandleRanges = getDragHandleRanges(event, 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
+    })
+  })
+
+  const ranges = empty || !isDragHandleWithinSelection ? dragHandleRanges : selectionRanges
+
+  if (!ranges.length) {
+    return
+  }
+
+  const { tr } = view.state
+  const wrapper = document.createElement('div')
+  const from = ranges[0].$from.pos
+  const to = ranges[ranges.length - 1].$to.pos
+
+  const selection = NodeRangeSelection.create(view.state.doc, from, to)
+  const slice = selection.content()
+
+  ranges.forEach(range => {
+    const element = view.nodeDOM(range.$from.pos) as HTMLElement
+    const clonedElement = cloneElement(element)
+
+    wrapper.append(clonedElement)
+  })
+
+  wrapper.style.position = 'absolute'
+  wrapper.style.top = '-10000px'
+  document.body.append(wrapper)
+
+  event.dataTransfer.clearData()
+  event.dataTransfer.setDragImage(wrapper, 0, 0)
+
+  // tell ProseMirror the dragged content
+  view.dragging = { slice, move: true }
+
+  tr.setSelection(selection)
+
+  view.dispatch(tr)
+
+  // clean up
+  document.addEventListener('drop', () => removeNode(wrapper), { once: true })
+}

package/src/helpers/findNextElementFromCursor.ts

@@ -0,0 +1,123 @@
+import type { Editor } from '@blockslides/core'
+import type { Node } from '@blockslides/pm/model'
+import type { EditorView } from '@blockslides/pm/view'
+
+export type FindElementNextToCoords = {
+  x: number
+  y: number
+  direction?: 'left' | 'right'
+  editor: Editor
+}
+
+/**
+ * Finds the draggable block element that is a direct child of view.dom
+ */
+export function findClosestTopLevelBlock(element: Element, view: EditorView): HTMLElement | undefined {
+  let current: Element | null = element
+
+  while (current?.parentElement && current.parentElement !== view.dom) {
+    current = current.parentElement
+  }
+
+  return current?.parentElement === view.dom ? (current as HTMLElement) : undefined
+}
+
+/**
+ * Clamps coordinates to content bounds with O(1) layout reads
+ */
+function clampToContent(view: EditorView, x: number, y: number, inset = 5): { x: number; y: number } {
+  const container = view.dom
+  const firstBlock = container.firstElementChild
+  const lastBlock = container.lastElementChild
+
+  if (!firstBlock || !lastBlock) {
+    // this condition will never be met, as the first child element will be treated as last child element too
+    return { x, y }
+  }
+
+  // Clamp Y between first and last block
+  const topRect = firstBlock.getBoundingClientRect()
+  const botRect = lastBlock.getBoundingClientRect()
+  const clampedY = Math.min(Math.max(topRect.top + inset, y), botRect.bottom - inset)
+
+  const epsilon = 0.5
+  const sameLeft = Math.abs(topRect.left - botRect.left) < epsilon
+  const sameRight = Math.abs(topRect.right - botRect.right) < epsilon
+
+  let rowRect: DOMRect = topRect
+
+  if (sameLeft && sameRight) {
+    // Most of the time, every block has the same width
+    rowRect = topRect
+  } else {
+    // TODO
+    // find the actual block at the clamped Y
+    // This case is rare, avoid for now
+  }
+
+  // Clamp X to the chosen block’s bounds
+  const clampedX = Math.min(Math.max(rowRect.left + inset, x), rowRect.right - inset)
+
+  return { x: clampedX, y: clampedY }
+}
+
+export const findElementNextToCoords = (
+  options: FindElementNextToCoords,
+): {
+  resultElement: HTMLElement | null
+  resultNode: Node | null
+  pos: number | null
+} => {
+  const { x, y, editor } = options
+  const { view, state } = editor
+
+  const { x: clampedX, y: clampedY } = clampToContent(view, x, y, 5)
+
+  const elements = view.root.elementsFromPoint(clampedX, clampedY)
+
+  let block: HTMLElement | undefined
+
+  Array.prototype.some.call(elements, (el: Element) => {
+    if (!view.dom.contains(el)) {
+      return false
+    }
+    const candidate = findClosestTopLevelBlock(el, view)
+    if (candidate) {
+      block = candidate
+      return true
+    }
+    return false
+  })
+
+  if (!block) {
+    return { resultElement: null, resultNode: null, pos: null }
+  }
+
+  let pos: number
+  try {
+    pos = view.posAtDOM(block, 0)
+  } catch {
+    return { resultElement: null, resultNode: null, pos: null }
+  }
+
+  const node = state.doc.nodeAt(pos)
+
+  if (!node) {
+    // This case occurs when an atom node is allowed to contain inline content.
+    // We need to resolve the position here to ensure we target the correct parent node.
+    const resolvedPos = state.doc.resolve(pos)
+    const parent = resolvedPos.parent
+
+    return {
+      resultElement: block,
+      resultNode: parent,
+      pos: resolvedPos.start(),
+    }
+  }
+
+  return {
+    resultElement: block,
+    resultNode: node,
+    pos,
+  }
+}

package/src/helpers/getComputedStyle.ts

@@ -0,0 +1,5 @@
+export function getComputedStyle(node: Element, property: keyof CSSStyleDeclaration): any {
+  const style = window.getComputedStyle(node)
+
+  return style[property]
+}

package/src/helpers/getInnerCoords.ts

@@ -0,0 +1,18 @@
+import type { EditorView } from '@blockslides/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 } {
+  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),
+    top: y,
+  }
+
+  return coords
+}

package/src/helpers/getOuterNode.ts

@@ -0,0 +1,34 @@
+import type { Node } from '@blockslides/pm/model'
+
+export const getOuterNodePos = (doc: Node, pos: number): number => {
+  const resolvedPos = doc.resolve(pos)
+  const { depth } = resolvedPos
+
+  if (depth === 0) {
+    return pos
+  }
+
+  const a = resolvedPos.pos - resolvedPos.parentOffset
+
+  return a - 1
+}
+
+export const getOuterNode = (doc: Node, pos: number): Node | null => {
+  const node = doc.nodeAt(pos)
+  const resolvedPos = doc.resolve(pos)
+
+  let { depth } = resolvedPos
+  let parent = node
+
+  while (depth > 0) {
+    const currentNode = resolvedPos.node(depth)
+
+    depth -= 1
+
+    if (depth === 0) {
+      parent = currentNode
+    }
+  }
+
+  return parent
+}

package/src/helpers/minMax.ts

@@ -0,0 +1,3 @@
+export function minMax(value = 0, min = 0, max = 0): number {
+  return Math.min(Math.max(value, min), max)
+}

package/src/helpers/removeNode.ts

@@ -0,0 +1,3 @@
+export function removeNode(node: HTMLElement) {
+  node.parentNode?.removeChild(node)
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import { DragHandle } from './drag-handle.js'
+
+export * from './drag-handle.js'
+export * from './drag-handle-plugin.js'
+
+export default DragHandle