@prosekit/vue 0.6.6 → 0.6.8

package/src/components/prosekit.ts

@@ -1,10 +1,9 @@
 import type { Editor } from '@prosekit/core'
-import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'
 import { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'
 
-import { VueMarkViewsConsumer } from '../extensions/vue-mark-view'
-import { VueNodeViewsConsumer } from '../extensions/vue-node-view'
-import { provideEditor } from '../injection/editor-context'
+import { provideEditor } from '../injection/editor-context.ts'
+
+import { ViewRenderer } from './view-renderer.ts'
 
 export interface ProseKitProps {
   editor: Editor
@@ -20,12 +19,11 @@ export const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<P
   props: { editor: { type: Object as PropType<Editor>, required: true } },
   setup: (props, { slots }) => {
     provideEditor(props.editor)
-    return () => {
-      return h(ProsemirrorAdapterProvider, null, () => [
-        h(VueNodeViewsConsumer),
-        h(VueMarkViewsConsumer),
-        slots.default?.(),
-      ])
-    }
+    return () =>
+      h(
+        ViewRenderer,
+        { editor: props.editor },
+        () => slots.default?.(),
+      )
   },
 })

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

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

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/resizable'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link ResizableHandle} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/resizable'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link ResizableRoot} component.

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

@@ -1,17 +1,17 @@
-export { TableHandleColumnRoot, type TableHandleColumnRootProps, type TableHandleColumnRootEmits } from './table-handle-column-root.gen'
+export { TableHandleColumnRoot, type TableHandleColumnRootProps, type TableHandleColumnRootEmits } from './table-handle-column-root.gen.ts'
 
-export { TableHandleColumnTrigger, type TableHandleColumnTriggerProps, type TableHandleColumnTriggerEmits } from './table-handle-column-trigger.gen'
+export { TableHandleColumnTrigger, type TableHandleColumnTriggerProps, type TableHandleColumnTriggerEmits } from './table-handle-column-trigger.gen.ts'
 
-export { TableHandleDragPreview, type TableHandleDragPreviewProps, type TableHandleDragPreviewEmits } from './table-handle-drag-preview.gen'
+export { TableHandleDragPreview, type TableHandleDragPreviewProps, type TableHandleDragPreviewEmits } from './table-handle-drag-preview.gen.ts'
 
-export { TableHandleDropIndicator, type TableHandleDropIndicatorProps, type TableHandleDropIndicatorEmits } from './table-handle-drop-indicator.gen'
+export { TableHandleDropIndicator, type TableHandleDropIndicatorProps, type TableHandleDropIndicatorEmits } from './table-handle-drop-indicator.gen.ts'
 
-export { TableHandlePopoverContent, type TableHandlePopoverContentProps, type TableHandlePopoverContentEmits } from './table-handle-popover-content.gen'
+export { TableHandlePopoverContent, type TableHandlePopoverContentProps, type TableHandlePopoverContentEmits } from './table-handle-popover-content.gen.ts'
 
-export { TableHandlePopoverItem, type TableHandlePopoverItemProps, type TableHandlePopoverItemEmits } from './table-handle-popover-item.gen'
+export { TableHandlePopoverItem, type TableHandlePopoverItemProps, type TableHandlePopoverItemEmits } from './table-handle-popover-item.gen.ts'
 
-export { TableHandleRoot, type TableHandleRootProps, type TableHandleRootEmits } from './table-handle-root.gen'
+export { TableHandleRoot, type TableHandleRootProps, type TableHandleRootEmits } from './table-handle-root.gen.ts'
 
-export { TableHandleRowRoot, type TableHandleRowRootProps, type TableHandleRowRootEmits } from './table-handle-row-root.gen'
+export { TableHandleRowRoot, type TableHandleRowRootProps, type TableHandleRowRootEmits } from './table-handle-row-root.gen.ts'
 
-export { TableHandleRowTrigger, type TableHandleRowTriggerProps, type TableHandleRowTriggerEmits } from './table-handle-row-trigger.gen'
+export { TableHandleRowTrigger, type TableHandleRowTriggerProps, type TableHandleRowTriggerEmits } from './table-handle-row-trigger.gen.ts'

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleColumnRoot} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleColumnTrigger} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleDragPreview} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleDropIndicator} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandlePopoverContent} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandlePopoverItem} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleRoot} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleRowRoot} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/table-handle'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TableHandleRowTrigger} component.

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

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

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/tooltip'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TooltipContent} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/tooltip'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TooltipRoot} component.

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

@@ -6,8 +6,8 @@ import {
 } from '@prosekit/web/tooltip'
 import type { DefineSetupFnComponent, HTMLAttributes } from 'vue'
 
-import { createComponent } from '../create-component'
-import type { CreateEmits } from '../create-emits'
+import { createComponent } from '../create-component.ts'
+import type { CreateEmits } from '../create-emits.ts'
 
 /**
  * Props for the {@link TooltipTrigger} component.

package/src/components/view-renderer.ts

@@ -0,0 +1,34 @@
+import { union, type Editor } from '@prosekit/core'
+import { useVueRenderer } from '@prosemirror-adapter/vue'
+import { defineComponent, type DefineSetupFnComponent, type PropType } from 'vue'
+
+import { defineVueMarkViewFactory } from '../extensions/vue-mark-view.ts'
+import { defineVueNodeViewFactory } from '../extensions/vue-node-view.ts'
+import { useEditorExtension } from '../hooks/use-editor-extension.ts'
+
+/**
+ * @internal
+ */
+interface ViewRendererProps {
+  editor: Editor
+}
+
+/**
+ * @internal
+ */
+export const ViewRenderer: DefineSetupFnComponent<ViewRendererProps> = defineComponent<ViewRendererProps>({
+  name: 'ViewRenderer',
+  props: { editor: { type: Object as PropType<Editor>, required: true } },
+  setup: (props, { slots }) => {
+    const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer()
+
+    const extension = union([
+      defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer),
+      defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer),
+    ])
+
+    useEditorExtension(() => props.editor, extension)
+
+    return () => [slots.default?.(), render()]
+  },
+})

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

@@ -1,16 +1,13 @@
 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,
+  AbstractVueMarkView,
+  buildVueMarkViewCreator,
   type MarkViewContext,
-  type MarkViewFactory,
-  type VueMarkViewUserOptions,
+  type VueRendererComponent,
+  type VueRendererResult,
 } from '@prosemirror-adapter/vue'
-import { computed, defineComponent, h, type DefineComponent } from 'vue'
-
-import { useExtension } from '../hooks/use-extension'
+import { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'
 
 /**
  * @public
@@ -34,30 +31,36 @@ export interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewC
   name: string
 }
 
-function withMarkViewProps(component: VueMarkViewComponent) {
-  return defineComponent({
-    name: 'MarkViewPropsWrapper',
-    setup: () => {
-      const props: Readonly<VueMarkViewProps> = useMarkViewContext()
-      return () => h(component, props)
-    },
-  })
+class ProseKitVueMarkView extends AbstractVueMarkView<VueMarkViewComponent> {
+  render = (): VueRendererComponent => {
+    const UserComponent = this.component
+    const render = () => {
+      const props = this.context
+      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])
+    }
+    const RendererComponent: VueRendererComponent = defineComponent({
+      name: 'ProsemirrorMarkView',
+      setup: () => {
+        return render
+      },
+    })
+    return markRaw(RendererComponent)
+  }
 }
 
 /**
  * @internal
  */
-export const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({
-  name: 'VueMarkViewsConsumer',
-  setup: () => {
-    const markViewFactory: MarkViewFactory = useMarkViewFactory()
-    const extension = computed(() => {
-      return defineVueMarkViewFactory(markViewFactory)
-    })
-    useExtension(extension)
-    return (): null => null
-  },
-})
+export function defineVueMarkViewFactory(
+  renderVueRenderer: VueRendererResult['renderVueRenderer'],
+  removeVueRenderer: VueRendererResult['removeVueRenderer'],
+): Extension {
+  const factory = buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)
+  return defineMarkViewFactory<VueMarkViewOptions>({
+    group: 'vue',
+    factory,
+  })
+}
 
 /**
  * Defines a mark view using a Vue component.
@@ -65,25 +68,9 @@ export const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineCompo
  * @public
  */
 export function defineVueMarkView(options: VueMarkViewOptions): Extension {
-  const { name, component, ...userOptions } = options
-
-  const args: VueMarkViewUserOptions = {
-    ...userOptions,
-    component: withMarkViewProps(component),
-  }
-
-  return defineMarkViewComponent<VueMarkViewUserOptions>({
-    group: 'vue',
-    name,
-    args,
-  })
-}
-
-function defineVueMarkViewFactory(
-  factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,
-) {
-  return defineMarkViewFactory<VueMarkViewUserOptions>({
+  return defineMarkViewComponent<VueMarkViewOptions>({
     group: 'vue',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

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

@@ -1,16 +1,13 @@
 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,
+  AbstractVueNodeView,
+  buildVueNodeViewCreator,
   type NodeViewContext,
-  type NodeViewFactory,
-  type VueNodeViewUserOptions,
+  type VueRendererComponent,
+  type VueRendererResult,
 } from '@prosemirror-adapter/vue'
-import { computed, defineComponent, h, type DefineComponent } from 'vue'
-
-import { useExtension } from '../hooks/use-extension'
+import { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'
 
 /**
  * @public
@@ -34,30 +31,36 @@ export interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewC
   name: string
 }
 
-function withNodeViewProps(component: VueNodeViewComponent) {
-  return defineComponent({
-    name: 'NodeViewPropsWrapper',
-    setup: () => {
-      const props: Readonly<VueNodeViewProps> = useNodeViewContext()
-      return () => h(component, props)
-    },
-  })
+class ProseKitVueNodeView extends AbstractVueNodeView<VueNodeViewComponent> {
+  render = (): VueRendererComponent => {
+    const UserComponent = this.component
+    const render = () => {
+      const props = this.context
+      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])
+    }
+    const RendererComponent: VueRendererComponent = defineComponent({
+      name: 'ProsemirrorNodeView',
+      setup: () => {
+        return render
+      },
+    })
+    return markRaw(RendererComponent)
+  }
 }
 
 /**
  * @internal
  */
-export const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({
-  name: 'VueNodeViewsConsumer',
-  setup: () => {
-    const nodeViewFactory: NodeViewFactory = useNodeViewFactory()
-    const extension = computed(() => {
-      return defineVueNodeViewFactory(nodeViewFactory)
-    })
-    useExtension(extension)
-    return (): null => null
-  },
-})
+export function defineVueNodeViewFactory(
+  renderVueRenderer: VueRendererResult['renderVueRenderer'],
+  removeVueRenderer: VueRendererResult['removeVueRenderer'],
+): Extension {
+  const factory = buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)
+  return defineNodeViewFactory<VueNodeViewOptions>({
+    group: 'vue',
+    factory,
+  })
+}
 
 /**
  * Defines a node view using a Vue component.
@@ -65,25 +68,9 @@ export const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineCompo
  * @public
  */
 export function defineVueNodeView(options: VueNodeViewOptions): Extension {
-  const { name, component, ...userOptions } = options
-
-  const args: VueNodeViewUserOptions = {
-    ...userOptions,
-    component: withNodeViewProps(component),
-  }
-
-  return defineNodeViewComponent<VueNodeViewUserOptions>({
-    group: 'vue',
-    name,
-    args,
-  })
-}
-
-function defineVueNodeViewFactory(
-  factory: (options: VueNodeViewUserOptions) => NodeViewConstructor,
-) {
-  return defineNodeViewFactory<VueNodeViewUserOptions>({
+  return defineNodeViewComponent<VueNodeViewOptions>({
     group: 'vue',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

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

@@ -1,7 +1,7 @@
 import { defineDocChangeHandler } from '@prosekit/core'
 import type { ProseMirrorNode } from '@prosekit/pm/model'
 
-import { useExtension, type UseExtensionOptions } from './use-extension'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 /**
  * Calls the given handler whenever the editor document changes.

package/src/hooks/use-editor-derived-value.ts

@@ -1,7 +1,7 @@
 import type { Editor, Extension } from '@prosekit/core'
 import { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'
 
-import { useEditor } from './use-editor'
+import { useEditor } from './use-editor.ts'
 
 export interface UseEditorDerivedOptions<E extends Extension = any> {
   /**

package/src/hooks/use-editor-extension.ts

@@ -1,7 +1,7 @@
 import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'
 import { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'
 
-import { useEditorContext } from '../injection/editor-context'
+import { useEditorContext } from '../injection/editor-context.ts'
 
 /**
  * @internal

package/src/hooks/use-editor.ts

@@ -1,7 +1,7 @@
 import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'
 import { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'
 
-import { useEditorContext } from '../injection/editor-context'
+import { useEditorContext } from '../injection/editor-context.ts'
 
 /**
  * Retrieves the editor instance from the nearest ProseKit component.
@@ -29,8 +29,8 @@ export function useEditor<E extends Extension = any>(options?: {
   const editorRef = shallowRef<Editor<E>>(editor)
 
   if (update) {
+    const forceUpdate = () => triggerRef(editorRef)
     onMounted(() => {
-      const forceUpdate = () => triggerRef(editorRef)
       const extension = union(
         defineMountHandler(forceUpdate),
         defineUpdateHandler(forceUpdate),

package/src/hooks/use-extension.spec.ts

@@ -4,7 +4,7 @@ import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import { defineComponent } from 'vue'
 
-import { useExtension } from './use-extension'
+import { useExtension } from './use-extension.ts'
 
 function defineText() {
   return defineNodeSpec({ name: 'text', topNode: true })

package/src/hooks/use-extension.ts

@@ -1,8 +1,8 @@
 import type { Editor, Extension, Priority } from '@prosekit/core'
 import type { MaybeRefOrGetter } from 'vue'
 
-import { useEditorExtension } from './use-editor-extension'
-import { usePriorityExtension } from './use-priority-extension'
+import { useEditorExtension } from './use-editor-extension.ts'
+import { usePriorityExtension } from './use-priority-extension.ts'
 
 export interface UseExtensionOptions {
   /**

package/src/hooks/use-keymap.ts

@@ -1,7 +1,7 @@
 import { defineKeymap, type Keymap } from '@prosekit/core'
 import { computed, toValue, type MaybeRefOrGetter } from 'vue'
 
-import { useExtension, type UseExtensionOptions } from './use-extension'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 export function useKeymap(
   keymap: MaybeRefOrGetter<Keymap>,

package/src/hooks/use-state-update.ts

@@ -1,7 +1,7 @@
 import { defineUpdateHandler } from '@prosekit/core'
 import type { EditorState } from '@prosekit/pm/state'
 
-import { useExtension, type UseExtensionOptions } from './use-extension'
+import { useExtension, type UseExtensionOptions } from './use-extension.ts'
 
 /**
  * Calls the given handler whenever the editor state changes.

package/src/index.ts

@@ -1,9 +1,9 @@
-export { ProseKit, type ProseKitProps } from './components/prosekit'
-export { defineVueMarkView, type VueMarkViewComponent, type VueMarkViewOptions, type VueMarkViewProps } from './extensions/vue-mark-view'
-export { defineVueNodeView, type VueNodeViewComponent, type VueNodeViewOptions, type VueNodeViewProps } from './extensions/vue-node-view'
-export { useDocChange } from './hooks/use-doc-change'
-export { useEditor } from './hooks/use-editor'
-export { useEditorDerivedValue, type UseEditorDerivedOptions } from './hooks/use-editor-derived-value'
-export { useExtension, type UseExtensionOptions } from './hooks/use-extension'
-export { useKeymap } from './hooks/use-keymap'
-export { useStateUpdate } from './hooks/use-state-update'
+export { ProseKit, type ProseKitProps } from './components/prosekit.ts'
+export { defineVueMarkView, type VueMarkViewComponent, type VueMarkViewOptions, type VueMarkViewProps } from './extensions/vue-mark-view.ts'
+export { defineVueNodeView, type VueNodeViewComponent, type VueNodeViewOptions, type VueNodeViewProps } from './extensions/vue-node-view.ts'
+export { useDocChange } from './hooks/use-doc-change.ts'
+export { useEditorDerivedValue, type UseEditorDerivedOptions } from './hooks/use-editor-derived-value.ts'
+export { useEditor } from './hooks/use-editor.ts'
+export { useExtension, type UseExtensionOptions } from './hooks/use-extension.ts'
+export { useKeymap } from './hooks/use-keymap.ts'
+export { useStateUpdate } from './hooks/use-state-update.ts'

package/dist/create-component-BREKWlWW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-component-BREKWlWW.js","names":[],"sources":["../src/components/create-component.ts"],"sourcesContent":["import { defineComponent, h, onMounted, ref, watchEffect, type DefineSetupFnComponent, type EmitsOptions, type HTMLAttributes } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\nexport function createComponent<\n  Props extends { [PropName in keyof Props]: unknown },\n  Emits extends EmitsOptions,\n>(\n  tagName: string,\n  displayName: string,\n  propNames: string[],\n  eventNames: string[],\n): DefineSetupFnComponent<Partial<Props> & HTMLAttributes, Emits> {\n  const hasEditor = propNames.includes('editor')\n\n  const Component = defineComponent<any, any>(\n    (props: Record<string, unknown>, { slots, emit }) => {\n      const editor = useEditorContext()\n\n      const mounted = ref(false)\n\n      onMounted(() => {\n        mounted.value = true\n      })\n\n      const elementRef = ref<HTMLElement | null>(null)\n\n      watchEffect((onCleanup) => {\n        const element = elementRef.value\n        if (!element) return\n\n        const eventHandlers: Record<string, (event: Event) => void> = {}\n        for (const eventName of eventNames) {\n          const extractDetail = eventName.endsWith('Change')\n          eventHandlers[eventName] = (event: Event) => {\n            emit(\n              eventName,\n              extractDetail ? (event as CustomEvent).detail : event,\n            )\n          }\n        }\n\n        for (const [eventName, handler] of Object.entries(eventHandlers)) {\n          element.addEventListener(eventName, handler)\n        }\n\n        onCleanup(() => {\n          for (const [eventName, handler] of Object.entries(eventHandlers)) {\n            element.removeEventListener(eventName, handler)\n          }\n        })\n      })\n\n      return () => {\n        const properties: Record<string, unknown> = {}\n\n        for (const [key, value] of Object.entries(props)) {\n          if (value !== undefined && !key.startsWith('.')) {\n            properties[propNames.includes(key) ? '.' + key : key] = value\n          }\n        }\n\n        // Try to add the editor prop if it's missing.\n        if (hasEditor && editor && !properties['editor']) {\n          properties.editor = editor\n        }\n\n        // Ensure web components work after SSR hydration.\n        properties.key = mounted.value ? 1 : 0\n\n        properties.ref = elementRef\n\n        return h(tagName, properties, slots.default?.())\n      }\n    },\n    {\n      name: displayName,\n      props: propNames,\n      emits: eventNames,\n    },\n  )\n\n  return Component\n}\n"],"mappings":";;;;AAIA,SAAgB,gBAId,SACA,aACA,WACA,YACgE;CAChE,MAAM,YAAY,UAAU,SAAS,SAAS;AAqE9C,QAnEkB,iBACf,OAAgC,EAAE,OAAO,WAAW;EACnD,MAAM,SAAS,kBAAkB;EAEjC,MAAM,UAAU,IAAI,MAAM;AAE1B,kBAAgB;AACd,WAAQ,QAAQ;IAChB;EAEF,MAAM,aAAa,IAAwB,KAAK;AAEhD,eAAa,cAAc;GACzB,MAAM,UAAU,WAAW;AAC3B,OAAI,CAAC,QAAS;GAEd,MAAM,gBAAwD,EAAE;AAChE,QAAK,MAAM,aAAa,YAAY;IAClC,MAAM,gBAAgB,UAAU,SAAS,SAAS;AAClD,kBAAc,cAAc,UAAiB;AAC3C,UACE,WACA,gBAAiB,MAAsB,SAAS,MACjD;;;AAIL,QAAK,MAAM,CAAC,WAAW,YAAY,OAAO,QAAQ,cAAc,CAC9D,SAAQ,iBAAiB,WAAW,QAAQ;AAG9C,mBAAgB;AACd,SAAK,MAAM,CAAC,WAAW,YAAY,OAAO,QAAQ,cAAc,CAC9D,SAAQ,oBAAoB,WAAW,QAAQ;KAEjD;IACF;AAEF,eAAa;GACX,MAAM,aAAsC,EAAE;AAE9C,QAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC9C,KAAI,UAAU,UAAa,CAAC,IAAI,WAAW,IAAI,CAC7C,YAAW,UAAU,SAAS,IAAI,GAAG,MAAM,MAAM,OAAO;AAK5D,OAAI,aAAa,UAAU,CAAC,WAAW,UACrC,YAAW,SAAS;AAItB,cAAW,MAAM,QAAQ,QAAQ,IAAI;AAErC,cAAW,MAAM;AAEjB,UAAO,EAAE,SAAS,YAAY,MAAM,WAAW,CAAC;;IAGpD;EACE,MAAM;EACN,OAAO;EACP,OAAO;EACR,CACF"}

package/dist/create-emits-B8725q2G.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-emits-B8725q2G.d.ts","names":[],"sources":["../src/components/create-emits.ts"],"mappings":";KAAY,WAAA,sCAC2B,MAAA,GAAS,WAAA,4BAE1B,MAAA,IAClB,KAAA,EAAO,SAAA,6BAAsC,MAAA,CAAO,SAAA,cAChD,MAAA,CAAO,SAAA"}

package/dist/editor-context-BfHHplRP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor-context-BfHHplRP.js","names":[],"sources":["../src/injection/editor-context.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\nimport { inject, provide, type InjectionKey } from 'vue'\n\nconst symbol = Symbol('prosekit-vue-editor-context') as InjectionKey<Editor>\n\n/**\n * @internal\n */\nexport function provideEditor(editor: Editor): void {\n  provide(symbol, editor)\n}\n\n/**\n * @internal\n */\nexport function useEditorContext<E extends Extension>(): Editor<E> | undefined {\n  return inject(symbol, undefined)\n}\n"],"mappings":";;;AAGA,MAAM,SAAS,OAAO,8BAA8B;;;;AAKpD,SAAgB,cAAc,QAAsB;AAClD,SAAQ,QAAQ,OAAO;;;;;AAMzB,SAAgB,mBAA+D;AAC7E,QAAO,OAAO,QAAQ,OAAU"}