@prosekit/web 0.7.2 → 0.7.4

package/src/components/table-handle/table-handle-popover-item/setup.ts

@@ -0,0 +1,23 @@
+import type {
+  ConnectableElement,
+  SetupOptions,
+} from '@aria-ui/core'
+import { useMenuItem } from '@aria-ui/menu/elements'
+
+import type {
+  TableHandlePopoverItemEvents,
+  TableHandlePopoverItemProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useTableHandlePopoverItem(
+  element: ConnectableElement,
+  {
+    state,
+    emit,
+  }: SetupOptions<TableHandlePopoverItemProps, TableHandlePopoverItemEvents>,
+): void {
+  useMenuItem(element, { state, emit })
+}

package/src/components/table-handle/table-handle-popover-item/types.ts

@@ -0,0 +1,24 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  menuItemEvents,
+  menuItemProps,
+  type MenuItemEvents,
+  type MenuItemProps,
+} from '@aria-ui/menu'
+
+export interface TableHandlePopoverItemProps extends MenuItemProps {}
+
+/** @internal */
+export const tableHandlePopoverItemProps: PropDeclarations<TableHandlePopoverItemProps> = {
+  ...menuItemProps,
+}
+
+export interface TableHandlePopoverItemEvents extends MenuItemEvents {}
+
+/** @internal */
+export const tableHandlePopoverItemEvents: EventDeclarations<TableHandlePopoverItemEvents> = {
+  ...menuItemEvents,
+}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleRoot } from "./setup"
+import { tableHandleRootEvents, tableHandleRootProps, type TableHandleRootEvents, type TableHandleRootProps } from "./types"
+
+const TableHandleRootElementBase: BaseElementConstructor<TableHandleRootProps> = defineCustomElement<
+  TableHandleRootProps,
+  TableHandleRootEvents
+>({
+  props: tableHandleRootProps,
+  events: tableHandleRootEvents,
+  setup: useTableHandleRoot,
+})
+class TableHandleRootElement extends TableHandleRootElementBase {}
+
+registerCustomElement('prosekit-table-handle-root', TableHandleRootElement)
+  
+export { TableHandleRootElement }

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

@@ -0,0 +1,93 @@
+import {
+  createComputed,
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+  type Signal,
+  type SignalState,
+} from '@aria-ui/core'
+import {
+  defineDOMEventHandler,
+  type Editor,
+} from '@prosekit/core'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { useEditorExtension } from '../../../hooks/use-editor-extension'
+import { useEditorTyping } from '../../../hooks/use-editor-typing'
+import { useScrolling } from '../../../hooks/use-scrolling'
+import { useSelecting } from '../../../hooks/use-selecting'
+import {
+  defaultTableHandleDndContext,
+  tableHandleDndContext,
+  tableHandleRootContext,
+  type TableHandleDndContext,
+  type TableHandleRootContext,
+} from '../context'
+import { useDrop } from '../hooks/use-drop'
+import {
+  getHoveringCell,
+  isHoveringCellInfoEqual,
+  type HoveringCellInfo,
+} from '../utils'
+
+import type { TableHandleRootProps } from './types'
+
+/**
+ * @internal
+ */
+export function useTableHandleRoot(
+  host: ConnectableElement,
+  { state }: { state: SignalState<TableHandleRootProps> },
+): void {
+  const { editor } = state
+
+  const context = createSignal<TableHandleRootContext>(null)
+  const dndContext = createSignal<TableHandleDndContext>(defaultTableHandleDndContext)
+
+  const hoveringCell = useHoveringCell(host, editor)
+  const typing = useEditorTyping(host, editor)
+  const isInTable = createComputed(() => !!hoveringCell.get())
+  const selecting = useSelecting(host, editor, isInTable)
+  const scrolling = useScrolling(host)
+  const canShow = createComputed(() => {
+    return !typing.get() && !selecting.get() && !scrolling.get()
+  })
+
+  useEffect(host, () => {
+    context.set(canShow.get() ? hoveringCell.get() : null)
+  })
+
+  tableHandleRootContext.provide(host, context)
+  tableHandleDndContext.provide(host, dndContext)
+
+  useDrop(host, editor, dndContext)
+}
+
+function useHoveringCell(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+): Signal<HoveringCellInfo | null> {
+  const hoveringCell = createSignal<HoveringCellInfo | null>(null)
+
+  const extension = defineCellHoverHandler((curr: HoveringCellInfo | null) => {
+    const prev = hoveringCell.peek()
+    if (!isHoveringCellInfoEqual(prev, curr)) {
+      hoveringCell.set(curr)
+    }
+  })
+
+  useEditorExtension(host, editor, extension)
+
+  return hoveringCell
+}
+
+function defineCellHoverHandler(
+  handler: (hoveringCell: HoveringCellInfo | null) => void,
+) {
+  const pointerHandler = (view: EditorView, event: PointerEvent) => {
+    const hoveringCell = getHoveringCell(view, event)
+    return handler(hoveringCell ?? null)
+  }
+  return defineDOMEventHandler('pointerover', pointerHandler)
+}

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

@@ -0,0 +1,26 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+
+export interface TableHandleRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const tableHandleRootProps: PropDeclarations<TableHandleRootProps> = {
+  editor: { default: null },
+}
+
+/** @internal */
+export interface TableHandleRootEvents {}
+
+/** @internal */
+export const tableHandleRootEvents: EventDeclarations<TableHandleRootEvents> = {}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleRowRoot } from "./setup"
+import { tableHandleRowRootEvents, tableHandleRowRootProps, type TableHandleRowRootEvents, type TableHandleRowRootProps } from "./types"
+
+const TableHandleRowRootElementBase: BaseElementConstructor<TableHandleRowRootProps> = defineCustomElement<
+  TableHandleRowRootProps,
+  TableHandleRowRootEvents
+>({
+  props: tableHandleRowRootProps,
+  events: tableHandleRowRootEvents,
+  setup: useTableHandleRowRoot,
+})
+class TableHandleRowRootElement extends TableHandleRowRootElementBase {}
+
+registerCustomElement('prosekit-table-handle-row-root', TableHandleRowRootElement)
+  
+export { TableHandleRowRootElement }

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

@@ -0,0 +1,77 @@
+import {
+  createComputed,
+  createSignal,
+  defineEmit,
+  useAttribute,
+  useEffect,
+  type ConnectableElement,
+  type SetupOptions,
+} from '@aria-ui/core'
+import {
+  menuRootEvents,
+  menuRootProps,
+  useMenuRoot,
+} 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'
+import { getSafeEditorView } from '../../../utils/get-safe-editor-view'
+import { tableHandleRootContext } from '../context'
+
+import type {
+  TableHandleRowRootEvents,
+  TableHandleRowRootProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useTableHandleRowRoot(
+  host: ConnectableElement,
+  { state }: SetupOptions<TableHandleRowRootProps, TableHandleRowRootEvents>,
+): void {
+  const { editor, ...overlayState } = state
+
+  const rootContext = tableHandleRootContext.consume(host)
+
+  const rowFirstCellPos = createComputed<number | undefined>(() => {
+    return rootContext.get()?.rowFirstCellPos
+  })
+
+  const referenceCell = createComputed<HTMLElement | null>(() => {
+    const pos = rowFirstCellPos.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, () => {
+    rowFirstCellPos.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 = getStateWithDefaults(
+    {
+      open: contentOpen,
+    },
+    menuRootProps,
+  )
+
+  useMenuRoot(host, {
+    state: menuRootState,
+    emit: defineEmit(host, menuRootEvents),
+  })
+}

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

@@ -0,0 +1,75 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  overlayPositionerProps,
+  type OverlayPositionerEvents,
+  type OverlayPositionerProps,
+} from '@aria-ui/overlay'
+import type { Placement } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+
+export interface TableHandleRowRootProps 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 "left"
+   */
+  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 tableHandleRowRootProps: PropDeclarations<TableHandleRowRootProps> = {
+  ...overlayPositionerProps,
+  editor: { default: null },
+  placement: { default: 'left' },
+
+  // 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 TableHandleRowRootEvents extends OverlayPositionerEvents {}
+
+/** @internal */
+export const tableHandleRowRootEvents: EventDeclarations<TableHandleRowRootEvents> = {}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleRowTrigger } from "./setup"
+import { tableHandleRowTriggerEvents, tableHandleRowTriggerProps, type TableHandleRowTriggerEvents, type TableHandleRowTriggerProps } from "./types"
+
+const TableHandleRowTriggerElementBase: BaseElementConstructor<TableHandleRowTriggerProps> = defineCustomElement<
+  TableHandleRowTriggerProps,
+  TableHandleRowTriggerEvents
+>({
+  props: tableHandleRowTriggerProps,
+  events: tableHandleRowTriggerEvents,
+  setup: useTableHandleRowTrigger,
+})
+class TableHandleRowTriggerElement extends TableHandleRowTriggerElementBase {}
+
+registerCustomElement('prosekit-table-handle-row-trigger', TableHandleRowTriggerElement)
+  
+export { TableHandleRowTriggerElement }

package/src/components/table-handle/table-handle-row-trigger/setup.ts

@@ -0,0 +1,74 @@
+import {
+  useEffect,
+  useEventListener,
+  type ConnectableElement,
+  type SetupOptions,
+} from '@aria-ui/core'
+import { useMenuTrigger } from '@aria-ui/menu/elements'
+import { selectTableRow } from '@prosekit/extensions/table'
+
+import {
+  tableHandleDndContext,
+  tableHandleRootContext,
+} from '../context'
+import { useEmptyImage } from '../hooks/use-empty-image'
+
+import type {
+  TableHandleRowTriggerEvents,
+  TableHandleRowTriggerProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useTableHandleRowTrigger(
+  host: ConnectableElement,
+  { state }: SetupOptions<TableHandleRowTriggerProps, TableHandleRowTriggerEvents>,
+): void {
+  useMenuTrigger(host)
+
+  const context = tableHandleRootContext.consume(host)
+
+  const dndContext = tableHandleDndContext.consume(host)
+
+  useEventListener(host, 'pointerdown', () => {
+    const editor = state.editor.peek()
+    const cellPos = context.peek()?.cellPos
+    if (!editor || !cellPos) return
+    editor.exec(selectTableRow({ head: cellPos }))
+  })
+
+  useEffect(host, () => {
+    host.draggable = true
+  })
+
+  const getEmptyImage = useEmptyImage(host)
+
+  useEventListener(host, 'dragstart', (event: DragEvent) => {
+    const dataTransfer = event.dataTransfer
+    if (dataTransfer) {
+      dataTransfer.effectAllowed = 'move'
+      const emptyImage = getEmptyImage()
+      if (emptyImage) {
+        dataTransfer.setDragImage(emptyImage, 0, 0)
+      }
+    }
+    const prev = dndContext.peek()
+    const index = context.peek()?.rowIndex
+
+    if (index == null || index < 0) {
+      console.warn('[prosekit] Invalid row index for drag operation:', index)
+      event.preventDefault()
+      return
+    }
+
+    dndContext.set({
+      ...prev,
+      direction: 'row',
+      dragging: true,
+      draggingIndex: index,
+      startX: event.clientX,
+      startY: event.clientY,
+    })
+  })
+}

package/src/components/table-handle/table-handle-row-trigger/types.ts

@@ -0,0 +1,26 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+import type { defineTableCommands } from '@prosekit/extensions/table'
+
+type TableCommandsExtension = ReturnType<typeof defineTableCommands>
+
+export interface TableHandleRowTriggerProps {
+  editor: Editor<TableCommandsExtension> | null
+}
+
+/** @internal */
+export const tableHandleRowTriggerProps: PropDeclarations<TableHandleRowTriggerProps> = {
+  editor: { default: null },
+}
+
+export interface TableHandleRowTriggerEvents {
+  select: CustomEvent<void>
+}
+
+/** @internal */
+export const tableHandleRowTriggerEvents: EventDeclarations<TableHandleRowTriggerEvents> = {
+  select: {},
+}

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

@@ -0,0 +1,107 @@
+import type { EditorView } from '@prosekit/pm/view'
+import {
+  cellAround,
+  TableMap,
+} from 'prosemirror-tables'
+
+export interface HoveringCellInfo {
+  rowIndex: number
+  colIndex: number
+  cellPos: number
+  rowFirstCellPos: number
+  colFirstCellPos: number
+}
+
+export interface DndInfo {
+  dragging: boolean
+  direction: 'row' | 'col'
+  draggingIndex: number
+  droppingIndex: number
+  x: number
+  y: number
+  startX: number
+  startY: number
+}
+
+export function isHoveringCellInfoEqual(
+  a?: HoveringCellInfo | null,
+  b?: HoveringCellInfo | null,
+): boolean {
+  if (!a && !b) return true
+  if (!a || !b) return false
+  return (
+    a.rowIndex === b.rowIndex
+    && a.colIndex === b.colIndex
+    && a.cellPos === b.cellPos
+    && a.rowFirstCellPos === b.rowFirstCellPos
+    && a.colFirstCellPos === b.colFirstCellPos
+  )
+}
+
+/**
+ * Copied from https://github.com/ProseMirror/prosemirror-tables/blob/v1.5.0/src/columnresizing.ts#L256
+ *
+ * @internal
+ */
+function domCellAround(target: HTMLElement | null): HTMLElement | null {
+  while (target && target.nodeName != 'TD' && target.nodeName != 'TH') {
+    target = target.classList?.contains('ProseMirror')
+      ? null
+      : (target.parentNode as HTMLElement | null)
+  }
+  return target
+}
+
+export function getHoveringCell(
+  view: EditorView,
+  event: MouseEvent,
+): HoveringCellInfo | undefined {
+  const domCell = domCellAround(event.target as HTMLElement | null)
+  if (!domCell) return
+
+  const { left, top, width, height } = domCell.getBoundingClientRect()
+  const eventPos = view.posAtCoords({
+    // Use the center coordinates of the cell to ensure we're within the
+    // selected cell. This prevents potential issues when the mouse is on the
+    // border of two cells.
+    left: left + width / 2,
+    top: top + height / 2,
+  })
+  if (!eventPos) return
+
+  const $cellPos = cellAround(view.state.doc.resolve(eventPos.pos))
+  if (!$cellPos) return
+
+  const map = TableMap.get($cellPos.node(-1))
+  const tableStart = $cellPos.start(-1)
+  const cellRect = map.findCell($cellPos.pos - tableStart)
+  const rowIndex = cellRect.top
+  const colIndex = cellRect.left
+
+  return {
+    rowIndex,
+    colIndex,
+    cellPos: $cellPos.pos,
+    rowFirstCellPos: getCellPos(map, tableStart, rowIndex, 0),
+    colFirstCellPos: getCellPos(map, tableStart, 0, colIndex),
+  }
+}
+
+function getCellPos(
+  map: TableMap,
+  tableStart: number,
+  rowIndex: number,
+  colIndex: number,
+) {
+  const cellIndex = getCellIndex(map, rowIndex, colIndex)
+  const posInTable = map.map[cellIndex]
+  return tableStart + posInTable
+}
+
+function getCellIndex(
+  map: TableMap,
+  rowIndex: number,
+  colIndex: number,
+): number {
+  return map.width * rowIndex + colIndex
+}

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

@@ -0,0 +1,13 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { TooltipContentElement } from './tooltip-content/element.gen'
+export { tooltipContentEvents, tooltipContentProps, type TooltipContentEvents, type TooltipContentProps } from './tooltip-content/types'
+export { useTooltipContent } from './tooltip-content/setup'
+
+export { TooltipRootElement } from './tooltip-root/element.gen'
+export { tooltipRootEvents, tooltipRootProps, type TooltipRootEvents, type TooltipRootProps } from './tooltip-root/types'
+export { useTooltipRoot } from './tooltip-root/setup'
+
+export { TooltipTriggerElement } from './tooltip-trigger/element.gen'
+export { tooltipTriggerEvents, tooltipTriggerProps, type TooltipTriggerEvents, type TooltipTriggerProps } from './tooltip-trigger/types'
+export { useTooltipTrigger } from './tooltip-trigger/setup'

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTooltipContent } from "./setup"
+import { tooltipContentEvents, tooltipContentProps, type TooltipContentEvents, type TooltipContentProps } from "./types"
+
+const TooltipContentElementBase: BaseElementConstructor<TooltipContentProps> = defineCustomElement<
+  TooltipContentProps,
+  TooltipContentEvents
+>({
+  props: tooltipContentProps,
+  events: tooltipContentEvents,
+  setup: useTooltipContent,
+})
+class TooltipContentElement extends TooltipContentElementBase {}
+
+registerCustomElement('prosekit-tooltip-content', TooltipContentElement)
+  
+export { TooltipContentElement }

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

@@ -0,0 +1 @@
+export { useTooltipContent } from '@aria-ui/tooltip/elements'

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

@@ -0,0 +1,12 @@
+import type {
+  TooltipContentEvents as Events,
+  TooltipContentProps as Props,
+} from '@aria-ui/tooltip/elements'
+
+export {
+  tooltipContentEvents,
+  tooltipContentProps,
+} from '@aria-ui/tooltip/elements'
+
+export interface TooltipContentProps extends Props {}
+export interface TooltipContentEvents extends Events {}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTooltipRoot } from "./setup"
+import { tooltipRootEvents, tooltipRootProps, type TooltipRootEvents, type TooltipRootProps } from "./types"
+
+const TooltipRootElementBase: BaseElementConstructor<TooltipRootProps> = defineCustomElement<
+  TooltipRootProps,
+  TooltipRootEvents
+>({
+  props: tooltipRootProps,
+  events: tooltipRootEvents,
+  setup: useTooltipRoot,
+})
+class TooltipRootElement extends TooltipRootElementBase {}
+
+registerCustomElement('prosekit-tooltip-root', TooltipRootElement)
+  
+export { TooltipRootElement }

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

@@ -0,0 +1 @@
+export { useTooltipRoot } from '@aria-ui/tooltip/elements'

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

@@ -0,0 +1,12 @@
+import type {
+  TooltipRootEvents as Events,
+  TooltipRootProps as Props,
+} from '@aria-ui/tooltip/elements'
+
+export {
+  tooltipRootEvents,
+  tooltipRootProps,
+} from '@aria-ui/tooltip/elements'
+
+export interface TooltipRootProps extends Props {}
+export interface TooltipRootEvents extends Events {}