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

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

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

@@ -0,0 +1,184 @@
+import type { HostElement, HostElementConstructor, PropsDeclaration } from '@aria-ui/core'
+import { createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect, type State } from '@aria-ui/core'
+import { useAttribute } from '@aria-ui/utils'
+
+import { isFinitePositiveNumber } from '../../utils/is-finite-positive-number.ts'
+
+import {
+  onResizeContext,
+  onResizeEndContext,
+  onResizeStartContext,
+  type OnResize,
+  type OnResizeEnd,
+  type OnResizeStart,
+} from './context.ts'
+
+/**
+ * @public
+ */
+export interface ResizableRootProps {
+  /**
+   * The width of the resizable element.
+   *
+   * @default null
+   */
+  width: number | null
+
+  /**
+   * The height of the resizable element.
+   *
+   * @default null
+   */
+  height: number | null
+
+  /**
+   * The aspect ratio of the resizable element.
+   *
+   * @default null
+   */
+  aspectRatio: number | null
+}
+
+/**
+ * @internal
+ */
+export const ResizableRootPropsDeclaration: PropsDeclaration<ResizableRootProps> = defineProps<ResizableRootProps>({
+  width: { default: null, attribute: 'data-width', type: 'json' },
+  height: { default: null, attribute: 'data-height', type: 'json' },
+  aspectRatio: { default: null, attribute: 'data-aspect-ratio', type: 'json' },
+})
+
+/**
+ * @public
+ */
+export interface ResizableRootEvents {
+  /**
+   * Emitted when a resize operation starts.
+   */
+  resizeStart: ResizeStartEvent
+
+  /**
+   * Emitted when a resize operation ends.
+   */
+  resizeEnd: ResizeEndEvent
+}
+
+/**
+ * @public
+ */
+export class ResizeStartEvent extends Event {
+  readonly detail: {
+    readonly width: number
+    readonly height: number
+  }
+  constructor(width: number, height: number) {
+    super('resizeStart')
+    this.detail = { width, height }
+  }
+}
+
+/**
+ * @public
+ */
+export class ResizeEndEvent extends Event {
+  readonly detail: {
+    readonly width: number
+    readonly height: number
+  }
+  constructor(width: number, height: number) {
+    super('resizeEnd')
+    this.detail = { width, height }
+  }
+}
+
+/**
+ * @internal
+ */
+export function setupResizableRoot(
+  host: HostElement,
+  props: State<ResizableRootProps>,
+): void {
+  const resizing = createSignal(false)
+
+  const onResizeStart: OnResizeStart = () => {
+    const { width, height } = host.getBoundingClientRect()
+
+    let aspectRatio: number = props.aspectRatio.get() ?? width / height
+
+    if (!isFinitePositiveNumber(aspectRatio)) {
+      aspectRatio = 0
+    }
+
+    resizing.set(true)
+    host.dispatchEvent(new ResizeStartEvent(width, height))
+    return [width, height, aspectRatio]
+  }
+
+  const onResize: OnResize = (width, height) => {
+    props.width.set(width)
+    props.height.set(height)
+  }
+
+  const onResizeEnd: OnResizeEnd = () => {
+    const { width, height } = host.getBoundingClientRect()
+    resizing.set(false)
+    host.dispatchEvent(new ResizeEndEvent(width, height))
+  }
+
+  onResizeStartContext.provide(host, onResizeStart)
+  onResizeContext.provide(host, onResize)
+  onResizeEndContext.provide(host, onResizeEnd)
+
+  useEffect(host, () => {
+    updateResizableRootStyles(
+      host,
+      Math.max(props.width.get() || 0, 1),
+      Math.max(props.height.get() || 0, 1),
+      props.aspectRatio.get(),
+    )
+  })
+
+  useAttribute(host, 'data-resizing', () => (resizing.get() ? '' : undefined))
+}
+
+function updateResizableRootStyles(
+  host: HostElement,
+  width: number,
+  height: number,
+  aspectRatio: number | null,
+) {
+  host.style.width = isFinitePositiveNumber(width) ? `${width}px` : ''
+
+  host.style.height = isFinitePositiveNumber(height) ? `${height}px` : ''
+
+  if (isFinitePositiveNumber(aspectRatio)) {
+    host.style.aspectRatio = `${aspectRatio}`
+
+    if (width && width > 0 && aspectRatio >= 1) {
+      host.style.height = 'auto'
+    } else if (height && height > 0 && aspectRatio <= 1) {
+      host.style.width = 'min-content'
+    }
+  }
+}
+
+const ResizableRootElementBase: HostElementConstructor<ResizableRootProps> = defineCustomElement(
+  setupResizableRoot,
+  ResizableRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class ResizableRootElement extends ResizableRootElementBase {}
+
+let isResizableRootRegistered = false
+
+/**
+ * @internal
+ */
+export function registerResizableRootElement(): void {
+  if (isResizableRootRegistered) return
+  isResizableRootRegistered = true
+  registerCustomElement('prosekit-resizable-root', ResizableRootElement)
+}

package/src/components/table-handle/dnd.ts

@@ -1,4 +1,4 @@
-import { createComputed, useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
+import { useEffect, type HostElement } from '@aria-ui/core'
 import { computePosition, offset } from '@floating-ui/dom'
 import { isHTMLElement } from '@ocavue/utils'
 import type { Editor } from '@prosekit/core'
@@ -7,10 +7,10 @@ import type { EditorView } from '@prosekit/pm/view'
 import { assignStyles } from '../../utils/assign-styles.ts'
 import { getSafeEditorView } from '../../utils/get-safe-editor-view.ts'
 
-import { tableHandleDndContext, tableHandleRootContext } from './context.ts'
+import { tableHandleStoreContext } from './store.ts'
 
 export type OnInitParams = {
-  host: ConnectableElement
+  host: HostElement
   direction: 'row' | 'col'
   dragging: boolean
   draggingIndex: number
@@ -19,41 +19,30 @@ export type OnInitParams = {
 }
 
 export function useInitDndPosition(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
+  host: HostElement,
+  getEditor: () => Editor | null,
   onInit: (params: OnInitParams) => void,
 ): void {
-  const dndContext = tableHandleDndContext.consume(host)
-  const rootContext = tableHandleRootContext.consume(host)
-
-  const draggingSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.dragging
-  })
-
-  const directionSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.direction
-  })
-
-  const draggingIndexSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.draggingIndex
-  })
+  const getStore = tableHandleStoreContext.consume(host)
 
   useEffect(host, () => {
-    const view = getSafeEditorView(editor.get())
+    const view = getSafeEditorView(getEditor())
     if (!view) return
 
-    const dragging = draggingSignal.get()
-    const direction = directionSignal.get()
+    const store = getStore()
+    if (!store) return
+
+    const dndStore = store.dndStore
+
+    const dragging = dndStore.dragging.get()
+    const direction = dndStore.direction.get()
 
     host.dataset.direction = direction
     host.dataset.dragging = dragging.toString()
 
-    const draggingIndex = draggingIndexSignal.get()
+    const draggingIndex = dndStore.draggingIndex.get()
 
-    const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction)
+    const relatedDOMs = getDndRelatedDOMs(view, store.getReferenceCell()?.cellPos, draggingIndex, direction)
     if (!relatedDOMs) return
     const { table, cell } = relatedDOMs
 

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

@@ -0,0 +1,125 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-table-handle-root>
+  <prosekit-table-handle-drag-preview></prosekit-table-handle-drag-preview>
+  <prosekit-table-handle-drop-indicator></prosekit-table-handle-drop-indicator>
+  <prosekit-table-handle-column-positioner>
+    <prosekit-table-handle-column-popup>
+      <prosekit-table-handle-column-menu-root>
+        <prosekit-table-handle-column-menu-trigger>...</prosekit-table-handle-column-menu-trigger>
+        <prosekit-menu-positioner>
+          <prosekit-menu-popup>
+            <prosekit-menu-item>...</prosekit-menu-item>
+          </prosekit-menu-popup>
+        </prosekit-menu-positioner>
+      </prosekit-table-handle-column-menu-root>
+    </prosekit-table-handle-column-popup>
+  </prosekit-table-handle-column-positioner>
+  <prosekit-table-handle-row-positioner>
+    <prosekit-table-handle-row-popup>
+      <prosekit-table-handle-row-menu-root>
+        <prosekit-table-handle-row-menu-trigger>...</prosekit-table-handle-row-menu-trigger>
+        <prosekit-menu-positioner>
+          <prosekit-menu-popup>
+            <prosekit-menu-item>...</prosekit-menu-item>
+          </prosekit-menu-popup>
+        </prosekit-menu-positioner>
+      </prosekit-table-handle-row-menu-root>
+    </prosekit-table-handle-row-popup>
+  </prosekit-table-handle-row-positioner>
+</prosekit-table-handle-root>
+```
+*/
+
+export {
+  registerTableHandleColumnPopupElement,
+  setupTableHandleColumnPopup,
+  TableHandleColumnPopupElement,
+  TableHandleColumnPopupPropsDeclaration,
+  type TableHandleColumnPopupProps,
+} from './table-handle-column-popup.ts'
+
+export {
+  registerTableHandleColumnPositionerElement,
+  setupTableHandleColumnPositioner,
+  TableHandleColumnPositionerElement,
+  TableHandleColumnPositionerPropsDeclaration,
+  type TableHandleColumnPositionerProps,
+} from './table-handle-column-positioner.ts'
+
+export {
+  registerTableHandleColumnMenuRootElement,
+  setupTableHandleColumnMenuRoot,
+  TableHandleColumnMenuRootElement,
+  TableHandleColumnMenuRootPropsDeclaration,
+  type TableHandleColumnMenuRootProps,
+} from './table-handle-column-menu-root.ts'
+
+export {
+  registerTableHandleColumnMenuTriggerElement,
+  setupTableHandleColumnMenuTrigger,
+  TableHandleColumnMenuTriggerElement,
+  TableHandleColumnMenuTriggerPropsDeclaration,
+  type TableHandleColumnMenuTriggerProps,
+} from './table-handle-column-menu-trigger.ts'
+
+export {
+  registerTableHandleDragPreviewElement,
+  setupTableHandleDragPreview,
+  TableHandleDragPreviewElement,
+  TableHandleDragPreviewPropsDeclaration,
+  type TableHandleDragPreviewProps,
+} from './table-handle-drag-preview.ts'
+
+export {
+  registerTableHandleDropIndicatorElement,
+  setupTableHandleDropIndicator,
+  TableHandleDropIndicatorElement,
+  TableHandleDropIndicatorPropsDeclaration,
+  type TableHandleDropIndicatorProps,
+} from './table-handle-drop-indicator.ts'
+
+export {
+  registerTableHandleRootElement,
+  setupTableHandleRoot,
+  TableHandleRootElement,
+  TableHandleRootPropsDeclaration,
+  type TableHandleRootProps,
+} from './table-handle-root.ts'
+
+export {
+  registerTableHandleRowPopupElement,
+  setupTableHandleRowPopup,
+  TableHandleRowPopupElement,
+  TableHandleRowPopupPropsDeclaration,
+  type TableHandleRowPopupProps,
+} from './table-handle-row-popup.ts'
+
+export {
+  registerTableHandleRowPositionerElement,
+  setupTableHandleRowPositioner,
+  TableHandleRowPositionerElement,
+  TableHandleRowPositionerPropsDeclaration,
+  type TableHandleRowPositionerProps,
+} from './table-handle-row-positioner.ts'
+
+export {
+  registerTableHandleRowMenuRootElement,
+  setupTableHandleRowMenuRoot,
+  TableHandleRowMenuRootElement,
+  TableHandleRowMenuRootPropsDeclaration,
+  type TableHandleRowMenuRootProps,
+} from './table-handle-row-menu-root.ts'
+
+export {
+  registerTableHandleRowMenuTriggerElement,
+  setupTableHandleRowMenuTrigger,
+  TableHandleRowMenuTriggerElement,
+  TableHandleRowMenuTriggerPropsDeclaration,
+  type TableHandleRowMenuTriggerProps,
+} from './table-handle-row-menu-trigger.ts'

package/src/components/table-handle/{table-handle-drag-preview/render-preview.ts → render-preview.ts}

@@ -1,8 +1,8 @@
-import { assignStyles } from '../../../utils/assign-styles.ts'
-import { cloneElement, deepCloneElement } from '../../../utils/clone-element.ts'
-import { fadeColor } from '../../../utils/fade-color.ts'
-import { getEffectiveBackgroundColor } from '../../../utils/get-effective-background-color.ts'
-import { injectStyle } from '../../../utils/inject-style.ts'
+import { assignStyles } from '../../utils/assign-styles.ts'
+import { cloneElement, deepCloneElement } from '../../utils/clone-element.ts'
+import { fadeColor } from '../../utils/fade-color.ts'
+import { getEffectiveBackgroundColor } from '../../utils/get-effective-background-color.ts'
+import { injectStyle } from '../../utils/inject-style.ts'
 
 export function clearPreviewDOM(previewRoot: HTMLElement): void {
   while (previewRoot.firstChild) {