{
  "name": "lit-ui-toolbar",
  "title": "lit-ui-toolbar",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [
    "https://unpkg.com/prosekit-registry/dist/r/lit-ui-button.json",
    "https://unpkg.com/prosekit-registry/dist/r/lit-ui-editor-context.json",
    "https://unpkg.com/prosekit-registry/dist/r/lit-ui-image-upload-popover.json"
  ],
  "dependencies": [
    "@egoist/tailwindcss-icons",
    "@iconify-json/lucide",
    "@lit/context",
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/lit/ui/toolbar/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/toolbar/index.ts",
      "content": "export { registerLitEditorToolbar } from './toolbar.ts'\n"
    },
    {
      "path": "registry/src/lit/ui/toolbar/toolbar.ts",
      "type": "registry:component",
      "target": "components/editor/ui/toolbar/toolbar.ts",
      "content": "import { ContextConsumer } from '@lit/context'\nimport { html, LitElement, nothing, type PropertyDeclaration, type PropertyValues } from 'lit'\nimport type { BasicExtension } from 'prosekit/basic'\nimport { defineUpdateHandler, type Editor } from 'prosekit/core'\nimport type { Uploader } from 'prosekit/extensions/file'\n\nimport { registerLitEditorButton } from '../button/index.ts'\nimport { editorContext } from '../editor-context.ts'\nimport { registerLitEditorImageUploadPopover } 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\nclass LitToolbar extends LitElement {\n  static override properties = {\n    uploader: { attribute: false } satisfies PropertyDeclaration<Uploader<string>>,\n  }\n\n  uploader?: Uploader<string>\n\n  private editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  private removeUpdateExtension?: VoidFunction\n  private attachedEditor?: Editor\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.classList.add('contents')\n    this.attachEditorListener()\n  }\n\n  override disconnectedCallback() {\n    this.detachEditorListener()\n    super.disconnectedCallback()\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties)\n    this.attachEditorListener()\n  }\n\n  private attachEditorListener() {\n    const editor = this.editorConsumer.value\n    if (editor === this.attachedEditor) return\n\n    this.detachEditorListener()\n    this.attachedEditor = editor\n\n    if (!editor) return\n\n    this.removeUpdateExtension = editor.use(defineUpdateHandler(() => this.requestUpdate()))\n  }\n\n  private detachEditorListener() {\n    this.removeUpdateExtension?.()\n    this.removeUpdateExtension = undefined\n    this.attachedEditor = undefined\n  }\n\n  override render() {\n    const editor = this.editorConsumer.value as Editor<BasicExtension> | undefined\n    if (!editor) {\n      return nothing\n    }\n\n    const items = getToolbarItems(editor)\n\n    return html`\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        ${\n          items.undo\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.undo.isActive}\n                  .disabled=${!items.undo.canExec}\n                  tooltip=\"Undo\"\n                  icon=\"i-lucide-undo-2 size-5 block\"\n                  @click=${items.undo.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.redo\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.redo.isActive}\n                  .disabled=${!items.redo.canExec}\n                  tooltip=\"Redo\"\n                  icon=\"i-lucide-redo-2 size-5 block\"\n                  @click=${items.redo.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.bold\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.bold.isActive}\n                  .disabled=${!items.bold.canExec}\n                  tooltip=\"Bold\"\n                  icon=\"i-lucide-bold size-5 block\"\n                  @click=${items.bold.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.italic\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.italic.isActive}\n                  .disabled=${!items.italic.canExec}\n                  tooltip=\"Italic\"\n                  icon=\"i-lucide-italic size-5 block\"\n                  @click=${items.italic.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.underline\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.underline.isActive}\n                  .disabled=${!items.underline.canExec}\n                  tooltip=\"Underline\"\n                  icon=\"i-lucide-underline size-5 block\"\n                  @click=${items.underline.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.strike\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.strike.isActive}\n                  .disabled=${!items.strike.canExec}\n                  tooltip=\"Strike\"\n                  icon=\"i-lucide-strikethrough size-5 block\"\n                  @click=${items.strike.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.code\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.code.isActive}\n                  .disabled=${!items.code.canExec}\n                  tooltip=\"Code\"\n                  icon=\"i-lucide-code size-5 block\"\n                  @click=${items.code.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.codeBlock\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.codeBlock.isActive}\n                  .disabled=${!items.codeBlock.canExec}\n                  tooltip=\"Code Block\"\n                  icon=\"i-lucide-square-code size-5 block\"\n                  @click=${items.codeBlock.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.heading1\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.heading1.isActive}\n                  .disabled=${!items.heading1.canExec}\n                  tooltip=\"Heading 1\"\n                  icon=\"i-lucide-heading-1 size-5 block\"\n                  @click=${items.heading1.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.heading2\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.heading2.isActive}\n                  .disabled=${!items.heading2.canExec}\n                  tooltip=\"Heading 2\"\n                  icon=\"i-lucide-heading-2 size-5 block\"\n                  @click=${items.heading2.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.heading3\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.heading3.isActive}\n                  .disabled=${!items.heading3.canExec}\n                  tooltip=\"Heading 3\"\n                  icon=\"i-lucide-heading-3 size-5 block\"\n                  @click=${items.heading3.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.horizontalRule\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.horizontalRule.isActive}\n                  .disabled=${!items.horizontalRule.canExec}\n                  tooltip=\"Divider\"\n                  icon=\"i-lucide-minus size-5 block\"\n                  @click=${items.horizontalRule.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.blockquote\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.blockquote.isActive}\n                  .disabled=${!items.blockquote.canExec}\n                  tooltip=\"Blockquote\"\n                  icon=\"i-lucide-text-quote size-5 block\"\n                  @click=${items.blockquote.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.bulletList\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.bulletList.isActive}\n                  .disabled=${!items.bulletList.canExec}\n                  tooltip=\"Bullet List\"\n                  icon=\"i-lucide-list size-5 block\"\n                  @click=${items.bulletList.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.orderedList\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.orderedList.isActive}\n                  .disabled=${!items.orderedList.canExec}\n                  tooltip=\"Ordered List\"\n                  icon=\"i-lucide-list-ordered size-5 block\"\n                  @click=${items.orderedList.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.taskList\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.taskList.isActive}\n                  .disabled=${!items.taskList.canExec}\n                  tooltip=\"Task List\"\n                  icon=\"i-lucide-list-checks size-5 block\"\n                  @click=${items.taskList.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.toggleList\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.toggleList.isActive}\n                  .disabled=${!items.toggleList.canExec}\n                  tooltip=\"Toggle List\"\n                  icon=\"i-lucide-list-collapse size-5 block\"\n                  @click=${items.toggleList.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.indentList\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.indentList.isActive}\n                  .disabled=${!items.indentList.canExec}\n                  tooltip=\"Increase indentation\"\n                  icon=\"i-lucide-indent-increase size-5 block\"\n                  @click=${items.indentList.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          items.dedentList\n            ? html`\n                <lit-editor-button\n                  .pressed=${items.dedentList.isActive}\n                  .disabled=${!items.dedentList.canExec}\n                  tooltip=\"Decrease indentation\"\n                  icon=\"i-lucide-indent-decrease size-5 block\"\n                  @click=${items.dedentList.command}\n                ></lit-editor-button>\n              `\n            : nothing\n        }\n        ${\n          this.uploader && items.insertImage\n            ? html`\n                <lit-editor-image-upload-popover\n                  .editor=${editor}\n                  .uploader=${this.uploader}\n                  .disabled=${!items.insertImage.canExec}\n                  tooltip=\"Insert Image\"\n                  icon=\"i-lucide-image size-5 block\"\n                ></lit-editor-image-upload-popover>\n              `\n            : nothing\n        }\n      </div>\n    `\n  }\n}\n\nexport function registerLitEditorToolbar() {\n  registerLitEditorButton()\n  registerLitEditorImageUploadPopover()\n\n  if (customElements.get('lit-editor-toolbar')) return\n  customElements.define('lit-editor-toolbar', LitToolbar)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-toolbar': LitToolbar\n  }\n}\n"
    }
  ],
  "meta": {
    "hasIcons": true,
    "hidden": false,
    "story": "",
    "framework": "lit",
    "accumulatedFiles": [
      "registry/src/lit/ui/button/button.ts",
      "registry/src/lit/ui/button/index.ts",
      "registry/src/lit/ui/editor-context.ts",
      "registry/src/lit/ui/image-upload-popover/image-upload-popover.ts",
      "registry/src/lit/ui/image-upload-popover/index.ts",
      "registry/src/lit/ui/toolbar/index.ts",
      "registry/src/lit/ui/toolbar/toolbar.ts"
    ],
    "internalDependencies": [
      "lit-ui-button",
      "lit-ui-editor-context",
      "lit-ui-image-upload-popover"
    ]
  },
  "css": {
    "@plugin @egoist/tailwindcss-icons": {}
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}