@prosekit/web 0.7.2 → 0.7.4

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

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

@@ -0,0 +1,9 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { ResizableHandleElement } from './resizable-handle/element.gen'
+export { resizableHandleEvents, resizableHandleProps, type ResizableHandleEvents, type ResizableHandleProps } from './resizable-handle/types'
+export { useResizableHandle } from './resizable-handle/setup'
+
+export { ResizableRootElement } from './resizable-root/element.gen'
+export { resizableRootEvents, resizableRootProps, type ResizableRootEvents, type ResizableRootProps } from './resizable-root/types'
+export { useResizableRoot } from './resizable-root/setup'