@prosekit/web 0.8.0-beta.6 → 0.8.1

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,15 +49,26 @@ 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 */
 export const AutocompleteRootPropsDeclaration: PropsDeclaration<AutocompleteRootProps> = /* @__PURE__ */ defineProps<
   AutocompleteRootProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
-  regex: { default: null, attribute: false, type: 'json' },
-  filter: { default: defaultItemFilter, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
+  regex: { default: null, attribute: false },
+  filter: { default: defaultItemFilter, attribute: false },
+  anchor: { default: null, attribute: false },
 })
 
 /**
@@ -95,7 +107,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 +122,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 +171,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 +227,7 @@ function useAutocompleteExtension(
   host: HostElement,
   getEditor: () => Editor | null,
   getRegex: () => RegExp | null,
+  getAnchor: () => ReferenceElement | null,
   deps: AutocompleteRuleDeps,
 ) {
   useEffect(host, () => {
@@ -212,7 +238,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 +247,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-add.ts

@@ -24,7 +24,7 @@ export interface BlockHandleAddProps {
 
 /** @internal */
 export const BlockHandleAddPropsDeclaration: PropsDeclaration<BlockHandleAddProps> = /* @__PURE__ */ defineProps<BlockHandleAddProps>({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /**

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

@@ -37,7 +37,7 @@ export interface BlockHandleDraggableProps {
 export const BlockHandleDraggablePropsDeclaration: PropsDeclaration<BlockHandleDraggableProps> = /* @__PURE__ */ defineProps<
   BlockHandleDraggableProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /**

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

@@ -59,7 +59,7 @@ export const BlockHandlePositionerPropsDeclaration: PropsDeclaration<BlockHandle
   // Enabling `hoist` will cause the popover to have a small delay when
   // scrolling the page.
   hoist: { default: false, attribute: 'hoist', type: 'boolean' },
-  flip: { default: false, attribute: false, type: 'json' },
+  flip: { default: false, attribute: false },
   shift: { default: false, attribute: 'shift', type: 'boolean' },
   hide: { default: true, attribute: 'hide', type: 'boolean' },
 })

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

@@ -18,6 +18,7 @@ import type { ProseMirrorNode } from '@prosekit/pm/model'
 import { useScrolling } from '../../hooks/use-scrolling.ts'
 
 import { blockHandleOverlayStoreContext, BlockHandleStore, blockHandleStoreContext } from './context.ts'
+import { useHasTextSelection } from './use-has-text-selection.ts'
 import { useHoverExtension } from './use-hover-extension.ts'
 
 export interface BlockHandleRootProps {
@@ -34,7 +35,7 @@ export interface BlockHandleRootProps {
 export const BlockHandleRootPropsDeclaration: PropsDeclaration<BlockHandleRootProps> = /* @__PURE__ */ defineProps<
   BlockHandleRootProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /**
@@ -75,8 +76,10 @@ export function setupBlockHandleRoot(
 
   const reference = createSignal<VirtualElement | undefined>(undefined)
   const getScrolling = useScrolling(host)
+  // Hide the block handle when there is a text selection to avoid the block handle overlapping with inline menu
+  const getHasTextSelection = useHasTextSelection(host, getEditor)
 
-  const getOpen = computed(() => !!store.hoverState.get() && !getScrolling())
+  const getOpen = computed(() => !!store.hoverState.get() && !getScrolling() && !getHasTextSelection())
 
   const overlayStore = createOverlayStore(
     getOpen,

package/src/components/block-handle/use-has-text-selection.ts

@@ -0,0 +1,13 @@
+import { createSignal, type HostElement } from '@aria-ui/core'
+import { isTextSelection, type Editor } from '@prosekit/core'
+
+import { useEditorUpdateEvent } from '../../hooks/use-editor-update-event.ts'
+
+export function useHasTextSelection(host: HostElement, getEditor: () => Editor | null): () => boolean {
+  const state = createSignal(false)
+  useEditorUpdateEvent(host, getEditor, (view) => {
+    const { selection } = view.state
+    state.set(!selection.empty && isTextSelection(selection))
+  })
+  return state.get
+}

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

@@ -86,7 +86,7 @@ export const InlinePopoverPositionerPropsDeclaration: PropsDeclaration<InlinePop
 >({
   ...OverlayPositionerPropsDeclaration,
   placement: { default: 'top', attribute: 'placement', type: 'string' },
-  offset: { default: 12, attribute: false, type: 'json' },
+  offset: { default: 12, attribute: false },
   hide: { default: true, attribute: 'hide', type: 'boolean' },
   hoist: { default: false, attribute: 'hoist', type: 'boolean' },
   overlap: { default: true, attribute: 'overlap', type: 'boolean' },

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

@@ -53,7 +53,7 @@ export const InlinePopoverRootPropsDeclaration: PropsDeclaration<InlinePopoverRo
   InlinePopoverRootProps
 >({
   ...OverlayRootPropsDeclaration,
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
   defaultOpen: { default: true, attribute: 'default-open', type: 'boolean' },
   dismissOnEscape: { default: true, attribute: 'dismiss-on-escape', type: 'boolean' },
 })

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

@@ -52,10 +52,10 @@ export const SharedTableHandlePositionerPropsDeclaration: PropsDeclaration<Share
   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' },
+  editor: { default: null, attribute: false },
+  hoist: { default: false, attribute: false },
+  flip: { default: false, attribute: false },
+  shift: { default: false, attribute: false },
+  hide: { default: true, attribute: false },
+  offset: { default: 0, attribute: false },
 })

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

@@ -31,7 +31,7 @@ export interface TableHandleColumnMenuTriggerProps {
 export const TableHandleColumnMenuTriggerPropsDeclaration: PropsDeclaration<TableHandleColumnMenuTriggerProps> = defineProps<
   TableHandleColumnMenuTriggerProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /** @internal */

package/src/components/table-handle/table-handle-drag-preview.ts

@@ -30,7 +30,7 @@ export interface TableHandleDragPreviewProps {
 export const TableHandleDragPreviewPropsDeclaration: PropsDeclaration<TableHandleDragPreviewProps> = defineProps<
   TableHandleDragPreviewProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /**

package/src/components/table-handle/table-handle-drop-indicator.ts

@@ -35,7 +35,7 @@ export interface TableHandleDropIndicatorProps {
 export const TableHandleDropIndicatorPropsDeclaration: PropsDeclaration<TableHandleDropIndicatorProps> = defineProps<
   TableHandleDropIndicatorProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /**

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

@@ -33,7 +33,7 @@ export interface TableHandleRootProps {
 
 /** @internal */
 export const TableHandleRootPropsDeclaration: PropsDeclaration<TableHandleRootProps> = defineProps<TableHandleRootProps>({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /**

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

@@ -31,7 +31,7 @@ export interface TableHandleRowMenuTriggerProps {
 export const TableHandleRowMenuTriggerPropsDeclaration: PropsDeclaration<TableHandleRowMenuTriggerProps> = defineProps<
   TableHandleRowMenuTriggerProps
 >({
-  editor: { default: null, attribute: false, type: 'json' },
+  editor: { default: null, attribute: false },
 })
 
 /** @internal */