@prosekit/react 0.7.0-beta.0 → 0.7.0-beta.1

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

@@ -1,34 +1,60 @@
-import {
-  type BlockHandleDraggableElement,
-  type BlockHandleDraggableProps as Props,
-  type BlockHandleDraggableEvents as Events,
-  blockHandleDraggableProps,
-  blockHandleDraggableEvents,
-} from '@prosekit/web/block-handle'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'react'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerBlockHandleDraggableElement, type BlockHandleDraggableElement, type BlockHandleDraggableProps as BlockHandleDraggableElementProps } from '@prosekit/web/block-handle';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+import { useEditorContext } from '../../contexts/editor-context.ts';
+
+/**
+ * Props for the {@link BlockHandleDraggable} React component.
+ *
+ * @public
+ */
+export interface BlockHandleDraggableProps extends HTMLAttributes<BlockHandleDraggableElement> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: BlockHandleDraggableElementProps['editor'];
+}
+
+function BlockHandleDraggableComponent(props: BlockHandleDraggableProps, forwardedRef: ForwardedRef<BlockHandleDraggableElement>) {
+  registerBlockHandleDraggableElement();
+
+  const elementRef = useRef<BlockHandleDraggableElement>(null);
+
+  const p0Fallback = useEditorContext();
+
+  const { editor: p0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { editor: p0 ?? p0Fallback });
+  });
+
+  const mergedRef = useCallback(
+    (element: BlockHandleDraggableElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-block-handle-draggable', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
 
 /**
- * Props for the {@link BlockHandleDraggable} component.
+ * A React component that renders an `prosekit-block-handle-draggable` custom element.
+ *
+ * @public
  */
-export interface BlockHandleDraggableProps extends Partial<CreateProps<Props, Events>> {}
-
-export const BlockHandleDraggable: ForwardRefExoticComponent<
-  BlockHandleDraggableProps &
-  RefAttributes<BlockHandleDraggableElement> &
-  HTMLAttributes<BlockHandleDraggableElement>
-> = createComponent<
-  BlockHandleDraggableProps,
-  BlockHandleDraggableElement
->(
-  'prosekit-block-handle-draggable',
-  'BlockHandleDraggable',
-  Object.keys(blockHandleDraggableProps),
-  Object.keys(blockHandleDraggableEvents),
-)
+export const BlockHandleDraggable: ForwardRefExoticComponent<BlockHandleDraggableProps & RefAttributes<BlockHandleDraggableElement>> = /* @__PURE__ */ forwardRef(BlockHandleDraggableComponent);

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

@@ -0,0 +1,42 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerBlockHandlePopupElement, type BlockHandlePopupElement } from '@prosekit/web/block-handle';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+
+/**
+ * Props for the {@link BlockHandlePopup} React component.
+ *
+ * @public
+ */
+export interface BlockHandlePopupProps extends HTMLAttributes<BlockHandlePopupElement> {}
+
+function BlockHandlePopupComponent(props: BlockHandlePopupProps, forwardedRef: ForwardedRef<BlockHandlePopupElement>) {
+  registerBlockHandlePopupElement();
+
+  const elementRef = useRef<BlockHandlePopupElement>(null);
+
+  const { ...restProps } = props;
+
+  const mergedRef = useCallback(
+    (element: BlockHandlePopupElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-block-handle-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-block-handle-popup` custom element.
+ *
+ * @public
+ */
+export const BlockHandlePopup: ForwardRefExoticComponent<BlockHandlePopupProps & RefAttributes<BlockHandlePopupElement>> = /* @__PURE__ */ forwardRef(BlockHandlePopupComponent);

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

@@ -0,0 +1,169 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerBlockHandlePositionerElement, type BlockHandlePositionerElement, type BlockHandlePositionerProps as BlockHandlePositionerElementProps } from '@prosekit/web/block-handle';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link BlockHandlePositioner} React component.
+ *
+ * @public
+ */
+export interface BlockHandlePositionerProps extends HTMLAttributes<BlockHandlePositionerElement> {
+  /**
+   * The placement of the popover, relative to the hovered block.
+   *
+   * @default "left"
+   */
+  placement?: BlockHandlePositionerElementProps['placement'];
+  /**
+   * 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?: BlockHandlePositionerElementProps['hoist'];
+  /**
+   * @default false
+   * @hidden
+   */
+  flip?: BlockHandlePositionerElementProps['flip'];
+  /**
+   * @default false
+   * @hidden
+   */
+  shift?: BlockHandlePositionerElementProps['shift'];
+  /**
+   * @default true
+   * @hidden
+   */
+  hide?: BlockHandlePositionerElementProps['hide'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: BlockHandlePositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: BlockHandlePositionerElementProps['autoUpdate'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 6
+   */
+  offset?: BlockHandlePositionerElementProps['offset'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: BlockHandlePositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: BlockHandlePositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: BlockHandlePositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: BlockHandlePositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: BlockHandlePositionerElementProps['inline'];
+  /**
+   * 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?: BlockHandlePositionerElementProps['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?: BlockHandlePositionerElementProps['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?: BlockHandlePositionerElementProps['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?: BlockHandlePositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: BlockHandlePositionerElementProps['altBoundary'];
+}
+
+function BlockHandlePositionerComponent(props: BlockHandlePositionerProps, forwardedRef: ForwardedRef<BlockHandlePositionerElement>) {
+  registerBlockHandlePositionerElement();
+
+  const elementRef = useRef<BlockHandlePositionerElement>(null);
+
+  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;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    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 });
+  });
+
+  const mergedRef = useCallback(
+    (element: BlockHandlePositionerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-block-handle-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-block-handle-positioner` custom element.
+ *
+ * @public
+ */
+export const BlockHandlePositioner: ForwardRefExoticComponent<BlockHandlePositionerProps & RefAttributes<BlockHandlePositionerElement>> = /* @__PURE__ */ forwardRef(BlockHandlePositionerComponent);

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

@@ -0,0 +1,82 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerBlockHandleRootElement, type BlockHandleRootElement, type BlockHandleRootProps as BlockHandleRootElementProps, type BlockHandleRootEvents } from '@prosekit/web/block-handle';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+import { useEditorContext } from '../../contexts/editor-context.ts';
+
+/**
+ * Props for the {@link BlockHandleRoot} React component.
+ *
+ * @public
+ */
+export interface BlockHandleRootProps extends HTMLAttributes<BlockHandleRootElement> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: BlockHandleRootElementProps['editor'];
+  /** Fired when the hovered block changes. */
+  onStateChange?: (event: BlockHandleRootEvents['stateChange']) => void;
+}
+
+function BlockHandleRootComponent(props: BlockHandleRootProps, forwardedRef: ForwardedRef<BlockHandleRootElement>) {
+  registerBlockHandleRootElement();
+
+  const elementRef = useRef<BlockHandleRootElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const p0Fallback = useEditorContext();
+
+  const { editor: p0, onStateChange: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { editor: p0 ?? p0Fallback });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['stateChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: BlockHandleRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-block-handle-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-block-handle-root` custom element.
+ *
+ * @public
+ */
+export const BlockHandleRoot: ForwardRefExoticComponent<BlockHandleRootProps & RefAttributes<BlockHandleRootElement>> = /* @__PURE__ */ forwardRef(BlockHandleRootComponent);
+
+export type { BlockHandleRootEvents };

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

@@ -1,5 +1,15 @@
-export { BlockHandleAdd, type BlockHandleAddProps } from './block-handle-add.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { BlockHandleDraggable, type BlockHandleDraggableProps } from './block-handle-draggable.gen.ts'
+export { BlockHandleAdd, type BlockHandleAddProps } from './block-handle-add.gen.ts';
 
-export { BlockHandlePopover, type BlockHandlePopoverProps } from './block-handle-popover.gen.ts'
+export { BlockHandleDraggable, type BlockHandleDraggableProps } from './block-handle-draggable.gen.ts';
+
+export { BlockHandlePopup, type BlockHandlePopupProps } from './block-handle-popup.gen.ts';
+
+export { BlockHandlePositioner, type BlockHandlePositionerProps } from './block-handle-positioner.gen.ts';
+
+export { BlockHandleRoot, type BlockHandleRootProps, type BlockHandleRootEvents } from './block-handle-root.gen.ts';
+
+export { BlockHandleStateChangeEvent } from '@prosekit/web/block-handle';

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

@@ -0,0 +1,27 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  BlockHandleAdd,
+  BlockHandleDraggable,
+  BlockHandlePopup,
+  BlockHandlePositioner,
+  BlockHandleRoot,
+} from 'prosekit/react/block-handle'
+
+<BlockHandleRoot>
+  <BlockHandlePositioner>
+    <BlockHandlePopup>
+      <BlockHandleAdd>...</BlockHandleAdd>
+      <BlockHandleDraggable>...</BlockHandleDraggable>
+    </BlockHandlePopup>
+  </BlockHandlePositioner>
+</BlockHandleRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/drop-indicator/drop-indicator.gen.ts

@@ -1,34 +1,66 @@
-import {
-  type DropIndicatorElement,
-  type DropIndicatorProps as Props,
-  type DropIndicatorEvents as Events,
-  dropIndicatorProps,
-  dropIndicatorEvents,
-} from '@prosekit/web/drop-indicator'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'react'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerDropIndicatorElement, type DropIndicatorElement, type DropIndicatorProps as DropIndicatorElementProps } from '@prosekit/web/drop-indicator';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+import { useEditorContext } from '../../contexts/editor-context.ts';
+
+/**
+ * Props for the {@link DropIndicator} React component.
+ *
+ * @public
+ */
+export interface DropIndicatorProps extends HTMLAttributes<DropIndicatorElement> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor?: DropIndicatorElementProps['editor'];
+  /**
+   * The line width in pixels.
+   *
+   * @default 2
+   */
+  width?: DropIndicatorElementProps['width'];
+}
+
+function DropIndicatorComponent(props: DropIndicatorProps, forwardedRef: ForwardedRef<DropIndicatorElement>) {
+  registerDropIndicatorElement();
+
+  const elementRef = useRef<DropIndicatorElement>(null);
+
+  const p0Fallback = useEditorContext();
+
+  const { editor: p0, width: p1, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { editor: p0 ?? p0Fallback, width: p1 });
+  });
+
+  const mergedRef = useCallback(
+    (element: DropIndicatorElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-drop-indicator', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
 
 /**
- * Props for the {@link DropIndicator} component.
+ * A React component that renders an `prosekit-drop-indicator` custom element.
+ *
+ * @public
  */
-export interface DropIndicatorProps extends Partial<CreateProps<Props, Events>> {}
-
-export const DropIndicator: ForwardRefExoticComponent<
-  DropIndicatorProps &
-  RefAttributes<DropIndicatorElement> &
-  HTMLAttributes<DropIndicatorElement>
-> = createComponent<
-  DropIndicatorProps,
-  DropIndicatorElement
->(
-  'prosekit-drop-indicator',
-  'DropIndicator',
-  Object.keys(dropIndicatorProps),
-  Object.keys(dropIndicatorEvents),
-)
+export const DropIndicator: ForwardRefExoticComponent<DropIndicatorProps & RefAttributes<DropIndicatorElement>> = /* @__PURE__ */ forwardRef(DropIndicatorComponent);

package/src/components/drop-indicator/index.gen.ts

@@ -1 +1,5 @@
-export { DropIndicator, type DropIndicatorProps } from './drop-indicator.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+export { DropIndicator, type DropIndicatorProps } from './drop-indicator.gen.ts';

package/src/components/drop-indicator/index.ts

@@ -0,0 +1,14 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import { DropIndicator } from 'prosekit/react/drop-indicator'
+
+<DropIndicator />
+```
+*/
+
+export * from './index.gen.ts'

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

@@ -1 +1,11 @@
-export { InlinePopover, type InlinePopoverProps } from './inline-popover.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+export { InlinePopoverPopup, type InlinePopoverPopupProps } from './inline-popover-popup.gen.ts';
+
+export { InlinePopoverPositioner, type InlinePopoverPositionerProps } from './inline-popover-positioner.gen.ts';
+
+export { InlinePopoverRoot, type InlinePopoverRootProps, type InlinePopoverRootEvents } from './inline-popover-root.gen.ts';
+
+export { OpenChangeEvent } from '@prosekit/web/inline-popover';

package/src/components/inline-popover/index.ts

@@ -0,0 +1,22 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  InlinePopoverPopup,
+  InlinePopoverPositioner,
+  InlinePopoverRoot,
+} from 'prosekit/react/inline-popover'
+
+<InlinePopoverRoot>
+  <InlinePopoverPositioner>
+    <InlinePopoverPopup>...</InlinePopoverPopup>
+  </InlinePopoverPositioner>
+</InlinePopoverRoot>
+```
+*/
+
+export * from './index.gen.ts'

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

@@ -0,0 +1,42 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerInlinePopoverPopupElement, type InlinePopoverPopupElement } from '@prosekit/web/inline-popover';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+
+/**
+ * Props for the {@link InlinePopoverPopup} React component.
+ *
+ * @public
+ */
+export interface InlinePopoverPopupProps extends HTMLAttributes<InlinePopoverPopupElement> {}
+
+function InlinePopoverPopupComponent(props: InlinePopoverPopupProps, forwardedRef: ForwardedRef<InlinePopoverPopupElement>) {
+  registerInlinePopoverPopupElement();
+
+  const elementRef = useRef<InlinePopoverPopupElement>(null);
+
+  const { ...restProps } = props;
+
+  const mergedRef = useCallback(
+    (element: InlinePopoverPopupElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-inline-popover-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-inline-popover-popup` custom element.
+ *
+ * @public
+ */
+export const InlinePopoverPopup: ForwardRefExoticComponent<InlinePopoverPopupProps & RefAttributes<InlinePopoverPopupElement>> = /* @__PURE__ */ forwardRef(InlinePopoverPopupComponent);