diff --git a/lit-minimal/package.json b/lit-minimal/package.json
index 7042a8f95c..39000a331a 100644
--- a/lit-minimal/package.json
+++ b/lit-minimal/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "lit": "^3.3.2",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/lit-slash-menu/package.json b/lit-slash-menu/package.json
index ef1ccb9843..9cbd332e0b 100644
--- a/lit-slash-menu/package.json
+++ b/lit-slash-menu/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "lit": "^3.3.2",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/lit-toolbar/package.json b/lit-toolbar/package.json
index 5634ad8db1..fcadefb741 100644
--- a/lit-toolbar/package.json
+++ b/lit-toolbar/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "lit": "^3.3.2",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/next-full/package.json b/next-full/package.json
index aa85dd9a84..9bcde200ce 100644
--- a/next-full/package.json
+++ b/next-full/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "next": "^16.1.6",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/nuxt-full/package.json b/nuxt-full/package.json
index aac2aada78..bb20a09337 100644
--- a/nuxt-full/package.json
+++ b/nuxt-full/package.json
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "nuxt": "^4.3.1",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/preact-block-handle/package.json b/preact-block-handle/package.json
index 1919536fc2..294f2e4aa3 100644
--- a/preact-block-handle/package.json
+++ b/preact-block-handle/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-blockquote/package.json b/preact-blockquote/package.json
index 6363219b46..8834efb28f 100644
--- a/preact-blockquote/package.json
+++ b/preact-blockquote/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-bold/package.json b/preact-bold/package.json
index fa4e9e92be..883baa140a 100644
--- a/preact-bold/package.json
+++ b/preact-bold/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-change-tracking/package.json b/preact-change-tracking/package.json
index 066f3a90d9..6b4dac2755 100644
--- a/preact-change-tracking/package.json
+++ b/preact-change-tracking/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-code-block-themes/package.json b/preact-code-block-themes/package.json
index aef2f184ab..f28e4fd003 100644
--- a/preact-code-block-themes/package.json
+++ b/preact-code-block-themes/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-code-block/package.json b/preact-code-block/package.json
index d2c99fcc34..b3d8bb145c 100644
--- a/preact-code-block/package.json
+++ b/preact-code-block/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-code/package.json b/preact-code/package.json
index 41e0e4be31..b8b2ce5fc2 100644
--- a/preact-code/package.json
+++ b/preact-code/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-drop-cursor/package.json b/preact-drop-cursor/package.json
index 68d0f040d8..f8991d53f0 100644
--- a/preact-drop-cursor/package.json
+++ b/preact-drop-cursor/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-emoji-rules/package.json b/preact-emoji-rules/package.json
index 2df4de4021..95af9fef60 100644
--- a/preact-emoji-rules/package.json
+++ b/preact-emoji-rules/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-full/package.json b/preact-full/package.json
index 9c5ce45c3c..15783eeb3c 100644
--- a/preact-full/package.json
+++ b/preact-full/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-gap-cursor/package.json b/preact-gap-cursor/package.json
index ccd42c09e8..285463efeb 100644
--- a/preact-gap-cursor/package.json
+++ b/preact-gap-cursor/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-hard-break/package.json b/preact-hard-break/package.json
index 424a6c2cc2..3c49bc7e04 100644
--- a/preact-hard-break/package.json
+++ b/preact-hard-break/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-heading/package.json b/preact-heading/package.json
index 96d5c28a09..3d29f8ff09 100644
--- a/preact-heading/package.json
+++ b/preact-heading/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-horizontal-rule/package.json b/preact-horizontal-rule/package.json
index 37c5d47b5e..4f7b0f76bf 100644
--- a/preact-horizontal-rule/package.json
+++ b/preact-horizontal-rule/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-image-view/package.json b/preact-image-view/package.json
index 3525c168cb..6bdade1091 100644
--- a/preact-image-view/package.json
+++ b/preact-image-view/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-inline-menu/package.json b/preact-inline-menu/package.json
index 2ff6bb5dcf..50c572cbd9 100644
--- a/preact-inline-menu/package.json
+++ b/preact-inline-menu/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-italic/package.json b/preact-italic/package.json
index b7ac3a2c3d..58b5c84cd1 100644
--- a/preact-italic/package.json
+++ b/preact-italic/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-keymap/package.json b/preact-keymap/package.json
index 67b9b07422..94bc488961 100644
--- a/preact-keymap/package.json
+++ b/preact-keymap/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-link-mark-view/package.json b/preact-link-mark-view/package.json
index 0a583e2571..e10d3f6e5c 100644
--- a/preact-link-mark-view/package.json
+++ b/preact-link-mark-view/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-link/package.json b/preact-link/package.json
index becd6850d2..19b1c97c28 100644
--- a/preact-link/package.json
+++ b/preact-link/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-list-custom-checkbox/package.json b/preact-list-custom-checkbox/package.json
index d271080fc9..3d751aa807 100644
--- a/preact-list-custom-checkbox/package.json
+++ b/preact-list-custom-checkbox/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-list/package.json b/preact-list/package.json
index fb01219cb7..bf18da6ebb 100644
--- a/preact-list/package.json
+++ b/preact-list/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-loro/package.json b/preact-loro/package.json
index 9e99a2b206..2603e7c4b1 100644
--- a/preact-loro/package.json
+++ b/preact-loro/package.json
@@ -12,7 +12,7 @@
     "loro-crdt": "^1.10.6",
     "loro-prosemirror": "^0.4.2",
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-mark-rule/package.json b/preact-mark-rule/package.json
index 81a3797471..dcc2f15b07 100644
--- a/preact-mark-rule/package.json
+++ b/preact-mark-rule/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-minimal/package.json b/preact-minimal/package.json
index 799b82662b..32d167869e 100644
--- a/preact-minimal/package.json
+++ b/preact-minimal/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-placeholder/package.json b/preact-placeholder/package.json
index 7f2ceef7b3..aa803fe19c 100644
--- a/preact-placeholder/package.json
+++ b/preact-placeholder/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-readonly/package.json b/preact-readonly/package.json
index 9747eedf65..dc402bd08c 100644
--- a/preact-readonly/package.json
+++ b/preact-readonly/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-rtl/package.json b/preact-rtl/package.json
index 74860fe385..534f51179e 100644
--- a/preact-rtl/package.json
+++ b/preact-rtl/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-save-html/package.json b/preact-save-html/package.json
index 2fb4fd68e5..ae93c86fb3 100644
--- a/preact-save-html/package.json
+++ b/preact-save-html/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-save-json/package.json b/preact-save-json/package.json
index dde01a46fb..a3051772ae 100644
--- a/preact-save-json/package.json
+++ b/preact-save-json/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-save-markdown/package.json b/preact-save-markdown/package.json
index 70c7026a22..1a48791b10 100644
--- a/preact-save-markdown/package.json
+++ b/preact-save-markdown/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",
     "remark-gfm": "^4.0.1",
diff --git a/preact-search/package.json b/preact-search/package.json
index 70a1cb0e85..14f6bbc314 100644
--- a/preact-search/package.json
+++ b/preact-search/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-slash-menu/package.json b/preact-slash-menu/package.json
index 1cac3d4471..0dcb7c5bfd 100644
--- a/preact-slash-menu/package.json
+++ b/preact-slash-menu/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-strike/package.json b/preact-strike/package.json
index 00331f4e7e..3e6905adb2 100644
--- a/preact-strike/package.json
+++ b/preact-strike/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-table/package.json b/preact-table/package.json
index e6f87b067b..d96a865954 100644
--- a/preact-table/package.json
+++ b/preact-table/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-text-align/package.json b/preact-text-align/package.json
index 7ee4f684a3..8d7caada6b 100644
--- a/preact-text-align/package.json
+++ b/preact-text-align/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-text-color/package.json b/preact-text-color/package.json
index 85997383fa..33eabbd601 100644
--- a/preact-text-color/package.json
+++ b/preact-text-color/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-text-color/src/components/editor/examples/text-color/extension.ts b/preact-text-color/src/components/editor/examples/text-color/extension.ts
index 855eca05b4..d35d9d5c22 100644
--- a/preact-text-color/src/components/editor/examples/text-color/extension.ts
+++ b/preact-text-color/src/components/editor/examples/text-color/extension.ts
@@ -1,10 +1,14 @@
 import { defineBasicExtension } from 'prosekit/basic'
 import { union } from 'prosekit/core'
-
-import { defineTextColor } from './text-color'
+import { defineBackgroundColor } from 'prosekit/extensions/background-color'
+import { defineTextColor } from 'prosekit/extensions/text-color'
 
 export function defineExtension() {
-  return union(defineBasicExtension(), defineTextColor())
+  return union(
+    defineBasicExtension(),
+    defineTextColor(),
+    defineBackgroundColor(),
+  )
 }
 
 export type EditorExtension = ReturnType<typeof defineExtension>
diff --git a/preact-text-color/src/components/editor/examples/text-color/inline-menu.tsx b/preact-text-color/src/components/editor/examples/text-color/inline-menu.tsx
index 9479fa648d..37b5837300 100644
--- a/preact-text-color/src/components/editor/examples/text-color/inline-menu.tsx
+++ b/preact-text-color/src/components/editor/examples/text-color/inline-menu.tsx
@@ -1,48 +1,77 @@
 import { useMemo, useState } from 'preact/hooks'
 import type { Editor, Keymap } from 'prosekit/core'
-import { useEditor, useEditorDerivedValue, useKeymap } from 'prosekit/preact'
+import { useEditorDerivedValue, useKeymap } from 'prosekit/preact'
 import { InlinePopover } from 'prosekit/preact/inline-popover'
 
 import { Button } from '../../ui/button'
 
 import type { EditorExtension } from './extension'
 
-const colors = [
-  { name: 'default', value: '' },
-  { name: 'red', value: '#ef4444' },
-  { name: 'orange', value: '#f97316' },
-  { name: 'yellow', value: '#eab308' },
-  { name: 'green', value: '#22c55e' },
-  { name: 'blue', value: '#3b82f6' },
-  { name: 'indigo', value: '#6366f1' },
-  { name: 'violet', value: '#a855f7' },
+const textColors = [
+  { label: 'Gray', value: '#9ca3af' },
+  { label: 'Brown', value: '#92400e' },
+  { label: 'Orange', value: '#ea580c' },
+  { label: 'Yellow', value: '#ca8a04' },
+  { label: 'Green', value: '#16a34a' },
+  { label: 'Blue', value: '#2563eb' },
+  { label: 'Purple', value: '#9333ea' },
+  { label: 'Magenta', value: '#c026d3' },
+  { label: 'Red', value: '#dc2626' },
 ]
 
-function hasTextColor(editor: Editor<EditorExtension>, color: string) {
-  return editor.marks.textColor.isActive({ color })
+const backgroundColors = [
+  { label: 'Gray', value: '#f3f4f6' },
+  { label: 'Brown', value: '#fef3c7' },
+  { label: 'Orange', value: '#ffedd5' },
+  { label: 'Yellow', value: '#fef9c3' },
+  { label: 'Green', value: '#d1fae5' },
+  { label: 'Blue', value: '#dbeafe' },
+  { label: 'Purple', value: '#e9d5ff' },
+  { label: 'Pink', value: '#fce7f3' },
+  { label: 'Red', value: '#fecaca' },
+]
+
+function getTextColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'currentColor',
+      isActive: !editor.marks.textColor.isActive(),
+      onClick: () => editor.commands.removeTextColor(),
+    },
+  ].concat(
+    textColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.textColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addTextColor({ color: color.value }),
+    })),
+  )
 }
 
-function getColorState(editor: Editor<EditorExtension>) {
-  return colors.map((color) => ({
-    name: color.name,
-    value: color.value,
-    isActive: hasTextColor(editor, color.value),
-  }))
+function getBackgroundColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'canvas',
+      isActive: !editor.marks.backgroundColor.isActive(),
+      onClick: () => editor.commands.removeBackgroundColor(),
+    },
+  ].concat(
+    backgroundColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),
+    })),
+  )
 }
 
 export default function InlineMenu() {
-  const editor = useEditor<EditorExtension>()
-  const colorState = useEditorDerivedValue(getColorState)
+  const textColorState = useEditorDerivedValue(getTextColorState)
+  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
   const [open, setOpen] = useState(false)
 
-  const toggleTextColor = (color: string) => {
-    if (!color || hasTextColor(editor, color)) {
-      editor.commands.removeTextColor()
-    } else {
-      editor.commands.setTextColor({ color })
-    }
-  }
-
   const keymap: Keymap = useMemo(
     () => ({
       Escape: () => {
@@ -64,16 +93,46 @@ export default function InlineMenu() {
       open={open}
       onOpenChange={setOpen}
     >
-      {colorState.map((color) => (
-        <Button
-          key={color.name}
-          pressed={color.isActive}
-          tooltip={color.name}
-          onClick={() => toggleTextColor(color.value)}
-        >
-          <span style={{ color: color.value }}>A</span>
-        </Button>
-      ))}
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex flex-col gap-2">
+          <div className="text-sm">Text color</div>
+          <div className="grid grid-cols-5 gap-1">
+            {textColorState.map((color) => (
+              <Button
+                key={color.label}
+                pressed={color.isActive}
+                tooltip={`Text: ${color.label}`}
+                onClick={color.onClick}
+              >
+                <span
+                  className="text-base font-medium"
+                  style={{ color: color.value }}
+                >
+                  A
+                </span>
+              </Button>
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <div className="text-sm">Background color</div>
+          <div className="grid grid-cols-5 gap-1">
+            {backgroundColorState.map((color) => (
+              <Button
+                key={color.label}
+                pressed={color.isActive}
+                tooltip={`Background: ${color.label}`}
+                onClick={color.onClick}
+              >
+                <div
+                  className="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+                  style={{ backgroundColor: color.value }}
+                />
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
     </InlinePopover>
   )
 }
diff --git a/preact-text-color/src/components/editor/examples/text-color/text-color.ts b/preact-text-color/src/components/editor/examples/text-color/text-color.ts
deleted file mode 100644
index 1cdd7f9cad..0000000000
--- a/preact-text-color/src/components/editor/examples/text-color/text-color.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  addMark,
-  defineCommands,
-  defineMarkSpec,
-  removeMark,
-  union,
-} from 'prosekit/core'
-import type { Command } from 'prosekit/pm/state'
-
-/**
- * The attributes for the `textColor` mark.
- *
- * @public
- */
-export interface TextColorAttrs {
-  color: string | null
-}
-
-/**
- * Defines the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorSpec() {
-  return defineMarkSpec<'textColor', TextColorAttrs>({
-    name: 'textColor',
-    attrs: {
-      color: { default: null },
-    },
-    parseDOM: [
-      {
-        style: 'color',
-        getAttrs: (value) => {
-          return { color: value }
-        },
-      },
-    ],
-    toDOM: (mark) => {
-      return ['span', { style: `color: ${mark.attrs.color};` }, 0]
-    },
-  })
-}
-
-function setTextColor(attrs: TextColorAttrs): Command {
-  return addMark({ type: 'textColor', attrs })
-}
-
-function removeTextColor(): Command {
-  return removeMark({ type: 'textColor' })
-}
-
-/**
- * Defines some commands for the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorCommands() {
-  return defineCommands({
-    setTextColor,
-    removeTextColor,
-  })
-}
-
-/**
- * Defines the `textColor` mark and some commands for it.
- *
- * @public
- */
-export function defineTextColor() {
-  return union(defineTextColorSpec(), defineTextColorCommands())
-}
diff --git a/preact-text-color/src/components/editor/sample/sample-doc-text-color.ts b/preact-text-color/src/components/editor/sample/sample-doc-text-color.ts
index 99e9093157..a4efe4308d 100644
--- a/preact-text-color/src/components/editor/sample/sample-doc-text-color.ts
+++ b/preact-text-color/src/components/editor/sample/sample-doc-text-color.ts
@@ -12,7 +12,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(239, 68, 68)',
+                color: '#ef4444',
               },
             },
           ],
@@ -28,7 +28,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(249, 115, 22)',
+                color: '#f97316',
               },
             },
           ],
@@ -44,7 +44,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(234, 179, 8)',
+                color: '#eab308',
               },
             },
           ],
@@ -60,7 +60,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(34, 197, 94)',
+                color: '#22c55e',
               },
             },
           ],
@@ -76,7 +76,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(59, 130, 246)',
+                color: '#3b82f6',
               },
             },
           ],
@@ -92,7 +92,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(99, 102, 241)',
+                color: '#6366f1',
               },
             },
           ],
@@ -108,7 +108,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(168, 85, 247)',
+                color: '#a855f7',
               },
             },
           ],
diff --git a/preact-toolbar/package.json b/preact-toolbar/package.json
index dd600373b9..d13f40d5ba 100644
--- a/preact-toolbar/package.json
+++ b/preact-toolbar/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-typography/package.json b/preact-typography/package.json
index defef82155..df8dc3dd85 100644
--- a/preact-typography/package.json
+++ b/preact-typography/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-underline/package.json b/preact-underline/package.json
index 7eef1891c9..8f2c61c143 100644
--- a/preact-underline/package.json
+++ b/preact-underline/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-unmount/package.json b/preact-unmount/package.json
index 02efb21d6e..601b7203bc 100644
--- a/preact-unmount/package.json
+++ b/preact-unmount/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-user-menu-dynamic/package.json b/preact-user-menu-dynamic/package.json
index b5c3dbde56..b845027011 100644
--- a/preact-user-menu-dynamic/package.json
+++ b/preact-user-menu-dynamic/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-user-menu/package.json b/preact-user-menu/package.json
index db8171dc13..c4f2cff36b 100644
--- a/preact-user-menu/package.json
+++ b/preact-user-menu/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-word-counter/package.json b/preact-word-counter/package.json
index 82e28c0b80..6bd5137234 100644
--- a/preact-word-counter/package.json
+++ b/preact-word-counter/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/preact-yjs/package.json b/preact-yjs/package.json
index a6e212865a..d2d1e0a8ea 100644
--- a/preact-yjs/package.json
+++ b/preact-yjs/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "preact": "^10.28.3",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.7",
     "y-websocket": "^3.0.0",
diff --git a/preact-yjs/src/components/editor/examples/yjs/extension.ts b/preact-yjs/src/components/editor/examples/yjs/extension.ts
index 54348984a8..f1a581932b 100644
--- a/preact-yjs/src/components/editor/examples/yjs/extension.ts
+++ b/preact-yjs/src/components/editor/examples/yjs/extension.ts
@@ -17,7 +17,7 @@ import { defineText } from 'prosekit/extensions/text'
 import { defineUnderline } from 'prosekit/extensions/underline'
 import { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'
 import { defineYjs } from 'prosekit/extensions/yjs'
-import type { Awareness } from 'y-protocols/awareness'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import type * as Y from 'yjs'
 
 export function defineExtension(doc: Y.Doc, awareness: Awareness) {
diff --git a/react-block-handle/package.json b/react-block-handle/package.json
index 9076df9bb1..49ab886c9a 100644
--- a/react-block-handle/package.json
+++ b/react-block-handle/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-blockquote/package.json b/react-blockquote/package.json
index d7d1ee566b..3646218998 100644
--- a/react-blockquote/package.json
+++ b/react-blockquote/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-bold/package.json b/react-bold/package.json
index a1025b281e..668236ba53 100644
--- a/react-bold/package.json
+++ b/react-bold/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-change-tracking/package.json b/react-change-tracking/package.json
index a360a739d5..ba0a8dd803 100644
--- a/react-change-tracking/package.json
+++ b/react-change-tracking/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-code-block-themes/package.json b/react-code-block-themes/package.json
index 4b992dd897..023a37086b 100644
--- a/react-code-block-themes/package.json
+++ b/react-code-block-themes/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-code-block/package.json b/react-code-block/package.json
index c2da88b60e..f8a58d39bf 100644
--- a/react-code-block/package.json
+++ b/react-code-block/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-code/package.json b/react-code/package.json
index 53bbf02fc2..cca43621c2 100644
--- a/react-code/package.json
+++ b/react-code/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-drop-cursor/package.json b/react-drop-cursor/package.json
index ac61bbff00..0bc5ed4a1a 100644
--- a/react-drop-cursor/package.json
+++ b/react-drop-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-emoji-rules/package.json b/react-emoji-rules/package.json
index 3744943548..3060d76e37 100644
--- a/react-emoji-rules/package.json
+++ b/react-emoji-rules/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-full/package.json b/react-full/package.json
index 1ef9fbe7eb..9ff24409a3 100644
--- a/react-full/package.json
+++ b/react-full/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-gap-cursor/package.json b/react-gap-cursor/package.json
index c1f361b555..6549deaaca 100644
--- a/react-gap-cursor/package.json
+++ b/react-gap-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-hard-break/package.json b/react-hard-break/package.json
index c7b7959fa6..499bd157c1 100644
--- a/react-hard-break/package.json
+++ b/react-hard-break/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-heading/package.json b/react-heading/package.json
index 3c9664d81d..82b8ffc583 100644
--- a/react-heading/package.json
+++ b/react-heading/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-horizontal-rule/package.json b/react-horizontal-rule/package.json
index 4b36d14932..c541b1a820 100644
--- a/react-horizontal-rule/package.json
+++ b/react-horizontal-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-image-view/package.json b/react-image-view/package.json
index d1ccf49f71..87a9009e81 100644
--- a/react-image-view/package.json
+++ b/react-image-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-inline-menu/package.json b/react-inline-menu/package.json
index d793e204d6..b310378068 100644
--- a/react-inline-menu/package.json
+++ b/react-inline-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-italic/package.json b/react-italic/package.json
index 3d37ef20e2..9989d1f3db 100644
--- a/react-italic/package.json
+++ b/react-italic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-keymap/package.json b/react-keymap/package.json
index 7d9cb06a36..1fcad12d12 100644
--- a/react-keymap/package.json
+++ b/react-keymap/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-link-mark-view/package.json b/react-link-mark-view/package.json
index 5b2cd8ecfd..13cb988b2d 100644
--- a/react-link-mark-view/package.json
+++ b/react-link-mark-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-link/package.json b/react-link/package.json
index 5c91c1f5d3..30fdd6f5b0 100644
--- a/react-link/package.json
+++ b/react-link/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-list-custom-checkbox/package.json b/react-list-custom-checkbox/package.json
index 542becbe58..55ca0e6f20 100644
--- a/react-list-custom-checkbox/package.json
+++ b/react-list-custom-checkbox/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-list/package.json b/react-list/package.json
index 370b787f1e..5d7dbe9cff 100644
--- a/react-list/package.json
+++ b/react-list/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-loro/package.json b/react-loro/package.json
index a8c4cb7b10..0a6c270c81 100644
--- a/react-loro/package.json
+++ b/react-loro/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "loro-crdt": "^1.10.6",
     "loro-prosemirror": "^0.4.2",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-mark-rule/package.json b/react-mark-rule/package.json
index 1d8cf30e8e..367240bcce 100644
--- a/react-mark-rule/package.json
+++ b/react-mark-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-minimal/package.json b/react-minimal/package.json
index 21473cf529..4db63e9509 100644
--- a/react-minimal/package.json
+++ b/react-minimal/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-placeholder/package.json b/react-placeholder/package.json
index 9600145f8c..603c3ae257 100644
--- a/react-placeholder/package.json
+++ b/react-placeholder/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-readonly/package.json b/react-readonly/package.json
index 74e33051ed..cbc50511dc 100644
--- a/react-readonly/package.json
+++ b/react-readonly/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-rtl/package.json b/react-rtl/package.json
index 789dbdb88b..ec3fda6262 100644
--- a/react-rtl/package.json
+++ b/react-rtl/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-save-html/package.json b/react-save-html/package.json
index a39d484b22..79e1c31f9c 100644
--- a/react-save-html/package.json
+++ b/react-save-html/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-save-json/package.json b/react-save-json/package.json
index f655a8dc16..404b7bd834 100644
--- a/react-save-json/package.json
+++ b/react-save-json/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-save-markdown/package.json b/react-save-markdown/package.json
index 8d323680d2..3dac54eed8 100644
--- a/react-save-markdown/package.json
+++ b/react-save-markdown/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "rehype-parse": "^9.0.1",
diff --git a/react-search/package.json b/react-search/package.json
index faf3b4ec74..ad9ec0438c 100644
--- a/react-search/package.json
+++ b/react-search/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-slash-menu/package.json b/react-slash-menu/package.json
index 85635a2607..7d1fec3962 100644
--- a/react-slash-menu/package.json
+++ b/react-slash-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-strike/package.json b/react-strike/package.json
index c8f62bb04d..92bf58e1e9 100644
--- a/react-strike/package.json
+++ b/react-strike/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-table/package.json b/react-table/package.json
index 67a175b50a..c7085c79eb 100644
--- a/react-table/package.json
+++ b/react-table/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-text-align/package.json b/react-text-align/package.json
index 5188573621..afb7a6100e 100644
--- a/react-text-align/package.json
+++ b/react-text-align/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-text-color/package.json b/react-text-color/package.json
index 0585b4eaf4..7cfc6b2064 100644
--- a/react-text-color/package.json
+++ b/react-text-color/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-text-color/src/components/editor/examples/text-color/extension.ts b/react-text-color/src/components/editor/examples/text-color/extension.ts
index 855eca05b4..d35d9d5c22 100644
--- a/react-text-color/src/components/editor/examples/text-color/extension.ts
+++ b/react-text-color/src/components/editor/examples/text-color/extension.ts
@@ -1,10 +1,14 @@
 import { defineBasicExtension } from 'prosekit/basic'
 import { union } from 'prosekit/core'
-
-import { defineTextColor } from './text-color'
+import { defineBackgroundColor } from 'prosekit/extensions/background-color'
+import { defineTextColor } from 'prosekit/extensions/text-color'
 
 export function defineExtension() {
-  return union(defineBasicExtension(), defineTextColor())
+  return union(
+    defineBasicExtension(),
+    defineTextColor(),
+    defineBackgroundColor(),
+  )
 }
 
 export type EditorExtension = ReturnType<typeof defineExtension>
diff --git a/react-text-color/src/components/editor/examples/text-color/inline-menu.tsx b/react-text-color/src/components/editor/examples/text-color/inline-menu.tsx
index 6e91ae6c35..9e22438ce9 100644
--- a/react-text-color/src/components/editor/examples/text-color/inline-menu.tsx
+++ b/react-text-color/src/components/editor/examples/text-color/inline-menu.tsx
@@ -1,5 +1,5 @@
 import type { Editor, Keymap } from 'prosekit/core'
-import { useEditor, useEditorDerivedValue, useKeymap } from 'prosekit/react'
+import { useEditorDerivedValue, useKeymap } from 'prosekit/react'
 import { InlinePopover } from 'prosekit/react/inline-popover'
 import { useMemo, useState } from 'react'
 
@@ -7,42 +7,71 @@ import { Button } from '../../ui/button'
 
 import type { EditorExtension } from './extension'
 
-const colors = [
-  { name: 'default', value: '' },
-  { name: 'red', value: '#ef4444' },
-  { name: 'orange', value: '#f97316' },
-  { name: 'yellow', value: '#eab308' },
-  { name: 'green', value: '#22c55e' },
-  { name: 'blue', value: '#3b82f6' },
-  { name: 'indigo', value: '#6366f1' },
-  { name: 'violet', value: '#a855f7' },
+const textColors = [
+  { label: 'Gray', value: '#9ca3af' },
+  { label: 'Brown', value: '#92400e' },
+  { label: 'Orange', value: '#ea580c' },
+  { label: 'Yellow', value: '#ca8a04' },
+  { label: 'Green', value: '#16a34a' },
+  { label: 'Blue', value: '#2563eb' },
+  { label: 'Purple', value: '#9333ea' },
+  { label: 'Magenta', value: '#c026d3' },
+  { label: 'Red', value: '#dc2626' },
 ]
 
-function hasTextColor(editor: Editor<EditorExtension>, color: string) {
-  return editor.marks.textColor.isActive({ color })
+const backgroundColors = [
+  { label: 'Gray', value: '#f3f4f6' },
+  { label: 'Brown', value: '#fef3c7' },
+  { label: 'Orange', value: '#ffedd5' },
+  { label: 'Yellow', value: '#fef9c3' },
+  { label: 'Green', value: '#d1fae5' },
+  { label: 'Blue', value: '#dbeafe' },
+  { label: 'Purple', value: '#e9d5ff' },
+  { label: 'Pink', value: '#fce7f3' },
+  { label: 'Red', value: '#fecaca' },
+]
+
+function getTextColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'currentColor',
+      isActive: !editor.marks.textColor.isActive(),
+      onClick: () => editor.commands.removeTextColor(),
+    },
+  ].concat(
+    textColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.textColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addTextColor({ color: color.value }),
+    })),
+  )
 }
 
-function getColorState(editor: Editor<EditorExtension>) {
-  return colors.map((color) => ({
-    name: color.name,
-    value: color.value,
-    isActive: hasTextColor(editor, color.value),
-  }))
+function getBackgroundColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'canvas',
+      isActive: !editor.marks.backgroundColor.isActive(),
+      onClick: () => editor.commands.removeBackgroundColor(),
+    },
+  ].concat(
+    backgroundColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),
+    })),
+  )
 }
 
 export default function InlineMenu() {
-  const editor = useEditor<EditorExtension>()
-  const colorState = useEditorDerivedValue(getColorState)
+  const textColorState = useEditorDerivedValue(getTextColorState)
+  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
   const [open, setOpen] = useState(false)
 
-  const toggleTextColor = (color: string) => {
-    if (!color || hasTextColor(editor, color)) {
-      editor.commands.removeTextColor()
-    } else {
-      editor.commands.setTextColor({ color })
-    }
-  }
-
   const keymap: Keymap = useMemo(
     () => ({
       Escape: () => {
@@ -64,16 +93,46 @@ export default function InlineMenu() {
       open={open}
       onOpenChange={setOpen}
     >
-      {colorState.map((color) => (
-        <Button
-          key={color.name}
-          pressed={color.isActive}
-          tooltip={color.name}
-          onClick={() => toggleTextColor(color.value)}
-        >
-          <span style={{ color: color.value }}>A</span>
-        </Button>
-      ))}
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex flex-col gap-2">
+          <div className="text-sm">Text color</div>
+          <div className="grid grid-cols-5 gap-1">
+            {textColorState.map((color) => (
+              <Button
+                key={color.label}
+                pressed={color.isActive}
+                tooltip={`Text: ${color.label}`}
+                onClick={color.onClick}
+              >
+                <span
+                  className="text-base font-medium"
+                  style={{ color: color.value }}
+                >
+                  A
+                </span>
+              </Button>
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <div className="text-sm">Background color</div>
+          <div className="grid grid-cols-5 gap-1">
+            {backgroundColorState.map((color) => (
+              <Button
+                key={color.label}
+                pressed={color.isActive}
+                tooltip={`Background: ${color.label}`}
+                onClick={color.onClick}
+              >
+                <div
+                  className="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+                  style={{ backgroundColor: color.value }}
+                />
+              </Button>
+            ))}
+          </div>
+        </div>
+      </div>
     </InlinePopover>
   )
 }
diff --git a/react-text-color/src/components/editor/examples/text-color/text-color.ts b/react-text-color/src/components/editor/examples/text-color/text-color.ts
deleted file mode 100644
index 1cdd7f9cad..0000000000
--- a/react-text-color/src/components/editor/examples/text-color/text-color.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  addMark,
-  defineCommands,
-  defineMarkSpec,
-  removeMark,
-  union,
-} from 'prosekit/core'
-import type { Command } from 'prosekit/pm/state'
-
-/**
- * The attributes for the `textColor` mark.
- *
- * @public
- */
-export interface TextColorAttrs {
-  color: string | null
-}
-
-/**
- * Defines the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorSpec() {
-  return defineMarkSpec<'textColor', TextColorAttrs>({
-    name: 'textColor',
-    attrs: {
-      color: { default: null },
-    },
-    parseDOM: [
-      {
-        style: 'color',
-        getAttrs: (value) => {
-          return { color: value }
-        },
-      },
-    ],
-    toDOM: (mark) => {
-      return ['span', { style: `color: ${mark.attrs.color};` }, 0]
-    },
-  })
-}
-
-function setTextColor(attrs: TextColorAttrs): Command {
-  return addMark({ type: 'textColor', attrs })
-}
-
-function removeTextColor(): Command {
-  return removeMark({ type: 'textColor' })
-}
-
-/**
- * Defines some commands for the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorCommands() {
-  return defineCommands({
-    setTextColor,
-    removeTextColor,
-  })
-}
-
-/**
- * Defines the `textColor` mark and some commands for it.
- *
- * @public
- */
-export function defineTextColor() {
-  return union(defineTextColorSpec(), defineTextColorCommands())
-}
diff --git a/react-text-color/src/components/editor/sample/sample-doc-text-color.ts b/react-text-color/src/components/editor/sample/sample-doc-text-color.ts
index 99e9093157..a4efe4308d 100644
--- a/react-text-color/src/components/editor/sample/sample-doc-text-color.ts
+++ b/react-text-color/src/components/editor/sample/sample-doc-text-color.ts
@@ -12,7 +12,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(239, 68, 68)',
+                color: '#ef4444',
               },
             },
           ],
@@ -28,7 +28,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(249, 115, 22)',
+                color: '#f97316',
               },
             },
           ],
@@ -44,7 +44,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(234, 179, 8)',
+                color: '#eab308',
               },
             },
           ],
@@ -60,7 +60,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(34, 197, 94)',
+                color: '#22c55e',
               },
             },
           ],
@@ -76,7 +76,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(59, 130, 246)',
+                color: '#3b82f6',
               },
             },
           ],
@@ -92,7 +92,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(99, 102, 241)',
+                color: '#6366f1',
               },
             },
           ],
@@ -108,7 +108,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(168, 85, 247)',
+                color: '#a855f7',
               },
             },
           ],
diff --git a/react-toolbar/package.json b/react-toolbar/package.json
index e05f5f4605..a22947f329 100644
--- a/react-toolbar/package.json
+++ b/react-toolbar/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-tweet/package.json b/react-tweet/package.json
index a35efe22bf..845f56cd68 100644
--- a/react-tweet/package.json
+++ b/react-tweet/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-parallax-tilt": "^1.7.319",
diff --git a/react-typography/package.json b/react-typography/package.json
index ccb45cb5b7..2e038d00dd 100644
--- a/react-typography/package.json
+++ b/react-typography/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-underline/package.json b/react-underline/package.json
index ee4b4b25fd..70990d4349 100644
--- a/react-underline/package.json
+++ b/react-underline/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-unmount/package.json b/react-unmount/package.json
index cd714facf7..567bbbb3aa 100644
--- a/react-unmount/package.json
+++ b/react-unmount/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-user-menu-dynamic/package.json b/react-user-menu-dynamic/package.json
index 2af4241cd5..1a046e2440 100644
--- a/react-user-menu-dynamic/package.json
+++ b/react-user-menu-dynamic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-user-menu/package.json b/react-user-menu/package.json
index bc465192bc..b32092f2b4 100644
--- a/react-user-menu/package.json
+++ b/react-user-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-word-counter/package.json b/react-word-counter/package.json
index cd82f670fc..25e4a875fb 100644
--- a/react-word-counter/package.json
+++ b/react-word-counter/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
diff --git a/react-yjs/package.json b/react-yjs/package.json
index adaa8be94e..ec276efcb2 100644
--- a/react-yjs/package.json
+++ b/react-yjs/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "y-prosemirror": "^1.3.7",
diff --git a/react-yjs/src/components/editor/examples/yjs/extension.ts b/react-yjs/src/components/editor/examples/yjs/extension.ts
index 54348984a8..f1a581932b 100644
--- a/react-yjs/src/components/editor/examples/yjs/extension.ts
+++ b/react-yjs/src/components/editor/examples/yjs/extension.ts
@@ -17,7 +17,7 @@ import { defineText } from 'prosekit/extensions/text'
 import { defineUnderline } from 'prosekit/extensions/underline'
 import { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'
 import { defineYjs } from 'prosekit/extensions/yjs'
-import type { Awareness } from 'y-protocols/awareness'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import type * as Y from 'yjs'
 
 export function defineExtension(doc: Y.Doc, awareness: Awareness) {
diff --git a/solid-block-handle/package.json b/solid-block-handle/package.json
index 02579d1380..1684fb0366 100644
--- a/solid-block-handle/package.json
+++ b/solid-block-handle/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-blockquote/package.json b/solid-blockquote/package.json
index afb969abdb..6b2eded945 100644
--- a/solid-blockquote/package.json
+++ b/solid-blockquote/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-bold/package.json b/solid-bold/package.json
index 0c9e8d8a84..99c94139b0 100644
--- a/solid-bold/package.json
+++ b/solid-bold/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-change-tracking/package.json b/solid-change-tracking/package.json
index 5e79668439..4761e1174c 100644
--- a/solid-change-tracking/package.json
+++ b/solid-change-tracking/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-code-block-themes/package.json b/solid-code-block-themes/package.json
index 47f1bd9faf..af14090d05 100644
--- a/solid-code-block-themes/package.json
+++ b/solid-code-block-themes/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-code-block/package.json b/solid-code-block/package.json
index fc0366d337..7971e25724 100644
--- a/solid-code-block/package.json
+++ b/solid-code-block/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-code/package.json b/solid-code/package.json
index a20bb3f877..c00f2125c9 100644
--- a/solid-code/package.json
+++ b/solid-code/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-drop-cursor/package.json b/solid-drop-cursor/package.json
index 2dde1638bb..1f98955eb6 100644
--- a/solid-drop-cursor/package.json
+++ b/solid-drop-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-emoji-rules/package.json b/solid-emoji-rules/package.json
index 9f2c699112..7b00818afe 100644
--- a/solid-emoji-rules/package.json
+++ b/solid-emoji-rules/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-full/package.json b/solid-full/package.json
index d3117ed32f..ef8a222492 100644
--- a/solid-full/package.json
+++ b/solid-full/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-gap-cursor/package.json b/solid-gap-cursor/package.json
index b8ce8beb66..c49ab29f55 100644
--- a/solid-gap-cursor/package.json
+++ b/solid-gap-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-hard-break/package.json b/solid-hard-break/package.json
index fff2a1e4c2..59cd8888c8 100644
--- a/solid-hard-break/package.json
+++ b/solid-hard-break/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-heading/package.json b/solid-heading/package.json
index 92553a4a65..2ff25d1897 100644
--- a/solid-heading/package.json
+++ b/solid-heading/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-horizontal-rule/package.json b/solid-horizontal-rule/package.json
index bcc2576dbe..8ee7ecec4f 100644
--- a/solid-horizontal-rule/package.json
+++ b/solid-horizontal-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-image-view/package.json b/solid-image-view/package.json
index 35a98e511f..93e23e6354 100644
--- a/solid-image-view/package.json
+++ b/solid-image-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-inline-menu/package.json b/solid-inline-menu/package.json
index d0df7dcdb1..1e1a3f16f7 100644
--- a/solid-inline-menu/package.json
+++ b/solid-inline-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-italic/package.json b/solid-italic/package.json
index 98479e530f..5d3ec746ef 100644
--- a/solid-italic/package.json
+++ b/solid-italic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-keymap/package.json b/solid-keymap/package.json
index ebb50da3f8..27b73f298d 100644
--- a/solid-keymap/package.json
+++ b/solid-keymap/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-link-mark-view/package.json b/solid-link-mark-view/package.json
index ff98177f4d..d4dc35b6f9 100644
--- a/solid-link-mark-view/package.json
+++ b/solid-link-mark-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-link/package.json b/solid-link/package.json
index e2d90b19a0..fe539be41d 100644
--- a/solid-link/package.json
+++ b/solid-link/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-list-custom-checkbox/package.json b/solid-list-custom-checkbox/package.json
index 7075ad6c35..e12bbc3951 100644
--- a/solid-list-custom-checkbox/package.json
+++ b/solid-list-custom-checkbox/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-list/package.json b/solid-list/package.json
index 9981fd9646..345b126c33 100644
--- a/solid-list/package.json
+++ b/solid-list/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-loro/package.json b/solid-loro/package.json
index 5100d8ab6d..e1668332a1 100644
--- a/solid-loro/package.json
+++ b/solid-loro/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "loro-crdt": "^1.10.6",
     "loro-prosemirror": "^0.4.2",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-mark-rule/package.json b/solid-mark-rule/package.json
index 18d3e8eb88..8b166581e2 100644
--- a/solid-mark-rule/package.json
+++ b/solid-mark-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-minimal/package.json b/solid-minimal/package.json
index 0f799ed62d..4cb59bb44a 100644
--- a/solid-minimal/package.json
+++ b/solid-minimal/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-placeholder/package.json b/solid-placeholder/package.json
index b33fac70a9..702e4df1cd 100644
--- a/solid-placeholder/package.json
+++ b/solid-placeholder/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-readonly/package.json b/solid-readonly/package.json
index e0f19edeee..3ef69fbc94 100644
--- a/solid-readonly/package.json
+++ b/solid-readonly/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-rtl/package.json b/solid-rtl/package.json
index ab2f743926..e7cb569a67 100644
--- a/solid-rtl/package.json
+++ b/solid-rtl/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-save-html/package.json b/solid-save-html/package.json
index cc60c0ae08..775280ff46 100644
--- a/solid-save-html/package.json
+++ b/solid-save-html/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-save-json/package.json b/solid-save-json/package.json
index 0f196c2611..8a6ad3db0b 100644
--- a/solid-save-json/package.json
+++ b/solid-save-json/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-save-markdown/package.json b/solid-save-markdown/package.json
index 4f10d52d3f..0e4c4e9bc6 100644
--- a/solid-save-markdown/package.json
+++ b/solid-save-markdown/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",
     "remark-gfm": "^4.0.1",
diff --git a/solid-search/package.json b/solid-search/package.json
index 64decd9f14..4e17fffa62 100644
--- a/solid-search/package.json
+++ b/solid-search/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-slash-menu/package.json b/solid-slash-menu/package.json
index 14d7135652..a8cb92eb63 100644
--- a/solid-slash-menu/package.json
+++ b/solid-slash-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-strike/package.json b/solid-strike/package.json
index 20a62bc75e..6172992c12 100644
--- a/solid-strike/package.json
+++ b/solid-strike/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-table/package.json b/solid-table/package.json
index da8ab7fc7f..d191a33513 100644
--- a/solid-table/package.json
+++ b/solid-table/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-text-align/package.json b/solid-text-align/package.json
index 7df219c320..3647e4cb5e 100644
--- a/solid-text-align/package.json
+++ b/solid-text-align/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-text-color/.gitignore b/solid-text-color/.gitignore
new file mode 100644
index 0000000000..5d6225c6df
--- /dev/null
+++ b/solid-text-color/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+.next
+.svelte-kit
diff --git a/solid-text-color/README.md b/solid-text-color/README.md
new file mode 100644
index 0000000000..894ae982fe
--- /dev/null
+++ b/solid-text-color/README.md
@@ -0,0 +1,15 @@
+# solid-text-color
+
+A [ProseKit](https://prosekit.dev) example.
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/prosekit/examples/tree/master/solid-text-color)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/prosekit/examples/tree/master/solid-text-color)
+
+Run the example locally with:
+
+```bash
+npx degit prosekit/examples/solid-text-color solid-text-color
+cd solid-text-color
+npm install
+npm run dev
+```
diff --git a/solid-text-color/index.html b/solid-text-color/index.html
new file mode 100644
index 0000000000..375ea8dbc4
--- /dev/null
+++ b/solid-text-color/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ProseKit + Solid</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/solid-text-color/package.json b/solid-text-color/package.json
new file mode 100644
index 0000000000..0c1c4d1c25
--- /dev/null
+++ b/solid-text-color/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "example-solid-text-color",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b && vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "prosekit": "^0.18.0",
+    "solid-js": "^1.9.11"
+  },
+  "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.9.2",
+    "@iconify-json/lucide": "^1.2.89",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24.10.12",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vite-plugin-solid": "^2.11.10"
+  }
+}
diff --git a/solid-text-color/src/App.tsx b/solid-text-color/src/App.tsx
new file mode 100644
index 0000000000..1225de322a
--- /dev/null
+++ b/solid-text-color/src/App.tsx
@@ -0,0 +1,5 @@
+import { ExampleEditor } from './components/editor/examples/text-color'
+
+export default function App() {
+  return <ExampleEditor />
+}
diff --git a/solid-text-color/src/app.css b/solid-text-color/src/app.css
new file mode 100644
index 0000000000..5d0567ecf8
--- /dev/null
+++ b/solid-text-color/src/app.css
@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+
+@plugin "@egoist/tailwindcss-icons";
+
+body {
+  height: 100svh;
+  display: grid;
+  max-width: 900px;
+  padding: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/solid-text-color/src/components/editor/examples/text-color/editor.tsx b/solid-text-color/src/components/editor/examples/text-color/editor.tsx
new file mode 100644
index 0000000000..443c1b1b96
--- /dev/null
+++ b/solid-text-color/src/components/editor/examples/text-color/editor.tsx
@@ -0,0 +1,35 @@
+import 'prosekit/basic/style.css'
+import 'prosekit/basic/typography.css'
+
+import { createEditor, type NodeJSON } from 'prosekit/core'
+import { ProseKit } from 'prosekit/solid'
+import type { JSX } from 'solid-js'
+
+import { sampleContent } from '../../sample/sample-doc-text-color'
+
+import { defineExtension } from './extension'
+import InlineMenu from './inline-menu'
+
+interface EditorProps {
+  initialContent?: NodeJSON
+}
+
+export default function Editor(props: EditorProps): JSX.Element {
+  const defaultContent = props.initialContent ?? sampleContent
+  const extension = defineExtension()
+  const editor = createEditor({ extension, defaultContent })
+
+  return (
+    <ProseKit editor={editor}>
+      <div class="box-border h-full w-full min-h-36 overflow-y-hidden overflow-x-hidden rounded-md border border-solid border-gray-200 dark:border-gray-700 shadow-sm flex flex-col bg-white dark:bg-gray-950 text-black dark:text-white">
+        <div class="relative w-full flex-1 box-border overflow-y-auto">
+          <div
+            ref={editor.mount}
+            class="ProseMirror box-border min-h-full px-[max(4rem,calc(50%-20rem))] py-8 outline-hidden outline-0 [&_span[data-mention=user]]:text-blue-500 [&_span[data-mention=tag]]:text-violet-500"
+          ></div>
+          <InlineMenu />
+        </div>
+      </div>
+    </ProseKit>
+  )
+}
diff --git a/solid-text-color/src/components/editor/examples/text-color/extension.ts b/solid-text-color/src/components/editor/examples/text-color/extension.ts
new file mode 100644
index 0000000000..d35d9d5c22
--- /dev/null
+++ b/solid-text-color/src/components/editor/examples/text-color/extension.ts
@@ -0,0 +1,14 @@
+import { defineBasicExtension } from 'prosekit/basic'
+import { union } from 'prosekit/core'
+import { defineBackgroundColor } from 'prosekit/extensions/background-color'
+import { defineTextColor } from 'prosekit/extensions/text-color'
+
+export function defineExtension() {
+  return union(
+    defineBasicExtension(),
+    defineTextColor(),
+    defineBackgroundColor(),
+  )
+}
+
+export type EditorExtension = ReturnType<typeof defineExtension>
diff --git a/solid-text-color/src/components/editor/examples/text-color/index.ts b/solid-text-color/src/components/editor/examples/text-color/index.ts
new file mode 100644
index 0000000000..1a07a6017a
--- /dev/null
+++ b/solid-text-color/src/components/editor/examples/text-color/index.ts
@@ -0,0 +1 @@
+export { default as ExampleEditor } from './editor'
diff --git a/solid-text-color/src/components/editor/examples/text-color/inline-menu.tsx b/solid-text-color/src/components/editor/examples/text-color/inline-menu.tsx
new file mode 100644
index 0000000000..0324581274
--- /dev/null
+++ b/solid-text-color/src/components/editor/examples/text-color/inline-menu.tsx
@@ -0,0 +1,137 @@
+import type { Editor, Keymap } from 'prosekit/core'
+import { useEditorDerivedValue, useKeymap } from 'prosekit/solid'
+import { InlinePopover } from 'prosekit/solid/inline-popover'
+import { createSignal, For, type JSX } from 'solid-js'
+
+import { Button } from '../../ui/button'
+
+import type { EditorExtension } from './extension'
+
+const textColors = [
+  { label: 'Gray', value: '#9ca3af' },
+  { label: 'Brown', value: '#92400e' },
+  { label: 'Orange', value: '#ea580c' },
+  { label: 'Yellow', value: '#ca8a04' },
+  { label: 'Green', value: '#16a34a' },
+  { label: 'Blue', value: '#2563eb' },
+  { label: 'Purple', value: '#9333ea' },
+  { label: 'Magenta', value: '#c026d3' },
+  { label: 'Red', value: '#dc2626' },
+]
+
+const backgroundColors = [
+  { label: 'Gray', value: '#f3f4f6' },
+  { label: 'Brown', value: '#fef3c7' },
+  { label: 'Orange', value: '#ffedd5' },
+  { label: 'Yellow', value: '#fef9c3' },
+  { label: 'Green', value: '#d1fae5' },
+  { label: 'Blue', value: '#dbeafe' },
+  { label: 'Purple', value: '#e9d5ff' },
+  { label: 'Pink', value: '#fce7f3' },
+  { label: 'Red', value: '#fecaca' },
+]
+
+function getTextColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'currentColor',
+      isActive: !editor.marks.textColor.isActive(),
+      onClick: () => editor.commands.removeTextColor(),
+    },
+  ].concat(
+    textColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.textColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addTextColor({ color: color.value }),
+    })),
+  )
+}
+
+function getBackgroundColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'canvas',
+      isActive: !editor.marks.backgroundColor.isActive(),
+      onClick: () => editor.commands.removeBackgroundColor(),
+    },
+  ].concat(
+    backgroundColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),
+    })),
+  )
+}
+
+export default function InlineMenu(): JSX.Element {
+  const textColorState = useEditorDerivedValue(getTextColorState)
+  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
+  const [open, setOpen] = createSignal(false)
+
+  const keymap: () => Keymap = () => ({
+    Escape: () => {
+      if (open()) {
+        setOpen(false)
+        return true
+      }
+      return false
+    },
+  })
+
+  useKeymap(keymap)
+
+  return (
+    <InlinePopover
+      class="z-10 box-border border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1"
+      open={open()}
+      onOpenChange={setOpen}
+    >
+      <div class="flex flex-col gap-4 p-4">
+        <div class="flex flex-col gap-2">
+          <div class="text-sm">Text color</div>
+          <div class="grid grid-cols-5 gap-1">
+            <For each={textColorState()}>
+              {(color) => (
+                <Button
+                  pressed={color.isActive}
+                  tooltip={`Text: ${color.label}`}
+                  onClick={color.onClick}
+                >
+                  <span
+                    class="text-base font-medium"
+                    style={{ color: color.value }}
+                  >
+                    A
+                  </span>
+                </Button>
+              )}
+            </For>
+          </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          <div class="text-sm">Background color</div>
+          <div class="grid grid-cols-5 gap-1">
+            <For each={backgroundColorState()}>
+              {(color) => (
+                <Button
+                  pressed={color.isActive}
+                  tooltip={`Background: ${color.label}`}
+                  onClick={color.onClick}
+                >
+                  <div
+                    class="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+                    style={{ 'background-color': color.value }}
+                  />
+                </Button>
+              )}
+            </For>
+          </div>
+        </div>
+      </div>
+    </InlinePopover>
+  )
+}
diff --git a/solid-text-color/src/components/editor/sample/sample-doc-text-color.ts b/solid-text-color/src/components/editor/sample/sample-doc-text-color.ts
new file mode 100644
index 0000000000..a4efe4308d
--- /dev/null
+++ b/solid-text-color/src/components/editor/sample/sample-doc-text-color.ts
@@ -0,0 +1,120 @@
+import type { NodeJSON } from 'prosekit/core'
+
+export const sampleContent: NodeJSON = {
+  type: 'doc',
+  content: [
+    {
+      type: 'paragraph',
+      content: [
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#ef4444',
+              },
+            },
+          ],
+          text: 'Select',
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#f97316',
+              },
+            },
+          ],
+          text: 'some',
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#eab308',
+              },
+            },
+          ],
+          text: 'text',
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#22c55e',
+              },
+            },
+          ],
+          text: 'to',
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#3b82f6',
+              },
+            },
+          ],
+          text: 'change',
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#6366f1',
+              },
+            },
+          ],
+          text: 'the',
+        },
+        {
+          type: 'text',
+          text: ' ',
+        },
+        {
+          type: 'text',
+          marks: [
+            {
+              type: 'textColor',
+              attrs: {
+                color: '#a855f7',
+              },
+            },
+          ],
+          text: 'color',
+        },
+      ],
+    },
+  ],
+}
diff --git a/solid-text-color/src/components/editor/ui/button/button.tsx b/solid-text-color/src/components/editor/ui/button/button.tsx
new file mode 100644
index 0000000000..9094b5c68c
--- /dev/null
+++ b/solid-text-color/src/components/editor/ui/button/button.tsx
@@ -0,0 +1,39 @@
+import {
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger,
+} from 'prosekit/solid/tooltip'
+import type { JSX } from 'solid-js'
+
+export default function Button(props: {
+  pressed?: boolean
+  disabled?: boolean
+  onClick?: () => void
+  tooltip?: string
+  children: JSX.Element
+}): JSX.Element {
+  return (
+    <TooltipRoot>
+      <TooltipTrigger class="block">
+        <button
+          data-state={props.pressed ? 'on' : 'off'}
+          disabled={props.disabled}
+          onClick={props.onClick}
+          onMouseDown={(event) => {
+            // Prevent the editor from being blurred when the button is clicked
+            event.preventDefault()
+          }}
+          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"
+        >
+          {props.children}
+          {props.tooltip ? <span class="sr-only">{props.tooltip}</span> : null}
+        </button>
+      </TooltipTrigger>
+      {props.tooltip ? (
+        <TooltipContent class="z-50 overflow-hidden rounded-md border border-solid bg-gray-900 dark:bg-gray-50 px-3 py-1.5 text-xs text-gray-50 dark:text-gray-900 shadow-xs [&:not([data-state])]:hidden will-change-transform motion-safe:data-[state=open]:animate-in motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=open]:zoom-in-95 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:animate-duration-150 motion-safe:data-[state=closed]:animate-duration-200 motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=bottom]:slide-out-to-top-2 motion-safe:data-[side=left]:slide-in-from-right-2 motion-safe:data-[side=left]:slide-out-to-right-2 motion-safe:data-[side=right]:slide-in-from-left-2 motion-safe:data-[side=right]:slide-out-to-left-2 motion-safe:data-[side=top]:slide-in-from-bottom-2 motion-safe:data-[side=top]:slide-out-to-bottom-2">
+          {props.tooltip}
+        </TooltipContent>
+      ) : null}
+    </TooltipRoot>
+  )
+}
diff --git a/solid-text-color/src/components/editor/ui/button/index.ts b/solid-text-color/src/components/editor/ui/button/index.ts
new file mode 100644
index 0000000000..9743944eda
--- /dev/null
+++ b/solid-text-color/src/components/editor/ui/button/index.ts
@@ -0,0 +1 @@
+export { default as Button } from './button'
diff --git a/solid-text-color/src/index.tsx b/solid-text-color/src/index.tsx
new file mode 100644
index 0000000000..92b7740757
--- /dev/null
+++ b/solid-text-color/src/index.tsx
@@ -0,0 +1,8 @@
+/* @refresh reload */
+import './app.css'
+import { render } from 'solid-js/web'
+import App from './App'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
diff --git a/solid-text-color/tsconfig.app.json b/solid-text-color/tsconfig.app.json
new file mode 100644
index 0000000000..c0b480e758
--- /dev/null
+++ b/solid-text-color/tsconfig.app.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/solid-text-color/tsconfig.json b/solid-text-color/tsconfig.json
new file mode 100644
index 0000000000..1ffef600d9
--- /dev/null
+++ b/solid-text-color/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/solid-text-color/tsconfig.node.json b/solid-text-color/tsconfig.node.json
new file mode 100644
index 0000000000..8a67f62f4c
--- /dev/null
+++ b/solid-text-color/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/solid-text-color/vite.config.ts b/solid-text-color/vite.config.ts
new file mode 100644
index 0000000000..9cb3cb51fd
--- /dev/null
+++ b/solid-text-color/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import solid from 'vite-plugin-solid'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [solid(), tailwindcss()],
+})
diff --git a/solid-toolbar/package.json b/solid-toolbar/package.json
index 3d9cafd801..8c29d7af83 100644
--- a/solid-toolbar/package.json
+++ b/solid-toolbar/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-typography/package.json b/solid-typography/package.json
index 752217467b..74a687ad09 100644
--- a/solid-typography/package.json
+++ b/solid-typography/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-underline/package.json b/solid-underline/package.json
index 51f796a9ef..eb2a9e8262 100644
--- a/solid-underline/package.json
+++ b/solid-underline/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-unmount/package.json b/solid-unmount/package.json
index 0dc7b3eb46..5c3799eca0 100644
--- a/solid-unmount/package.json
+++ b/solid-unmount/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-user-menu-dynamic/package.json b/solid-user-menu-dynamic/package.json
index 424d77ce2a..a7a95b8cab 100644
--- a/solid-user-menu-dynamic/package.json
+++ b/solid-user-menu-dynamic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-user-menu/package.json b/solid-user-menu/package.json
index eb955ab8d8..bd6cdfabf0 100644
--- a/solid-user-menu/package.json
+++ b/solid-user-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-word-counter/package.json b/solid-word-counter/package.json
index 4fa60c75b2..1058766087 100644
--- a/solid-word-counter/package.json
+++ b/solid-word-counter/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11"
   },
   "devDependencies": {
diff --git a/solid-yjs/package.json b/solid-yjs/package.json
index 35686ea157..6f2ce24bc6 100644
--- a/solid-yjs/package.json
+++ b/solid-yjs/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "solid-js": "^1.9.11",
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.7",
diff --git a/solid-yjs/src/components/editor/examples/yjs/extension.ts b/solid-yjs/src/components/editor/examples/yjs/extension.ts
index bc24b13ef9..b2546b126e 100644
--- a/solid-yjs/src/components/editor/examples/yjs/extension.ts
+++ b/solid-yjs/src/components/editor/examples/yjs/extension.ts
@@ -17,7 +17,7 @@ import { defineText } from 'prosekit/extensions/text'
 import { defineUnderline } from 'prosekit/extensions/underline'
 import { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'
 import { defineYjs } from 'prosekit/extensions/yjs'
-import type { Awareness } from 'y-protocols/awareness'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import type * as Y from 'yjs'
 
 export function defineExtension(doc: Y.Doc, awareness: Awareness) {
diff --git a/svelte-block-handle/package.json b/svelte-block-handle/package.json
index 8fb84d17d8..5692867a27 100644
--- a/svelte-block-handle/package.json
+++ b/svelte-block-handle/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-blockquote/package.json b/svelte-blockquote/package.json
index e4e0688380..92c97e945e 100644
--- a/svelte-blockquote/package.json
+++ b/svelte-blockquote/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-bold/package.json b/svelte-bold/package.json
index bcca0e1555..7ba3dfb118 100644
--- a/svelte-bold/package.json
+++ b/svelte-bold/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-change-tracking/package.json b/svelte-change-tracking/package.json
index efea028011..d7c9d74468 100644
--- a/svelte-change-tracking/package.json
+++ b/svelte-change-tracking/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-code-block-themes/package.json b/svelte-code-block-themes/package.json
index 655d00ecaf..f1b91750a4 100644
--- a/svelte-code-block-themes/package.json
+++ b/svelte-code-block-themes/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-code-block/package.json b/svelte-code-block/package.json
index 32bb10af99..eedb4a4f18 100644
--- a/svelte-code-block/package.json
+++ b/svelte-code-block/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-code/package.json b/svelte-code/package.json
index 7e3a62a23c..8d79c7e13a 100644
--- a/svelte-code/package.json
+++ b/svelte-code/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-drop-cursor/package.json b/svelte-drop-cursor/package.json
index 5a2e14c1ab..7df359a674 100644
--- a/svelte-drop-cursor/package.json
+++ b/svelte-drop-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-emoji-rules/package.json b/svelte-emoji-rules/package.json
index 9806cc3bc4..07111bba6c 100644
--- a/svelte-emoji-rules/package.json
+++ b/svelte-emoji-rules/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-full/package.json b/svelte-full/package.json
index da1e4f226e..acba12a1b1 100644
--- a/svelte-full/package.json
+++ b/svelte-full/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-gap-cursor/package.json b/svelte-gap-cursor/package.json
index dbb5cb22ff..64224f2455 100644
--- a/svelte-gap-cursor/package.json
+++ b/svelte-gap-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-hard-break/package.json b/svelte-hard-break/package.json
index 01cd99470e..743011765f 100644
--- a/svelte-hard-break/package.json
+++ b/svelte-hard-break/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-heading/package.json b/svelte-heading/package.json
index 434fee9acb..e36969aed9 100644
--- a/svelte-heading/package.json
+++ b/svelte-heading/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-horizontal-rule/package.json b/svelte-horizontal-rule/package.json
index 2057b40c4b..d0a0264bcd 100644
--- a/svelte-horizontal-rule/package.json
+++ b/svelte-horizontal-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-image-view/package.json b/svelte-image-view/package.json
index 6e8c739911..b073feb490 100644
--- a/svelte-image-view/package.json
+++ b/svelte-image-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-inline-menu/package.json b/svelte-inline-menu/package.json
index 04c548a940..4ea6228aa6 100644
--- a/svelte-inline-menu/package.json
+++ b/svelte-inline-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-italic/package.json b/svelte-italic/package.json
index d3c8c7a92b..060aa57de7 100644
--- a/svelte-italic/package.json
+++ b/svelte-italic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-keymap/package.json b/svelte-keymap/package.json
index 5d92990a67..310780715d 100644
--- a/svelte-keymap/package.json
+++ b/svelte-keymap/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-link-mark-view/package.json b/svelte-link-mark-view/package.json
index 451e2b3660..3de2330300 100644
--- a/svelte-link-mark-view/package.json
+++ b/svelte-link-mark-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-link/package.json b/svelte-link/package.json
index be60d0a26c..9287579bfb 100644
--- a/svelte-link/package.json
+++ b/svelte-link/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-list-custom-checkbox/package.json b/svelte-list-custom-checkbox/package.json
index 381b6513a2..4f66580f5f 100644
--- a/svelte-list-custom-checkbox/package.json
+++ b/svelte-list-custom-checkbox/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-list/package.json b/svelte-list/package.json
index b69a4bf5ce..158ef88ceb 100644
--- a/svelte-list/package.json
+++ b/svelte-list/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-loro/package.json b/svelte-loro/package.json
index 1649ec5144..60029b88b1 100644
--- a/svelte-loro/package.json
+++ b/svelte-loro/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "loro-crdt": "^1.10.6",
     "loro-prosemirror": "^0.4.2",
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-mark-rule/package.json b/svelte-mark-rule/package.json
index 650b81cda3..2ef76ebe26 100644
--- a/svelte-mark-rule/package.json
+++ b/svelte-mark-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-minimal/package.json b/svelte-minimal/package.json
index 0464ecc786..34cb68efbe 100644
--- a/svelte-minimal/package.json
+++ b/svelte-minimal/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-placeholder/package.json b/svelte-placeholder/package.json
index 0e363540a9..96e8bab785 100644
--- a/svelte-placeholder/package.json
+++ b/svelte-placeholder/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-readonly/package.json b/svelte-readonly/package.json
index 5e87736461..adcdefd2e2 100644
--- a/svelte-readonly/package.json
+++ b/svelte-readonly/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-rtl/package.json b/svelte-rtl/package.json
index c5cea8b7ef..b40ac8e692 100644
--- a/svelte-rtl/package.json
+++ b/svelte-rtl/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-save-html/package.json b/svelte-save-html/package.json
index 719eda59e3..6047d974f0 100644
--- a/svelte-save-html/package.json
+++ b/svelte-save-html/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-save-json/package.json b/svelte-save-json/package.json
index 6132f9a632..ed272e9b28 100644
--- a/svelte-save-json/package.json
+++ b/svelte-save-json/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-save-markdown/package.json b/svelte-save-markdown/package.json
index 596a5d888e..09969e83ca 100644
--- a/svelte-save-markdown/package.json
+++ b/svelte-save-markdown/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",
     "remark-gfm": "^4.0.1",
diff --git a/svelte-search/package.json b/svelte-search/package.json
index eca250f52b..563fa4d93b 100644
--- a/svelte-search/package.json
+++ b/svelte-search/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-slash-menu/package.json b/svelte-slash-menu/package.json
index 6704eab423..0b104a2e52 100644
--- a/svelte-slash-menu/package.json
+++ b/svelte-slash-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-strike/package.json b/svelte-strike/package.json
index fca68a073a..9ba6d06fd8 100644
--- a/svelte-strike/package.json
+++ b/svelte-strike/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-table/package.json b/svelte-table/package.json
index 75dc198237..b17bb9e106 100644
--- a/svelte-table/package.json
+++ b/svelte-table/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-text-align/package.json b/svelte-text-align/package.json
index f73167c7d5..9ec60796ac 100644
--- a/svelte-text-align/package.json
+++ b/svelte-text-align/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-text-color/package.json b/svelte-text-color/package.json
index 58f71e937c..dbadff0a23 100644
--- a/svelte-text-color/package.json
+++ b/svelte-text-color/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
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 961ecf0f8d..8f316651b2 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
@@ -2,10 +2,7 @@
 import 'prosekit/basic/style.css'
 import 'prosekit/basic/typography.css'
 
-import {
-  createEditor,
-  type NodeJSON,
-} from 'prosekit/core'
+import { createEditor, type NodeJSON } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
 
 import { sampleContent } from '../../sample/sample-doc-text-color'
diff --git a/svelte-text-color/src/components/editor/examples/text-color/extension.ts b/svelte-text-color/src/components/editor/examples/text-color/extension.ts
index 855eca05b4..d35d9d5c22 100644
--- a/svelte-text-color/src/components/editor/examples/text-color/extension.ts
+++ b/svelte-text-color/src/components/editor/examples/text-color/extension.ts
@@ -1,10 +1,14 @@
 import { defineBasicExtension } from 'prosekit/basic'
 import { union } from 'prosekit/core'
-
-import { defineTextColor } from './text-color'
+import { defineBackgroundColor } from 'prosekit/extensions/background-color'
+import { defineTextColor } from 'prosekit/extensions/text-color'
 
 export function defineExtension() {
-  return union(defineBasicExtension(), defineTextColor())
+  return union(
+    defineBasicExtension(),
+    defineTextColor(),
+    defineBackgroundColor(),
+  )
 }
 
 export type EditorExtension = ReturnType<typeof defineExtension>
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 d5eab748a3..f84393780c 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
@@ -1,59 +1,71 @@
 <script lang="ts">
 import type { Editor } from 'prosekit/core'
-import {
-  useEditor,
-  useEditorDerivedValue,
-  useKeymap,
-} from 'prosekit/svelte'
+import { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'
 import { InlinePopover } from 'prosekit/svelte/inline-popover'
-import {
-  derived,
-  writable,
-} from 'svelte/store'
+import { derived, writable } from 'svelte/store'
 
 import { Button } from '../../ui/button'
 
 import type { EditorExtension } from './extension'
 
-const colors = [
-  { name: 'default', value: '' },
-  { name: 'red', value: '#ef4444' },
-  { name: 'orange', value: '#f97316' },
-  { name: 'yellow', value: '#eab308' },
-  { name: 'green', value: '#22c55e' },
-  { name: 'blue', value: '#3b82f6' },
-  { name: 'indigo', value: '#6366f1' },
-  { name: 'violet', value: '#a855f7' },
+const textColors = [
+  { label: 'Gray', value: '#9ca3af' },
+  { label: 'Brown', value: '#92400e' },
+  { label: 'Orange', value: '#ea580c' },
+  { label: 'Yellow', value: '#ca8a04' },
+  { label: 'Green', value: '#16a34a' },
+  { label: 'Blue', value: '#2563eb' },
+  { label: 'Purple', value: '#9333ea' },
+  { label: 'Magenta', value: '#c026d3' },
+  { label: 'Red', value: '#dc2626' },
 ]
 
-function hasTextColor(editor: Editor<EditorExtension>, color: string) {
-  return editor.marks.textColor.isActive({ color })
-}
+const backgroundColors = [
+  { label: 'Gray', value: '#f3f4f6' },
+  { label: 'Brown', value: '#fef3c7' },
+  { label: 'Orange', value: '#ffedd5' },
+  { label: 'Yellow', value: '#fef9c3' },
+  { label: 'Green', value: '#d1fae5' },
+  { label: 'Blue', value: '#dbeafe' },
+  { label: 'Purple', value: '#e9d5ff' },
+  { label: 'Pink', value: '#fce7f3' },
+  { label: 'Red', value: '#fecaca' },
+]
 
-function getColorState(editor: Editor<EditorExtension>) {
-  return colors.map((color) => ({
-    name: color.name,
+function getTextColorState(editor: Editor<EditorExtension>) {
+  return [{
+    label: 'Default',
+    value: 'currentColor',
+    isActive: !editor.marks.textColor.isActive(),
+    onClick: () => editor.commands.removeTextColor(),
+  }].concat(textColors.map((color) => ({
+    label: color.label,
     value: color.value,
-    isActive: hasTextColor(editor, color.value),
-  }))
+    isActive: editor.marks.textColor.isActive({ color: color.value }),
+    onClick: () => editor.commands.addTextColor({ color: color.value }),
+  })))
 }
 
-const editor = useEditor<EditorExtension>()
-const colorState = useEditorDerivedValue(getColorState)
-
-let open = $state(false)
-
-function toggleTextColor(color: string) {
-  if (!color || hasTextColor($editor, color)) {
-    $editor.commands.removeTextColor()
-  } else {
-    $editor.commands.setTextColor({ color })
-  }
+function getBackgroundColorState(editor: Editor<EditorExtension>) {
+  return [{
+    label: 'Default',
+    value: 'canvas',
+    isActive: !editor.marks.backgroundColor.isActive(),
+    onClick: () => editor.commands.removeBackgroundColor(),
+  }].concat(
+    backgroundColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),
+    })),
+  )
 }
 
-function handleOpenChange(value: boolean) {
-  open = value
-}
+const textColorState = useEditorDerivedValue(getTextColorState)
+const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
+
+let open = $state(false)
 
 // Create a store from the reactive open value
 const openStore = writable(false)
@@ -80,15 +92,42 @@ useKeymap(keymap)
 <InlinePopover
   class="z-10 box-border border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1"
   {open}
-  onOpenChange={handleOpenChange}
+  onOpenChange={(value) => open = value}
 >
-  {#each $colorState as color (color.name)}
-    <Button
-      pressed={color.isActive}
-      tooltip={color.name}
-      onClick={() => toggleTextColor(color.value)}
-    >
-      <span style:color={color.value}>A</span>
-    </Button>
-  {/each}
+  <div class="flex flex-col gap-4 p-4">
+    <div class="flex flex-col gap-2">
+      <div class="text-sm">Text color</div>
+      <div class="grid grid-cols-5 gap-1">
+        {#each $textColorState as color (color.label)}
+          <Button
+            pressed={color.isActive}
+            tooltip={`Text: ${color.label}`}
+            onClick={color.onClick}
+          >
+            <span class="text-base font-medium" style:color={color.value}>
+              A
+            </span>
+          </Button>
+        {/each}
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <div class="text-sm">Background color</div>
+      <div class="grid grid-cols-5 gap-1">
+        {#each $backgroundColorState as color (color.label)}
+          <Button
+            pressed={color.isActive}
+            tooltip={`Background: ${color.label}`}
+            onClick={color.onClick}
+          >
+            <div
+              class="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+              style:background-color={color.value}
+            >
+            </div>
+          </Button>
+        {/each}
+      </div>
+    </div>
+  </div>
 </InlinePopover>
diff --git a/svelte-text-color/src/components/editor/examples/text-color/text-color.ts b/svelte-text-color/src/components/editor/examples/text-color/text-color.ts
deleted file mode 100644
index 1cdd7f9cad..0000000000
--- a/svelte-text-color/src/components/editor/examples/text-color/text-color.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  addMark,
-  defineCommands,
-  defineMarkSpec,
-  removeMark,
-  union,
-} from 'prosekit/core'
-import type { Command } from 'prosekit/pm/state'
-
-/**
- * The attributes for the `textColor` mark.
- *
- * @public
- */
-export interface TextColorAttrs {
-  color: string | null
-}
-
-/**
- * Defines the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorSpec() {
-  return defineMarkSpec<'textColor', TextColorAttrs>({
-    name: 'textColor',
-    attrs: {
-      color: { default: null },
-    },
-    parseDOM: [
-      {
-        style: 'color',
-        getAttrs: (value) => {
-          return { color: value }
-        },
-      },
-    ],
-    toDOM: (mark) => {
-      return ['span', { style: `color: ${mark.attrs.color};` }, 0]
-    },
-  })
-}
-
-function setTextColor(attrs: TextColorAttrs): Command {
-  return addMark({ type: 'textColor', attrs })
-}
-
-function removeTextColor(): Command {
-  return removeMark({ type: 'textColor' })
-}
-
-/**
- * Defines some commands for the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorCommands() {
-  return defineCommands({
-    setTextColor,
-    removeTextColor,
-  })
-}
-
-/**
- * Defines the `textColor` mark and some commands for it.
- *
- * @public
- */
-export function defineTextColor() {
-  return union(defineTextColorSpec(), defineTextColorCommands())
-}
diff --git a/svelte-text-color/src/components/editor/sample/sample-doc-text-color.ts b/svelte-text-color/src/components/editor/sample/sample-doc-text-color.ts
index 99e9093157..a4efe4308d 100644
--- a/svelte-text-color/src/components/editor/sample/sample-doc-text-color.ts
+++ b/svelte-text-color/src/components/editor/sample/sample-doc-text-color.ts
@@ -12,7 +12,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(239, 68, 68)',
+                color: '#ef4444',
               },
             },
           ],
@@ -28,7 +28,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(249, 115, 22)',
+                color: '#f97316',
               },
             },
           ],
@@ -44,7 +44,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(234, 179, 8)',
+                color: '#eab308',
               },
             },
           ],
@@ -60,7 +60,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(34, 197, 94)',
+                color: '#22c55e',
               },
             },
           ],
@@ -76,7 +76,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(59, 130, 246)',
+                color: '#3b82f6',
               },
             },
           ],
@@ -92,7 +92,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(99, 102, 241)',
+                color: '#6366f1',
               },
             },
           ],
@@ -108,7 +108,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(168, 85, 247)',
+                color: '#a855f7',
               },
             },
           ],
diff --git a/svelte-text-color/src/components/editor/ui/button/button.svelte b/svelte-text-color/src/components/editor/ui/button/button.svelte
index 164c6b369b..1444c0198d 100644
--- a/svelte-text-color/src/components/editor/ui/button/button.svelte
+++ b/svelte-text-color/src/components/editor/ui/button/button.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-import {
-  TooltipContent,
-  TooltipRoot,
-  TooltipTrigger,
-} from 'prosekit/svelte/tooltip'
+import { TooltipContent, TooltipRoot, TooltipTrigger } from 'prosekit/svelte/tooltip'
 
 interface Props {
   pressed?: boolean
diff --git a/svelte-toolbar/package.json b/svelte-toolbar/package.json
index f88bc26157..a966e51840 100644
--- a/svelte-toolbar/package.json
+++ b/svelte-toolbar/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-typography/package.json b/svelte-typography/package.json
index f48a257c78..a45eed571f 100644
--- a/svelte-typography/package.json
+++ b/svelte-typography/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-underline/package.json b/svelte-underline/package.json
index 4998f82ee5..938f16f1f9 100644
--- a/svelte-underline/package.json
+++ b/svelte-underline/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-unmount/package.json b/svelte-unmount/package.json
index 3f738aded8..b4db3da5bf 100644
--- a/svelte-unmount/package.json
+++ b/svelte-unmount/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-user-menu-dynamic/package.json b/svelte-user-menu-dynamic/package.json
index 40bfcc404e..75ee7d9a7a 100644
--- a/svelte-user-menu-dynamic/package.json
+++ b/svelte-user-menu-dynamic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-user-menu/package.json b/svelte-user-menu/package.json
index c022ec1a5a..d01374f1fe 100644
--- a/svelte-user-menu/package.json
+++ b/svelte-user-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-word-counter/package.json b/svelte-word-counter/package.json
index 47f2d7b85b..32f8413f32 100644
--- a/svelte-word-counter/package.json
+++ b/svelte-word-counter/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/svelte-yjs/package.json b/svelte-yjs/package.json
index eca7090677..ec0d3ea961 100644
--- a/svelte-yjs/package.json
+++ b/svelte-yjs/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.7",
     "y-websocket": "^3.0.0",
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 b7667ae1f6..ad7f3f1e79 100644
--- a/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
+++ b/svelte-yjs/src/components/editor/examples/yjs/editor-component.svelte
@@ -5,7 +5,7 @@ import 'prosekit/extensions/yjs/style.css'
 
 import { createEditor } from 'prosekit/core'
 import { ProseKit } from 'prosekit/svelte'
-import type { Awareness } from 'y-protocols/awareness'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import type * as Y from 'yjs'
 
 import { Toolbar } from '../../ui/toolbar'
diff --git a/svelte-yjs/src/components/editor/examples/yjs/extension.ts b/svelte-yjs/src/components/editor/examples/yjs/extension.ts
index bc24b13ef9..b2546b126e 100644
--- a/svelte-yjs/src/components/editor/examples/yjs/extension.ts
+++ b/svelte-yjs/src/components/editor/examples/yjs/extension.ts
@@ -17,7 +17,7 @@ import { defineText } from 'prosekit/extensions/text'
 import { defineUnderline } from 'prosekit/extensions/underline'
 import { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'
 import { defineYjs } from 'prosekit/extensions/yjs'
-import type { Awareness } from 'y-protocols/awareness'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import type * as Y from 'yjs'
 
 export function defineExtension(doc: Y.Doc, awareness: Awareness) {
diff --git a/sveltekit-full/package.json b/sveltekit-full/package.json
index f4d489da14..25cec234e1 100644
--- a/sveltekit-full/package.json
+++ b/sveltekit-full/package.json
@@ -12,7 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/vanilla-minimal/package.json b/vanilla-minimal/package.json
index 2665268ecf..dfb989609f 100644
--- a/vanilla-minimal/package.json
+++ b/vanilla-minimal/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/vanilla-slash-menu/package.json b/vanilla-slash-menu/package.json
index 3044c839d1..ff4bc209ea 100644
--- a/vanilla-slash-menu/package.json
+++ b/vanilla-slash-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1"
+    "prosekit": "^0.18.0"
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.2",
diff --git a/vue-block-handle/package.json b/vue-block-handle/package.json
index ea775406da..c8c92e7507 100644
--- a/vue-block-handle/package.json
+++ b/vue-block-handle/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-blockquote/package.json b/vue-blockquote/package.json
index 786be2c30a..ed3eb55cb7 100644
--- a/vue-blockquote/package.json
+++ b/vue-blockquote/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-bold/package.json b/vue-bold/package.json
index dc38f088bf..1491387f2f 100644
--- a/vue-bold/package.json
+++ b/vue-bold/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-change-tracking/package.json b/vue-change-tracking/package.json
index 18ac6c6ce5..add460e251 100644
--- a/vue-change-tracking/package.json
+++ b/vue-change-tracking/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-code-block-themes/package.json b/vue-code-block-themes/package.json
index 2365bf714d..93a8d18b92 100644
--- a/vue-code-block-themes/package.json
+++ b/vue-code-block-themes/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-code-block/package.json b/vue-code-block/package.json
index 917cdabe9b..c7447e7ef7 100644
--- a/vue-code-block/package.json
+++ b/vue-code-block/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-code/package.json b/vue-code/package.json
index 26e07a8754..7a4780a4de 100644
--- a/vue-code/package.json
+++ b/vue-code/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-drop-cursor/package.json b/vue-drop-cursor/package.json
index 180cb7a641..fdd57e04f4 100644
--- a/vue-drop-cursor/package.json
+++ b/vue-drop-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-emoji-rules/package.json b/vue-emoji-rules/package.json
index 51f2c9a180..ed00dcbe86 100644
--- a/vue-emoji-rules/package.json
+++ b/vue-emoji-rules/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-full/package.json b/vue-full/package.json
index 031d7a111b..c3b980017e 100644
--- a/vue-full/package.json
+++ b/vue-full/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-gap-cursor/package.json b/vue-gap-cursor/package.json
index 369b0340a8..5d3d6fbd9a 100644
--- a/vue-gap-cursor/package.json
+++ b/vue-gap-cursor/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-hard-break/package.json b/vue-hard-break/package.json
index 48adbe3535..31e1418b95 100644
--- a/vue-hard-break/package.json
+++ b/vue-hard-break/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-heading/package.json b/vue-heading/package.json
index e870b79fa1..36294bc402 100644
--- a/vue-heading/package.json
+++ b/vue-heading/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-horizontal-rule/package.json b/vue-horizontal-rule/package.json
index c8407ee945..1fc8af805c 100644
--- a/vue-horizontal-rule/package.json
+++ b/vue-horizontal-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-image-view/package.json b/vue-image-view/package.json
index 4a194b0475..4ef037fe5d 100644
--- a/vue-image-view/package.json
+++ b/vue-image-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-inline-menu/package.json b/vue-inline-menu/package.json
index cd82da6b8c..a26eb18abe 100644
--- a/vue-inline-menu/package.json
+++ b/vue-inline-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-italic/package.json b/vue-italic/package.json
index 4448345ca5..a2fb97f682 100644
--- a/vue-italic/package.json
+++ b/vue-italic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-keymap/package.json b/vue-keymap/package.json
index 27fc56f4cb..4647445daf 100644
--- a/vue-keymap/package.json
+++ b/vue-keymap/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-link-mark-view/package.json b/vue-link-mark-view/package.json
index cef65afbec..88dee2993c 100644
--- a/vue-link-mark-view/package.json
+++ b/vue-link-mark-view/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-link/package.json b/vue-link/package.json
index e266208eec..e9b473fef1 100644
--- a/vue-link/package.json
+++ b/vue-link/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-list-custom-checkbox/package.json b/vue-list-custom-checkbox/package.json
index 7bdc416c59..615241c59c 100644
--- a/vue-list-custom-checkbox/package.json
+++ b/vue-list-custom-checkbox/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-list/package.json b/vue-list/package.json
index cfae8885c5..1605e18b02 100644
--- a/vue-list/package.json
+++ b/vue-list/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-loro/package.json b/vue-loro/package.json
index c94554448f..6d602a9c3f 100644
--- a/vue-loro/package.json
+++ b/vue-loro/package.json
@@ -11,7 +11,7 @@
   "dependencies": {
     "loro-crdt": "^1.10.6",
     "loro-prosemirror": "^0.4.2",
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-mark-rule/package.json b/vue-mark-rule/package.json
index 5e68eb4d9c..645245a797 100644
--- a/vue-mark-rule/package.json
+++ b/vue-mark-rule/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-minimal/package.json b/vue-minimal/package.json
index 17493b8c92..626f5a5a33 100644
--- a/vue-minimal/package.json
+++ b/vue-minimal/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-placeholder/package.json b/vue-placeholder/package.json
index 64fafe8e40..10463a4c53 100644
--- a/vue-placeholder/package.json
+++ b/vue-placeholder/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-readonly/package.json b/vue-readonly/package.json
index c2fa7d68eb..6547a4e6e9 100644
--- a/vue-readonly/package.json
+++ b/vue-readonly/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-rtl/package.json b/vue-rtl/package.json
index ee057881f0..35360b04cd 100644
--- a/vue-rtl/package.json
+++ b/vue-rtl/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-save-html/package.json b/vue-save-html/package.json
index 43756d5ebe..05000968e0 100644
--- a/vue-save-html/package.json
+++ b/vue-save-html/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-save-json/package.json b/vue-save-json/package.json
index 97e365fcf6..4308e0c445 100644
--- a/vue-save-json/package.json
+++ b/vue-save-json/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-save-markdown/package.json b/vue-save-markdown/package.json
index 3267685585..27d48a73c2 100644
--- a/vue-save-markdown/package.json
+++ b/vue-save-markdown/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "rehype-parse": "^9.0.1",
     "rehype-remark": "^10.0.1",
     "remark-gfm": "^4.0.1",
diff --git a/vue-search/package.json b/vue-search/package.json
index 4b38972ede..cc3f0cc45a 100644
--- a/vue-search/package.json
+++ b/vue-search/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-slash-menu/package.json b/vue-slash-menu/package.json
index 4094d4786e..d3b63dc700 100644
--- a/vue-slash-menu/package.json
+++ b/vue-slash-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-strike/package.json b/vue-strike/package.json
index 7f2d8f5998..827423be40 100644
--- a/vue-strike/package.json
+++ b/vue-strike/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-table/package.json b/vue-table/package.json
index c1f8194a33..6a44d80c18 100644
--- a/vue-table/package.json
+++ b/vue-table/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-text-align/package.json b/vue-text-align/package.json
index 214c6ea078..d2623f90ab 100644
--- a/vue-text-align/package.json
+++ b/vue-text-align/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-text-color/package.json b/vue-text-color/package.json
index d992fb68a1..53b0cf8186 100644
--- a/vue-text-color/package.json
+++ b/vue-text-color/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-text-color/src/components/editor/examples/text-color/extension.ts b/vue-text-color/src/components/editor/examples/text-color/extension.ts
index 855eca05b4..d35d9d5c22 100644
--- a/vue-text-color/src/components/editor/examples/text-color/extension.ts
+++ b/vue-text-color/src/components/editor/examples/text-color/extension.ts
@@ -1,10 +1,14 @@
 import { defineBasicExtension } from 'prosekit/basic'
 import { union } from 'prosekit/core'
-
-import { defineTextColor } from './text-color'
+import { defineBackgroundColor } from 'prosekit/extensions/background-color'
+import { defineTextColor } from 'prosekit/extensions/text-color'
 
 export function defineExtension() {
-  return union(defineBasicExtension(), defineTextColor())
+  return union(
+    defineBasicExtension(),
+    defineTextColor(),
+    defineBackgroundColor(),
+  )
 }
 
 export type EditorExtension = ReturnType<typeof defineExtension>
diff --git a/vue-text-color/src/components/editor/examples/text-color/inline-menu.vue b/vue-text-color/src/components/editor/examples/text-color/inline-menu.vue
index ffd3c7dc13..bdfa096ffd 100644
--- a/vue-text-color/src/components/editor/examples/text-color/inline-menu.vue
+++ b/vue-text-color/src/components/editor/examples/text-color/inline-menu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Editor } from 'prosekit/core'
-import { useEditor, useEditorDerivedValue, useKeymap } from 'prosekit/vue'
+import { useEditorDerivedValue, useKeymap } from 'prosekit/vue'
 import { InlinePopover } from 'prosekit/vue/inline-popover'
 import { ref } from 'vue'
 
@@ -8,44 +8,69 @@ import { Button } from '../../ui/button'
 
 import type { EditorExtension } from './extension'
 
-const colors = [
-  { name: 'default', value: '' },
-  { name: 'red', value: '#ef4444' },
-  { name: 'orange', value: '#f97316' },
-  { name: 'yellow', value: '#eab308' },
-  { name: 'green', value: '#22c55e' },
-  { name: 'blue', value: '#3b82f6' },
-  { name: 'indigo', value: '#6366f1' },
-  { name: 'violet', value: '#a855f7' },
+const textColors = [
+  { label: 'Gray', value: '#9ca3af' },
+  { label: 'Brown', value: '#92400e' },
+  { label: 'Orange', value: '#ea580c' },
+  { label: 'Yellow', value: '#ca8a04' },
+  { label: 'Green', value: '#16a34a' },
+  { label: 'Blue', value: '#2563eb' },
+  { label: 'Purple', value: '#9333ea' },
+  { label: 'Magenta', value: '#c026d3' },
+  { label: 'Red', value: '#dc2626' },
 ]
 
-function hasTextColor(editor: Editor<EditorExtension>, color: string) {
-  return editor.marks.textColor.isActive({ color })
-}
+const backgroundColors = [
+  { label: 'Gray', value: '#f3f4f6' },
+  { label: 'Brown', value: '#fef3c7' },
+  { label: 'Orange', value: '#ffedd5' },
+  { label: 'Yellow', value: '#fef9c3' },
+  { label: 'Green', value: '#d1fae5' },
+  { label: 'Blue', value: '#dbeafe' },
+  { label: 'Purple', value: '#e9d5ff' },
+  { label: 'Pink', value: '#fce7f3' },
+  { label: 'Red', value: '#fecaca' },
+]
 
-function getColorState(editor: Editor<EditorExtension>) {
-  return colors.map((color) => ({
-    name: color.name,
-    value: color.value,
-    isActive: hasTextColor(editor, color.value),
-  }))
+function getTextColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'currentColor',
+      isActive: !editor.marks.textColor.isActive(),
+      onClick: () => editor.commands.removeTextColor(),
+    },
+  ].concat(
+    textColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.textColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addTextColor({ color: color.value }),
+    })),
+  )
 }
 
-const editor = useEditor<EditorExtension>()
-const colorState = useEditorDerivedValue(getColorState)
-const open = ref(false)
-
-function toggleTextColor(color: string) {
-  if (!color || hasTextColor(editor.value, color)) {
-    editor.value.commands.removeTextColor()
-  } else {
-    editor.value.commands.setTextColor({ color })
-  }
+function getBackgroundColorState(editor: Editor<EditorExtension>) {
+  return [
+    {
+      label: 'Default',
+      value: 'canvas',
+      isActive: !editor.marks.backgroundColor.isActive(),
+      onClick: () => editor.commands.removeBackgroundColor(),
+    },
+  ].concat(
+    backgroundColors.map((color) => ({
+      label: color.label,
+      value: color.value,
+      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),
+      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),
+    })),
+  )
 }
 
-function handleOpenChange(value: boolean) {
-  open.value = value
-}
+const textColorState = useEditorDerivedValue(getTextColorState)
+const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)
+const open = ref(false)
 
 useKeymap({
   Escape: () => {
@@ -62,16 +87,42 @@ useKeymap({
   <InlinePopover
     class="z-10 box-border border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg [&:not([data-state])]:hidden relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1"
     :open="open"
-    @open-change="handleOpenChange"
+    @open-change="(value) => (open = value)"
   >
-    <Button
-      v-for="color in colorState"
-      :key="color.name"
-      :pressed="color.isActive"
-      :tooltip="color.name"
-      @click="() => toggleTextColor(color.value)"
-    >
-      <span :style="{ color: color.value }">A</span>
-    </Button>
+    <div class="flex flex-col gap-4 p-4">
+      <div class="flex flex-col gap-2">
+        <div class="text-sm">Text color</div>
+        <div class="grid grid-cols-5 gap-1">
+          <Button
+            v-for="color in textColorState"
+            :key="color.label"
+            :pressed="color.isActive"
+            :tooltip="`Text: ${color.label}`"
+            @click="color.onClick"
+          >
+            <span class="text-base font-medium" :style="{ color: color.value }">
+              A
+            </span>
+          </Button>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <div class="text-sm">Background color</div>
+        <div class="grid grid-cols-5 gap-1">
+          <Button
+            v-for="color in backgroundColorState"
+            :key="color.label"
+            :pressed="color.isActive"
+            :tooltip="`Background: ${color.label}`"
+            @click="color.onClick"
+          >
+            <div
+              class="w-6 h-6 rounded border border-gray-200 dark:border-gray-700"
+              :style="{ backgroundColor: color.value }"
+            />
+          </Button>
+        </div>
+      </div>
+    </div>
   </InlinePopover>
 </template>
diff --git a/vue-text-color/src/components/editor/examples/text-color/text-color.ts b/vue-text-color/src/components/editor/examples/text-color/text-color.ts
deleted file mode 100644
index 1cdd7f9cad..0000000000
--- a/vue-text-color/src/components/editor/examples/text-color/text-color.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import {
-  addMark,
-  defineCommands,
-  defineMarkSpec,
-  removeMark,
-  union,
-} from 'prosekit/core'
-import type { Command } from 'prosekit/pm/state'
-
-/**
- * The attributes for the `textColor` mark.
- *
- * @public
- */
-export interface TextColorAttrs {
-  color: string | null
-}
-
-/**
- * Defines the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorSpec() {
-  return defineMarkSpec<'textColor', TextColorAttrs>({
-    name: 'textColor',
-    attrs: {
-      color: { default: null },
-    },
-    parseDOM: [
-      {
-        style: 'color',
-        getAttrs: (value) => {
-          return { color: value }
-        },
-      },
-    ],
-    toDOM: (mark) => {
-      return ['span', { style: `color: ${mark.attrs.color};` }, 0]
-    },
-  })
-}
-
-function setTextColor(attrs: TextColorAttrs): Command {
-  return addMark({ type: 'textColor', attrs })
-}
-
-function removeTextColor(): Command {
-  return removeMark({ type: 'textColor' })
-}
-
-/**
- * Defines some commands for the `textColor` mark.
- *
- * @public
- */
-export function defineTextColorCommands() {
-  return defineCommands({
-    setTextColor,
-    removeTextColor,
-  })
-}
-
-/**
- * Defines the `textColor` mark and some commands for it.
- *
- * @public
- */
-export function defineTextColor() {
-  return union(defineTextColorSpec(), defineTextColorCommands())
-}
diff --git a/vue-text-color/src/components/editor/sample/sample-doc-text-color.ts b/vue-text-color/src/components/editor/sample/sample-doc-text-color.ts
index 99e9093157..a4efe4308d 100644
--- a/vue-text-color/src/components/editor/sample/sample-doc-text-color.ts
+++ b/vue-text-color/src/components/editor/sample/sample-doc-text-color.ts
@@ -12,7 +12,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(239, 68, 68)',
+                color: '#ef4444',
               },
             },
           ],
@@ -28,7 +28,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(249, 115, 22)',
+                color: '#f97316',
               },
             },
           ],
@@ -44,7 +44,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(234, 179, 8)',
+                color: '#eab308',
               },
             },
           ],
@@ -60,7 +60,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(34, 197, 94)',
+                color: '#22c55e',
               },
             },
           ],
@@ -76,7 +76,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(59, 130, 246)',
+                color: '#3b82f6',
               },
             },
           ],
@@ -92,7 +92,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(99, 102, 241)',
+                color: '#6366f1',
               },
             },
           ],
@@ -108,7 +108,7 @@ export const sampleContent: NodeJSON = {
             {
               type: 'textColor',
               attrs: {
-                color: 'rgb(168, 85, 247)',
+                color: '#a855f7',
               },
             },
           ],
diff --git a/vue-toolbar/package.json b/vue-toolbar/package.json
index b1aabb4916..726fcff8c5 100644
--- a/vue-toolbar/package.json
+++ b/vue-toolbar/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-typography/package.json b/vue-typography/package.json
index 258ad4a083..29c3693dc2 100644
--- a/vue-typography/package.json
+++ b/vue-typography/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-underline/package.json b/vue-underline/package.json
index 149cad7375..e907996031 100644
--- a/vue-underline/package.json
+++ b/vue-underline/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-unmount/package.json b/vue-unmount/package.json
index 1562bac135..171fb75997 100644
--- a/vue-unmount/package.json
+++ b/vue-unmount/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-user-menu-dynamic/package.json b/vue-user-menu-dynamic/package.json
index 2d98650715..49008a5123 100644
--- a/vue-user-menu-dynamic/package.json
+++ b/vue-user-menu-dynamic/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-user-menu/package.json b/vue-user-menu/package.json
index c8f5939fd4..376dc7f625 100644
--- a/vue-user-menu/package.json
+++ b/vue-user-menu/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-word-counter/package.json b/vue-word-counter/package.json
index b8239eb1db..d3ac08cd46 100644
--- a/vue-word-counter/package.json
+++ b/vue-word-counter/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27"
   },
   "devDependencies": {
diff --git a/vue-yjs/package.json b/vue-yjs/package.json
index 11a459b18b..063af85b91 100644
--- a/vue-yjs/package.json
+++ b/vue-yjs/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "prosekit": "^0.17.1",
+    "prosekit": "^0.18.0",
     "vue": "^3.5.27",
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.7",
diff --git a/vue-yjs/src/components/editor/examples/yjs/editor-component.vue b/vue-yjs/src/components/editor/examples/yjs/editor-component.vue
index ad01deba7f..bce75b8111 100644
--- a/vue-yjs/src/components/editor/examples/yjs/editor-component.vue
+++ b/vue-yjs/src/components/editor/examples/yjs/editor-component.vue
@@ -4,8 +4,8 @@ import 'prosekit/basic/typography.css'
 import 'prosekit/extensions/yjs/style.css'
 
 import { createEditor } from 'prosekit/core'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import { ProseKit } from 'prosekit/vue'
-import type { Awareness } from 'y-protocols/awareness'
 import type * as Y from 'yjs'
 
 import { Toolbar } from '../../ui/toolbar'
diff --git a/vue-yjs/src/components/editor/examples/yjs/extension.ts b/vue-yjs/src/components/editor/examples/yjs/extension.ts
index 54348984a8..f1a581932b 100644
--- a/vue-yjs/src/components/editor/examples/yjs/extension.ts
+++ b/vue-yjs/src/components/editor/examples/yjs/extension.ts
@@ -17,7 +17,7 @@ import { defineText } from 'prosekit/extensions/text'
 import { defineUnderline } from 'prosekit/extensions/underline'
 import { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'
 import { defineYjs } from 'prosekit/extensions/yjs'
-import type { Awareness } from 'y-protocols/awareness'
+import type { Awareness } from 'prosekit/extensions/yjs'
 import type * as Y from 'yjs'
 
 export function defineExtension(doc: Y.Doc, awareness: Awareness) {