@prosekit/react 0.6.0 → 0.6.2

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompleteEmptyElement,
+  type AutocompleteEmptyProps as Props,
+  type AutocompleteEmptyEvents as Events,
+  autocompleteEmptyProps,
+  autocompleteEmptyEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link AutocompleteEmpty} component.
+ */
+export interface AutocompleteEmptyProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const AutocompleteEmpty: ForwardRefExoticComponent<
+  AutocompleteEmptyProps &
+  RefAttributes<AutocompleteEmptyElement> &
+  HTMLAttributes<AutocompleteEmptyElement>
+> = createComponent<
+  AutocompleteEmptyProps, 
+  AutocompleteEmptyElement
+>(
+  'prosekit-autocomplete-empty',
+  'AutocompleteEmpty',
+  Object.keys(autocompleteEmptyProps),
+  Object.keys(autocompleteEmptyEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompleteItemElement,
+  type AutocompleteItemProps as Props,
+  type AutocompleteItemEvents as Events,
+  autocompleteItemProps,
+  autocompleteItemEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link AutocompleteItem} component.
+ */
+export interface AutocompleteItemProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const AutocompleteItem: ForwardRefExoticComponent<
+  AutocompleteItemProps &
+  RefAttributes<AutocompleteItemElement> &
+  HTMLAttributes<AutocompleteItemElement>
+> = createComponent<
+  AutocompleteItemProps, 
+  AutocompleteItemElement
+>(
+  'prosekit-autocomplete-item',
+  'AutocompleteItem',
+  Object.keys(autocompleteItemProps),
+  Object.keys(autocompleteItemEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompleteListElement,
+  type AutocompleteListProps as Props,
+  type AutocompleteListEvents as Events,
+  autocompleteListProps,
+  autocompleteListEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link AutocompleteList} component.
+ */
+export interface AutocompleteListProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const AutocompleteList: ForwardRefExoticComponent<
+  AutocompleteListProps &
+  RefAttributes<AutocompleteListElement> &
+  HTMLAttributes<AutocompleteListElement>
+> = createComponent<
+  AutocompleteListProps, 
+  AutocompleteListElement
+>(
+  'prosekit-autocomplete-list',
+  'AutocompleteList',
+  Object.keys(autocompleteListProps),
+  Object.keys(autocompleteListEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompletePopoverElement,
+  type AutocompletePopoverProps as Props,
+  type AutocompletePopoverEvents as Events,
+  autocompletePopoverProps,
+  autocompletePopoverEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link AutocompletePopover} component.
+ */
+export interface AutocompletePopoverProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const AutocompletePopover: ForwardRefExoticComponent<
+  AutocompletePopoverProps &
+  RefAttributes<AutocompletePopoverElement> &
+  HTMLAttributes<AutocompletePopoverElement>
+> = createComponent<
+  AutocompletePopoverProps, 
+  AutocompletePopoverElement
+>(
+  'prosekit-autocomplete-popover',
+  'AutocompletePopover',
+  Object.keys(autocompletePopoverProps),
+  Object.keys(autocompletePopoverEvents),
+)

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

@@ -0,0 +1,7 @@
+export { AutocompleteEmpty, type AutocompleteEmptyProps } from './autocomplete-empty.gen'
+
+export { AutocompleteItem, type AutocompleteItemProps } from './autocomplete-item.gen'
+
+export { AutocompleteList, type AutocompleteListProps } from './autocomplete-list.gen'
+
+export { AutocompletePopover, type AutocompletePopoverProps } from './autocomplete-popover.gen'

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

@@ -0,0 +1,34 @@
+import {
+  type BlockHandleAddElement,
+  type BlockHandleAddProps as Props,
+  type BlockHandleAddEvents as Events,
+  blockHandleAddProps,
+  blockHandleAddEvents,
+} from '@prosekit/web/block-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link BlockHandleAdd} component.
+ */
+export interface BlockHandleAddProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const BlockHandleAdd: ForwardRefExoticComponent<
+  BlockHandleAddProps &
+  RefAttributes<BlockHandleAddElement> &
+  HTMLAttributes<BlockHandleAddElement>
+> = createComponent<
+  BlockHandleAddProps, 
+  BlockHandleAddElement
+>(
+  'prosekit-block-handle-add',
+  'BlockHandleAdd',
+  Object.keys(blockHandleAddProps),
+  Object.keys(blockHandleAddEvents),
+)

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

@@ -0,0 +1,34 @@
+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'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link BlockHandleDraggable} component.
+ */
+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),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type BlockHandlePopoverElement,
+  type BlockHandlePopoverProps as Props,
+  type BlockHandlePopoverEvents as Events,
+  blockHandlePopoverProps,
+  blockHandlePopoverEvents,
+} from '@prosekit/web/block-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link BlockHandlePopover} component.
+ */
+export interface BlockHandlePopoverProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const BlockHandlePopover: ForwardRefExoticComponent<
+  BlockHandlePopoverProps &
+  RefAttributes<BlockHandlePopoverElement> &
+  HTMLAttributes<BlockHandlePopoverElement>
+> = createComponent<
+  BlockHandlePopoverProps, 
+  BlockHandlePopoverElement
+>(
+  'prosekit-block-handle-popover',
+  'BlockHandlePopover',
+  Object.keys(blockHandlePopoverProps),
+  Object.keys(blockHandlePopoverEvents),
+)

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

@@ -0,0 +1,5 @@
+export { BlockHandleAdd, type BlockHandleAddProps } from './block-handle-add.gen'
+
+export { BlockHandleDraggable, type BlockHandleDraggableProps } from './block-handle-draggable.gen'
+
+export { BlockHandlePopover, type BlockHandlePopoverProps } from './block-handle-popover.gen'

package/src/components/create-component.ts

@@ -0,0 +1,137 @@
+import type { AnyFunction } from '@prosekit/core'
+import {
+  createElement,
+  forwardRef,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ForwardRefExoticComponent,
+  type HTMLAttributes,
+  type RefAttributes,
+} from 'react'
+
+import { useEditorContext } from '../contexts/editor-context'
+
+import { mergeRefs } from './merge-refs'
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+export function createComponent<
+  Props extends object,
+  CustomElement extends HTMLElement,
+>(
+  tagName: string,
+  displayName: string,
+  propNames: string[],
+  eventNames: string[],
+): ForwardRefExoticComponent<
+  Partial<Props> & RefAttributes<CustomElement> & HTMLAttributes<CustomElement>
+> {
+  const hasEditor = propNames.includes('editor')
+  const lowerCaseEventNameMap = new Map(
+    eventNames.map((name) => [name.toLowerCase(), name]),
+  )
+
+  const Component = forwardRef<any, any>((props: Props, ref) => {
+    const [el, setEl] = useState<HTMLElement | null>(null)
+
+    const properties: Record<string, unknown> = {}
+    const attributes: Record<string, unknown> = {}
+    const eventHandlersRef = useRef<Record<string, AnyFunction>>({})
+    const eventHandlers: Record<string, AnyFunction> = {}
+
+    for (const [name, value] of Object.entries(props)) {
+      if (value === undefined) {
+        continue
+      }
+
+      if (propNames.includes(name)) {
+        properties[name] = value
+        continue
+      }
+
+      if (name.startsWith('on')) {
+        const lowerCaseEventName = name.slice(2).toLowerCase()
+        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)
+        if (eventName) {
+          const extractDetail = eventName.endsWith('Change')
+          eventHandlers[eventName] = (event: Event) => {
+            const handler = value as AnyFunction | null
+            if (typeof handler === 'function') {
+              handler(extractDetail ? (event as CustomEvent).detail : event)
+            }
+          }
+          continue
+        }
+      }
+
+      if (name === 'className') {
+        attributes['class'] = value
+      } else {
+        attributes[name] = value
+      }
+    }
+
+    const editor = useEditorContext()
+
+    if (hasEditor && editor && !properties['editor']) {
+      properties['editor'] = editor
+    }
+
+    // Set all properties.
+    useIsomorphicLayoutEffect(() => {
+      if (!el) return
+      for (const [name, value] of Object.entries(properties)) {
+        if (value !== undefined) {
+          // @ts-expect-error: we know that name is a valid property name
+          el[name] = value as unknown
+        }
+      }
+    }, [el, ...propNames.map((name) => properties[name])])
+
+    // Put all event listeners extracted from `props` into `eventHandlersRef`.
+    useIsomorphicLayoutEffect(() => {
+      eventHandlersRef.current = eventHandlers
+    })
+
+    // Register the event listeners to the element.
+    useIsomorphicLayoutEffect(() => {
+      if (!el) {
+        return
+      }
+
+      const fixedEventHandlers: Record<string, AnyFunction> = {}
+
+      for (const eventName of eventNames) {
+        fixedEventHandlers[eventName] = (event: Event) => {
+          eventHandlersRef.current[eventName]?.(event)
+        }
+      }
+
+      for (const [name, handler] of Object.entries(fixedEventHandlers)) {
+        el.addEventListener(name, handler)
+      }
+
+      return () => {
+        for (const [name, handler] of Object.entries(fixedEventHandlers)) {
+          el.removeEventListener(name, handler)
+        }
+      }
+    }, [el])
+
+    const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref])
+
+    return createElement(tagName, {
+      ...attributes,
+      // Suppress hydration warnings for web components as the attributes are set after the component is mounted.
+      suppressHydrationWarning: true,
+      ref: mergedRef,
+    })
+  })
+
+  Component.displayName = displayName
+
+  return Component
+}

package/src/components/create-props.ts

@@ -0,0 +1,13 @@
+export type CreateProps<
+  Props extends { [PropName in keyof Props]: unknown },
+  Events extends { [EventName in keyof Events]: CustomEvent },
+> = Props & CreateEventProps<Events>
+
+type CreateEventProps<
+  Events extends { [EventName in keyof Events]: CustomEvent },
+> = {
+  [EventName in keyof Events as `on${Capitalize<string & EventName>}`]: (
+    event: EventName extends `${string}Change` ? Events[EventName]['detail']
+      : Events[EventName],
+  ) => void
+}

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

@@ -0,0 +1,34 @@
+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'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link DropIndicator} component.
+ */
+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),
+)

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

@@ -0,0 +1 @@
+export { DropIndicator, type DropIndicatorProps } from './drop-indicator.gen'

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

@@ -0,0 +1 @@
+export { InlinePopover, type InlinePopoverProps } from './inline-popover.gen'

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

@@ -0,0 +1,34 @@
+import {
+  type InlinePopoverElement,
+  type InlinePopoverProps as Props,
+  type InlinePopoverEvents as Events,
+  inlinePopoverProps,
+  inlinePopoverEvents,
+} from '@prosekit/web/inline-popover'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link InlinePopover} component.
+ */
+export interface InlinePopoverProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const InlinePopover: ForwardRefExoticComponent<
+  InlinePopoverProps &
+  RefAttributes<InlinePopoverElement> &
+  HTMLAttributes<InlinePopoverElement>
+> = createComponent<
+  InlinePopoverProps, 
+  InlinePopoverElement
+>(
+  'prosekit-inline-popover',
+  'InlinePopover',
+  Object.keys(inlinePopoverProps),
+  Object.keys(inlinePopoverEvents),
+)

package/src/components/merge-refs.ts

@@ -0,0 +1,35 @@
+import type { Ref } from 'react'
+
+/**
+ * Assigns a value to a ref.
+ * @returns The ref cleanup callback, if any.
+ */
+function assignRef<T>(
+  ref: Ref<T> | undefined,
+  value: T | null,
+): VoidFunction | undefined | void {
+  if (typeof ref === 'function') {
+    return ref(value)
+  } else if (ref) {
+    ref.current = value
+  }
+}
+
+/**
+ * Merges multiple refs into a single one.
+ */
+export function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T> {
+  return (value: T | null) => {
+    const cleanups: VoidFunction[] = []
+
+    for (const ref of refs) {
+      const cleanup = assignRef(ref, value)
+      const isCleanup = typeof cleanup === 'function'
+      cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null))
+    }
+
+    return () => {
+      for (const cleanup of cleanups) cleanup()
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+export { PopoverContent, type PopoverContentProps } from './popover-content.gen'
+
+export { PopoverRoot, type PopoverRootProps } from './popover-root.gen'
+
+export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger.gen'

package/src/components/popover/popover-content.gen.ts

@@ -0,0 +1,34 @@
+import {
+  type PopoverContentElement,
+  type PopoverContentProps as Props,
+  type PopoverContentEvents as Events,
+  popoverContentProps,
+  popoverContentEvents,
+} from '@prosekit/web/popover'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link PopoverContent} component.
+ */
+export interface PopoverContentProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const PopoverContent: ForwardRefExoticComponent<
+  PopoverContentProps &
+  RefAttributes<PopoverContentElement> &
+  HTMLAttributes<PopoverContentElement>
+> = createComponent<
+  PopoverContentProps, 
+  PopoverContentElement
+>(
+  'prosekit-popover-content',
+  'PopoverContent',
+  Object.keys(popoverContentProps),
+  Object.keys(popoverContentEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type PopoverRootElement,
+  type PopoverRootProps as Props,
+  type PopoverRootEvents as Events,
+  popoverRootProps,
+  popoverRootEvents,
+} from '@prosekit/web/popover'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link PopoverRoot} component.
+ */
+export interface PopoverRootProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const PopoverRoot: ForwardRefExoticComponent<
+  PopoverRootProps &
+  RefAttributes<PopoverRootElement> &
+  HTMLAttributes<PopoverRootElement>
+> = createComponent<
+  PopoverRootProps, 
+  PopoverRootElement
+>(
+  'prosekit-popover-root',
+  'PopoverRoot',
+  Object.keys(popoverRootProps),
+  Object.keys(popoverRootEvents),
+)

package/src/components/popover/popover-trigger.gen.ts

@@ -0,0 +1,34 @@
+import {
+  type PopoverTriggerElement,
+  type PopoverTriggerProps as Props,
+  type PopoverTriggerEvents as Events,
+  popoverTriggerProps,
+  popoverTriggerEvents,
+} from '@prosekit/web/popover'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link PopoverTrigger} component.
+ */
+export interface PopoverTriggerProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const PopoverTrigger: ForwardRefExoticComponent<
+  PopoverTriggerProps &
+  RefAttributes<PopoverTriggerElement> &
+  HTMLAttributes<PopoverTriggerElement>
+> = createComponent<
+  PopoverTriggerProps, 
+  PopoverTriggerElement
+>(
+  'prosekit-popover-trigger',
+  'PopoverTrigger',
+  Object.keys(popoverTriggerProps),
+  Object.keys(popoverTriggerEvents),
+)

package/src/components/prosekit.ts

@@ -0,0 +1,37 @@
+import type { Editor } from '@prosekit/core'
+import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/react'
+import {
+  createElement,
+  type ComponentType,
+  type ReactNode,
+} from 'react'
+
+import { EditorContextProvider } from '../contexts/editor-context'
+import { ReactMarkViewConsumer } from '../extensions/react-mark-view'
+import { ReactNodeViewConsumer } from '../extensions/react-node-view'
+
+export interface ProseKitProps {
+  editor: Editor
+  children?: ReactNode
+}
+
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
+export const ProseKit: ComponentType<ProseKitProps> = (props) => {
+  const { editor, children } = props
+
+  return createElement(
+    ProsemirrorAdapterProvider,
+    null,
+    createElement(
+      EditorContextProvider,
+      { value: editor },
+      createElement(ReactNodeViewConsumer),
+      createElement(ReactMarkViewConsumer),
+      children,
+    ),
+  )
+}

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

@@ -0,0 +1,3 @@
+export { ResizableHandle, type ResizableHandleProps } from './resizable-handle.gen'
+
+export { ResizableRoot, type ResizableRootProps } from './resizable-root.gen'