@prosekit/svelte 0.7.0 → 0.7.1

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

@@ -0,0 +1,14 @@
+import type { AutocompleteItemElement, AutocompleteItemProps as Props, AutocompleteItemEvents as Events } from '@prosekit/web/autocomplete'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './autocomplete-item.gen.svelte'
+
+/**
+ * Props for the {@link AutocompleteItem} component.
+ */
+export interface AutocompleteItemProps extends Partial<CreateProps<Props, Events>> {}
+
+export const AutocompleteItem = Component as typeof SvelteComponent<AutocompleteItemProps & HTMLAttributes<AutocompleteItemElement>>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/autocomplete'
+
+import { autocompleteListProps, autocompleteListEvents } from '@prosekit/web/autocomplete'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(autocompleteListProps), Object.keys(autocompleteListEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-autocomplete-list {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-autocomplete-list>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { AutocompleteListElement, AutocompleteListProps as Props, AutocompleteListEvents as Events } from '@prosekit/web/autocomplete'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './autocomplete-list.gen.svelte'
+
+/**
+ * Props for the {@link AutocompleteList} component.
+ */
+export interface AutocompleteListProps extends Partial<CreateProps<Props, Events>> {}
+
+export const AutocompleteList = Component as typeof SvelteComponent<AutocompleteListProps & HTMLAttributes<AutocompleteListElement>>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/autocomplete'
+
+import { autocompletePopoverProps, autocompletePopoverEvents } from '@prosekit/web/autocomplete'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(autocompletePopoverProps), Object.keys(autocompletePopoverEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-autocomplete-popover {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-autocomplete-popover>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { AutocompletePopoverElement, AutocompletePopoverProps as Props, AutocompletePopoverEvents as Events } from '@prosekit/web/autocomplete'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './autocomplete-popover.gen.svelte'
+
+/**
+ * Props for the {@link AutocompletePopover} component.
+ */
+export interface AutocompletePopoverProps extends Partial<CreateProps<Props, Events>> {}
+
+export const AutocompletePopover = Component as typeof SvelteComponent<AutocompletePopoverProps & HTMLAttributes<AutocompletePopoverElement>>

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.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/block-handle'
+
+import { blockHandleAddProps, blockHandleAddEvents } from '@prosekit/web/block-handle'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(blockHandleAddProps), Object.keys(blockHandleAddEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-block-handle-add {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-block-handle-add>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { BlockHandleAddElement, BlockHandleAddProps as Props, BlockHandleAddEvents as Events } from '@prosekit/web/block-handle'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './block-handle-add.gen.svelte'
+
+/**
+ * Props for the {@link BlockHandleAdd} component.
+ */
+export interface BlockHandleAddProps extends Partial<CreateProps<Props, Events>> {}
+
+export const BlockHandleAdd = Component as typeof SvelteComponent<BlockHandleAddProps & HTMLAttributes<BlockHandleAddElement>>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/block-handle'
+
+import { blockHandleDraggableProps, blockHandleDraggableEvents } from '@prosekit/web/block-handle'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(blockHandleDraggableProps), Object.keys(blockHandleDraggableEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-block-handle-draggable {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-block-handle-draggable>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { BlockHandleDraggableElement, BlockHandleDraggableProps as Props, BlockHandleDraggableEvents as Events } from '@prosekit/web/block-handle'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './block-handle-draggable.gen.svelte'
+
+/**
+ * Props for the {@link BlockHandleDraggable} component.
+ */
+export interface BlockHandleDraggableProps extends Partial<CreateProps<Props, Events>> {}
+
+export const BlockHandleDraggable = Component as typeof SvelteComponent<BlockHandleDraggableProps & HTMLAttributes<BlockHandleDraggableElement>>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/block-handle'
+
+import { blockHandlePopoverProps, blockHandlePopoverEvents } from '@prosekit/web/block-handle'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(blockHandlePopoverProps), Object.keys(blockHandlePopoverEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-block-handle-popover {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-block-handle-popover>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { BlockHandlePopoverElement, BlockHandlePopoverProps as Props, BlockHandlePopoverEvents as Events } from '@prosekit/web/block-handle'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './block-handle-popover.gen.svelte'
+
+/**
+ * Props for the {@link BlockHandlePopover} component.
+ */
+export interface BlockHandlePopoverProps extends Partial<CreateProps<Props, Events>> {}
+
+export const BlockHandlePopover = Component as typeof SvelteComponent<BlockHandlePopoverProps & HTMLAttributes<BlockHandlePopoverElement>>

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/client-update/client-update.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import { onMount } from 'svelte'
+
+// Forces a re-render when the component mounts. This resolves issues with
+// web-components after server-side rendering.
+let key = 1
+
+onMount(() => {
+  key = 2
+})
+</script>
+
+{#key key}
+  <slot />
+{/key}

package/src/components/client-update/index.ts

@@ -0,0 +1,3 @@
+import ClientUpdate from './client-update.svelte'
+
+export { ClientUpdate }

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.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/drop-indicator'
+
+import { dropIndicatorProps, dropIndicatorEvents } from '@prosekit/web/drop-indicator'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(dropIndicatorProps), Object.keys(dropIndicatorEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-drop-indicator {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-drop-indicator>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { DropIndicatorElement, DropIndicatorProps as Props, DropIndicatorEvents as Events } from '@prosekit/web/drop-indicator'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './drop-indicator.gen.svelte'
+
+/**
+ * Props for the {@link DropIndicator} component.
+ */
+export interface DropIndicatorProps extends Partial<CreateProps<Props, Events>> {}
+
+export const DropIndicator = Component as typeof SvelteComponent<DropIndicatorProps & HTMLAttributes<DropIndicatorElement>>

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.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/inline-popover'
+
+import { inlinePopoverProps, inlinePopoverEvents } from '@prosekit/web/inline-popover'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(inlinePopoverProps), Object.keys(inlinePopoverEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-inline-popover {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-inline-popover>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { InlinePopoverElement, InlinePopoverProps as Props, InlinePopoverEvents as Events } from '@prosekit/web/inline-popover'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './inline-popover.gen.svelte'
+
+/**
+ * Props for the {@link InlinePopover} component.
+ */
+export interface InlinePopoverProps extends Partial<CreateProps<Props, Events>> {}
+
+export const InlinePopover = Component as typeof SvelteComponent<InlinePopoverProps & HTMLAttributes<InlinePopoverElement>>

package/src/components/mark-view-consumer/index.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte'
+
+import Comp from './mark-view-consumer.svelte'
+
+/**
+ * @internal
+ */
+export const MarkViewConsumer = Comp as Component<Record<string, never>>

package/src/components/mark-view-consumer/mark-view-consumer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import {
+  useMarkViewFactory,
+  type MarkViewFactory,
+} from '@prosemirror-adapter/svelte'
+import { readable } from 'svelte/store'
+import { defineSvelteMarkViewFactory } from '../../extensions/svelte-mark-view'
+import { useExtension } from '../../hooks/use-extension'
+
+const markViewFactory: MarkViewFactory = useMarkViewFactory()
+const extension = defineSvelteMarkViewFactory(markViewFactory)
+useExtension(readable(extension))
+</script>
+
+<slot />

package/src/components/mark-view-wrapper/index.ts

@@ -0,0 +1,6 @@
+import type { Component } from 'svelte'
+
+import Comp from './mark-view-wrapper.svelte'
+import type { MarkViewWrapperProps } from './props'
+
+export const MarkViewWrapper = Comp as Component<MarkViewWrapperProps>

package/src/components/mark-view-wrapper/mark-view-wrapper.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { useMarkViewContext } from '@prosemirror-adapter/svelte'
+import type { SvelteMarkViewProps } from '../../extensions/svelte-mark-view'
+import type { MarkViewWrapperProps } from './props'
+
+const { component: MarkViewComponent }: MarkViewWrapperProps = $props()
+
+const markViewProps: SvelteMarkViewProps = {
+  contentRef: useMarkViewContext('contentRef'),
+  view: useMarkViewContext('view'),
+  mark: useMarkViewContext('mark'),
+}
+</script>
+
+{#if MarkViewComponent}
+  <MarkViewComponent {...markViewProps} />
+{/if}

package/src/components/mark-view-wrapper/props.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte'
+
+import type { SvelteMarkViewProps } from '../../extensions/svelte-mark-view'
+
+export interface MarkViewWrapperProps {
+  component?: Component<SvelteMarkViewProps>
+}

package/src/components/node-view-consumer/index.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'svelte'
+
+import Comp from './node-view-consumer.svelte'
+
+/**
+ * @internal
+ */
+export const NodeViewConsumer = Comp as Component<Record<string, never>>

package/src/components/node-view-consumer/node-view-consumer.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+import {
+  useNodeViewFactory,
+  type NodeViewFactory,
+} from '@prosemirror-adapter/svelte'
+import { readable } from 'svelte/store'
+import { defineSvelteNodeViewFactory } from '../../extensions/svelte-node-view'
+import { useExtension } from '../../hooks/use-extension'
+
+const nodeViewFactory: NodeViewFactory = useNodeViewFactory()
+const extension = defineSvelteNodeViewFactory(nodeViewFactory)
+useExtension(readable(extension))
+</script>
+
+<slot />

package/src/components/node-view-wrapper/index.ts

@@ -0,0 +1,6 @@
+import type { Component } from 'svelte'
+
+import Comp from './node-view-wrapper.svelte'
+import type { NodeViewWrapperProps } from './props'
+
+export const NodeViewWrapper = Comp as Component<NodeViewWrapperProps>

package/src/components/node-view-wrapper/node-view-wrapper.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { useNodeViewContext } from '@prosemirror-adapter/svelte'
+import type { SvelteNodeViewProps } from '../../extensions/svelte-node-view'
+import type { NodeViewWrapperProps } from './props'
+
+const { component: NodeViewComponent }: NodeViewWrapperProps = $props()
+
+const nodeViewProps: SvelteNodeViewProps = {
+  contentRef: useNodeViewContext('contentRef'),
+  view: useNodeViewContext('view'),
+  getPos: useNodeViewContext('getPos'),
+  setAttrs: useNodeViewContext('setAttrs'),
+  node: useNodeViewContext('node'),
+  selected: useNodeViewContext('selected'),
+  decorations: useNodeViewContext('decorations'),
+  innerDecorations: useNodeViewContext('innerDecorations'),
+}
+</script>
+
+{#if NodeViewComponent}
+  <NodeViewComponent {...nodeViewProps} />
+{/if}

package/src/components/node-view-wrapper/props.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte'
+
+import type { SvelteNodeViewProps } from '../../extensions/svelte-node-view'
+
+export interface NodeViewWrapperProps {
+  component?: Component<SvelteNodeViewProps>
+}

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.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/popover'
+
+import { popoverContentProps, popoverContentEvents } from '@prosekit/web/popover'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(popoverContentProps), Object.keys(popoverContentEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-popover-content {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-popover-content>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { PopoverContentElement, PopoverContentProps as Props, PopoverContentEvents as Events } from '@prosekit/web/popover'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './popover-content.gen.svelte'
+
+/**
+ * Props for the {@link PopoverContent} component.
+ */
+export interface PopoverContentProps extends Partial<CreateProps<Props, Events>> {}
+
+export const PopoverContent = Component as typeof SvelteComponent<PopoverContentProps & HTMLAttributes<PopoverContentElement>>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/popover'
+
+import { popoverRootProps, popoverRootEvents } from '@prosekit/web/popover'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(popoverRootProps), Object.keys(popoverRootEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-popover-root {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-popover-root>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { PopoverRootElement, PopoverRootProps as Props, PopoverRootEvents as Events } from '@prosekit/web/popover'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './popover-root.gen.svelte'
+
+/**
+ * Props for the {@link PopoverRoot} component.
+ */
+export interface PopoverRootProps extends Partial<CreateProps<Props, Events>> {}
+
+export const PopoverRoot = Component as typeof SvelteComponent<PopoverRootProps & HTMLAttributes<PopoverRootElement>>

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+import '@prosekit/web/popover'
+
+import { popoverTriggerProps, popoverTriggerEvents } from '@prosekit/web/popover'
+import { ClientUpdate } from '../client-update'
+import { useComponent } from '../use-component'
+import { useEventHandlers } from '../use-event-handlers'
+
+let attributes: Record<string, unknown> = {}
+let eventHandlers: Record<string, (...args: any[]) => any> = {}
+let element: HTMLElement | undefined = undefined
+const handleChange = useComponent(Object.keys(popoverTriggerProps), Object.keys(popoverTriggerEvents))
+
+$: {
+  [attributes, eventHandlers] = handleChange(element, $$props)
+}
+</script>
+
+<ClientUpdate>
+  <prosekit-popover-trigger {...attributes} use:useEventHandlers={eventHandlers} bind:this={element}>
+    <slot />
+  </prosekit-popover-trigger>
+</ClientUpdate>

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

@@ -0,0 +1,14 @@
+import type { PopoverTriggerElement, PopoverTriggerProps as Props, PopoverTriggerEvents as Events } from '@prosekit/web/popover'    
+import type { SvelteComponent } from 'svelte'
+import type { HTMLAttributes } from 'svelte/elements'
+
+import type { CreateProps } from '../create-props'
+
+import Component from './popover-trigger.gen.svelte'
+
+/**
+ * Props for the {@link PopoverTrigger} component.
+ */
+export interface PopoverTriggerProps extends Partial<CreateProps<Props, Events>> {}
+
+export const PopoverTrigger = Component as typeof SvelteComponent<PopoverTriggerProps & HTMLAttributes<PopoverTriggerElement>>

package/src/components/prosekit/index.ts

@@ -0,0 +1,15 @@
+import type { Editor } from '@prosekit/core'
+import type { SvelteComponent } from 'svelte'
+
+import Comp from './prosekit.svelte'
+
+export interface ProseKitProps {
+  editor: Editor
+}
+
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
+export const ProseKit = Comp as typeof SvelteComponent<any> as typeof SvelteComponent<ProseKitProps>

package/src/components/prosekit/prosekit.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import type { Editor } from '@prosekit/core'
+import { useProsemirrorAdapterProvider } from '@prosemirror-adapter/svelte'
+import { setEditorContext } from '../../contexts/editor-context'
+import { MarkViewConsumer } from '../mark-view-consumer'
+import { NodeViewConsumer } from '../node-view-consumer'
+
+export let editor: Editor
+
+setEditorContext(editor)
+useProsemirrorAdapterProvider()
+</script>
+
+<slot />
+<NodeViewConsumer />
+<MarkViewConsumer />