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

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

@@ -1,112 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import {
-  overlayPositionerEvents,
-  overlayPositionerProps,
-  type OverlayPositionerEvents,
-  type OverlayPositionerProps,
-} from '@aria-ui/overlay'
-import type { Editor } from '@prosekit/core'
-
-export interface InlinePopoverProps extends
-  Omit<
-    OverlayPositionerProps,
-    'placement' | 'offset' | 'hide' | 'overlap' | 'inline' | 'overflowPadding'
-  >
-{
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-
-  /**
-   * Whether the popover is open by default when some inline content is
-   * selected.
-   *
-   * When `defaultOpen` is true, the popover will open or close based on the
-   * inline selection. When `defaultOpen` is false, the popover will never be
-   * opened unless the `open` prop is true.
-   *
-   * @default true
-   */
-  defaultOpen: boolean
-
-  /**
-   * Whether the popover is open.
-   *
-   * Notice that the popover will be always hidden if the inline selection is
-   * empty.
-   *
-   * @default false
-   */
-  open: boolean
-
-  /**
-   * Whether the inline popover should be dismissed when the editor receives an
-   * Escape key press.
-   *
-   * @default true
-   */
-  dismissOnEscape: boolean
-
-  /**
-   * @default "top"
-   */
-  placement: OverlayPositionerProps['placement']
-
-  /**
-   * @default 12
-   */
-  offset: OverlayPositionerProps['offset']
-
-  /**
-   * @default true
-   */
-  hide: OverlayPositionerProps['hide']
-
-  /**
-   * @default true
-   */
-  overlap: OverlayPositionerProps['overlap']
-
-  /**
-   * @default true
-   */
-  inline: OverlayPositionerProps['inline']
-
-  /**
-   * @default 8
-   */
-  overflowPadding: OverlayPositionerProps['overflowPadding']
-}
-
-/** @internal */
-export const inlinePopoverProps: PropDeclarations<InlinePopoverProps> = Object.freeze({
-  ...overlayPositionerProps,
-  editor: { default: null },
-  defaultOpen: { default: true },
-  open: { default: false },
-  dismissOnEscape: { default: true },
-
-  placement: { default: 'top' },
-  offset: { default: 12 },
-  hide: { default: true },
-  overlap: { default: true },
-  inline: { default: true },
-  overflowPadding: { default: 8 },
-})
-
-export interface InlinePopoverEvents extends OverlayPositionerEvents {
-  /**
-   * Fired when the open state changes.
-   */
-  openChange: CustomEvent<boolean>
-}
-
-/** @internal */
-export const inlinePopoverEvents: EventDeclarations<InlinePopoverEvents> = {
-  ...overlayPositionerEvents,
-  openChange: {},
-}

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

@@ -1,13 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { PopoverContentElement } from './popover-content/element.gen.ts'
-export { popoverContentEvents, popoverContentProps, type PopoverContentEvents, type PopoverContentProps } from './popover-content/types.ts'
-export { usePopoverContent } from './popover-content/setup.ts'
-
-export { PopoverRootElement } from './popover-root/element.gen.ts'
-export { popoverRootEvents, popoverRootProps, type PopoverRootEvents, type PopoverRootProps } from './popover-root/types.ts'
-export { usePopoverRoot } from './popover-root/setup.ts'
-
-export { PopoverTriggerElement } from './popover-trigger/element.gen.ts'
-export { popoverTriggerEvents, popoverTriggerProps, type PopoverTriggerEvents, type PopoverTriggerProps } from './popover-trigger/types.ts'
-export { usePopoverTrigger } from './popover-trigger/setup.ts'

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { usePopoverContent } from "./setup.ts"
-import { popoverContentEvents, popoverContentProps, type PopoverContentEvents, type PopoverContentProps } from "./types.ts"
-
-const PopoverContentElementBase: BaseElementConstructor<PopoverContentProps> = defineCustomElement<
-  PopoverContentProps,
-  PopoverContentEvents
->({
-  props: popoverContentProps,
-  events: popoverContentEvents,
-  setup: usePopoverContent,
-})
-class PopoverContentElement extends PopoverContentElementBase {}
-
-registerCustomElement('prosekit-popover-content', PopoverContentElement)
-  
-export { PopoverContentElement }

package/src/components/popover/popover-content/setup.ts

@@ -1 +0,0 @@
-export { usePopoverContent } from '@aria-ui/popover/elements'

package/src/components/popover/popover-content/types.ts

@@ -1,6 +0,0 @@
-import type { PopoverContentEvents as Events, PopoverContentProps as Props } from '@aria-ui/popover/elements'
-
-export { popoverContentEvents, popoverContentProps } from '@aria-ui/popover/elements'
-
-export interface PopoverContentProps extends Props {}
-export interface PopoverContentEvents extends Events {}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { usePopoverRoot } from "./setup.ts"
-import { popoverRootEvents, popoverRootProps, type PopoverRootEvents, type PopoverRootProps } from "./types.ts"
-
-const PopoverRootElementBase: BaseElementConstructor<PopoverRootProps> = defineCustomElement<
-  PopoverRootProps,
-  PopoverRootEvents
->({
-  props: popoverRootProps,
-  events: popoverRootEvents,
-  setup: usePopoverRoot,
-})
-class PopoverRootElement extends PopoverRootElementBase {}
-
-registerCustomElement('prosekit-popover-root', PopoverRootElement)
-  
-export { PopoverRootElement }

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

@@ -1 +0,0 @@
-export { usePopoverRoot } from '@aria-ui/popover/elements'

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

@@ -1,6 +0,0 @@
-import type { PopoverRootEvents as Events, PopoverRootProps as Props } from '@aria-ui/popover/elements'
-
-export { popoverRootEvents, popoverRootProps } from '@aria-ui/popover/elements'
-
-export interface PopoverRootProps extends Props {}
-export interface PopoverRootEvents extends Events {}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { usePopoverTrigger } from "./setup.ts"
-import { popoverTriggerEvents, popoverTriggerProps, type PopoverTriggerEvents, type PopoverTriggerProps } from "./types.ts"
-
-const PopoverTriggerElementBase: BaseElementConstructor<PopoverTriggerProps> = defineCustomElement<
-  PopoverTriggerProps,
-  PopoverTriggerEvents
->({
-  props: popoverTriggerProps,
-  events: popoverTriggerEvents,
-  setup: usePopoverTrigger,
-})
-class PopoverTriggerElement extends PopoverTriggerElementBase {}
-
-registerCustomElement('prosekit-popover-trigger', PopoverTriggerElement)
-  
-export { PopoverTriggerElement }

package/src/components/popover/popover-trigger/setup.ts

@@ -1 +0,0 @@
-export { usePopoverTrigger } from '@aria-ui/popover/elements'

package/src/components/popover/popover-trigger/types.ts

@@ -1,6 +0,0 @@
-import type { PopoverTriggerEvents as Events, PopoverTriggerProps as Props } from '@aria-ui/popover/elements'
-
-export { popoverTriggerEvents, popoverTriggerProps } from '@aria-ui/popover/elements'
-
-export interface PopoverTriggerProps extends Props {}
-export interface PopoverTriggerEvents extends Events {}

package/src/components/resizable/index.gen.ts

@@ -1,9 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { ResizableHandleElement } from './resizable-handle/element.gen.ts'
-export { resizableHandleEvents, resizableHandleProps, type ResizableHandleEvents, type ResizableHandleProps } from './resizable-handle/types.ts'
-export { useResizableHandle } from './resizable-handle/setup.ts'
-
-export { ResizableRootElement } from './resizable-root/element.gen.ts'
-export { resizableRootEvents, resizableRootProps, type ResizableRootEvents, type ResizableRootProps } from './resizable-root/types.ts'
-export { useResizableRoot } from './resizable-root/setup.ts'

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useResizableHandle } from "./setup.ts"
-import { resizableHandleEvents, resizableHandleProps, type ResizableHandleEvents, type ResizableHandleProps } from "./types.ts"
-
-const ResizableHandleElementBase: BaseElementConstructor<ResizableHandleProps> = defineCustomElement<
-  ResizableHandleProps,
-  ResizableHandleEvents
->({
-  props: resizableHandleProps,
-  events: resizableHandleEvents,
-  setup: useResizableHandle,
-})
-class ResizableHandleElement extends ResizableHandleElementBase {}
-
-registerCustomElement('prosekit-resizable-handle', ResizableHandleElement)
-  
-export { ResizableHandleElement }

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

@@ -1,106 +0,0 @@
-import { createSignal, useEffect, type ConnectableElement, type ReadonlySignal, type SignalState } from '@aria-ui/core'
-import { getWindow } from '@ocavue/utils'
-
-import {
-  onResizeContext,
-  onResizeEndContext,
-  onResizeStartContext,
-  type OnResize,
-  type OnResizeEnd,
-  type OnResizeStart,
-} from '../context.ts'
-
-import { calcResize } from './calc-resize.ts'
-import type { ResizableHandleProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useResizableHandle(
-  host: ConnectableElement,
-  { state }: { state: SignalState<ResizableHandleProps> },
-): void {
-  const onResize = onResizeContext.consume(host)
-  const onResizeStart = onResizeStartContext.consume(host)
-  const onResizeEnd = onResizeEndContext.consume(host)
-
-  useResizableHandleState(host, state, { onResize, onResizeStart, onResizeEnd })
-}
-
-function useResizableHandleState(
-  host: ConnectableElement,
-  state: SignalState<ResizableHandleProps>,
-  context: {
-    onResizeStart: ReadonlySignal<OnResizeStart>
-    onResize: ReadonlySignal<OnResize>
-    onResizeEnd: ReadonlySignal<OnResizeEnd>
-  },
-) {
-  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 = context.onResizeStart.get()?.()
-    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(
-      state.position.peek(),
-      width,
-      height,
-      dx,
-      dy,
-      aspectRatio,
-    )
-
-    context.onResize.get()?.(w, h)
-  }
-
-  const handlePointerUp = (event: PointerEvent) => {
-    event.preventDefault()
-    pointerPressing.set(false)
-
-    context.onResizeEnd.get()?.()
-  }
-
-  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)
-    }
-  })
-}

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

@@ -1,29 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-
-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 resizableHandleProps: PropDeclarations<ResizableHandleProps> = {
-  position: { default: 'bottom-right' },
-}
-
-/** @internal */
-export interface ResizableHandleEvents {}
-
-/** @internal */
-export const resizableHandleEvents: EventDeclarations<ResizableHandleEvents> = {}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useResizableRoot } from "./setup.ts"
-import { resizableRootEvents, resizableRootProps, type ResizableRootEvents, type ResizableRootProps } from "./types.ts"
-
-const ResizableRootElementBase: BaseElementConstructor<ResizableRootProps> = defineCustomElement<
-  ResizableRootProps,
-  ResizableRootEvents
->({
-  props: resizableRootProps,
-  events: resizableRootEvents,
-  setup: useResizableRoot,
-})
-class ResizableRootElement extends ResizableRootElementBase {}
-
-registerCustomElement('prosekit-resizable-root', ResizableRootElement)
-  
-export { ResizableRootElement }

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

@@ -1,84 +0,0 @@
-import { createSignal, useAttribute, useEffect, type ConnectableElement, type SetupOptions } from '@aria-ui/core'
-
-import { isFinitePositiveNumber } from '../../../utils/is-finite-positive-number.ts'
-import {
-  onResizeContext,
-  onResizeEndContext,
-  onResizeStartContext,
-  type OnResize,
-  type OnResizeEnd,
-  type OnResizeStart,
-} from '../context.ts'
-
-import type { ResizableRootEvents, ResizableRootProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useResizableRoot(
-  host: ConnectableElement,
-  { state, emit }: SetupOptions<ResizableRootProps, ResizableRootEvents>,
-): void {
-  const resizing = createSignal(false)
-
-  const onResizeStart: OnResizeStart = () => {
-    const { width, height } = host.getBoundingClientRect()
-
-    let aspectRatio: number = state.aspectRatio.peek() ?? width / height
-
-    if (!isFinitePositiveNumber(aspectRatio)) {
-      aspectRatio = 0
-    }
-
-    emit('resizeStart', { width, height })
-    resizing.set(true)
-    return [width, height, aspectRatio]
-  }
-
-  const onResize: OnResize = (width, height) => {
-    state.width.set(width)
-    state.height.set(height)
-  }
-
-  const onResizeEnd: OnResizeEnd = () => {
-    const { width, height } = host.getBoundingClientRect()
-    emit('resizeEnd', { width, height })
-    resizing.set(false)
-  }
-
-  onResizeStartContext.provide(host, createSignal(onResizeStart))
-  onResizeContext.provide(host, createSignal(onResize))
-  onResizeEndContext.provide(host, createSignal(onResizeEnd))
-
-  useEffect(host, () => {
-    updateResizableRootStyles(
-      host,
-      Math.max(state.width.get() || 0, 1),
-      Math.max(state.height.get() || 0, 1),
-      state.aspectRatio.get(),
-    )
-  })
-
-  useAttribute(host, 'data-resizing', () => (resizing.get() ? '' : undefined))
-}
-
-function updateResizableRootStyles(
-  host: ConnectableElement,
-  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'
-    }
-  }
-}

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

@@ -1,59 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-
-import { isFinitePositiveNumber } from '../../../utils/is-finite-positive-number.ts'
-
-export interface ResizableRootProps {
-  width: number | null
-  height: number | null
-  aspectRatio: number | null
-}
-
-function fromNumberAttribute(value: string | null): number | null {
-  if (typeof value === 'string') {
-    const number = Number.parseFloat(value)
-    if (isFinitePositiveNumber(number)) {
-      return number
-    }
-  }
-  return null
-}
-
-function toNumberAttribute(value: number | null): string | null {
-  if (typeof value === 'number') {
-    return `${value}`
-  }
-  return null
-}
-
-/** @internal */
-export const resizableRootProps: PropDeclarations<ResizableRootProps> = {
-  width: {
-    default: null,
-    attribute: 'data-width',
-    fromAttribute: fromNumberAttribute,
-    toAttribute: toNumberAttribute,
-  },
-  height: {
-    default: null,
-    attribute: 'data-height',
-    fromAttribute: fromNumberAttribute,
-    toAttribute: toNumberAttribute,
-  },
-  aspectRatio: {
-    default: null,
-    attribute: 'data-aspect-ratio',
-    fromAttribute: fromNumberAttribute,
-    toAttribute: toNumberAttribute,
-  },
-}
-
-export interface ResizableRootEvents {
-  resizeStart: CustomEvent<{ width: number; height: number }>
-  resizeEnd: CustomEvent<{ width: number; height: number }>
-}
-
-/** @internal */
-export const resizableRootEvents: EventDeclarations<ResizableRootEvents> = {
-  resizeStart: {},
-  resizeEnd: {},
-}

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

@@ -1,43 +0,0 @@
-import { createContext, type Context } from '@aria-ui/core'
-
-import type { DndInfo, HoveringCellInfo } from './utils.ts'
-
-/**
- * @internal
- */
-export type TableHandleRootContext = HoveringCellInfo | null
-
-/**
- * @internal
- */
-export const tableHandleRootContext: Context<TableHandleRootContext> = createContext(
-  'prosekit-table-handle-root-context',
-  null,
-)
-
-/**
- * @internal
- */
-export type TableHandleDndContext = DndInfo
-
-/**
- * @internal
- */
-export const defaultTableHandleDndContext: TableHandleDndContext = {
-  dragging: false,
-  direction: 'row',
-  draggingIndex: -1,
-  droppingIndex: -1,
-  x: -1,
-  y: -1,
-  startX: -1,
-  startY: -1,
-}
-
-/**
- * @internal
- */
-export const tableHandleDndContext: Context<TableHandleDndContext> = createContext(
-  'prosekit-table-handle-dnd-context',
-  defaultTableHandleDndContext,
-)

package/src/components/table-handle/hooks/use-drop.ts

@@ -1,85 +0,0 @@
-import { createComputed, useEffect, type ConnectableElement, type ReadonlySignal, type Signal } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-import { moveTableColumn, moveTableRow } from '@prosekit/extensions/table'
-
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import type { TableHandleDndContext } from '../context.ts'
-
-export function useDrop(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-  dndContext: Signal<TableHandleDndContext>,
-): void {
-  const dragging = createComputed(() => dndContext.get().dragging)
-
-  useEffect(host, () => {
-    const view = getSafeEditorView(editor.get())
-    if (!view || !view.editable) return
-
-    const ownerDocument = view.dom?.ownerDocument
-    if (!ownerDocument) return
-
-    const handleDrop = () => {
-      if (!dragging.peek()) return
-      const editorValue = editor.peek()
-      if (!editorValue) return
-      const { droppingIndex, draggingIndex, direction } = dndContext.peek()
-
-      // Validate indices
-      if (draggingIndex < 0 || droppingIndex < 0) {
-        console.warn('[prosekit] Invalid drag indices:', { draggingIndex, droppingIndex })
-        return
-      }
-
-      if (direction === 'row') {
-        editorValue.exec(moveTableRow({
-          from: draggingIndex,
-          to: droppingIndex,
-        }))
-        return
-      }
-      if (direction === 'col') {
-        editorValue.exec(moveTableColumn({
-          from: draggingIndex,
-          to: droppingIndex,
-        }))
-        return
-      }
-    }
-
-    // To make `drop` event work, we need to prevent the default behavior of the
-    // `dragover` event for drop zone. Here we set the whole document as the
-    // drop zone so that even the mouse moves outside the editor, the `drop`
-    // event will still be triggered.
-    const handleDragOver = (event: DragEvent) => {
-      if (!dragging.peek()) return
-      event.preventDefault()
-      const prev = dndContext.peek()
-
-      dndContext.set({
-        ...prev,
-        dragging: true,
-        x: event.clientX,
-        y: event.clientY,
-      })
-    }
-
-    const handleDragEnd = () => {
-      if (!dragging.peek()) return
-      const prev = dndContext.peek()
-      dndContext.set({
-        ...prev,
-        dragging: false,
-      })
-    }
-
-    ownerDocument.addEventListener('dragover', handleDragOver)
-    ownerDocument.addEventListener('drop', handleDrop)
-    ownerDocument.addEventListener('dragend', handleDragEnd)
-    return () => {
-      ownerDocument.removeEventListener('dragover', handleDragOver)
-      ownerDocument.removeEventListener('drop', handleDrop)
-      ownerDocument.removeEventListener('dragend', handleDragEnd)
-    }
-  })
-}