{
  "name": "lit-ui-slash-menu",
  "title": "lit-ui-slash-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/slash-menu/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/index.ts",
      "content": "export { registerLitEditorSlashMenu } from './slash-menu.ts'\n"
    },
    {
      "path": "registry/src/lit/ui/slash-menu/slash-menu-empty.ts",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/slash-menu-empty.ts",
      "content": "import { html, LitElement } from 'lit'\n\nexport class SlashMenuEmptyElement extends LitElement {\n  override createRenderRoot() {\n    return this\n  }\n\n  override render() {\n    return html`\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        <span>No results</span>\n      </prosekit-autocomplete-empty>\n    `\n  }\n}\n"
    },
    {
      "path": "registry/src/lit/ui/slash-menu/slash-menu-item.ts",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/slash-menu-item.ts",
      "content": "import { html, LitElement } from 'lit'\nimport type { SelectEvent } from 'prosekit/lit/autocomplete'\n\nexport class SlashMenuItemElement extends LitElement {\n  static override properties = {\n    label: { type: String },\n    kbd: { type: String },\n  }\n\n  label: string\n  kbd: string\n\n  constructor() {\n    super()\n    this.label = ''\n    this.kbd = ''\n  }\n\n  override createRenderRoot() {\n    return this\n  }\n\n  // Relay the inner item's non-bubbling `select` event on this element, so\n  // consumers can listen for it without reaching into the light DOM.\n  handleSelect = (event: SelectEvent) => {\n    this.dispatchEvent(new CustomEvent('select', { detail: event.detail }))\n  }\n\n  override render() {\n    return html`<prosekit-autocomplete-item\n      @select=${this.handleSelect}\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    >\n      <span>${this.label}</span>${\n        this.kbd ? html`<kbd class=\"text-xs font-mono text-gray-400 dark:text-gray-500\">${this.kbd}</kbd>` : ''\n      }\n    </prosekit-autocomplete-item>`\n  }\n}\n"
    },
    {
      "path": "registry/src/lit/ui/slash-menu/slash-menu.ts",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/slash-menu.ts",
      "content": "import { ContextConsumer } from '@lit/context'\nimport { html, LitElement } from 'lit'\nimport type { BasicExtension } from 'prosekit/basic'\nimport type { Editor } from 'prosekit/core'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport {\n  registerAutocompleteEmptyElement,\n  registerAutocompleteItemElement,\n  registerAutocompletePopupElement,\n  registerAutocompletePositionerElement,\n  registerAutocompleteRootElement,\n} from 'prosekit/lit/autocomplete'\n\nimport { editorContext } from '../editor-context.ts'\n\nimport { SlashMenuEmptyElement } from './slash-menu-empty.ts'\nimport { SlashMenuItemElement } from './slash-menu-item.ts'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = new RegExp(\n  (canUseRegexLookbehind() ? String.raw`(?<!\\S)` : '') + String.raw`\\/(\\S.*)?$`,\n  'u',\n)\n\nclass SlashMenuElement extends LitElement {\n  private editorConsumer = new ContextConsumer(this, {\n    context: editorContext,\n    subscribe: true,\n  })\n\n  override createRenderRoot() {\n    return this\n  }\n\n  override render() {\n    const editor = this.editorConsumer.value as Editor<BasicExtension> | undefined\n    if (!editor) {\n      return html``\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            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Text\"\n              @select=${() => editor.commands.setParagraph()}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Heading 1\"\n              kbd=\"#\"\n              @select=${() => editor.commands.setHeading({ level: 1 })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Heading 2\"\n              kbd=\"##\"\n              @select=${() => editor.commands.setHeading({ level: 2 })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Heading 3\"\n              kbd=\"###\"\n              @select=${() => editor.commands.setHeading({ level: 3 })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Bullet list\"\n              kbd=\"-\"\n              @select=${() => editor.commands.wrapInList({ kind: 'bullet' })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Ordered list\"\n              kbd=\"1.\"\n              @select=${() => editor.commands.wrapInList({ kind: 'ordered' })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Task list\"\n              kbd=\"[]\"\n              @select=${() => editor.commands.wrapInList({ kind: 'task' })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Toggle list\"\n              kbd=\">>\"\n              @select=${() => editor.commands.wrapInList({ kind: 'toggle' })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Quote\"\n              kbd=\">\"\n              @select=${() => editor.commands.setBlockquote()}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Table\"\n              @select=${() => editor.commands.insertTable({ row: 3, col: 3 })}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Divider\"\n              kbd=\"---\"\n              @select=${() => editor.commands.insertHorizontalRule()}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-item\n              class=\"contents\"\n              label=\"Code\"\n              kbd=\"\\`\\`\\`\"\n              @select=${() => editor.commands.setCodeBlock()}\n            ></lit-editor-slash-menu-item>\n            <lit-editor-slash-menu-empty class=\"contents\"></lit-editor-slash-menu-empty>\n          </div>\n        </prosekit-autocomplete-popup>\n      </prosekit-autocomplete-positioner>\n    </prosekit-autocomplete-root>`\n  }\n}\n\nexport function registerLitEditorSlashMenu() {\n  registerAutocompleteEmptyElement()\n  registerAutocompleteItemElement()\n  registerAutocompletePopupElement()\n  registerAutocompletePositionerElement()\n  registerAutocompleteRootElement()\n\n  if (!customElements.get('lit-editor-slash-menu-item')) {\n    customElements.define('lit-editor-slash-menu-item', SlashMenuItemElement)\n  }\n  if (!customElements.get('lit-editor-slash-menu-empty')) {\n    customElements.define('lit-editor-slash-menu-empty', SlashMenuEmptyElement)\n  }\n  if (customElements.get('lit-editor-slash-menu')) return\n  customElements.define('lit-editor-slash-menu', SlashMenuElement)\n}\n"
    }
  ],
  "meta": {
    "hasIcons": false,
    "hidden": false,
    "story": "",
    "framework": "lit",
    "accumulatedFiles": [
      "registry/src/lit/ui/editor-context.ts",
      "registry/src/lit/ui/slash-menu/index.ts",
      "registry/src/lit/ui/slash-menu/slash-menu-empty.ts",
      "registry/src/lit/ui/slash-menu/slash-menu-item.ts",
      "registry/src/lit/ui/slash-menu/slash-menu.ts"
    ],
    "internalDependencies": [
      "lit-ui-editor-context"
    ]
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}