From d6437f9acc583642ae27ac4fd9fe3da2108d27f9 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 23 Mar 2026 07:30:32 +0000
Subject: [PATCH 1/3] chore(deps): update dependency @egoist/tailwindcss-icons
 to ^1.9.2

---
 lit-minimal/package.json | 2 +-
 react-code/package.json  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/lit-minimal/package.json b/lit-minimal/package.json
index 13ec05d2e..48e01262c 100644
--- a/lit-minimal/package.json
+++ b/lit-minimal/package.json
@@ -13,7 +13,7 @@
     "prosekit": "^0.18.4"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@egoist/tailwindcss-icons": "^1.9.2",
     "@iconify-json/lucide": "^1.2.98",
     "@tailwindcss/vite": "^4.2.2",
     "postcss": "^8.5.0",
diff --git a/react-code/package.json b/react-code/package.json
index 7b52397c7..eacd0c060 100644
--- a/react-code/package.json
+++ b/react-code/package.json
@@ -14,7 +14,7 @@
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
-    "@egoist/tailwindcss-icons": "^1.9.0",
+    "@egoist/tailwindcss-icons": "^1.9.2",
     "@iconify-json/lucide": "^1.2.98",
     "@tailwindcss/vite": "^4.2.2",
     "@types/node": "^24.12.0",

From 41ce9a1314d329b80d29fecd973c308f388321cb Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 23 Mar 2026 07:31:22 +0000
Subject: [PATCH 2/3] [autofix.ci] apply automated fixes

---
 .../examples/block-handle/editor.svelte       |  3 +-
 .../ui/code-block-view/code-block-view.svelte |  6 ++-
 .../editor/examples/bold/editor.svelte        |  3 +-
 .../change-tracking/editor-diff.svelte        |  4 +-
 .../change-tracking/editor-main.svelte        |  5 ++-
 .../examples/code-block-themes/editor.svelte  |  3 +-
 .../code-block-themes/theme-selector.svelte   | 14 +++---
 .../ui/code-block-view/code-block-view.svelte |  6 ++-
 .../editor/examples/code-block/editor.svelte  |  3 +-
 .../ui/code-block-view/code-block-view.svelte |  6 ++-
 .../editor/examples/drop-cursor/editor.svelte |  3 +-
 .../editor/examples/full/editor.svelte        |  3 +-
 .../ui/code-block-view/code-block-view.svelte |  6 ++-
 .../editor/ui/image-view/image-view.svelte    | 22 +++++----
 .../editor/examples/gap-cursor/editor.svelte  |  3 +-
 .../editor/examples/hard-break/editor.svelte  |  3 +-
 .../editor/examples/heading/editor.svelte     |  3 +-
 .../editor/ui/image-view/image-view.svelte    | 22 +++++----
 .../editor/examples/inline-menu/editor.svelte |  3 +-
 .../editor/examples/italic/editor.svelte      |  3 +-
 .../editor/examples/katex/editor.svelte       |  3 +-
 .../editor/examples/keymap/toolbar.svelte     | 21 +++------
 .../examples/link-mark-view/editor.svelte     |  3 +-
 .../examples/link-mark-view/link-view.svelte  | 18 ++++----
 .../editor/examples/link/editor.svelte        |  3 +-
 .../list-custom-checkbox/editor.svelte        |  3 +-
 .../editor/examples/list/editor.svelte        |  3 +-
 .../examples/loro/editor-component.svelte     |  4 +-
 .../editor/examples/loro/editor.svelte        | 45 ++++++++++---------
 .../editor/examples/readonly/editor.svelte    |  3 +-
 .../editor/examples/readonly/toolbar.svelte   | 17 ++-----
 .../editor/examples/search/editor.svelte      |  8 ++--
 .../components/editor/ui/search/search.svelte | 33 +++-----------
 .../editor/examples/strike/editor.svelte      |  3 +-
 .../editor/examples/table/editor.svelte       |  3 +-
 .../editor/examples/text-align/editor.svelte  |  3 +-
 .../editor/examples/typography/editor.svelte  |  3 +-
 .../examples/unmount/editor-component.svelte  |  4 +-
 .../unmount/extension-component.svelte        | 21 +++------
 .../examples/word-counter/editor.svelte       |  3 +-
 .../examples/yjs/editor-component.svelte      |  4 +-
 .../editor/examples/yjs/editor.svelte         |  9 ++--
 .../editor/examples/full/editor.svelte        |  3 +-
 .../ui/code-block-view/code-block-view.svelte |  6 ++-
 .../editor/ui/image-view/image-view.svelte    | 22 +++++----
 45 files changed, 174 insertions(+), 198 deletions(-)

diff --git a/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte b/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte
index c43998f1c..7d15686ba 100644
--- a/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte
+++ b/svelte-block-handle/src/components/editor/examples/block-handle/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-block-handle'
 import { BlockHandle } from '../../ui/block-handle'
@@ -16,7 +17,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e3..aaa4617fc 100644
--- a/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-block-handle/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-bold/src/components/editor/examples/bold/editor.svelte b/svelte-bold/src/components/editor/examples/bold/editor.svelte
index 84aa96fd8..25b9fad96 100644
--- a/svelte-bold/src/components/editor/examples/bold/editor.svelte
+++ b/svelte-bold/src/components/editor/examples/bold/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-bold'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte
index 724a1eec8..6a13f0c50 100644
--- a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte
+++ b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-diff.svelte
@@ -11,12 +11,12 @@ interface Props {
 
 const props: Props = $props()
 
-let extension = $derived(union(
+const extension = $derived(union(
   defineBasicExtension(),
   defineReadonly(),
   defineCommitViewer(props.commit),
 ))
-let editor = $derived(createEditor({ extension }))
+const editor = $derived(createEditor({ extension }))
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte
index ad9406b3d..2b1f4dcea 100644
--- a/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte
+++ b/svelte-change-tracking/src/components/editor/examples/change-tracking/editor-main.svelte
@@ -15,11 +15,12 @@ interface Props {
 
 const props: Props = $props()
 
-let extension = $derived(union(
+const extension = $derived(union(
   defineBasicExtension(),
   defineCommitRecorder(props.commitRecorder),
 ))
-let editor = $derived(createEditor({ extension, defaultContent: props.initialContent }))
+const defaultContent = $derived(props.initialContent)
+const editor = $derived(createEditor({ extension, defaultContent }))
 </script>
 
 {#key props.key}
diff --git a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte
index 5d8ab74b7..6ff29b51e 100644
--- a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte
+++ b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-code-block'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte
index b3611ee0a..c62d761fc 100644
--- a/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte
+++ b/svelte-code-block-themes/src/components/editor/examples/code-block-themes/theme-selector.svelte
@@ -1,25 +1,23 @@
 <script lang="ts">
 import { defineCodeBlockShiki, shikiBundledThemesInfo, type ShikiBundledTheme } from 'prosekit/extensions/code-block'
 import { useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
-const theme = writable<ShikiBundledTheme>('github-dark')
-const extension = derived(theme, ($theme) => {
-  return defineCodeBlockShiki({ themes: [$theme] })
-})
+let theme: ShikiBundledTheme = $state('github-dark')
+let extension = $derived(defineCodeBlockShiki({ themes: [theme] }))
 
-useExtension(extension)
+useExtension(toStore(() => extension))
 
 function handleChange(event: Event) {
   const target = event.target as HTMLSelectElement
-  theme.set(target.value as ShikiBundledTheme)
+  theme = target.value as ShikiBundledTheme
 }
 </script>
 
 <label for="code-block-theme-selector">Theme</label>
 <select
   id="code-block-theme-selector"
-  value={$theme}
+  value={theme}
   onchange={handleChange}
   class="outline-unset focus-visible:outline-unset flex items-center justify-center rounded-md p-2 font-medium transition focus-visible:ring-2 text-sm focus-visible:ring-gray-900 dark:focus-visible:ring-gray-300 disabled:pointer-events-none min-w-9 min-h-9 text-gray-900 dark:text-gray-50 disabled:text-gray-900/50 dark:disabled:text-gray-50/50 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 data-[state=on]:bg-gray-200 dark:data-[state=on]:bg-gray-700"
 >
diff --git a/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e3..aaa4617fc 100644
--- a/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-code-block-themes/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-code-block/src/components/editor/examples/code-block/editor.svelte b/svelte-code-block/src/components/editor/examples/code-block/editor.svelte
index 356df1d18..e0ea1e925 100644
--- a/svelte-code-block/src/components/editor/examples/code-block/editor.svelte
+++ b/svelte-code-block/src/components/editor/examples/code-block/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-code-block'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e3..aaa4617fc 100644
--- a/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-code-block/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte b/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte
index a3c2d5530..ddfe7716e 100644
--- a/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte
+++ b/svelte-drop-cursor/src/components/editor/examples/drop-cursor/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-drop-cursor'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-full/src/components/editor/examples/full/editor.svelte b/svelte-full/src/components/editor/examples/full/editor.svelte
index 8871ac02f..8d13cda61 100644
--- a/svelte-full/src/components/editor/examples/full/editor.svelte
+++ b/svelte-full/src/components/editor/examples/full/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-full'
 import { sampleUploader } from '../../sample/sample-uploader'
@@ -25,7 +26,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte b/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e3..aaa4617fc 100644
--- a/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/svelte-full/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/svelte-full/src/components/editor/ui/image-view/image-view.svelte b/svelte-full/src/components/editor/ui/image-view/image-view.svelte
index 3ce290feb..c4aab7380 100644
--- a/svelte-full/src/components/editor/ui/image-view/image-view.svelte
+++ b/svelte-full/src/components/editor/ui/image-view/image-view.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { UploadTask } from 'prosekit/extensions/file'
 import type { ImageAttrs } from 'prosekit/extensions/image'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
 import { ResizableHandle, ResizableRoot } from 'prosekit/svelte/resizable'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
-const selected = props.selected
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
+const selected: boolean = $derived(fromStore(props.selected).current)
 
-const attrs = $derived($node.attrs as ImageAttrs)
+const attrs = $derived(node.attrs as ImageAttrs)
 const url = $derived(attrs.src || '')
 const uploading = $derived(url.startsWith('blob:'))
 
@@ -19,11 +20,8 @@ let aspectRatio = $state<number | undefined>(undefined)
 let error = $state<string | undefined>(undefined)
 let progress = $state(0)
 
-let unsubscribeProgress: (() => void) | undefined
-
 $effect(() => {
   if (!uploading) {
-    unsubscribeProgress?.()
     return
   }
 
@@ -36,15 +34,15 @@ $effect(() => {
     if (canceled) return
     error = String(err)
   })
-  unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
+  const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
     if (canceled) return
     progress = total ? loaded / total : 0
   })
 
-  onDestroy(() => {
+  return () => {
     canceled = true
-    unsubscribeProgress?.()
-  })
+    unsubscribeProgress()
+  }
 })
 
 function handleImageLoad(event: Event) {
@@ -64,7 +62,7 @@ function handleImageLoad(event: Event) {
   width={attrs.width ?? undefined}
   height={attrs.height ?? undefined}
   {aspectRatio}
-  data-selected={$selected ? '' : undefined}
+  data-selected={selected ? '' : undefined}
   class="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-selected:outline-blue-500 outline-solid"
   onResizeEnd={(event) => props.setAttrs(event.detail)}
 >
diff --git a/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte b/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte
index f65e4ba1f..5bc7d921e 100644
--- a/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte
+++ b/svelte-gap-cursor/src/components/editor/examples/gap-cursor/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-gap-cursor'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte b/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte
index 09328d29a..8ca1b7bb9 100644
--- a/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte
+++ b/svelte-hard-break/src/components/editor/examples/hard-break/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-hard-break'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-heading/src/components/editor/examples/heading/editor.svelte b/svelte-heading/src/components/editor/examples/heading/editor.svelte
index 599dd7e37..cbff43cc8 100644
--- a/svelte-heading/src/components/editor/examples/heading/editor.svelte
+++ b/svelte-heading/src/components/editor/examples/heading/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-heading'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte b/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte
index 3ce290feb..c4aab7380 100644
--- a/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte
+++ b/svelte-image-view/src/components/editor/ui/image-view/image-view.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { UploadTask } from 'prosekit/extensions/file'
 import type { ImageAttrs } from 'prosekit/extensions/image'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
 import { ResizableHandle, ResizableRoot } from 'prosekit/svelte/resizable'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
-const selected = props.selected
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
+const selected: boolean = $derived(fromStore(props.selected).current)
 
-const attrs = $derived($node.attrs as ImageAttrs)
+const attrs = $derived(node.attrs as ImageAttrs)
 const url = $derived(attrs.src || '')
 const uploading = $derived(url.startsWith('blob:'))
 
@@ -19,11 +20,8 @@ let aspectRatio = $state<number | undefined>(undefined)
 let error = $state<string | undefined>(undefined)
 let progress = $state(0)
 
-let unsubscribeProgress: (() => void) | undefined
-
 $effect(() => {
   if (!uploading) {
-    unsubscribeProgress?.()
     return
   }
 
@@ -36,15 +34,15 @@ $effect(() => {
     if (canceled) return
     error = String(err)
   })
-  unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
+  const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
     if (canceled) return
     progress = total ? loaded / total : 0
   })
 
-  onDestroy(() => {
+  return () => {
     canceled = true
-    unsubscribeProgress?.()
-  })
+    unsubscribeProgress()
+  }
 })
 
 function handleImageLoad(event: Event) {
@@ -64,7 +62,7 @@ function handleImageLoad(event: Event) {
   width={attrs.width ?? undefined}
   height={attrs.height ?? undefined}
   {aspectRatio}
-  data-selected={$selected ? '' : undefined}
+  data-selected={selected ? '' : undefined}
   class="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-selected:outline-blue-500 outline-solid"
   onResizeEnd={(event) => props.setAttrs(event.detail)}
 >
diff --git a/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte b/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte
index 079ef954b..83475cfd6 100644
--- a/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte
+++ b/svelte-inline-menu/src/components/editor/examples/inline-menu/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-inline-menu'
 import { InlineMenu } from '../../ui/inline-menu'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-italic/src/components/editor/examples/italic/editor.svelte b/svelte-italic/src/components/editor/examples/italic/editor.svelte
index 4e902dddf..fbaf0cc69 100644
--- a/svelte-italic/src/components/editor/examples/italic/editor.svelte
+++ b/svelte-italic/src/components/editor/examples/italic/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-italic'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-katex/src/components/editor/examples/katex/editor.svelte b/svelte-katex/src/components/editor/examples/katex/editor.svelte
index dcdd7313c..a5902d966 100644
--- a/svelte-katex/src/components/editor/examples/katex/editor.svelte
+++ b/svelte-katex/src/components/editor/examples/katex/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-tex'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte b/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte
index 6f1672037..248e0deb5 100644
--- a/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte
+++ b/svelte-keymap/src/components/editor/examples/keymap/toolbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { useKeymap } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
@@ -12,23 +12,14 @@ const props: Props = $props()
 
 let hotkey = $state<'Shift-Enter' | 'Enter'>('Shift-Enter')
 
-// Create a store from the reactive hotkey value
-const hotkeyStore = writable<'Shift-Enter' | 'Enter'>('Shift-Enter')
-
-// Update store when hotkey changes
-$effect(() => {
-  hotkeyStore.set(hotkey)
-})
-
-// Create keymap derived from the hotkey store
-const keymap = derived(hotkeyStore, ($hotkey) => ({
-  [$hotkey]: () => {
-    props.onSubmit($hotkey)
+const keymap = $derived({
+  [hotkey]: () => {
+    props.onSubmit(hotkey)
     return true
   },
-}))
+})
 
-useKeymap(keymap)
+useKeymap(toStore(() => keymap))
 
 function setHotkey(value: 'Shift-Enter' | 'Enter') {
   hotkey = value
diff --git a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte
index cdd4bc296..e8f5f4d41 100644
--- a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte
+++ b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-link-mark-view'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte
index ba894dbd0..9aea6240f 100644
--- a/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte
+++ b/svelte-link-mark-view/src/components/editor/examples/link-mark-view/link-view.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import type { SvelteMarkViewProps } from 'prosekit/svelte'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 const props: SvelteMarkViewProps = $props()
 
@@ -28,15 +28,17 @@ function pickRandomColor() {
 }
 
 let color = $state(colors[0])
-const mark = props.mark
-const href = $derived($mark.attrs.href as string)
+let mark = $derived(fromStore(props.mark).current)
+let href = $derived(mark.attrs.href as string)
 
-const interval = setInterval(() => {
-  color = pickRandomColor()
-}, 1000)
+$effect(() => {
+  const interval = setInterval(() => {
+    color = pickRandomColor()
+  }, 1000)
 
-onDestroy(() => {
-  clearInterval(interval)
+  return () => {
+    clearInterval(interval)
+  }
 })
 
 function bindContentRef(element: HTMLAnchorElement) {
diff --git a/svelte-link/src/components/editor/examples/link/editor.svelte b/svelte-link/src/components/editor/examples/link/editor.svelte
index 02917217b..e4709a6f3 100644
--- a/svelte-link/src/components/editor/examples/link/editor.svelte
+++ b/svelte-link/src/components/editor/examples/link/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-link'
 import { InlineMenu } from '../../ui/inline-menu'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte b/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte
index ccad3d5d7..81092979c 100644
--- a/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte
+++ b/svelte-list-custom-checkbox/src/components/editor/examples/list-custom-checkbox/editor.svelte
@@ -5,6 +5,7 @@ import './custom-list.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-list-custom-checkbox'
 import { Toolbar } from '../../ui/toolbar'
@@ -16,7 +17,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-list/src/components/editor/examples/list/editor.svelte b/svelte-list/src/components/editor/examples/list/editor.svelte
index 1a1f208bb..a30e87256 100644
--- a/svelte-list/src/components/editor/examples/list/editor.svelte
+++ b/svelte-list/src/components/editor/examples/list/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-list'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-loro/src/components/editor/examples/loro/editor-component.svelte b/svelte-loro/src/components/editor/examples/loro/editor-component.svelte
index 12b9709b9..8cf39ef14 100644
--- a/svelte-loro/src/components/editor/examples/loro/editor-component.svelte
+++ b/svelte-loro/src/components/editor/examples/loro/editor-component.svelte
@@ -18,8 +18,8 @@ interface Props {
 
 const props: Props = $props()
 
-const extension = defineExtension(props.loro, props.awareness)
-const editor = createEditor({ extension })
+const extension = $derived(defineExtension(props.loro, props.awareness))
+const editor = $derived(createEditor({ extension }))
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-loro/src/components/editor/examples/loro/editor.svelte b/svelte-loro/src/components/editor/examples/loro/editor.svelte
index 6ece371dd..008656420 100644
--- a/svelte-loro/src/components/editor/examples/loro/editor.svelte
+++ b/svelte-loro/src/components/editor/examples/loro/editor.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 import { LoroDoc, type AwarenessListener } from 'loro-crdt'
 import { CursorAwareness, type LoroDocType } from 'loro-prosemirror'
-import { onDestroy } from 'svelte'
 
 import EditorComponent from './editor-component.svelte'
 
@@ -17,34 +16,36 @@ const awarenessB = new CursorAwareness(idB)
 loroA.import(loroB.export({ mode: 'update' }))
 loroB.import(loroA.export({ mode: 'update' }))
 
-const unsubscribeA = loroA.subscribeLocalUpdates((updates) => {
-  loroB.import(updates)
-})
+$effect(() => {
+  const unsubscribeA = loroA.subscribeLocalUpdates((updates) => {
+    loroB.import(updates)
+  })
 
-const unsubscribeB = loroB.subscribeLocalUpdates((updates) => {
-  loroA.import(updates)
-})
+  const unsubscribeB = loroB.subscribeLocalUpdates((updates) => {
+    loroA.import(updates)
+  })
 
-const awarenessAListener: AwarenessListener = (_, origin) => {
-  if (origin === 'local') {
-    awarenessB.apply(awarenessA.encode([idA]))
+  const awarenessAListener: AwarenessListener = (_, origin) => {
+    if (origin === 'local') {
+      awarenessB.apply(awarenessA.encode([idA]))
+    }
   }
-}
 
-const awarenessBListener: AwarenessListener = (_, origin) => {
-  if (origin === 'local') {
-    awarenessA.apply(awarenessB.encode([idB]))
+  const awarenessBListener: AwarenessListener = (_, origin) => {
+    if (origin === 'local') {
+      awarenessA.apply(awarenessB.encode([idB]))
+    }
   }
-}
 
-awarenessA.addListener(awarenessAListener)
-awarenessB.addListener(awarenessBListener)
+  awarenessA.addListener(awarenessAListener)
+  awarenessB.addListener(awarenessBListener)
 
-onDestroy(() => {
-  awarenessA.removeListener(awarenessAListener)
-  awarenessB.removeListener(awarenessBListener)
-  unsubscribeA()
-  unsubscribeB()
+  return () => {
+    awarenessA.removeListener(awarenessAListener)
+    awarenessB.removeListener(awarenessBListener)
+    unsubscribeA()
+    unsubscribeB()
+  }
 })
 </script>
 
diff --git a/svelte-readonly/src/components/editor/examples/readonly/editor.svelte b/svelte-readonly/src/components/editor/examples/readonly/editor.svelte
index 67b30837a..0df7b2c68 100644
--- a/svelte-readonly/src/components/editor/examples/readonly/editor.svelte
+++ b/svelte-readonly/src/components/editor/examples/readonly/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-readonly'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte b/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte
index 86cfd2075..bbec4e4f7 100644
--- a/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte
+++ b/svelte-readonly/src/components/editor/examples/readonly/toolbar.svelte
@@ -1,26 +1,15 @@
 <script lang="ts">
 import { defineReadonly } from 'prosekit/extensions/readonly'
 import { useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
 let readonly = $state(true)
 
-// Create a store from the reactive readonly value
-const readonlyStore = writable<boolean>(true)
+const extension = $derived(readonly ? defineReadonly() : null)
 
-// Update store when readonly changes
-$effect(() => {
-  readonlyStore.set(readonly)
-})
-
-// Create extension derived from the readonly store
-const extension = derived(readonlyStore, ($readonly) => {
-  return $readonly ? defineReadonly() : null
-})
-
-useExtension(extension)
+useExtension(toStore(() => extension))
 
 function setReadonly(value: boolean) {
   readonly = value
diff --git a/svelte-search/src/components/editor/examples/search/editor.svelte b/svelte-search/src/components/editor/examples/search/editor.svelte
index ef4e29a2a..b814c1066 100644
--- a/svelte-search/src/components/editor/examples/search/editor.svelte
+++ b/svelte-search/src/components/editor/examples/search/editor.svelte
@@ -5,6 +5,7 @@ import 'prosekit/extensions/search/style.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-search'
 import { Search } from '../../ui/search'
@@ -16,11 +17,8 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
-const editor = createEditor({
-  extension,
-  defaultContent,
-})
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
+const editor = createEditor({ extension, defaultContent })
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-search/src/components/editor/ui/search/search.svelte b/svelte-search/src/components/editor/ui/search/search.svelte
index ff5acd114..17909b424 100644
--- a/svelte-search/src/components/editor/ui/search/search.svelte
+++ b/svelte-search/src/components/editor/ui/search/search.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { defineSearchQuery, type SearchCommandsExtension } from 'prosekit/extensions/search'
 import { useEditor, useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../button'
 
@@ -17,34 +17,13 @@ let replaceText = $state('')
 
 const editor = useEditor<SearchCommandsExtension>()
 
-// Create stores from the reactive values
-const searchTextStore = writable('')
-const replaceTextStore = writable('')
-
-// Update stores when reactive values change
-$effect(() => {
-  searchTextStore.set(searchText)
-})
-
-$effect(() => {
-  replaceTextStore.set(replaceText)
-})
-
-// Create extension derived from the stores
-const extension = derived(
-  [searchTextStore, replaceTextStore],
-  ([$searchText, $replaceText]) => {
-    if (!$searchText) {
-      return null
-    }
-    return defineSearchQuery({
-      search: $searchText,
-      replace: $replaceText,
-    })
-  },
+const extension = $derived(
+  searchText
+    ? defineSearchQuery({ search: searchText, replace: replaceText })
+    : null,
 )
 
-useExtension(extension)
+useExtension(toStore(() => extension))
 
 function toggleReplace() {
   showReplace = !showReplace
diff --git a/svelte-strike/src/components/editor/examples/strike/editor.svelte b/svelte-strike/src/components/editor/examples/strike/editor.svelte
index 7e4529cfc..0f49d1705 100644
--- a/svelte-strike/src/components/editor/examples/strike/editor.svelte
+++ b/svelte-strike/src/components/editor/examples/strike/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-strike'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-table/src/components/editor/examples/table/editor.svelte b/svelte-table/src/components/editor/examples/table/editor.svelte
index 39b765f71..3aa0bb7e8 100644
--- a/svelte-table/src/components/editor/examples/table/editor.svelte
+++ b/svelte-table/src/components/editor/examples/table/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-table'
 import { TableHandle } from '../../ui/table-handle'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-text-align/src/components/editor/examples/text-align/editor.svelte b/svelte-text-align/src/components/editor/examples/text-align/editor.svelte
index 490f20b24..427de5747 100644
--- a/svelte-text-align/src/components/editor/examples/text-align/editor.svelte
+++ b/svelte-text-align/src/components/editor/examples/text-align/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-text-align'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-typography/src/components/editor/examples/typography/editor.svelte b/svelte-typography/src/components/editor/examples/typography/editor.svelte
index 394f58008..87d727658 100644
--- a/svelte-typography/src/components/editor/examples/typography/editor.svelte
+++ b/svelte-typography/src/components/editor/examples/typography/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-typography'
 import { BlockHandle } from '../../ui/block-handle'
@@ -16,7 +17,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte b/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte
index 33328a81a..68c910438 100644
--- a/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte
+++ b/svelte-unmount/src/components/editor/examples/unmount/editor-component.svelte
@@ -9,9 +9,9 @@ import { ProseKit } from 'prosekit/svelte'
 import { InlineMenu } from '../../ui/inline-menu'
 import ExtensionComponent from './extension-component.svelte'
 
-const props = $props<{
+const props: {
   placeholder: string
-}>()
+} = $props()
 
 const extension = defineBasicExtension()
 const editor = createEditor({ extension })
diff --git a/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte b/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte
index 6a6d56217..eaf6f0d95 100644
--- a/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte
+++ b/svelte-unmount/src/components/editor/examples/unmount/extension-component.svelte
@@ -1,24 +1,13 @@
 <script lang="ts">
 import { definePlaceholder } from 'prosekit/extensions/placeholder'
 import { useExtension } from 'prosekit/svelte'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
-const props = $props<{
+const props: {
   placeholder: string
-}>()
+} = $props()
 
-// Create a store from the reactive placeholder value
-const placeholderStore = writable<string>(props.placeholder)
+const extension = $derived(definePlaceholder({ placeholder: props.placeholder }))
 
-// Update store when placeholder changes
-$effect(() => {
-  placeholderStore.set(props.placeholder)
-})
-
-// Create extension derived from the placeholder store
-const extension = derived(placeholderStore, ($placeholder) => {
-  return definePlaceholder({ placeholder: $placeholder })
-})
-
-useExtension(extension)
+useExtension(toStore(() => extension))
 </script>
diff --git a/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte b/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte
index b0bf8d83c..ee49438c9 100644
--- a/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte
+++ b/svelte-word-counter/src/components/editor/examples/word-counter/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-word-counter'
 import { WordCounter } from '../../ui/word-counter'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte b/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
index ad7f3f1e7..57563bbe9 100644
--- a/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
+++ b/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
@@ -19,8 +19,8 @@ interface Props {
 
 const props: Props = $props()
 
-const extension = defineExtension(props.doc, props.awareness)
-const editor = createEditor({ extension })
+const extension = $derived(defineExtension(props.doc, props.awareness))
+const editor = $derived(createEditor({ extension }))
 </script>
 
 <ProseKit {editor}>
diff --git a/svelte-yjs/src/components/editor/examples/yjs/editor.svelte b/svelte-yjs/src/components/editor/examples/yjs/editor.svelte
index 1670b660a..7faf8286e 100644
--- a/svelte-yjs/src/components/editor/examples/yjs/editor.svelte
+++ b/svelte-yjs/src/components/editor/examples/yjs/editor.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-import { onDestroy } from 'svelte'
 import { WebsocketProvider } from 'y-websocket'
 import * as Y from 'yjs'
 
@@ -14,9 +13,11 @@ const provider = new WebsocketProvider(
   doc,
 )
 
-onDestroy(() => {
-  provider.destroy()
-  doc.destroy()
+$effect(() => {
+  return () => {
+    provider.destroy()
+    doc.destroy()
+  }
 })
 </script>
 
diff --git a/sveltekit-full/src/components/editor/examples/full/editor.svelte b/sveltekit-full/src/components/editor/examples/full/editor.svelte
index 8871ac02f..8d13cda61 100644
--- a/sveltekit-full/src/components/editor/examples/full/editor.svelte
+++ b/sveltekit-full/src/components/editor/examples/full/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-full'
 import { sampleUploader } from '../../sample/sample-uploader'
@@ -25,7 +26,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte b/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte
index 751d7d5e3..aaa4617fc 100644
--- a/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte
+++ b/sveltekit-full/src/components/editor/ui/code-block-view/code-block-view.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import type { CodeBlockAttrs } from 'prosekit/extensions/code-block'
 import { shikiBundledLanguagesInfo } from 'prosekit/extensions/code-block'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
 
-const attrs = $derived($node.attrs as CodeBlockAttrs)
+const attrs = $derived(node.attrs as CodeBlockAttrs)
 
 function setLanguage(lang: string) {
   const newAttrs: CodeBlockAttrs = { language: lang }
diff --git a/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte b/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte
index 3ce290feb..c4aab7380 100644
--- a/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte
+++ b/sveltekit-full/src/components/editor/ui/image-view/image-view.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
+import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { UploadTask } from 'prosekit/extensions/file'
 import type { ImageAttrs } from 'prosekit/extensions/image'
 import type { SvelteNodeViewProps } from 'prosekit/svelte'
 import { ResizableHandle, ResizableRoot } from 'prosekit/svelte/resizable'
-import { onDestroy } from 'svelte'
+import { fromStore } from 'svelte/store'
 
 interface Props extends SvelteNodeViewProps {}
 
 const props: Props = $props()
-const node = props.node
-const selected = props.selected
+const node: ProseMirrorNode = $derived(fromStore(props.node).current)
+const selected: boolean = $derived(fromStore(props.selected).current)
 
-const attrs = $derived($node.attrs as ImageAttrs)
+const attrs = $derived(node.attrs as ImageAttrs)
 const url = $derived(attrs.src || '')
 const uploading = $derived(url.startsWith('blob:'))
 
@@ -19,11 +20,8 @@ let aspectRatio = $state<number | undefined>(undefined)
 let error = $state<string | undefined>(undefined)
 let progress = $state(0)
 
-let unsubscribeProgress: (() => void) | undefined
-
 $effect(() => {
   if (!uploading) {
-    unsubscribeProgress?.()
     return
   }
 
@@ -36,15 +34,15 @@ $effect(() => {
     if (canceled) return
     error = String(err)
   })
-  unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
+  const unsubscribeProgress = uploadTask.subscribeProgress(({ loaded, total }) => {
     if (canceled) return
     progress = total ? loaded / total : 0
   })
 
-  onDestroy(() => {
+  return () => {
     canceled = true
-    unsubscribeProgress?.()
-  })
+    unsubscribeProgress()
+  }
 })
 
 function handleImageLoad(event: Event) {
@@ -64,7 +62,7 @@ function handleImageLoad(event: Event) {
   width={attrs.width ?? undefined}
   height={attrs.height ?? undefined}
   {aspectRatio}
-  data-selected={$selected ? '' : undefined}
+  data-selected={selected ? '' : undefined}
   class="relative flex items-center justify-center box-border overflow-hidden my-2 group max-h-[600px] max-w-full min-h-[64px] min-w-[64px] outline-2 outline-transparent data-selected:outline-blue-500 outline-solid"
   onResizeEnd={(event) => props.setAttrs(event.detail)}
 >

From 193c9da0256a4e74329b9aab58ded8f5586f7e4c Mon Sep 17 00:00:00 2001
From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com>
Date: Mon, 23 Mar 2026 07:32:20 +0000
Subject: [PATCH 3/3] [autofix.ci] apply automated fixes (attempt 2/3)

---
 .../editor/examples/code/editor.svelte        |  3 ++-
 .../editor/examples/image-view/editor.svelte  |  3 ++-
 .../editor/examples/placeholder/editor.svelte |  8 +++++---
 .../editor/examples/rtl/editor.svelte         |  3 ++-
 .../editor/examples/text-color/editor.svelte  |  3 ++-
 .../examples/text-color/inline-menu.svelte    | 19 +++++--------------
 .../editor/examples/underline/editor.svelte   |  3 ++-
 7 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/svelte-code/src/components/editor/examples/code/editor.svelte b/svelte-code/src/components/editor/examples/code/editor.svelte
index 40d14c6f7..674f85238 100644
--- a/svelte-code/src/components/editor/examples/code/editor.svelte
+++ b/svelte-code/src/components/editor/examples/code/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-code'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-image-view/src/components/editor/examples/image-view/editor.svelte b/svelte-image-view/src/components/editor/examples/image-view/editor.svelte
index e16bc7993..4562fbff2 100644
--- a/svelte-image-view/src/components/editor/examples/image-view/editor.svelte
+++ b/svelte-image-view/src/components/editor/examples/image-view/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-image'
 
@@ -14,7 +15,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte b/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte
index 8eab08b23..9d03595fa 100644
--- a/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte
+++ b/svelte-placeholder/src/components/editor/examples/placeholder/editor.svelte
@@ -5,16 +5,18 @@ import 'prosekit/basic/typography.css'
 import { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'
 import type { ProseMirrorNode } from 'prosekit/pm/model'
 import { ProseKit, useDocChange } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { defineExtension } from './extension'
 
-const props = $props<{
+const props: {
   initialContent?: NodeJSON
   onDocUpdate?: (doc: NodeJSON) => void
-}>()
+} = $props()
 
 const extension = defineExtension()
-const editor = createEditor({ extension, defaultContent: props.initialContent })
+const defaultContent = untrack(() => props.initialContent)
+const editor = createEditor({ extension, defaultContent })
 
 const handleDocChange = (doc: ProseMirrorNode) => props.onDocUpdate?.(jsonFromNode(doc))
 useDocChange(handleDocChange, { editor })
diff --git a/svelte-rtl/src/components/editor/examples/rtl/editor.svelte b/svelte-rtl/src/components/editor/examples/rtl/editor.svelte
index 4c005893d..854ffcd3f 100644
--- a/svelte-rtl/src/components/editor/examples/rtl/editor.svelte
+++ b/svelte-rtl/src/components/editor/examples/rtl/editor.svelte
@@ -5,6 +5,7 @@ import 'prosekit/basic/typography.css'
 import { defineBasicExtension } from 'prosekit/basic'
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-rtl'
 import { sampleUploader } from '../../sample/sample-uploader'
@@ -20,7 +21,7 @@ const props: {
 } = $props()
 
 const extension = defineBasicExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-text-color/src/components/editor/examples/text-color/editor.svelte b/svelte-text-color/src/components/editor/examples/text-color/editor.svelte
index 8f316651b..703c405bb 100644
--- a/svelte-text-color/src/components/editor/examples/text-color/editor.svelte
+++ b/svelte-text-color/src/components/editor/examples/text-color/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-text-color'
 
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>
 
diff --git a/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte b/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte
index f84393780..03ae878cd 100644
--- a/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte
+++ b/svelte-text-color/src/components/editor/examples/text-color/inline-menu.svelte
@@ -2,7 +2,7 @@
 import type { Editor } from 'prosekit/core'
 import { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'
 import { InlinePopover } from 'prosekit/svelte/inline-popover'
-import { derived, writable } from 'svelte/store'
+import { toStore } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
@@ -67,26 +67,17 @@ const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
 
 let open = $state(false)
 
-// Create a store from the reactive open value
-const openStore = writable(false)
-
-// Update store when open changes
-$effect(() => {
-  openStore.set(open)
-})
-
-// Create keymap derived from the open store
-const keymap = derived(openStore, ($open) => ({
+const keymap = $derived({
   Escape: () => {
-    if ($open) {
+    if (open) {
       open = false
       return true
     }
     return false
   },
-}))
+})
 
-useKeymap(keymap)
+useKeymap(toStore(() => keymap))
 </script>
 
 <InlinePopover
diff --git a/svelte-underline/src/components/editor/examples/underline/editor.svelte b/svelte-underline/src/components/editor/examples/underline/editor.svelte
index 502d51910..db2bc0d8f 100644
--- a/svelte-underline/src/components/editor/examples/underline/editor.svelte
+++ b/svelte-underline/src/components/editor/examples/underline/editor.svelte
@@ -4,6 +4,7 @@ import 'prosekit/basic/typography.css'
 
 import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
+import { untrack } from 'svelte'
 
 import { sampleContent } from '../../sample/sample-doc-underline'
 import { Toolbar } from '../../ui/toolbar'
@@ -15,7 +16,7 @@ const props: {
 } = $props()
 
 const extension = defineExtension()
-const defaultContent = props.initialContent ?? sampleContent
+const defaultContent = untrack(() => props.initialContent ?? sampleContent)
 const editor = createEditor({ extension, defaultContent })
 </script>