{
  "name": "svelte-ui-tag-menu",
  "title": "svelte-ui-tag-menu",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [],
  "dependencies": [
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/svelte/ui/tag-menu/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/tag-menu/index.ts",
      "content": "export { default as TagMenu } from './tag-menu.svelte'\n"
    },
    {
      "path": "registry/src/svelte/ui/tag-menu/tag-menu.svelte",
      "type": "registry:component",
      "target": "components/editor/ui/tag-menu/tag-menu.svelte",
      "content": "<script lang=\"ts\">\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Union } from 'prosekit/core'\nimport type { MentionExtension } from 'prosekit/extensions/mention'\nimport { useEditor } from 'prosekit/svelte'\nimport {\n  AutocompleteEmpty,\n  AutocompleteItem,\n  AutocompletePopup,\n  AutocompletePositioner,\n  AutocompleteRoot,\n} from 'prosekit/svelte/autocomplete'\n\ninterface Props {\n  tags: { id: number; label: string }[]\n}\n\nconst props: Props = $props()\n\nconst editor = useEditor<Union<[MentionExtension, BasicExtension]>>()\n\nfunction handleTagInsert(id: number, label: string) {\n  $editor.commands.insertMention({\n    id: id.toString(),\n    value: '#' + label,\n    kind: 'tag',\n  })\n  $editor.commands.insertText({ text: ' ' })\n}\n\nconst regex = /#[\\da-z]*$/i\n</script>\n\n<AutocompleteRoot {regex}>\n  <AutocompletePositioner class=\"block overflow-visible w-min h-min z-50 ease-out transition-transform duration-100 motion-reduce:transition-none\">\n    <AutocompletePopup 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        <AutocompleteEmpty 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        </AutocompleteEmpty>\n\n        {#each props.tags as tag (tag.id)}\n          <AutocompleteItem\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            onSelect={() => handleTagInsert(tag.id, tag.label)}\n          >\n            #{tag.label}\n          </AutocompleteItem>\n        {/each}\n      </div>\n    </AutocompletePopup>\n  </AutocompletePositioner>\n</AutocompleteRoot>\n"
    }
  ],
  "meta": {
    "hasIcons": false,
    "hidden": false,
    "story": "",
    "framework": "svelte",
    "accumulatedFiles": [
      "registry/src/svelte/ui/tag-menu/index.ts",
      "registry/src/svelte/ui/tag-menu/tag-menu.svelte"
    ],
    "internalDependencies": []
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}