prosekit-registry 0.0.1

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

@@ -0,0 +1,51 @@
+{
+  "name": "preact-example-temml",
+  "title": "preact-example-temml",
+  "type": "registry:block",
+  "description": "Math equation rendering using the Temml library.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-tex.json",
+    "https://prosekit.dev/r/preact-sample-temml.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\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) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/examples/temml/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/temml/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { union } from 'prosekit/core'\nimport { defineMath } from 'prosekit/extensions/math'\n\nimport { renderTemmlMathBlock, renderTemmlMathInline } from '../../sample/temml'\n\nexport function defineExtension() {\n  return union(defineBasicExtension(), defineMath({ renderMathBlock: renderTemmlMathBlock, renderMathInline: renderTemmlMathInline }))\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/preact/examples/temml/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/temml/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "temml",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/temml/editor.tsx",
+      "registry/src/preact/examples/temml/extension.ts",
+      "registry/src/preact/examples/temml/index.ts",
+      "registry/src/preact/sample/sample-doc-tex.ts",
+      "registry/src/preact/sample/temml.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-tex",
+      "preact-sample-temml"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "preact-example-text-align",
+  "title": "preact-example-text-align",
+  "type": "registry:block",
+  "description": "Text alignment options (left, center, right, justify).",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-text-align.json",
+    "https://prosekit.dev/r/preact-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\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) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/examples/text-align/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-align/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    },
+    {
+      "path": "registry/src/preact/examples/text-align/toolbar.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-align/toolbar.tsx",
+      "content": "import type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue } from 'prosekit/preact'\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\nexport default function Toolbar() {\n  const items = useEditorDerivedValue(getToolbarItems)\n\n  return (\n    <div className=\"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  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "text-align",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/text-align/editor.tsx",
+      "registry/src/preact/examples/text-align/extension.ts",
+      "registry/src/preact/examples/text-align/index.ts",
+      "registry/src/preact/examples/text-align/toolbar.tsx",
+      "registry/src/preact/sample/sample-doc-text-align.ts",
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-text-align",
+      "preact-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "preact-example-text-color",
+  "title": "preact-example-text-color",
+  "type": "registry:block",
+  "description": "Change text and background color.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-text-color.json",
+    "https://prosekit.dev/r/preact-ui-button.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\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) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/examples/text-color/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-color/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    },
+    {
+      "path": "registry/src/preact/examples/text-color/inline-menu.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/text-color/inline-menu.tsx",
+      "content": "import { useMemo, useState } from 'preact/hooks'\nimport type { Editor, Keymap } from 'prosekit/core'\nimport { useEditorDerivedValue, useKeymap } from 'prosekit/preact'\nimport { InlinePopoverPopup, InlinePopoverPositioner, InlinePopoverRoot } from 'prosekit/preact/inline-popover'\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\nexport default function InlineMenu() {\n  const textColorState = useEditorDerivedValue(getTextColorState)\n  const backgroundColorState = useEditorDerivedValue(getBackgroundColorState)\n  const [open, setOpen] = useState(false)\n\n  const keymap: Keymap = useMemo(() => ({\n    Escape: () => {\n      if (open) {\n        setOpen(false)\n        return true\n      }\n      return false\n    },\n  }), [open])\n\n  useKeymap(keymap)\n\n  return (\n    <InlinePopoverRoot\n      open={open}\n      onOpenChange={(event) => setOpen(event.detail)}\n    >\n      <InlinePopoverPositioner className=\"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 className=\"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 className=\"flex flex-col gap-4 p-4\">\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"text-sm\">Text color</div>\n              <div className=\"grid grid-cols-5 gap-1\">\n                {textColorState.map((color) => (\n                  <Button\n                    key={color.label}\n                    pressed={color.isActive}\n                    tooltip={`Text: ${color.label}`}\n                    onClick={color.onClick}\n                  >\n                    <span\n                      className=\"text-base font-medium\"\n                      style={{ color: color.value }}\n                    >\n                      A\n                    </span>\n                  </Button>\n                ))}\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-2\">\n              <div className=\"text-sm\">Background color</div>\n              <div className=\"grid grid-cols-5 gap-1\">\n                {backgroundColorState.map((color) => (\n                  <Button\n                    key={color.label}\n                    pressed={color.isActive}\n                    tooltip={`Background: ${color.label}`}\n                    onClick={color.onClick}\n                  >\n                    <div\n                      className=\"w-6 h-6 rounded border border-gray-200 dark:border-gray-700\"\n                      style={{ backgroundColor: color.value }}\n                    />\n                  </Button>\n                ))}\n              </div>\n            </div>\n          </div>\n        </InlinePopoverPopup>\n      </InlinePopoverPositioner>\n    </InlinePopoverRoot>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "text-color",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/text-color/editor.tsx",
+      "registry/src/preact/examples/text-color/extension.ts",
+      "registry/src/preact/examples/text-color/index.ts",
+      "registry/src/preact/examples/text-color/inline-menu.tsx",
+      "registry/src/preact/sample/sample-doc-text-color.ts",
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-text-color",
+      "preact-ui-button"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "preact-example-toolbar",
+  "title": "preact-example-toolbar",
+  "type": "registry:block",
+  "description": "Formatting toolbar with common editing actions.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-uploader.json",
+    "https://prosekit.dev/r/preact-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { sampleUploader } from '../../sample/sample-uploader'\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/examples/toolbar/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/toolbar/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "toolbar",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/toolbar/editor.tsx",
+      "registry/src/preact/examples/toolbar/extension.ts",
+      "registry/src/preact/examples/toolbar/index.ts",
+      "registry/src/preact/sample/sample-uploader.ts",
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts",
+      "registry/src/preact/ui/image-upload-popover/image-upload-popover.tsx",
+      "registry/src/preact/ui/image-upload-popover/index.ts",
+      "registry/src/preact/ui/toolbar/index.ts",
+      "registry/src/preact/ui/toolbar/toolbar.tsx"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-uploader",
+      "preact-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "preact-example-typography",
+  "title": "preact-example-typography",
+  "type": "registry:block",
+  "description": "Typography enhancements like smart quotes and dashes.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-katex.json",
+    "https://prosekit.dev/r/preact-sample-sample-doc-typography.json",
+    "https://prosekit.dev/r/preact-ui-block-handle.json",
+    "https://prosekit.dev/r/preact-ui-drop-indicator.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\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) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/examples/typography/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/typography/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "typography",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/typography/editor.tsx",
+      "registry/src/preact/examples/typography/extension.ts",
+      "registry/src/preact/examples/typography/index.ts",
+      "registry/src/preact/sample/katex.ts",
+      "registry/src/preact/sample/sample-doc-typography.ts",
+      "registry/src/preact/ui/block-handle/block-handle.tsx",
+      "registry/src/preact/ui/block-handle/index.ts",
+      "registry/src/preact/ui/drop-indicator/drop-indicator.tsx",
+      "registry/src/preact/ui/drop-indicator/index.ts"
+    ],
+    "internalDependencies": [
+      "preact-sample-katex",
+      "preact-sample-sample-doc-typography",
+      "preact-ui-block-handle",
+      "preact-ui-drop-indicator"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "preact-example-underline",
+  "title": "preact-example-underline",
+  "type": "registry:block",
+  "description": "Example for underline mark.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-doc-underline.json",
+    "https://prosekit.dev/r/preact-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\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) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension, defaultContent })\n  }, [defaultContent])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/examples/underline/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/underline/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "underline",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/underline/editor.tsx",
+      "registry/src/preact/examples/underline/extension.ts",
+      "registry/src/preact/examples/underline/index.ts",
+      "registry/src/preact/sample/sample-doc-underline.ts",
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts",
+      "registry/src/preact/ui/image-upload-popover/image-upload-popover.tsx",
+      "registry/src/preact/ui/image-upload-popover/index.ts",
+      "registry/src/preact/ui/toolbar/index.ts",
+      "registry/src/preact/ui/toolbar/toolbar.tsx"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-doc-underline",
+      "preact-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,58 @@
+{
+  "name": "preact-example-unmount",
+  "title": "preact-example-unmount",
+  "type": "registry:block",
+  "description": "Properly unmount and remount editor instances.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-ui-inline-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { InlineMenu } from '../../ui/inline-menu'\n\nimport ExtensionComponent from './extension-component'\n\nexport default function EditorComponent(props: {\n  placeholder: string\n}) {\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineBasicExtension() })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/examples/unmount/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/editor.tsx",
+      "content": "import { useCallback, useRef, useState } from 'preact/hooks'\n\nimport EditorComponent from './editor-component'\n\nfunction EditorGroup() {\n  const nextKeyRef = useRef(1)\n  const [editorKeys, setEditorKeys] = useState<number[]>([])\n\n  const addEditor = useCallback(() => {\n    const key = nextKeyRef.current\n    nextKeyRef.current += 1\n    setEditorKeys((keys) => [...keys, key])\n  }, [])\n\n  const removeEditor = useCallback((key: number) => {\n    setEditorKeys((keys) => keys.filter((k) => k !== key))\n  }, [])\n\n  return (\n    <div className=\"flex flex-col gap-2\">\n      <div className=\"flex gap-2\">\n        <button onClick={addEditor} className=\"border p-2\">\n          Add editor\n        </button>\n        {editorKeys.map((key) => (\n          <button\n            key={key}\n            onClick={() => removeEditor(key)}\n            className=\"border p-2\"\n          >\n            Unmount No.{key}\n          </button>\n        ))}\n      </div>\n      {editorKeys.map((key) => (\n        <div key={key}>\n          <EditorComponent\n            placeholder={`Editor No.${key}`}\n          />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport default EditorGroup\n"
+    },
+    {
+      "path": "registry/src/preact/examples/unmount/extension-component.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/extension-component.tsx",
+      "content": "import { useMemo } from 'preact/hooks'\nimport { definePlaceholder } from 'prosekit/extensions/placeholder'\nimport { useExtension } from 'prosekit/preact'\n\nexport default function ExtensionComponent(props: {\n  placeholder: string\n}) {\n  const extension = useMemo(\n    () => definePlaceholder({ placeholder: props.placeholder }),\n    [props.placeholder],\n  )\n\n  useExtension(extension)\n\n  return null\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/unmount/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "unmount",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/unmount/editor-component.tsx",
+      "registry/src/preact/examples/unmount/editor.tsx",
+      "registry/src/preact/examples/unmount/extension-component.tsx",
+      "registry/src/preact/examples/unmount/index.ts",
+      "registry/src/preact/ui/button/button.tsx",
+      "registry/src/preact/ui/button/index.ts",
+      "registry/src/preact/ui/inline-menu/index.ts",
+      "registry/src/preact/ui/inline-menu/inline-menu.tsx"
+    ],
+    "internalDependencies": [
+      "preact-ui-inline-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,67 @@
+{
+  "name": "preact-example-user-menu-dynamic",
+  "title": "preact-example-user-menu-dynamic",
+  "type": "registry:block",
+  "description": "Dynamic autocomplete menu with async data loading.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-query-users.json",
+    "https://prosekit.dev/r/preact-ui-user-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\n\nimport { defineExtension } from './extension'\nimport UserMenuDynamic from './user-menu-dynamic'\n\nexport default function Editor() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/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'\n"
+    },
+    {
+      "path": "registry/src/preact/examples/user-menu-dynamic/use-user-query.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/use-user-query.ts",
+      "content": "import { useEffect, useState } from 'preact/hooks'\n\nimport type { User } from '../../sample/sample-query-users'\nimport { queryUsers } from '../../sample/sample-query-users'\n\n/**\n * Simulate a user searching with some delay.\n */\nexport function useUserQuery(query: string, enabled: boolean) {\n  const [users, setUsers] = useState<User[]>([])\n  const [loading, setLoading] = useState(true)\n\n  if (!enabled && users.length > 0) {\n    setUsers([])\n  }\n\n  useEffect(() => {\n    if (!enabled) {\n      return\n    }\n\n    let cancelled = false\n\n    void (async () => {\n      setLoading(true)\n      const filteredUsers = await queryUsers(query)\n      if (cancelled) {\n        return\n      }\n      setUsers(filteredUsers)\n      setLoading(false)\n    })()\n\n    return () => {\n      cancelled = true\n    }\n  }, [enabled, query])\n\n  return { loading, users }\n}\n"
+    },
+    {
+      "path": "registry/src/preact/examples/user-menu-dynamic/user-menu-dynamic.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/user-menu-dynamic.tsx",
+      "content": "import { useState } from 'preact/hooks'\n\nimport { UserMenu } from '../../ui/user-menu'\n\nimport { useUserQuery } from './use-user-query'\n\nexport default function UserMenuDynamic() {\n  const [query, setQuery] = useState('')\n  const [open, setOpen] = useState(false)\n\n  const { loading, users } = useUserQuery(query, open)\n\n  return (\n    <UserMenu\n      users={users}\n      loading={loading}\n      onQueryChange={setQuery}\n      onOpenChange={setOpen}\n    />\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "user-menu-dynamic",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/user-menu-dynamic/editor.tsx",
+      "registry/src/preact/examples/user-menu-dynamic/extension.ts",
+      "registry/src/preact/examples/user-menu-dynamic/index.ts",
+      "registry/src/preact/examples/user-menu-dynamic/use-user-query.ts",
+      "registry/src/preact/examples/user-menu-dynamic/user-menu-dynamic.tsx",
+      "registry/src/preact/sample/sample-query-users.ts",
+      "registry/src/preact/sample/sample-user-data.ts",
+      "registry/src/preact/ui/user-menu/index.ts",
+      "registry/src/preact/ui/user-menu/user-menu.tsx"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-query-users",
+      "preact-ui-user-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "preact-example-user-menu",
+  "title": "preact-example-user-menu",
+  "type": "registry:block",
+  "description": "Autocomplete menu for @mentions and #hashtag",
+  "registryDependencies": [
+    "https://prosekit.dev/r/preact-sample-sample-tag-data.json",
+    "https://prosekit.dev/r/preact-sample-sample-user-data.json",
+    "https://prosekit.dev/r/preact-ui-tag-menu.json",
+    "https://prosekit.dev/r/preact-ui-user-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/preact/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 { useMemo } from 'preact/hooks'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/preact'\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() {\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({ extension })\n  }, [])\n\n  return (\n    <ProseKit editor={editor}>\n      <div className=\"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 className=\"relative w-full flex-1 box-border overflow-y-auto\">\n          <div ref={editor.mount} className=\"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/preact/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/preact/examples/user-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu/index.ts",
+      "content": "export { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "user-menu",
+    "framework": "preact",
+    "accumulatedFiles": [
+      "registry/src/preact/examples/user-menu/editor.tsx",
+      "registry/src/preact/examples/user-menu/extension.ts",
+      "registry/src/preact/examples/user-menu/index.ts",
+      "registry/src/preact/sample/sample-tag-data.ts",
+      "registry/src/preact/sample/sample-user-data.ts",
+      "registry/src/preact/ui/tag-menu/index.ts",
+      "registry/src/preact/ui/tag-menu/tag-menu.tsx",
+      "registry/src/preact/ui/user-menu/index.ts",
+      "registry/src/preact/ui/user-menu/user-menu.tsx"
+    ],
+    "internalDependencies": [
+      "preact-sample-sample-tag-data",
+      "preact-sample-sample-user-data",
+      "preact-ui-tag-menu",
+      "preact-ui-user-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}