prosekit-registry 0.0.1

package/dist/r/react-example-tweet.json

@@ -0,0 +1,63 @@
+{
+  "name": "react-example-tweet",
+  "title": "react-example-tweet",
+  "type": "registry:block",
+  "description": "Embed and display Twitter tweets.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-sample-doc-tweet.json"
+  ],
+  "dependencies": [
+    "prosekit",
+    "react-tweet"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/tweet/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/tweet/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type Extension, type NodeJSON } from 'prosekit/core'\nimport { defineReactNodeView, ProseKit, useExtension } from 'prosekit/react'\nimport { useMemo, useState } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-tweet'\n\nimport { defineExtension } from './extension'\nimport { MethodSelect } from './method-select'\nimport { TweetView } from './tweet-view'\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    return createEditor({ extension: defineExtension(), defaultContent })\n  }, [defaultContent])\n\n  const [method, setMethod] = useState<'basic' | 'advanced'>('basic')\n\n  const reactTweetView: Extension | null = useMemo(() => {\n    if (method === 'basic') {\n      return null\n    }\n    return defineReactNodeView({\n      name: 'tweet',\n      component: TweetView,\n    })\n  }, [method])\n\n  useExtension(reactTweetView, { editor })\n\n  return (\n    <ProseKit editor={editor}>\n      <MethodSelect value={method} onChange={setMethod} />\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/react/examples/tweet/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/tweet/extension.ts",
+      "content": "import { defineBasicExtension } from 'prosekit/basic'\nimport { defineNodeSpec, union } from 'prosekit/core'\n\nfunction defineTweetSpec() {\n  return defineNodeSpec({\n    name: 'tweet',\n    group: 'block',\n    attrs: {\n      tweetId: { default: null },\n    },\n    parseDOM: [{\n      tag: 'iframe[src^=\"https://platform.twitter.com/embed/Tweet.html\"]',\n      getAttrs: (node) => {\n        const src = node.getAttribute('src')\n        const match = src?.match(/id=([^&]+)/)\n        return {\n          tweetId: match?.[1] ?? null,\n        }\n      },\n    }],\n    toDOM: (node) => {\n      return [\n        'iframe',\n        {\n          src: `https://platform.twitter.com/embed/Tweet.html?id=${node.attrs.tweetId}&theme=dark`,\n          style: 'height: 300px',\n        },\n      ]\n    },\n  })\n}\n\nfunction defineTweet() {\n  return union(\n    defineTweetSpec(),\n  )\n}\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    defineTweet(),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/react/examples/tweet/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/tweet/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    },
+    {
+      "path": "registry/src/react/examples/tweet/method-select.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/tweet/method-select.tsx",
+      "content": "import { useId } from 'react'\n\nexport function MethodSelect(props: {\n  value: 'basic' | 'advanced'\n  onChange: (value: 'basic' | 'advanced') => void\n}) {\n  const id = 'id-' + useId()\n  const basicId = `${id}-basic`\n  const advancedId = `${id}-advanced`\n\n  return (\n    <fieldset className=\"not-content\">\n      <legend>Select a render method:</legend>\n\n      <div>\n        <input\n          type=\"radio\"\n          id={basicId}\n          name={id}\n          value=\"basic\"\n          checked={props.value === 'basic'}\n          onChange={() => props.onChange('basic')}\n        />\n        <label htmlFor={basicId}>basic</label>\n      </div>\n\n      <div>\n        <input\n          type=\"radio\"\n          id={advancedId}\n          name={id}\n          value=\"advanced\"\n          checked={props.value === 'advanced'}\n          onChange={() => props.onChange('advanced')}\n        />\n        <label htmlFor={advancedId}>advanced</label>\n      </div>\n    </fieldset>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/react/examples/tweet/tweet-view.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/tweet/tweet-view.tsx",
+      "content": "import type { ReactNodeViewProps } from 'prosekit/react'\nimport { Tweet } from 'react-tweet'\n\nexport function TweetView({ node }: ReactNodeViewProps) {\n  const tweetId = node.attrs.tweetId as string\n  return (\n    <div className=\"[&_img]:m-0!\">\n      <div>\n        <strong>\n          Rendered in React using library{' '}\n          <span>\n            <a href=\"https://github.com/vercel/react-tweet\" target=\"_blank\" rel=\"noopener noreferrer\">react-tweet</a>\n          </span>\n        </strong>\n      </div>\n      <Tweet id={tweetId} />\n    </div>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "tweet",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/tweet/editor.tsx",
+      "registry/src/react/examples/tweet/extension.ts",
+      "registry/src/react/examples/tweet/index.ts",
+      "registry/src/react/examples/tweet/method-select.tsx",
+      "registry/src/react/examples/tweet/tweet-view.tsx",
+      "registry/src/react/sample/sample-doc-tweet.ts"
+    ],
+    "internalDependencies": [
+      "react-sample-sample-doc-tweet"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "react-example-typography",
+  "title": "react-example-typography",
+  "type": "registry:block",
+  "description": "Typography enhancements like smart quotes and dashes.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-katex.json",
+    "https://prosekit.dev/r/react-sample-sample-doc-typography.json",
+    "https://prosekit.dev/r/react-ui-block-handle.json",
+    "https://prosekit.dev/r/react-ui-drop-indicator.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/typography/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/typography/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\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/react/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/react/examples/typography/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/typography/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "typography",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/typography/editor.tsx",
+      "registry/src/react/examples/typography/extension.ts",
+      "registry/src/react/examples/typography/index.ts",
+      "registry/src/react/sample/katex.ts",
+      "registry/src/react/sample/sample-doc-typography.ts",
+      "registry/src/react/ui/block-handle/block-handle.tsx",
+      "registry/src/react/ui/block-handle/index.ts",
+      "registry/src/react/ui/drop-indicator/drop-indicator.tsx",
+      "registry/src/react/ui/drop-indicator/index.ts"
+    ],
+    "internalDependencies": [
+      "react-sample-katex",
+      "react-sample-sample-doc-typography",
+      "react-ui-block-handle",
+      "react-ui-drop-indicator"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,56 @@
+{
+  "name": "react-example-underline",
+  "title": "react-example-underline",
+  "type": "registry:block",
+  "description": "Example for underline mark.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-sample-doc-underline.json",
+    "https://prosekit.dev/r/react-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/underline/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/underline/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\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/react/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/react/examples/underline/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/underline/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "underline",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/underline/editor.tsx",
+      "registry/src/react/examples/underline/extension.ts",
+      "registry/src/react/examples/underline/index.ts",
+      "registry/src/react/sample/sample-doc-underline.ts",
+      "registry/src/react/ui/button/button.tsx",
+      "registry/src/react/ui/button/index.ts",
+      "registry/src/react/ui/image-upload-popover/image-upload-popover.tsx",
+      "registry/src/react/ui/image-upload-popover/index.ts",
+      "registry/src/react/ui/toolbar/index.ts",
+      "registry/src/react/ui/toolbar/toolbar.tsx"
+    ],
+    "internalDependencies": [
+      "react-sample-sample-doc-underline",
+      "react-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,58 @@
+{
+  "name": "react-example-unmount",
+  "title": "react-example-unmount",
+  "type": "registry:block",
+  "description": "Properly unmount and remount editor instances.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-ui-inline-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/unmount/editor-component.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/editor-component.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { defineBasicExtension } from 'prosekit/basic'\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\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/react/examples/unmount/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/editor.tsx",
+      "content": "import { useCallback, useRef, useState } from 'react'\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/react/examples/unmount/extension-component.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/extension-component.tsx",
+      "content": "import { definePlaceholder } from 'prosekit/extensions/placeholder'\nimport { useExtension } from 'prosekit/react'\nimport { useMemo } from 'react'\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/react/examples/unmount/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/unmount/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "unmount",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/unmount/editor-component.tsx",
+      "registry/src/react/examples/unmount/editor.tsx",
+      "registry/src/react/examples/unmount/extension-component.tsx",
+      "registry/src/react/examples/unmount/index.ts",
+      "registry/src/react/ui/button/button.tsx",
+      "registry/src/react/ui/button/index.ts",
+      "registry/src/react/ui/inline-menu/index.ts",
+      "registry/src/react/ui/inline-menu/inline-menu.tsx"
+    ],
+    "internalDependencies": [
+      "react-ui-inline-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,67 @@
+{
+  "name": "react-example-user-menu-dynamic",
+  "title": "react-example-user-menu-dynamic",
+  "type": "registry:block",
+  "description": "Dynamic autocomplete menu with async data loading.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-sample-query-users.json",
+    "https://prosekit.dev/r/react-ui-user-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/user-menu-dynamic/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\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/react/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/react/examples/user-menu-dynamic/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu-dynamic/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    },
+    {
+      "path": "registry/src/react/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 'react'\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/react/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 'react'\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": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/user-menu-dynamic/editor.tsx",
+      "registry/src/react/examples/user-menu-dynamic/extension.ts",
+      "registry/src/react/examples/user-menu-dynamic/index.ts",
+      "registry/src/react/examples/user-menu-dynamic/use-user-query.ts",
+      "registry/src/react/examples/user-menu-dynamic/user-menu-dynamic.tsx",
+      "registry/src/react/sample/sample-query-users.ts",
+      "registry/src/react/sample/sample-user-data.ts",
+      "registry/src/react/ui/user-menu/index.ts",
+      "registry/src/react/ui/user-menu/user-menu.tsx"
+    ],
+    "internalDependencies": [
+      "react-sample-sample-query-users",
+      "react-ui-user-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,59 @@
+{
+  "name": "react-example-user-menu",
+  "title": "react-example-user-menu",
+  "type": "registry:block",
+  "description": "Autocomplete menu for @mentions and #hashtag",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-sample-tag-data.json",
+    "https://prosekit.dev/r/react-sample-sample-user-data.json",
+    "https://prosekit.dev/r/react-ui-tag-menu.json",
+    "https://prosekit.dev/r/react-ui-user-menu.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/user-menu/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\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/react/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/react/examples/user-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/user-menu/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "user-menu",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/user-menu/editor.tsx",
+      "registry/src/react/examples/user-menu/extension.ts",
+      "registry/src/react/examples/user-menu/index.ts",
+      "registry/src/react/sample/sample-tag-data.ts",
+      "registry/src/react/sample/sample-user-data.ts",
+      "registry/src/react/ui/tag-menu/index.ts",
+      "registry/src/react/ui/tag-menu/tag-menu.tsx",
+      "registry/src/react/ui/user-menu/index.ts",
+      "registry/src/react/ui/user-menu/user-menu.tsx"
+    ],
+    "internalDependencies": [
+      "react-sample-sample-tag-data",
+      "react-sample-sample-user-data",
+      "react-ui-tag-menu",
+      "react-ui-user-menu"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,58 @@
+{
+  "name": "react-example-view-adapter",
+  "title": "react-example-view-adapter",
+  "type": "registry:block",
+  "description": "Custom node and mark views using view adapters.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-define-atom-block.json",
+    "https://prosekit.dev/r/react-sample-sample-doc-view-adapter.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/view-adapter/atom-block-view.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/atom-block-view.tsx",
+      "content": "import { useEditorDerivedValue, type ReactNodeViewProps } from 'prosekit/react'\nimport { useCallback } from 'react'\n\nexport function AtomBlockView(props: ReactNodeViewProps) {\n  const docJSON = useEditorDerivedValue(useCallback(editor => {\n    return JSON.stringify(editor.getDocJSON(), null, 2)\n  }, []))\n\n  return (\n    <div data-atom-block=\"true\" data-atom-block-view=\"true\" className=\"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  )\n}\n"
+    },
+    {
+      "path": "registry/src/react/examples/view-adapter/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-view-adapter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    return createEditor({ extension: defineExtension(), 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/react/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 { defineReactNodeView } from 'prosekit/react'\n\nimport { defineAtomBlock } from '../../sample/define-atom-block'\n\nimport { AtomBlockView } from './atom-block-view'\n\nexport function defineExtension() {\n  return union(\n    defineBasicExtension(),\n    defineAtomBlock(),\n    defineReactNodeView({\n      name: 'atomBlock',\n      component: AtomBlockView,\n    }),\n  )\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/react/examples/view-adapter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/view-adapter/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": true,
+    "story": "view-adapter",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/view-adapter/atom-block-view.tsx",
+      "registry/src/react/examples/view-adapter/editor.tsx",
+      "registry/src/react/examples/view-adapter/extension.ts",
+      "registry/src/react/examples/view-adapter/index.ts",
+      "registry/src/react/sample/define-atom-block.ts",
+      "registry/src/react/sample/sample-doc-view-adapter.ts"
+    ],
+    "internalDependencies": [
+      "react-sample-define-atom-block",
+      "react-sample-sample-doc-view-adapter"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,52 @@
+{
+  "name": "react-example-word-counter",
+  "title": "react-example-word-counter",
+  "type": "registry:block",
+  "description": "Display word and character count statistics.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-sample-sample-doc-word-counter.json",
+    "https://prosekit.dev/r/react-ui-word-counter.json"
+  ],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/word-counter/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/word-counter/editor.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\n\nimport { createEditor, type NodeJSON } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\n\nimport { sampleContent } from '../../sample/sample-doc-word-counter'\nimport { WordCounter } from '../../ui/word-counter'\n\nimport { defineExtension } from './extension'\n\ninterface EditorProps {\n  initialContent?: NodeJSON\n}\n\nexport default function Editor(props: EditorProps) {\n  const defaultContent = props.initialContent ?? sampleContent\n  const editor = useMemo(() => {\n    const extension = defineExtension()\n    return createEditor({\n      extension,\n      defaultContent,\n    })\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          <WordCounter />\n        </div>\n      </div>\n    </ProseKit>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/react/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/react/examples/word-counter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/word-counter/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "word-counter",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/word-counter/editor.tsx",
+      "registry/src/react/examples/word-counter/extension.ts",
+      "registry/src/react/examples/word-counter/index.ts",
+      "registry/src/react/sample/sample-doc-word-counter.ts",
+      "registry/src/react/ui/word-counter/index.ts",
+      "registry/src/react/ui/word-counter/word-counter.tsx"
+    ],
+    "internalDependencies": [
+      "react-sample-sample-doc-word-counter",
+      "react-ui-word-counter"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,62 @@
+{
+  "name": "react-example-yjs",
+  "title": "react-example-yjs",
+  "type": "registry:block",
+  "description": "Real-time collaboration using Yjs CRDT library.",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-ui-toolbar.json"
+  ],
+  "dependencies": [
+    "prosekit",
+    "y-websocket",
+    "yjs"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/examples/yjs/editor-component.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/yjs/editor-component.tsx",
+      "content": "import 'prosekit/basic/style.css'\nimport 'prosekit/basic/typography.css'\nimport 'prosekit/extensions/yjs/style.css'\n\nimport { createEditor } from 'prosekit/core'\nimport { ProseKit } from 'prosekit/react'\nimport { useMemo } from 'react'\nimport { WebsocketProvider } from 'y-websocket'\nimport * as Y from 'yjs'\n\nimport { Toolbar } from '../../ui/toolbar'\n\nimport { defineExtension } from './extension'\n\nexport default function EditorComponent(props: { room?: string }) {\n  const editor = useMemo(() => {\n    const doc = new Y.Doc()\n    const provider = new WebsocketProvider(\n      'wss://demos.yjs.dev/ws',\n      `github.com/prosekit/room_${props.room}`,\n      doc,\n    )\n\n    const extension = defineExtension(doc, provider.awareness)\n    return createEditor({ extension })\n  }, [props.room])\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/react/examples/yjs/editor.tsx",
+      "type": "registry:component",
+      "target": "components/editor/examples/yjs/editor.tsx",
+      "content": "import { useState } from 'react'\n\nimport EditorComponent from './editor-component'\n\nexport default function Page() {\n  const [room] = useState(() => {\n    return Math.random().toString(36).substring(2, 15)\n  })\n\n  return (\n    <div className=\"h-full flex flex-col gap-2\">\n      <EditorComponent room={room} />\n      <EditorComponent room={room} />\n    </div>\n  )\n}\n"
+    },
+    {
+      "path": "registry/src/react/examples/yjs/extension.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/yjs/extension.ts",
+      "content": "import { defineBaseCommands, defineBaseKeymap, union } from 'prosekit/core'\nimport { defineBlockquote } from 'prosekit/extensions/blockquote'\nimport { defineBold } from 'prosekit/extensions/bold'\nimport { defineCode } from 'prosekit/extensions/code'\nimport { defineDoc } from 'prosekit/extensions/doc'\nimport { defineDropCursor } from 'prosekit/extensions/drop-cursor'\nimport { defineHeading } from 'prosekit/extensions/heading'\nimport { defineImage } from 'prosekit/extensions/image'\nimport { defineItalic } from 'prosekit/extensions/italic'\nimport { defineLink } from 'prosekit/extensions/link'\nimport { defineList } from 'prosekit/extensions/list'\nimport { defineModClickPrevention } from 'prosekit/extensions/mod-click-prevention'\nimport { defineParagraph } from 'prosekit/extensions/paragraph'\nimport { defineStrike } from 'prosekit/extensions/strike'\nimport { defineTable } from 'prosekit/extensions/table'\nimport { defineText } from 'prosekit/extensions/text'\nimport { defineUnderline } from 'prosekit/extensions/underline'\nimport { defineVirtualSelection } from 'prosekit/extensions/virtual-selection'\nimport { defineYjs } from 'prosekit/extensions/yjs'\nimport type { Awareness } from 'prosekit/extensions/yjs'\nimport type * as Y from 'yjs'\n\nexport function defineExtension(doc: Y.Doc, awareness: Awareness) {\n  return union([\n    defineDoc(),\n    defineText(),\n    defineHeading(),\n    defineList(),\n    defineBlockquote(),\n    defineBaseKeymap(),\n    defineBaseCommands(),\n    defineItalic(),\n    defineBold(),\n    defineUnderline(),\n    defineStrike(),\n    defineCode(),\n    defineLink(),\n    defineImage(),\n    defineParagraph(),\n    defineDropCursor(),\n    defineVirtualSelection(),\n    defineModClickPrevention(),\n    defineTable(),\n    defineYjs({ doc, awareness }),\n  ])\n}\n\nexport type EditorExtension = ReturnType<typeof defineExtension>\n"
+    },
+    {
+      "path": "registry/src/react/examples/yjs/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/examples/yjs/index.ts",
+      "content": "'use client'\n\nexport { default as ExampleEditor } from './editor'\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "yjs",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/examples/yjs/editor-component.tsx",
+      "registry/src/react/examples/yjs/editor.tsx",
+      "registry/src/react/examples/yjs/extension.ts",
+      "registry/src/react/examples/yjs/index.ts",
+      "registry/src/react/ui/button/button.tsx",
+      "registry/src/react/ui/button/index.ts",
+      "registry/src/react/ui/image-upload-popover/image-upload-popover.tsx",
+      "registry/src/react/ui/image-upload-popover/index.ts",
+      "registry/src/react/ui/toolbar/index.ts",
+      "registry/src/react/ui/toolbar/toolbar.tsx"
+    ],
+    "internalDependencies": [
+      "react-ui-toolbar"
+    ]
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

package/dist/r/react-sample-define-atom-block.json

@@ -0,0 +1,29 @@
+{
+  "name": "react-sample-define-atom-block",
+  "title": "react-sample-define-atom-block",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/sample/define-atom-block.ts",
+      "type": "registry:component",
+      "target": "components/editor/sample/define-atom-block.ts",
+      "content": "import { defineNodeSpec } from 'prosekit/core'\n\n/**\n * Defines an atom block node for testing purposes.\n */\nexport function defineAtomBlock() {\n  return defineNodeSpec({\n    name: 'atomBlock',\n    group: 'block',\n    atom: true,\n    parseDOM: [{\n      tag: 'div[data-atom-block]',\n    }],\n    toDOM: () => {\n      return ['div', { 'data-atom-block': 'true' }, 'atom block']\n    },\n  })\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/sample/define-atom-block.ts"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}