@prosekit/preact 0.5.0 → 0.6.0

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

@@ -0,0 +1,34 @@
+import {
+  type TableHandleColumnRootElement,
+  type TableHandleColumnRootProps as Props,
+  type TableHandleColumnRootEvents as Events,
+  tableHandleColumnRootProps,
+  tableHandleColumnRootEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleColumnRoot} component.
+ */
+export interface TableHandleColumnRootProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleColumnRoot: ForwardRefExoticComponent<
+  Partial<TableHandleColumnRootProps> &
+  RefAttributes<TableHandleColumnRootElement> &
+  HTMLAttributes<TableHandleColumnRootElement>
+> = createComponent<
+  TableHandleColumnRootProps, 
+  TableHandleColumnRootElement
+>(
+  'prosekit-table-handle-column-root',
+  'TableHandleColumnRoot',
+  Object.keys(tableHandleColumnRootProps),
+  Object.keys(tableHandleColumnRootEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TableHandleColumnTriggerElement,
+  type TableHandleColumnTriggerProps as Props,
+  type TableHandleColumnTriggerEvents as Events,
+  tableHandleColumnTriggerProps,
+  tableHandleColumnTriggerEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleColumnTrigger} component.
+ */
+export interface TableHandleColumnTriggerProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleColumnTrigger: ForwardRefExoticComponent<
+  Partial<TableHandleColumnTriggerProps> &
+  RefAttributes<TableHandleColumnTriggerElement> &
+  HTMLAttributes<TableHandleColumnTriggerElement>
+> = createComponent<
+  TableHandleColumnTriggerProps, 
+  TableHandleColumnTriggerElement
+>(
+  'prosekit-table-handle-column-trigger',
+  'TableHandleColumnTrigger',
+  Object.keys(tableHandleColumnTriggerProps),
+  Object.keys(tableHandleColumnTriggerEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TableHandleDragPreviewElement,
+  type TableHandleDragPreviewProps as Props,
+  type TableHandleDragPreviewEvents as Events,
+  tableHandleDragPreviewProps,
+  tableHandleDragPreviewEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleDragPreview} component.
+ */
+export interface TableHandleDragPreviewProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleDragPreview: ForwardRefExoticComponent<
+  Partial<TableHandleDragPreviewProps> &
+  RefAttributes<TableHandleDragPreviewElement> &
+  HTMLAttributes<TableHandleDragPreviewElement>
+> = createComponent<
+  TableHandleDragPreviewProps, 
+  TableHandleDragPreviewElement
+>(
+  'prosekit-table-handle-drag-preview',
+  'TableHandleDragPreview',
+  Object.keys(tableHandleDragPreviewProps),
+  Object.keys(tableHandleDragPreviewEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TableHandleDropIndicatorElement,
+  type TableHandleDropIndicatorProps as Props,
+  type TableHandleDropIndicatorEvents as Events,
+  tableHandleDropIndicatorProps,
+  tableHandleDropIndicatorEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleDropIndicator} component.
+ */
+export interface TableHandleDropIndicatorProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleDropIndicator: ForwardRefExoticComponent<
+  Partial<TableHandleDropIndicatorProps> &
+  RefAttributes<TableHandleDropIndicatorElement> &
+  HTMLAttributes<TableHandleDropIndicatorElement>
+> = createComponent<
+  TableHandleDropIndicatorProps, 
+  TableHandleDropIndicatorElement
+>(
+  'prosekit-table-handle-drop-indicator',
+  'TableHandleDropIndicator',
+  Object.keys(tableHandleDropIndicatorProps),
+  Object.keys(tableHandleDropIndicatorEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TableHandlePopoverContentElement,
+  type TableHandlePopoverContentProps as Props,
+  type TableHandlePopoverContentEvents as Events,
+  tableHandlePopoverContentProps,
+  tableHandlePopoverContentEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandlePopoverContent} component.
+ */
+export interface TableHandlePopoverContentProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandlePopoverContent: ForwardRefExoticComponent<
+  Partial<TableHandlePopoverContentProps> &
+  RefAttributes<TableHandlePopoverContentElement> &
+  HTMLAttributes<TableHandlePopoverContentElement>
+> = createComponent<
+  TableHandlePopoverContentProps, 
+  TableHandlePopoverContentElement
+>(
+  'prosekit-table-handle-popover-content',
+  'TableHandlePopoverContent',
+  Object.keys(tableHandlePopoverContentProps),
+  Object.keys(tableHandlePopoverContentEvents),
+)

package/src/components/table-handle/table-handle-popover-item.gen.ts

@@ -0,0 +1,34 @@
+import {
+  type TableHandlePopoverItemElement,
+  type TableHandlePopoverItemProps as Props,
+  type TableHandlePopoverItemEvents as Events,
+  tableHandlePopoverItemProps,
+  tableHandlePopoverItemEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandlePopoverItem} component.
+ */
+export interface TableHandlePopoverItemProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandlePopoverItem: ForwardRefExoticComponent<
+  Partial<TableHandlePopoverItemProps> &
+  RefAttributes<TableHandlePopoverItemElement> &
+  HTMLAttributes<TableHandlePopoverItemElement>
+> = createComponent<
+  TableHandlePopoverItemProps, 
+  TableHandlePopoverItemElement
+>(
+  'prosekit-table-handle-popover-item',
+  'TableHandlePopoverItem',
+  Object.keys(tableHandlePopoverItemProps),
+  Object.keys(tableHandlePopoverItemEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TableHandleRootElement,
+  type TableHandleRootProps as Props,
+  type TableHandleRootEvents as Events,
+  tableHandleRootProps,
+  tableHandleRootEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleRoot} component.
+ */
+export interface TableHandleRootProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleRoot: ForwardRefExoticComponent<
+  Partial<TableHandleRootProps> &
+  RefAttributes<TableHandleRootElement> &
+  HTMLAttributes<TableHandleRootElement>
+> = createComponent<
+  TableHandleRootProps, 
+  TableHandleRootElement
+>(
+  'prosekit-table-handle-root',
+  'TableHandleRoot',
+  Object.keys(tableHandleRootProps),
+  Object.keys(tableHandleRootEvents),
+)

package/src/components/table-handle/table-handle-row-root.gen.ts

@@ -0,0 +1,34 @@
+import {
+  type TableHandleRowRootElement,
+  type TableHandleRowRootProps as Props,
+  type TableHandleRowRootEvents as Events,
+  tableHandleRowRootProps,
+  tableHandleRowRootEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleRowRoot} component.
+ */
+export interface TableHandleRowRootProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleRowRoot: ForwardRefExoticComponent<
+  Partial<TableHandleRowRootProps> &
+  RefAttributes<TableHandleRowRootElement> &
+  HTMLAttributes<TableHandleRowRootElement>
+> = createComponent<
+  TableHandleRowRootProps, 
+  TableHandleRowRootElement
+>(
+  'prosekit-table-handle-row-root',
+  'TableHandleRowRoot',
+  Object.keys(tableHandleRowRootProps),
+  Object.keys(tableHandleRowRootEvents),
+)

package/src/components/table-handle/table-handle-row-trigger.gen.ts

@@ -0,0 +1,34 @@
+import {
+  type TableHandleRowTriggerElement,
+  type TableHandleRowTriggerProps as Props,
+  type TableHandleRowTriggerEvents as Events,
+  tableHandleRowTriggerProps,
+  tableHandleRowTriggerEvents,
+} from '@prosekit/web/table-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TableHandleRowTrigger} component.
+ */
+export interface TableHandleRowTriggerProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TableHandleRowTrigger: ForwardRefExoticComponent<
+  Partial<TableHandleRowTriggerProps> &
+  RefAttributes<TableHandleRowTriggerElement> &
+  HTMLAttributes<TableHandleRowTriggerElement>
+> = createComponent<
+  TableHandleRowTriggerProps, 
+  TableHandleRowTriggerElement
+>(
+  'prosekit-table-handle-row-trigger',
+  'TableHandleRowTrigger',
+  Object.keys(tableHandleRowTriggerProps),
+  Object.keys(tableHandleRowTriggerEvents),
+)

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

@@ -0,0 +1,5 @@
+export { TooltipContent, type TooltipContentProps } from './tooltip-content.gen'
+
+export { TooltipRoot, type TooltipRootProps } from './tooltip-root.gen'
+
+export { TooltipTrigger, type TooltipTriggerProps } from './tooltip-trigger.gen'

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

@@ -0,0 +1,34 @@
+import {
+  type TooltipContentElement,
+  type TooltipContentProps as Props,
+  type TooltipContentEvents as Events,
+  tooltipContentProps,
+  tooltipContentEvents,
+} from '@prosekit/web/tooltip'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TooltipContent} component.
+ */
+export interface TooltipContentProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TooltipContent: ForwardRefExoticComponent<
+  Partial<TooltipContentProps> &
+  RefAttributes<TooltipContentElement> &
+  HTMLAttributes<TooltipContentElement>
+> = createComponent<
+  TooltipContentProps, 
+  TooltipContentElement
+>(
+  'prosekit-tooltip-content',
+  'TooltipContent',
+  Object.keys(tooltipContentProps),
+  Object.keys(tooltipContentEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TooltipRootElement,
+  type TooltipRootProps as Props,
+  type TooltipRootEvents as Events,
+  tooltipRootProps,
+  tooltipRootEvents,
+} from '@prosekit/web/tooltip'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TooltipRoot} component.
+ */
+export interface TooltipRootProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TooltipRoot: ForwardRefExoticComponent<
+  Partial<TooltipRootProps> &
+  RefAttributes<TooltipRootElement> &
+  HTMLAttributes<TooltipRootElement>
+> = createComponent<
+  TooltipRootProps, 
+  TooltipRootElement
+>(
+  'prosekit-tooltip-root',
+  'TooltipRoot',
+  Object.keys(tooltipRootProps),
+  Object.keys(tooltipRootEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type TooltipTriggerElement,
+  type TooltipTriggerProps as Props,
+  type TooltipTriggerEvents as Events,
+  tooltipTriggerProps,
+  tooltipTriggerEvents,
+} from '@prosekit/web/tooltip'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'preact/compat'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * Props for the {@link TooltipTrigger} component.
+ */
+export interface TooltipTriggerProps extends Partial<CreateProps<Props, Events>> {}
+ 
+export const TooltipTrigger: ForwardRefExoticComponent<
+  Partial<TooltipTriggerProps> &
+  RefAttributes<TooltipTriggerElement> &
+  HTMLAttributes<TooltipTriggerElement>
+> = createComponent<
+  TooltipTriggerProps, 
+  TooltipTriggerElement
+>(
+  'prosekit-tooltip-trigger',
+  'TooltipTrigger',
+  Object.keys(tooltipTriggerProps),
+  Object.keys(tooltipTriggerEvents),
+)

package/src/contexts/editor-context.ts

@@ -0,0 +1,23 @@
+import type {
+  Editor,
+  Extension,
+} from '@prosekit/core'
+import {
+  createContext,
+  type Provider,
+} from 'preact'
+import { useContext } from 'preact/hooks'
+
+const editorContext = createContext<Editor | null>(null)
+
+/**
+ * @internal
+ */
+export function useEditorContext<E extends Extension>(): Editor<E> | null {
+  return useContext(editorContext)
+}
+
+/**
+ * @internal
+ */
+export const EditorContextProvider: Provider<Editor | null> = editorContext.Provider

package/src/extensions/preact-mark-view.ts

@@ -0,0 +1,93 @@
+import {
+  defineMarkViewComponent,
+  defineMarkViewFactory,
+  type Extension,
+} from '@prosekit/core'
+import type { MarkViewConstructor } from '@prosekit/pm/view'
+import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'
+import {
+  useMarkViewContext,
+  useMarkViewFactory,
+  type MarkViewContext,
+  type PreactMarkViewUserOptions,
+} from '@prosemirror-adapter/preact'
+import {
+  h,
+  type ComponentType,
+  type FunctionComponent,
+} from 'preact'
+import { useMemo } from 'preact/hooks'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface PreactMarkViewProps extends MarkViewContext {}
+
+/**
+ * @public
+ */
+export type PreactMarkViewComponent = ComponentType<PreactMarkViewProps>
+
+/**
+ * Options for {@link definePreactMarkView}.
+ *
+ * @public
+ */
+export interface PreactMarkViewOptions extends CoreMarkViewUserOptions<PreactMarkViewComponent> {
+  /**
+   * The name of the mark type.
+   */
+  name: string
+}
+
+function withMarkViewProps(component: PreactMarkViewComponent) {
+  return function MarkViewPropsWrapper() {
+    const props: PreactMarkViewProps = useMarkViewContext()
+    return h(component, props)
+  }
+}
+
+/**
+ * @internal
+ */
+export const PreactMarkViewConsumer: FunctionComponent = () => {
+  const markViewFactory = useMarkViewFactory()
+  const extension = useMemo(
+    () => definePreactMarkViewFactory(markViewFactory),
+    [markViewFactory],
+  )
+  useExtension(extension)
+
+  return null
+}
+
+/**
+ * Defines a mark view using a Preact component.
+ *
+ * @public
+ */
+export function definePreactMarkView(options: PreactMarkViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: PreactMarkViewUserOptions = {
+    ...userOptions,
+    component: withMarkViewProps(component),
+  }
+
+  return defineMarkViewComponent<PreactMarkViewUserOptions>({
+    group: 'preact',
+    name,
+    args,
+  })
+}
+
+function definePreactMarkViewFactory(
+  factory: (options: PreactMarkViewUserOptions) => MarkViewConstructor,
+) {
+  return defineMarkViewFactory<PreactMarkViewUserOptions>({
+    group: 'preact',
+    factory,
+  })
+}

package/src/extensions/preact-node-view.ts

@@ -0,0 +1,93 @@
+import {
+  defineNodeViewComponent,
+  defineNodeViewFactory,
+  type Extension,
+} from '@prosekit/core'
+import type { NodeViewConstructor } from '@prosekit/pm/view'
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
+import {
+  useNodeViewContext,
+  useNodeViewFactory,
+  type NodeViewContext,
+  type PreactNodeViewUserOptions,
+} from '@prosemirror-adapter/preact'
+import {
+  h,
+  type ComponentType,
+  type FunctionComponent,
+} from 'preact'
+import { useMemo } from 'preact/hooks'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface PreactNodeViewProps extends NodeViewContext {}
+
+/**
+ * @public
+ */
+export type PreactNodeViewComponent = ComponentType<PreactNodeViewProps>
+
+/**
+ * Options for {@link definePreactNodeView}.
+ *
+ * @public
+ */
+export interface PreactNodeViewOptions extends CoreNodeViewUserOptions<PreactNodeViewComponent> {
+  /**
+   * The name of the node type.
+   */
+  name: string
+}
+
+function withNodeViewProps(component: PreactNodeViewComponent) {
+  return function NodeViewPropsWrapper() {
+    const props: PreactNodeViewProps = useNodeViewContext()
+    return h(component, props)
+  }
+}
+
+/**
+ * @internal
+ */
+export const PreactNodeViewConsumer: FunctionComponent = () => {
+  const nodeViewFactory = useNodeViewFactory()
+  const extension = useMemo(
+    () => definePreactNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory],
+  )
+  useExtension(extension)
+
+  return null
+}
+
+/**
+ * Defines a node view using a Preact component.
+ *
+ * @public
+ */
+export function definePreactNodeView(options: PreactNodeViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: PreactNodeViewUserOptions = {
+    ...userOptions,
+    component: withNodeViewProps(component),
+  }
+
+  return defineNodeViewComponent<PreactNodeViewUserOptions>({
+    group: 'preact',
+    name,
+    args,
+  })
+}
+
+function definePreactNodeViewFactory(
+  factory: (options: PreactNodeViewUserOptions) => NodeViewConstructor,
+) {
+  return defineNodeViewFactory<PreactNodeViewUserOptions>({
+    group: 'preact',
+    factory,
+  })
+}

package/src/hooks/use-doc-change.ts

@@ -0,0 +1,24 @@
+import { defineDocChangeHandler } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+import { useMemo } from 'preact/hooks'
+
+import {
+  useExtension,
+  type UseExtensionOptions,
+} from './use-extension'
+
+/**
+ * Calls the given handler whenever the editor document changes.
+ *
+ * @public
+ */
+export function useDocChange(
+  handler: (doc: ProseMirrorNode) => void,
+  options?: UseExtensionOptions,
+): void {
+  const extension = useMemo(
+    () => defineDocChangeHandler((view) => handler(view.state.doc)),
+    [handler],
+  )
+  useExtension(extension, options)
+}