prosekit-registry 0.0.1

package/dist/r/react-ui-toolbar.json

@@ -0,0 +1,51 @@
+{
+  "name": "react-ui-toolbar",
+  "title": "react-ui-toolbar",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [
+    "https://prosekit.dev/r/react-ui-button.json",
+    "https://prosekit.dev/r/react-ui-image-upload-popover.json"
+  ],
+  "dependencies": [
+    "@egoist/tailwindcss-icons",
+    "@iconify-json/lucide",
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/ui/toolbar/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/index.ts",
+      "content": "export { default as Toolbar } from './toolbar'\n"
+    },
+    {
+      "path": "registry/src/react/ui/toolbar/toolbar.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/toolbar/toolbar.tsx",
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport type { Uploader } from 'prosekit/extensions/file'\nimport { useEditorDerivedValue } from 'prosekit/react'\n\nimport { Button } from '../button'\nimport { ImageUploadPopover } from '../image-upload-popover'\n\nfunction getToolbarItems(editor: Editor<BasicExtension>) {\n  return {\n    undo: editor.commands.undo\n      ? {\n        isActive: false,\n        canExec: editor.commands.undo.canExec(),\n        command: () => editor.commands.undo(),\n      }\n      : undefined,\n    redo: editor.commands.redo\n      ? {\n        isActive: false,\n        canExec: editor.commands.redo.canExec(),\n        command: () => editor.commands.redo(),\n      }\n      : undefined,\n    bold: editor.commands.toggleBold\n      ? {\n        isActive: editor.marks.bold.isActive(),\n        canExec: editor.commands.toggleBold.canExec(),\n        command: () => editor.commands.toggleBold(),\n      }\n      : undefined,\n    italic: editor.commands.toggleItalic\n      ? {\n        isActive: editor.marks.italic.isActive(),\n        canExec: editor.commands.toggleItalic.canExec(),\n        command: () => editor.commands.toggleItalic(),\n      }\n      : undefined,\n    underline: editor.commands.toggleUnderline\n      ? {\n        isActive: editor.marks.underline.isActive(),\n        canExec: editor.commands.toggleUnderline.canExec(),\n        command: () => editor.commands.toggleUnderline(),\n      }\n      : undefined,\n    strike: editor.commands.toggleStrike\n      ? {\n        isActive: editor.marks.strike.isActive(),\n        canExec: editor.commands.toggleStrike.canExec(),\n        command: () => editor.commands.toggleStrike(),\n      }\n      : undefined,\n    code: editor.commands.toggleCode\n      ? {\n        isActive: editor.marks.code.isActive(),\n        canExec: editor.commands.toggleCode.canExec(),\n        command: () => editor.commands.toggleCode(),\n      }\n      : undefined,\n    codeBlock: editor.commands.insertCodeBlock\n      ? {\n        isActive: editor.nodes.codeBlock.isActive(),\n        canExec: editor.commands.insertCodeBlock.canExec({ language: 'javascript' }),\n        command: () => editor.commands.insertCodeBlock({ language: 'javascript' }),\n      }\n      : undefined,\n    heading1: editor.commands.toggleHeading\n      ? {\n        isActive: editor.nodes.heading.isActive({ level: 1 }),\n        canExec: editor.commands.toggleHeading.canExec({ level: 1 }),\n        command: () => editor.commands.toggleHeading({ level: 1 }),\n      }\n      : undefined,\n    heading2: editor.commands.toggleHeading\n      ? {\n        isActive: editor.nodes.heading.isActive({ level: 2 }),\n        canExec: editor.commands.toggleHeading.canExec({ level: 2 }),\n        command: () => editor.commands.toggleHeading({ level: 2 }),\n      }\n      : undefined,\n    heading3: editor.commands.toggleHeading\n      ? {\n        isActive: editor.nodes.heading.isActive({ level: 3 }),\n        canExec: editor.commands.toggleHeading.canExec({ level: 3 }),\n        command: () => editor.commands.toggleHeading({ level: 3 }),\n      }\n      : undefined,\n    horizontalRule: editor.commands.insertHorizontalRule\n      ? {\n        isActive: editor.nodes.horizontalRule.isActive(),\n        canExec: editor.commands.insertHorizontalRule.canExec(),\n        command: () => editor.commands.insertHorizontalRule(),\n      }\n      : undefined,\n    blockquote: editor.commands.toggleBlockquote\n      ? {\n        isActive: editor.nodes.blockquote.isActive(),\n        canExec: editor.commands.toggleBlockquote.canExec(),\n        command: () => editor.commands.toggleBlockquote(),\n      }\n      : undefined,\n    bulletList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'bullet' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'bullet' }),\n        command: () => editor.commands.toggleList({ kind: 'bullet' }),\n      }\n      : undefined,\n    orderedList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'ordered' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'ordered' }),\n        command: () => editor.commands.toggleList({ kind: 'ordered' }),\n      }\n      : undefined,\n    taskList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'task' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'task' }),\n        command: () => editor.commands.toggleList({ kind: 'task' }),\n      }\n      : undefined,\n    toggleList: editor.commands.toggleList\n      ? {\n        isActive: editor.nodes.list.isActive({ kind: 'toggle' }),\n        canExec: editor.commands.toggleList.canExec({ kind: 'toggle' }),\n        command: () => editor.commands.toggleList({ kind: 'toggle' }),\n      }\n      : undefined,\n    indentList: editor.commands.indentList\n      ? {\n        isActive: false,\n        canExec: editor.commands.indentList.canExec(),\n        command: () => editor.commands.indentList(),\n      }\n      : undefined,\n    dedentList: editor.commands.dedentList\n      ? {\n        isActive: false,\n        canExec: editor.commands.dedentList.canExec(),\n        command: () => editor.commands.dedentList(),\n      }\n      : undefined,\n    insertImage: editor.commands.insertImage\n      ? {\n        isActive: false,\n        canExec: editor.commands.insertImage.canExec(),\n      }\n      : undefined,\n  }\n}\n\nexport default function Toolbar(props: { uploader?: Uploader<string> }) {\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      {items.undo && (\n        <Button\n          pressed={items.undo.isActive}\n          disabled={!items.undo.canExec}\n          onClick={items.undo.command}\n          tooltip=\"Undo\"\n        >\n          <div className=\"i-lucide-undo-2 size-5 block\" />\n        </Button>\n      )}\n      {items.redo && (\n        <Button\n          pressed={items.redo.isActive}\n          disabled={!items.redo.canExec}\n          onClick={items.redo.command}\n          tooltip=\"Redo\"\n        >\n          <div className=\"i-lucide-redo-2 size-5 block\" />\n        </Button>\n      )}\n\n      {items.bold && (\n        <Button\n          pressed={items.bold.isActive}\n          disabled={!items.bold.canExec}\n          onClick={items.bold.command}\n          tooltip=\"Bold\"\n        >\n          <div className=\"i-lucide-bold size-5 block\" />\n        </Button>\n      )}\n      {items.italic && (\n        <Button\n          pressed={items.italic.isActive}\n          disabled={!items.italic.canExec}\n          onClick={items.italic.command}\n          tooltip=\"Italic\"\n        >\n          <div className=\"i-lucide-italic size-5 block\" />\n        </Button>\n      )}\n      {items.underline && (\n        <Button\n          pressed={items.underline.isActive}\n          disabled={!items.underline.canExec}\n          onClick={items.underline.command}\n          tooltip=\"Underline\"\n        >\n          <div className=\"i-lucide-underline size-5 block\" />\n        </Button>\n      )}\n      {items.strike && (\n        <Button\n          pressed={items.strike.isActive}\n          disabled={!items.strike.canExec}\n          onClick={items.strike.command}\n          tooltip=\"Strike\"\n        >\n          <div className=\"i-lucide-strikethrough size-5 block\" />\n        </Button>\n      )}\n      {items.code && (\n        <Button\n          pressed={items.code.isActive}\n          disabled={!items.code.canExec}\n          onClick={items.code.command}\n          tooltip=\"Code\"\n        >\n          <div className=\"i-lucide-code size-5 block\" />\n        </Button>\n      )}\n      {items.codeBlock && (\n        <Button\n          pressed={items.codeBlock.isActive}\n          disabled={!items.codeBlock.canExec}\n          onClick={items.codeBlock.command}\n          tooltip=\"Code Block\"\n        >\n          <div className=\"i-lucide-square-code size-5 block\" />\n        </Button>\n      )}\n      {items.heading1 && (\n        <Button\n          pressed={items.heading1.isActive}\n          disabled={!items.heading1.canExec}\n          onClick={items.heading1.command}\n          tooltip=\"Heading 1\"\n        >\n          <div className=\"i-lucide-heading-1 size-5 block\" />\n        </Button>\n      )}\n      {items.heading2 && (\n        <Button\n          pressed={items.heading2.isActive}\n          disabled={!items.heading2.canExec}\n          onClick={items.heading2.command}\n          tooltip=\"Heading 2\"\n        >\n          <div className=\"i-lucide-heading-2 size-5 block\" />\n        </Button>\n      )}\n      {items.heading3 && (\n        <Button\n          pressed={items.heading3.isActive}\n          disabled={!items.heading3.canExec}\n          onClick={items.heading3.command}\n          tooltip=\"Heading 3\"\n        >\n          <div className=\"i-lucide-heading-3 size-5 block\" />\n        </Button>\n      )}\n      {items.horizontalRule && (\n        <Button\n          pressed={items.horizontalRule.isActive}\n          disabled={!items.horizontalRule.canExec}\n          onClick={items.horizontalRule.command}\n          tooltip=\"Divider\"\n        >\n          <div className=\"i-lucide-minus size-5 block\" />\n        </Button>\n      )}\n      {items.blockquote && (\n        <Button\n          pressed={items.blockquote.isActive}\n          disabled={!items.blockquote.canExec}\n          onClick={items.blockquote.command}\n          tooltip=\"Blockquote\"\n        >\n          <div className=\"i-lucide-text-quote size-5 block\" />\n        </Button>\n      )}\n      {items.bulletList && (\n        <Button\n          pressed={items.bulletList.isActive}\n          disabled={!items.bulletList.canExec}\n          onClick={items.bulletList.command}\n          tooltip=\"Bullet List\"\n        >\n          <div className=\"i-lucide-list size-5 block\" />\n        </Button>\n      )}\n      {items.orderedList && (\n        <Button\n          pressed={items.orderedList.isActive}\n          disabled={!items.orderedList.canExec}\n          onClick={items.orderedList.command}\n          tooltip=\"Ordered List\"\n        >\n          <div className=\"i-lucide-list-ordered size-5 block\" />\n        </Button>\n      )}\n      {items.taskList && (\n        <Button\n          pressed={items.taskList.isActive}\n          disabled={!items.taskList.canExec}\n          onClick={items.taskList.command}\n          tooltip=\"Task List\"\n        >\n          <div className=\"i-lucide-list-checks size-5 block\" />\n        </Button>\n      )}\n      {items.toggleList && (\n        <Button\n          pressed={items.toggleList.isActive}\n          disabled={!items.toggleList.canExec}\n          onClick={items.toggleList.command}\n          tooltip=\"Toggle List\"\n        >\n          <div className=\"i-lucide-list-collapse size-5 block\" />\n        </Button>\n      )}\n      {items.indentList && (\n        <Button\n          pressed={items.indentList.isActive}\n          disabled={!items.indentList.canExec}\n          onClick={items.indentList.command}\n          tooltip=\"Increase indentation\"\n        >\n          <div className=\"i-lucide-indent-increase size-5 block\" />\n        </Button>\n      )}\n      {items.dedentList && (\n        <Button\n          pressed={items.dedentList.isActive}\n          disabled={!items.dedentList.canExec}\n          onClick={items.dedentList.command}\n          tooltip=\"Decrease indentation\"\n        >\n          <div className=\"i-lucide-indent-decrease size-5 block\" />\n        </Button>\n      )}\n      {props.uploader && items.insertImage && (\n        <ImageUploadPopover\n          uploader={props.uploader}\n          disabled={!items.insertImage.canExec}\n          tooltip=\"Insert Image\"\n        >\n          <div className=\"i-lucide-image size-5 block\" />\n        </ImageUploadPopover>\n      )}\n    </div>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": true,
+    "hidden": false,
+    "story": "",
+    "framework": "react",
+    "accumulatedFiles": [
+      "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-button",
+      "react-ui-image-upload-popover"
+    ]
+  },
+  "css": {
+    "@plugin @egoist/tailwindcss-icons": {}
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "react-ui-user-menu",
+  "title": "react-ui-user-menu",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/ui/user-menu/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/user-menu/index.ts",
+      "content": "export { default as UserMenu } from './user-menu'\n"
+    },
+    {
+      "path": "registry/src/react/ui/user-menu/user-menu.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/user-menu/user-menu.tsx",
+      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind, type Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/react'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/react/autocomplete'\n\n// Match inputs like \"@\", \"@foo\", \"@foo bar\" etc. Do not match \"@ foo\".\nconst regex = canUseRegexLookbehind() ? /(?<!\\S)@(\\S.*)?$/u : /@(\\S.*)?$/u\n\nexport default function UserMenu(props: {\n  users: { id: number; name: string }[]\n  loading?: boolean\n  onQueryChange?: (query: string) => void\n  onOpenChange?: (open: boolean) => void\n}) {\n  const editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\n  const handleUserInsert = (id: number, username: string) => {\n    editor.commands.insertMention({\n      id: id.toString(),\n      value: '@' + username,\n      kind: 'user',\n    })\n    editor.commands.insertText({ text: ' ' })\n  }\n\n  return (\n    <AutocompleteRoot\n      regex={regex}\n      onQueryChange={(event) => props.onQueryChange?.(event.detail)}\n      onOpenChange={(event) => props.onOpenChange?.(event.detail)}\n    >\n      <AutocompletePositioner 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        <AutocompletePopup 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 rounded-lg border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-950 shadow-lg flex flex-col relative max-h-100 min-w-60 select-none overflow-auto whitespace-nowrap p-1\">\n          <AutocompleteEmpty className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n            {props.loading ? 'Loading...' : 'No results'}\n          </AutocompleteEmpty>\n\n          {props.users.map((user) => (\n            <AutocompleteItem\n              key={user.id}\n              className=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-sm px-3 py-1.5 box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n              onSelect={() => handleUserInsert(user.id, user.name)}\n            >\n              <span className={props.loading ? 'opacity-50' : undefined}>\n                {user.name}\n              </span>\n            </AutocompleteItem>\n          ))}\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/ui/user-menu/index.ts",
+      "registry/src/react/ui/user-menu/user-menu.tsx"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}

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

@@ -0,0 +1,36 @@
+{
+  "name": "react-ui-word-counter",
+  "title": "react-ui-word-counter",
+  "type": "registry:component",
+  "description": "",
+  "registryDependencies": [],
+  "dependencies": [
+    "prosekit"
+  ],
+  "files": [
+    {
+      "path": "registry/src/react/ui/word-counter/index.ts",
+      "type": "registry:component",
+      "target": "components/editor/ui/word-counter/index.ts",
+      "content": "export { default as WordCounter } from './word-counter'\n"
+    },
+    {
+      "path": "registry/src/react/ui/word-counter/word-counter.tsx",
+      "type": "registry:component",
+      "target": "components/editor/ui/word-counter/word-counter.tsx",
+      "content": "import type { Editor } from 'prosekit/core'\nimport { useEditorDerivedValue } from 'prosekit/react'\n\nfunction getWordCount(editor: Editor) {\n  const doc = editor.state.doc\n  const words = doc ? doc.textBetween(0, doc.content.size, ' ') : ''\n  const wordCount = words.split(/\\s+/).filter((s) => s).length\n  const characterCount = doc ? doc.textContent.length : 0\n  return { wordCount, characterCount }\n}\n\nexport default function WordCounter() {\n  const { wordCount, characterCount } = useEditorDerivedValue(getWordCount)\n\n  return (\n    <div className=\"p-4 text-center italic tabular-nums\">\n      Word Count: {wordCount}\n      <br />\n      Character Count: {characterCount}\n    </div>\n  )\n}\n"
+    }
+  ],
+  "meta": {
+    "hasIcons": false,
+    "hidden": false,
+    "story": "",
+    "framework": "react",
+    "accumulatedFiles": [
+      "registry/src/react/ui/word-counter/index.ts",
+      "registry/src/react/ui/word-counter/word-counter.tsx"
+    ],
+    "internalDependencies": []
+  },
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
+}