@prosekit/web 0.8.0 → 0.8.2

package/src/components/autocomplete/autocomplete-root.ts

@@ -13,6 +13,7 @@ import {
 import { defaultItemFilter, type ItemFilter, type ListboxRootEvents } from '@aria-ui/elements/listbox'
 import { createOverlayStore, OpenChangeEvent, type OverlayStore } from '@aria-ui/elements/overlay'
 import { useEventListener } from '@aria-ui/utils'
+import type { ReferenceElement, VirtualElement } from '@floating-ui/dom'
 import { defineDOMEventHandler, defineKeymap, withPriority, type Editor, type Extension, type Priority } from '@prosekit/core'
 import { AutocompleteRule, defineAutocomplete, type MatchHandler } from '@prosekit/extensions/autocomplete'
 
@@ -48,6 +49,16 @@ export interface AutocompleteRootProps {
    * @default defaultItemFilter
    */
   filter: ItemFilter | null
+
+  /**
+   * The reference to position the popup against. This can be a DOM element, a
+   * Floating UI virtual element, or a function that returns either of them.
+   * By default, the popup will be positioned against the text content that
+   * triggers the autocomplete.
+   *
+   * @default null
+   */
+  anchor: Element | VirtualElement | (() => Element | VirtualElement | null) | null
 }
 
 /** @internal */
@@ -57,11 +68,9 @@ export const AutocompleteRootPropsDeclaration: PropsDeclaration<AutocompleteRoot
   editor: { default: null, attribute: false },
   regex: { default: null, attribute: false },
   filter: { default: defaultItemFilter, attribute: false },
+  anchor: { default: null, attribute: false },
 })
 
-/**
- * @public
- */
 export class QueryChangeEvent extends Event {
   /**
    * The current query string.
@@ -74,9 +83,6 @@ export class QueryChangeEvent extends Event {
   }
 }
 
-/**
- * @public
- */
 export interface AutocompleteRootEvents extends ListboxRootEvents {
   /**
    * Fired when the open state changes.
@@ -95,7 +101,7 @@ interface RuleHandlers {
 }
 
 interface AutocompleteRuleDeps {
-  reference: Signal<Element | undefined>
+  reference: Signal<ReferenceElement | undefined>
   handlers: RuleHandlers
   setQuery: (next: string) => void
   requestOpenChange: (open: boolean) => void
@@ -110,7 +116,7 @@ export function setupAutocompleteRoot(
 ): void {
   const getEditor = props.editor.get
 
-  const reference = createSignal<Element | undefined>(undefined)
+  const reference = createSignal<ReferenceElement | undefined>(undefined)
   const open = createSignal(false)
   const query = createSignal('')
   const keyboardTarget = new KeyboardEventTarget()
@@ -159,7 +165,20 @@ export function setupAutocompleteRoot(
     host.dispatchEvent(new QueryChangeEvent(next))
   }
 
-  useAutocompleteExtension(host, getEditor, props.regex.get, {
+  const getAnchor = (): ReferenceElement | null => {
+    const customAnchor = props.anchor.get()
+    if (customAnchor) {
+      if (typeof customAnchor === 'function') {
+        return customAnchor() || null
+      } else {
+        return customAnchor
+      }
+    }
+    const view = getSafeEditorView(getEditor())
+    return view?.dom.querySelector('.prosekit-autocomplete-match') || null
+  }
+
+  useAutocompleteExtension(host, getEditor, props.regex.get, getAnchor, {
     reference,
     handlers,
     setQuery,
@@ -202,6 +221,7 @@ function useAutocompleteExtension(
   host: HostElement,
   getEditor: () => Editor | null,
   getRegex: () => RegExp | null,
+  getAnchor: () => ReferenceElement | null,
   deps: AutocompleteRuleDeps,
 ) {
   useEffect(host, () => {
@@ -212,7 +232,7 @@ function useAutocompleteExtension(
       return
     }
 
-    const rule = createAutocompleteRule(editor, regex, deps)
+    const rule = createAutocompleteRule(editor, regex, getAnchor, deps)
     const extension = defineAutocomplete(rule)
     return editor.use(extension)
   })
@@ -221,17 +241,14 @@ function useAutocompleteExtension(
 function createAutocompleteRule(
   editor: Editor,
   regex: RegExp,
+  getAnchor: () => ReferenceElement | null,
   deps: AutocompleteRuleDeps,
 ) {
   const { reference, handlers, setQuery, requestOpenChange } = deps
 
   const handleEnter: MatchHandler = (options) => {
-    const view = getSafeEditorView(editor)
-    const span = view?.dom.querySelector('.prosekit-autocomplete-match')
-
-    if (span) {
-      reference.set(span)
-    }
+    const anchor = getAnchor()
+    reference.set(anchor || undefined)
 
     handlers.submit = options.deleteMatch
     handlers.dismiss = options.ignoreMatch

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

@@ -10,9 +10,6 @@ import { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps
 
 import { blockHandleOverlayStoreContext } from './context.ts'
 
-/**
- * @public
- */
 export interface BlockHandlePopupProps extends OverlayPopupProps {}
 
 /** @internal */

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

@@ -12,9 +12,6 @@ import type { Placement } from '@floating-ui/dom'
 
 import { blockHandleOverlayStoreContext } from './context.ts'
 
-/**
- * @public
- */
 export interface BlockHandlePositionerProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
   /**
    * The placement of the popover, relative to the hovered block.

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

@@ -38,9 +38,6 @@ export const BlockHandleRootPropsDeclaration: PropsDeclaration<BlockHandleRootPr
   editor: { default: null, attribute: false },
 })
 
-/**
- * @public
- */
 export class BlockHandleStateChangeEvent extends Event {
   /**
    * The currently hovered block's node and position, or `null` if no block is hovered.
@@ -52,9 +49,6 @@ export class BlockHandleStateChangeEvent extends Event {
   }
 }
 
-/**
- * @public
- */
 export interface BlockHandleRootEvents {
   /**
    * Fired when the hovered block changes.

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

@@ -13,9 +13,6 @@ import { usePresence } from '@aria-ui/utils'
 
 import { InlinePopoverStoreContext } from './store.ts'
 
-/**
- * @public
- */
 export interface InlinePopoverPopupProps extends OverlayPopupProps {}
 
 /** @internal */

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

@@ -11,9 +11,6 @@ import { OverlayPositionerPropsDeclaration, setupOverlayPositioner, type Overlay
 
 import { InlinePopoverStoreContext } from './store.ts'
 
-/**
- * @public
- */
 export interface InlinePopoverPositionerProps extends
   Omit<
     OverlayPositionerProps,

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

@@ -19,9 +19,6 @@ import { useKeymap } from '../../hooks/use-keymap.ts'
 import { InlinePopoverStoreContext } from './store.ts'
 import { getVirtualSelectionElement } from './virtual-selection-element.ts'
 
-/**
- * @public
- */
 export interface InlinePopoverRootProps extends OverlayRootProps {
   /**
    * The ProseKit editor instance.
@@ -58,9 +55,6 @@ export const InlinePopoverRootPropsDeclaration: PropsDeclaration<InlinePopoverRo
   dismissOnEscape: { default: true, attribute: 'dismiss-on-escape', type: 'boolean' },
 })
 
-/**
- * @public
- */
 export interface InlinePopoverRootEvents {
   /**
    * Emitted when the open state of the popover changes.

package/src/components/resizable/resizable-handle.ts

@@ -5,9 +5,6 @@ import { getWindow } from '@ocavue/utils'
 import { calcResize } from './calc-resize.ts'
 import { onResizeContext, onResizeEndContext, onResizeStartContext } from './context.ts'
 
-/**
- * @public
- */
 export interface ResizableHandleProps {
   /**
    * The position of the handle.

package/src/components/resizable/resizable-root.ts

@@ -13,9 +13,6 @@ import {
   type OnResizeStart,
 } from './context.ts'
 
-/**
- * @public
- */
 export interface ResizableRootProps {
   /**
    * The width of the resizable element.
@@ -48,9 +45,6 @@ export const ResizableRootPropsDeclaration: PropsDeclaration<ResizableRootProps>
   aspectRatio: { default: null, attribute: 'data-aspect-ratio', type: 'json' },
 })
 
-/**
- * @public
- */
 export interface ResizableRootEvents {
   /**
    * Emitted when a resize operation starts.
@@ -63,9 +57,6 @@ export interface ResizableRootEvents {
   resizeEnd: ResizeEndEvent
 }
 
-/**
- * @public
- */
 export class ResizeStartEvent extends Event {
   readonly detail: {
     readonly width: number
@@ -77,9 +68,6 @@ export class ResizeStartEvent extends Event {
   }
 }
 
-/**
- * @public
- */
 export class ResizeEndEvent extends Event {
   readonly detail: {
     readonly width: number