prosekit-registry 0.0.1

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

@@ -0,0 +1,59 @@
+{
+  "name": "svelte-example-text-color",
+  "title": "svelte-example-text-color",
+  "type": "registry:block",
+  "description": "Change text and background color.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-text-color.json",
+    "https://prosekit.dev/r/svelte-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/text-color/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-color/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-color'\n\nimport { defineExtension } from './extension'\nimport InlineMenu from './inline-menu.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    <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    </div>\n  </div>\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/text-color/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-color/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineBackgroundColor } from 'prosekit/extensions/background-color'\nimport { defineTextColor } from 'prosekit/extensions/text-color'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineTextColor(), defineBackgroundColor())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/text-color/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-color/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/text-color/inline-menu.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-color/inline-menu.svelte",
+      "content": "<script lang=\"ts\">\nimport type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/svelte'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/svelte/inline-popover'\nimport { toStore } from 'svelte/store'\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    label: 'Default',\n    value: 'currentColor',\n    isActive: !editor.marks.textColor.isActive(),\n    onClick: () => editor.commands.removeTextColor(),\n  }].concat(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\nfunction getBackgroundColorState(editor: Editor<EditorExtension>) {\n  return [{\n    label: 'Default',\n    value: 'canvas',\n    isActive: !editor.marks.backgroundColor.isActive(),\n    onClick: () => editor.commands.removeBackgroundColor(),\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\nconst textColorState = useEditorDerivedValue(getTextColorState)\nconst backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n\nlet open = $state(false)\n\nconst keymap = $derived({\n  Escape: () => {\n    if (open) {\n      open = false\n      return true\n    }\n    return false\n  },\n})\n\nuseKeymap(toStore(() => keymap))\n</script>\n\n<InlinePopoverRoot\n  {open}\n  onOpenChange={(event) => open = event.detail}\n>\n  <InlinePopoverPositioner class=\"block overflow-visible bg-transparent w-min h-min z-50 motion-safe:ease-out motion-safe:transition-transform motion-safe:duration-100\">\n    <InlinePopoverPopup class=\"box-border data-[state=closed]:motion-safe:duration-150 motion-safe:transition-discrete motion-safe:transition-all data-[state=closed]:opacity-0 starting:opacity-0 opacity-100 data-[state=closed]:scale-95 starting:scale-95 scale-100 motion-safe:duration-40 border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg 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            {#each $textColorState as color (color.label)}\n              <Button\n                pressed={color.isActive}\n                tooltip={`Text: ${color.label}`}\n                onClick={color.onClick}\n              >\n                <span class=\"text-base font-medium\" style:color={color.value}>\n                  A\n                </span>\n              </Button>\n            {/each}\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            {#each $backgroundColorState as color (color.label)}\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                </div>\n              </Button>\n            {/each}\n          </div>\n        </div>\n      </div>\n    </InlinePopoverPopup>\n  </InlinePopoverPositioner>\n</InlinePopoverRoot>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "text-color",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/text-color/editor.svelte",
+      "registry/src/svelte/examples/text-color/extension.ts",
+      "registry/src/svelte/examples/text-color/index.ts",
+      "registry/src/svelte/examples/text-color/inline-menu.svelte",
+      "registry/src/svelte/sample/sample-doc-text-color.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-text-color",
+      "svelte-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "svelte-example-toolbar",
+  "title": "svelte-example-toolbar",
+  "type": "registry:block",
+  "description": "Formatting toolbar with common editing actions.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-uploader.json",
+    "https://prosekit.dev/r/svelte-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/toolbar/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/toolbar/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 { sampleUploader } from '../../sample/sample-uploader'\nimport { Toolbar } from '../../ui/toolbar'\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    <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    </div>\n  </div>\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/toolbar/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/toolbar/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nexport function defineExtension() {\n  return union(defineBasicExtension())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/toolbar/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/toolbar/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "toolbar",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/toolbar/editor.svelte",
+      "registry/src/svelte/examples/toolbar/extension.ts",
+      "registry/src/svelte/examples/toolbar/index.ts",
+      "registry/src/svelte/sample/sample-uploader.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/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/toolbar/index.ts",
+      "registry/src/svelte/ui/toolbar/toolbar.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-uploader",
+      "svelte-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "svelte-example-typography",
+  "title": "svelte-example-typography",
+  "type": "registry:block",
+  "description": "Typography enhancements like smart quotes and dashes.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-katex.json",
+    "https://prosekit.dev/r/svelte-sample-sample-doc-typography.json",
+    "https://prosekit.dev/r/svelte-ui-block-handle.json",
+    "https://prosekit.dev/r/svelte-ui-drop-indicator.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/typography/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/typography/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-typography'\nimport { BlockHandle } from '../../ui/block-handle'\nimport { DropIndicator } from '../../ui/drop-indicator'\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      <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      <BlockHandle />\n      <DropIndicator />\n    </div>\n  </div>\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/typography/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/typography/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineMath } from 'prosekit/extensions/math'\n\nimport { renderKaTeXMathBlock, renderKaTeXMathInline } from '../../sample/katex'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineMath({ renderMathBlock: renderKaTeXMathBlock, renderMathInline: renderKaTeXMathInline }))\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/typography/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/typography/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "typography",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/typography/editor.svelte",
+      "registry/src/svelte/examples/typography/extension.ts",
+      "registry/src/svelte/examples/typography/index.ts",
+      "registry/src/svelte/sample/katex.ts",
+      "registry/src/svelte/sample/sample-doc-typography.ts",
+      "registry/src/svelte/ui/block-handle/block-handle.svelte",
+      "registry/src/svelte/ui/block-handle/index.ts",
+      "registry/src/svelte/ui/drop-indicator/drop-indicator.svelte",
+      "registry/src/svelte/ui/drop-indicator/index.ts"
+    ],
+    "internalDependencies": [
+      "svelte-sample-katex",
+      "svelte-sample-sample-doc-typography",
+      "svelte-ui-block-handle",
+      "svelte-ui-drop-indicator"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "svelte-example-underline",
+  "title": "svelte-example-underline",
+  "type": "registry:block",
+  "description": "Example for underline mark.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-underline.json",
+    "https://prosekit.dev/r/svelte-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/underline/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/underline/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-underline'\nimport { Toolbar } from '../../ui/toolbar'\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    <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/underline/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/underline/extension.ts",
+      "content": "import { defineBaseKeymap, union } from 'prosekit/core'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineText } from 'prosekit/extensions/text'\nimport { defineUnderline } from 'prosekit/extensions/underline'\n\nexport function defineExtension() {\n  return union(\n    defineBaseKeymap(),\n    defineDoc(),\n    defineText(),\n    defineParagraph(),\n    defineUnderline(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/underline/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/underline/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "underline",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/underline/editor.svelte",
+      "registry/src/svelte/examples/underline/extension.ts",
+      "registry/src/svelte/examples/underline/index.ts",
+      "registry/src/svelte/sample/sample-doc-underline.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/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/toolbar/index.ts",
+      "registry/src/svelte/ui/toolbar/toolbar.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-underline",
+      "svelte-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,58 @@
+{
+  "name": "svelte-example-unmount",
+  "title": "svelte-example-unmount",
+  "type": "registry:block",
+  "description": "Properly unmount and remount editor instances.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-ui-inline-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/unmount/editor-component.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/editor-component.svelte",
+      "content": "<script lang=\"ts\">\nimport 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/svelte'\n\nimport { InlineMenu } from '../../ui/inline-menu'\nimport ExtensionComponent from './extension-component.svelte'\n\nconst props: {\n  placeholder: string\n} = $props()\n\nconst extension = defineBasicExtension()\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      <InlineMenu />\n    </div>\n  </div>\n  <ExtensionComponent placeholder={props.placeholder} />\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/unmount/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/editor.svelte",
+      "content": "<script lang=\"ts\">\nimport EditorComponent from './editor-component.svelte'\n\nlet nextKey = $state(1)\nlet editorKeys = $state<number[]>([])\n\nfunction addEditor() {\n  const key = nextKey\n  nextKey += 1\n  editorKeys = [...editorKeys, key]\n}\n\nfunction removeEditor(key: number) {\n  editorKeys = editorKeys.filter((k) => k !== key)\n}\n</script>\n\n<div class=\"flex flex-col gap-2\">\n  <div class=\"flex gap-2\">\n    <button class=\"border p-2\" onclick={addEditor}>\n      Add editor\n    </button>\n    {#each editorKeys as key (key)}\n      <button\n        class=\"border p-2\"\n        onclick={() => removeEditor(key)}\n      >\n        Unmount No.{key}\n      </button>\n    {/each}\n  </div>\n  {#each editorKeys as key (key)}\n    <div>\n      <EditorComponent placeholder={`Editor No.${key}`} />\n    </div>\n  {/each}\n</div>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/unmount/extension-component.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/extension-component.svelte",
+      "content": "<script lang=\"ts\">\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\nimport { useExtension } from 'prosekit/svelte'\nimport { toStore } from 'svelte/store'\n\nconst props: {\n  placeholder: string\n} = $props()\n\nconst extension = $derived(definePlaceholder({ placeholder: props.placeholder }))\n\nuseExtension(toStore(() => extension))\n</script>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/unmount/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "unmount",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/unmount/editor-component.svelte",
+      "registry/src/svelte/examples/unmount/editor.svelte",
+      "registry/src/svelte/examples/unmount/extension-component.svelte",
+      "registry/src/svelte/examples/unmount/index.ts",
+      "registry/src/svelte/ui/button/button.svelte",
+      "registry/src/svelte/ui/button/index.ts",
+      "registry/src/svelte/ui/inline-menu/index.ts",
+      "registry/src/svelte/ui/inline-menu/inline-menu.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-ui-inline-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,67 @@
+{
+  "name": "svelte-example-user-menu-dynamic",
+  "title": "svelte-example-user-menu-dynamic",
+  "type": "registry:block",
+  "description": "Dynamic autocomplete menu with async data loading.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-query-users.json",
+    "https://prosekit.dev/r/svelte-ui-user-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/user-menu-dynamic/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/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 UserMenuDynamic from './user-menu-dynamic.svelte'\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      <UserMenuDynamic />\n    </div>\n  </div>\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/user-menu-dynamic/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineMention } from 'prosekit/extensions/mention'\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    definePlaceholder({\n      placeholder: 'Type @ to mention someone...',\n    }),\n    defineMention(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/user-menu-dynamic/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/user-menu-dynamic/use-user-query.svelte.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/use-user-query.svelte.ts",
+      "content": "import { queryUsers, type User } from '../../sample/sample-query-users'\n\nexport function useUserQuery(\n  getQuery: () => string,\n  getEnabled: () => boolean,\n) {\n  let loading = $state(true)\n  let users = $state<User[]>([])\n\n  $effect(() => {\n    const query = getQuery()\n    const enabled = getEnabled()\n\n    if (!enabled) {\n      users = []\n      return\n    }\n\n    loading = true\n    let cancelled = false\n    void queryUsers(query).then((result) => {\n      if (cancelled) {\n        return\n      }\n      users = result\n      loading = false\n    })\n    return () => {\n      cancelled = true\n    }\n  })\n\n  return {\n    getLoading: () => loading,\n    getUsers: () => users,\n  }\n}\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/user-menu-dynamic/user-menu-dynamic.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/user-menu-dynamic.svelte",
+      "content": "<script lang=\"ts\">\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { useUserQuery } from './use-user-query.svelte.js'\n\nlet query = $state('')\nlet open = $state(false)\n\nconst { getLoading, getUsers } = useUserQuery(() => query, () => open)\n\nfunction handleQueryChange(value: string) {\n  query = value\n}\n\nfunction handleOpenChange(value: boolean) {\n  open = value\n}\n</script>\n\n<UserMenu\n  users={getUsers()}\n  loading={getLoading()}\n  onQueryChange={handleQueryChange}\n  onOpenChange={handleOpenChange}\n/>\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "user-menu-dynamic",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/user-menu-dynamic/editor.svelte",
+      "registry/src/svelte/examples/user-menu-dynamic/extension.ts",
+      "registry/src/svelte/examples/user-menu-dynamic/index.ts",
+      "registry/src/svelte/examples/user-menu-dynamic/use-user-query.svelte.ts",
+      "registry/src/svelte/examples/user-menu-dynamic/user-menu-dynamic.svelte",
+      "registry/src/svelte/sample/sample-query-users.ts",
+      "registry/src/svelte/sample/sample-user-data.ts",
+      "registry/src/svelte/ui/user-menu/index.ts",
+      "registry/src/svelte/ui/user-menu/user-menu.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-query-users",
+      "svelte-ui-user-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "svelte-example-user-menu",
+  "title": "svelte-example-user-menu",
+  "type": "registry:block",
+  "description": "Autocomplete menu for @mentions and #hashtag",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-tag-data.json",
+    "https://prosekit.dev/r/svelte-sample-sample-user-data.json",
+    "https://prosekit.dev/r/svelte-ui-tag-menu.json",
+    "https://prosekit.dev/r/svelte-ui-user-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/user-menu/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-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 { 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\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      <UserMenu {users} />\n      <TagMenu {tags} />\n    </div>\n  </div>\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/user-menu/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineMention } from 'prosekit/extensions/mention'\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    definePlaceholder({\n      placeholder: 'Type @ to mention someone or # to tag something...',\n    }),\n    defineMention(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/user-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "user-menu",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/user-menu/editor.svelte",
+      "registry/src/svelte/examples/user-menu/extension.ts",
+      "registry/src/svelte/examples/user-menu/index.ts",
+      "registry/src/svelte/sample/sample-tag-data.ts",
+      "registry/src/svelte/sample/sample-user-data.ts",
+      "registry/src/svelte/ui/tag-menu/index.ts",
+      "registry/src/svelte/ui/tag-menu/tag-menu.svelte",
+      "registry/src/svelte/ui/user-menu/index.ts",
+      "registry/src/svelte/ui/user-menu/user-menu.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-tag-data",
+      "svelte-sample-sample-user-data",
+      "svelte-ui-tag-menu",
+      "svelte-ui-user-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,58 @@
+{
+  "name": "svelte-example-view-adapter",
+  "title": "svelte-example-view-adapter",
+  "type": "registry:block",
+  "description": "Custom node and mark views using view adapters.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-define-atom-block.json",
+    "https://prosekit.dev/r/svelte-sample-sample-doc-view-adapter.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/view-adapter/atom-block-view.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/atom-block-view.svelte",
+      "content": "<script lang=\"ts\">\nimport { useEditorDerivedValue, type SvelteNodeViewProps } from 'prosekit/svelte'\n\nconst props: SvelteNodeViewProps = $props()\n\nconst docJSON = useEditorDerivedValue((editor) => {\n  return JSON.stringify(editor.getDocJSON(), null, 2)\n})\n</script>\n\n<div data-atom-block=\"true\" data-atom-block-view=\"true\" class=\"bg-green-500/30\">\n  <div data-testid=\"atom-block-view-label\">Atom Block View</div>\n  <div data-testid=\"atom-block-view-pos\">{props.getPos()}</div>\n  <div data-testid=\"atom-block-view-context\">\n    <pre>{$docJSON}</pre>\n  </div>\n</div>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/view-adapter/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/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-view-adapter'\n\nimport { defineExtension } from './extension'\n\nexport interface Props {\n  initialContent?: NodeJSON\n}\n\nconst props: Props = $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      <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/view-adapter/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineSvelteNodeView } from 'prosekit/svelte'\n\nimport { defineAtomBlock } from '../../sample/define-atom-block'\n\nimport AtomBlockView from './atom-block-view.svelte'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    defineAtomBlock(),\n    defineSvelteNodeView({\n      name: 'atomBlock',\n      component: AtomBlockView,\n    }),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/view-adapter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": true,
+    "story": "view-adapter",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/view-adapter/atom-block-view.svelte",
+      "registry/src/svelte/examples/view-adapter/editor.svelte",
+      "registry/src/svelte/examples/view-adapter/extension.ts",
+      "registry/src/svelte/examples/view-adapter/index.ts",
+      "registry/src/svelte/sample/define-atom-block.ts",
+      "registry/src/svelte/sample/sample-doc-view-adapter.ts"
+    ],
+    "internalDependencies": [
+      "svelte-sample-define-atom-block",
+      "svelte-sample-sample-doc-view-adapter"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,52 @@
+{
+  "name": "svelte-example-word-counter",
+  "title": "svelte-example-word-counter",
+  "type": "registry:block",
+  "description": "Display word and character count statistics.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/svelte-sample-sample-doc-word-counter.json",
+    "https://prosekit.dev/r/svelte-ui-word-counter.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/svelte/examples/word-counter/editor.svelte",
+      "type": "registry:component",
+      "target": "components/editor/examples/word-counter/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-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\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      <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      <WordCounter />\n    </div>\n  </div>\n</ProseKit>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/word-counter/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/word-counter/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\n\nexport function defineExtension() {\n  return union(defineBasicExtension())\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/svelte/examples/word-counter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/word-counter/index.ts",
+      "content": "export { default as ExampleEditor } from './editor.svelte'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "word-counter",
+    "framework": "svelte",
+    "accumulatedFiles": [
+      "registry/src/svelte/examples/word-counter/editor.svelte",
+      "registry/src/svelte/examples/word-counter/extension.ts",
+      "registry/src/svelte/examples/word-counter/index.ts",
+      "registry/src/svelte/sample/sample-doc-word-counter.ts",
+      "registry/src/svelte/ui/word-counter/index.ts",
+      "registry/src/svelte/ui/word-counter/word-counter.svelte"
+    ],
+    "internalDependencies": [
+      "svelte-sample-sample-doc-word-counter",
+      "svelte-ui-word-counter"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}