@prosekit/web 0.8.0-beta.0 → 0.8.0-beta.2

package/dist/prosekit-web-drop-indicator.d.ts

@@ -1,7 +1,7 @@
-import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDeclarations, SetupOptions } from "@aria-ui/core";
+import { HostElement, HostElementConstructor, PropsDeclaration, State } from "@aria-ui/core";
 import { Editor } from "@prosekit/core";
 
-//#region src/components/drop-indicator/drop-indicator/types.d.ts
+//#region src/components/drop-indicator/drop-indicator.d.ts
 interface DropIndicatorProps {
   /**
    * The ProseKit editor instance.
@@ -18,22 +18,20 @@ interface DropIndicatorProps {
   width: number;
 }
 /** @internal */
-declare const dropIndicatorProps: PropDeclarations<DropIndicatorProps>;
-interface DropIndicatorEvents {}
-/** @internal */
-declare const dropIndicatorEvents: EventDeclarations<DropIndicatorEvents>;
-//#endregion
-//#region src/components/drop-indicator/drop-indicator/element.gen.d.ts
-declare const DropIndicatorElementBase: BaseElementConstructor<DropIndicatorProps>;
+declare const DropIndicatorPropsDeclaration: PropsDeclaration<DropIndicatorProps>;
+/**
+ * @internal
+ */
+declare function setupDropIndicator(host: HostElement, props: State<DropIndicatorProps>): void;
+declare const DropIndicatorElementBase: HostElementConstructor<DropIndicatorProps>;
+/**
+ * @public
+ */
 declare class DropIndicatorElement extends DropIndicatorElementBase {}
-//#endregion
-//#region src/components/drop-indicator/drop-indicator/setup.d.ts
 /**
  * @internal
  */
-declare function useDropIndicator(host: ConnectableElement, {
-  state
-}: SetupOptions<DropIndicatorProps, DropIndicatorEvents>): void;
+declare function registerDropIndicatorElement(): void;
 //#endregion
-export { DropIndicatorElement, type DropIndicatorEvents, type DropIndicatorProps, dropIndicatorEvents, dropIndicatorProps, useDropIndicator };
+export { DropIndicatorElement, type DropIndicatorProps, DropIndicatorPropsDeclaration, registerDropIndicatorElement, setupDropIndicator };
 //# sourceMappingURL=prosekit-web-drop-indicator.d.ts.map

package/dist/prosekit-web-drop-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-web-drop-indicator.d.ts","names":[],"sources":["../src/components/drop-indicator/drop-indicator/types.ts","../src/components/drop-indicator/drop-indicator/element.gen.ts","../src/components/drop-indicator/drop-indicator/setup.ts"],"mappings":";;;;UAGiB,kBAAA;;AAAjB;;;;;EAOE,MAAA,EAAQ,MAAA;EAOR;;;AAIF;;EAJE,KAAA;AAAA;;cAIW,kBAAA,EAAoB,gBAAA,CAAiB,kBAAA;AAAA,UAKjC,mBAAA;;cAIJ,mBAAA,EAAqB,iBAAA,CAAkB,mBAAA;;;cCzB9C,wBAAA,EAA0B,sBAAA,CAAuB,kBAAA;AAAA,cAQjD,oBAAA,SAA6B,wBAAA;;;;;ADVnC;iBEUgB,gBAAA,CACd,IAAA,EAAM,kBAAA;EACJ;AAAA,GAAS,YAAA,CAAa,kBAAA,EAAoB,mBAAA"}
+{"version":3,"file":"prosekit-web-drop-indicator.d.ts","names":[],"sources":["../src/components/drop-indicator/drop-indicator.ts"],"mappings":";;;;UAoBiB,kBAAA;;AAAjB;;;;;EAOE,MAAA,EAAQ,MAAA;EAOR;;;AAIF;;EAJE,KAAA;AAAA;;cAIW,6BAAA,EAA+B,gBAAA,CAAiB,kBAAA;;;;iBAgB7C,kBAAA,CACd,IAAA,EAAM,WAAA,EACN,KAAA,EAAO,KAAA,CAAM,kBAAA;AAAA,cAwDT,wBAAA,EAA0B,sBAAA,CAAuB,kBAAA;;;;cAQ1C,oBAAA,SAA6B,wBAAA;;;;iBAK1B,4BAAA,CAAA"}

package/dist/prosekit-web-drop-indicator.js

@@ -1,27 +1,38 @@
 import { t as useEditorExtension } from "./use-editor-extension.js";
 import { n as assignStyles, t as useScrolling } from "./use-scrolling.js";
-import { createComputed, createSignal, defineCustomElement, registerCustomElement, useEffect } from "@aria-ui/core";
-import { usePresence } from "@aria-ui/presence";
+import { computed, createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect } from "@aria-ui/core";
+import { usePresence } from "@aria-ui/utils";
 import { defineDropIndicator } from "@prosekit/extensions/drop-indicator";
-//#region src/components/drop-indicator/drop-indicator/setup.ts
+//#region src/components/drop-indicator/drop-indicator.ts
+/** @internal */
+const DropIndicatorPropsDeclaration = /* @__PURE__ */ defineProps({
+	editor: {
+		default: null,
+		attribute: false,
+		type: "json"
+	},
+	width: {
+		default: 2,
+		attribute: "width",
+		type: "number"
+	}
+});
 /**
 * @internal
 */
-function useDropIndicator(host, { state }) {
+function setupDropIndicator(host, props) {
 	const context = createSignal(null);
 	const extension = defineDropIndicator({
 		onShow: (options) => context.set(options),
 		onHide: () => context.set(null)
 	});
-	useEditorExtension(host, state.editor, extension);
-	const line = createComputed(() => context.get()?.line);
-	const scrolling = useScrolling(host);
-	usePresence(host, createComputed(() => {
-		return !!context.get() && !scrolling.get();
-	}));
+	useEditorExtension(host, props.editor.get, extension);
+	const getLine = computed(() => context.get()?.line);
+	const getScrolling = useScrolling(host);
+	usePresence(host, computed(() => !!context.get() && !getScrolling()));
 	useEffect(host, () => {
-		const lineValue = line.get();
-		const lineWidth = state.width.get();
+		const lineValue = getLine();
+		const lineWidth = props.width.get();
 		if (!lineValue) return;
 		const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue;
 		const horizontal = y1 === y2;
@@ -51,25 +62,18 @@ function useDropIndicator(host, { state }) {
 		});
 	});
 }
-//#endregion
-//#region src/components/drop-indicator/drop-indicator/types.ts
-/** @internal */
-const dropIndicatorProps = Object.freeze({
-	editor: { default: null },
-	width: { default: 2 }
-});
-/** @internal */
-const dropIndicatorEvents = {};
-//#endregion
-//#region src/components/drop-indicator/drop-indicator/element.gen.ts
-const DropIndicatorElementBase = defineCustomElement({
-	props: dropIndicatorProps,
-	events: dropIndicatorEvents,
-	setup: useDropIndicator
-});
+const DropIndicatorElementBase = defineCustomElement(setupDropIndicator, DropIndicatorPropsDeclaration);
+/**
+* @public
+*/
 var DropIndicatorElement = class extends DropIndicatorElementBase {};
-registerCustomElement("prosekit-drop-indicator", DropIndicatorElement);
+/**
+* @internal
+*/
+function registerDropIndicatorElement() {
+	registerCustomElement("prosekit-drop-indicator", DropIndicatorElement);
+}
 //#endregion
-export { DropIndicatorElement, dropIndicatorEvents, dropIndicatorProps, useDropIndicator };
+export { DropIndicatorElement, DropIndicatorPropsDeclaration, registerDropIndicatorElement, setupDropIndicator };
 
 //# sourceMappingURL=prosekit-web-drop-indicator.js.map

package/dist/prosekit-web-drop-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-web-drop-indicator.js","names":[],"sources":["../src/components/drop-indicator/drop-indicator/setup.ts","../src/components/drop-indicator/drop-indicator/types.ts","../src/components/drop-indicator/drop-indicator/element.gen.ts"],"sourcesContent":["import { createComputed, createSignal, useEffect, type ConnectableElement, type SetupOptions } from '@aria-ui/core'\nimport { usePresence } from '@aria-ui/presence'\nimport { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'\n\nimport { useEditorExtension } from '../../../hooks/use-editor-extension.ts'\nimport { useScrolling } from '../../../hooks/use-scrolling.ts'\nimport { assignStyles } from '../../../utils/assign-styles.ts'\n\nimport type { DropIndicatorEvents, DropIndicatorProps } from './types.ts'\n\n/**\n * @internal\n */\nexport function useDropIndicator(\n  host: ConnectableElement,\n  { state }: SetupOptions<DropIndicatorProps, DropIndicatorEvents>,\n): void {\n  type DropIndicatorContext = ShowHandlerOptions | null\n  const context = createSignal<DropIndicatorContext>(null)\n\n  const extension = defineDropIndicator({\n    onShow: (options) => context.set(options),\n    onHide: () => context.set(null),\n  })\n\n  useEditorExtension(host, state.editor, extension)\n\n  const line = createComputed(() => context.get()?.line)\n  const scrolling = useScrolling(host)\n  const presence = createComputed(() => {\n    return !!context.get() && !scrolling.get()\n  })\n  usePresence(host, presence)\n\n  useEffect(\n    host,\n    () => {\n      const lineValue = line.get()\n      const lineWidth = state.width.get()\n\n      if (!lineValue) return\n\n      const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue\n      const horizontal = y1 === y2\n\n      let width: number\n      let height: number\n      let top: number = y1\n      let left: number = x1\n\n      if (horizontal) {\n        width = x2 - x1\n        height = lineWidth\n        top -= lineWidth / 2\n      } else {\n        width = lineWidth\n        height = y2 - y1\n        left -= lineWidth / 2\n      }\n\n      top = Math.round(top)\n      left = Math.round(left)\n\n      assignStyles(host, {\n        position: 'fixed',\n        pointerEvents: 'none',\n        width: `${width}px`,\n        height: `${height}px`,\n        transform: `translate(${left}px, ${top}px)`,\n        left: '0px',\n        top: '0px',\n      })\n    },\n  )\n}\n","import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'\nimport type { Editor } from '@prosekit/core'\n\nexport interface DropIndicatorProps {\n  /**\n   * The ProseKit editor instance.\n   *\n   * @default null\n   * @hidden\n   */\n  editor: Editor | null\n\n  /**\n   * The line width in pixels.\n   *\n   * @default 2\n   */\n  width: number\n}\n\n/** @internal */\nexport const dropIndicatorProps: PropDeclarations<DropIndicatorProps> = Object.freeze({\n  editor: { default: null },\n  width: { default: 2 },\n})\n\nexport interface DropIndicatorEvents {\n}\n\n/** @internal */\nexport const dropIndicatorEvents: EventDeclarations<DropIndicatorEvents> = {}\n","import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from \"@aria-ui/core\"\n\nimport { useDropIndicator } from \"./setup.ts\"\nimport { dropIndicatorEvents, dropIndicatorProps, type DropIndicatorEvents, type DropIndicatorProps } from \"./types.ts\"\n\nconst DropIndicatorElementBase: BaseElementConstructor<DropIndicatorProps> = defineCustomElement<\n  DropIndicatorProps,\n  DropIndicatorEvents\n>({\n  props: dropIndicatorProps,\n  events: dropIndicatorEvents,\n  setup: useDropIndicator,\n})\nclass DropIndicatorElement extends DropIndicatorElementBase {}\n\nregisterCustomElement('prosekit-drop-indicator', DropIndicatorElement)\n  \nexport { DropIndicatorElement }\n"],"mappings":";;;;;;;;;AAaA,SAAgB,iBACd,MACA,EAAE,SACI;CAEN,MAAM,UAAU,aAAmC,KAAK;CAExD,MAAM,YAAY,oBAAoB;EACpC,SAAS,YAAY,QAAQ,IAAI,QAAQ;EACzC,cAAc,QAAQ,IAAI,KAAK;EAChC,CAAC;AAEF,oBAAmB,MAAM,MAAM,QAAQ,UAAU;CAEjD,MAAM,OAAO,qBAAqB,QAAQ,KAAK,EAAE,KAAK;CACtD,MAAM,YAAY,aAAa,KAAK;AAIpC,aAAY,MAHK,qBAAqB;AACpC,SAAO,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,UAAU,KAAK;GAC1C,CACyB;AAE3B,WACE,YACM;EACJ,MAAM,YAAY,KAAK,KAAK;EAC5B,MAAM,YAAY,MAAM,MAAM,KAAK;AAEnC,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,MAAM,IAAI,EAAE,GAAG,IAAI,GAAG,SAAS;EACvD,MAAM,aAAa,OAAO;EAE1B,IAAI;EACJ,IAAI;EACJ,IAAI,MAAc;EAClB,IAAI,OAAe;AAEnB,MAAI,YAAY;AACd,WAAQ,KAAK;AACb,YAAS;AACT,UAAO,YAAY;SACd;AACL,WAAQ;AACR,YAAS,KAAK;AACd,WAAQ,YAAY;;AAGtB,QAAM,KAAK,MAAM,IAAI;AACrB,SAAO,KAAK,MAAM,KAAK;AAEvB,eAAa,MAAM;GACjB,UAAU;GACV,eAAe;GACf,OAAO,GAAG,MAAM;GAChB,QAAQ,GAAG,OAAO;GAClB,WAAW,aAAa,KAAK,MAAM,IAAI;GACvC,MAAM;GACN,KAAK;GACN,CAAC;GAEL;;;;;ACpDH,MAAa,qBAA2D,OAAO,OAAO;CACpF,QAAQ,EAAE,SAAS,MAAM;CACzB,OAAO,EAAE,SAAS,GAAG;CACtB,CAAC;;AAMF,MAAa,sBAA8D,EAAE;;;ACzB7E,MAAM,2BAAuE,oBAG3E;CACA,OAAO;CACP,QAAQ;CACR,OAAO;CACR,CAAC;AACF,IAAM,uBAAN,cAAmC,yBAAyB;AAE5D,sBAAsB,2BAA2B,qBAAqB"}
+{"version":3,"file":"prosekit-web-drop-indicator.js","names":[],"sources":["../src/components/drop-indicator/drop-indicator.ts"],"sourcesContent":["import {\n  computed,\n  createSignal,\n  defineCustomElement,\n  defineProps,\n  registerCustomElement,\n  useEffect,\n  type HostElement,\n  type HostElementConstructor,\n  type PropsDeclaration,\n  type State,\n} from '@aria-ui/core'\nimport { usePresence } from '@aria-ui/utils'\nimport type { Editor } from '@prosekit/core'\nimport { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'\n\nimport { useEditorExtension } from '../../hooks/use-editor-extension.ts'\nimport { useScrolling } from '../../hooks/use-scrolling.ts'\nimport { assignStyles } from '../../utils/assign-styles.ts'\n\nexport interface DropIndicatorProps {\n  /**\n   * The ProseKit editor instance.\n   *\n   * @default null\n   * @hidden\n   */\n  editor: Editor | null\n\n  /**\n   * The line width in pixels.\n   *\n   * @default 2\n   */\n  width: number\n}\n\n/** @internal */\nexport const DropIndicatorPropsDeclaration: PropsDeclaration<DropIndicatorProps> = /* @__PURE__ */ defineProps<DropIndicatorProps>({\n  editor: {\n    default: null,\n    attribute: false,\n    type: 'json',\n  },\n  width: {\n    default: 2,\n    attribute: 'width',\n    type: 'number',\n  },\n})\n\n/**\n * @internal\n */\nexport function setupDropIndicator(\n  host: HostElement,\n  props: State<DropIndicatorProps>,\n): void {\n  type DropIndicatorContext = ShowHandlerOptions | null\n  const context = createSignal<DropIndicatorContext>(null)\n\n  const extension = defineDropIndicator({\n    onShow: (options) => context.set(options),\n    onHide: () => context.set(null),\n  })\n\n  useEditorExtension(host, props.editor.get, extension)\n\n  const getLine = computed(() => context.get()?.line)\n  const getScrolling = useScrolling(host)\n  const getPresence = computed(() => !!context.get() && !getScrolling())\n  usePresence(host, getPresence)\n\n  useEffect(host, () => {\n    const lineValue = getLine()\n    const lineWidth = props.width.get()\n\n    if (!lineValue) return\n\n    const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue\n    const horizontal = y1 === y2\n\n    let width: number\n    let height: number\n    let top: number = y1\n    let left: number = x1\n\n    if (horizontal) {\n      width = x2 - x1\n      height = lineWidth\n      top -= lineWidth / 2\n    } else {\n      width = lineWidth\n      height = y2 - y1\n      left -= lineWidth / 2\n    }\n\n    top = Math.round(top)\n    left = Math.round(left)\n\n    assignStyles(host, {\n      position: 'fixed',\n      pointerEvents: 'none',\n      width: `${width}px`,\n      height: `${height}px`,\n      transform: `translate(${left}px, ${top}px)`,\n      left: '0px',\n      top: '0px',\n    })\n  })\n}\n\nconst DropIndicatorElementBase: HostElementConstructor<DropIndicatorProps> = defineCustomElement(\n  setupDropIndicator,\n  DropIndicatorPropsDeclaration,\n)\n\n/**\n * @public\n */\nexport class DropIndicatorElement extends DropIndicatorElementBase {}\n\n/**\n * @internal\n */\nexport function registerDropIndicatorElement(): void {\n  registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)\n}\n"],"mappings":";;;;;;;AAsCA,MAAa,gCAAsF,4BAAgC;CACjI,QAAQ;EACN,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,OAAO;EACL,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,CAAC;;;;AAKF,SAAgB,mBACd,MACA,OACM;CAEN,MAAM,UAAU,aAAmC,KAAK;CAExD,MAAM,YAAY,oBAAoB;EACpC,SAAS,YAAY,QAAQ,IAAI,QAAQ;EACzC,cAAc,QAAQ,IAAI,KAAK;EAChC,CAAC;AAEF,oBAAmB,MAAM,MAAM,OAAO,KAAK,UAAU;CAErD,MAAM,UAAU,eAAe,QAAQ,KAAK,EAAE,KAAK;CACnD,MAAM,eAAe,aAAa,KAAK;AAEvC,aAAY,MADQ,eAAe,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CACxC;AAE9B,WAAU,YAAY;EACpB,MAAM,YAAY,SAAS;EAC3B,MAAM,YAAY,MAAM,MAAM,KAAK;AAEnC,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,MAAM,IAAI,EAAE,GAAG,IAAI,GAAG,SAAS;EACvD,MAAM,aAAa,OAAO;EAE1B,IAAI;EACJ,IAAI;EACJ,IAAI,MAAc;EAClB,IAAI,OAAe;AAEnB,MAAI,YAAY;AACd,WAAQ,KAAK;AACb,YAAS;AACT,UAAO,YAAY;SACd;AACL,WAAQ;AACR,YAAS,KAAK;AACd,WAAQ,YAAY;;AAGtB,QAAM,KAAK,MAAM,IAAI;AACrB,SAAO,KAAK,MAAM,KAAK;AAEvB,eAAa,MAAM;GACjB,UAAU;GACV,eAAe;GACf,OAAO,GAAG,MAAM;GAChB,QAAQ,GAAG,OAAO;GAClB,WAAW,aAAa,KAAK,MAAM,IAAI;GACvC,MAAM;GACN,KAAK;GACN,CAAC;GACF;;AAGJ,MAAM,2BAAuE,oBAC3E,oBACA,8BACD;;;;AAKD,IAAa,uBAAb,cAA0C,yBAAyB;;;;AAKnE,SAAgB,+BAAqC;AACnD,uBAAsB,2BAA2B,qBAAqB"}

package/dist/prosekit-web-inline-popover.d.ts

@@ -1,91 +1,132 @@
-import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDeclarations, SetupOptions } from "@aria-ui/core";
+import { HostElement, HostElementConstructor, PropsDeclaration, State } from "@aria-ui/core";
+import { OpenChangeEvent, OpenChangeEvent as OpenChangeEvent$1, OverlayPopupProps, OverlayPositionerProps, OverlayRootProps } from "@aria-ui/elements/overlay";
 import { Editor } from "@prosekit/core";
-import { OverlayPositionerEvents, OverlayPositionerProps } from "@aria-ui/overlay";
 
-//#region src/components/inline-popover/inline-popover/types.d.ts
-interface InlinePopoverProps extends Omit<OverlayPositionerProps, 'placement' | 'offset' | 'hide' | 'overlap' | 'inline' | 'overflowPadding'> {
+//#region src/components/inline-popover/inline-popover-popup.d.ts
+/**
+ * @public
+ */
+interface InlinePopoverPopupProps extends OverlayPopupProps {}
+/** @internal */
+declare const InlinePopoverPopupPropsDeclaration: PropsDeclaration<InlinePopoverPopupProps>;
+/** @internal */
+declare function setupInlinePopoverPopup(host: HostElement, _props: State<InlinePopoverPopupProps>): void;
+declare const InlinePopoverPopupElementBase: HostElementConstructor<InlinePopoverPopupProps>;
+/**
+ * @public
+ */
+declare class InlinePopoverPopupElement extends InlinePopoverPopupElementBase {}
+/** @internal */
+declare function registerInlinePopoverPopupElement(): void;
+//#endregion
+//#region src/components/inline-popover/inline-popover-positioner.d.ts
+/**
+ * @public
+ */
+interface InlinePopoverPositionerProps extends Omit<OverlayPositionerProps, 'placement' | 'offset' | 'hide' | 'hoist' | 'overlap' | 'inline' | 'overflowPadding'> {
   /**
-   * The ProseKit editor instance.
+   * The initial placement of the floating element
    *
-   * @default null
-   * @hidden
+   * @default "top"
    */
-  editor: Editor | null;
+  placement: OverlayPositionerProps['placement'];
   /**
-   * Whether the popover is open by default when some inline content is
-   * selected.
+   * The distance between the reference and floating element.
    *
-   * 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 12
+   */
+  offset: OverlayPositionerProps['offset'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
    *
    * @default true
    */
-  defaultOpen: boolean;
+  hide: OverlayPositionerProps['hide'];
   /**
-   * Whether the popover is open.
-   *
-   * Notice that the popover will be always hidden if the inline selection is
-   * empty.
+   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * to place the floating element on top of other page content.
    *
    * @default false
    */
-  open: boolean;
+  hoist: boolean;
   /**
-   * Whether the inline popover should be dismissed when the editor receives an
-   * Escape key press.
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
    *
    * @default true
    */
-  dismissOnEscape: boolean;
+  overlap: OverlayPositionerProps['overlap'];
   /**
-   * @default "top"
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default true
    */
-  placement: OverlayPositionerProps['placement'];
+  inline: OverlayPositionerProps['inline'];
   /**
-   * @default 12
+   * Describes the virtual padding around the boundary to check for overflow.
+   *
+   * @default 8
    */
-  offset: OverlayPositionerProps['offset'];
+  overflowPadding: OverlayPositionerProps['overflowPadding'];
+}
+/** @internal */
+declare const InlinePopoverPositionerPropsDeclaration: PropsDeclaration<InlinePopoverPositionerProps>;
+/** @internal */
+declare function setupInlinePopoverPositioner(host: HostElement, props: State<InlinePopoverPositionerProps>): void;
+declare const InlinePopoverPositionerElementBase: HostElementConstructor<InlinePopoverPositionerProps>;
+/**
+ * @public
+ */
+declare class InlinePopoverPositionerElement extends InlinePopoverPositionerElementBase {}
+/** @internal */
+declare function registerInlinePopoverPositionerElement(): void;
+//#endregion
+//#region src/components/inline-popover/inline-popover-root.d.ts
+/**
+ * @public
+ */
+interface InlinePopoverRootProps extends OverlayRootProps {
   /**
-   * @default true
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
    */
-  hide: OverlayPositionerProps['hide'];
+  editor: Editor | null;
   /**
+   * Whether the popover is open by default when some inline content is
+   * selected.
+   *
    * @default true
    */
-  overlap: OverlayPositionerProps['overlap'];
+  defaultOpen: boolean;
   /**
+   * Whether the inline popover should be dismissed when the editor receives an
+   * Escape key press.
+   *
    * @default true
    */
-  inline: OverlayPositionerProps['inline'];
-  /**
-   * @default 8
-   */
-  overflowPadding: OverlayPositionerProps['overflowPadding'];
+  dismissOnEscape: boolean;
 }
 /** @internal */
-declare const inlinePopoverProps: PropDeclarations<InlinePopoverProps>;
-interface InlinePopoverEvents extends OverlayPositionerEvents {
-  /**
-   * Fired when the open state changes.
-   */
-  openChange: CustomEvent<boolean>;
+declare const InlinePopoverRootPropsDeclaration: PropsDeclaration<InlinePopoverRootProps>;
+/**
+ * @public
+ */
+interface InlinePopoverRootEvents {
+  openChange: OpenChangeEvent$1;
 }
 /** @internal */
-declare const inlinePopoverEvents: EventDeclarations<InlinePopoverEvents>;
-//#endregion
-//#region src/components/inline-popover/inline-popover/element.gen.d.ts
-declare const InlinePopoverElementBase: BaseElementConstructor<InlinePopoverProps>;
-declare class InlinePopoverElement extends InlinePopoverElementBase {}
-//#endregion
-//#region src/components/inline-popover/inline-popover/setup.d.ts
+declare function setupInlinePopoverRoot(host: HostElement, props: State<InlinePopoverRootProps>): void;
+declare const InlinePopoverRootElementBase: HostElementConstructor<InlinePopoverRootProps>;
 /**
- * @internal
+ * @public
  */
-declare function useInlinePopover(host: ConnectableElement, {
-  state,
-  emit
-}: SetupOptions<InlinePopoverProps, InlinePopoverEvents>): void;
+declare class InlinePopoverRootElement extends InlinePopoverRootElementBase {}
+/** @internal */
+declare function registerInlinePopoverRootElement(): void;
 //#endregion
-export { InlinePopoverElement, type InlinePopoverEvents, type InlinePopoverProps, inlinePopoverEvents, inlinePopoverProps, useInlinePopover };
+export { InlinePopoverPopupElement, type InlinePopoverPopupProps, InlinePopoverPopupPropsDeclaration, InlinePopoverPositionerElement, type InlinePopoverPositionerProps, InlinePopoverPositionerPropsDeclaration, InlinePopoverRootElement, type InlinePopoverRootEvents, type InlinePopoverRootProps, InlinePopoverRootPropsDeclaration, OpenChangeEvent, registerInlinePopoverPopupElement, registerInlinePopoverPositionerElement, registerInlinePopoverRootElement, setupInlinePopoverPopup, setupInlinePopoverPositioner, setupInlinePopoverRoot };
 //# sourceMappingURL=prosekit-web-inline-popover.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prosekit-web-inline-popover.d.ts","names":[],"sources":["../src/components/inline-popover/inline-popover/types.ts","../src/components/inline-popover/inline-popover/element.gen.ts","../src/components/inline-popover/inline-popover/setup.ts"],"mappings":";;;;;UASiB,kBAAA,SACf,IAAA,CACE,sBAAA;;AAFJ;;;;;EAYE,MAAA,EAAQ,MAAA;EAwCA;;;;;;;;;;EA5BR,WAAA;EAZQ;;;;;;;;EAsBR,IAAA;EAuBM;;;;;;EAfN,eAAA;EA8BuC;;AAIzC;EA7BE,SAAA,EAAW,sBAAA;;;;EAKX,MAAA,EAAQ,sBAAA;EAuC2B;;;EAlCnC,IAAA,EAAM,sBAAA;EAsCN;;;EAjCA,OAAA,EAAS,sBAAA;EAqCE;;;EAhCX,MAAA,EAAQ,sBAAA;EAgC6D;;;EA3BrE,eAAA,EAAiB,sBAAA;AAAA;;cAIN,kBAAA,EAAoB,gBAAA,CAAiB,kBAAA;AAAA,UAejC,mBAAA,SAA4B,uBAAA;EC/F4B;AAAA;;EDmGvE,UAAA,EAAY,WAAA;AAAA;;cAID,mBAAA,EAAqB,iBAAA,CAAkB,mBAAA;;;cCvG9C,wBAAA,EAA0B,sBAAA,CAAuB,kBAAA;AAAA,cAQjD,oBAAA,SAA6B,wBAAA;;;;;;iBCYnB,gBAAA,CACd,IAAA,EAAM,kBAAA;EACJ,KAAA;EAAO;AAAA,GAAQ,YAAA,CAAa,kBAAA,EAAoB,mBAAA"}
+{"version":3,"file":"prosekit-web-inline-popover.d.ts","names":[],"sources":["../src/components/inline-popover/inline-popover-popup.ts","../src/components/inline-popover/inline-popover-positioner.ts","../src/components/inline-popover/inline-popover-root.ts"],"mappings":";;;;;;;;UAkBiB,uBAAA,SAAgC,iBAAA;;cAGpC,kCAAA,EAAoC,gBAAA,CAAiB,uBAAA;;iBAGlD,uBAAA,CACd,IAAA,EAAM,WAAA,EACN,MAAA,EAAQ,KAAA,CAAM,uBAAA;AAAA,cAYV,6BAAA,EAA+B,sBAAA,CAAuB,uBAAA;;;;cAQ/C,yBAAA,SAAkC,6BAAA;;iBAG/B,iCAAA,CAAA;;;;;;UCjCC,4BAAA,SACf,IAAA,CACE,sBAAA;EDAqC;;;;AAGzC;ECYE,SAAA,EAAW,sBAAA;;;;ADTb;;ECgBE,MAAA,EAAQ,sBAAA;EDfF;;;;;;ECuBN,IAAA,EAAM,sBAAA;EDtBE;;;;;AAUT;ECoBC,KAAA;;;;ADVF;;;ECkBE,OAAA,EAAS,sBAAA;EDlBiE;AAG5E;;;;;ECuBE,MAAA,EAAQ,sBAAA;;;AAxDV;;;EA+DE,eAAA,EAAiB,sBAAA;AAAA;;cAIN,uCAAA,EAAyC,gBAAA,CAAiB,4BAAA;;iBAcvD,4BAAA,CACd,IAAA,EAAM,WAAA,EACN,KAAA,EAAO,KAAA,CAAM,4BAAA;AAAA,cAKT,kCAAA,EAAoC,sBAAA,CAAuB,4BAAA;;;;cAQpD,8BAAA,SAAuC,kCAAA;;iBAGpC,sCAAA,CAAA;;;;ADjGhB;;UEMiB,sBAAA,SAA+B,gBAAA;EFNC;;AAGjD;;;;EEUE,MAAA,EAAQ,MAAA;EFPM;;;;;;EEed,WAAA;EFba;;;;;;EEqBb,eAAA;AAAA;AFXD;AAAA,cEeY,iCAAA,EAAmC,gBAAA,CAAiB,sBAAA;;;;UAYhD,uBAAA;EACf,UAAA,EAAY,iBAAA;AAAA;;iBAIE,sBAAA,CACd,IAAA,EAAM,WAAA,EACN,KAAA,EAAO,KAAA,CAAM,sBAAA;AAAA,cAsCT,4BAAA,EAA8B,sBAAA,CAAuB,sBAAA;;;;cAQ9C,wBAAA,SAAiC,4BAAA;;iBAG9B,gCAAA,CAAA"}

package/dist/prosekit-web-inline-popover.js

@@ -1,31 +1,109 @@
 import { t as useEditorExtension } from "./use-editor-extension.js";
-import { createComputed, createSignal, defineCustomElement, registerCustomElement, useAttribute, useEffect } from "@aria-ui/core";
+import { computed, createContext, defineCustomElement, defineProps, onMount, registerCustomElement } from "@aria-ui/core";
+import { OpenChangeEvent, OverlayPopupPropsDeclaration, OverlayPositionerPropsDeclaration, OverlayRootPropsDeclaration, setupOverlayPopup, setupOverlayPositioner, useOverlayStore } from "@aria-ui/elements/overlay";
 import { containsInlineNode, defineFocusChangeHandler, defineKeymap, defineUpdateHandler, isInCodeBlock, isTextSelection } from "@prosekit/core";
-import { useOverlayPositionerState } from "@aria-ui/overlay/elements";
-import { usePresence } from "@aria-ui/presence";
-import { overlayPositionerEvents as overlayPositionerEvents$1, overlayPositionerProps as overlayPositionerProps$1 } from "@aria-ui/overlay";
+import { usePresence } from "@aria-ui/utils";
+//#region src/components/inline-popover/store.ts
+const InlinePopoverStoreContext = createContext("prosekit-inline-popover-store");
+//#endregion
+//#region src/components/inline-popover/inline-popover-popup.ts
+/** @internal */
+const InlinePopoverPopupPropsDeclaration = OverlayPopupPropsDeclaration;
+/** @internal */
+function setupInlinePopoverPopup(host, _props) {
+	const getStore = InlinePopoverStoreContext.consume(host);
+	setupOverlayPopup(host, getStore);
+	usePresence(host, computed(() => getStore()?.getIsOpen() ?? false));
+	onMount(host, () => {
+		host.role = "dialog";
+	});
+}
+const InlinePopoverPopupElementBase = defineCustomElement(setupInlinePopoverPopup, InlinePopoverPopupPropsDeclaration);
+/**
+* @public
+*/
+var InlinePopoverPopupElement = class extends InlinePopoverPopupElementBase {};
+/** @internal */
+function registerInlinePopoverPopupElement() {
+	registerCustomElement("prosekit-inline-popover-popup", InlinePopoverPopupElement);
+}
+//#endregion
+//#region src/components/inline-popover/inline-popover-positioner.ts
+/** @internal */
+const InlinePopoverPositionerPropsDeclaration = /* @__PURE__ */ defineProps({
+	...OverlayPositionerPropsDeclaration,
+	placement: {
+		default: "top",
+		attribute: "placement",
+		type: "string"
+	},
+	offset: {
+		default: 12,
+		attribute: false,
+		type: "json"
+	},
+	hide: {
+		default: true,
+		attribute: "hide",
+		type: "boolean"
+	},
+	hoist: {
+		default: false,
+		attribute: "hoist",
+		type: "boolean"
+	},
+	overlap: {
+		default: true,
+		attribute: "overlap",
+		type: "boolean"
+	},
+	inline: {
+		default: true,
+		attribute: "inline",
+		type: "boolean"
+	},
+	overflowPadding: {
+		default: 8,
+		attribute: "overflow-padding",
+		type: "number"
+	}
+});
+/** @internal */
+function setupInlinePopoverPositioner(host, props) {
+	setupOverlayPositioner(host, props, InlinePopoverStoreContext.consume(host));
+}
+const InlinePopoverPositionerElementBase = defineCustomElement(setupInlinePopoverPositioner, InlinePopoverPositionerPropsDeclaration);
+/**
+* @public
+*/
+var InlinePopoverPositionerElement = class extends InlinePopoverPositionerElementBase {};
+/** @internal */
+function registerInlinePopoverPositionerElement() {
+	registerCustomElement("prosekit-inline-popover-positioner", InlinePopoverPositionerElement);
+}
+//#endregion
 //#region src/hooks/use-editor-focus-event.ts
 /**
 * @internal
 */
-function useEditorFocusChangeEvent(host, editor, handler) {
-	useEditorExtension(host, editor, defineFocusChangeHandler(handler));
+function useEditorFocusChangeEvent(host, getEditor, handler) {
+	useEditorExtension(host, getEditor, defineFocusChangeHandler(handler));
 }
 //#endregion
 //#region src/hooks/use-editor-update-event.ts
 /**
 * @internal
 */
-function useEditorUpdateEvent(host, editor, handler) {
-	useEditorExtension(host, editor, defineUpdateHandler(handler));
+function useEditorUpdateEvent(host, getEditor, handler) {
+	useEditorExtension(host, getEditor, defineUpdateHandler(handler));
 }
 //#endregion
 //#region src/hooks/use-keymap.ts
-function useKeymap(host, editor, keymap) {
-	useEditorExtension(host, editor, defineKeymap(keymap));
+function useKeymap(host, getEditor, keymap) {
+	useEditorExtension(host, getEditor, defineKeymap(keymap));
 }
 //#endregion
-//#region src/components/inline-popover/inline-popover/virtual-selection-element.ts
+//#region src/components/inline-popover/virtual-selection-element.ts
 function getVirtualSelectionElement(view) {
 	if (typeof window === "undefined" || view.isDestroyed) return;
 	const selection = view.state.selection;
@@ -58,84 +136,61 @@ function getInlineDecoration(view) {
 	};
 }
 //#endregion
-//#region src/components/inline-popover/inline-popover/setup.ts
-/**
-* @internal
-*/
-function useInlinePopover(host, { state, emit }) {
-	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, editor) {
-	const reference = createSignal(null);
+//#region src/components/inline-popover/inline-popover-root.ts
+/** @internal */
+const InlinePopoverRootPropsDeclaration = /* @__PURE__ */ defineProps({
+	...OverlayRootPropsDeclaration,
+	editor: {
+		default: null,
+		attribute: false,
+		type: "json"
+	},
+	defaultOpen: {
+		default: true,
+		attribute: "default-open",
+		type: "boolean"
+	},
+	dismissOnEscape: {
+		default: true,
+		attribute: "dismiss-on-escape",
+		type: "boolean"
+	}
+});
+/** @internal */
+function setupInlinePopoverRoot(host, props) {
+	const store = useOverlayStore(host, props);
+	InlinePopoverStoreContext.provide(host, store);
 	let editorFocused = false;
-	useEditorFocusChangeEvent(host, editor, (focus) => {
+	useEditorFocusChangeEvent(host, props.editor.get, (focus) => {
 		editorFocused = focus;
 	});
 	let prevSelection;
-	useEditorUpdateEvent(host, editor, (view) => {
+	useEditorUpdateEvent(host, props.editor.get, (view) => {
 		if (!editorFocused && host.contains(host.ownerDocument.activeElement)) return;
 		const { selection } = view.state;
-		const selectionUnchanged = prevSelection?.eq(selection);
+		if (prevSelection?.eq(selection)) return;
 		prevSelection = selection;
-		if (selectionUnchanged) return;
-		reference.set(getVirtualSelectionElement(view) || null);
+		const reference = getVirtualSelectionElement(view);
+		store.setAnchorElement(reference);
+		if (reference && props.defaultOpen.get()) store.requestOpenChange(true);
+		else if (!reference) store.requestOpenChange(false);
 	});
-	return reference;
+	useKeymap(host, props.editor.get, { Escape: () => {
+		if (!props.dismissOnEscape.get() || !store.getIsOpen()) return false;
+		store.requestOpenChange(false);
+		return true;
+	} });
 }
-//#endregion
-//#region src/components/inline-popover/inline-popover/types.ts
-/** @internal */
-const inlinePopoverProps = Object.freeze({
-	...overlayPositionerProps$1,
-	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 }
-});
+const InlinePopoverRootElementBase = defineCustomElement(setupInlinePopoverRoot, InlinePopoverRootPropsDeclaration);
+/**
+* @public
+*/
+var InlinePopoverRootElement = class extends InlinePopoverRootElementBase {};
 /** @internal */
-const inlinePopoverEvents = {
-	...overlayPositionerEvents$1,
-	openChange: {}
-};
-//#endregion
-//#region src/components/inline-popover/inline-popover/element.gen.ts
-const InlinePopoverElementBase = defineCustomElement({
-	props: inlinePopoverProps,
-	events: inlinePopoverEvents,
-	setup: useInlinePopover
-});
-var InlinePopoverElement = class extends InlinePopoverElementBase {};
-registerCustomElement("prosekit-inline-popover", InlinePopoverElement);
+function registerInlinePopoverRootElement() {
+	registerCustomElement("prosekit-inline-popover-root", InlinePopoverRootElement);
+}
 //#endregion
-export { InlinePopoverElement, inlinePopoverEvents, inlinePopoverProps, useInlinePopover };
+export { InlinePopoverPopupElement, InlinePopoverPopupPropsDeclaration, InlinePopoverPositionerElement, InlinePopoverPositionerPropsDeclaration, InlinePopoverRootElement, InlinePopoverRootPropsDeclaration, OpenChangeEvent, registerInlinePopoverPopupElement, registerInlinePopoverPositionerElement, registerInlinePopoverRootElement, setupInlinePopoverPopup, setupInlinePopoverPositioner, setupInlinePopoverRoot };
 
 //# sourceMappingURL=prosekit-web-inline-popover.js.map