{
  "name": "lit-ui-tag-menu",
  "title": "lit-ui-tag-menu",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [
    "https://unpkg.com/prosekit-registry/dist/r/lit-ui-editor-context.json"
  ],
  "dependencies": [
    "@lit/context",
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/lit/ui/tag-menu/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/tag-menu/index.ts",
      "content": "export { registerLitEditorTagMenu } from './tag-menu.ts'\n"
    },
    {
      "path": "registry/src/lit/ui/tag-menu/tag-menu.ts",
      "type": "registry:component",
      "target": "components/editor/ui/tag-menu/tag-menu.ts",
      "content": "import { ContextConsumer } from '@lit/context'\nimport { html, LitElement, nothing, type PropertyDeclaration } from 'lit'\nimport { repeat } from 'lit/directives/repeat.js'\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor, Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport {\n  registerAutocompleteEmptyElement,\n  registerAutocompleteItemElement,\n  registerAutocompletePopupElement,\n  registerAutocompletePositionerElement,\n  registerAutocompleteRootElement,\n} from 'prosekit/lit/autocomplete'\n\nimport { editorContext } from '../editor-context.ts'\n\nconst regex = /#[\\da-z]*$/i\n\ninterface Tag {\n  id: number\n  label: string\n}\n\nclass TagMenuElement extends LitElement {\n  static override properties = {\n    tags: { attribute: false } satisfies PropertyDeclaration<Tag[]>,\n  }\n\n  tags: Tag[] = []\n\n  private editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  override createRenderRoot() {\n    return this\n  }\n\n  private handleTagInsert(\n    editor: Editor<Union<[MentionExtension, BasicExtension]>>,\n    id: number,\n    label: string,\n  ) {\n    editor.commands.insertMention({\n      id: id.toString(),\n      value: '#' + label,\n      kind: 'tag',\n    })\n    editor.commands.insertText({ text: ' ' })\n  }\n\n  override render() {\n    const editor = this.editorConsumer.value as\n      | Editor<Union<[MentionExtension, BasicExtension]>>\n      | undefined\n    if (!editor) {\n      return nothing\n    }\n\n    return html`<prosekit-autocomplete-root .editor=${editor} .regex=${regex}>\n      <prosekit-autocomplete-positioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n        <prosekit-autocomplete-popup class=\"box-border origin-(--transform-origin) transition-[opacity,scale] transition-discrete motion-reduce:transition-none data-[state=closed]:duration-150 data-[state=closed]:opacity-0 starting:opacity-0 data-[state=closed]:scale-95 starting:scale-95 duration-40 rounded-xl border border-gray-200 dark:border-gray-800 shadow-lg bg-[canvas] flex flex-col relative max-h-100 min-h-0 min-w-60 select-none overflow-hidden whitespace-nowrap\">\n          <div class=\"flex flex-col flex-1 min-h-0 overflow-y-auto p-1 bg-[canvas] overscroll-contain\">\n            <prosekit-autocomplete-empty class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-md px-3 py-1.5 text-sm box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\">\n              No results\n            </prosekit-autocomplete-empty>\n            ${repeat(\n              this.tags,\n              (tag) => tag.id,\n              (tag) => html`\n                <prosekit-autocomplete-item\n                  class=\"relative flex items-center justify-between min-w-32 scroll-my-1 rounded-md px-3 py-1.5 text-sm box-border cursor-default select-none whitespace-nowrap outline-hidden data-highlighted:bg-gray-100 dark:data-highlighted:bg-gray-800\"\n                  @select=${() => this.handleTagInsert(editor, tag.id, tag.label)}\n                >\n                  ${'#' + tag.label}\n                </prosekit-autocomplete-item>\n              `,\n            )}\n          </div>\n        </prosekit-autocomplete-popup>\n      </prosekit-autocomplete-positioner>\n    </prosekit-autocomplete-root>`\n  }\n}\n\nexport function registerLitEditorTagMenu() {\n  registerAutocompleteEmptyElement()\n  registerAutocompleteItemElement()\n  registerAutocompletePopupElement()\n  registerAutocompletePositionerElement()\n  registerAutocompleteRootElement()\n\n  if (customElements.get('lit-editor-tag-menu')) return\n  customElements.define('lit-editor-tag-menu', TagMenuElement)\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'lit-editor-tag-menu': TagMenuElement\n  }\n}\n"
    }
  ],
  "meta": {
    "hasIcons": false,
    "hidden": false,
    "story": "",
    "framework": "lit",
    "accumulatedFiles": [
      "registry/src/lit/ui/editor-context.ts",
      "registry/src/lit/ui/tag-menu/index.ts",
      "registry/src/lit/ui/tag-menu/tag-menu.ts"
    ],
    "internalDependencies": [
      "lit-ui-editor-context"
    ]
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}