@prosekit/vue 0.7.0-beta.1 → 0.7.0-beta.2

package/src/components/autocomplete/autocomplete-item.gen.ts

@@ -1,33 +1,87 @@
-import {
-  autocompleteItemProps,
-  autocompleteItemEvents,
-  type AutocompleteItemProps as Props,
-  type AutocompleteItemEvents as Events,
-} from '@prosekit/web/autocomplete'
-import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-import { createComponent } from '../create-component.ts'
-import type { CreateEmits } from '../create-emits.ts'
+import { registerAutocompleteItemElement, type AutocompleteItemEvents, type AutocompleteItemProps as AutocompleteItemElementProps } from '@prosekit/web/autocomplete';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
 /**
- * Props for the {@link AutocompleteItem} component.
+ * Props for the {@link AutocompleteItem} Vue component.
+ *
+ * @public
  */
-export interface AutocompleteItemProps extends Partial<Props> {}
+export interface AutocompleteItemProps {
+  /**
+   * The value of the item, which will be matched against the query.
+   *
+   * If not provided, the value is the item's text content.
+   *
+   * @default ""
+   */
+  value?: AutocompleteItemElementProps['value'];
+  /**
+   * Whether this option is disabled.
+   *
+   * @default false
+   */
+  disabled?: AutocompleteItemElementProps['disabled'];
+  /** Emitted when the the item is selected. */
+  onSelect?: (event: AutocompleteItemEvents['select']) => void;
+}
 
 /**
- * Emits for the {@link AutocompleteItem} component.
+ * A Vue component that renders an `prosekit-autocomplete-item` custom element.
+ *
+ * @public
  */
-export interface AutocompleteItemEmits extends CreateEmits<Events> {}
-
-export const AutocompleteItem: DefineSetupFnComponent<
-  AutocompleteItemProps & HTMLAttributes,
-  AutocompleteItemEmits
-> = createComponent<
-  AutocompleteItemProps,
-  AutocompleteItemEmits
->(
-  'prosekit-autocomplete-item',
-  'AutocompleteItem',
-  Object.keys(autocompleteItemProps),
-  Object.keys(autocompleteItemEvents),
-)
+export const AutocompleteItem: DefineSetupFnComponent<AutocompleteItemProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<AutocompleteItemProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerAutocompleteItemElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { disabled: p0, value: p1, onSelect: e0, ...restProps } = props;
+      return [[p0, p1, e0], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, e0] = splittedProps.value[0];
+
+      Object.assign(element, { disabled: p0, value: p1 });
+
+      handlers.length = 0;
+      handlers.push(e0);
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const ac = new AbortController();
+      for (const [index, eventName] of ['select'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-autocomplete-item', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['disabled', 'value', 'onSelect'] },
+);
+
+export type { AutocompleteItemEvents };

package/src/components/autocomplete/autocomplete-popup.gen.ts

@@ -0,0 +1,80 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerAutocompletePopupElement, type AutocompletePopupEvents } from '@prosekit/web/autocomplete';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+/**
+ * Props for the {@link AutocompletePopup} Vue component.
+ *
+ * @public
+ */
+export interface AutocompletePopupProps {
+  /**
+   * Emitted when the selected value changes. Only available when multiple is
+   * false.
+   */
+  onValueChange?: (event: AutocompletePopupEvents['valueChange']) => void;
+  /**
+   * Emitted when the selected values change. Only available when multiple is
+   * true.
+   */
+  onValuesChange?: (event: AutocompletePopupEvents['valuesChange']) => void;
+}
+
+/**
+ * A Vue component that renders an `prosekit-autocomplete-popup` custom element.
+ *
+ * @public
+ */
+export const AutocompletePopup: DefineSetupFnComponent<AutocompletePopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<AutocompletePopupProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerAutocompletePopupElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { onValueChange: e0, onValuesChange: e1, ...restProps } = props;
+      return [[e0, e1], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [e0, e1] = splittedProps.value[0];
+
+      handlers.length = 0;
+      handlers.push(e0);
+      handlers.push(e1);
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const ac = new AbortController();
+      for (const [index, eventName] of ['valueChange', 'valuesChange'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-autocomplete-popup', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['onValueChange', 'onValuesChange'] },
+);
+
+export type { AutocompletePopupEvents };

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

@@ -0,0 +1,149 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerAutocompletePositionerElement, type AutocompletePositionerProps as AutocompletePositionerElementProps } from '@prosekit/web/autocomplete';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+/**
+ * Props for the {@link AutocompletePositioner} Vue component.
+ *
+ * @public
+ */
+export interface AutocompletePositionerProps {
+  /**
+   * The placement of the popover, relative to the text cursor.
+   *
+   * @default "bottom-start"
+   */
+  placement?: AutocompletePositionerElementProps['placement'];
+  /**
+   * The distance between the popover and the hovered block.
+   *
+   * @default 4
+   */
+  offset?: AutocompletePositionerElementProps['offset'];
+  /** @default true */
+  inline?: AutocompletePositionerElementProps['inline'];
+  /** @default true */
+  hoist?: AutocompletePositionerElementProps['hoist'];
+  /** @default true */
+  fitViewport?: AutocompletePositionerElementProps['fitViewport'];
+  /** @default "The body element" */
+  boundary?: AutocompletePositionerElementProps['boundary'];
+  /** @default 8 */
+  overflowPadding?: AutocompletePositionerElementProps['overflowPadding'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: AutocompletePositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: AutocompletePositionerElementProps['autoUpdate'];
+  /**
+   * Whether to flip the `placement` in order to keep it in view when the
+   * preferred placement(s) will overflow the clipping boundary. You can also
+   * provide an array of placements to try sequentially if the preferred
+   * `placement` does not fit.
+   *
+   * @default true
+   */
+  flip?: AutocompletePositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: AutocompletePositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: AutocompletePositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: AutocompletePositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: AutocompletePositionerElementProps['sameHeight'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: AutocompletePositionerElementProps['hide'];
+  /**
+   * Describes the root boundary that the element will be checked for overflow relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
+   *
+   * @default 'viewport'
+   */
+  rootBoundary?: AutocompletePositionerElementProps['rootBoundary'];
+  /**
+   * The element that will be used to check for overflow. Please see
+   * https://floating-ui.com/docs/detectoverflow#elementcontext for more
+   * information.
+   *
+   * @default 'floating'
+   */
+  elementContext?: AutocompletePositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: AutocompletePositionerElementProps['altBoundary'];
+}
+
+/**
+ * A Vue component that renders an `prosekit-autocomplete-positioner` custom element.
+ *
+ * @public
+ */
+export const AutocompletePositioner: DefineSetupFnComponent<AutocompletePositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<AutocompletePositionerProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerAutocompletePositionerElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      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;
+      return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17], restProps] as const;
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17] = splittedProps.value[0];
+
+      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 });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-autocomplete-positioner', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },
+);

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

@@ -0,0 +1,112 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerAutocompleteRootElement, type AutocompleteRootEvents, type AutocompleteRootProps as AutocompleteRootElementProps } from '@prosekit/web/autocomplete';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+import { useEditorContext } from '../../injection/editor-context.ts';
+
+/**
+ * Props for the {@link AutocompleteRoot} Vue component.
+ *
+ * @public
+ */
+export interface AutocompleteRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: AutocompleteRootElementProps['editor'];
+  /**
+   * The regular expression to match the query text to autocomplete.
+   *
+   * @default null
+   */
+  regex?: AutocompleteRootElementProps['regex'];
+  /**
+   * The filter function to determine if an item should be shown in the
+   * listbox.
+   *
+   * @default defaultItemFilter
+   */
+  filter?: AutocompleteRootElementProps['filter'];
+  /** Fired when the open state changes. */
+  onOpenChange?: (event: AutocompleteRootEvents['openChange']) => void;
+  /** Fired when the query changes. */
+  onQueryChange?: (event: AutocompleteRootEvents['queryChange']) => void;
+  /**
+   * Emitted when the selected value changes. Only available when multiple is
+   * false.
+   */
+  onValueChange?: (event: AutocompleteRootEvents['valueChange']) => void;
+  /**
+   * Emitted when the selected values change. Only available when multiple is
+   * true.
+   */
+  onValuesChange?: (event: AutocompleteRootEvents['valuesChange']) => void;
+}
+
+/**
+ * A Vue component that renders an `prosekit-autocomplete-root` custom element.
+ *
+ * @public
+ */
+export const AutocompleteRoot: DefineSetupFnComponent<AutocompleteRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<AutocompleteRootProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerAutocompleteRootElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const p0Fallback = useEditorContext();
+
+    const splittedProps = computed(() => {
+      const { editor: p0, filter: p1, regex: p2, onOpenChange: e0, onQueryChange: e1, onValueChange: e2, onValuesChange: e3, ...restProps } = props;
+      return [[p0, p1, p2, e0, e1, e2, e3], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2, e0, e1, e2, e3] = splittedProps.value[0];
+
+      Object.assign(element, { editor: p0 ?? p0Fallback, filter: p1, regex: p2 });
+
+      handlers.length = 0;
+      handlers.push(e0);
+      handlers.push(e1);
+      handlers.push(e2);
+      handlers.push(e3);
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const ac = new AbortController();
+      for (const [index, eventName] of ['openChange', 'queryChange', 'valueChange', 'valuesChange'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-autocomplete-root', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['editor', 'filter', 'regex', 'onOpenChange', 'onQueryChange', 'onValueChange', 'onValuesChange'] },
+);
+
+export type { AutocompleteRootEvents };

package/src/components/autocomplete/index.gen.ts

@@ -1,7 +1,15 @@
-export { AutocompleteEmpty, type AutocompleteEmptyProps, type AutocompleteEmptyEmits } from './autocomplete-empty.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { AutocompleteItem, type AutocompleteItemProps, type AutocompleteItemEmits } from './autocomplete-item.gen.ts'
+export { AutocompleteEmpty, type AutocompleteEmptyProps } from './autocomplete-empty.gen.ts';
 
-export { AutocompleteList, type AutocompleteListProps, type AutocompleteListEmits } from './autocomplete-list.gen.ts'
+export { AutocompleteItem, type AutocompleteItemProps, type AutocompleteItemEvents } from './autocomplete-item.gen.ts';
 
-export { AutocompletePopover, type AutocompletePopoverProps, type AutocompletePopoverEmits } from './autocomplete-popover.gen.ts'
+export { AutocompletePopup, type AutocompletePopupProps, type AutocompletePopupEvents } from './autocomplete-popup.gen.ts';
+
+export { AutocompletePositioner, type AutocompletePositionerProps } from './autocomplete-positioner.gen.ts';
+
+export { AutocompleteRoot, type AutocompleteRootProps, type AutocompleteRootEvents } from './autocomplete-root.gen.ts';
+
+export { OpenChangeEvent, QueryChangeEvent, SelectEvent, ValueChangeEvent, ValuesChangeEvent } from '@prosekit/web/autocomplete';

package/src/components/autocomplete/index.ts

@@ -0,0 +1,27 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompletePopup,
+  AutocompletePositioner,
+  AutocompleteRoot,
+} from 'prosekit/vue/autocomplete'
+
+<AutocompleteRoot>
+  <AutocompletePositioner>
+    <AutocompletePopup>
+      <AutocompleteItem>...</AutocompleteItem>
+      <AutocompleteEmpty>...</AutocompleteEmpty>
+    </AutocompletePopup>
+  </AutocompletePositioner>
+</AutocompleteRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/block-handle/block-handle-add.gen.ts

@@ -1,33 +1,58 @@
-import {
-  blockHandleAddProps,
-  blockHandleAddEvents,
-  type BlockHandleAddProps as Props,
-  type BlockHandleAddEvents as Events,
-} from '@prosekit/web/block-handle'
-import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerBlockHandleAddElement, type BlockHandleAddProps as BlockHandleAddElementProps } from '@prosekit/web/block-handle';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
-import { createComponent } from '../create-component.ts'
-import type { CreateEmits } from '../create-emits.ts'
+import { useEditorContext } from '../../injection/editor-context.ts';
 
 /**
- * Props for the {@link BlockHandleAdd} component.
+ * Props for the {@link BlockHandleAdd} Vue component.
+ *
+ * @public
  */
-export interface BlockHandleAddProps extends Partial<Props> {}
+export interface BlockHandleAddProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: BlockHandleAddElementProps['editor'];
+}
 
 /**
- * Emits for the {@link BlockHandleAdd} component.
+ * A Vue component that renders an `prosekit-block-handle-add` custom element.
+ *
+ * @public
  */
-export interface BlockHandleAddEmits extends CreateEmits<Events> {}
-
-export const BlockHandleAdd: DefineSetupFnComponent<
-  BlockHandleAddProps & HTMLAttributes,
-  BlockHandleAddEmits
-> = createComponent<
-  BlockHandleAddProps,
-  BlockHandleAddEmits
->(
-  'prosekit-block-handle-add',
-  'BlockHandleAdd',
-  Object.keys(blockHandleAddProps),
-  Object.keys(blockHandleAddEvents),
-)
+export const BlockHandleAdd: DefineSetupFnComponent<BlockHandleAddProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<BlockHandleAddProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerBlockHandleAddElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const p0Fallback = useEditorContext();
+
+    const splittedProps = computed(() => {
+      const { editor: p0, ...restProps } = props;
+      return [[p0], restProps] as const;
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0] = splittedProps.value[0];
+
+      Object.assign(element, { editor: p0 ?? p0Fallback });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-block-handle-add', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['editor'] },
+);

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

@@ -1,33 +1,58 @@
-import {
-  blockHandleDraggableProps,
-  blockHandleDraggableEvents,
-  type BlockHandleDraggableProps as Props,
-  type BlockHandleDraggableEvents as Events,
-} from '@prosekit/web/block-handle'
-import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerBlockHandleDraggableElement, type BlockHandleDraggableProps as BlockHandleDraggableElementProps } from '@prosekit/web/block-handle';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
-import { createComponent } from '../create-component.ts'
-import type { CreateEmits } from '../create-emits.ts'
+import { useEditorContext } from '../../injection/editor-context.ts';
 
 /**
- * Props for the {@link BlockHandleDraggable} component.
+ * Props for the {@link BlockHandleDraggable} Vue component.
+ *
+ * @public
  */
-export interface BlockHandleDraggableProps extends Partial<Props> {}
+export interface BlockHandleDraggableProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: BlockHandleDraggableElementProps['editor'];
+}
 
 /**
- * Emits for the {@link BlockHandleDraggable} component.
+ * A Vue component that renders an `prosekit-block-handle-draggable` custom element.
+ *
+ * @public
  */
-export interface BlockHandleDraggableEmits extends CreateEmits<Events> {}
-
-export const BlockHandleDraggable: DefineSetupFnComponent<
-  BlockHandleDraggableProps & HTMLAttributes,
-  BlockHandleDraggableEmits
-> = createComponent<
-  BlockHandleDraggableProps,
-  BlockHandleDraggableEmits
->(
-  'prosekit-block-handle-draggable',
-  'BlockHandleDraggable',
-  Object.keys(blockHandleDraggableProps),
-  Object.keys(blockHandleDraggableEvents),
-)
+export const BlockHandleDraggable: DefineSetupFnComponent<BlockHandleDraggableProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<BlockHandleDraggableProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerBlockHandleDraggableElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const p0Fallback = useEditorContext();
+
+    const splittedProps = computed(() => {
+      const { editor: p0, ...restProps } = props;
+      return [[p0], restProps] as const;
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0] = splittedProps.value[0];
+
+      Object.assign(element, { editor: p0 ?? p0Fallback });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-block-handle-draggable', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['editor'] },
+);