@prosekit/web 0.7.2 → 0.7.4

package/src/components/block-handle/block-handle-popover/pointer-move.ts

@@ -0,0 +1,243 @@
+import type { VirtualElement } from '@floating-ui/dom'
+import {
+  isElement,
+  isHTMLElement,
+  isTextNode,
+} from '@ocavue/utils'
+import {
+  defineDOMEventHandler,
+  union,
+  type PlainExtension,
+} from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { getClientRect } from '../../../utils/get-client-rect'
+import { throttle } from '../../../utils/throttle'
+import type { HoverState } from '../context'
+
+export type ElementHoverHandler = (
+  reference: VirtualElement | null,
+  hoverState: HoverState | null,
+) => void
+
+export function defineElementHoverHandler(handler: ElementHoverHandler): PlainExtension {
+  const handleElement = (
+    node: ProseMirrorNode,
+    pos: number,
+    element: HTMLElement,
+    parentElement?: Node | null,
+  ) => {
+    const reference: VirtualElement = {
+      contextElement: element,
+
+      getBoundingClientRect: () => {
+        const rect = findFirstLineRect(parentElement, element)
+        return rect ? fulfillRect(rect) : fallbackRect
+      },
+    }
+
+    handler(reference, { node, pos })
+  }
+
+  const handlePointerEvent = (view: EditorView, event: PointerEvent) => {
+    const { x, y } = event
+    const block = findBlockByCoords(view, x, y)
+    if (!block) {
+      handler(null, null)
+      return
+    }
+
+    const { node, pos } = block
+    const element = view.nodeDOM(pos)
+    if (!element || !isHTMLElement(element)) {
+      handler(null, null)
+      return
+    }
+
+    // If `node` is the first child of another non-doc block node, for example a
+    // list node or a blockquote node, we want to put the block handle agains
+    // the parent node.
+    const $pos = view.state.doc.resolve(pos)
+    if ($pos.depth > 0 && $pos.index($pos.depth) === 0) {
+      const parentPos = $pos.before($pos.depth)
+      const parentNode = $pos.parent
+      const parentElement = view.nodeDOM(parentPos)
+      handleElement(parentNode, parentPos, element, parentElement)
+    } else {
+      handleElement(node, pos, element)
+    }
+  }
+
+  return union(
+    defineDOMEventHandler('pointermove', throttle(handlePointerEvent, 200)),
+    defineDOMEventHandler('pointerout', handlePointerEvent),
+    defineDOMEventHandler('keypress', () => handler(null, null)),
+  )
+}
+
+function findBlockByCoords(view: EditorView, x: number, y: number): { node: ProseMirrorNode; pos: number } | undefined {
+  const rect = getClientRect(view.dom)
+  if (!isWithinRect(rect, x, y)) {
+    return
+  }
+
+  let parent: ProseMirrorNode | undefined = view.state.doc
+  let pos = -1
+
+  while (parent) {
+    if (parent.isBlock && (parent.isTextblock || parent.isAtom || parent.type.spec.isolating)) {
+      return { node: parent, pos }
+    }
+
+    // Collect all children and their positions
+    const children: ProseMirrorNode[] = []
+    const positions: number[] = []
+    parent.forEach((child, offset) => {
+      children.push(child)
+      positions.push(offset + pos + 1)
+    })
+
+    let lo = 0
+    let hi = children.length - 1
+
+    while (lo <= hi) {
+      const i = hi - ((hi - lo) >> 1)
+      const childDOM = view.nodeDOM(positions[i])
+      const childRect = getNodeRect(childDOM)
+      if (!childRect) {
+        console.warn(`[prosekit] Unable to get rect at position: ${positions[i]}`)
+        return
+      }
+      if (childRect.top > y) {
+        hi = i - 1
+      } else if (childRect.bottom < y) {
+        lo = i + 1
+      } else {
+        lo = i
+        break
+      }
+    }
+
+    if (lo > hi) {
+      return
+    }
+
+    parent = children[lo]
+    pos = positions[lo]
+  }
+}
+
+function getNodeRect(node: Node | null | undefined): Rect | undefined {
+  if (node && isElement(node) && node.isConnected) {
+    return getClientRect(node)
+  }
+}
+
+function isWithinRect(rect: Rect, x: number, y: number) {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+}
+
+interface Rect {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+function findFirstLineRect(outer?: Node | null, inner?: Node | null): Rect | undefined {
+  if (outer && !outer.isConnected) {
+    return
+  }
+  if (inner && !inner.isConnected) {
+    return
+  }
+
+  if (outer && inner) {
+    const outerRect = findOuterRect(outer)
+    const innerRect = findFirstLineRectInNode(inner)
+    if (outerRect && innerRect) {
+      const { top, bottom } = innerRect
+      const { left, right } = outerRect
+      return { top, bottom, left, right }
+    } else {
+      return outerRect || innerRect
+    }
+  } else if (outer) {
+    return findFirstLineRectInNode(outer)
+  } else if (inner) {
+    return findFirstLineRectInNode(inner)
+  }
+}
+
+function findOuterRect(node: Node): Rect | undefined {
+  if (!isElement(node)) {
+    return
+  }
+
+  const rect = getClientRect(node)
+  const style = node.ownerDocument.defaultView?.getComputedStyle(node)
+  const marginLeft = style && Number.parseInt(style.marginLeft, 10) || 0
+  const marginRight = style && Number.parseInt(style.marginRight, 10) || 0
+  const left = rect.left - marginLeft
+  const right = rect.right + marginRight
+
+  return { top: rect.top, bottom: rect.bottom, left, right }
+}
+
+function findFirstLineRectInNode(node: Node): Rect | undefined {
+  if (isElement(node)) {
+    return findFirstLineRectInElement(node)
+  } else if (isTextNode(node)) {
+    return findFirstLineRectInTextNode(node)
+  }
+}
+
+function findFirstLineRectInTextNode(node: Text): Rect | undefined {
+  const ownerDocument = node.ownerDocument
+  if (!ownerDocument) {
+    return
+  }
+  const range = ownerDocument.createRange()
+  range.setStart(node, 0)
+  range.setEnd(node, 0)
+  const rects = range.getClientRects()
+  return rects[0]
+}
+
+function findFirstLineRectInElement(element: Element): Rect | undefined {
+  if (element.nodeName === 'BR') {
+    return element.getBoundingClientRect()
+  }
+
+  const rect = getClientRect(element)
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element)
+  const marginLeft = style && Number.parseInt(style.marginLeft, 10) || 0
+  const marginRight = style && Number.parseInt(style.marginRight, 10) || 0
+  const left = rect.left - marginLeft
+  const right = rect.right + marginRight
+
+  const lineHeight = style && Number.parseInt(style.lineHeight, 10) || 24
+  const paddingTop = style && Number.parseInt(style.paddingTop, 10) || 0
+  const borderTop = style && Number.parseInt(style.borderTopWidth, 10) || 0
+  const top = rect.top + paddingTop + borderTop
+  const bottom = top + lineHeight
+
+  return { top, bottom, left, right }
+}
+
+function fulfillRect({ top, right, bottom, left }: Rect) {
+  return { top, right, bottom, left, width: right - left, height: bottom - top, x: left, y: top }
+}
+
+// A fallback rect that is far away from the screen. It should not be used through.
+const fallbackRect = Object.freeze({
+  top: -9999,
+  right: -9999,
+  bottom: -9999,
+  left: -9999,
+  width: 0,
+  height: 0,
+  x: -9999,
+  y: -9999,
+})

package/src/components/block-handle/block-handle-popover/setup.ts

@@ -0,0 +1,88 @@
+import {
+  createComputed,
+  createSignal,
+  useAttribute,
+  type ConnectableElement,
+  type ReadonlySignal,
+  type SetupOptions,
+} from '@aria-ui/core'
+import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
+import { usePresence } from '@aria-ui/presence'
+import type { VirtualElement } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+
+import { useEditorExtension } from '../../../hooks/use-editor-extension'
+import { useScrolling } from '../../../hooks/use-scrolling'
+import {
+  blockPopoverContext,
+  draggingContext,
+  type BlockPopoverContext,
+  type HoverState,
+} from '../context'
+
+import {
+  defineElementHoverHandler,
+  type ElementHoverHandler,
+} from './pointer-move'
+import type {
+  BlockHandlePopoverEvents,
+  BlockHandlePopoverProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useBlockHandlePopover(
+  host: ConnectableElement,
+  { state, emit }: SetupOptions<BlockHandlePopoverProps, BlockHandlePopoverEvents>,
+): void {
+  const { editor, ...overlayState } = state
+  const reference = createSignal<VirtualElement | null>(null)
+  useOverlayPositionerState(host, overlayState, { reference })
+
+  const context = createSignal<BlockPopoverContext>(null)
+  blockPopoverContext.provide(host, context)
+
+  const dragging = createSignal(false)
+  draggingContext.provide(host, dragging)
+
+  const scrolling = useScrolling(host)
+  const open = createComputed(() => {
+    return !!context.get() && !scrolling.get()
+  })
+
+  useHoverExtension(host, editor, (referenceValue, hoverState) => {
+    reference.set(referenceValue)
+    context.set(hoverState)
+    const stateChangeDetails = hoverState ? { node: hoverState.node, pos: hoverState.pos } : null
+    emit('stateChange', stateChangeDetails)
+  })
+
+  useAttribute(host, 'data-state', () => (open.get() ? 'open' : 'closed'))
+  usePresence(host, open)
+}
+
+function useHoverExtension(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  handler: ElementHoverHandler,
+) {
+  let prevHoverState: HoverState | null = null
+
+  const extension = defineElementHoverHandler((reference, hoverState) => {
+    if (isHoverStateEqual(prevHoverState, hoverState)) {
+      return
+    }
+
+    prevHoverState = hoverState
+    handler(reference, hoverState)
+  })
+
+  useEditorExtension(host, editor, extension)
+}
+
+function isHoverStateEqual(a: HoverState | null, b: HoverState | null) {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  return a.pos === b.pos && a.node.eq(b.node)
+}

package/src/components/block-handle/block-handle-popover/types.ts

@@ -0,0 +1,84 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  overlayPositionerEvents,
+  overlayPositionerProps,
+  type OverlayPositionerEvents,
+  type OverlayPositionerProps,
+} from '@aria-ui/overlay/elements'
+import type { Placement } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+export interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+
+  /**
+   * The placement of the popover, relative to the hovered block.
+   *
+   * @default "left"
+   */
+  placement: Placement
+
+  /**
+   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * to place the floating element on top of other page content.
+   *
+   * @default false
+   */
+  hoist: boolean
+
+  /**
+   * @default false
+   * @hidden
+   */
+  flip: boolean
+
+  /**
+   * @default false
+   * @hidden
+   */
+  shift: boolean
+
+  /**
+   * @default true
+   * @hidden
+   */
+  hide: boolean
+}
+
+/** @internal */
+export const blockHandlePopoverProps: PropDeclarations<BlockHandlePopoverProps> = {
+  ...overlayPositionerProps,
+  editor: { default: null },
+  placement: { default: 'left' },
+
+  // Enabling `hoist` will cause the popover to have a small delay when
+  // scrolling the page.
+  hoist: { default: false },
+
+  flip: { default: false },
+  shift: { default: false },
+  hide: { default: true },
+}
+
+export interface BlockHandlePopoverEvents extends OverlayPositionerEvents {
+  /**
+   * Fired when the hovered block changes.
+   */
+  stateChange: CustomEvent<{ node: ProseMirrorNode; pos: number } | null>
+}
+
+/** @internal */
+export const blockHandlePopoverEvents: EventDeclarations<BlockHandlePopoverEvents> = {
+  ...overlayPositionerEvents,
+  stateChange: {},
+}

package/src/components/block-handle/context.ts

@@ -0,0 +1,34 @@
+import {
+  createContext,
+  type Context,
+} from '@aria-ui/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export interface HoverState {
+  node: ProseMirrorNode
+  pos: number
+}
+
+/**
+ * @internal
+ */
+export type BlockPopoverContext = HoverState | null
+
+/**
+ * @internal
+ */
+export const blockPopoverContext: Context<BlockPopoverContext> = createContext(
+  'prosekit-block-popover-context',
+  null,
+)
+
+/**
+ * @internal
+ */
+export const draggingContext: Context<boolean> = createContext(
+  'prosekit-block-handle-dragging-context',
+  false,
+)

package/src/components/block-handle/index.gen.ts

@@ -0,0 +1,13 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { BlockHandleAddElement } from './block-handle-add/element.gen'
+export { blockHandleAddEvents, blockHandleAddProps, type BlockHandleAddEvents, type BlockHandleAddProps } from './block-handle-add/types'
+export { useBlockHandleAdd } from './block-handle-add/setup'
+
+export { BlockHandleDraggableElement } from './block-handle-draggable/element.gen'
+export { blockHandleDraggableEvents, blockHandleDraggableProps, type BlockHandleDraggableEvents, type BlockHandleDraggableProps } from './block-handle-draggable/types'
+export { useBlockHandleDraggable } from './block-handle-draggable/setup'
+
+export { BlockHandlePopoverElement } from './block-handle-popover/element.gen'
+export { blockHandlePopoverEvents, blockHandlePopoverProps, type BlockHandlePopoverEvents, type BlockHandlePopoverProps } from './block-handle-popover/types'
+export { useBlockHandlePopover } from './block-handle-popover/setup'

package/src/components/drop-indicator/drop-indicator/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useDropIndicator } from "./setup"
+import { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from "./types"
+
+const DropIndicatorElementBase: BaseElementConstructor<DropIndicatorProps> = defineCustomElement<
+  DropIndicatorProps,
+  DropIndicatorEvents
+>({
+  props: dropIndicatorProps,
+  events: dropIndicatorEvents,
+  setup: useDropIndicator,
+})
+class DropIndicatorElement extends DropIndicatorElementBase {}
+
+registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)
+  
+export { DropIndicatorElement }

package/src/components/drop-indicator/drop-indicator/setup.ts

@@ -0,0 +1,87 @@
+import {
+  createComputed,
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+  type SetupOptions,
+} from '@aria-ui/core'
+import { usePresence } from '@aria-ui/presence'
+import {
+  defineDropIndicator,
+  type ShowHandlerOptions,
+} from '@prosekit/extensions/drop-indicator'
+
+import { useEditorExtension } from '../../../hooks/use-editor-extension'
+import { useScrolling } from '../../../hooks/use-scrolling'
+import { assignStyles } from '../../../utils/assign-styles'
+
+import type {
+  DropIndicatorEvents,
+  DropIndicatorProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useDropIndicator(
+  host: ConnectableElement,
+  { state }: SetupOptions<DropIndicatorProps, DropIndicatorEvents>,
+): void {
+  type DropIndicatorContext = ShowHandlerOptions | null
+  const context = createSignal<DropIndicatorContext>(null)
+
+  const extension = defineDropIndicator({
+    onShow: (options) => context.set(options),
+    onHide: () => context.set(null),
+  })
+
+  useEditorExtension(host, state.editor, extension)
+
+  const line = createComputed(() => context.get()?.line)
+  const scrolling = useScrolling(host)
+  const presence = createComputed(() => {
+    return !!context.get() && !scrolling.get()
+  })
+  usePresence(host, presence)
+
+  useEffect(
+    host,
+    () => {
+      const lineValue = line.get()
+      const lineWidth = state.width.get()
+
+      if (!lineValue) return
+
+      const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue
+      const horizontal = y1 === y2
+
+      let width: number
+      let height: number
+      let top: number = y1
+      let left: number = x1
+
+      if (horizontal) {
+        width = x2 - x1
+        height = lineWidth
+        top -= lineWidth / 2
+      } else {
+        width = lineWidth
+        height = y2 - y1
+        left -= lineWidth / 2
+      }
+
+      top = Math.round(top)
+      left = Math.round(left)
+
+      assignStyles(host, {
+        position: 'fixed',
+        pointerEvents: 'none',
+        width: `${width}px`,
+        height: `${height}px`,
+        transform: `translate(${left}px, ${top}px)`,
+        left: '0px',
+        top: '0px',
+      })
+    },
+  )
+}

package/src/components/drop-indicator/drop-indicator/types.ts

@@ -0,0 +1,34 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+
+export interface DropIndicatorProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+
+  /**
+   * The line width in pixels.
+   *
+   * @default 2
+   */
+  width: number
+}
+
+/** @internal */
+export const dropIndicatorProps: PropDeclarations<DropIndicatorProps> = Object.freeze({
+  editor: { default: null },
+  width: { default: 2 },
+})
+
+export interface DropIndicatorEvents {
+}
+
+/** @internal */
+export const dropIndicatorEvents: EventDeclarations<DropIndicatorEvents> = {}

package/src/components/drop-indicator/index.gen.ts

@@ -0,0 +1,5 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { DropIndicatorElement } from './drop-indicator/element.gen'
+export { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from './drop-indicator/types'
+export { useDropIndicator } from './drop-indicator/setup'

package/src/components/inline-popover/index.gen.ts

@@ -0,0 +1,5 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { InlinePopoverElement } from './inline-popover/element.gen'
+export { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from './inline-popover/types'
+export { useInlinePopover } from './inline-popover/setup'

package/src/components/inline-popover/inline-popover/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useInlinePopover } from "./setup"
+import { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from "./types"
+
+const InlinePopoverElementBase: BaseElementConstructor<InlinePopoverProps> = defineCustomElement<
+  InlinePopoverProps,
+  InlinePopoverEvents
+>({
+  props: inlinePopoverProps,
+  events: inlinePopoverEvents,
+  setup: useInlinePopover,
+})
+class InlinePopoverElement extends InlinePopoverElementBase {}
+
+registerCustomElement('prosekit-inline-popover', InlinePopoverElement)
+  
+export { InlinePopoverElement }