prosekit-registry 0.0.21 → 0.0.22

package/dist/r/solid-example-minimal.json

@@ -5,7 +5,7 @@
   "description": "Minimal editor setup with basic functionality.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {

package/dist/r/solid-example-placeholder.json

@@ -5,14 +5,14 @@
   "description": "Placeholder text displayed.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/placeholder/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/placeholder/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'\nimport type { ProseMirrorNode } from 'prosekit/pm/model'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(props: {\n  initialContent?: NodeJSON\n  onDocUpdate?: (doc: NodeJSON) => void\n}): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent: props.initialContent })\n\n  const handleDocChange = (doc: ProseMirrorNode) => props.onDocUpdate?.(jsonFromNode(doc))\n  useDocChange(handleDocChange, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, jsonFromNode, type NodeJSON } from 'prosekit/core'\nimport type { ProseMirrorNode } from 'prosekit/pm/model'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(props: {\n  initialContent?: NodeJSON\n  onDocUpdate?: (doc: NodeJSON) => void\n}): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent: props.initialContent })\n\n  const handleDocChange = (doc: ProseMirrorNode) => props.onDocUpdate?.(jsonFromNode(doc))\n  useDocChange(handleDocChange, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/placeholder/extension.ts",

package/dist/r/solid-example-readonly.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/readonly/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/readonly/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-readonly'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-readonly'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/readonly/extension.ts",

package/dist/r/solid-example-rtl.json

@@ -14,14 +14,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/rtl/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/rtl/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-rtl'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { SlashMenu } from '../../ui/slash-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { Toolbar } from '../../ui/toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const extension = defineBasicExtension()\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <div dir=\"rtl\" 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\">\n        <Toolbar uploader={sampleUploader} />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <InlineMenu />\n          <SlashMenu />\n          <BlockHandle dir=\"rtl\" />\n          <TableHandle dir=\"rtl\" />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-rtl'\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\nimport { InlineMenu } from '../../ui/inline-menu'\nimport { SlashMenu } from '../../ui/slash-menu'\nimport { TableHandle } from '../../ui/table-handle'\nimport { Toolbar } from '../../ui/toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const extension = defineBasicExtension()\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <div dir=\"rtl\" 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-[canvas] text-black dark:text-white\">\n        <Toolbar uploader={sampleUploader} />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <InlineMenu />\n          <SlashMenu />\n          <BlockHandle dir=\"rtl\" />\n          <TableHandle dir=\"rtl\" />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/rtl/index.ts",

package/dist/r/solid-example-save-html.json

@@ -5,14 +5,14 @@
   "description": "Save and load documents as HTML format.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/save-html/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/save-html/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nexport default function Editor(): JSX.Element {\n  const [records, setRecords] = createSignal<string[]>([])\n  const [hasUnsavedChange, setHasUnsavedChange] = createSignal(false)\n\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  const handleDocChange = () => setHasUnsavedChange(true)\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = () => {\n    const record = editor.getDocHTML()\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }\n\n  const handleLoad = (record: string) => {\n    editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n    setHasUnsavedChange(false)\n  }\n\n  return (\n    <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\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange()}\n        class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange() ? 'Save' : 'No changes to save'}\n      </button>\n      <ul class=\"border-b border-t border-solid text-sm\">\n        <For each={records()}>\n          {(record) => (\n            <li class=\"m-1 flex gap-2\">\n              <button\n                class=\"border border-solid bg-white px-2 py-1 text-black\"\n                onClick={() => handleLoad(record)}\n              >\n                Load\n              </button>\n              <span class=\"flex-1 overflow-x-scroll p-2\">\n                <pre>{record}</pre>\n              </span>\n            </li>\n          )}\n        </For>\n      </ul>\n      <ProseKit editor={editor}>\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nexport default function Editor(): JSX.Element {\n  const [records, setRecords] = createSignal<string[]>([])\n  const [hasUnsavedChange, setHasUnsavedChange] = createSignal(false)\n\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  const handleDocChange = () => setHasUnsavedChange(true)\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = () => {\n    const record = editor.getDocHTML()\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }\n\n  const handleLoad = (record: string) => {\n    editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n    setHasUnsavedChange(false)\n  }\n\n  return (\n    <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-[canvas] text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange()}\n        class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange() ? 'Save' : 'No changes to save'}\n      </button>\n      <ul class=\"border-b border-t border-solid text-sm\">\n        <For each={records()}>\n          {(record) => (\n            <li class=\"m-1 flex gap-2\">\n              <button\n                class=\"border border-solid bg-white px-2 py-1 text-black\"\n                onClick={() => handleLoad(record)}\n              >\n                Load\n              </button>\n              <span class=\"flex-1 overflow-x-scroll p-2\">\n                <pre>{record}</pre>\n              </span>\n            </li>\n          )}\n        </For>\n      </ul>\n      <ProseKit editor={editor}>\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/save-html/index.ts",

package/dist/r/solid-example-save-json.json

@@ -5,14 +5,14 @@
   "description": "Save and load documents as JSON format.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/save-json/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/save-json/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nexport default function Editor(): JSX.Element {\n  const [records, setRecords] = createSignal<string[]>([])\n  const [hasUnsavedChange, setHasUnsavedChange] = createSignal(false)\n\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  const handleDocChange = () => setHasUnsavedChange(true)\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = () => {\n    const record = JSON.stringify(editor.getDocJSON())\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }\n\n  const handleLoad = (record: string) => {\n    editor.setContent(JSON.parse(record) as NodeJSON)\n    setHasUnsavedChange(false)\n  }\n\n  return (\n    <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\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange()}\n        class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange() ? 'Save' : 'No changes to save'}\n      </button>\n      <ul class=\"border-b border-t border-solid text-sm\">\n        <For each={records()}>\n          {(record) => (\n            <li class=\"m-1 flex gap-2\">\n              <button\n                class=\"border border-solid bg-white px-2 py-1 text-black\"\n                onClick={() => handleLoad(record)}\n              >\n                Load\n              </button>\n              <span class=\"flex-1 overflow-x-scroll p-2\">\n                <pre>{record}</pre>\n              </span>\n            </li>\n          )}\n        </For>\n      </ul>\n      <ProseKit editor={editor}>\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nexport default function Editor(): JSX.Element {\n  const [records, setRecords] = createSignal<string[]>([])\n  const [hasUnsavedChange, setHasUnsavedChange] = createSignal(false)\n\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  const handleDocChange = () => setHasUnsavedChange(true)\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = () => {\n    const record = JSON.stringify(editor.getDocJSON())\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }\n\n  const handleLoad = (record: string) => {\n    editor.setContent(JSON.parse(record) as NodeJSON)\n    setHasUnsavedChange(false)\n  }\n\n  return (\n    <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-[canvas] text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange()}\n        class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange() ? 'Save' : 'No changes to save'}\n      </button>\n      <ul class=\"border-b border-t border-solid text-sm\">\n        <For each={records()}>\n          {(record) => (\n            <li class=\"m-1 flex gap-2\">\n              <button\n                class=\"border border-solid bg-white px-2 py-1 text-black\"\n                onClick={() => handleLoad(record)}\n              >\n                Load\n              </button>\n              <span class=\"flex-1 overflow-x-scroll p-2\">\n                <pre>{record}</pre>\n              </span>\n            </li>\n          )}\n        </For>\n      </ul>\n      <ProseKit editor={editor}>\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/save-json/index.ts",

package/dist/r/solid-example-save-markdown.json

@@ -5,7 +5,7 @@
   "description": "Save and load documents as Markdown format.",
   "registryDependencies": [],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8",
+    "prosekit@^0.20.0",
     "rehype-parse",
     "rehype-remark",
     "remark-gfm",
@@ -19,7 +19,7 @@
       "path": "registry/src/solid/examples/save-markdown/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/save-markdown/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\nexport default function Editor(): JSX.Element {\n  const [records, setRecords] = createSignal<string[]>([])\n  const [hasUnsavedChange, setHasUnsavedChange] = createSignal(false)\n\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  const handleDocChange = () => setHasUnsavedChange(true)\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = () => {\n    const html = editor.getDocHTML()\n    const record = markdownFromHTML(html)\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }\n\n  const handleLoad = (record: string) => {\n    const html = htmlFromMarkdown(record)\n    editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n    setHasUnsavedChange(false)\n  }\n\n  return (\n    <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\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange()}\n        class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange() ? 'Save' : 'No changes to save'}\n      </button>\n      <ul class=\"border-b border-t border-solid text-sm\">\n        <For each={records()}>\n          {(record) => (\n            <li class=\"m-1 flex gap-2\">\n              <button\n                class=\"border border-solid bg-white px-2 py-1 text-black\"\n                onClick={() => handleLoad(record)}\n              >\n                Load\n              </button>\n              <span class=\"flex-1 overflow-x-scroll p-2\">\n                <pre>{record}</pre>\n              </span>\n            </li>\n          )}\n        </For>\n      </ul>\n      <ProseKit editor={editor}>\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor, jsonFromHTML } from 'prosekit/core'\nimport { ProseKit, useDocChange } from 'prosekit/solid'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\nexport default function Editor(): JSX.Element {\n  const [records, setRecords] = createSignal<string[]>([])\n  const [hasUnsavedChange, setHasUnsavedChange] = createSignal(false)\n\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  const handleDocChange = () => setHasUnsavedChange(true)\n  useDocChange(handleDocChange, { editor })\n\n  const handleSave = () => {\n    const html = editor.getDocHTML()\n    const record = markdownFromHTML(html)\n    setRecords((prev) => [...prev, record])\n    setHasUnsavedChange(false)\n  }\n\n  const handleLoad = (record: string) => {\n    const html = htmlFromMarkdown(record)\n    editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n    setHasUnsavedChange(false)\n  }\n\n  return (\n    <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-[canvas] text-black dark:text-white\">\n      <button\n        onClick={handleSave}\n        disabled={!hasUnsavedChange()}\n        class=\"m-1 border border-solid bg-white px-2 py-1 text-sm text-black disabled:cursor-not-allowed disabled:text-gray-500\"\n      >\n        {hasUnsavedChange() ? 'Save' : 'No changes to save'}\n      </button>\n      <ul class=\"border-b border-t border-solid text-sm\">\n        <For each={records()}>\n          {(record) => (\n            <li class=\"m-1 flex gap-2\">\n              <button\n                class=\"border border-solid bg-white px-2 py-1 text-black\"\n                onClick={() => handleLoad(record)}\n              >\n                Load\n              </button>\n              <span class=\"flex-1 overflow-x-scroll p-2\">\n                <pre>{record}</pre>\n              </span>\n            </li>\n          )}\n        </For>\n      </ul>\n      <ProseKit editor={editor}>\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </ProseKit>\n    </div>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/save-markdown/index.ts",

package/dist/r/solid-example-search.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-search.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/search/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/search/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/search/style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({\n    extension,\n    defaultContent,\n  })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <Search />\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/search/style.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({\n    extension,\n    defaultContent,\n  })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <Search />\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/search/extension.ts",

package/dist/r/solid-example-slash-menu.json

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-slash-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/slash-menu/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/slash-menu/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <SlashMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <SlashMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/slash-menu/extension.ts",

package/dist/r/solid-example-strike.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/strike/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/strike/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-strike'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-strike'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/strike/extension.ts",

package/dist/r/solid-example-table.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-table-handle.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/table/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/table/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <TableHandle />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <TableHandle />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/table/extension.ts",

package/dist/r/solid-example-temml.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-sample-temml.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/temml/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/temml/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-tex'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-tex'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/temml/extension.ts",

package/dist/r/solid-example-text-align.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/text-align/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-align/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-text-align'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-text-align'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/text-align/extension.ts",

package/dist/r/solid-example-text-color.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-button.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/text-color/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-text-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <InlineMenu />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/text-color/extension.ts",
@@ -33,7 +33,7 @@
       "path": "registry/src/solid/examples/text-color/inline-menu.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/text-color/inline-menu.tsx",
-      "content": "import type { Editor, Keymap } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/solid'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/solid/inline-popover'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [\n    {\n      label: 'Default',\n      value: 'currentColor',\n      isActive: !editor.marks.textColor.isActive(),\n      onClick: () => editor.commands.removeTextColor(),\n    },\n  ].concat(\n    textColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.textColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addTextColor({ color: color.value }),\n    })),\n  )\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [\n    {\n      label: 'Default',\n      value: 'canvas',\n      isActive: !editor.marks.backgroundColor.isActive(),\n      onClick: () => editor.commands.removeBackgroundColor(),\n    },\n  ].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nexport default function InlineMenu(): JSX.Element {\n  const textColorState = useEditorDerivedValue(getTextColorState)\n  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n  const [open, setOpen] = createSignal(false)\n\n  const keymap: () => Keymap = () => ({\n    Escape: () => {\n      if (open()) {\n        setOpen(false)\n        return true\n      }\n      return false\n    },\n  })\n\n  useKeymap(keymap)\n\n  return (\n    <InlinePopoverRoot\n      open={open()}\n      onOpenChange={(event) => setOpen(event.detail)}\n    >\n      <InlinePopoverPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <InlinePopoverPopup class=\"box-border origin-(--transform-origin) transition transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg overscroll-none relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-md p-1\">\n          <div class=\"flex flex-col gap-4 p-4\">\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"text-sm\">Text color</div>\n              <div class=\"grid grid-cols-5 gap-1\">\n                <For each={textColorState()}>\n                  {(color) => (\n                    <Button\n                      pressed={color.isActive}\n                      tooltip={`Text: ${color.label}`}\n                      onClick={color.onClick}\n                    >\n                      <span\n                        class=\"text-base font-medium\"\n                        style={{ color: color.value }}\n                      >\n                        A\n                      </span>\n                    </Button>\n                  )}\n                </For>\n              </div>\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"text-sm\">Background color</div>\n              <div class=\"grid grid-cols-5 gap-1\">\n                <For each={backgroundColorState()}>\n                  {(color) => (\n                    <Button\n                      pressed={color.isActive}\n                      tooltip={`Background: ${color.label}`}\n                      onClick={color.onClick}\n                    >\n                      <div\n                        class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                        style={{ 'background-color': color.value }}\n                      />\n                    </Button>\n                  )}\n                </For>\n              </div>\n            </div>\n          </div>\n        </InlinePopoverPopup>\n      </InlinePopoverPositioner>\n    </InlinePopoverRoot>\n  )\n}\n"
+      "content": "import type { Editor, Keymap } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/solid'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/solid/inline-popover'\nimport { createSignal, For, type JSX } from 'solid-js'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst textColors = [\n  { label: 'Gray', value: '#9ca3af' },\n  { label: 'Brown', value: '#92400e' },\n  { label: 'Orange', value: '#ea580c' },\n  { label: 'Yellow', value: '#ca8a04' },\n  { label: 'Green', value: '#16a34a' },\n  { label: 'Blue', value: '#2563eb' },\n  { label: 'Purple', value: '#9333ea' },\n  { label: 'Magenta', value: '#c026d3' },\n  { label: 'Red', value: '#dc2626' },\n]\n\nconst backgroundColors = [\n  { label: 'Gray', value: '#f3f4f6' },\n  { label: 'Brown', value: '#fef3c7' },\n  { label: 'Orange', value: '#ffedd5' },\n  { label: 'Yellow', value: '#fef9c3' },\n  { label: 'Green', value: '#d1fae5' },\n  { label: 'Blue', value: '#dbeafe' },\n  { label: 'Purple', value: '#e9d5ff' },\n  { label: 'Pink', value: '#fce7f3' },\n  { label: 'Red', value: '#fecaca' },\n]\n\nfunction getTextColorState(editor: Editor<EditorExtension>) {\n  return [\n    {\n      label: 'Default',\n      value: 'currentColor',\n      isActive: !editor.marks.textColor.isActive(),\n      onClick: () => editor.commands.removeTextColor(),\n    },\n  ].concat(\n    textColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.textColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addTextColor({ color: color.value }),\n    })),\n  )\n}\n\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [\n    {\n      label: 'Default',\n      value: 'canvas',\n      isActive: !editor.marks.backgroundColor.isActive(),\n      onClick: () => editor.commands.removeBackgroundColor(),\n    },\n  ].concat(\n    backgroundColors.map((color) => ({\n      label: color.label,\n      value: color.value,\n      isActive: editor.marks.backgroundColor.isActive({ color: color.value }),\n      onClick: () => editor.commands.addBackgroundColor({ color: color.value }),\n    })),\n  )\n}\n\nexport default function InlineMenu(): JSX.Element {\n  const textColorState = useEditorDerivedValue(getTextColorState)\n  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n  const [open, setOpen] = createSignal(false)\n\n  const keymap: () => Keymap = () => ({\n    Escape: () => {\n      if (open()) {\n        setOpen(false)\n        return true\n      }\n      return false\n    },\n  })\n\n  useKeymap(keymap)\n\n  return (\n    <InlinePopoverRoot\n      open={open()}\n      onOpenChange={(event) => setOpen(event.detail)}\n    >\n      <InlinePopoverPositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <InlinePopoverPopup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] relative flex min-w-32 space-x-1 overflow-auto whitespace-nowrap rounded-lg p-1\">\n          <div class=\"flex flex-col gap-4 p-4\">\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"text-sm\">Text color</div>\n              <div class=\"grid grid-cols-5 gap-1\">\n                <For each={textColorState()}>\n                  {(color) => (\n                    <Button\n                      pressed={color.isActive}\n                      tooltip={`Text: ${color.label}`}\n                      onClick={color.onClick}\n                    >\n                      <span\n                        class=\"text-base font-medium\"\n                        style={{ color: color.value }}\n                      >\n                        A\n                      </span>\n                    </Button>\n                  )}\n                </For>\n              </div>\n            </div>\n            <div class=\"flex flex-col gap-2\">\n              <div class=\"text-sm\">Background color</div>\n              <div class=\"grid grid-cols-5 gap-1\">\n                <For each={backgroundColorState()}>\n                  {(color) => (\n                    <Button\n                      pressed={color.isActive}\n                      tooltip={`Background: ${color.label}`}\n                      onClick={color.onClick}\n                    >\n                      <div\n                        class=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                        style={{ 'background-color': color.value }}\n                      />\n                    </Button>\n                  )}\n                </For>\n              </div>\n            </div>\n          </div>\n        </InlinePopoverPopup>\n      </InlinePopoverPositioner>\n    </InlinePopoverRoot>\n  )\n}\n"
     }
   ],
   "meta": {

package/dist/r/solid-example-toolbar.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/toolbar/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/toolbar/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <Toolbar uploader={sampleUploader} />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <Toolbar uploader={sampleUploader} />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/toolbar/extension.ts",

package/dist/r/solid-example-typography.json

@@ -10,14 +10,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-drop-indicator.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/typography/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/typography/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <BlockHandle />\n          <DropIndicator />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/typography/extension.ts",

package/dist/r/solid-example-underline.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/underline/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/underline/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-underline'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-underline'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/underline/extension.ts",

package/dist/r/solid-example-unmount.json

@@ -7,14 +7,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-inline-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/unmount/editor-component.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/unmount/editor-component.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport ExtensionComponent from './extension-component.tsx'\n\nexport default function EditorComponent(props: {\n  placeholder: string\n}): JSX.Element {\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <InlineMenu />\n        </div>\n      </div>\n      <ExtensionComponent placeholder={props.placeholder} />\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport ExtensionComponent from './extension-component.tsx'\n\nexport default function EditorComponent(props: {\n  placeholder: string\n}): JSX.Element {\n  const extension = defineBasicExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <InlineMenu />\n        </div>\n      </div>\n      <ExtensionComponent placeholder={props.placeholder} />\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/unmount/editor.tsx",

package/dist/r/solid-example-user-menu-dynamic.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-user-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/user-menu-dynamic/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/user-menu-dynamic/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <UserMenuDynamic />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <UserMenuDynamic />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/user-menu-dynamic/extension.ts",

package/dist/r/solid-example-user-menu.json

@@ -10,14 +10,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-user-menu.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/user-menu/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/user-menu/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { tags } from '../../sample/sample-tag-data'\nimport { users } from '../../sample/sample-user-data'\nimport { TagMenu } from '../../ui/tag-menu'\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor(): JSX.Element {\n  const extension = defineExtension()\n  const editor = createEditor({ extension })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <UserMenu users={users} />\n          <TagMenu tags={tags} />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/user-menu/extension.ts",

package/dist/r/solid-example-view-adapter.json

@@ -8,7 +8,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-sample-sample-doc-view-adapter.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
@@ -21,7 +21,7 @@
       "path": "registry/src/solid/examples/view-adapter/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/view-adapter/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport { createMemo, type JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = () => props.initialContent ?? sampleContent\n  const editor = createMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent: defaultContent() })\n  })\n\n  return (\n    <ProseKit editor={editor()}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport { createMemo, type JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = () => props.initialContent ?? sampleContent\n  const editor = createMemo(() => {\n    return createEditor({ extension: defineExtension(), defaultContent: defaultContent() })\n  })\n\n  return (\n    <ProseKit editor={editor()}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/view-adapter/extension.ts",

package/dist/r/solid-example-word-counter.json

@@ -8,14 +8,14 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-word-counter.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8"
+    "prosekit@^0.20.0"
   ],
   "files": [
     {
       "path": "registry/src/solid/examples/word-counter/editor.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/word-counter/editor.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <WordCounter />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport type { JSX } from 'solid-js'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps): JSX.Element {\n  const defaultContent = props.initialContent ?? sampleContent\n  const extension = defineExtension()\n  const editor = createEditor({ extension, defaultContent })\n\n  return (\n    <ProseKit editor={editor}>\n      <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-[canvas] text-black dark:text-white\">\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n          <WordCounter />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/word-counter/extension.ts",

package/dist/r/solid-example-yjs.json

@@ -7,7 +7,7 @@
     "https://unpkg.com/prosekit-registry/dist/r/solid-ui-toolbar.json"
   ],
   "dependencies": [
-    "prosekit@^0.20.0-beta.8",
+    "prosekit@^0.20.0",
     "y-websocket",
     "yjs"
   ],
@@ -16,7 +16,7 @@
       "path": "registry/src/solid/examples/yjs/editor-component.tsx",
       "type": "registry:component",
       "target": "components/editor/examples/yjs/editor-component.tsx",
-      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/yjs/style.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport { createMemo, type JSX } from 'solid-js'\nimport { WebsocketProvider } from 'y-websocket'\nimport * as Y from 'yjs'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function EditorComponent(props: { room?: string }): JSX.Element {\n  const editor = createMemo(() => {\n    const doc = new Y.Doc()\n    const provider = new WebsocketProvider(\n      'wss://demos.yjs.dev/ws',\n      `github.com/prosekit/room_${props.room}`,\n      doc,\n    )\n\n    const extension = defineExtension(doc, provider.awareness)\n    return createEditor({ extension })\n  })\n\n  return (\n    <ProseKit editor={editor()}>\n      <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\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/yjs/style.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/solid'\nimport { createMemo, type JSX } from 'solid-js'\nimport { WebsocketProvider } from 'y-websocket'\nimport * as Y from 'yjs'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function EditorComponent(props: { room?: string }): JSX.Element {\n  const editor = createMemo(() => {\n    const doc = new Y.Doc()\n    const provider = new WebsocketProvider(\n      'wss://demos.yjs.dev/ws',\n      `github.com/prosekit/room_${props.room}`,\n      doc,\n    )\n\n    const extension = defineExtension(doc, provider.awareness)\n    return createEditor({ extension })\n  })\n\n  return (\n    <ProseKit editor={editor()}>\n      <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-[canvas] text-black dark:text-white\">\n        <Toolbar />\n        <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <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>\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
     },
     {
       "path": "registry/src/solid/examples/yjs/editor.tsx",