@prosekit/svelte 0.8.9 → 0.8.10

package/dist/build/components/prosekit/prosekit.svelte

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

package/dist/build/components/view-renderer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ViewRenderer } from './view-renderer.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/build/components/view-renderer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/view-renderer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wBAAwB,CAAA"}

package/dist/build/components/view-renderer/index.js

@@ -0,0 +1 @@
+export { default as ViewRenderer } from './view-renderer.svelte';

package/dist/build/components/view-renderer/view-renderer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { union, type Editor } from '@prosekit/core'
+import { useSvelteRenderer } from '@prosemirror-adapter/svelte'
+import { getAllContexts } from 'svelte'
+import { readable } from 'svelte/store'
+import { defineSvelteMarkViewFactory } from '../../extensions/svelte-mark-view.js'
+import { defineSvelteNodeViewFactory } from '../../extensions/svelte-node-view.js'
+import { useEditorExtension } from '../../hooks/use-editor-extension.js'
+
+export let editor: Editor
+
+const { renderSvelteRenderer, removeSvelteRenderer } = useSvelteRenderer()
+const context = getAllContexts()
+
+const extension = union([
+  defineSvelteMarkViewFactory(renderSvelteRenderer, removeSvelteRenderer, context),
+  defineSvelteNodeViewFactory(renderSvelteRenderer, removeSvelteRenderer, context),
+])
+
+useEditorExtension(editor, readable(extension))
+</script>
+
+<slot />

package/dist/build/extensions/svelte-mark-view.d.ts

@@ -1,8 +1,7 @@
 import { type Extension } from '@prosekit/core';
-import type { MarkViewConstructor } from '@prosekit/pm/view';
 import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core';
-import type { MarkViewContext, SvelteMarkViewUserOptions } from '@prosemirror-adapter/svelte';
-import type { Component } from 'svelte';
+import { type MarkViewContext, type SvelteRendererResult } from '@prosemirror-adapter/svelte';
+import { type Component } from 'svelte';
 /**
  * @public
  */
@@ -23,11 +22,14 @@ export interface SvelteMarkViewOptions extends CoreMarkViewUserOptions<SvelteMar
      */
     name: string;
 }
+/**
+ * @internal
+ */
+export declare function defineSvelteMarkViewFactory(renderSvelteRenderer: SvelteRendererResult['renderSvelteRenderer'], removeSvelteRenderer: SvelteRendererResult['removeSvelteRenderer'], context: Map<any, any>): Extension;
 /**
  * Defines a mark view using a Svelte component.
  *
  * @public
  */
 export declare function defineSvelteMarkView(options: SvelteMarkViewOptions): Extension;
-export declare function defineSvelteMarkViewFactory(factory: (options: SvelteMarkViewUserOptions) => MarkViewConstructor): Extension;
 //# sourceMappingURL=svelte-mark-view.d.ts.map

package/dist/build/extensions/svelte-mark-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svelte-mark-view.d.ts","sourceRoot":"","sources":["../../../src/extensions/svelte-mark-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC7G,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC7F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIvC;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAEpE;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB,CAAC,uBAAuB,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAID;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,qBAAqB,GAC7B,SAAS,CAkBX;AAiBD,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,mBAAmB,GACnE,SAAS,CAKX"}
+{"version":3,"file":"svelte-mark-view.d.ts","sourceRoot":"","sources":["../../../src/extensions/svelte-mark-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC7G,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElE;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAEpE;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB,CAAC,uBAAuB,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAkBD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,oBAAoB,EAAE,oBAAoB,CAAC,sBAAsB,CAAC,EAClE,oBAAoB,EAAE,oBAAoB,CAAC,sBAAsB,CAAC,EAClE,OAAO,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GACrB,SAAS,CAMX;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,qBAAqB,GAC7B,SAAS,CAWX"}

package/dist/build/extensions/svelte-mark-view.js

@@ -1,6 +1,33 @@
 import { defineMarkViewComponent, defineMarkViewFactory, definePlugin } from '@prosekit/core';
-import { MarkViewWrapper } from "../components/mark-view-wrapper/index.js";
+import { AbstractSvelteMarkView, buildSvelteMarkViewCreator, } from '@prosemirror-adapter/svelte';
+import { flushSync, mount, unmount } from 'svelte';
 const isServer = typeof window === 'undefined';
+class ProseKitSvelteMarkView extends AbstractSvelteMarkView {
+    constructor() {
+        super(...arguments);
+        this.render = (options) => {
+            const UserComponent = this.component;
+            const props = this.context;
+            const component = mount(UserComponent, {
+                target: this.dom,
+                context: options.context,
+                props,
+            });
+            flushSync();
+            return () => unmount(component);
+        };
+    }
+}
+/**
+ * @internal
+ */
+export function defineSvelteMarkViewFactory(renderSvelteRenderer, removeSvelteRenderer, context) {
+    const factory = buildSvelteMarkViewCreator(renderSvelteRenderer, removeSvelteRenderer, ProseKitSvelteMarkView, context);
+    return defineMarkViewFactory({
+        group: 'svelte',
+        factory,
+    });
+}
 /**
  * Defines a mark view using a Svelte component.
  *
@@ -11,30 +38,9 @@ export function defineSvelteMarkView(options) {
     if (isServer) {
         return definePlugin([]);
     }
-    const { name, component, ...userOptions } = options;
-    const args = {
-        ...userOptions,
-        component: wrapComponent(component),
-    };
     return defineMarkViewComponent({
         group: 'svelte',
-        name,
-        args,
-    });
-}
-function wrapComponent(component) {
-    // `MarkViewWrapper` is an object during SSR
-    if (!MarkViewWrapper || typeof MarkViewWrapper !== 'function') {
-        return component;
-    }
-    const MarkViewPropsWrapper = (internals, props) => {
-        return MarkViewWrapper(internals, { ...props, component });
-    };
-    return MarkViewPropsWrapper;
-}
-export function defineSvelteMarkViewFactory(factory) {
-    return defineMarkViewFactory({
-        group: 'svelte',
-        factory,
+        name: options.name,
+        args: options,
     });
 }

package/dist/build/extensions/svelte-node-view.d.ts

@@ -1,8 +1,7 @@
 import { type Extension } from '@prosekit/core';
-import type { NodeViewConstructor } from '@prosekit/pm/view';
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
-import type { NodeViewContext, SvelteNodeViewUserOptions } from '@prosemirror-adapter/svelte';
-import type { Component } from 'svelte';
+import { type NodeViewContext, type SvelteRendererResult } from '@prosemirror-adapter/svelte';
+import { type Component } from 'svelte';
 /**
  * @public
  */
@@ -23,11 +22,14 @@ export interface SvelteNodeViewOptions extends CoreNodeViewUserOptions<SvelteNod
      */
     name: string;
 }
+/**
+ * @internal
+ */
+export declare function defineSvelteNodeViewFactory(renderSvelteRenderer: SvelteRendererResult['renderSvelteRenderer'], removeSvelteRenderer: SvelteRendererResult['removeSvelteRenderer'], context: Map<any, any>): Extension;
 /**
  * Defines a node view using a Svelte component.
  *
  * @public
  */
 export declare function defineSvelteNodeView(options: SvelteNodeViewOptions): Extension;
-export declare function defineSvelteNodeViewFactory(factory: (options: SvelteNodeViewUserOptions) => NodeViewConstructor): Extension;
 //# sourceMappingURL=svelte-node-view.d.ts.map

package/dist/build/extensions/svelte-node-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"svelte-node-view.d.ts","sourceRoot":"","sources":["../../../src/extensions/svelte-node-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC7G,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA;AAC7F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIvC;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAEpE;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB,CAAC,uBAAuB,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAID;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,qBAAqB,GAC7B,SAAS,CAkBX;AAiBD,wBAAgB,2BAA2B,CACzC,OAAO,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,mBAAmB,GACnE,SAAS,CAKX"}
+{"version":3,"file":"svelte-node-view.d.ts","sourceRoot":"","sources":["../../../src/extensions/svelte-node-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgE,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC7G,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACxE,OAAO,EAGL,KAAK,eAAe,EACpB,KAAK,oBAAoB,EAC1B,MAAM,6BAA6B,CAAA;AACpC,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAElE;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,eAAe;CAAG;AAE/D;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAA;AAEpE;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,uBAAuB,CAAC,uBAAuB,CAAC;IAC7F;;OAEG;IACH,IAAI,EAAE,MAAM,CAAA;CACb;AAkBD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,oBAAoB,EAAE,oBAAoB,CAAC,sBAAsB,CAAC,EAClE,oBAAoB,EAAE,oBAAoB,CAAC,sBAAsB,CAAC,EAClE,OAAO,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GACrB,SAAS,CAMX;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,qBAAqB,GAC7B,SAAS,CAWX"}

package/dist/build/extensions/svelte-node-view.js

@@ -1,6 +1,33 @@
 import { defineNodeViewComponent, defineNodeViewFactory, definePlugin } from '@prosekit/core';
-import { NodeViewWrapper } from "../components/node-view-wrapper/index.js";
+import { AbstractSvelteNodeView, buildSvelteNodeViewCreator, } from '@prosemirror-adapter/svelte';
+import { flushSync, mount, unmount } from 'svelte';
 const isServer = typeof window === 'undefined';
+class ProseKitSvelteNodeView extends AbstractSvelteNodeView {
+    constructor() {
+        super(...arguments);
+        this.render = (options) => {
+            const UserComponent = this.component;
+            const props = this.context;
+            const component = mount(UserComponent, {
+                target: this.dom,
+                context: options.context,
+                props,
+            });
+            flushSync();
+            return () => unmount(component);
+        };
+    }
+}
+/**
+ * @internal
+ */
+export function defineSvelteNodeViewFactory(renderSvelteRenderer, removeSvelteRenderer, context) {
+    const factory = buildSvelteNodeViewCreator(renderSvelteRenderer, removeSvelteRenderer, ProseKitSvelteNodeView, context);
+    return defineNodeViewFactory({
+        group: 'svelte',
+        factory,
+    });
+}
 /**
  * Defines a node view using a Svelte component.
  *
@@ -11,30 +38,9 @@ export function defineSvelteNodeView(options) {
     if (isServer) {
         return definePlugin([]);
     }
-    const { name, component, ...userOptions } = options;
-    const args = {
-        ...userOptions,
-        component: wrapComponent(component),
-    };
     return defineNodeViewComponent({
         group: 'svelte',
-        name,
-        args,
-    });
-}
-function wrapComponent(component) {
-    // `NodeViewWrapper` is an object during SSR
-    if (!NodeViewWrapper || typeof NodeViewWrapper !== 'function') {
-        return component;
-    }
-    const NodeViewPropsWrapper = (internals, props) => {
-        return NodeViewWrapper(internals, { ...props, component });
-    };
-    return NodeViewPropsWrapper;
-}
-export function defineSvelteNodeViewFactory(factory) {
-    return defineNodeViewFactory({
-        group: 'svelte',
-        factory,
+        name: options.name,
+        args: options,
     });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/svelte",
   "type": "module",
-  "version": "0.8.9",
+  "version": "0.8.10",
   "private": false,
   "description": "Svelte components and utilities for ProseKit",
   "author": {
@@ -76,11 +76,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.4.6",
-    "@prosemirror-adapter/svelte": "^0.5.0",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/web": "^0.7.12",
-    "@prosekit/pm": "^0.1.15"
+    "@prosemirror-adapter/core": "^0.5.2",
+    "@prosemirror-adapter/svelte": "^0.5.2",
+    "@prosekit/core": "^0.11.0",
+    "@prosekit/pm": "^0.1.15",
+    "@prosekit/web": "^0.7.13"
   },
   "peerDependencies": {
     "svelte": ">= 5.0.0"
@@ -93,8 +93,8 @@
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",
     "@types/node": "^24.10.13",
-    "svelte": "^5.53.3",
-    "svelte-check": "^4.4.3",
+    "svelte": "^5.55.0",
+    "svelte-check": "^4.4.5",
     "tsx": "^4.21.0",
     "typescript": "~5.9.3",
     "@prosekit/config-ts": "0.0.0"

package/src/components/prosekit/prosekit.svelte

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

package/src/components/view-renderer/index.ts

@@ -0,0 +1 @@
+export { default as ViewRenderer } from './view-renderer.svelte'

package/src/components/view-renderer/view-renderer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { union, type Editor } from '@prosekit/core'
+import { useSvelteRenderer } from '@prosemirror-adapter/svelte'
+import { getAllContexts } from 'svelte'
+import { readable } from 'svelte/store'
+import { defineSvelteMarkViewFactory } from '../../extensions/svelte-mark-view.ts'
+import { defineSvelteNodeViewFactory } from '../../extensions/svelte-node-view.ts'
+import { useEditorExtension } from '../../hooks/use-editor-extension.ts'
+
+export let editor: Editor
+
+const { renderSvelteRenderer, removeSvelteRenderer } = useSvelteRenderer()
+const context = getAllContexts()
+
+const extension = union([
+  defineSvelteMarkViewFactory(renderSvelteRenderer, removeSvelteRenderer, context),
+  defineSvelteNodeViewFactory(renderSvelteRenderer, removeSvelteRenderer, context),
+])
+
+useEditorExtension(editor, readable(extension))
+</script>
+
+<slot />

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

@@ -1,10 +1,12 @@
 import { defineMarkViewComponent, defineMarkViewFactory, definePlugin, type Extension } from '@prosekit/core'
-import type { MarkViewConstructor } from '@prosekit/pm/view'
 import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'
-import type { MarkViewContext, SvelteMarkViewUserOptions } from '@prosemirror-adapter/svelte'
-import type { Component } from 'svelte'
-
-import { MarkViewWrapper } from '../components/mark-view-wrapper/index.ts'
+import {
+  AbstractSvelteMarkView,
+  buildSvelteMarkViewCreator,
+  type MarkViewContext,
+  type SvelteRendererResult,
+} from '@prosemirror-adapter/svelte'
+import { flushSync, mount, unmount, type Component } from 'svelte'
 
 /**
  * @public
@@ -30,6 +32,35 @@ export interface SvelteMarkViewOptions extends CoreMarkViewUserOptions<SvelteMar
 
 const isServer = typeof window === 'undefined'
 
+class ProseKitSvelteMarkView extends AbstractSvelteMarkView<SvelteMarkViewComponent> {
+  render = (options: { context: Map<unknown, unknown> }) => {
+    const UserComponent = this.component
+    const props: SvelteMarkViewProps = this.context
+    const component = mount(UserComponent, {
+      target: this.dom,
+      context: options.context,
+      props,
+    })
+    flushSync()
+    return () => unmount(component)
+  }
+}
+
+/**
+ * @internal
+ */
+export function defineSvelteMarkViewFactory(
+  renderSvelteRenderer: SvelteRendererResult['renderSvelteRenderer'],
+  removeSvelteRenderer: SvelteRendererResult['removeSvelteRenderer'],
+  context: Map<any, any>,
+): Extension {
+  const factory = buildSvelteMarkViewCreator(renderSvelteRenderer, removeSvelteRenderer, ProseKitSvelteMarkView, context)
+  return defineMarkViewFactory<SvelteMarkViewOptions>({
+    group: 'svelte',
+    factory,
+  })
+}
+
 /**
  * Defines a mark view using a Svelte component.
  *
@@ -43,40 +74,9 @@ export function defineSvelteMarkView(
     return definePlugin([])
   }
 
-  const { name, component, ...userOptions } = options
-
-  const args: SvelteMarkViewUserOptions = {
-    ...userOptions,
-    component: wrapComponent(component),
-  }
-
-  return defineMarkViewComponent<SvelteMarkViewUserOptions>({
-    group: 'svelte',
-    name,
-    args,
-  })
-}
-
-function wrapComponent(
-  component: SvelteMarkViewComponent,
-): Component<any, any> {
-  // `MarkViewWrapper` is an object during SSR
-  if (!MarkViewWrapper || typeof MarkViewWrapper !== 'function') {
-    return component
-  }
-
-  const MarkViewPropsWrapper: Component = (internals, props) => {
-    return MarkViewWrapper(internals, { ...props, component })
-  }
-
-  return MarkViewPropsWrapper
-}
-
-export function defineSvelteMarkViewFactory(
-  factory: (options: SvelteMarkViewUserOptions) => MarkViewConstructor,
-): Extension {
-  return defineMarkViewFactory<SvelteMarkViewUserOptions>({
+  return defineMarkViewComponent<SvelteMarkViewOptions>({
     group: 'svelte',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

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

@@ -1,10 +1,12 @@
 import { defineNodeViewComponent, defineNodeViewFactory, definePlugin, type Extension } from '@prosekit/core'
-import type { NodeViewConstructor } from '@prosekit/pm/view'
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
-import type { NodeViewContext, SvelteNodeViewUserOptions } from '@prosemirror-adapter/svelte'
-import type { Component } from 'svelte'
-
-import { NodeViewWrapper } from '../components/node-view-wrapper/index.ts'
+import {
+  AbstractSvelteNodeView,
+  buildSvelteNodeViewCreator,
+  type NodeViewContext,
+  type SvelteRendererResult,
+} from '@prosemirror-adapter/svelte'
+import { flushSync, mount, unmount, type Component } from 'svelte'
 
 /**
  * @public
@@ -30,6 +32,35 @@ export interface SvelteNodeViewOptions extends CoreNodeViewUserOptions<SvelteNod
 
 const isServer = typeof window === 'undefined'
 
+class ProseKitSvelteNodeView extends AbstractSvelteNodeView<SvelteNodeViewComponent> {
+  render = (options: { context: Map<unknown, unknown> }) => {
+    const UserComponent = this.component
+    const props: SvelteNodeViewProps = this.context
+    const component = mount(UserComponent, {
+      target: this.dom,
+      context: options.context,
+      props,
+    })
+    flushSync()
+    return () => unmount(component)
+  }
+}
+
+/**
+ * @internal
+ */
+export function defineSvelteNodeViewFactory(
+  renderSvelteRenderer: SvelteRendererResult['renderSvelteRenderer'],
+  removeSvelteRenderer: SvelteRendererResult['removeSvelteRenderer'],
+  context: Map<any, any>,
+): Extension {
+  const factory = buildSvelteNodeViewCreator(renderSvelteRenderer, removeSvelteRenderer, ProseKitSvelteNodeView, context)
+  return defineNodeViewFactory<SvelteNodeViewOptions>({
+    group: 'svelte',
+    factory,
+  })
+}
+
 /**
  * Defines a node view using a Svelte component.
  *
@@ -43,40 +74,9 @@ export function defineSvelteNodeView(
     return definePlugin([])
   }
 
-  const { name, component, ...userOptions } = options
-
-  const args: SvelteNodeViewUserOptions = {
-    ...userOptions,
-    component: wrapComponent(component),
-  }
-
-  return defineNodeViewComponent<SvelteNodeViewUserOptions>({
-    group: 'svelte',
-    name,
-    args,
-  })
-}
-
-function wrapComponent(
-  component: SvelteNodeViewComponent,
-): Component<any, any> {
-  // `NodeViewWrapper` is an object during SSR
-  if (!NodeViewWrapper || typeof NodeViewWrapper !== 'function') {
-    return component
-  }
-
-  const NodeViewPropsWrapper: Component = (internals, props) => {
-    return NodeViewWrapper(internals, { ...props, component })
-  }
-
-  return NodeViewPropsWrapper
-}
-
-export function defineSvelteNodeViewFactory(
-  factory: (options: SvelteNodeViewUserOptions) => NodeViewConstructor,
-): Extension {
-  return defineNodeViewFactory<SvelteNodeViewUserOptions>({
+  return defineNodeViewComponent<SvelteNodeViewOptions>({
     group: 'svelte',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

package/dist/build/components/mark-view-consumer/index.d.ts

@@ -1,6 +0,0 @@
-import type { Component } from 'svelte';
-/**
- * @internal
- */
-export declare const MarkViewConsumer: Component<Record<string, never>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/build/components/mark-view-consumer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/mark-view-consumer/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIvC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAW,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA"}

package/dist/build/components/mark-view-consumer/index.js

@@ -1,5 +0,0 @@
-import Comp from './mark-view-consumer.svelte';
-/**
- * @internal
- */
-export const MarkViewConsumer = Comp;

package/dist/build/components/mark-view-consumer/mark-view-consumer.svelte

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

package/dist/build/components/mark-view-wrapper/index.d.ts

@@ -1,4 +0,0 @@
-import type { Component } from 'svelte';
-import type { MarkViewWrapperProps } from './props.ts';
-export declare const MarkViewWrapper: Component<MarkViewWrapperProps>;
-//# sourceMappingURL=index.d.ts.map

package/dist/build/components/mark-view-wrapper/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/mark-view-wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEtD,eAAO,MAAM,eAAe,EAAW,SAAS,CAAC,oBAAoB,CAAC,CAAA"}

package/dist/build/components/mark-view-wrapper/index.js

@@ -1,2 +0,0 @@
-import Comp from './mark-view-wrapper.svelte';
-export const MarkViewWrapper = Comp;

package/dist/build/components/mark-view-wrapper/mark-view-wrapper.svelte

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

package/dist/build/components/mark-view-wrapper/props.d.ts

@@ -1,6 +0,0 @@
-import type { Component } from 'svelte';
-import type { SvelteMarkViewProps } from '../../extensions/svelte-mark-view.ts';
-export interface MarkViewWrapperProps {
-    component?: Component<SvelteMarkViewProps>;
-}
-//# sourceMappingURL=props.d.ts.map

package/dist/build/components/mark-view-wrapper/props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../src/components/mark-view-wrapper/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAE/E,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAA;CAC3C"}

package/dist/build/components/mark-view-wrapper/props.js

@@ -1 +0,0 @@
-export {};

package/dist/build/components/node-view-consumer/index.d.ts

@@ -1,6 +0,0 @@
-import type { Component } from 'svelte';
-/**
- * @internal
- */
-export declare const NodeViewConsumer: Component<Record<string, never>>;
-//# sourceMappingURL=index.d.ts.map

package/dist/build/components/node-view-consumer/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/node-view-consumer/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAIvC;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAW,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAA"}

package/dist/build/components/node-view-consumer/index.js

@@ -1,5 +0,0 @@
-import Comp from './node-view-consumer.svelte';
-/**
- * @internal
- */
-export const NodeViewConsumer = Comp;

package/dist/build/components/node-view-consumer/node-view-consumer.svelte

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

package/dist/build/components/node-view-wrapper/index.d.ts

@@ -1,4 +0,0 @@
-import type { Component } from 'svelte';
-import type { NodeViewWrapperProps } from './props.ts';
-export declare const NodeViewWrapper: Component<NodeViewWrapperProps>;
-//# sourceMappingURL=index.d.ts.map

package/dist/build/components/node-view-wrapper/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/node-view-wrapper/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAGvC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAA;AAEtD,eAAO,MAAM,eAAe,EAAW,SAAS,CAAC,oBAAoB,CAAC,CAAA"}

package/dist/build/components/node-view-wrapper/index.js

@@ -1,2 +0,0 @@
-import Comp from './node-view-wrapper.svelte';
-export const NodeViewWrapper = Comp;

package/dist/build/components/node-view-wrapper/node-view-wrapper.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-import { useNodeViewContext } from '@prosemirror-adapter/svelte'
-import type { SvelteNodeViewProps } from '../../extensions/svelte-node-view.js'
-import type { NodeViewWrapperProps } from './props.js'
-
-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/dist/build/components/node-view-wrapper/props.d.ts

@@ -1,6 +0,0 @@
-import type { Component } from 'svelte';
-import type { SvelteNodeViewProps } from '../../extensions/svelte-node-view.ts';
-export interface NodeViewWrapperProps {
-    component?: Component<SvelteNodeViewProps>;
-}
-//# sourceMappingURL=props.d.ts.map

package/dist/build/components/node-view-wrapper/props.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../../src/components/node-view-wrapper/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAEvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sCAAsC,CAAA;AAE/E,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAA;CAC3C"}

package/dist/build/components/node-view-wrapper/props.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,8 +0,0 @@
-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

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

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

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

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

@@ -1,17 +0,0 @@
-<script lang="ts">
-import { useMarkViewContext } from '@prosemirror-adapter/svelte'
-import type { SvelteMarkViewProps } from '../../extensions/svelte-mark-view.ts'
-import type { MarkViewWrapperProps } from './props.ts'
-
-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

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

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

@@ -1,8 +0,0 @@
-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

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

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

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

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

@@ -1,22 +0,0 @@
-<script lang="ts">
-import { useNodeViewContext } from '@prosemirror-adapter/svelte'
-import type { SvelteNodeViewProps } from '../../extensions/svelte-node-view.ts'
-import type { NodeViewWrapperProps } from './props.ts'
-
-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

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