prosekit-registry 0.0.1

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

@@ -0,0 +1,59 @@
+{
+  "name": "svelte-example-readonly",
+  "title": "svelte-example-readonly",
+  "type": "registry:block",
+  "description": "Toggle between read-only and editable mode.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-readonly.json",
+    "https://prosekit.dev/r/svelte-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/readonly/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/readonly/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-readonly'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/readonly/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/readonly/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\n\nexport function defineExtension() {\n  return defineBasicExtension()\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/readonly/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/readonly/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/readonly/toolbar.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/readonly/toolbar.svelte",
+      "content": "<script lang=\"ts\">\nimport { defineReadonly } from 'prosekit/extensions/readonly'\nimport { useExtension } from 'prosekit/svelte'\nimport { toStore } from 'svelte/store'\n\nimport { Button } from '../../ui/button'\n\nlet readonly = $state(true)\n\nconst extension = $derived(readonly ? defineReadonly() : null)\n\nuseExtension(toStore(() => extension))\n\nfunction setReadonly(value: boolean) {\n  readonly = value\n}\n</script>\n\n<div class=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n  <Button pressed={readonly} onClick={() => setReadonly(true)}>\n    Readonly\n  </Button>\n\n  <Button pressed={!readonly} onClick={() => setReadonly(false)}>\n    Editable\n  </Button>\n</div>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "readonly",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/readonly/editor.svelte",
+      "registry/src/svelte/examples/readonly/extension.ts",
+      "registry/src/svelte/examples/readonly/index.ts",
+      "registry/src/svelte/examples/readonly/toolbar.svelte",
+      "registry/src/svelte/sample/sample-doc-readonly.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-readonly",
+      "svelte-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,74 @@
+{
+  "name": "svelte-example-rtl",
+  "title": "svelte-example-rtl",
+  "type": "registry:block",
+  "description": "Right-to-left text direction support.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-rtl.json",
+    "https://prosekit.dev/r/svelte-sample-sample-uploader.json",
+    "https://prosekit.dev/r/svelte-ui-block-handle.json",
+    "https://prosekit.dev/r/svelte-ui-drop-indicator.json",
+    "https://prosekit.dev/r/svelte-ui-inline-menu.json",
+    "https://prosekit.dev/r/svelte-ui-slash-menu.json",
+    "https://prosekit.dev/r/svelte-ui-table-handle.json",
+    "https://prosekit.dev/r/svelte-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/rtl/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/rtl/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport '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/svelte'\nimport { untrack } from 'svelte'\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\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineBasicExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/rtl/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/rtl/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "rtl",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/rtl/editor.svelte",
+      "registry/src/svelte/examples/rtl/index.ts",
+      "registry/src/svelte/sample/sample-doc-rtl.ts",
+      "registry/src/svelte/sample/sample-uploader.ts",
+      "registry/src/svelte/ui/block-handle/block-handle.svelte",
+      "registry/src/svelte/ui/block-handle/index.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts",
+      "registry/src/svelte/ui/drop-indicator/drop-indicator.svelte",
+      "registry/src/svelte/ui/drop-indicator/index.ts",
+      "registry/src/svelte/ui/image-upload-popover/image-upload-popover.svelte",
+      "registry/src/svelte/ui/image-upload-popover/index.ts",
+      "registry/src/svelte/ui/inline-menu/index.ts",
+      "registry/src/svelte/ui/inline-menu/inline-menu.svelte",
+      "registry/src/svelte/ui/slash-menu/index.ts",
+      "registry/src/svelte/ui/slash-menu/slash-menu-empty.svelte",
+      "registry/src/svelte/ui/slash-menu/slash-menu-item.svelte",
+      "registry/src/svelte/ui/slash-menu/slash-menu.svelte",
+      "registry/src/svelte/ui/table-handle/index.ts",
+      "registry/src/svelte/ui/table-handle/table-handle.svelte",
+      "registry/src/svelte/ui/toolbar/index.ts",
+      "registry/src/svelte/ui/toolbar/toolbar.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-rtl",
+      "svelte-sample-sample-uploader",
+      "svelte-ui-block-handle",
+      "svelte-ui-drop-indicator",
+      "svelte-ui-inline-menu",
+      "svelte-ui-slash-menu",
+      "svelte-ui-table-handle",
+      "svelte-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "svelte-example-save-html",
+  "title": "svelte-example-save-html",
+  "type": "registry:block",
+  "description": "Save and load documents as HTML format.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/save-html/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-html/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport '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/svelte'\n\n// A list of saved documents, stored as HTML strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = editor.getDocHTML()\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(jsonFromHTML(record, { schema: editor.schema }))\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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    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    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\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    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div {@attach 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  {/key}\n</div>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/save-html/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-html/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "save-html",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/save-html/editor.svelte",
+      "registry/src/svelte/examples/save-html/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "svelte-example-save-json",
+  "title": "svelte-example-save-json",
+  "type": "registry:block",
+  "description": "Save and load documents as JSON format.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/save-json/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-json/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport '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/svelte'\n\n// A list of saved documents, stored as JSON strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const record = JSON.stringify(editor.getDocJSON())\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  editor.setContent(JSON.parse(record) as NodeJSON)\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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    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    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\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    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div {@attach 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  {/key}\n</div>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/save-json/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-json/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "save-json",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/save-json/editor.svelte",
+      "registry/src/svelte/examples/save-json/index.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,50 @@
+{
+  "name": "svelte-example-save-markdown",
+  "title": "svelte-example-save-markdown",
+  "type": "registry:block",
+  "description": "Save and load documents as Markdown format.",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit",
+    "rehype-parse",
+    "rehype-remark",
+    "remark-gfm",
+    "remark-html",
+    "remark-parse",
+    "remark-stringify",
+    "unified"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/save-markdown/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-markdown/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport '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/svelte'\n\nimport { htmlFromMarkdown, markdownFromHTML } from './markdown'\n\n// A list of saved documents, stored as Markdown strings\nlet records = $state<string[]>([])\n// Whether there are unsaved changes\nlet hasUnsavedChange = $state(false)\n// A key to force a re-render of the editor\nlet key = $state(1)\n\nconst extension = defineBasicExtension()\nconst editor = createEditor({ extension })\n\nfunction handleDocChange() {\n  hasUnsavedChange = true\n}\nuseDocChange(handleDocChange, { editor })\n\nfunction handleSave() {\n  const html = editor.getDocHTML()\n  const record = markdownFromHTML(html)\n  records = [...records, record]\n  hasUnsavedChange = false\n}\n\nfunction handleLoad(record: string) {\n  const html = htmlFromMarkdown(record)\n  editor.setContent(jsonFromHTML(html, { schema: editor.schema }))\n  hasUnsavedChange = false\n  key += 1\n}\n</script>\n\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    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    onclick={handleSave}\n  >\n    {hasUnsavedChange ? 'Save' : 'No changes to save'}\n  </button>\n  <ul class=\"border-b border-t border-solid text-sm\">\n    {#each records as record, index (index)}\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    {/each}\n  </ul>\n  {#key key}\n    <ProseKit {editor}>\n      <div class=\"relative w-full flex-1 box-border overflow-y-auto\">\n        <div {@attach 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  {/key}\n</div>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/save-markdown/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-markdown/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/save-markdown/markdown.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/save-markdown/markdown.ts",
+      "content": "import rehypeParse from 'rehype-parse'\nimport rehypeRemark from 'rehype-remark'\nimport remarkGfm from 'remark-gfm'\nimport remarkHtml from 'remark-html'\nimport remarkParse from 'remark-parse'\nimport remarkStringify from 'remark-stringify'\nimport { unified } from 'unified'\n\nexport function markdownFromHTML(html: string): string {\n  return unified()\n    .use(rehypeParse)\n    .use(rehypeRemark)\n    .use(remarkGfm)\n    .use(remarkStringify)\n    .processSync(html)\n    .toString()\n}\n\nexport function htmlFromMarkdown(markdown: string): string {\n  return unified()\n    .use(remarkParse)\n    .use(remarkGfm)\n    .use(remarkHtml)\n    .processSync(markdown)\n    .toString()\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "save-markdown",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/save-markdown/editor.svelte",
+      "registry/src/svelte/examples/save-markdown/index.ts",
+      "registry/src/svelte/examples/save-markdown/markdown.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,54 @@
+{
+  "name": "svelte-example-search",
+  "title": "svelte-example-search",
+  "type": "registry:block",
+  "description": "Search and highlight text with navigation.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-search.json",
+    "https://prosekit.dev/r/svelte-ui-search.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/search/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/search/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport '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/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-search'\nimport { Search } from '../../ui/search'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/search/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/search/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineSearchCommands } from 'prosekit/extensions/search'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineSearchCommands())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/search/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/search/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "search",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/search/editor.svelte",
+      "registry/src/svelte/examples/search/extension.ts",
+      "registry/src/svelte/examples/search/index.ts",
+      "registry/src/svelte/sample/sample-doc-search.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts",
+      "registry/src/svelte/ui/search/index.ts",
+      "registry/src/svelte/ui/search/search.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-search",
+      "svelte-ui-search"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,51 @@
+{
+  "name": "svelte-example-slash-menu",
+  "title": "svelte-example-slash-menu",
+  "type": "registry:block",
+  "description": "Command menu triggered by typing slash (/).",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-ui-slash-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/slash-menu/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/slash-menu/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { SlashMenu } from '../../ui/slash-menu'\n\nimport { defineExtension } from './extension'\n\nconst extension = defineExtension()\nconst editor = createEditor({ extension })\n</script>\n\n<ProseKit {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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/slash-menu/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/slash-menu/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    definePlaceholder({ placeholder: 'Press / for commands...' }),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/slash-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/slash-menu/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "slash-menu",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/slash-menu/editor.svelte",
+      "registry/src/svelte/examples/slash-menu/extension.ts",
+      "registry/src/svelte/examples/slash-menu/index.ts",
+      "registry/src/svelte/ui/slash-menu/index.ts",
+      "registry/src/svelte/ui/slash-menu/slash-menu-empty.svelte",
+      "registry/src/svelte/ui/slash-menu/slash-menu-item.svelte",
+      "registry/src/svelte/ui/slash-menu/slash-menu.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-ui-slash-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "svelte-example-strike",
+  "title": "svelte-example-strike",
+  "type": "registry:block",
+  "description": "Example for strikethrough mark.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-strike.json",
+    "https://prosekit.dev/r/svelte-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/strike/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/strike/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-strike'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/strike/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/strike/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineStrike } from 'prosekit/extensions/strike'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineStrike(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/strike/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/strike/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/strike/toolbar.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/strike/toolbar.svelte",
+      "content": "<script lang=\"ts\">\nimport { useEditor } from 'prosekit/svelte'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nconst editor = useEditor<EditorExtension>({ update: true })\n</script>\n\n<div class=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n  <Button\n    pressed={false}\n    disabled={!$editor.commands.toggleStrike.canExec()}\n    onClick={() => $editor.commands.toggleStrike()}\n  >\n    Strikethrough\n  </Button>\n</div>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "strike",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/strike/editor.svelte",
+      "registry/src/svelte/examples/strike/extension.ts",
+      "registry/src/svelte/examples/strike/index.ts",
+      "registry/src/svelte/examples/strike/toolbar.svelte",
+      "registry/src/svelte/sample/sample-doc-strike.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-strike",
+      "svelte-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,52 @@
+{
+  "name": "svelte-example-table",
+  "title": "svelte-example-table",
+  "type": "registry:block",
+  "description": "Table node with row and column operations.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-table.json",
+    "https://prosekit.dev/r/svelte-ui-table-handle.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/table/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/table/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-table'\nimport { TableHandle } from '../../ui/table-handle'\n\nimport { defineExtension } from './extension'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/table/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/table/extension.ts",
+      "content": "import { defineBaseKeymap, defineHistory, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineGapCursor } from 'prosekit/extensions/gap-cursor'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineTable } from 'prosekit/extensions/table'\nimport { defineText } from 'prosekit/extensions/text'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineTable(),\n    defineHistory(),\n    defineGapCursor(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/table/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/table/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "table",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/table/editor.svelte",
+      "registry/src/svelte/examples/table/extension.ts",
+      "registry/src/svelte/examples/table/index.ts",
+      "registry/src/svelte/sample/sample-doc-table.ts",
+      "registry/src/svelte/ui/table-handle/index.ts",
+      "registry/src/svelte/ui/table-handle/table-handle.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-table",
+      "svelte-ui-table-handle"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "svelte-example-text-align",
+  "title": "svelte-example-text-align",
+  "type": "registry:block",
+  "description": "Text alignment options (left, center, right, justify).",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-text-align.json",
+    "https://prosekit.dev/r/svelte-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/text-align/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-align/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\nimport { untrack } from 'svelte'\n\nimport { sampleContent } from '../../sample/sample-doc-text-align'\n\nimport { defineExtension } from './extension'\nimport Toolbar from './toolbar.svelte'\n\nconst props: {\n  initialContent?: NodeJSON\n} = $props()\n\nconst extension = defineExtension()\nconst defaultContent = untrack(() => props.initialContent ?? sampleContent)\nconst editor = createEditor({ extension, defaultContent })\n</script>\n\n<ProseKit {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 {@attach 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"
+    },
+    {
+      "path": "registry/src/svelte/examples/text-align/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-align/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineTextAlign } from 'prosekit/extensions/text-align'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    defineTextAlign({ types: ['paragraph', 'heading'] }),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/text-align/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-align/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/text-align/toolbar.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-align/toolbar.svelte",
+      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue } from 'prosekit/svelte'\n\nimport { Button } from '../../ui/button'\n\nimport type { EditorExtension } from './extension'\n\nfunction isTextAlignActive(editor: Editor<EditorExtension>, value: string) {\n  return Object.values(editor.nodes).some((node) => {\n    // @ts-expect-error textAlign may not be available on every node\n    return node.isActive({ textAlign: value })\n  })\n}\n\nfunction getToolbarItems(editor: Editor<EditorExtension>) {\n  return {\n    left: {\n      isActive: isTextAlignActive(editor, 'left'),\n      canExec: editor.commands.setTextAlign.canExec('left'),\n      command: () => editor.commands.setTextAlign('left'),\n    },\n    center: {\n      isActive: isTextAlignActive(editor, 'center'),\n      canExec: editor.commands.setTextAlign.canExec('center'),\n      command: () => editor.commands.setTextAlign('center'),\n    },\n    right: {\n      isActive: isTextAlignActive(editor, 'right'),\n      canExec: editor.commands.setTextAlign.canExec('right'),\n      command: () => editor.commands.setTextAlign('right'),\n    },\n    justify: {\n      isActive: isTextAlignActive(editor, 'justify'),\n      canExec: editor.commands.setTextAlign.canExec('justify'),\n      command: () => editor.commands.setTextAlign('justify'),\n    },\n  }\n}\n\nconst items = useEditorDerivedValue(getToolbarItems)\n</script>\n\n<div class=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n  <Button\n    pressed={$items.left.isActive}\n    disabled={!$items.left.canExec}\n    onClick={$items.left.command}\n  >\n    Left\n  </Button>\n\n  <Button\n    pressed={$items.center.isActive}\n    disabled={!$items.center.canExec}\n    onClick={$items.center.command}\n  >\n    Center\n  </Button>\n\n  <Button\n    pressed={$items.right.isActive}\n    disabled={!$items.right.canExec}\n    onClick={$items.right.command}\n  >\n    Right\n  </Button>\n\n  <Button\n    pressed={$items.justify.isActive}\n    disabled={!$items.justify.canExec}\n    onClick={$items.justify.command}\n  >\n    Justify\n  </Button>\n</div>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "text-align",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/text-align/editor.svelte",
+      "registry/src/svelte/examples/text-align/extension.ts",
+      "registry/src/svelte/examples/text-align/index.ts",
+      "registry/src/svelte/examples/text-align/toolbar.svelte",
+      "registry/src/svelte/sample/sample-doc-text-align.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-text-align",
+      "svelte-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}