@prosekit/web 0.7.13 → 0.8.0-beta.1

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

@@ -0,0 +1,89 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { OverlayPositionerPropsDeclaration, setupOverlayPositioner, type OverlayPositionerProps } from '@aria-ui/elements/overlay'
+import type { Placement } from '@floating-ui/dom'
+
+import { blockHandleOverlayStoreContext } from './context.ts'
+
+/**
+ * @public
+ */
+export interface BlockHandlePositionerProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
+  /**
+   * 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 BlockHandlePositionerPropsDeclaration: PropsDeclaration<BlockHandlePositionerProps> = /* @__PURE__ */ defineProps<
+  BlockHandlePositionerProps
+>({
+  ...OverlayPositionerPropsDeclaration,
+  placement: { default: 'left', attribute: 'placement', type: 'string' },
+  // Enabling `hoist` will cause the popover to have a small delay when
+  // scrolling the page.
+  hoist: { default: false, attribute: 'hoist', type: 'boolean' },
+  flip: { default: false, attribute: false, type: 'json' },
+  shift: { default: false, attribute: 'shift', type: 'boolean' },
+  hide: { default: true, attribute: 'hide', type: 'boolean' },
+})
+
+/** @internal */
+export function setupBlockHandlePositioner(
+  host: HostElement,
+  props: State<BlockHandlePositionerProps>,
+): void {
+  const getOverlayStore = blockHandleOverlayStoreContext.consume(host)
+  setupOverlayPositioner(host, props as unknown as State<OverlayPositionerProps>, getOverlayStore)
+}
+
+const BlockHandlePositionerElementBase: HostElementConstructor<BlockHandlePositionerProps> = defineCustomElement(
+  setupBlockHandlePositioner,
+  BlockHandlePositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandlePositionerElement extends BlockHandlePositionerElementBase {}
+
+/** @internal */
+export function registerBlockHandlePositionerElement(): void {
+  registerCustomElement('prosekit-block-handle-positioner', BlockHandlePositionerElement)
+}

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

@@ -0,0 +1,116 @@
+import {
+  computed,
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { createOverlayStore } from '@aria-ui/elements/overlay'
+import type { VirtualElement } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+import { useScrolling } from '../../hooks/use-scrolling.ts'
+
+import { blockHandleOverlayStoreContext, BlockHandleStore, blockHandleStoreContext } from './context.ts'
+import { useHoverExtension } from './use-hover-extension.ts'
+
+export interface BlockHandleRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const BlockHandleRootPropsDeclaration: PropsDeclaration<BlockHandleRootProps> = /* @__PURE__ */ defineProps<
+  BlockHandleRootProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/**
+ * @public
+ */
+export class BlockHandleStateChangeEvent extends Event {
+  /**
+   * The currently hovered block's node and position, or `null` if no block is hovered.
+   */
+  detail: { node: ProseMirrorNode; pos: number } | null
+  constructor(state: { node: ProseMirrorNode; pos: number } | null) {
+    super('stateChange', { bubbles: true })
+    this.detail = state
+  }
+}
+
+/**
+ * @public
+ */
+export interface BlockHandleRootEvents {
+  /**
+   * Fired when the hovered block changes.
+   */
+  stateChange: BlockHandleStateChangeEvent
+}
+
+/**
+ * @internal
+ */
+export function setupBlockHandleRoot(
+  host: HostElement,
+  props: State<BlockHandleRootProps>,
+): void {
+  const getEditor = props.editor.get
+
+  const store = new BlockHandleStore()
+  blockHandleStoreContext.provide(host, store)
+
+  const reference = createSignal<VirtualElement | undefined>(undefined)
+  const getScrolling = useScrolling(host)
+
+  const getOpen = computed(() => !!store.hoverState.get() && !getScrolling())
+
+  const overlayStore = createOverlayStore(
+    getOpen,
+    () => {},
+    () => true,
+    () => false,
+    (event) => host.dispatchEvent(event),
+  )
+
+  useHoverExtension(host, getEditor, (ref, hoverState) => {
+    reference.set(ref ?? undefined)
+    store.hoverState.set(hoverState)
+    const state = hoverState ? { node: hoverState.node, pos: hoverState.pos } : null
+    host.dispatchEvent(new BlockHandleStateChangeEvent(state))
+  })
+
+  useEffect(host, () => {
+    overlayStore.setAnchorElement(reference.get())
+  })
+
+  blockHandleOverlayStoreContext.provide(host, overlayStore)
+}
+
+const BlockHandleRootElementBase: HostElementConstructor<BlockHandleRootProps> = defineCustomElement(
+  setupBlockHandleRoot,
+  BlockHandleRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandleRootElement extends BlockHandleRootElementBase {}
+
+/** @internal */
+export function registerBlockHandleRootElement(): void {
+  registerCustomElement('prosekit-block-handle-root', BlockHandleRootElement)
+}

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

@@ -1,31 +1,22 @@
-import { createContext, type Context } from '@aria-ui/core'
-import type { ProseMirrorNode } from '@prosekit/pm/model'
+import { createContext, createSignal, type Context, type Signal } from '@aria-ui/core'
+import type { OverlayStore } from '@aria-ui/elements/overlay'
 
-/**
- * @internal
- */
-export interface HoverState {
-  node: ProseMirrorNode
-  pos: number
-}
+import type { HoverState } from './hover-state.ts'
 
 /**
  * @internal
  */
-export type BlockPopoverContext = HoverState | null
+export class BlockHandleStore {
+  readonly hoverState: Signal<HoverState | undefined> = createSignal<HoverState | undefined>(undefined)
+  readonly dragging: Signal<boolean> = createSignal(false)
+}
 
 /**
  * @internal
  */
-export const blockPopoverContext: Context<BlockPopoverContext> = createContext(
-  'prosekit-block-popover-context',
-  null,
-)
+export const blockHandleStoreContext: Context<BlockHandleStore> = createContext<BlockHandleStore>('prosekit-block-handle-store')
 
 /**
  * @internal
  */
-export const draggingContext: Context<boolean> = createContext(
-  'prosekit-block-handle-dragging-context',
-  false,
-)
+export const blockHandleOverlayStoreContext: Context<OverlayStore> = createContext<OverlayStore>('prosekit-block-handle-overlay-store')

package/src/components/block-handle/hover-state.ts

@@ -0,0 +1,16 @@
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export interface HoverState {
+  node: ProseMirrorNode
+  pos: number
+}
+
+/**
+ * @internal
+ */
+export function isHoverStateEqual(a: HoverState, b: HoverState): boolean {
+  return a.pos === b.pos && a.node.eq(b.node)
+}

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

@@ -0,0 +1,59 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-block-handle-root>
+  <prosekit-block-handle-positioner>
+    <prosekit-block-handle-popup>
+      <prosekit-block-handle-add>...</prosekit-block-handle-add>
+      <prosekit-block-handle-draggable>...</prosekit-block-handle-draggable>
+    </prosekit-block-handle-popup>
+  </prosekit-block-handle-positioner>
+</prosekit-block-handle-root>
+```
+*/
+
+export {
+  BlockHandleAddElement,
+  BlockHandleAddPropsDeclaration,
+  registerBlockHandleAddElement,
+  setupBlockHandleAdd,
+  type BlockHandleAddProps,
+} from './block-handle-add.ts'
+
+export {
+  BlockHandleDraggableElement,
+  BlockHandleDraggablePropsDeclaration,
+  registerBlockHandleDraggableElement,
+  setupBlockHandleDraggable,
+  type BlockHandleDraggableProps,
+} from './block-handle-draggable.ts'
+
+export {
+  BlockHandlePopupElement,
+  BlockHandlePopupPropsDeclaration,
+  registerBlockHandlePopupElement,
+  setupBlockHandlePopup,
+  type BlockHandlePopupProps,
+} from './block-handle-popup.ts'
+
+export {
+  BlockHandlePositionerElement,
+  BlockHandlePositionerPropsDeclaration,
+  registerBlockHandlePositionerElement,
+  setupBlockHandlePositioner,
+  type BlockHandlePositionerProps,
+} from './block-handle-positioner.ts'
+
+export {
+  BlockHandleRootElement,
+  BlockHandleRootPropsDeclaration,
+  BlockHandleStateChangeEvent,
+  registerBlockHandleRootElement,
+  setupBlockHandleRoot,
+  type BlockHandleRootEvents,
+  type BlockHandleRootProps,
+} from './block-handle-root.ts'

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

@@ -4,12 +4,13 @@ import { defineDOMEventHandler, union, type PlainExtension } from '@prosekit/cor
 import type { ProseMirrorNode } from '@prosekit/pm/model'
 import type { EditorView } from '@prosekit/pm/view'
 
-import { getClientRect } from '../../../utils/get-client-rect.ts'
-import type { HoverState } from '../context.ts'
+import { getClientRect } from '../../utils/get-client-rect.ts'
+
+import type { HoverState } from './hover-state.ts'
 
 export type ElementHoverHandler = (
-  reference: VirtualElement | null,
-  hoverState: HoverState | null,
+  reference?: VirtualElement,
+  hoverState?: HoverState,
 ) => void
 
 export function defineElementHoverHandler(handler: ElementHoverHandler): PlainExtension {
@@ -53,14 +54,14 @@ export function defineElementHoverHandler(handler: ElementHoverHandler): PlainEx
 
     const block = findBlockByCoords(view, x, y)
     if (!block) {
-      handler(null, null)
+      handler()
       return
     }
 
     const { node, pos } = block
     const element = view.nodeDOM(pos)
     if (!element || !isHTMLElement(element)) {
-      handler(null, null)
+      handler()
       return
     }
 
@@ -82,7 +83,7 @@ export function defineElementHoverHandler(handler: ElementHoverHandler): PlainEx
     defineDOMEventHandler('pointermove', throttle(handlePointerEvent, 200)),
     defineDOMEventHandler('pointerenter', handlePointerEvent),
     defineDOMEventHandler('pointerout', handlePointerEvent),
-    defineDOMEventHandler('keypress', () => handler(null, null)),
+    defineDOMEventHandler('keypress', () => handler()),
   )
 }
 

package/src/components/block-handle/{block-handle-draggable/set-drag-preview.ts → set-drag-preview.ts}

@@ -1,7 +1,7 @@
-import { DRAGGING_CLASS_NAME } from '../../../constants.ts'
-import { assignStyles } from '../../../utils/assign-styles.ts'
-import { getClientRect } from '../../../utils/get-client-rect.ts'
-import { maxZIndex } from '../../../utils/max-z-index.ts'
+import { DRAGGING_CLASS_NAME } from '../../constants.ts'
+import { assignStyles } from '../../utils/assign-styles.ts'
+import { getClientRect } from '../../utils/get-client-rect.ts'
+import { maxZIndex } from '../../utils/max-z-index.ts'
 
 /**
  * Sets a drag preview image for the given element and ensures the preview position

package/src/components/block-handle/use-hover-extension.ts

@@ -0,0 +1,65 @@
+import type { HostElement } from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+
+import { useEditorExtension } from '../../hooks/use-editor-extension.ts'
+import { prefersReducedMotion } from '../../utils/prefers-reduced-motion.ts'
+
+import { isHoverStateEqual, type HoverState } from './hover-state.ts'
+import { defineElementHoverHandler, type ElementHoverHandler } from './pointer-move.ts'
+
+export function useHoverExtension(
+  host: HostElement,
+  getEditor: () => Editor | null,
+  handler: ElementHoverHandler,
+): void {
+  const invalidTimeoutMs = prefersReducedMotion() ? 0 : 180
+
+  let invalidTimeoutId: ReturnType<typeof setTimeout> | undefined
+
+  let prevHoverState: HoverState | undefined
+
+  const callHandler: ElementHoverHandler = (reference, hoverState) => {
+    prevHoverState = hoverState
+    handler(reference, hoverState)
+  }
+
+  const extension = defineElementHoverHandler((reference, hoverState) => {
+    if (hoverState && invalidTimeoutId != null) {
+      clearTimeout(invalidTimeoutId)
+      invalidTimeoutId = undefined
+    }
+
+    if (prevHoverState && hoverState) {
+      if (isHoverStateEqual(prevHoverState, hoverState)) {
+        return
+      }
+      callHandler(reference, hoverState)
+      return
+    }
+
+    if (!prevHoverState && !hoverState) {
+      return
+    }
+
+    if (!prevHoverState && hoverState) {
+      callHandler(reference, hoverState)
+      return
+    }
+
+    if (prevHoverState && !hoverState) {
+      if (invalidTimeoutId != null) {
+        return
+      }
+
+      // Wait for a short period of time before invalidating the hover state.
+      // This ensures smoother animation when the pointer moves between two
+      // blocks with a small gap.
+      invalidTimeoutId = setTimeout(() => {
+        callHandler(reference, undefined)
+        invalidTimeoutId = undefined
+      }, invalidTimeoutMs)
+    }
+  })
+
+  useEditorExtension(host, getEditor, extension)
+}

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

@@ -0,0 +1,128 @@
+import {
+  computed,
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { usePresence } from '@aria-ui/utils'
+import type { Editor } from '@prosekit/core'
+import { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'
+
+import { useEditorExtension } from '../../hooks/use-editor-extension.ts'
+import { useScrolling } from '../../hooks/use-scrolling.ts'
+import { assignStyles } from '../../utils/assign-styles.ts'
+
+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 DropIndicatorPropsDeclaration: PropsDeclaration<DropIndicatorProps> = /* @__PURE__ */ defineProps<DropIndicatorProps>({
+  editor: {
+    default: null,
+    attribute: false,
+    type: 'json',
+  },
+  width: {
+    default: 2,
+    attribute: 'width',
+    type: 'number',
+  },
+})
+
+/**
+ * @internal
+ */
+export function setupDropIndicator(
+  host: HostElement,
+  props: State<DropIndicatorProps>,
+): void {
+  type DropIndicatorContext = ShowHandlerOptions | null
+  const context = createSignal<DropIndicatorContext>(null)
+
+  const extension = defineDropIndicator({
+    onShow: (options) => context.set(options),
+    onHide: () => context.set(null),
+  })
+
+  useEditorExtension(host, props.editor.get, extension)
+
+  const getLine = computed(() => context.get()?.line)
+  const getScrolling = useScrolling(host)
+  const getPresence = computed(() => !!context.get() && !getScrolling())
+  usePresence(host, getPresence)
+
+  useEffect(host, () => {
+    const lineValue = getLine()
+    const lineWidth = props.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',
+    })
+  })
+}
+
+const DropIndicatorElementBase: HostElementConstructor<DropIndicatorProps> = defineCustomElement(
+  setupDropIndicator,
+  DropIndicatorPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class DropIndicatorElement extends DropIndicatorElementBase {}
+
+/**
+ * @internal
+ */
+export function registerDropIndicatorElement(): void {
+  registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)
+}

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

@@ -0,0 +1,18 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-drop-indicator></prosekit-drop-indicator>
+```
+*/
+
+export {
+  DropIndicatorElement,
+  DropIndicatorPropsDeclaration,
+  registerDropIndicatorElement,
+  setupDropIndicator,
+  type DropIndicatorProps,
+} from './drop-indicator.ts'

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

@@ -0,0 +1,41 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-inline-popover-root>
+  <prosekit-inline-popover-positioner>
+    <prosekit-inline-popover-popup>...</prosekit-inline-popover-popup>
+  </prosekit-inline-popover-positioner>
+</prosekit-inline-popover-root>
+```
+*/
+
+export {
+  InlinePopoverPopupElement,
+  InlinePopoverPopupPropsDeclaration,
+  registerInlinePopoverPopupElement,
+  setupInlinePopoverPopup,
+  type InlinePopoverPopupProps,
+} from './inline-popover-popup.ts'
+
+export {
+  InlinePopoverPositionerElement,
+  InlinePopoverPositionerPropsDeclaration,
+  registerInlinePopoverPositionerElement,
+  setupInlinePopoverPositioner,
+  type InlinePopoverPositionerProps,
+} from './inline-popover-positioner.ts'
+
+export {
+  InlinePopoverRootElement,
+  InlinePopoverRootPropsDeclaration,
+  registerInlinePopoverRootElement,
+  setupInlinePopoverRoot,
+  type InlinePopoverRootEvents,
+  type InlinePopoverRootProps,
+} from './inline-popover-root.ts'
+
+export { OpenChangeEvent } from '@aria-ui/elements/overlay'

package/src/components/inline-popover/inline-popover-popup.ts

@@ -0,0 +1,52 @@
+import {
+  computed,
+  defineCustomElement,
+  onMount,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps } from '@aria-ui/elements/overlay'
+import { usePresence } from '@aria-ui/utils'
+
+import { InlinePopoverStoreContext } from './store.ts'
+
+/**
+ * @public
+ */
+export interface InlinePopoverPopupProps extends OverlayPopupProps {}
+
+/** @internal */
+export const InlinePopoverPopupPropsDeclaration: PropsDeclaration<InlinePopoverPopupProps> = OverlayPopupPropsDeclaration
+
+/** @internal */
+export function setupInlinePopoverPopup(
+  host: HostElement,
+  _props: State<InlinePopoverPopupProps>,
+): void {
+  const getStore = InlinePopoverStoreContext.consume(host)
+  setupOverlayPopup(host, getStore)
+  const getOpen = computed(() => getStore()?.getIsOpen() ?? false)
+  usePresence(host, getOpen)
+
+  onMount(host, () => {
+    host.role = 'dialog'
+  })
+}
+
+const InlinePopoverPopupElementBase: HostElementConstructor<InlinePopoverPopupProps> = defineCustomElement(
+  setupInlinePopoverPopup,
+  InlinePopoverPopupPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class InlinePopoverPopupElement extends InlinePopoverPopupElementBase {}
+
+/** @internal */
+export function registerInlinePopoverPopupElement(): void {
+  registerCustomElement('prosekit-inline-popover-popup', InlinePopoverPopupElement)
+}