@prosekit/extensions 0.11.3 → 0.11.5

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

@@ -0,0 +1,147 @@
+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-indicator.ts

@@ -0,0 +1,37 @@
+import type { PlainExtension } from '@prosekit/core'
+
+import {
+  defineDropIndicatorPayload,
+  type DropIndicatorPayload,
+} from './drop-indicator-facet'
+
+/**
+ * @internal
+ */
+export type DropIndicatorExtension = PlainExtension
+
+/**
+ * Defines an extension that controls the behavior of the drop indicator.
+ *
+ * This extension itself doesn't draw the drop indicator, but it provides the
+ * necessary callbacks to do so. You probably don't want to use this extension
+ * directly, but rather use the `<DropIndicator>` component.
+ *
+ * You can add this extension multiple times. If any extension has `onDrag`
+ * callback defined, and it returns `false`, then the drop point will be
+ * discarded.
+ *
+ * @public
+ */
+export function defineDropIndicator(
+  options?: DropIndicatorOptions,
+): DropIndicatorExtension {
+  return defineDropIndicatorPayload(options ?? {})
+}
+
+/**
+ * Options for {@link defineDropIndicator}.
+ *
+ * @public
+ */
+export interface DropIndicatorOptions extends DropIndicatorPayload {}

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

@@ -0,0 +1,168 @@
+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/index.ts

@@ -0,0 +1,14 @@
+export {
+  defineDropIndicator,
+  type DropIndicatorExtension,
+  type DropIndicatorOptions,
+} from './drop-indicator'
+export type {
+  DragEventHandler,
+  DragEventHandlerOptions,
+  Line,
+  Point,
+  ShowHandler,
+  ShowHandlerOptions,
+  ViewDragging,
+} from './types'

package/src/drop-indicator/types.ts

@@ -0,0 +1,90 @@
+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
+}

package/src/enter-rule/index.ts

@@ -0,0 +1,241 @@
+import {
+  defineFacet,
+  defineFacetPayload,
+  getNodeType,
+  isTextSelection,
+  maybeRun,
+  OBJECT_REPLACEMENT_CHARACTER,
+  pluginFacet,
+  type PlainExtension,
+  type PluginPayload,
+} from '@prosekit/core'
+import { keydownHandler } from '@prosekit/pm/keymap'
+import type {
+  Attrs,
+  NodeType,
+} from '@prosekit/pm/model'
+import {
+  PluginKey,
+  ProseMirrorPlugin,
+  type Command,
+  type EditorState,
+  type Transaction,
+} from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+
+/**
+ * @public
+ *
+ * Options for {@link EnterRuleHandler}.
+ */
+export interface EnterRuleHandlerOptions {
+  /**
+   * The current editor state.
+   */
+  state: EditorState
+
+  /**
+   * The start position of the matched text.
+   */
+  from: number
+
+  /**
+   * The end position of the matched text.
+   */
+  to: number
+
+  /**
+   * The matched result from the regular expression.
+   */
+  match: RegExpExecArray
+}
+
+/**
+ * @public
+ */
+export type EnterRuleHandler = (options: EnterRuleHandlerOptions) => Transaction | null
+
+/**
+ * Options for {@link defineEnterRule}.
+ *
+ * @public
+ */
+export type EnterRuleOptions = {
+  /**
+   * The regular expression to match against. It should end with `$`.
+   */
+  regex: RegExp
+
+  /**
+   * A function to be called when an enter rule is triggered.
+   */
+  handler: EnterRuleHandler
+
+  /**
+   * Whether to stop further handlers from being called if this rule is triggered.
+   *
+   * @default false
+   */
+  stop?: boolean
+}
+
+/**
+ * Options for {@link defineTextBlockEnterRule}.
+ *
+ * @public
+ */
+export interface TextBlockEnterRuleOptions {
+  /**
+   * The regular expression to match against. It should end with `$`.
+   */
+  regex: RegExp
+
+  /**
+   * The node type to replace the matched text with.
+   */
+  type: string | NodeType
+
+  /**
+   * Attributes to set on the node. If a function is provided, it will be called
+   * with the matched result from the regular expression.
+   */
+  attrs?: Attrs | null | ((match: RegExpMatchArray) => Attrs | null)
+
+  /**
+   * Whether to stop further handlers from being called if this rule is triggered.
+   *
+   * @default true
+   */
+  stop?: boolean
+}
+
+/**
+ * Defines an enter rule. An enter rule applies when the text directly in front of
+ * the cursor matches `regex` and user presses Enter. The `regex` should end
+ * with `$`.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineEnterRule({
+  regex,
+  handler,
+  stop = false,
+}: EnterRuleOptions): PlainExtension {
+  const rule: EnterRule = new EnterRule(regex, handler, stop)
+  return defineFacetPayload(enterRule, [rule]) as PlainExtension
+}
+
+/**
+ * Defines an enter rule that replaces the matched text with a block node.
+ *
+ * See also {@link defineEnterRule}.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function defineTextBlockEnterRule({
+  regex,
+  type,
+  attrs,
+  stop = true,
+}: TextBlockEnterRuleOptions): PlainExtension {
+  return defineEnterRule({
+    regex,
+    handler: ({ state, from, to, match }) => {
+      const nodeType = getNodeType(state.schema, type)
+      const $start = state.doc.resolve(from)
+
+      if (
+        !$start
+          .node(-1)
+          .canReplaceWith($start.index(-1), $start.indexAfter(-1), nodeType)
+      ) {
+        return null
+      }
+
+      const nodeAttrs = maybeRun(attrs, match)
+      return state.tr
+        .delete(from, to)
+        .setBlockType(from, from, nodeType, nodeAttrs)
+    },
+    stop,
+  })
+}
+
+/**
+ * @internal
+ */
+class EnterRule {
+  constructor(
+    readonly regex: RegExp,
+    readonly handler: EnterRuleHandler,
+    readonly stop: boolean,
+  ) {}
+}
+
+const enterRule = defineFacet<EnterRule, PluginPayload>({
+  reduce: () => {
+    let rules: EnterRule[] = []
+
+    const command: Command = (state, dispatch, view) => {
+      if (!view) return false
+      return execRules(view, rules, dispatch)
+    }
+    const handler = keydownHandler({ Enter: command })
+    const plugin = new ProseMirrorPlugin({
+      key: new PluginKey('prosekit-enter-rule'),
+      props: { handleKeyDown: handler },
+    })
+
+    return function reducer(inputs) {
+      rules = inputs
+      return plugin
+    }
+  },
+
+  parent: pluginFacet,
+})
+
+function execRules(
+  view: EditorView,
+  rules: readonly EnterRule[],
+  dispatch?: (tr: Transaction) => void,
+): boolean {
+  if (view.composing) return false
+  const state = view.state
+  const selection = state.selection
+  if (!isTextSelection(selection)) return false
+  const $cursor = selection.$cursor
+  if (!$cursor || $cursor.parent.type.spec.code) return false
+
+  const textBefore = $cursor.parent.textBetween(
+    Math.max(0, $cursor.parentOffset - MAX_MATCH),
+    $cursor.parentOffset,
+    null,
+    OBJECT_REPLACEMENT_CHARACTER,
+  )
+
+  for (const rule of rules) {
+    rule.regex.lastIndex = 0
+    const match = rule.regex.exec(textBefore)
+    const tr = match
+      && rule.handler({
+        state,
+        from: $cursor.pos - match[0].length,
+        to: $cursor.pos,
+        match,
+      })
+    if (!tr) continue
+    dispatch?.(tr)
+
+    if (rule.stop) {
+      return true
+    }
+  }
+  return false
+}
+
+const MAX_MATCH = 200