{
  "name": "solid-ui-slash-menu",
  "title": "solid-ui-slash-menu",
  "type": "registry:component",
  "description": "",
  "registryDependencies": [],
  "dependencies": [
    "prosekit@^0.22.0"
  ],
  "files": [
    {
      "path": "registry/src/solid/ui/slash-menu/index.ts",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/index.ts",
      "content": "export { default as SlashMenu } from './slash-menu.tsx'\n"
    },
    {
      "path": "registry/src/solid/ui/slash-menu/slash-menu-empty.tsx",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/slash-menu-empty.tsx",
      "content": "import { AutocompleteEmpty } from 'prosekit/solid/autocomplete'\nimport type { JSX } from 'solid-js'\n\nexport default function SlashMenuEmpty(): JSX.Element {\n  return (\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      <span>No results</span>\n    </AutocompleteEmpty>\n  )\n}\n"
    },
    {
      "path": "registry/src/solid/ui/slash-menu/slash-menu-item.tsx",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/slash-menu-item.tsx",
      "content": "import { AutocompleteItem } from 'prosekit/solid/autocomplete'\nimport { Show, type JSX } from 'solid-js'\n\nexport default function SlashMenuItem(props: {\n  label: string\n  kbd?: string\n  onSelect: () => void\n}): JSX.Element {\n  return (\n    <AutocompleteItem onSelect={props.onSelect} 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>{props.label}</span>\n      <Show when={props.kbd}>\n        <kbd class=\"text-xs font-mono text-gray-400 dark:text-gray-500\">{props.kbd}</kbd>\n      </Show>\n    </AutocompleteItem>\n  )\n}\n"
    },
    {
      "path": "registry/src/solid/ui/slash-menu/slash-menu.tsx",
      "type": "registry:component",
      "target": "components/editor/ui/slash-menu/slash-menu.tsx",
      "content": "import type { BasicExtension } from 'prosekit/basic'\nimport { canUseRegexLookbehind } from 'prosekit/core'\nimport { useEditor } from 'prosekit/solid'\nimport { AutocompletePopup, AutocompletePositioner, AutocompleteRoot } from 'prosekit/solid/autocomplete'\nimport type { JSX } from 'solid-js'\n\nimport SlashMenuEmpty from './slash-menu-empty.tsx'\nimport SlashMenuItem from './slash-menu-item.tsx'\n\n// Match inputs like \"/\", \"/table\", \"/heading 1\" etc. Do not match \"/ heading\".\nconst regex = new RegExp(\n  (canUseRegexLookbehind() ? String.raw`(?<!\\S)` : '')\n    + String.raw`\\/(\\S.*)?$`,\n  'u',\n)\n\nexport default function SlashMenu(): JSX.Element {\n  const editor = useEditor<BasicExtension>()\n\n  return (\n    <AutocompleteRoot regex={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            <SlashMenuItem\n              label=\"Text\"\n              onSelect={() => editor().commands.setParagraph()}\n            />\n\n            <SlashMenuItem\n              label=\"Heading 1\"\n              kbd=\"#\"\n              onSelect={() => editor().commands.setHeading({ level: 1 })}\n            />\n\n            <SlashMenuItem\n              label=\"Heading 2\"\n              kbd=\"##\"\n              onSelect={() => editor().commands.setHeading({ level: 2 })}\n            />\n\n            <SlashMenuItem\n              label=\"Heading 3\"\n              kbd=\"###\"\n              onSelect={() => editor().commands.setHeading({ level: 3 })}\n            />\n\n            <SlashMenuItem\n              label=\"Bullet list\"\n              kbd=\"-\"\n              onSelect={() => editor().commands.wrapInList({ kind: 'bullet' })}\n            />\n\n            <SlashMenuItem\n              label=\"Ordered list\"\n              kbd=\"1.\"\n              onSelect={() => editor().commands.wrapInList({ kind: 'ordered' })}\n            />\n\n            <SlashMenuItem\n              label=\"Task list\"\n              kbd=\"[]\"\n              onSelect={() => editor().commands.wrapInList({ kind: 'task' })}\n            />\n\n            <SlashMenuItem\n              label=\"Toggle list\"\n              kbd=\">>\"\n              onSelect={() => editor().commands.wrapInList({ kind: 'toggle' })}\n            />\n\n            <SlashMenuItem\n              label=\"Quote\"\n              kbd=\">\"\n              onSelect={() => editor().commands.setBlockquote()}\n            />\n\n            <SlashMenuItem\n              label=\"Table\"\n              onSelect={() => editor().commands.insertTable({ row: 3, col: 3 })}\n            />\n\n            <SlashMenuItem\n              label=\"Divider\"\n              kbd=\"---\"\n              onSelect={() => editor().commands.insertHorizontalRule()}\n            />\n\n            <SlashMenuItem\n              label=\"Code\"\n              kbd=\"```\"\n              onSelect={() => editor().commands.setCodeBlock()}\n            />\n\n            <SlashMenuEmpty />\n          </div>\n        </AutocompletePopup>\n      </AutocompletePositioner>\n    </AutocompleteRoot>\n  )\n}\n"
    }
  ],
  "meta": {
    "hasIcons": false,
    "hidden": false,
    "story": "",
    "framework": "solid",
    "accumulatedFiles": [
      "registry/src/solid/ui/slash-menu/index.ts",
      "registry/src/solid/ui/slash-menu/slash-menu-empty.tsx",
      "registry/src/solid/ui/slash-menu/slash-menu-item.tsx",
      "registry/src/solid/ui/slash-menu/slash-menu.tsx"
    ],
    "internalDependencies": []
  },
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}