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

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

@@ -1,33 +1,94 @@
-import {
-  resizableRootProps,
-  resizableRootEvents,
-  type ResizableRootProps as Props,
-  type ResizableRootEvents as Events,
-} from '@prosekit/web/resizable'
-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 { registerResizableRootElement, type ResizableRootEvents, type ResizableRootProps as ResizableRootElementProps } from '@prosekit/web/resizable';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
 
 /**
- * Props for the {@link ResizableRoot} component.
+ * Props for the {@link ResizableRoot} Vue component.
+ *
+ * @public
  */
-export interface ResizableRootProps extends Partial<Props> {}
+export interface ResizableRootProps {
+  /**
+   * The width of the resizable element.
+   *
+   * @default null
+   */
+  width?: ResizableRootElementProps['width'];
+  /**
+   * The height of the resizable element.
+   *
+   * @default null
+   */
+  height?: ResizableRootElementProps['height'];
+  /**
+   * The aspect ratio of the resizable element.
+   *
+   * @default null
+   */
+  aspectRatio?: ResizableRootElementProps['aspectRatio'];
+  /** Emitted when a resize operation starts. */
+  onResizeStart?: (event: ResizableRootEvents['resizeStart']) => void;
+  /** Emitted when a resize operation ends. */
+  onResizeEnd?: (event: ResizableRootEvents['resizeEnd']) => void;
+}
 
 /**
- * Emits for the {@link ResizableRoot} component.
+ * A Vue component that renders an `prosekit-resizable-root` custom element.
+ *
+ * @public
  */
-export interface ResizableRootEmits extends CreateEmits<Events> {}
-
-export const ResizableRoot: DefineSetupFnComponent<
-  ResizableRootProps & HTMLAttributes,
-  ResizableRootEmits
-> = createComponent<
-  ResizableRootProps,
-  ResizableRootEmits
->(
-  'prosekit-resizable-root',
-  'ResizableRoot',
-  Object.keys(resizableRootProps),
-  Object.keys(resizableRootEvents),
-)
+export const ResizableRoot: DefineSetupFnComponent<ResizableRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<ResizableRootProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerResizableRootElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { aspectRatio: p0, height: p1, width: p2, onResizeEnd: e0, onResizeStart: e1, ...restProps } = props;
+      return [[p0, p1, p2, e0, e1], restProps] as const;
+    });
+
+    const handlers: Array<((event: any) => void) | undefined> = [];
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2, e0, e1] = splittedProps.value[0];
+
+      Object.assign(element, { aspectRatio: p0, height: p1, width: p2 });
+
+      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 ['resizeEnd', 'resizeStart'].entries()) {
+        element.addEventListener(
+          eventName,
+          (event: Event) => {
+            handlers[index]?.(event);
+          },
+          { signal: ac.signal },
+        );
+      }
+      return () => ac.abort();
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-resizable-root', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['aspectRatio', 'height', 'width', 'onResizeEnd', 'onResizeStart'] },
+);
+
+export type { ResizableRootEvents };

package/src/components/table-handle/index.gen.ts

@@ -1,17 +1,25 @@
-export { TableHandleColumnRoot, type TableHandleColumnRootProps, type TableHandleColumnRootEmits } from './table-handle-column-root.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { TableHandleColumnTrigger, type TableHandleColumnTriggerProps, type TableHandleColumnTriggerEmits } from './table-handle-column-trigger.gen.ts'
+export { TableHandleColumnPopup, type TableHandleColumnPopupProps } from './table-handle-column-popup.gen.ts';
 
-export { TableHandleDragPreview, type TableHandleDragPreviewProps, type TableHandleDragPreviewEmits } from './table-handle-drag-preview.gen.ts'
+export { TableHandleColumnPositioner, type TableHandleColumnPositionerProps } from './table-handle-column-positioner.gen.ts';
 
-export { TableHandleDropIndicator, type TableHandleDropIndicatorProps, type TableHandleDropIndicatorEmits } from './table-handle-drop-indicator.gen.ts'
+export { TableHandleColumnMenuRoot, type TableHandleColumnMenuRootProps } from './table-handle-column-menu-root.gen.ts';
 
-export { TableHandlePopoverContent, type TableHandlePopoverContentProps, type TableHandlePopoverContentEmits } from './table-handle-popover-content.gen.ts'
+export { TableHandleColumnMenuTrigger, type TableHandleColumnMenuTriggerProps } from './table-handle-column-menu-trigger.gen.ts';
 
-export { TableHandlePopoverItem, type TableHandlePopoverItemProps, type TableHandlePopoverItemEmits } from './table-handle-popover-item.gen.ts'
+export { TableHandleDragPreview, type TableHandleDragPreviewProps } from './table-handle-drag-preview.gen.ts';
 
-export { TableHandleRoot, type TableHandleRootProps, type TableHandleRootEmits } from './table-handle-root.gen.ts'
+export { TableHandleDropIndicator, type TableHandleDropIndicatorProps } from './table-handle-drop-indicator.gen.ts';
 
-export { TableHandleRowRoot, type TableHandleRowRootProps, type TableHandleRowRootEmits } from './table-handle-row-root.gen.ts'
+export { TableHandleRoot, type TableHandleRootProps } from './table-handle-root.gen.ts';
 
-export { TableHandleRowTrigger, type TableHandleRowTriggerProps, type TableHandleRowTriggerEmits } from './table-handle-row-trigger.gen.ts'
+export { TableHandleRowPopup, type TableHandleRowPopupProps } from './table-handle-row-popup.gen.ts';
+
+export { TableHandleRowPositioner, type TableHandleRowPositionerProps } from './table-handle-row-positioner.gen.ts';
+
+export { TableHandleRowMenuRoot, type TableHandleRowMenuRootProps } from './table-handle-row-menu-root.gen.ts';
+
+export { TableHandleRowMenuTrigger, type TableHandleRowMenuTriggerProps } from './table-handle-row-menu-trigger.gen.ts';

package/src/components/table-handle/index.ts

@@ -0,0 +1,58 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  TableHandleColumnMenuRoot,
+  TableHandleColumnMenuTrigger,
+  TableHandleColumnPopup,
+  TableHandleColumnPositioner,
+  TableHandleDragPreview,
+  TableHandleDropIndicator,
+  TableHandleRoot,
+  TableHandleRowMenuRoot,
+  TableHandleRowMenuTrigger,
+  TableHandleRowPopup,
+  TableHandleRowPositioner,
+} from 'prosekit/vue/table-handle'
+import {
+  MenuItem,
+  MenuPopup,
+  MenuPositioner,
+} from 'prosekit/vue/menu'
+
+<TableHandleRoot>
+  <TableHandleDragPreview />
+  <TableHandleDropIndicator />
+  <TableHandleColumnPositioner>
+    <TableHandleColumnPopup>
+      <TableHandleColumnMenuRoot>
+        <TableHandleColumnMenuTrigger>...</TableHandleColumnMenuTrigger>
+        <MenuPositioner>
+          <MenuPopup>
+            <MenuItem>...</MenuItem>
+          </MenuPopup>
+        </MenuPositioner>
+      </TableHandleColumnMenuRoot>
+    </TableHandleColumnPopup>
+  </TableHandleColumnPositioner>
+  <TableHandleRowPositioner>
+    <TableHandleRowPopup>
+      <TableHandleRowMenuRoot>
+        <TableHandleRowMenuTrigger>...</TableHandleRowMenuTrigger>
+        <MenuPositioner>
+          <MenuPopup>
+            <MenuItem>...</MenuItem>
+          </MenuPopup>
+        </MenuPositioner>
+      </TableHandleRowMenuRoot>
+    </TableHandleRowPopup>
+  </TableHandleRowPositioner>
+</TableHandleRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/table-handle/table-handle-column-menu-root.gen.ts

@@ -0,0 +1,62 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnMenuRootElement, type TableHandleColumnMenuRootProps as TableHandleColumnMenuRootElementProps } from '@prosekit/web/table-handle';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+/**
+ * Props for the {@link TableHandleColumnMenuRoot} Vue component.
+ *
+ * @public
+ */
+export interface TableHandleColumnMenuRootProps {
+  /**
+   * Whether the overlay is initially open.
+   * @default false
+   */
+  defaultOpen?: TableHandleColumnMenuRootElementProps['defaultOpen'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: TableHandleColumnMenuRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: TableHandleColumnMenuRootElementProps['disabled'];
+}
+
+/**
+ * A Vue component that renders an `prosekit-table-handle-column-menu-root` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnMenuRoot: DefineSetupFnComponent<TableHandleColumnMenuRootProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<TableHandleColumnMenuRootProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerTableHandleColumnMenuRootElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const splittedProps = computed(() => {
+      const { defaultOpen: p0, disabled: p1, open: p2, ...restProps } = props;
+      return [[p0, p1, p2], restProps] as const;
+    });
+
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+
+      const [p0, p1, p2] = splittedProps.value[0];
+
+      Object.assign(element, { defaultOpen: p0, disabled: p1, open: p2 });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-table-handle-column-menu-root', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['defaultOpen', 'disabled', 'open'] },
+);

package/src/components/table-handle/table-handle-column-menu-trigger.gen.ts

@@ -0,0 +1,56 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnMenuTriggerElement, type TableHandleColumnMenuTriggerProps as TableHandleColumnMenuTriggerElementProps } from '@prosekit/web/table-handle';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+import { useEditorContext } from '../../injection/editor-context.ts';
+
+/**
+ * Props for the {@link TableHandleColumnMenuTrigger} Vue component.
+ *
+ * @public
+ */
+export interface TableHandleColumnMenuTriggerProps {
+  /**
+   * @default null
+   * @hidden
+   */
+  editor?: TableHandleColumnMenuTriggerElementProps['editor'];
+}
+
+/**
+ * A Vue component that renders an `prosekit-table-handle-column-menu-trigger` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnMenuTrigger: DefineSetupFnComponent<TableHandleColumnMenuTriggerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<TableHandleColumnMenuTriggerProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerTableHandleColumnMenuTriggerElement();
+
+    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-table-handle-column-menu-trigger', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['editor'] },
+);

package/src/components/table-handle/table-handle-column-popup.gen.ts

@@ -0,0 +1,29 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnPopupElement } from '@prosekit/web/table-handle';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes } from 'vue';
+
+/**
+ * Props for the {@link TableHandleColumnPopup} Vue component.
+ *
+ * @public
+ */
+export interface TableHandleColumnPopupProps {}
+
+/**
+ * A Vue component that renders an `prosekit-table-handle-column-popup` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnPopup: DefineSetupFnComponent<TableHandleColumnPopupProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<TableHandleColumnPopupProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerTableHandleColumnPopupElement();
+
+    return () => {
+      return h('prosekit-table-handle-column-popup', props, slots.default?.());
+    };
+  },
+  { props: [] },
+);

package/src/components/table-handle/table-handle-column-positioner.gen.ts

@@ -0,0 +1,197 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerTableHandleColumnPositionerElement, type TableHandleColumnPositionerProps as TableHandleColumnPositionerElementProps } from '@prosekit/web/table-handle';
+import { defineComponent, h, type DefineSetupFnComponent, type HTMLAttributes, shallowRef, computed, watchEffect } from 'vue';
+
+import { useEditorContext } from '../../injection/editor-context.ts';
+
+/**
+ * Props for the {@link TableHandleColumnPositioner} Vue component.
+ *
+ * @public
+ */
+export interface TableHandleColumnPositionerProps {
+  /**
+   * The placement of the popover, relative to the hovered table cell.
+   *
+   * @default "top"
+   */
+  placement?: TableHandleColumnPositionerElementProps['placement'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: TableHandleColumnPositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: TableHandleColumnPositionerElementProps['autoUpdate'];
+  /**
+   * 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
+   */
+  hoist?: TableHandleColumnPositionerElementProps['hoist'];
+  /**
+   * @default 0
+   * @hidden
+   */
+  offset?: TableHandleColumnPositionerElementProps['offset'];
+  /**
+   * @default false
+   * @hidden
+   */
+  flip?: TableHandleColumnPositionerElementProps['flip'];
+  /**
+   * @default false
+   * @hidden
+   */
+  shift?: TableHandleColumnPositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: TableHandleColumnPositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: TableHandleColumnPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: TableHandleColumnPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: TableHandleColumnPositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: TableHandleColumnPositionerElementProps['inline'];
+  /**
+   * @default true
+   * @hidden
+   */
+  hide?: TableHandleColumnPositionerElementProps['hide'];
+  /**
+   * Describes the clipping element(s) or area that overflow will be checked relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
+   *
+   * @default 'clippingAncestors'
+   */
+  boundary?: TableHandleColumnPositionerElementProps['boundary'];
+  /**
+   * 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?: TableHandleColumnPositionerElementProps['rootBoundary'];
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   * Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
+   *
+   * @default 4
+   */
+  overflowPadding?: TableHandleColumnPositionerElementProps['overflowPadding'];
+  /**
+   * 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?: TableHandleColumnPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: TableHandleColumnPositionerElementProps['altBoundary'];
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: TableHandleColumnPositionerElementProps['editor'];
+}
+
+/**
+ * A Vue component that renders an `prosekit-table-handle-column-positioner` custom element.
+ *
+ * @public
+ */
+export const TableHandleColumnPositioner: DefineSetupFnComponent<TableHandleColumnPositionerProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<TableHandleColumnPositionerProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerTableHandleColumnPositionerElement();
+
+    const elementRef = shallowRef<HTMLElement | null>(null);
+
+    const p3Fallback = useEditorContext();
+
+    const splittedProps = computed(() => {
+      const { altBoundary: p0, autoUpdate: p1, boundary: p2, editor: p3, elementContext: p4, fitViewport: p5, flip: p6, hide: p7, hoist: p8, inline: p9, offset: p10, overflowPadding: p11, overlap: p12, placement: p13, rootBoundary: p14, sameHeight: p15, sameWidth: p16, shift: p17, strategy: p18, ...restProps } = props;
+      return [[p0, p1, p2, p3, p4, p5, p6, p7, p8, p9, p10, p11, p12, p13, p14, p15, p16, p17, p18], 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, p18] = splittedProps.value[0];
+
+      Object.assign(element, {
+        altBoundary: p0,
+        autoUpdate: p1,
+        boundary: p2,
+        editor: p3 ?? p3Fallback,
+        elementContext: p4,
+        fitViewport: p5,
+        flip: p6,
+        hide: p7,
+        hoist: p8,
+        inline: p9,
+        offset: p10,
+        overflowPadding: p11,
+        overlap: p12,
+        placement: p13,
+        rootBoundary: p14,
+        sameHeight: p15,
+        sameWidth: p16,
+        shift: p17,
+        strategy: p18,
+      });
+    });
+
+    return () => {
+      const restProps = splittedProps.value[1];
+      return h('prosekit-table-handle-column-positioner', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['altBoundary', 'autoUpdate', 'boundary', 'editor', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy'] },
+);

package/src/components/table-handle/table-handle-drag-preview.gen.ts

@@ -1,33 +1,56 @@
-import {
-  tableHandleDragPreviewProps,
-  tableHandleDragPreviewEvents,
-  type TableHandleDragPreviewProps as Props,
-  type TableHandleDragPreviewEvents as Events,
-} from '@prosekit/web/table-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 { registerTableHandleDragPreviewElement, type TableHandleDragPreviewProps as TableHandleDragPreviewElementProps } from '@prosekit/web/table-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 TableHandleDragPreview} component.
+ * Props for the {@link TableHandleDragPreview} Vue component.
+ *
+ * @public
  */
-export interface TableHandleDragPreviewProps extends Partial<Props> {}
+export interface TableHandleDragPreviewProps {
+  /**
+   * @default null
+   * @hidden
+   */
+  editor?: TableHandleDragPreviewElementProps['editor'];
+}
 
 /**
- * Emits for the {@link TableHandleDragPreview} component.
+ * A Vue component that renders an `prosekit-table-handle-drag-preview` custom element.
+ *
+ * @public
  */
-export interface TableHandleDragPreviewEmits extends CreateEmits<Events> {}
-
-export const TableHandleDragPreview: DefineSetupFnComponent<
-  TableHandleDragPreviewProps & HTMLAttributes,
-  TableHandleDragPreviewEmits
-> = createComponent<
-  TableHandleDragPreviewProps,
-  TableHandleDragPreviewEmits
->(
-  'prosekit-table-handle-drag-preview',
-  'TableHandleDragPreview',
-  Object.keys(tableHandleDragPreviewProps),
-  Object.keys(tableHandleDragPreviewEvents),
-)
+export const TableHandleDragPreview: DefineSetupFnComponent<TableHandleDragPreviewProps & HTMLAttributes> = /* @__PURE__ */ defineComponent<TableHandleDragPreviewProps & HTMLAttributes>(
+  (props, { slots }) => {
+    registerTableHandleDragPreviewElement();
+
+    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-table-handle-drag-preview', { ...restProps, ref: elementRef }, slots.default?.());
+    };
+  },
+  { props: ['editor'] },
+);