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

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

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

@@ -0,0 +1,61 @@
+import { defineProps, type PropsDeclaration } from '@aria-ui/core'
+import { OverlayPositionerPropsDeclaration, type OverlayPositionerProps } from '@aria-ui/elements/overlay'
+import type { Editor } from '@prosekit/core'
+
+/**
+ * @internal
+ */
+export interface SharedTableHandlePositionerProps extends Omit<OverlayPositionerProps, 'hoist' | 'flip' | 'shift' | 'hide' | 'offset'> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+
+  /**
+   * 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: OverlayPositionerProps['hoist']
+
+  /**
+   * @default false
+   * @hidden
+   */
+  flip: OverlayPositionerProps['flip']
+
+  /**
+   * @default false
+   * @hidden
+   */
+  shift: OverlayPositionerProps['shift']
+
+  /**
+   * @default true
+   * @hidden
+   */
+  hide: OverlayPositionerProps['hide']
+
+  /**
+   * @default 0
+   * @hidden
+   */
+  offset: OverlayPositionerProps['offset']
+}
+
+/** @internal */
+export const SharedTableHandlePositionerPropsDeclaration: PropsDeclaration<SharedTableHandlePositionerProps> = defineProps<
+  SharedTableHandlePositionerProps
+>({
+  ...OverlayPositionerPropsDeclaration,
+  editor: { default: null, attribute: false, type: 'json' },
+  hoist: { default: false, attribute: false, type: 'boolean' },
+  flip: { default: false, attribute: false, type: 'json' },
+  shift: { default: false, attribute: false, type: 'boolean' },
+  hide: { default: true, attribute: false, type: 'boolean' },
+  offset: { default: 0, attribute: false, type: 'json' },
+})

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

@@ -0,0 +1,117 @@
+import { computed, createContext, createSignal, type Context, type Signal } from '@aria-ui/core'
+import type { OpenChangeEvent } from '@aria-ui/elements/overlay'
+import { createOverlayStore, type OverlayStore } from '@aria-ui/elements/overlay'
+
+import type { HoveringCellInfo } from './utils.ts'
+
+function noop(): void {}
+function returnTrue(): boolean {
+  return true
+}
+function returnFalse(): boolean {
+  return false
+}
+
+class DndStore {
+  readonly dragging: Signal<boolean> = createSignal(false)
+  readonly direction: Signal<'row' | 'col'> = createSignal<'row' | 'col'>('row')
+  readonly draggingIndex: Signal<number> = createSignal(-1)
+  readonly droppingIndex: Signal<number> = createSignal(-1)
+  readonly x: Signal<number> = createSignal(-1)
+  readonly y: Signal<number> = createSignal(-1)
+  readonly startX: Signal<number> = createSignal(-1)
+  readonly startY: Signal<number> = createSignal(-1)
+}
+
+/**
+ * @internal
+ */
+export interface TableHandleStore {
+  readonly dndStore: DndStore
+  readonly setIsColumnMenuOpen: (open: boolean) => void
+  readonly setIsRowMenuOpen: (open: boolean) => void
+  readonly columnOverlayStore: OverlayStore
+  readonly rowOverlayStore: OverlayStore
+  readonly getReferenceCell: () => HoveringCellInfo | undefined
+}
+
+/**
+ * @internal
+ */
+export function createTableHandleStore(
+  getHoveringCellInfo: () => HoveringCellInfo | undefined,
+  getCanShow: () => boolean,
+): TableHandleStore {
+  const isColumnMenuOpen = createSignal(false)
+  const isRowMenuOpen = createSignal(false)
+
+  const getHasMenuOpen = (): boolean => {
+    return isColumnMenuOpen.get() || isRowMenuOpen.get()
+  }
+
+  const setIsRowMenuOpen = (open: boolean): void => {
+    isRowMenuOpen.set(open)
+  }
+
+  const setIsColumnMenuOpen = (open: boolean): void => {
+    isColumnMenuOpen.set(open)
+  }
+
+  const referenceCellInfo = createSignal<HoveringCellInfo | undefined>(undefined)
+
+  let prevHoveringCellInfo: HoveringCellInfo | undefined = undefined
+
+  const getReferenceCell = computed((): HoveringCellInfo | undefined => {
+    if (!getCanShow()) {
+      referenceCellInfo.set(undefined)
+      return
+    }
+
+    // Do not toggle/update the menu when hovering another cell if the menu is already open
+    if (getHasMenuOpen()) {
+      return prevHoveringCellInfo
+    }
+
+    prevHoveringCellInfo = getHoveringCellInfo()
+    return prevHoveringCellInfo
+  })
+
+  const getOpen = computed((): boolean => {
+    return !!getReferenceCell()
+  })
+
+  const handleOpenChange = (event: OpenChangeEvent) => {
+    if (getHasMenuOpen()) {
+      event.preventDefault()
+    }
+  }
+
+  const columnOverlayStore = createOverlayStore(
+    getOpen,
+    noop,
+    returnTrue,
+    returnFalse,
+    handleOpenChange,
+  )
+  const rowOverlayStore = createOverlayStore(
+    getOpen,
+    noop,
+    returnTrue,
+    returnFalse,
+    handleOpenChange,
+  )
+
+  return {
+    dndStore: new DndStore(),
+    setIsRowMenuOpen,
+    setIsColumnMenuOpen,
+    columnOverlayStore,
+    rowOverlayStore,
+    getReferenceCell,
+  }
+}
+
+/**
+ * @internal
+ */
+export const tableHandleStoreContext: Context<TableHandleStore> = createContext<TableHandleStore>('prosekit-table-handle-store')

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

@@ -0,0 +1,51 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { MenuRootPropsDeclaration, setupMenuRoot, type MenuRootProps } from '@aria-ui/elements/menu'
+
+import { tableHandleStoreContext } from './store.ts'
+
+export interface TableHandleColumnMenuRootProps extends MenuRootProps {}
+
+/** @internal */
+export const TableHandleColumnMenuRootPropsDeclaration: PropsDeclaration<TableHandleColumnMenuRootProps> = defineProps<
+  TableHandleColumnMenuRootProps
+>(MenuRootPropsDeclaration)
+
+/** @internal */
+export function setupTableHandleColumnMenuRoot(
+  host: HostElement,
+  props: State<TableHandleColumnMenuRootProps>,
+): void {
+  setupMenuRoot(host, props)
+  const getStore = tableHandleStoreContext.consume(host)
+
+  useEffect(host, () => {
+    const open = props.open.get() || false
+    const store = getStore?.()
+    if (!store) return
+    store.setIsColumnMenuOpen(open)
+  })
+}
+
+const TableHandleColumnMenuRootElementBase: HostElementConstructor<TableHandleColumnMenuRootProps> = defineCustomElement(
+  setupTableHandleColumnMenuRoot,
+  TableHandleColumnMenuRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleColumnMenuRootElement extends TableHandleColumnMenuRootElementBase {}
+
+/** @internal */
+export function registerTableHandleColumnMenuRootElement(): void {
+  registerCustomElement('prosekit-table-handle-column-menu-root', TableHandleColumnMenuRootElement)
+}

package/src/components/table-handle/table-handle-column-menu-trigger.ts

@@ -0,0 +1,107 @@
+import {
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  onMount,
+  registerCustomElement,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupMenuTrigger, type MenuTriggerProps } from '@aria-ui/elements/menu'
+import type { Editor } from '@prosekit/core'
+import { selectTableColumn, type defineTableCommands } from '@prosekit/extensions/table'
+
+import { tableHandleStoreContext } from './store.ts'
+import { useEmptyImage } from './use-empty-image.ts'
+
+type TableCommandsExtension = ReturnType<typeof defineTableCommands>
+
+export interface TableHandleColumnMenuTriggerProps {
+  /**
+   * @default null
+   * @hidden
+   */
+  editor: Editor<TableCommandsExtension> | null
+}
+
+/** @internal */
+export const TableHandleColumnMenuTriggerPropsDeclaration: PropsDeclaration<TableHandleColumnMenuTriggerProps> = defineProps<
+  TableHandleColumnMenuTriggerProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/** @internal */
+export function setupTableHandleColumnMenuTrigger(
+  host: HostElement,
+  props: State<TableHandleColumnMenuTriggerProps>,
+): void {
+  const getEditor = props.editor.get
+  const getStore = tableHandleStoreContext.consume(host)
+
+  const triggerProps: State<MenuTriggerProps> = {
+    disabled: createSignal(false),
+  }
+  setupMenuTrigger(host, triggerProps)
+
+  useEventListener(host, 'pointerdown', () => {
+    const editor = getEditor()
+    const cellPos = getStore()?.getReferenceCell()?.cellPos
+    if (!editor || !cellPos) return
+    editor.exec(selectTableColumn({ head: cellPos }))
+  })
+
+  onMount(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)
+      }
+      dataTransfer.setData('application/x-prosekit-table-handle-drag', '')
+    }
+    const store = getStore()
+    if (!store) return
+    const index = store.getReferenceCell()?.colIndex
+
+    if (index == null || index < 0) {
+      console.warn('[prosekit] Invalid column index for drag operation:', index)
+      event.preventDefault()
+      return
+    }
+
+    const dndStore = store.dndStore
+    dndStore.direction.set('col')
+    dndStore.dragging.set(true)
+    dndStore.draggingIndex.set(index)
+    dndStore.startX.set(event.clientX)
+    dndStore.startY.set(event.clientY)
+  })
+}
+
+const TableHandleColumnMenuTriggerElementBase: HostElementConstructor<TableHandleColumnMenuTriggerProps> = defineCustomElement(
+  setupTableHandleColumnMenuTrigger,
+  TableHandleColumnMenuTriggerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleColumnMenuTriggerElement extends TableHandleColumnMenuTriggerElementBase {}
+
+/**
+ * @internal
+ */
+export function registerTableHandleColumnMenuTriggerElement(): void {
+  registerCustomElement('prosekit-table-handle-column-menu-trigger', TableHandleColumnMenuTriggerElement)
+}

package/src/components/table-handle/table-handle-column-popup.ts

@@ -0,0 +1,44 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupOverlayPopup } from '@aria-ui/elements/overlay'
+
+import { tableHandleStoreContext } from './store.ts'
+
+export interface TableHandleColumnPopupProps {}
+
+/** @internal */
+export const TableHandleColumnPopupPropsDeclaration: PropsDeclaration<TableHandleColumnPopupProps> = defineProps<
+  TableHandleColumnPopupProps
+>({})
+
+/** @internal */
+export function setupTableHandleColumnPopup(
+  host: HostElement,
+  _props: State<TableHandleColumnPopupProps>,
+): void {
+  const getStore = tableHandleStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.columnOverlayStore
+  setupOverlayPopup(host, getOverlayStore)
+}
+
+const TableHandleColumnPopupElementBase: HostElementConstructor<TableHandleColumnPopupProps> = defineCustomElement(
+  setupTableHandleColumnPopup,
+  TableHandleColumnPopupPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleColumnPopupElement extends TableHandleColumnPopupElementBase {}
+
+/** @internal */
+export function registerTableHandleColumnPopupElement(): void {
+  registerCustomElement('prosekit-table-handle-column-popup', TableHandleColumnPopupElement)
+}

package/src/components/table-handle/table-handle-column-positioner.ts

@@ -0,0 +1,67 @@
+import {
+  computed,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupOverlayPositioner } from '@aria-ui/elements/overlay'
+import type { Placement } from '@floating-ui/dom'
+
+import { useHTMLElementAt } from '../../utils/use-html-element-at.ts'
+
+import { SharedTableHandlePositionerPropsDeclaration, type SharedTableHandlePositionerProps } from './shared.ts'
+import { tableHandleStoreContext } from './store.ts'
+
+export interface TableHandleColumnPositionerProps extends Omit<SharedTableHandlePositionerProps, 'placement'> {
+  /**
+   * The placement of the popover, relative to the hovered table cell.
+   *
+   * @default "top"
+   */
+  placement: Placement
+}
+
+/** @internal */
+export const TableHandleColumnPositionerPropsDeclaration: PropsDeclaration<TableHandleColumnPositionerProps> = defineProps<
+  TableHandleColumnPositionerProps
+>({
+  ...SharedTableHandlePositionerPropsDeclaration,
+  placement: { default: 'top', attribute: 'placement', type: 'string' },
+})
+
+/** @internal */
+export function setupTableHandleColumnPositioner(
+  host: HostElement,
+  props: State<TableHandleColumnPositionerProps>,
+): void {
+  const getStore = tableHandleStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.columnOverlayStore
+  setupOverlayPositioner(host, props, getOverlayStore)
+
+  const getEditor = props.editor.get
+  const getColumnFirstCellPos = computed(() => getStore()?.getReferenceCell()?.colFirstCellPos)
+  const getReferenceCell = useHTMLElementAt(getEditor, getColumnFirstCellPos)
+  useEffect(host, () => {
+    getOverlayStore()?.setAnchorElement(getReferenceCell())
+  })
+}
+
+const TableHandleColumnPositionerElementBase: HostElementConstructor<TableHandleColumnPositionerProps> = defineCustomElement(
+  setupTableHandleColumnPositioner,
+  TableHandleColumnPositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleColumnPositionerElement extends TableHandleColumnPositionerElementBase {}
+
+/** @internal */
+export function registerTableHandleColumnPositionerElement(): void {
+  registerCustomElement('prosekit-table-handle-column-positioner', TableHandleColumnPositionerElement)
+}