@prosekit/web 0.8.0-beta.6 → 0.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.8.0-beta.6",
+  "version": "0.8.0",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -73,24 +73,24 @@
   ],
   "dependencies": {
     "@aria-ui/core": "^0.2.0",
-    "@aria-ui/elements": "^0.1.8",
+    "@aria-ui/elements": "^0.1.9",
     "@aria-ui/utils": "^0.1.5",
     "@floating-ui/dom": "^1.7.6",
     "@ocavue/utils": "^1.6.0",
     "prosemirror-tables": "^1.8.5",
-    "@prosekit/core": "^0.12.0-beta.1",
-    "@prosekit/extensions": "^0.16.0-beta.1",
-    "@prosekit/pm": "^0.1.16-beta.0"
+    "@prosekit/core": "^0.12.0",
+    "@prosekit/extensions": "^0.16.0",
+    "@prosekit/pm": "^0.1.16"
   },
   "devDependencies": {
-    "@aria-ui/cli": "^0.1.6",
-    "tsdown": "^0.21.8",
-    "type-fest": "^5.5.0",
+    "@aria-ui/cli": "^0.1.8",
+    "tsdown": "^0.21.10",
+    "type-fest": "^5.6.0",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.4",
-    "@prosekit/config-tsdown": "0.0.0",
+    "vitest": "^4.1.5",
+    "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-ts": "0.0.0"
+    "@prosekit/config-tsdown": "0.0.0"
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",

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

@@ -26,12 +26,20 @@ export interface AutocompletePositionerProps extends OverlayPositionerProps {
   placement: OverlayPositionerProps['placement']
 
   /**
-   * The distance between the popover and the hovered block.
+   * The distance between the popover and the text selection.
    *
-   * @default 4
+   * @default { mainAxis: 8, crossAxis: -4 }
    */
   offset: OverlayPositionerProps['offset']
 
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default true
+   */
+  hide: OverlayPositionerProps['hide']
+
   /**
    * @default true
    */
@@ -64,11 +72,12 @@ export const AutocompletePositionerPropsDeclaration: PropsDeclaration<Autocomple
 >({
   ...OverlayPositionerPropsDeclaration,
   placement: { default: 'bottom-start', attribute: 'placement', type: 'string' },
-  offset: { default: 4, attribute: false, type: 'json' },
+  offset: { default: { mainAxis: 8, crossAxis: -4 }, attribute: false },
+  hide: { default: true, attribute: 'hide', type: 'boolean' },
   inline: { default: true, attribute: 'inline', type: 'boolean' },
   hoist: { default: true, attribute: 'hoist', type: 'boolean' },
   fitViewport: { default: true, attribute: 'fit-viewport', type: 'boolean' },
-  boundary: { default: defaultBoundary, attribute: false, type: 'json' },
+  boundary: { default: defaultBoundary, attribute: false },
   overflowPadding: { default: 8, attribute: 'overflow-padding', type: 'number' },
 })
 

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

@@ -54,9 +54,9 @@ export interface AutocompleteRootProps {
 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 },
 })
 
 /**

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 */