@prosekit/web 0.7.13 → 0.8.0-beta.1

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

package/src/components/popover/index.ts

@@ -0,0 +1,53 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-popover-root>
+  <prosekit-popover-trigger>...</prosekit-popover-trigger>
+  <prosekit-popover-positioner>
+    <prosekit-popover-popup>...</prosekit-popover-popup>
+  </prosekit-popover-positioner>
+</prosekit-popover-root>
+```
+*/
+
+import { registerCustomElement } from '@aria-ui/core'
+import { PopoverPopupElement, PopoverPositionerElement, PopoverRootElement, PopoverTriggerElement } from '@aria-ui/elements/popover'
+
+export {
+  OpenChangeEvent,
+  PopoverPopupElement,
+  PopoverPopupPropsDeclaration,
+  PopoverPositionerElement,
+  PopoverPositionerPropsDeclaration,
+  PopoverRootElement,
+  PopoverRootPropsDeclaration,
+  PopoverTriggerElement,
+  PopoverTriggerPropsDeclaration,
+  setupPopoverPopup,
+  setupPopoverPositioner,
+  setupPopoverRoot,
+  setupPopoverTrigger,
+  type PopoverPopupProps,
+  type PopoverPositionerProps,
+  type PopoverRootEvents,
+  type PopoverRootProps,
+  type PopoverTriggerEvents,
+  type PopoverTriggerProps,
+} from '@aria-ui/elements/popover'
+
+export function registerPopoverRootElement(): void {
+  registerCustomElement('prosekit-popover-root', PopoverRootElement)
+}
+export function registerPopoverTriggerElement(): void {
+  registerCustomElement('prosekit-popover-trigger', PopoverTriggerElement)
+}
+export function registerPopoverPopupElement(): void {
+  registerCustomElement('prosekit-popover-popup', PopoverPopupElement)
+}
+export function registerPopoverPositionerElement(): void {
+  registerCustomElement('prosekit-popover-positioner', PopoverPositionerElement)
+}

package/src/components/resizable/{resizable-handle/calc-resize.ts → calc-resize.ts}

@@ -1,4 +1,4 @@
-import { isFinitePositiveNumber } from '../../../utils/is-finite-positive-number.ts'
+import { isFinitePositiveNumber } from '../../utils/is-finite-positive-number.ts'
 
 export function calcResize(
   position:

package/src/components/resizable/context.ts

@@ -3,25 +3,22 @@ import { createContext, type Context } from '@aria-ui/core'
 /**
  * @internal
  */
-export const onResizeContext: Context<OnResize> = createContext(
+export const onResizeContext: Context<OnResize> = createContext<OnResize>(
   'prosekit/resizable/onResize',
-  null,
 )
 
 /**
  * @internal
  */
-export const onResizeStartContext: Context<OnResizeStart> = createContext(
+export const onResizeStartContext: Context<OnResizeStart> = createContext<OnResizeStart>(
   'prosekit/resizable/onResizeStart',
-  null,
 )
 
 /**
  * @internal
  */
-export const onResizeEndContext: Context<OnResizeEnd> = createContext(
+export const onResizeEndContext: Context<OnResizeEnd> = createContext<OnResizeEnd>(
   'prosekit/resizable/onResizeEnd',
-  null,
 )
 
 /**

package/src/components/resizable/index.ts

@@ -0,0 +1,32 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-resizable-root>
+  <img src="..." />
+  <prosekit-resizable-handle>...</prosekit-resizable-handle>
+</prosekit-resizable-root>
+```
+*/
+
+export {
+  registerResizableRootElement,
+  ResizableRootElement,
+  ResizableRootPropsDeclaration,
+  ResizeEndEvent,
+  ResizeStartEvent,
+  setupResizableRoot,
+  type ResizableRootEvents,
+  type ResizableRootProps,
+} from './resizable-root.ts'
+
+export {
+  registerResizableHandleElement,
+  ResizableHandleElement,
+  ResizableHandlePropsDeclaration,
+  setupResizableHandle,
+  type ResizableHandleProps,
+} from './resizable-handle.ts'

package/src/components/resizable/resizable-handle.ts

@@ -0,0 +1,134 @@
+import type { HostElement, HostElementConstructor, PropsDeclaration } from '@aria-ui/core'
+import { createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect, type State } from '@aria-ui/core'
+import { getWindow } from '@ocavue/utils'
+
+import { calcResize } from './calc-resize.ts'
+import { onResizeContext, onResizeEndContext, onResizeStartContext } from './context.ts'
+
+/**
+ * @public
+ */
+export interface ResizableHandleProps {
+  /**
+   * The position of the handle.
+   *
+   * @default "bottom-right"
+   */
+  position:
+    | 'top'
+    | 'right'
+    | 'bottom'
+    | 'left'
+    | 'top-left'
+    | 'top-right'
+    | 'bottom-left'
+    | 'bottom-right'
+}
+
+/**
+ * @internal
+ */
+export const ResizableHandlePropsDeclaration: PropsDeclaration<ResizableHandleProps> = defineProps<ResizableHandleProps>({
+  position: { default: 'bottom-right', attribute: 'position', type: 'string' },
+})
+
+/**
+ * @internal
+ */
+export function setupResizableHandle(
+  host: HostElement,
+  props: State<ResizableHandleProps>,
+): void {
+  const getOnResize = onResizeContext.consume(host)
+  const getOnResizeStart = onResizeStartContext.consume(host)
+  const getOnResizeEnd = onResizeEndContext.consume(host)
+
+  let startX = 0
+  let startY = 0
+  let width = 0
+  let height = 0
+  let aspectRatio = 1
+
+  const pointerPressing = createSignal(false)
+
+  const handlePointerDown = (event: PointerEvent) => {
+    event.preventDefault()
+    pointerPressing.set(true)
+
+    startX = event.x
+    startY = event.y
+
+    const size = getOnResizeStart()?.()
+    if (size) {
+      ;[width, height, aspectRatio] = size
+    }
+  }
+
+  const handlePointerMove = (event: PointerEvent) => {
+    event.preventDefault()
+
+    const dx = event.x - startX
+    const dy = event.y - startY
+
+    const [w, h] = calcResize(
+      props.position.get(),
+      width,
+      height,
+      dx,
+      dy,
+      aspectRatio,
+    )
+
+    getOnResize()?.(w, h)
+  }
+
+  const handlePointerUp = (event: PointerEvent) => {
+    event.preventDefault()
+    pointerPressing.set(false)
+
+    getOnResizeEnd()?.()
+  }
+
+  useEffect(host, () => {
+    host.addEventListener('pointerdown', handlePointerDown)
+    return () => {
+      host.removeEventListener('pointerdown', handlePointerDown)
+    }
+  })
+
+  useEffect(host, () => {
+    if (!pointerPressing.get()) {
+      return
+    }
+
+    const win = getWindow(host)
+
+    win.addEventListener('pointermove', handlePointerMove)
+    win.addEventListener('pointerup', handlePointerUp)
+    return () => {
+      win.removeEventListener('pointermove', handlePointerMove)
+      win.removeEventListener('pointerup', handlePointerUp)
+    }
+  })
+}
+
+const ResizableHandleElementBase: HostElementConstructor<ResizableHandleProps> = defineCustomElement(
+  setupResizableHandle,
+  ResizableHandlePropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class ResizableHandleElement extends ResizableHandleElementBase {}
+
+let isResizableHandleRegistered = false
+
+/**
+ * @internal
+ */
+export function registerResizableHandleElement(): void {
+  if (isResizableHandleRegistered) return
+  isResizableHandleRegistered = true
+  registerCustomElement('prosekit-resizable-handle', ResizableHandleElement)
+}