@prosekit/web 0.7.3 → 0.7.4

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

@@ -0,0 +1,34 @@
+import {
+  createContext,
+  type Context,
+} from '@aria-ui/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export interface HoverState {
+  node: ProseMirrorNode
+  pos: number
+}
+
+/**
+ * @internal
+ */
+export type BlockPopoverContext = HoverState | null
+
+/**
+ * @internal
+ */
+export const blockPopoverContext: Context<BlockPopoverContext> = createContext(
+  'prosekit-block-popover-context',
+  null,
+)
+
+/**
+ * @internal
+ */
+export const draggingContext: Context<boolean> = createContext(
+  'prosekit-block-handle-dragging-context',
+  false,
+)

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

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

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useDropIndicator } from "./setup"
+import { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from "./types"
+
+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

@@ -0,0 +1,87 @@
+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'
+import { useScrolling } from '../../../hooks/use-scrolling'
+import { assignStyles } from '../../../utils/assign-styles'
+
+import type {
+  DropIndicatorEvents,
+  DropIndicatorProps,
+} from './types'
+
+/**
+ * @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

@@ -0,0 +1,34 @@
+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

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

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

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

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useInlinePopover } from "./setup"
+import { inlinePopoverEvents, inlinePopoverProps, type InlinePopoverEvents, type InlinePopoverProps } from "./types"
+
+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

@@ -0,0 +1,97 @@
+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 { useEditorFocusChangeEvent } from '../../../hooks/use-editor-focus-event'
+import { useEditorUpdateEvent } from '../../../hooks/use-editor-update-event'
+import { useKeymap } from '../../../hooks/use-keymap'
+
+import type {
+  InlinePopoverEvents,
+  InlinePopoverProps,
+} from './types'
+import { getVirtualSelectionElement } from './virtual-selection-element'
+
+/**
+ * @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
+  })
+
+  useEditorUpdateEvent(host, editor, (view) => {
+    const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement)
+
+    if (isPopoverFocused) {
+      return
+    }
+
+    reference.set(getVirtualSelectionElement(view) || null)
+  })
+
+  return reference
+}

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

@@ -0,0 +1,115 @@
+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/inline-popover/inline-popover/virtual-selection-element.ts

@@ -0,0 +1,75 @@
+import type { ReferenceElement } from '@floating-ui/dom'
+import {
+  containsInlineNode,
+  isInCodeBlock,
+  isTextSelection,
+} from '@prosekit/core'
+import type { EditorView } from '@prosekit/pm/view'
+
+export function getVirtualSelectionElement(
+  view: EditorView,
+): ReferenceElement | undefined {
+  if (typeof window === 'undefined' || view.isDestroyed) {
+    return
+  }
+
+  const selection = view.state.selection
+
+  if (
+    !selection.empty
+    && !isInCodeBlock(selection)
+    && isTextSelection(selection)
+    && containsInlineNode(view.state.doc, selection.from, selection.to)
+  ) {
+    return getDomDecoration(view) || getInlineDecoration(view)
+  }
+}
+
+function getDomDecoration(view: EditorView): ReferenceElement | undefined {
+  const range = getDomRange(view)
+  if (range) {
+    // To get it work properly in Safari, we cannot return the range directly.
+    // We have to return a contextElement.
+    return {
+      contextElement: view.dom,
+      getBoundingClientRect: () => range.getBoundingClientRect(),
+      getClientRects: () => range.getClientRects(),
+    }
+  }
+}
+
+function getDomRange(view: EditorView): Range | undefined {
+  const win = view.dom.ownerDocument.defaultView
+  const selection = win?.getSelection()
+  if (!selection || selection.isCollapsed) {
+    return
+  }
+
+  const range = typeof selection.rangeCount === 'number'
+    && selection.rangeCount > 0
+    && selection.getRangeAt(0)
+
+  if (!range) {
+    return
+  }
+
+  return range
+}
+
+function getInlineDecoration(view: EditorView): ReferenceElement | undefined {
+  const match = view.dom.querySelectorAll('.prosekit-virtual-selection')
+
+  if (match.length === 0) {
+    return
+  }
+  if (match.length === 1) {
+    return match[0]
+  }
+
+  const items = Array.from(match)
+  return {
+    contextElement: items[0],
+    getBoundingClientRect: () => items[0].getBoundingClientRect(),
+    getClientRects: () => items.map((item) => item.getBoundingClientRect()),
+  }
+}

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

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

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { usePopoverContent } from "./setup"
+import { popoverContentEvents, popoverContentProps, type PopoverContentEvents, type PopoverContentProps } from "./types"
+
+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

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

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { usePopoverRoot } from "./setup"
+import { popoverRootEvents, popoverRootProps, type PopoverRootEvents, type PopoverRootProps } from "./types"
+
+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

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

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { usePopoverTrigger } from "./setup"
+import { popoverTriggerEvents, popoverTriggerProps, type PopoverTriggerEvents, type PopoverTriggerProps } from "./types"
+
+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

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

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

@@ -0,0 +1,12 @@
+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/context.ts

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  type Context,
+} from '@aria-ui/core'
+
+/**
+ * @internal
+ */
+export const onResizeContext: Context<OnResize> = createContext(
+  'prosekit/resizable/onResize',
+  null,
+)
+
+/**
+ * @internal
+ */
+export const onResizeStartContext: Context<OnResizeStart> = createContext(
+  'prosekit/resizable/onResizeStart',
+  null,
+)
+
+/**
+ * @internal
+ */
+export const onResizeEndContext: Context<OnResizeEnd> = createContext(
+  'prosekit/resizable/onResizeEnd',
+  null,
+)
+
+/**
+ * @internal
+ */
+export type OnResize = ((width: number, height: number) => void) | null
+
+/**
+ * @internal
+ */
+export type OnResizeStart =
+  | (() => readonly [width: number, height: number, aspectRatio: number])
+  | null
+
+/**
+ * @internal
+ */
+export type OnResizeEnd = (() => void) | null