@prosekit/extensions 0.11.5 → 0.11.7

package/src/drop-indicator/drop-indicator-plugin.ts

@@ -1,147 +0,0 @@
-import type { ResolvedPos } from '@prosekit/pm/model'
-import {
-  NodeSelection,
-  Plugin,
-  PluginKey,
-  TextSelection,
-  type PluginView,
-} from '@prosekit/pm/state'
-import type { EditorView } from '@prosekit/pm/view'
-
-import {
-  buildGetTarget,
-  type GetTarget,
-} from './drop-target'
-import type {
-  DragEventHandler,
-  ShowHandler,
-  ViewDragging,
-} from './types'
-
-/**
- * @internal
- */
-interface DropIndicatorPluginOptions {
-  onDrag: DragEventHandler
-  onShow: ShowHandler
-  onHide: VoidFunction
-}
-
-/**
- * @internal
- */
-export function createDropIndicatorPlugin(options: DropIndicatorPluginOptions): Plugin {
-  let getTarget: GetTarget | undefined
-
-  return new Plugin({
-    key: new PluginKey('prosekit-drop-indicator'),
-    view: (view) => {
-      getTarget = buildGetTarget(view, options.onDrag)
-      return createDropIndicatorView(view, getTarget, options)
-    },
-    props: {
-      handleDrop(view, event, slice, move): boolean {
-        if (!getTarget) return false
-
-        const target = getTarget([event.clientX, event.clientY], event)
-
-        if (!target) return false
-
-        event.preventDefault()
-        let insertPos = target[0]
-
-        let tr = view.state.tr
-        if (move) {
-          let { node } = (view.dragging as ViewDragging | null) || {}
-          if (node) node.replace(tr)
-          else tr.deleteSelection()
-        }
-
-        let pos = tr.mapping.map(insertPos)
-        let isNode = slice.openStart == 0 && slice.openEnd == 0 && slice.content.childCount == 1
-        let beforeInsert = tr.doc
-        if (isNode) tr.replaceRangeWith(pos, pos, slice.content.firstChild!)
-        else tr.replaceRange(pos, pos, slice)
-        if (tr.doc.eq(beforeInsert)) {
-          return true
-        }
-
-        let $pos = tr.doc.resolve(pos)
-        if (
-          isNode && NodeSelection.isSelectable(slice.content.firstChild!)
-          && $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild!)
-        ) {
-          tr.setSelection(new NodeSelection($pos))
-        } else {
-          let end = tr.mapping.map(insertPos)
-          tr.mapping.maps[tr.mapping.maps.length - 1].forEach((_from, _to, _newFrom, newTo) => end = newTo)
-          tr.setSelection(selectionBetween(view, $pos, tr.doc.resolve(end)))
-        }
-        view.focus()
-        view.dispatch(tr.setMeta('uiEvent', 'drop'))
-        return true
-      },
-    },
-  })
-}
-
-function selectionBetween(view: EditorView, $anchor: ResolvedPos, $head: ResolvedPos, bias?: number) {
-  return view.someProp('createSelectionBetween', f => f(view, $anchor, $head))
-    || TextSelection.between($anchor, $head, bias)
-}
-
-function createDropIndicatorView(view: EditorView, getTarget: GetTarget, options: DropIndicatorPluginOptions): PluginView {
-  let dom = view.dom
-  let hideId: ReturnType<typeof setTimeout> | undefined
-  let prevX: number | undefined
-  let prevY: number | undefined
-  let hasDragOverEvent: boolean = false
-
-  const scheduleHide = () => {
-    if (hideId) {
-      clearTimeout(hideId)
-    }
-
-    hasDragOverEvent = false
-    hideId = setTimeout(() => {
-      if (hasDragOverEvent) return
-      options.onHide()
-    }, 30)
-  }
-
-  const handleDragOver = (event: DragEvent): void => {
-    hasDragOverEvent = true
-
-    const { clientX, clientY } = event
-    if (prevX === clientX && prevY === clientY) {
-      return
-    }
-    prevX = clientX
-    prevY = clientY
-
-    let target = getTarget([clientX, clientY], event)
-
-    if (!target) {
-      scheduleHide()
-      return
-    } else {
-      const [pos, [x1, y1, x2, y2]] = target
-      const line = { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } }
-      options.onShow({ view, pos, line })
-    }
-  }
-
-  dom.addEventListener('dragover', handleDragOver)
-  dom.addEventListener('dragend', scheduleHide)
-  dom.addEventListener('drop', scheduleHide)
-  dom.addEventListener('dragleave', scheduleHide)
-
-  const destroy = () => {
-    dom.removeEventListener('dragover', handleDragOver)
-    dom.removeEventListener('dragend', scheduleHide)
-    dom.removeEventListener('drop', scheduleHide)
-    dom.removeEventListener('dragleave', scheduleHide)
-  }
-
-  return { destroy }
-}

package/src/drop-indicator/drop-target.ts

@@ -1,168 +0,0 @@
-import { isHTMLElement } from '@ocavue/utils'
-import { isNodeSelection } from '@prosekit/core'
-import type { ProseMirrorNode } from '@prosekit/pm/model'
-import type { EditorView } from '@prosekit/pm/view'
-
-import type { DragEventHandler } from './types'
-
-type Point = readonly [x: number, y: number]
-
-type Line = readonly [x1: number, y1: number, x2: number, y2: number]
-
-/**
- * @internal
- */
-type DropTarget = readonly [pos: number, line: Line]
-
-function getTargetsByView(view: EditorView): DropTarget[] {
-  type StackItem = [pos: number, node: ProseMirrorNode]
-  let stack: StackItem[] = [[-1, view.state.doc]]
-  let targets: DropTarget[] = []
-
-  while (stack.length > 0) {
-    const [pos, node] = stack.pop()!
-    if (pos >= 0) {
-      let dom = view.nodeDOM(pos)
-      if (dom && isHTMLElement(dom)) {
-        let rect = dom.getBoundingClientRect()
-        let { top, bottom, left: x1, right: x2 } = rect
-        targets.push(
-          [pos, [x1, top, x2, top]],
-          [pos + node.nodeSize, [x1, bottom, x2, bottom]],
-        )
-      }
-    }
-    if (node.isBlock && !node.isTextblock) {
-      let childPos = pos + 1
-      for (let child of node.children) {
-        stack.push([childPos, child])
-        childPos += child.nodeSize
-      }
-    }
-  }
-
-  return targets
-}
-
-/**
- * @internal
- */
-export type GetTarget = (point: Point, event: DragEvent) => DropTarget | undefined
-
-/**
- * @internal
- */
-export function buildGetTarget(
-  view: EditorView,
-  onDrag: DragEventHandler,
-): GetTarget {
-  let prevTargets: DropTarget[] = []
-  let prevDoc: ProseMirrorNode | undefined
-  let prevRect: DOMRect | undefined
-
-  const getTargets = (): DropTarget[] => {
-    const rect = view.dom.getBoundingClientRect()
-    const doc = view.state.doc
-
-    if (
-      prevTargets && prevDoc && prevRect
-      && rect.width === prevRect.width
-      && rect.height === prevRect.height
-      && rect.x === prevRect.x
-      && rect.y === prevRect.y
-      && prevDoc.eq(doc)
-    ) {
-      return prevTargets
-    }
-
-    prevRect = rect
-    prevDoc = doc
-    prevTargets = getTargetsByView(view)
-    return prevTargets
-  }
-
-  const getTargetImpl: GetTarget = (point, event) => {
-    if (!view.editable || view.isDestroyed) {
-      return
-    }
-
-    const compare = (p1: DropTarget, p2: DropTarget): number => {
-      const [pos1, line1] = p1
-      const [pos2, line2] = p2
-      const p1Distance = pointLineDistance(point, line1)
-      const p2Distance = pointLineDistance(point, line2)
-
-      return (p1Distance - p2Distance) || (pos1 - pos2)
-    }
-
-    let targets = getTargets()
-    targets.sort(compare)
-
-    // Only consider the first few targets for performance reasons.
-    targets = targets.slice(0, 8)
-
-    // Find the closest valid target.
-    const target = targets.find(target => onDrag({ view, pos: target[0], event }) !== false)
-
-    // If the dragging node is already at the target position, we ignore this
-    // target. Notice that we don't pick the second better target here.
-    if (target && isDraggingToItself(view, target[0])) {
-      return undefined
-    }
-
-    return target
-  }
-
-  let prevPoint: Point | undefined
-  let prevTarget: DropTarget | undefined
-
-  const getTargetCached: GetTarget = (point, event) => {
-    if (prevPoint && pointEqual(prevPoint, point)) {
-      return prevTarget
-    }
-
-    prevPoint = point
-    prevTarget = getTargetImpl(point, event)
-    return prevTarget
-  }
-
-  return getTargetCached
-}
-
-function pointEqual(a: Point, b: Point) {
-  return a[0] === b[0] && a[1] === b[1]
-}
-
-function pointPointDistance(a: Point, b: Point) {
-  // Manhattan distance
-  return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1])
-}
-
-function pointLineDistance(point: Point, line: Line) {
-  // Notice that we are actually not calculating the distance between the point
-  // and the line. Instead, we are calculating the distance between the point
-  // and the two endpoints of the line.
-  return Math.min(
-    pointPointDistance(point, [line[0], line[1]]),
-    pointPointDistance(point, [line[2], line[3]]),
-  )
-}
-
-/**
- * Whether the dragging node is being dragged to the same position. For example,
- * dragging a list node into a new position that is just below the list node, or
- * dragging a nested quoteblock into itself.
- */
-function isDraggingToItself(view: EditorView, pos: number) {
-  const dragging = view.dragging
-  if (!dragging) return
-
-  const { move } = dragging
-  if (!move) return
-
-  const selection = view.state.selection
-  if (!isNodeSelection(selection)) return
-
-  const { from, to } = selection
-  return from <= pos && pos <= to
-}

package/src/drop-indicator/types.ts

@@ -1,90 +0,0 @@
-import type { Slice } from '@prosekit/pm/model'
-import type { NodeSelection } from '@prosekit/pm/state'
-import type { EditorView } from '@prosekit/pm/view'
-
-/**
- * A function that will be called when the `dragover` event is fired. You can
- * return `false` to disable the current drop point and thus hide the drop
- * indicator.
- *
- * @public
- */
-export type DragEventHandler = (options: DragEventHandlerOptions) => boolean
-
-/**
- * Options for {@link DragEventHandler}.
- *
- * @public
- */
-export interface DragEventHandlerOptions {
-  /**
-   * The editor's view.
-   */
-  view: EditorView
-  /**
-   * The drop position in current document.
-   */
-  pos: number
-  /**
-   * The `dragover` event.
-   */
-  event: DragEvent
-}
-
-/**
- * A function that will be called when the drop indicator should be shown.
- *
- * @public
- */
-export type ShowHandler = (options: ShowHandlerOptions) => void
-
-/**
- * Options for {@link ShowHandler}.
- *
- * @public
- */
-export interface ShowHandlerOptions {
-  /**
-   * The editor's view.
-   */
-  view: EditorView
-
-  /**
-   * The ProseMirror position that the drop indicator should be shown at.
-   */
-  pos: number
-
-  /**
-   * The line that the drop indicator should be shown at.
-   */
-  line: Line
-}
-
-/**
- * @internal
- */
-export interface Point {
-  readonly x: number
-  readonly y: number
-}
-
-/**
- * @internal
- */
-export interface Line {
-  readonly p1: Point
-  readonly p2: Point
-}
-
-/**
- * An interface matching the internal ProseMirror implementation.
- *
- * See https://github.com/ProseMirror/prosemirror-view/blob/1.38.1/src/input.ts#L657
- *
- * @internal
- */
-export interface ViewDragging {
-  readonly slice: Slice
-  readonly move: boolean
-  readonly node?: NodeSelection
-}