@prosekit/vue 0.6.7 → 0.7.0-beta.0

package/dist/prosekit-vue.js

@@ -1,145 +1,125 @@
-import { n as useEditorContext, t as provideEditor } from "./editor-context-BfHHplRP.js";
-import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/vue";
-import { computed, defineComponent, h, onMounted, onUnmounted, shallowRef, toValue, triggerRef, watchPostEffect } from "vue";
+import { n as useEditorContext, t as provideEditor } from "./editor-context.js";
+import { Teleport, computed, defineComponent, h, markRaw, onMounted, onUnmounted, shallowRef, toValue, triggerRef, watchPostEffect } from "vue";
 import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
-
-//#region src/hooks/use-editor-extension.ts
-/**
-* @internal
-*/
-function useEditorExtension(editorRef, extensionRef) {
-	const editorContext = useEditorContext();
-	watchPostEffect((onCleanup) => {
-		const editor = toValue(editorRef) || toValue(editorContext);
-		const extension = toValue(extensionRef);
-		if (!editor) throw new EditorNotFoundError();
-		if (extension) onCleanup(editor.use(extension));
-	});
-}
-
-//#endregion
-//#region src/hooks/use-priority-extension.ts
+import { AbstractVueMarkView, AbstractVueNodeView, buildVueMarkViewCreator, buildVueNodeViewCreator, useVueRenderer } from "@prosemirror-adapter/vue";
+//#region src/extensions/vue-mark-view.ts
+var ProseKitVueMarkView = class extends AbstractVueMarkView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			const render = () => {
+				const props = this.context;
+				return h(Teleport, {
+					key: this.key,
+					to: this.dom
+				}, [h(UserComponent, props)]);
+			};
+			return markRaw(defineComponent({
+				name: "ProsemirrorMarkView",
+				setup: () => {
+					return render;
+				}
+			}));
+		};
+	}
+};
 /**
 * @internal
 */
-function usePriorityExtension(extension, priority) {
-	return computed(() => {
-		const ext = toValue(extension);
-		return ext && priority ? withPriority(ext, priority) : ext;
-	});
-}
-
-//#endregion
-//#region src/hooks/use-extension.ts
-/**
-* Add an extension to the editor.
-*
-* @public
-*/
-function useExtension(extension, options) {
-	useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
-}
-
-//#endregion
-//#region src/extensions/helpers.ts
-function renderNothing() {
-	return null;
-}
-
-//#endregion
-//#region src/extensions/vue-mark-view.ts
-function withMarkViewProps(component) {
-	return defineComponent({
-		name: "MarkViewPropsWrapper",
-		setup: () => {
-			const props = useMarkViewContext();
-			return () => h(component, props);
-		}
+function defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer) {
+	return defineMarkViewFactory({
+		group: "vue",
+		factory: buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)
 	});
 }
 /**
-* @internal
-*/
-const VueMarkViewsConsumer = /* @__PURE__ */ defineComponent({
-	name: "VueMarkViewsConsumer",
-	setup: () => {
-		const markViewFactory = useMarkViewFactory();
-		useExtension(computed(() => {
-			return defineVueMarkViewFactory(markViewFactory);
-		}));
-		return renderNothing;
-	}
-});
-/**
 * Defines a mark view using a Vue component.
 *
 * @public
 */
 function defineVueMarkView(options) {
-	const { name, component, ...userOptions } = options;
 	return defineMarkViewComponent({
 		group: "vue",
-		name,
-		args: {
-			...userOptions,
-			component: withMarkViewProps(component)
-		}
+		name: options.name,
+		args: options
 	});
 }
-function defineVueMarkViewFactory(factory) {
-	return defineMarkViewFactory({
-		group: "vue",
-		factory
-	});
-}
-
 //#endregion
 //#region src/extensions/vue-node-view.ts
-function withNodeViewProps(component) {
-	return defineComponent({
-		name: "NodeViewPropsWrapper",
-		setup: () => {
-			const props = useNodeViewContext();
-			return () => h(component, props);
-		}
-	});
-}
+var ProseKitVueNodeView = class extends AbstractVueNodeView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			const render = () => {
+				const props = this.context;
+				return h(Teleport, {
+					key: this.key,
+					to: this.dom
+				}, [h(UserComponent, props)]);
+			};
+			return markRaw(defineComponent({
+				name: "ProsemirrorNodeView",
+				setup: () => {
+					return render;
+				}
+			}));
+		};
+	}
+};
 /**
 * @internal
 */
-const VueNodeViewsConsumer = /* @__PURE__ */ defineComponent({
-	name: "VueNodeViewsConsumer",
-	setup: () => {
-		const nodeViewFactory = useNodeViewFactory();
-		useExtension(computed(() => {
-			return defineVueNodeViewFactory(nodeViewFactory);
-		}));
-		return renderNothing;
-	}
-});
+function defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer) {
+	return defineNodeViewFactory({
+		group: "vue",
+		factory: buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)
+	});
+}
 /**
 * Defines a node view using a Vue component.
 *
 * @public
 */
 function defineVueNodeView(options) {
-	const { name, component, ...userOptions } = options;
 	return defineNodeViewComponent({
 		group: "vue",
-		name,
-		args: {
-			...userOptions,
-			component: withNodeViewProps(component)
-		}
+		name: options.name,
+		args: options
 	});
 }
-function defineVueNodeViewFactory(factory) {
-	return defineNodeViewFactory({
-		group: "vue",
-		factory
+//#endregion
+//#region src/hooks/use-editor-extension.ts
+/**
+* @internal
+*/
+function useEditorExtension(editorRef, extensionRef) {
+	const editorContext = useEditorContext();
+	watchPostEffect((onCleanup) => {
+		const editor = toValue(editorRef) || toValue(editorContext);
+		const extension = toValue(extensionRef);
+		if (!editor) throw new EditorNotFoundError();
+		if (extension) onCleanup(editor.use(extension));
 	});
 }
-
+//#endregion
+//#region src/components/view-renderer.ts
+/**
+* @internal
+*/
+const ViewRenderer = defineComponent({
+	name: "ViewRenderer",
+	props: { editor: {
+		type: Object,
+		required: true
+	} },
+	setup: (props, { slots }) => {
+		const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer();
+		useEditorExtension(() => props.editor, union([defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer), defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer)]));
+		return () => [slots.default?.(), render()];
+	}
+});
 //#endregion
 //#region src/components/prosekit.ts
 /**
@@ -155,16 +135,30 @@ const ProseKit = defineComponent({
 	} },
 	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?.());
 	}
 });
-
+//#endregion
+//#region src/hooks/use-priority-extension.ts
+/**
+* @internal
+*/
+function usePriorityExtension(extension, priority) {
+	return computed(() => {
+		const ext = toValue(extension);
+		return ext && priority ? withPriority(ext, priority) : ext;
+	});
+}
+//#endregion
+//#region src/hooks/use-extension.ts
+/**
+* Add an extension to the editor.
+*
+* @public
+*/
+function useExtension(extension, options) {
+	useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
+}
 //#endregion
 //#region src/hooks/use-doc-change.ts
 /**
@@ -175,7 +169,6 @@ const ProseKit = defineComponent({
 function useDocChange(handler, options) {
 	useExtension(defineDocChangeHandler((view) => handler(view.state.doc)), options);
 }
-
 //#endregion
 //#region src/hooks/use-editor.ts
 /**
@@ -197,7 +190,6 @@ function useEditor(options) {
 	}
 	return editorRef;
 }
-
 //#endregion
 //#region src/hooks/use-editor-derived-value.ts
 /**
@@ -217,13 +209,11 @@ function useEditorDerivedValue(derive, options) {
 	const editorAccessor = initialEditor ? computed(() => toValue(initialEditor)) : useEditor({ update: true });
 	return computed(() => derive(toValue(editorAccessor)));
 }
-
 //#endregion
 //#region src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
 	useExtension(computed(() => defineKeymap(toValue(keymap))), options);
 }
-
 //#endregion
 //#region src/hooks/use-state-update.ts
 /**
@@ -234,7 +224,7 @@ function useKeymap(keymap, options) {
 function useStateUpdate(handler, options) {
 	useExtension(defineUpdateHandler((view) => handler(view.state)), options);
 }
-
 //#endregion
 export { ProseKit, defineVueMarkView, defineVueNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+
 //# sourceMappingURL=prosekit-vue.js.map

package/dist/prosekit-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-vue.js","names":[],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/helpers.ts","../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editorRef: MaybeRefOrGetter<Editor> | null | undefined,\n  extensionRef: MaybeRefOrGetter<Extension | null> | null,\n): void {\n  const editorContext = useEditorContext()\n\n  watchPostEffect((onCleanup) => {\n    const editor = toValue(editorRef) || toValue(editorContext)\n    const extension = toValue(extensionRef)\n\n    if (!editor) {\n      throw new EditorNotFoundError()\n    }\n    if (extension) {\n      onCleanup(editor.use(extension))\n    }\n  })\n}\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: MaybeRefOrGetter<T | null>,\n  priority: Priority | null | undefined,\n): ComputedRef<T | null> {\n  return computed(() => {\n    const ext = toValue(extension)\n    return ext && priority ? withPriority(ext, priority) : ext\n  })\n}\n","import type { Editor, Extension, Priority } from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor>\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n *\n * @public\n */\nexport function useExtension(\n  /**\n   * The ref to an extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: MaybeRefOrGetter<Extension | null>,\n  options?: UseExtensionOptions,\n): void {\n  useEditorExtension(\n    options?.editor,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","export function renderNothing(): null {\n  return null\n}\n","import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useMarkViewContext,\n  useMarkViewFactory,\n  type MarkViewContext,\n  type MarkViewFactory,\n  type VueMarkViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport { computed, defineComponent, h, type DefineComponent } from 'vue'\n\nimport { useExtension } from '../hooks/use-extension.ts'\n\nimport { renderNothing } from './helpers.ts'\n\n/**\n * @public\n */\nexport interface VueMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n *\n * @public\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nfunction withMarkViewProps(component: VueMarkViewComponent) {\n  return defineComponent({\n    name: 'MarkViewPropsWrapper',\n    setup: () => {\n      const props: Readonly<VueMarkViewProps> = useMarkViewContext()\n      return () => h(component, props)\n    },\n  })\n}\n\n/**\n * @internal\n */\nexport const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n  name: 'VueMarkViewsConsumer',\n  setup: () => {\n    const markViewFactory: MarkViewFactory = useMarkViewFactory()\n    const extension = computed(() => {\n      return defineVueMarkViewFactory(markViewFactory)\n    })\n    useExtension(extension)\n    return renderNothing\n  },\n})\n\n/**\n * Defines a mark view using a Vue component.\n *\n * @public\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: VueMarkViewUserOptions = {\n    ...userOptions,\n    component: withMarkViewProps(component),\n  }\n\n  return defineMarkViewComponent<VueMarkViewUserOptions>({\n    group: 'vue',\n    name,\n    args,\n  })\n}\n\nfunction defineVueMarkViewFactory(\n  factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,\n) {\n  return defineMarkViewFactory<VueMarkViewUserOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useNodeViewContext,\n  useNodeViewFactory,\n  type NodeViewContext,\n  type NodeViewFactory,\n  type VueNodeViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport { computed, defineComponent, h, type DefineComponent } from 'vue'\n\nimport { useExtension } from '../hooks/use-extension.ts'\n\nimport { renderNothing } from './helpers.ts'\n\n/**\n * @public\n */\nexport interface VueNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n *\n * @public\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nfunction withNodeViewProps(component: VueNodeViewComponent) {\n  return defineComponent({\n    name: 'NodeViewPropsWrapper',\n    setup: () => {\n      const props: Readonly<VueNodeViewProps> = useNodeViewContext()\n      return () => h(component, props)\n    },\n  })\n}\n\n/**\n * @internal\n */\nexport const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n  name: 'VueNodeViewsConsumer',\n  setup: () => {\n    const nodeViewFactory: NodeViewFactory = useNodeViewFactory()\n    const extension = computed(() => {\n      return defineVueNodeViewFactory(nodeViewFactory)\n    })\n    useExtension(extension)\n    return renderNothing\n  },\n})\n\n/**\n * Defines a node view using a Vue component.\n *\n * @public\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: VueNodeViewUserOptions = {\n    ...userOptions,\n    component: withNodeViewProps(component),\n  }\n\n  return defineNodeViewComponent<VueNodeViewUserOptions>({\n    group: 'vue',\n    name,\n    args,\n  })\n}\n\nfunction defineVueNodeViewFactory(\n  factory: (options: VueNodeViewUserOptions) => NodeViewConstructor,\n) {\n  return defineNodeViewFactory<VueNodeViewUserOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'\nimport { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { VueMarkViewsConsumer } from '../extensions/vue-mark-view.ts'\nimport { VueNodeViewsConsumer } from '../extensions/vue-node-view.ts'\nimport { provideEditor } from '../injection/editor-context.ts'\n\nexport interface ProseKitProps {\n  editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({\n  name: 'ProseKit',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    provideEditor(props.editor)\n    return () => {\n      return h(ProsemirrorAdapterProvider, null, () => [\n        h(VueNodeViewsConsumer),\n        h(VueMarkViewsConsumer),\n        slots.default?.(),\n      ])\n    }\n  },\n})\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n  useExtension(extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): ShallowRef<Editor<E>> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const editorRef = shallowRef<Editor<E>>(editor)\n\n  if (update) {\n    const forceUpdate = () => triggerRef(editorRef)\n    onMounted(() => {\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      const dispose = editor.use(extension)\n      onUnmounted(dispose)\n    })\n  }\n\n  return editorRef\n}\n","import type { Editor, Extension } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'\n\nimport { useEditor } from './use-editor.ts'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns a shallow ref of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): ShallowRef<Derived> {\n  const initialEditor = options?.editor\n  const editorAccessor: Ref<Editor<E>> = initialEditor\n    ? computed(() => toValue(initialEditor))\n    : useEditor<E>({ update: true })\n\n  return computed(() => derive(toValue(editorAccessor)))\n}\n","import { defineKeymap, type Keymap } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter } from 'vue'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\nexport function useKeymap(\n  keymap: MaybeRefOrGetter<Keymap>,\n  options?: UseExtensionOptions,\n): void {\n  const extension = computed(() => defineKeymap(toValue(keymap)))\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineUpdateHandler((view) => handler(view.state))\n  useExtension(extension, options)\n}\n"],"mappings":"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"}
+{"version":3,"file":"prosekit-vue.js","names":[],"sources":["../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractVueMarkView,\n  buildVueMarkViewCreator,\n  type MarkViewContext,\n  type VueRendererComponent,\n  type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\n/**\n * @public\n */\nexport interface VueMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n *\n * @public\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nclass ProseKitVueMarkView extends AbstractVueMarkView<VueMarkViewComponent> {\n  render = (): VueRendererComponent => {\n    const UserComponent = this.component\n    const render = () => {\n      const props = this.context\n      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n    }\n    const RendererComponent: VueRendererComponent = defineComponent({\n      name: 'ProsemirrorMarkView',\n      setup: () => {\n        return render\n      },\n    })\n    return markRaw(RendererComponent)\n  }\n}\n\n/**\n * @internal\n */\nexport function defineVueMarkViewFactory(\n  renderVueRenderer: VueRendererResult['renderVueRenderer'],\n  removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n  const factory = buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)\n  return defineMarkViewFactory<VueMarkViewOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a Vue component.\n *\n * @public\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n  return defineMarkViewComponent<VueMarkViewOptions>({\n    group: 'vue',\n    name: options.name,\n    args: options,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractVueNodeView,\n  buildVueNodeViewCreator,\n  type NodeViewContext,\n  type VueRendererComponent,\n  type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\n/**\n * @public\n */\nexport interface VueNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n *\n * @public\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nclass ProseKitVueNodeView extends AbstractVueNodeView<VueNodeViewComponent> {\n  render = (): VueRendererComponent => {\n    const UserComponent = this.component\n    const render = () => {\n      const props = this.context\n      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n    }\n    const RendererComponent: VueRendererComponent = defineComponent({\n      name: 'ProsemirrorNodeView',\n      setup: () => {\n        return render\n      },\n    })\n    return markRaw(RendererComponent)\n  }\n}\n\n/**\n * @internal\n */\nexport function defineVueNodeViewFactory(\n  renderVueRenderer: VueRendererResult['renderVueRenderer'],\n  removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n  const factory = buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)\n  return defineNodeViewFactory<VueNodeViewOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a Vue component.\n *\n * @public\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n  return defineNodeViewComponent<VueNodeViewOptions>({\n    group: 'vue',\n    name: options.name,\n    args: options,\n  })\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editorRef: MaybeRefOrGetter<Editor> | null | undefined,\n  extensionRef: MaybeRefOrGetter<Extension | null> | null,\n): void {\n  const editorContext = useEditorContext()\n\n  watchPostEffect((onCleanup) => {\n    const editor = toValue(editorRef) || toValue(editorContext)\n    const extension = toValue(extensionRef)\n\n    if (!editor) {\n      throw new EditorNotFoundError()\n    }\n    if (extension) {\n      onCleanup(editor.use(extension))\n    }\n  })\n}\n","import { union, type Editor } from '@prosekit/core'\nimport { useVueRenderer } from '@prosemirror-adapter/vue'\nimport { defineComponent, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { defineVueMarkViewFactory } from '../extensions/vue-mark-view.ts'\nimport { defineVueNodeViewFactory } from '../extensions/vue-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\n/**\n * @internal\n */\ninterface ViewRendererProps {\n  editor: Editor\n}\n\n/**\n * @internal\n */\nexport const ViewRenderer: DefineSetupFnComponent<ViewRendererProps> = defineComponent<ViewRendererProps>({\n  name: 'ViewRenderer',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer()\n\n    const extension = union([\n      defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer),\n      defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer),\n    ])\n\n    useEditorExtension(() => props.editor, extension)\n\n    return () => [slots.default?.(), render()]\n  },\n})\n","import type { Editor } from '@prosekit/core'\nimport { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { provideEditor } from '../injection/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport interface ProseKitProps {\n  editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({\n  name: 'ProseKit',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    provideEditor(props.editor)\n    return () =>\n      h(\n        ViewRenderer,\n        { editor: props.editor },\n        () => slots.default?.(),\n      )\n  },\n})\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: MaybeRefOrGetter<T | null>,\n  priority: Priority | null | undefined,\n): ComputedRef<T | null> {\n  return computed(() => {\n    const ext = toValue(extension)\n    return ext && priority ? withPriority(ext, priority) : ext\n  })\n}\n","import type { Editor, Extension, Priority } from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor>\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n *\n * @public\n */\nexport function useExtension(\n  /**\n   * The ref to an extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: MaybeRefOrGetter<Extension | null>,\n  options?: UseExtensionOptions,\n): void {\n  useEditorExtension(\n    options?.editor,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n  useExtension(extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): ShallowRef<Editor<E>> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const editorRef = shallowRef<Editor<E>>(editor)\n\n  if (update) {\n    const forceUpdate = () => triggerRef(editorRef)\n    onMounted(() => {\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      const dispose = editor.use(extension)\n      onUnmounted(dispose)\n    })\n  }\n\n  return editorRef\n}\n","import type { Editor, Extension } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'\n\nimport { useEditor } from './use-editor.ts'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns a shallow ref of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): ShallowRef<Derived> {\n  const initialEditor = options?.editor\n  const editorAccessor: Ref<Editor<E>> = initialEditor\n    ? computed(() => toValue(initialEditor))\n    : useEditor<E>({ update: true })\n\n  return computed(() => derive(toValue(editorAccessor)))\n}\n","import { defineKeymap, type Keymap } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter } from 'vue'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\nexport function useKeymap(\n  keymap: MaybeRefOrGetter<Keymap>,\n  options?: UseExtensionOptions,\n): void {\n  const extension = computed(() => defineKeymap(toValue(keymap)))\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineUpdateHandler((view) => handler(view.state))\n  useExtension(extension, options)\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.6.7",
+  "version": "0.7.0-beta.0",
   "private": false,
   "description": "Vue components and utilities for ProseKit",
   "author": {
@@ -68,11 +68,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.4.6",
-    "@prosemirror-adapter/vue": "^0.4.6",
-    "@prosekit/core": "^0.10.0",
+    "@prosemirror-adapter/core": "^0.5.2",
+    "@prosemirror-adapter/vue": "^0.5.2",
+    "@prosekit/core": "^0.12.0-beta.0",
     "@prosekit/pm": "^0.1.15",
-    "@prosekit/web": "^0.7.12"
+    "@prosekit/web": "^0.8.0-beta.0"
   },
   "peerDependencies": {
     "vue": ">= 3.0.0"
@@ -83,15 +83,15 @@
     }
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue": "^6.0.5",
     "@vue/test-utils": "^2.4.6",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.4",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.0-beta.4",
-    "vue": "^3.5.28",
-    "@prosekit/config-tsdown": "0.0.0",
+    "vitest": "^4.1.1",
+    "vue": "^3.5.30",
     "@prosekit/config-ts": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0"
   },
   "publishConfig": {
     "dev": {}

package/src/components/prosekit.ts

@@ -1,11 +1,10 @@
 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.ts'
-import { VueNodeViewsConsumer } from '../extensions/vue-node-view.ts'
 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/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,18 +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.ts'
-
-import { renderNothing } from './helpers.ts'
+import { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'
 
 /**
  * @public
@@ -36,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 renderNothing
-  },
-})
+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.
@@ -67,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>({
+  return defineMarkViewComponent<VueMarkViewOptions>({
     group: 'vue',
-    name,
-    args,
-  })
-}
-
-function defineVueMarkViewFactory(
-  factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,
-) {
-  return defineMarkViewFactory<VueMarkViewUserOptions>({
-    group: 'vue',
-    factory,
+    name: options.name,
+    args: options,
   })
 }