@prosekit/react 0.7.6 → 0.8.0-beta.0

package/dist/inline-popover.d.ts

@@ -158,6 +158,17 @@ interface InlinePopoverRootProps {
    * @default true
    */
   dismissOnEscape?: InlinePopoverRootProps$1['dismissOnEscape'];
+  /**
+   * The reference to position the popover against. This can be a DOM element, a
+   * Floating UI virtual element, or a function that returns either of them.
+   *
+   * When set, the popover is anchored to this reference instead of the current
+   * text selection, and the text selection no longer drives the open state, so
+   * control it with the `open` property.
+   *
+   * @default null
+   */
+  anchor?: InlinePopoverRootProps$1['anchor'];
   /**
    * Whether the overlay is currently open.
    * @default null

package/dist/inline-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline-popover.d.ts","names":[],"sources":["../src/components/inline-popover/inline-popover-popup.gen.ts","../src/components/inline-popover/inline-popover-positioner.gen.ts","../src/components/inline-popover/inline-popover-root.gen.ts"],"mappings":";;;UAMiB,uBAAA;;cAyBJ,kBAAA,EAAoB,yBAAA,CAA0B,uBAAA,GAA0B,cAAA,CAAe,yBAAA,IAA6B,aAAA,CAAc,yBAAA;;UCzB9H,4BAAA;EDAuB;;;AAAA;AAyBxC;ECnBE,SAAA,GAAY,8BAAA;;;;;;EAMZ,MAAA,GAAS,8BAAA;EDasB;;;;;;ECN/B,IAAA,GAAO,8BAAA;EDMwH;;;AAAuC;;ACzBxK;EA0BE,KAAA,GAAQ,8BAAA;;;;;;;EAOR,OAAA,GAAU,8BAAA;EAaQ;;;;;;EANlB,MAAA,GAAS,8BAAA;EAwDI;;;;;EAlDb,eAAA,GAAkB,8BAAA;EAgF+B;;;;;EA1EjD,QAAA,GAAW,8BAAA;EAjCJ;;;;;;;EAyCP,UAAA,GAAa,8BAAA;EAdK;;;;;;;;EAuBlB,IAAA,GAAO,8BAAA;EAaP;;;;;EAPA,KAAA,GAAQ,8BAAA;EA4BR;;;;;;EArBA,WAAA,GAAc,8BAAA;EA4CA;;AAAmC;AAgCnD;;;EArEE,SAAA,GAAY,8BAAA;EAqEgG;;;;;;EA9D5G,UAAA,GAAa,8BAAA;EA8DuB;;;;;;EAvDpC,QAAA,GAAW,8BAAA;EAuD+K;;AC5J5L;;;;ED4GE,YAAA,GAAe,8BAAA;ECvFG;;;;;;;ED+FlB,cAAA,GAAiB,8BAAA;ECtGjB;;;;;;;ED8GA,WAAA,GAAc,8BAAA;AAAA;;cAgCH,uBAAA,EAAyB,yBAAA,CAA0B,4BAAA,GAA+B,cAAA,CAAe,8BAAA,IAAkC,aAAA,CAAc,8BAAA;;UC5J7I,sBAAA;EFFuB;;;AAAA;AAyBxC;;EEhBE,MAAA,GAAS,wBAAA;EFgBgD;;;;;;EETzD,WAAA,GAAc,wBAAA;EFS0C;;;;;;EEFxD,eAAA,GAAkB,wBAAA;EFEoJ;AAAA;;ACzBxK;EC4BE,IAAA,GAAO,wBAAA;;;;;EAKP,QAAA,GAAW,wBAAA;EDAD;ECEV,YAAA,IAAgB,KAAA,EAAO,uBAAA;AAAA;;cAoDZ,iBAAA,EAAmB,yBAAA,CAA0B,sBAAA,GAAyB,cAAA,CAAe,wBAAA,IAA4B,aAAA,CAAc,wBAAA"}
+{"version":3,"file":"inline-popover.d.ts","names":[],"sources":["../src/components/inline-popover/inline-popover-popup.gen.ts","../src/components/inline-popover/inline-popover-positioner.gen.ts","../src/components/inline-popover/inline-popover-root.gen.ts"],"mappings":";;;UAMiB,uBAAA;;cAyBJ,kBAAA,EAAoB,yBAAA,CAA0B,uBAAA,GAA0B,cAAA,CAAe,yBAAA,IAA6B,aAAA,CAAc,yBAAA;;UCzB9H,4BAAA;EDAuB;;;AAAA;AAyBxC;ECnBE,SAAA,GAAY,8BAAA;;;;;;EAMZ,MAAA,GAAS,8BAAA;EDasB;;;;;;ECN/B,IAAA,GAAO,8BAAA;EDMwH;;;AAAuC;;ACzBxK;EA0BE,KAAA,GAAQ,8BAAA;;;;;;;EAOR,OAAA,GAAU,8BAAA;EAaQ;;;;;;EANlB,MAAA,GAAS,8BAAA;EAwDI;;;;;EAlDb,eAAA,GAAkB,8BAAA;EAgF+B;;;;;EA1EjD,QAAA,GAAW,8BAAA;EAjCJ;;;;;;;EAyCP,UAAA,GAAa,8BAAA;EAdK;;;;;;;;EAuBlB,IAAA,GAAO,8BAAA;EAaP;;;;;EAPA,KAAA,GAAQ,8BAAA;EA4BR;;;;;;EArBA,WAAA,GAAc,8BAAA;EA4CA;;AAAmC;AAgCnD;;;EArEE,SAAA,GAAY,8BAAA;EAqEgG;;;;;;EA9D5G,UAAA,GAAa,8BAAA;EA8DuB;;;;;;EAvDpC,QAAA,GAAW,8BAAA;EAuD+K;;AC5J5L;;;;ED4GE,YAAA,GAAe,8BAAA;ECvFG;;;;;;;ED+FlB,cAAA,GAAiB,8BAAA;EC7GR;;;;;;;EDqHT,WAAA,GAAc,8BAAA;AAAA;;cAgCH,uBAAA,EAAyB,yBAAA,CAA0B,4BAAA,GAA+B,cAAA,CAAe,8BAAA,IAAkC,aAAA,CAAc,8BAAA;;UC5J7I,sBAAA;EFFuB;;;AAAA;AAyBxC;;EEhBE,MAAA,GAAS,wBAAA;EFgBgD;;;;;;EETzD,WAAA,GAAc,wBAAA;EFS0C;;;;;;EEFxD,eAAA,GAAkB,wBAAA;EFEoJ;AAAA;;ACzBxK;;;;;;;ECkCE,MAAA,GAAS,wBAAA;EDMA;;;;ECDT,IAAA,GAAO,wBAAA;EDoCC;;;;EC/BR,QAAA,GAAW,wBAAA;EDkEI;EChEf,YAAA,IAAgB,KAAA,EAAO,uBAAA;AAAA;;cAoDZ,iBAAA,EAAmB,yBAAA,CAA0B,sBAAA,GAAyB,cAAA,CAAe,wBAAA,IAA4B,aAAA,CAAc,wBAAA"}

package/dist/inline-popover.js

@@ -64,17 +64,18 @@ function InlinePopoverRootComponent(props, forwardedRef) {
 	registerInlinePopoverRootElement();
 	const elementRef = useRef(null);
 	const handlersRef = useRef([]);
-	const p3Fallback = useEditorContext();
-	const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;
+	const p4Fallback = useEditorContext();
+	const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;
 	useLayoutEffect(() => {
 		const element = elementRef.current;
 		if (!element) return;
 		Object.assign(element, {
-			defaultOpen: p0,
-			disabled: p1,
-			dismissOnEscape: p2,
-			editor: p3 ?? p3Fallback,
-			open: p4
+			anchor: p0,
+			defaultOpen: p1,
+			disabled: p2,
+			dismissOnEscape: p3,
+			editor: p4 ?? p4Fallback,
+			open: p5
 		});
 		handlersRef.current = [e0];
 	});

package/dist/inline-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"inline-popover.js","names":[],"sources":["../src/components/inline-popover/inline-popover-popup.gen.ts","../src/components/inline-popover/inline-popover-positioner.gen.ts","../src/components/inline-popover/inline-popover-root.gen.ts","../src/components/inline-popover/index.ts"],"sourcesContent":["// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPopupElement, type InlinePopoverPopupElement } from '@prosekit/web/inline-popover';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';\n\n/** Props for the {@link InlinePopoverPopup} React component. */\nexport interface InlinePopoverPopupProps {}\n\nfunction InlinePopoverPopupComponent(props: InlinePopoverPopupProps, forwardedRef: ForwardedRef<InlinePopoverPopupElement>) {\n  registerInlinePopoverPopupElement();\n\n  const elementRef = useRef<InlinePopoverPopupElement>(null);\n\n  const { ...restProps } = props;\n\n  const mergedRef = useCallback(\n    (element: InlinePopoverPopupElement | null) => {\n      elementRef.current = element;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(element);\n      } else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return createElement('prosekit-inline-popover-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-inline-popover-popup` custom element. */\nexport const InlinePopoverPopup: ForwardRefExoticComponent<InlinePopoverPopupProps & HTMLAttributes<InlinePopoverPopupElement> & RefAttributes<InlinePopoverPopupElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPopupComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPositionerElement, type InlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link InlinePopoverPositioner} React component. */\nexport interface InlinePopoverPositionerProps {\n  /**\n   * The initial placement of the floating element\n   *\n   * @default \"top\"\n   */\n  placement?: InlinePopoverPositionerElementProps['placement'];\n  /**\n   * The distance between the reference and floating element.\n   *\n   * @default 12\n   */\n  offset?: InlinePopoverPositionerElementProps['offset'];\n  /**\n   * Whether to hide the floating element when the reference element or the\n   * floating element is fully clipped.\n   *\n   * @default true\n   */\n  hide?: InlinePopoverPositionerElementProps['hide'];\n  /**\n   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n   * to place the floating element on top of other page content.\n   *\n   * @default false\n   */\n  hoist?: InlinePopoverPositionerElementProps['hoist'];\n  /**\n   * Whether the floating element can overlap the reference element to keep it\n   * in view.\n   *\n   * @default true\n   */\n  overlap?: InlinePopoverPositionerElementProps['overlap'];\n  /**\n   * Whether to improve positioning for inline reference elements that span over\n   * multiple lines.\n   *\n   * @default true\n   */\n  inline?: InlinePopoverPositionerElementProps['inline'];\n  /**\n   * Describes the virtual padding around the boundary to check for overflow.\n   *\n   * @default 8\n   */\n  overflowPadding?: InlinePopoverPositionerElementProps['overflowPadding'];\n  /**\n   * The strategy to use for positioning\n   *\n   * @default \"absolute\"\n   */\n  strategy?: InlinePopoverPositionerElementProps['strategy'];\n  /**\n   * Options to activate auto-update listeners\n   *\n   * @see https://floating-ui.com/docs/autoUpdate\n   *\n   * @default true\n   */\n  autoUpdate?: InlinePopoverPositionerElementProps['autoUpdate'];\n  /**\n   * Whether to flip the `placement` in order to keep it in view when the\n   * preferred placement(s) will overflow the clipping boundary. You can also\n   * provide an array of placements to try sequentially if the preferred\n   * `placement` does not fit.\n   *\n   * @default true\n   */\n  flip?: InlinePopoverPositionerElementProps['flip'];\n  /**\n   * Whether the floating element should shift to keep it in view.\n   *\n   * @default true\n   */\n  shift?: InlinePopoverPositionerElementProps['shift'];\n  /**\n   * Whether to constrain the floating element's width and height to not exceed\n   * the viewport.\n   *\n   * @default false\n   */\n  fitViewport?: InlinePopoverPositionerElementProps['fitViewport'];\n  /**\n   * Whether to constrain the floating element's width so that it matches the\n   * reference element.\n   *\n   * @default false\n   */\n  sameWidth?: InlinePopoverPositionerElementProps['sameWidth'];\n  /**\n   * Whether to constrain the floating element's height so that it matches the\n   * reference element.\n   *\n   * @default false\n   */\n  sameHeight?: InlinePopoverPositionerElementProps['sameHeight'];\n  /**\n   * Describes the clipping element(s) or area that overflow will be checked relative to.\n   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.\n   *\n   * @default 'clippingAncestors'\n   */\n  boundary?: InlinePopoverPositionerElementProps['boundary'];\n  /**\n   * Describes the root boundary that the element will be checked for overflow relative to.\n   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.\n   *\n   * @default 'viewport'\n   */\n  rootBoundary?: InlinePopoverPositionerElementProps['rootBoundary'];\n  /**\n   * The element that will be used to check for overflow. Please see\n   * https://floating-ui.com/docs/detectoverflow#elementcontext for more\n   * information.\n   *\n   * @default 'floating'\n   */\n  elementContext?: InlinePopoverPositionerElementProps['elementContext'];\n  /**\n   * Whether to check the alternate elementContext's boundary. Please see\n   * https://floating-ui.com/docs/detectoverflow#altboundary for more\n   * information.\n   *\n   * @default false\n   */\n  altBoundary?: InlinePopoverPositionerElementProps['altBoundary'];\n}\n\nfunction InlinePopoverPositionerComponent(props: InlinePopoverPositionerProps, forwardedRef: ForwardedRef<InlinePopoverPositionerElement>) {\n  registerInlinePopoverPositionerElement();\n\n  const elementRef = useRef<InlinePopoverPositionerElement>(null);\n\n  const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;\n\n  useLayoutEffect(() => {\n    const element = elementRef.current as Record<string, unknown> | null;\n    if (!element) return;\n    Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });\n  });\n\n  const mergedRef = useCallback(\n    (element: InlinePopoverPositionerElement | null) => {\n      elementRef.current = element;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(element);\n      } else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return createElement('prosekit-inline-popover-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-inline-popover-positioner` custom element. */\nexport const InlinePopoverPositioner: ForwardRefExoticComponent<InlinePopoverPositionerProps & HTMLAttributes<InlinePopoverPositionerElement> & RefAttributes<InlinePopoverPositionerElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPositionerComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverRootElement, type InlinePopoverRootElement, type InlinePopoverRootProps as InlinePopoverRootElementProps, type InlinePopoverRootEvents } from '@prosekit/web/inline-popover';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\nimport { useEditorContext } from '../../contexts/editor-context.ts';\n\n/** Props for the {@link InlinePopoverRoot} React component. */\nexport interface InlinePopoverRootProps {\n  /**\n   * The ProseKit editor instance.\n   *\n   * @default null\n   * @hidden\n   */\n  editor?: InlinePopoverRootElementProps['editor'];\n  /**\n   * Whether the popover is open by default when some inline content is\n   * selected.\n   *\n   * @default true\n   */\n  defaultOpen?: InlinePopoverRootElementProps['defaultOpen'];\n  /**\n   * Whether the inline popover should be dismissed when the editor receives an\n   * Escape key press.\n   *\n   * @default true\n   */\n  dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];\n  /**\n   * Whether the overlay is currently open.\n   * @default null\n   */\n  open?: InlinePopoverRootElementProps['open'];\n  /**\n   * Whether the component should ignore user interaction.\n   * @default false\n   */\n  disabled?: InlinePopoverRootElementProps['disabled'];\n  /** Emitted when the open state of the popover changes. */\n  onOpenChange?: (event: InlinePopoverRootEvents['openChange']) => void;\n}\n\nfunction InlinePopoverRootComponent(props: InlinePopoverRootProps, forwardedRef: ForwardedRef<InlinePopoverRootElement>) {\n  registerInlinePopoverRootElement();\n\n  const elementRef = useRef<InlinePopoverRootElement>(null);\n  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n  const p3Fallback = useEditorContext();\n\n  const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;\n\n  useLayoutEffect(() => {\n    const element = elementRef.current as Record<string, unknown> | null;\n    if (!element) return;\n    Object.assign(element, { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3 ?? p3Fallback, open: p4 });\n    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;\n  });\n\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    const ac = new AbortController();\n    for (const [index, eventName] of ['openChange'].entries()) {\n      element.addEventListener(\n        eventName,\n        (event: Event) => {\n          handlersRef.current[index]?.(event);\n        },\n        { signal: ac.signal },\n      );\n    }\n    return () => ac.abort();\n  }, []);\n\n  const mergedRef = useCallback(\n    (element: InlinePopoverRootElement | null) => {\n      elementRef.current = element;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(element);\n      } else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return createElement('prosekit-inline-popover-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-inline-popover-root` custom element. */\nexport const InlinePopoverRoot: ForwardRefExoticComponent<InlinePopoverRootProps & HTMLAttributes<InlinePopoverRootElement> & RefAttributes<InlinePopoverRootElement>> = /* @__PURE__ */ forwardRef(InlinePopoverRootComponent);\n","/**\n\n@module\n\n## Anatomy\n\n```jsx\nimport {\n  InlinePopoverPopup,\n  InlinePopoverPositioner,\n  InlinePopoverRoot,\n} from 'prosekit/react/inline-popover'\n\n<InlinePopoverRoot>\n  <InlinePopoverPositioner>\n    <InlinePopoverPopup>...</InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n```\n*/\n\n'use client'\n\nexport * from './index.gen.ts'\n"],"mappings":"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"}
+{"version":3,"file":"inline-popover.js","names":[],"sources":["../src/components/inline-popover/inline-popover-popup.gen.ts","../src/components/inline-popover/inline-popover-positioner.gen.ts","../src/components/inline-popover/inline-popover-root.gen.ts","../src/components/inline-popover/index.ts"],"sourcesContent":["// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPopupElement, type InlinePopoverPopupElement } from '@prosekit/web/inline-popover';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';\n\n/** Props for the {@link InlinePopoverPopup} React component. */\nexport interface InlinePopoverPopupProps {}\n\nfunction InlinePopoverPopupComponent(props: InlinePopoverPopupProps, forwardedRef: ForwardedRef<InlinePopoverPopupElement>) {\n  registerInlinePopoverPopupElement();\n\n  const elementRef = useRef<InlinePopoverPopupElement>(null);\n\n  const { ...restProps } = props;\n\n  const mergedRef = useCallback(\n    (element: InlinePopoverPopupElement | null) => {\n      elementRef.current = element;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(element);\n      } else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return createElement('prosekit-inline-popover-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-inline-popover-popup` custom element. */\nexport const InlinePopoverPopup: ForwardRefExoticComponent<InlinePopoverPopupProps & HTMLAttributes<InlinePopoverPopupElement> & RefAttributes<InlinePopoverPopupElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPopupComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPositionerElement, type InlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\n/** Props for the {@link InlinePopoverPositioner} React component. */\nexport interface InlinePopoverPositionerProps {\n  /**\n   * The initial placement of the floating element\n   *\n   * @default \"top\"\n   */\n  placement?: InlinePopoverPositionerElementProps['placement'];\n  /**\n   * The distance between the reference and floating element.\n   *\n   * @default 12\n   */\n  offset?: InlinePopoverPositionerElementProps['offset'];\n  /**\n   * Whether to hide the floating element when the reference element or the\n   * floating element is fully clipped.\n   *\n   * @default true\n   */\n  hide?: InlinePopoverPositionerElementProps['hide'];\n  /**\n   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n   * to place the floating element on top of other page content.\n   *\n   * @default false\n   */\n  hoist?: InlinePopoverPositionerElementProps['hoist'];\n  /**\n   * Whether the floating element can overlap the reference element to keep it\n   * in view.\n   *\n   * @default true\n   */\n  overlap?: InlinePopoverPositionerElementProps['overlap'];\n  /**\n   * Whether to improve positioning for inline reference elements that span over\n   * multiple lines.\n   *\n   * @default true\n   */\n  inline?: InlinePopoverPositionerElementProps['inline'];\n  /**\n   * Describes the virtual padding around the boundary to check for overflow.\n   *\n   * @default 8\n   */\n  overflowPadding?: InlinePopoverPositionerElementProps['overflowPadding'];\n  /**\n   * The strategy to use for positioning\n   *\n   * @default \"absolute\"\n   */\n  strategy?: InlinePopoverPositionerElementProps['strategy'];\n  /**\n   * Options to activate auto-update listeners\n   *\n   * @see https://floating-ui.com/docs/autoUpdate\n   *\n   * @default true\n   */\n  autoUpdate?: InlinePopoverPositionerElementProps['autoUpdate'];\n  /**\n   * Whether to flip the `placement` in order to keep it in view when the\n   * preferred placement(s) will overflow the clipping boundary. You can also\n   * provide an array of placements to try sequentially if the preferred\n   * `placement` does not fit.\n   *\n   * @default true\n   */\n  flip?: InlinePopoverPositionerElementProps['flip'];\n  /**\n   * Whether the floating element should shift to keep it in view.\n   *\n   * @default true\n   */\n  shift?: InlinePopoverPositionerElementProps['shift'];\n  /**\n   * Whether to constrain the floating element's width and height to not exceed\n   * the viewport.\n   *\n   * @default false\n   */\n  fitViewport?: InlinePopoverPositionerElementProps['fitViewport'];\n  /**\n   * Whether to constrain the floating element's width so that it matches the\n   * reference element.\n   *\n   * @default false\n   */\n  sameWidth?: InlinePopoverPositionerElementProps['sameWidth'];\n  /**\n   * Whether to constrain the floating element's height so that it matches the\n   * reference element.\n   *\n   * @default false\n   */\n  sameHeight?: InlinePopoverPositionerElementProps['sameHeight'];\n  /**\n   * Describes the clipping element(s) or area that overflow will be checked relative to.\n   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.\n   *\n   * @default 'clippingAncestors'\n   */\n  boundary?: InlinePopoverPositionerElementProps['boundary'];\n  /**\n   * Describes the root boundary that the element will be checked for overflow relative to.\n   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.\n   *\n   * @default 'viewport'\n   */\n  rootBoundary?: InlinePopoverPositionerElementProps['rootBoundary'];\n  /**\n   * The element that will be used to check for overflow. Please see\n   * https://floating-ui.com/docs/detectoverflow#elementcontext for more\n   * information.\n   *\n   * @default 'floating'\n   */\n  elementContext?: InlinePopoverPositionerElementProps['elementContext'];\n  /**\n   * Whether to check the alternate elementContext's boundary. Please see\n   * https://floating-ui.com/docs/detectoverflow#altboundary for more\n   * information.\n   *\n   * @default false\n   */\n  altBoundary?: InlinePopoverPositionerElementProps['altBoundary'];\n}\n\nfunction InlinePopoverPositionerComponent(props: InlinePopoverPositionerProps, forwardedRef: ForwardedRef<InlinePopoverPositionerElement>) {\n  registerInlinePopoverPositionerElement();\n\n  const elementRef = useRef<InlinePopoverPositionerElement>(null);\n\n  const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;\n\n  useLayoutEffect(() => {\n    const element = elementRef.current as Record<string, unknown> | null;\n    if (!element) return;\n    Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });\n  });\n\n  const mergedRef = useCallback(\n    (element: InlinePopoverPositionerElement | null) => {\n      elementRef.current = element;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(element);\n      } else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return createElement('prosekit-inline-popover-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-inline-popover-positioner` custom element. */\nexport const InlinePopoverPositioner: ForwardRefExoticComponent<InlinePopoverPositionerProps & HTMLAttributes<InlinePopoverPositionerElement> & RefAttributes<InlinePopoverPositionerElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPositionerComponent);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverRootElement, type InlinePopoverRootElement, type InlinePopoverRootProps as InlinePopoverRootElementProps, type InlinePopoverRootEvents } from '@prosekit/web/inline-popover';\nimport { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';\n\nimport { useEditorContext } from '../../contexts/editor-context.ts';\n\n/** Props for the {@link InlinePopoverRoot} React component. */\nexport interface InlinePopoverRootProps {\n  /**\n   * The ProseKit editor instance.\n   *\n   * @default null\n   * @hidden\n   */\n  editor?: InlinePopoverRootElementProps['editor'];\n  /**\n   * Whether the popover is open by default when some inline content is\n   * selected.\n   *\n   * @default true\n   */\n  defaultOpen?: InlinePopoverRootElementProps['defaultOpen'];\n  /**\n   * Whether the inline popover should be dismissed when the editor receives an\n   * Escape key press.\n   *\n   * @default true\n   */\n  dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];\n  /**\n   * The reference to position the popover against. This can be a DOM element, a\n   * Floating UI virtual element, or a function that returns either of them.\n   *\n   * When set, the popover is anchored to this reference instead of the current\n   * text selection, and the text selection no longer drives the open state, so\n   * control it with the `open` property.\n   *\n   * @default null\n   */\n  anchor?: InlinePopoverRootElementProps['anchor'];\n  /**\n   * Whether the overlay is currently open.\n   * @default null\n   */\n  open?: InlinePopoverRootElementProps['open'];\n  /**\n   * Whether the component should ignore user interaction.\n   * @default false\n   */\n  disabled?: InlinePopoverRootElementProps['disabled'];\n  /** Emitted when the open state of the popover changes. */\n  onOpenChange?: (event: InlinePopoverRootEvents['openChange']) => void;\n}\n\nfunction InlinePopoverRootComponent(props: InlinePopoverRootProps, forwardedRef: ForwardedRef<InlinePopoverRootElement>) {\n  registerInlinePopoverRootElement();\n\n  const elementRef = useRef<InlinePopoverRootElement>(null);\n  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);\n\n  const p4Fallback = useEditorContext();\n\n  const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;\n\n  useLayoutEffect(() => {\n    const element = elementRef.current as Record<string, unknown> | null;\n    if (!element) return;\n    Object.assign(element, { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4 ?? p4Fallback, open: p5 });\n    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;\n  });\n\n  useLayoutEffect(() => {\n    const element = elementRef.current;\n    if (!element) return;\n    const ac = new AbortController();\n    for (const [index, eventName] of ['openChange'].entries()) {\n      element.addEventListener(\n        eventName,\n        (event: Event) => {\n          handlersRef.current[index]?.(event);\n        },\n        { signal: ac.signal },\n      );\n    }\n    return () => ac.abort();\n  }, []);\n\n  const mergedRef = useCallback(\n    (element: InlinePopoverRootElement | null) => {\n      elementRef.current = element;\n      if (typeof forwardedRef === 'function') {\n        forwardedRef(element);\n      } else if (forwardedRef) {\n        forwardedRef.current = element;\n      }\n    },\n    [forwardedRef],\n  );\n\n  return createElement('prosekit-inline-popover-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });\n}\n\n/** A React component that renders an `prosekit-inline-popover-root` custom element. */\nexport const InlinePopoverRoot: ForwardRefExoticComponent<InlinePopoverRootProps & HTMLAttributes<InlinePopoverRootElement> & RefAttributes<InlinePopoverRootElement>> = /* @__PURE__ */ forwardRef(InlinePopoverRootComponent);\n","/**\n\n@module\n\n## Anatomy\n\n```jsx\nimport {\n  InlinePopoverPopup,\n  InlinePopoverPositioner,\n  InlinePopoverRoot,\n} from 'prosekit/react/inline-popover'\n\n<InlinePopoverRoot>\n  <InlinePopoverPositioner>\n    <InlinePopoverPopup>...</InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n```\n*/\n\n'use client'\n\nexport * from './index.gen.ts'\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.7.6",
+  "version": "0.8.0-beta.0",
   "private": false,
   "description": "React components and utilities for ProseKit",
   "author": {
@@ -75,8 +75,8 @@
     "@prosemirror-adapter/core": "^0.5.3",
     "@prosemirror-adapter/react": "^0.5.3",
     "@prosekit/core": "^0.12.3",
-    "@prosekit/web": "^0.8.6",
-    "@prosekit/pm": "^0.1.18"
+    "@prosekit/pm": "^0.1.18",
+    "@prosekit/web": "^0.9.0-beta.0"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -101,8 +101,8 @@
     "vitest-browser-react": "^2.2.0",
     "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/testing": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/testing": "0.0.0"
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",

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

@@ -28,6 +28,17 @@ export interface InlinePopoverRootProps {
    * @default true
    */
   dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];
+  /**
+   * The reference to position the popover against. This can be a DOM element, a
+   * Floating UI virtual element, or a function that returns either of them.
+   *
+   * When set, the popover is anchored to this reference instead of the current
+   * text selection, and the text selection no longer drives the open state, so
+   * control it with the `open` property.
+   *
+   * @default null
+   */
+  anchor?: InlinePopoverRootElementProps['anchor'];
   /**
    * Whether the overlay is currently open.
    * @default null
@@ -48,14 +59,14 @@ function InlinePopoverRootComponent(props: InlinePopoverRootProps, forwardedRef:
   const elementRef = useRef<InlinePopoverRootElement>(null);
   const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
 
-  const p3Fallback = useEditorContext();
+  const p4Fallback = useEditorContext();
 
-  const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;
+  const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;
 
   useLayoutEffect(() => {
     const element = elementRef.current as Record<string, unknown> | null;
     if (!element) return;
-    Object.assign(element, { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3 ?? p3Fallback, open: p4 });
+    Object.assign(element, { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4 ?? p4Fallback, open: p5 });
     handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
   });