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

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

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

@@ -1,37 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { TableHandleColumnRootElement } from './table-handle-column-root/element.gen.ts'
-export { tableHandleColumnRootEvents, tableHandleColumnRootProps, type TableHandleColumnRootEvents, type TableHandleColumnRootProps } from './table-handle-column-root/types.ts'
-export { useTableHandleColumnRoot } from './table-handle-column-root/setup.ts'
-
-export { TableHandleColumnTriggerElement } from './table-handle-column-trigger/element.gen.ts'
-export { tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, type TableHandleColumnTriggerEvents, type TableHandleColumnTriggerProps } from './table-handle-column-trigger/types.ts'
-export { useTableHandleColumnTrigger } from './table-handle-column-trigger/setup.ts'
-
-export { TableHandleDragPreviewElement } from './table-handle-drag-preview/element.gen.ts'
-export { tableHandleDragPreviewEvents, tableHandleDragPreviewProps, type TableHandleDragPreviewEvents, type TableHandleDragPreviewProps } from './table-handle-drag-preview/types.ts'
-export { useTableHandleDragPreview } from './table-handle-drag-preview/setup.ts'
-
-export { TableHandleDropIndicatorElement } from './table-handle-drop-indicator/element.gen.ts'
-export { tableHandleDropIndicatorEvents, tableHandleDropIndicatorProps, type TableHandleDropIndicatorEvents, type TableHandleDropIndicatorProps } from './table-handle-drop-indicator/types.ts'
-export { useTableHandleDropIndicator } from './table-handle-drop-indicator/setup.ts'
-
-export { TableHandlePopoverContentElement } from './table-handle-popover-content/element.gen.ts'
-export { tableHandlePopoverContentEvents, tableHandlePopoverContentProps, type TableHandlePopoverContentEvents, type TableHandlePopoverContentProps } from './table-handle-popover-content/types.ts'
-export { useTableHandlePopoverContent } from './table-handle-popover-content/setup.ts'
-
-export { TableHandlePopoverItemElement } from './table-handle-popover-item/element.gen.ts'
-export { tableHandlePopoverItemEvents, tableHandlePopoverItemProps, type TableHandlePopoverItemEvents, type TableHandlePopoverItemProps } from './table-handle-popover-item/types.ts'
-export { useTableHandlePopoverItem } from './table-handle-popover-item/setup.ts'
-
-export { TableHandleRootElement } from './table-handle-root/element.gen.ts'
-export { tableHandleRootEvents, tableHandleRootProps, type TableHandleRootEvents, type TableHandleRootProps } from './table-handle-root/types.ts'
-export { useTableHandleRoot } from './table-handle-root/setup.ts'
-
-export { TableHandleRowRootElement } from './table-handle-row-root/element.gen.ts'
-export { tableHandleRowRootEvents, tableHandleRowRootProps, type TableHandleRowRootEvents, type TableHandleRowRootProps } from './table-handle-row-root/types.ts'
-export { useTableHandleRowRoot } from './table-handle-row-root/setup.ts'
-
-export { TableHandleRowTriggerElement } from './table-handle-row-trigger/element.gen.ts'
-export { tableHandleRowTriggerEvents, tableHandleRowTriggerProps, type TableHandleRowTriggerEvents, type TableHandleRowTriggerProps } from './table-handle-row-trigger/types.ts'
-export { useTableHandleRowTrigger } from './table-handle-row-trigger/setup.ts'

package/src/components/table-handle/table-handle-column-root/element.gen.ts

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleColumnRoot } from "./setup.ts"
-import { tableHandleColumnRootEvents, tableHandleColumnRootProps, type TableHandleColumnRootEvents, type TableHandleColumnRootProps } from "./types.ts"
-
-const TableHandleColumnRootElementBase: BaseElementConstructor<TableHandleColumnRootProps> = defineCustomElement<
-  TableHandleColumnRootProps,
-  TableHandleColumnRootEvents
->({
-  props: tableHandleColumnRootProps,
-  events: tableHandleColumnRootEvents,
-  setup: useTableHandleColumnRoot,
-})
-class TableHandleColumnRootElement extends TableHandleColumnRootElementBase {}
-
-registerCustomElement('prosekit-table-handle-column-root', TableHandleColumnRootElement)
-  
-export { TableHandleColumnRootElement }

package/src/components/table-handle/table-handle-column-root/setup.ts

@@ -1,60 +0,0 @@
-import { createComputed, createSignal, useAttribute, useEffect, type ConnectableElement, type SignalState } from '@aria-ui/core'
-import { menuRootProps, useMenuRoot, type MenuRootProps } from '@aria-ui/menu/elements'
-import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
-import { usePresence } from '@aria-ui/presence'
-
-import { getStateWithDefaults } from '../../../utils/get-default-state.ts'
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import { tableHandleRootContext } from '../context.ts'
-
-import type { TableHandleColumnRootProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useTableHandleColumnRoot(
-  host: ConnectableElement,
-  { state }: { state: SignalState<TableHandleColumnRootProps> },
-): void {
-  const { editor, ...overlayState } = state
-
-  const rootContext = tableHandleRootContext.consume(host)
-
-  const colFirstCellPos = createComputed<number | undefined>(() => {
-    return rootContext.get()?.colFirstCellPos
-  })
-
-  const referenceCell = createComputed<HTMLElement | null>(() => {
-    const pos = colFirstCellPos.get()
-    const view = getSafeEditorView(editor.get())
-    if (!pos || !view) return null
-    return view.nodeDOM(pos) as HTMLElement | null
-  })
-
-  const contentOpen = createSignal(false)
-
-  // Close the menu when the hovering element is changed
-  // TODO: add a delay
-  useEffect(host, () => {
-    colFirstCellPos.get()
-    contentOpen.set(false)
-  })
-
-  useOverlayPositionerState(host, overlayState, {
-    reference: referenceCell,
-  })
-
-  const presence = createComputed(() => !!referenceCell.get())
-  useAttribute(host, 'data-state', () => (presence.get() ? 'open' : 'closed'))
-  usePresence(host, presence)
-
-  const menuRootState: SignalState<MenuRootProps> = getStateWithDefaults(
-    { open: contentOpen },
-    menuRootProps,
-  )
-
-  useMenuRoot(host, {
-    state: menuRootState,
-    emit: () => void 0,
-  })
-}

package/src/components/table-handle/table-handle-column-root/types.ts

@@ -1,73 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import {
-  overlayPositionerEvents,
-  overlayPositionerProps,
-  type OverlayPositionerEvents,
-  type OverlayPositionerProps,
-} from '@aria-ui/overlay'
-import type { Placement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-
-export interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-
-  /**
-   * The placement of the popover, relative to the hovered table cell.
-   *
-   * @default "top"
-   */
-  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 tableHandleColumnRootProps: PropDeclarations<TableHandleColumnRootProps> = Object.freeze({
-  ...overlayPositionerProps,
-  editor: { default: null },
-  placement: { default: 'top' },
-
-  // Enabling `hoist` will cause the popover to have a small delay when
-  // scrolling the page.
-  hoist: { default: false },
-
-  flip: { default: false },
-  shift: { default: false },
-  hide: { default: true },
-})
-
-/** @internal */
-export interface TableHandleColumnRootEvents extends OverlayPositionerEvents {}
-
-/** @internal */
-export const tableHandleColumnRootEvents: EventDeclarations<TableHandleColumnRootEvents> = overlayPositionerEvents

package/src/components/table-handle/table-handle-column-trigger/element.gen.ts

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleColumnTrigger } from "./setup.ts"
-import { tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, type TableHandleColumnTriggerEvents, type TableHandleColumnTriggerProps } from "./types.ts"
-
-const TableHandleColumnTriggerElementBase: BaseElementConstructor<TableHandleColumnTriggerProps> = defineCustomElement<
-  TableHandleColumnTriggerProps,
-  TableHandleColumnTriggerEvents
->({
-  props: tableHandleColumnTriggerProps,
-  events: tableHandleColumnTriggerEvents,
-  setup: useTableHandleColumnTrigger,
-})
-class TableHandleColumnTriggerElement extends TableHandleColumnTriggerElementBase {}
-
-registerCustomElement('prosekit-table-handle-column-trigger', TableHandleColumnTriggerElement)
-  
-export { TableHandleColumnTriggerElement }