@prosekit/web 0.8.0-beta.0 → 0.8.0-beta.1

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)
+}

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

@@ -0,0 +1,98 @@
+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 { InlinePopoverStoreContext } from './store.ts'
+
+/**
+ * @public
+ */
+export interface InlinePopoverPositionerProps extends OverlayPositionerProps {
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "top"
+   */
+  placement: OverlayPositionerProps['placement']
+
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 12
+   */
+  offset: OverlayPositionerProps['offset']
+
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default true
+   */
+  hide: OverlayPositionerProps['hide']
+
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default true
+   */
+  overlap: OverlayPositionerProps['overlap']
+
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default true
+   */
+  inline: OverlayPositionerProps['inline']
+
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   *
+   * @default 8
+   */
+  overflowPadding: OverlayPositionerProps['overflowPadding']
+}
+
+/** @internal */
+export const InlinePopoverPositionerPropsDeclaration: PropsDeclaration<InlinePopoverPositionerProps> = /* @__PURE__ */ defineProps<
+  InlinePopoverPositionerProps
+>({
+  ...OverlayPositionerPropsDeclaration,
+  placement: { default: 'top', attribute: 'placement', type: 'string' },
+  offset: { default: 12, attribute: false, type: 'json' },
+  hide: { default: true, attribute: 'hide', type: 'boolean' },
+  overlap: { default: true, attribute: 'overlap', type: 'boolean' },
+  inline: { default: true, attribute: 'inline', type: 'boolean' },
+  overflowPadding: { default: 8, attribute: 'overflow-padding', type: 'number' },
+})
+
+/** @internal */
+export function setupInlinePopoverPositioner(
+  host: HostElement,
+  props: State<InlinePopoverPositionerProps>,
+): void {
+  setupOverlayPositioner(host, props, InlinePopoverStoreContext.consume(host))
+}
+
+const InlinePopoverPositionerElementBase: HostElementConstructor<InlinePopoverPositionerProps> = defineCustomElement(
+  setupInlinePopoverPositioner,
+  InlinePopoverPositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class InlinePopoverPositionerElement extends InlinePopoverPositionerElementBase {}
+
+/** @internal */
+export function registerInlinePopoverPositionerElement(): void {
+  registerCustomElement('prosekit-inline-popover-positioner', InlinePopoverPositionerElement)
+}

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

@@ -0,0 +1,122 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import type { OpenChangeEvent } from '@aria-ui/elements/overlay'
+import { OverlayRootPropsDeclaration, useOverlayStore, type OverlayRootProps } from '@aria-ui/elements/overlay'
+import type { Editor } from '@prosekit/core'
+import type { Selection } from '@prosekit/pm/state'
+
+import { useEditorFocusChangeEvent } from '../../hooks/use-editor-focus-event.ts'
+import { useEditorUpdateEvent } from '../../hooks/use-editor-update-event.ts'
+import { useKeymap } from '../../hooks/use-keymap.ts'
+
+import { InlinePopoverStoreContext } from './store.ts'
+import { getVirtualSelectionElement } from './virtual-selection-element.ts'
+
+/**
+ * @public
+ */
+export interface InlinePopoverRootProps extends OverlayRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+
+  /**
+   * Whether the popover is open by default when some inline content is
+   * selected.
+   *
+   * @default true
+   */
+  defaultOpen: boolean
+
+  /**
+   * Whether the inline popover should be dismissed when the editor receives an
+   * Escape key press.
+   *
+   * @default true
+   */
+  dismissOnEscape: boolean
+}
+
+/** @internal */
+export const InlinePopoverRootPropsDeclaration: PropsDeclaration<InlinePopoverRootProps> = /* @__PURE__ */ defineProps<
+  InlinePopoverRootProps
+>({
+  ...OverlayRootPropsDeclaration,
+  editor: { default: null, attribute: false, type: 'json' },
+  defaultOpen: { default: true, attribute: 'default-open', type: 'boolean' },
+  dismissOnEscape: { default: true, attribute: 'dismiss-on-escape', type: 'boolean' },
+})
+
+/**
+ * @public
+ */
+export interface InlinePopoverRootEvents {
+  openChange: OpenChangeEvent
+}
+
+/** @internal */
+export function setupInlinePopoverRoot(
+  host: HostElement,
+  props: State<InlinePopoverRootProps>,
+): void {
+  const store = useOverlayStore(host, props)
+  InlinePopoverStoreContext.provide(host, store)
+
+  let editorFocused = false
+  useEditorFocusChangeEvent(host, props.editor.get, (focus) => {
+    editorFocused = focus
+  })
+
+  let prevSelection: Selection | undefined
+  useEditorUpdateEvent(host, props.editor.get, (view) => {
+    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement)
+    if (isPopoverFocused) return
+
+    const { selection } = view.state
+    if (prevSelection?.eq(selection)) return
+    prevSelection = selection
+
+    const reference = getVirtualSelectionElement(view)
+    store.setAnchorElement(reference)
+
+    if (reference && props.defaultOpen.get()) {
+      store.requestOpenChange(true)
+    } else if (!reference) {
+      store.requestOpenChange(false)
+    }
+  })
+
+  useKeymap(host, props.editor.get, {
+    Escape: () => {
+      if (!props.dismissOnEscape.get() || !store.getIsOpen()) return false
+      store.requestOpenChange(false)
+      return true
+    },
+  })
+}
+
+const InlinePopoverRootElementBase: HostElementConstructor<InlinePopoverRootProps> = defineCustomElement(
+  setupInlinePopoverRoot,
+  InlinePopoverRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class InlinePopoverRootElement extends InlinePopoverRootElementBase {}
+
+/** @internal */
+export function registerInlinePopoverRootElement(): void {
+  registerCustomElement('prosekit-inline-popover-root', InlinePopoverRootElement)
+}

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

@@ -0,0 +1,6 @@
+import { createContext, type Context } from '@aria-ui/core'
+import type { OverlayStore } from '@aria-ui/elements/overlay'
+
+export const InlinePopoverStoreContext: Context<OverlayStore> = createContext<OverlayStore>(
+  'prosekit-inline-popover-store',
+)

package/src/components/menu/index.ts

@@ -0,0 +1,92 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-menu-root>
+  <prosekit-menu-trigger>...</prosekit-menu-trigger>
+  <prosekit-menu-positioner>
+    <prosekit-menu-popup>
+       <prosekit-menu-item>...</prosekit-menu-item>
+       <prosekit-menu-submenu-root>
+         <prosekit-menu-submenu-trigger>...</prosekit-menu-submenu-trigger>
+         <prosekit-menu-positioner>
+           <prosekit-menu-popup>
+             <prosekit-menu-item>...</prosekit-menu-item>
+           </prosekit-menu-popup>
+         </prosekit-menu-positioner>
+       </prosekit-menu-submenu-root>
+    </prosekit-menu-popup>
+  </prosekit-menu-positioner>
+</prosekit-menu-root>
+```
+*/
+
+import { registerCustomElement } from '@aria-ui/core'
+import {
+  MenuItemElement,
+  MenuPopupElement,
+  MenuPositionerElement,
+  MenuRootElement,
+  MenuSubmenuRootElement,
+  MenuSubmenuTriggerElement,
+  MenuTriggerElement,
+} from '@aria-ui/elements/menu'
+
+export {
+  MenuItemElement,
+  MenuItemPropsDeclaration,
+  MenuPopupElement,
+  MenuPopupPropsDeclaration,
+  MenuPositionerElement,
+  MenuPositionerPropsDeclaration,
+  MenuRootElement,
+  MenuRootPropsDeclaration,
+  MenuSubmenuRootElement,
+  MenuSubmenuRootPropsDeclaration,
+  MenuSubmenuTriggerElement,
+  MenuSubmenuTriggerPropsDeclaration,
+  MenuTriggerElement,
+  MenuTriggerPropsDeclaration,
+  OpenChangeEvent,
+  SelectEvent,
+  setupMenuItem,
+  setupMenuPopup,
+  setupMenuPositioner,
+  setupMenuRoot,
+  setupMenuSubmenuRoot,
+  setupMenuSubmenuTrigger,
+  setupMenuTrigger,
+  type MenuItemEvents,
+  type MenuItemProps,
+  type MenuPopupProps,
+  type MenuPositionerProps,
+  type MenuRootEvents,
+  type MenuRootProps,
+  type MenuTriggerEvents,
+  type MenuTriggerProps,
+} from '@aria-ui/elements/menu'
+
+export function registerMenuRootElement(): void {
+  registerCustomElement('prosekit-menu-root', MenuRootElement)
+}
+export function registerMenuTriggerElement(): void {
+  registerCustomElement('prosekit-menu-trigger', MenuTriggerElement)
+}
+export function registerMenuPositionerElement(): void {
+  registerCustomElement('prosekit-menu-positioner', MenuPositionerElement)
+}
+export function registerMenuPopupElement(): void {
+  registerCustomElement('prosekit-menu-popup', MenuPopupElement)
+}
+export function registerMenuItemElement(): void {
+  registerCustomElement('prosekit-menu-item', MenuItemElement)
+}
+export function registerMenuSubmenuRootElement(): void {
+  registerCustomElement('prosekit-menu-submenu-root', MenuSubmenuRootElement)
+}
+export function registerMenuSubmenuTriggerElement(): void {
+  registerCustomElement('prosekit-menu-submenu-trigger', MenuSubmenuTriggerElement)
+}