@prosekit/vue 0.7.6 → 0.8.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -158,6 +158,17 @@ interface InlinePopoverRootProps {
158
158
  * @default true
159
159
  */
160
160
  dismissOnEscape?: InlinePopoverRootProps$1['dismissOnEscape'];
161
+ /**
162
+ * The reference to position the popover against. This can be a DOM element, a
163
+ * Floating UI virtual element, or a function that returns either of them.
164
+ *
165
+ * When set, the popover is anchored to this reference instead of the current
166
+ * text selection, and the text selection no longer drives the open state, so
167
+ * control it with the `open` property.
168
+ *
169
+ * @default null
170
+ */
171
+ anchor?: InlinePopoverRootProps$1['anchor'];
161
172
  /**
162
173
  * Whether the overlay is currently open.
163
174
  * @default null
@@ -1 +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;;cAGJ,kBAAA,EAAoB,sBAAA,CAAuB,uBAAA,GAA0B,cAAA;;UCHjE,4BAAA;EDAuB;;;AAAA;AAGxC;ECGE,SAAA,GAAY,8BAAA;;;;;;EAMZ,MAAA,GAAS,8BAAA;EDTsB;;;;AAA+D;;ECgB9F,IAAA,GAAO,8BAAA;EAnBoC;;;;;;EA0B3C,KAAA,GAAQ,8BAAA;EAcC;;;;;;EAPT,OAAA,GAAU,8BAAA;EAwDE;;;;;;EAjDZ,MAAA,GAAS,8BAAA;EAsFwC;;;;;EAhFjD,eAAA,GAAkB,8BAAA;EA3BX;;;;;EAiCP,QAAA,GAAW,8BAAA;EAZF;;;;;;;EAoBT,UAAA,GAAa,8BAAA;EASN;;;;;;;;EAAP,IAAA,GAAO,8BAAA;EAkCP;;;;;EA5BA,KAAA,GAAQ,8BAAA;EAmDR;;;AAAiD;AAInD;;EAhDE,WAAA,GAAc,8BAAA;EAgD6C;;;;;;EAzC3D,SAAA,GAAY,8BAAA;EAyC8E;;AAAc;;AChI1G;;ED8FE,UAAA,GAAa,8BAAA;ECvFJ;;;;;;ED8FT,QAAA,GAAW,8BAAA;ECpEmC;;;;;;ED2E9C,YAAA,GAAe,8BAAA;EClFf;;;;;;;ED0FA,cAAA,GAAiB,8BAAA;ECnF2C;AAI9D;;;;;;EDuFE,WAAA,GAAc,8BAAA;AAAA;;cAIH,uBAAA,EAAyB,sBAAA,CAAuB,4BAAA,GAA+B,cAAA;;UChI3E,sBAAA;EFFuB;;;AAAA;AAGxC;;EEME,MAAA,GAAS,wBAAA;EFN6C;;;;;;EEatD,WAAA,GAAc,wBAAA;EFbkE;;AAAc;;ACHhG;;ECuBE,eAAA,GAAkB,wBAAA;EDjBN;;;;ECsBZ,IAAA,GAAO,wBAAA;EDYE;;;;ECPT,QAAA,GAAW,wBAAA;ED0CH;ECxCR,YAAA,IAAgB,KAAA,EAAO,uBAAA;AAAA;;cAIZ,iBAAA,EAAmB,sBAAA,CAAuB,sBAAA,GAAyB,cAAA"}
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;;cAGJ,kBAAA,EAAoB,sBAAA,CAAuB,uBAAA,GAA0B,cAAA;;UCHjE,4BAAA;EDAuB;;;AAAA;AAGxC;ECGE,SAAA,GAAY,8BAAA;;;;;;EAMZ,MAAA,GAAS,8BAAA;EDTsB;;;;AAA+D;;ECgB9F,IAAA,GAAO,8BAAA;EAnBoC;;;;;;EA0B3C,KAAA,GAAQ,8BAAA;EAcC;;;;;;EAPT,OAAA,GAAU,8BAAA;EAwDE;;;;;;EAjDZ,MAAA,GAAS,8BAAA;EAsFwC;;;;;EAhFjD,eAAA,GAAkB,8BAAA;EA3BX;;;;;EAiCP,QAAA,GAAW,8BAAA;EAZF;;;;;;;EAoBT,UAAA,GAAa,8BAAA;EASN;;;;;;;;EAAP,IAAA,GAAO,8BAAA;EAkCP;;;;;EA5BA,KAAA,GAAQ,8BAAA;EAmDR;;;AAAiD;AAInD;;EAhDE,WAAA,GAAc,8BAAA;EAgD6C;;;;;;EAzC3D,SAAA,GAAY,8BAAA;EAyC8E;;AAAc;;AChI1G;;ED8FE,UAAA,GAAa,8BAAA;ECvFJ;;;;;;ED8FT,QAAA,GAAW,8BAAA;ECzDmC;;;;;;EDgE9C,YAAA,GAAe,8BAAA;ECvFG;;;;;;;ED+FlB,cAAA,GAAiB,8BAAA;ECxEM;;;AAAqC;AAI9D;;;ED4EE,WAAA,GAAc,8BAAA;AAAA;;cAIH,uBAAA,EAAyB,sBAAA,CAAuB,4BAAA,GAA+B,cAAA;;UChI3E,sBAAA;EFFuB;;;AAAA;AAGxC;;EEME,MAAA,GAAS,wBAAA;EFN6C;;;;;;EEatD,WAAA,GAAc,wBAAA;EFbkE;;AAAc;;ACHhG;;ECuBE,eAAA,GAAkB,wBAAA;EDjBN;;;;;;;;;;EC4BZ,MAAA,GAAS,wBAAA;EDgDK;;;;EC3Cd,IAAA,GAAO,wBAAA;ED+EU;;;;EC1EjB,QAAA,GAAW,wBAAA;EDtCC;ECwCZ,YAAA,IAAgB,KAAA,EAAO,uBAAA;AAAA;;cAIZ,iBAAA,EAAmB,sBAAA,CAAuB,sBAAA,GAAyB,cAAA"}
@@ -91,15 +91,16 @@ const InlinePopoverPositioner = /* @__PURE__ */ defineComponent((props, { slots
91
91
  const InlinePopoverRoot = /* @__PURE__ */ defineComponent((props, { slots }) => {
92
92
  registerInlinePopoverRootElement();
93
93
  const elementRef = shallowRef(null);
94
- const p3Fallback = useEditorContext();
94
+ const p4Fallback = useEditorContext();
95
95
  const splittedProps = computed(() => {
96
- const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;
96
+ const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;
97
97
  return [[
98
98
  p0,
99
99
  p1,
100
100
  p2,
101
101
  p3,
102
102
  p4,
103
+ p5,
103
104
  e0
104
105
  ], restProps];
105
106
  });
@@ -107,13 +108,14 @@ const InlinePopoverRoot = /* @__PURE__ */ defineComponent((props, { slots }) =>
107
108
  watchEffect(() => {
108
109
  const element = elementRef.value;
109
110
  if (!element) return;
110
- const [p0, p1, p2, p3, p4, e0] = splittedProps.value[0];
111
+ const [p0, p1, p2, p3, p4, p5, e0] = splittedProps.value[0];
111
112
  Object.assign(element, {
112
- defaultOpen: p0,
113
- disabled: p1,
114
- dismissOnEscape: p2,
115
- editor: p3 ?? p3Fallback,
116
- open: p4
113
+ anchor: p0,
114
+ defaultOpen: p1,
115
+ disabled: p2,
116
+ dismissOnEscape: p3,
117
+ editor: p4 ?? p4Fallback,
118
+ open: p5
117
119
  });
118
120
  handlers.length = 0;
119
121
  handlers.push(e0);
@@ -135,6 +137,7 @@ const InlinePopoverRoot = /* @__PURE__ */ defineComponent((props, { slots }) =>
135
137
  }, slots.default?.());
136
138
  };
137
139
  }, { props: [
140
+ "anchor",
138
141
  "defaultOpen",
139
142
  "disabled",
140
143
  "dismissOnEscape",
@@ -1 +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"],"sourcesContent":["// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPopupElement } from '@prosekit/web/inline-popover';\nimport { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes } from 'vue';\n\n/** Props for the {@link InlinePopoverPopup} Vue component. */\nexport interface InlinePopoverPopupProps {}\n\n/** A Vue component that renders an `prosekit-inline-popover-popup` custom element. */\nexport const InlinePopoverPopup: DefineSetupFnComponent<InlinePopoverPopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverPopupProps & HTMLAttributes>(\n (props, { slots }) => {\n registerInlinePopoverPopupElement();\n\n return () => {\n return h('prosekit-inline-popover-popup', props, slots.default?.());\n };\n },\n { props: [] },\n);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';\nimport { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';\n\n/** Props for the {@link InlinePopoverPositioner} Vue 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\n/** A Vue component that renders an `prosekit-inline-popover-positioner` custom element. */\nexport const InlinePopoverPositioner: DefineSetupFnComponent<InlinePopoverPositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverPositionerProps & HTMLAttributes>(\n (props, { slots }) => {\n registerInlinePopoverPositionerElement();\n\n const elementRef = shallowRef<HTMLElement | null>(null);\n\n const splittedProps = computed(() => {\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 return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17], restProps] as const;\n });\n\n watchEffect(() => {\n const element = elementRef.value;\n if (!element) return;\n\n const [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17] = splittedProps.value[0];\n\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 return () => {\n const restProps = splittedProps.value[1];\n return h('prosekit-inline-popover-positioner', { ...restProps, ref: elementRef }, slots.default?.());\n };\n },\n { props: ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },\n);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverRootElement, type InlinePopoverRootEvents, type InlinePopoverRootProps as InlinePopoverRootElementProps } from '@prosekit/web/inline-popover';\nimport { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';\n\nimport { useEditorContext } from '../../injection/editor-context.ts';\n\n/** Props for the {@link InlinePopoverRoot} Vue 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\n/** A Vue component that renders an `prosekit-inline-popover-root` custom element. */\nexport const InlinePopoverRoot: DefineSetupFnComponent<InlinePopoverRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverRootProps & HTMLAttributes>(\n (props, { slots }) => {\n registerInlinePopoverRootElement();\n\n const elementRef = shallowRef<HTMLElement | null>(null);\n\n const p3Fallback = useEditorContext();\n\n const splittedProps = computed(() => {\n const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;\n return [[p0, p1, p2, p3, p4, e0], restProps] as const;\n });\n\n const handlers: Array<((event: any) => void) | undefined> = [];\n\n watchEffect(() => {\n const element = elementRef.value;\n if (!element) return;\n\n const [p0, p1, p2, p3, p4, e0] = splittedProps.value[0];\n\n Object.assign(element, { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3 ?? p3Fallback, open: p4 });\n\n handlers.length = 0;\n handlers.push(e0);\n });\n\n watchEffect(() => {\n const element = elementRef.value;\n if (!element) return;\n\n const ac = new AbortController();\n for (const [index, eventName] of ['openChange'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlers[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n });\n\n return () => {\n const restProps = splittedProps.value[1];\n return h('prosekit-inline-popover-root', { ...restProps, ref: elementRef }, slots.default?.());\n };\n },\n { props: ['defaultOpen', 'disabled', 'dismissOnEscape', 'editor', 'open', 'onOpenChange'] },\n);\n"],"mappings":"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"}
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"],"sourcesContent":["// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPopupElement } from '@prosekit/web/inline-popover';\nimport { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes } from 'vue';\n\n/** Props for the {@link InlinePopoverPopup} Vue component. */\nexport interface InlinePopoverPopupProps {}\n\n/** A Vue component that renders an `prosekit-inline-popover-popup` custom element. */\nexport const InlinePopoverPopup: DefineSetupFnComponent<InlinePopoverPopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverPopupProps & HTMLAttributes>(\n (props, { slots }) => {\n registerInlinePopoverPopupElement();\n\n return () => {\n return h('prosekit-inline-popover-popup', props, slots.default?.());\n };\n },\n { props: [] },\n);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverPositionerElement, type InlinePopoverPositionerProps as InlinePopoverPositionerElementProps } from '@prosekit/web/inline-popover';\nimport { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';\n\n/** Props for the {@link InlinePopoverPositioner} Vue 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\n/** A Vue component that renders an `prosekit-inline-popover-positioner` custom element. */\nexport const InlinePopoverPositioner: DefineSetupFnComponent<InlinePopoverPositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverPositionerProps & HTMLAttributes>(\n (props, { slots }) => {\n registerInlinePopoverPositionerElement();\n\n const elementRef = shallowRef<HTMLElement | null>(null);\n\n const splittedProps = computed(() => {\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 return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17], restProps] as const;\n });\n\n watchEffect(() => {\n const element = elementRef.value;\n if (!element) return;\n\n const [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17] = splittedProps.value[0];\n\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 return () => {\n const restProps = splittedProps.value[1];\n return h('prosekit-inline-popover-positioner', { ...restProps, ref: elementRef }, slots.default?.());\n };\n },\n { props: ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },\n);\n","// This file is auto-generated by \"@aria-ui/cli\". Do not edit this file directly.\n\nimport { registerInlinePopoverRootElement, type InlinePopoverRootEvents, type InlinePopoverRootProps as InlinePopoverRootElementProps } from '@prosekit/web/inline-popover';\nimport { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';\n\nimport { useEditorContext } from '../../injection/editor-context.ts';\n\n/** Props for the {@link InlinePopoverRoot} Vue 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\n/** A Vue component that renders an `prosekit-inline-popover-root` custom element. */\nexport const InlinePopoverRoot: DefineSetupFnComponent<InlinePopoverRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<InlinePopoverRootProps & HTMLAttributes>(\n (props, { slots }) => {\n registerInlinePopoverRootElement();\n\n const elementRef = shallowRef<HTMLElement | null>(null);\n\n const p4Fallback = useEditorContext();\n\n const splittedProps = computed(() => {\n const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;\n return [[p0, p1, p2, p3, p4, p5, e0], restProps] as const;\n });\n\n const handlers: Array<((event: any) => void) | undefined> = [];\n\n watchEffect(() => {\n const element = elementRef.value;\n if (!element) return;\n\n const [p0, p1, p2, p3, p4, p5, e0] = splittedProps.value[0];\n\n Object.assign(element, { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4 ?? p4Fallback, open: p5 });\n\n handlers.length = 0;\n handlers.push(e0);\n });\n\n watchEffect(() => {\n const element = elementRef.value;\n if (!element) return;\n\n const ac = new AbortController();\n for (const [index, eventName] of ['openChange'].entries()) {\n element.addEventListener(\n eventName,\n (event: Event) => {\n handlers[index]?.(event);\n },\n { signal: ac.signal },\n );\n }\n return () => ac.abort();\n });\n\n return () => {\n const restProps = splittedProps.value[1];\n return h('prosekit-inline-popover-root', { ...restProps, ref: elementRef }, slots.default?.());\n };\n },\n { props: ['anchor', 'defaultOpen', 'disabled', 'dismissOnEscape', 'editor', 'open', 'onOpenChange'] },\n);\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/vue",
3
3
  "type": "module",
4
- "version": "0.7.6",
4
+ "version": "0.8.0-beta.0",
5
5
  "private": false,
6
6
  "description": "Vue components and utilities for ProseKit",
7
7
  "author": {
@@ -75,8 +75,8 @@
75
75
  "@prosemirror-adapter/core": "^0.5.3",
76
76
  "@prosemirror-adapter/vue": "^0.5.3",
77
77
  "@prosekit/core": "^0.12.3",
78
- "@prosekit/pm": "^0.1.18",
79
- "@prosekit/web": "^0.8.6"
78
+ "@prosekit/web": "^0.9.0-beta.0",
79
+ "@prosekit/pm": "^0.1.18"
80
80
  },
81
81
  "peerDependencies": {
82
82
  "vue": ">= 3.0.0"
@@ -94,10 +94,10 @@
94
94
  "vitest": "^4.1.8",
95
95
  "vitest-browser-vue": "^2.1.0",
96
96
  "vue": "^3.5.35",
97
+ "@prosekit/config-ts": "0.0.0",
97
98
  "@prosekit/config-tsdown": "0.0.0",
98
- "@prosekit/testing": "0.0.0",
99
99
  "@prosekit/config-vitest": "0.0.0",
100
- "@prosekit/config-ts": "0.0.0"
100
+ "@prosekit/testing": "0.0.0"
101
101
  },
102
102
  "scripts": {
103
103
  "build:tsc": "tsc -b tsconfig.json",
@@ -28,6 +28,17 @@ export interface InlinePopoverRootProps {
28
28
  * @default true
29
29
  */
30
30
  dismissOnEscape?: InlinePopoverRootElementProps['dismissOnEscape'];
31
+ /**
32
+ * The reference to position the popover against. This can be a DOM element, a
33
+ * Floating UI virtual element, or a function that returns either of them.
34
+ *
35
+ * When set, the popover is anchored to this reference instead of the current
36
+ * text selection, and the text selection no longer drives the open state, so
37
+ * control it with the `open` property.
38
+ *
39
+ * @default null
40
+ */
41
+ anchor?: InlinePopoverRootElementProps['anchor'];
31
42
  /**
32
43
  * Whether the overlay is currently open.
33
44
  * @default null
@@ -49,11 +60,11 @@ export const InlinePopoverRoot: DefineSetupFnComponent<InlinePopoverRootProps &
49
60
 
50
61
  const elementRef = shallowRef<HTMLElement | null>(null);
51
62
 
52
- const p3Fallback = useEditorContext();
63
+ const p4Fallback = useEditorContext();
53
64
 
54
65
  const splittedProps = computed(() => {
55
- const { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3, open: p4, onOpenChange: e0, ...restProps } = props;
56
- return [[p0, p1, p2, p3, p4, e0], restProps] as const;
66
+ const { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4, open: p5, onOpenChange: e0, ...restProps } = props;
67
+ return [[p0, p1, p2, p3, p4, p5, e0], restProps] as const;
57
68
  });
58
69
 
59
70
  const handlers: Array<((event: any) => void) | undefined> = [];
@@ -62,9 +73,9 @@ export const InlinePopoverRoot: DefineSetupFnComponent<InlinePopoverRootProps &
62
73
  const element = elementRef.value;
63
74
  if (!element) return;
64
75
 
65
- const [p0, p1, p2, p3, p4, e0] = splittedProps.value[0];
76
+ const [p0, p1, p2, p3, p4, p5, e0] = splittedProps.value[0];
66
77
 
67
- Object.assign(element, { defaultOpen: p0, disabled: p1, dismissOnEscape: p2, editor: p3 ?? p3Fallback, open: p4 });
78
+ Object.assign(element, { anchor: p0, defaultOpen: p1, disabled: p2, dismissOnEscape: p3, editor: p4 ?? p4Fallback, open: p5 });
68
79
 
69
80
  handlers.length = 0;
70
81
  handlers.push(e0);
@@ -92,5 +103,5 @@ export const InlinePopoverRoot: DefineSetupFnComponent<InlinePopoverRootProps &
92
103
  return h('prosekit-inline-popover-root', { ...restProps, ref: elementRef }, slots.default?.());
93
104
  };
94
105
  },
95
- { props: ['defaultOpen', 'disabled', 'dismissOnEscape', 'editor', 'open', 'onOpenChange'] },
106
+ { props: ['anchor', 'defaultOpen', 'disabled', 'dismissOnEscape', 'editor', 'open', 'onOpenChange'] },
96
107
  );