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

package/src/components/block-handle/block-handle-popover/types.ts

@@ -1,81 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import {
-  overlayPositionerEvents,
-  overlayPositionerProps,
-  type OverlayPositionerEvents,
-  type OverlayPositionerProps,
-} from '@aria-ui/overlay/elements'
-import type { Placement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-import type { ProseMirrorNode } from '@prosekit/pm/model'
-
-export interface BlockHandlePopoverProps 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 block.
-   *
-   * @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 blockHandlePopoverProps: PropDeclarations<BlockHandlePopoverProps> = {
-  ...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 },
-}
-
-export interface BlockHandlePopoverEvents extends OverlayPositionerEvents {
-  /**
-   * Fired when the hovered block changes.
-   */
-  stateChange: CustomEvent<{ node: ProseMirrorNode; pos: number } | null>
-}
-
-/** @internal */
-export const blockHandlePopoverEvents: EventDeclarations<BlockHandlePopoverEvents> = {
-  ...overlayPositionerEvents,
-  stateChange: {},
-}

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

@@ -1,13 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { BlockHandleAddElement } from './block-handle-add/element.gen.ts'
-export { blockHandleAddEvents, blockHandleAddProps, type BlockHandleAddEvents, type BlockHandleAddProps } from './block-handle-add/types.ts'
-export { useBlockHandleAdd } from './block-handle-add/setup.ts'
-
-export { BlockHandleDraggableElement } from './block-handle-draggable/element.gen.ts'
-export { blockHandleDraggableEvents, blockHandleDraggableProps, type BlockHandleDraggableEvents, type BlockHandleDraggableProps } from './block-handle-draggable/types.ts'
-export { useBlockHandleDraggable } from './block-handle-draggable/setup.ts'
-
-export { BlockHandlePopoverElement } from './block-handle-popover/element.gen.ts'
-export { blockHandlePopoverEvents, blockHandlePopoverProps, type BlockHandlePopoverEvents, type BlockHandlePopoverProps } from './block-handle-popover/types.ts'
-export { useBlockHandlePopover } from './block-handle-popover/setup.ts'

package/src/components/drop-indicator/drop-indicator/element.gen.ts

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useDropIndicator } from "./setup.ts"
-import { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from "./types.ts"
-
-const DropIndicatorElementBase: BaseElementConstructor<DropIndicatorProps> = defineCustomElement<
-  DropIndicatorProps,
-  DropIndicatorEvents
->({
-  props: dropIndicatorProps,
-  events: dropIndicatorEvents,
-  setup: useDropIndicator,
-})
-class DropIndicatorElement extends DropIndicatorElementBase {}
-
-registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)
-  
-export { DropIndicatorElement }

package/src/components/drop-indicator/drop-indicator/setup.ts

@@ -1,75 +0,0 @@
-import { createComputed, createSignal, useEffect, type ConnectableElement, type SetupOptions } from '@aria-ui/core'
-import { usePresence } from '@aria-ui/presence'
-import { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'
-
-import { useEditorExtension } from '../../../hooks/use-editor-extension.ts'
-import { useScrolling } from '../../../hooks/use-scrolling.ts'
-import { assignStyles } from '../../../utils/assign-styles.ts'
-
-import type { DropIndicatorEvents, DropIndicatorProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useDropIndicator(
-  host: ConnectableElement,
-  { state }: SetupOptions<DropIndicatorProps, DropIndicatorEvents>,
-): void {
-  type DropIndicatorContext = ShowHandlerOptions | null
-  const context = createSignal<DropIndicatorContext>(null)
-
-  const extension = defineDropIndicator({
-    onShow: (options) => context.set(options),
-    onHide: () => context.set(null),
-  })
-
-  useEditorExtension(host, state.editor, extension)
-
-  const line = createComputed(() => context.get()?.line)
-  const scrolling = useScrolling(host)
-  const presence = createComputed(() => {
-    return !!context.get() && !scrolling.get()
-  })
-  usePresence(host, presence)
-
-  useEffect(
-    host,
-    () => {
-      const lineValue = line.get()
-      const lineWidth = state.width.get()
-
-      if (!lineValue) return
-
-      const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue
-      const horizontal = y1 === y2
-
-      let width: number
-      let height: number
-      let top: number = y1
-      let left: number = x1
-
-      if (horizontal) {
-        width = x2 - x1
-        height = lineWidth
-        top -= lineWidth / 2
-      } else {
-        width = lineWidth
-        height = y2 - y1
-        left -= lineWidth / 2
-      }
-
-      top = Math.round(top)
-      left = Math.round(left)
-
-      assignStyles(host, {
-        position: 'fixed',
-        pointerEvents: 'none',
-        width: `${width}px`,
-        height: `${height}px`,
-        transform: `translate(${left}px, ${top}px)`,
-        left: '0px',
-        top: '0px',
-      })
-    },
-  )
-}

package/src/components/drop-indicator/drop-indicator/types.ts

@@ -1,31 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-
-export interface DropIndicatorProps {
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-
-  /**
-   * The line width in pixels.
-   *
-   * @default 2
-   */
-  width: number
-}
-
-/** @internal */
-export const dropIndicatorProps: PropDeclarations<DropIndicatorProps> = Object.freeze({
-  editor: { default: null },
-  width: { default: 2 },
-})
-
-export interface DropIndicatorEvents {
-}
-
-/** @internal */
-export const dropIndicatorEvents: EventDeclarations<DropIndicatorEvents> = {}

package/src/components/drop-indicator/index.gen.ts

@@ -1,5 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { DropIndicatorElement } from './drop-indicator/element.gen.ts'
-export { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from './drop-indicator/types.ts'
-export { useDropIndicator } from './drop-indicator/setup.ts'

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

@@ -1,5 +0,0 @@
-// This file is generated by packages/dev/src/gen-components.ts
-
-export { InlinePopoverElement } from './inline-popover/element.gen.ts'
-export { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from './inline-popover/types.ts'
-export { useInlinePopover } from './inline-popover/setup.ts'

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useInlinePopover } from "./setup.ts"
-import { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from "./types.ts"
-
-const InlinePopoverElementBase: BaseElementConstructor<InlinePopoverProps> = defineCustomElement<
-  InlinePopoverProps,
-  InlinePopoverEvents
->({
-  props: inlinePopoverProps,
-  events: inlinePopoverEvents,
-  setup: useInlinePopover,
-})
-class InlinePopoverElement extends InlinePopoverElementBase {}
-
-registerCustomElement('prosekit-inline-popover', InlinePopoverElement)
-  
-export { InlinePopoverElement }

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

@@ -1,111 +0,0 @@
-import {
-  createComputed,
-  createSignal,
-  useAttribute,
-  useEffect,
-  type ConnectableElement,
-  type ReadonlySignal,
-  type SetupOptions,
-} from '@aria-ui/core'
-import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
-import { usePresence } from '@aria-ui/presence'
-import type { ReferenceElement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-import type { Selection } from '@prosekit/pm/state'
-
-import { useEditorFocusChangeEvent } from '../../../hooks/use-editor-focus-event.ts'
-import { useEditorUpdateEvent } from '../../../hooks/use-editor-update-event.ts'
-import { useKeymap } from '../../../hooks/use-keymap.ts'
-
-import type { InlinePopoverEvents, InlinePopoverProps } from './types.ts'
-import { getVirtualSelectionElement } from './virtual-selection-element.ts'
-
-/**
- * @internal
- */
-export function useInlinePopover(
-  host: ConnectableElement,
-  { state, emit }: SetupOptions<InlinePopoverProps, InlinePopoverEvents>,
-): void {
-  const { editor, defaultOpen, open, ...overlayState } = state
-
-  const reference = useInlinePopoverReference(host, editor)
-  const hasReference = createComputed(() => !!reference.get())
-
-  useEffect(host, () => {
-    const hasReferenceValue = hasReference.get()
-    const defaultOpenValue = defaultOpen.peek()
-    const openValue = open.peek()
-
-    if (defaultOpenValue || openValue) {
-      emit('openChange', hasReferenceValue)
-    }
-  })
-
-  useEffect(host, () => {
-    const hasReferenceValue = hasReference.get()
-    const defaultOpenValue = defaultOpen.peek()
-
-    if (hasReferenceValue && defaultOpenValue) {
-      open.set(true)
-    } else if (!hasReferenceValue) {
-      open.set(false)
-    }
-  })
-
-  useKeymap(host, editor, {
-    Escape: () => {
-      if (!state.dismissOnEscape.peek() || !open.peek()) {
-        return false
-      }
-      open.set(false)
-      emit('openChange', false)
-      return true
-    },
-  })
-
-  useOverlayPositionerState(host, overlayState, { reference })
-
-  useAttribute(host, 'data-state', () => (open.get() ? 'open' : 'closed'))
-  usePresence(host, open)
-}
-
-function useInlinePopoverReference(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-) {
-  const reference = createSignal<ReferenceElement | null>(null)
-  let editorFocused = false
-
-  useEditorFocusChangeEvent(host, editor, (focus) => {
-    editorFocused = focus
-  })
-
-  let prevSelection: Selection | undefined
-
-  useEditorUpdateEvent(host, editor, (view) => {
-    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement)
-
-    if (isPopoverFocused) {
-      return
-    }
-
-    const { selection } = view.state
-    const selectionUnchanged = prevSelection?.eq(selection)
-    prevSelection = selection
-
-    // Skip reference update if only the document content has changed, not the
-    // selection itself.
-    //
-    // Example: If the user selects text and then applies mark bold using the
-    // popover, the selection may widen, but we don't want to reposition the
-    // popover.
-    if (selectionUnchanged) {
-      return
-    }
-
-    reference.set(getVirtualSelectionElement(view) || null)
-  })
-
-  return reference
-}

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 }