{
  "name": "solid-ui-toolbar",
  "title": "solid-ui-toolbar",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [
    "https://unpkg.com/prosekit-registry/dist/r/solid-ui-button.json",
    "https://unpkg.com/prosekit-registry/dist/r/solid-ui-image-upload-popover.json"
  ],
  "dependencies": [
    "@egoist/tailwindcss-icons",
    "@iconify-json/lucide",
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/solid/ui/toolbar/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/toolbar/index.ts",
      "content": "export { default as Toolbar } from './toolbar.tsx'\n"
    },
    {
      "path": "registry/src/solid/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/solid'\nimport { Show, type JSX } from 'solid-js'\n\nimport { Button } from '../button/index.ts'\nimport { ImageUploadPopover } from '../image-upload-popover/index.ts'\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> }): JSX.Element {\n  const items = useEditorDerivedValue(getToolbarItems)\n\n  return (\n    <div class=\"z-2 box-border border-gray-200 dark:border-gray-800 border-solid border-l-0 border-r-0 border-t-0 border-b flex flex-wrap gap-1 p-2 items-center\">\n      <Show when={items().undo}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Undo\"\n          >\n            <div class=\"i-lucide-undo-2 size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().redo}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Redo\"\n          >\n            <div class=\"i-lucide-redo-2 size-5 block\" />\n          </Button>\n        )}\n      </Show>\n\n      <Show when={items().bold}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Bold\"\n          >\n            <div class=\"i-lucide-bold size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().italic}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Italic\"\n          >\n            <div class=\"i-lucide-italic size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().underline}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Underline\"\n          >\n            <div class=\"i-lucide-underline size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().strike}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Strike\"\n          >\n            <div class=\"i-lucide-strikethrough size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().code}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Code\"\n          >\n            <div class=\"i-lucide-code size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().codeBlock}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Code Block\"\n          >\n            <div class=\"i-lucide-square-code size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().heading1}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Heading 1\"\n          >\n            <div class=\"i-lucide-heading-1 size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().heading2}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Heading 2\"\n          >\n            <div class=\"i-lucide-heading-2 size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().heading3}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Heading 3\"\n          >\n            <div class=\"i-lucide-heading-3 size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().horizontalRule}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Divider\"\n          >\n            <div class=\"i-lucide-minus size-5 block\"></div>\n          </Button>\n        )}\n      </Show>\n      <Show when={items().blockquote}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Blockquote\"\n          >\n            <div class=\"i-lucide-text-quote size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().bulletList}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Bullet List\"\n          >\n            <div class=\"i-lucide-list size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().orderedList}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Ordered List\"\n          >\n            <div class=\"i-lucide-list-ordered size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().taskList}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Task List\"\n          >\n            <div class=\"i-lucide-list-checks size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().toggleList}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Toggle List\"\n          >\n            <div class=\"i-lucide-list-collapse size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().indentList}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Increase indentation\"\n          >\n            <div class=\"i-lucide-indent-increase size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={items().dedentList}>\n        {(item) => (\n          <Button\n            pressed={item().isActive}\n            disabled={!item().canExec}\n            onClick={item().command}\n            tooltip=\"Decrease indentation\"\n          >\n            <div class=\"i-lucide-indent-decrease size-5 block\" />\n          </Button>\n        )}\n      </Show>\n      <Show when={props.uploader && items().insertImage}>\n        {(item) => (\n          <ImageUploadPopover\n            uploader={props.uploader!}\n            disabled={!item().canExec}\n            tooltip=\"Insert Image\"\n          >\n            <div class=\"i-lucide-image size-5 block\" />\n          </ImageUploadPopover>\n        )}\n      </Show>\n    </div>\n  )\n}\n"
    }
  ],
  "meta": {
    "hasIcons": true,
    "hidden": false,
    "story": "",
    "framework": "solid",
    "accumulatedFiles": [
      "registry/src/solid/ui/button/button.tsx",
      "registry/src/solid/ui/button/index.ts",
      "registry/src/solid/ui/image-upload-popover/image-upload-popover.tsx",
      "registry/src/solid/ui/image-upload-popover/index.ts",
      "registry/src/solid/ui/toolbar/index.ts",
      "registry/src/solid/ui/toolbar/toolbar.tsx"
    ],
    "internalDependencies": [
      "solid-ui-button",
      "solid-ui-image-upload-popover"
    ]
  },
  "css": {
    "@plugin @egoist/tailwindcss-icons": {}
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}