{
  "name": "markdown-editor-toolbar",
  "type": "registry:component",
  "dependencies": [
    "@unsanity/markdown-editor",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "separator"
  ],
  "files": [
    {
      "path": "components/markdown-editor/markdown-editor-toolbar.tsx",
      "content": "\"use client\";\n\nimport { redo, undo } from \"@codemirror/commands\";\nimport {\n  Bold,\n  Code2,\n  Heading1,\n  Heading2,\n  Heading3,\n  Heading4,\n  Italic,\n  Link2,\n  List,\n  ListOrdered,\n  Quote,\n  Redo2,\n  Strikethrough,\n  Undo2,\n} from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n  detectLineKind,\n  insertLink,\n  normalizeLineToParagraph,\n  setCurrentLineHeading,\n  toggleLineBlockquote,\n  toggleLineBullet,\n  toggleLineOrdered,\n  useMarkdownEditorChrome,\n  wrapSelection,\n} from \"@unsanity/markdown-editor\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\n\nexport function MarkdownEditorToolbar({ className }: { className?: string }) {\n  const { editorView, cmVersion } = useMarkdownEditorChrome();\n\n  const block = useMemo(() => {\n    if (!editorView) return \"paragraph\" as const;\n    const pos = editorView.state.selection.main.head;\n    return detectLineKind(editorView.state, pos);\n  }, [editorView, cmVersion]);\n\n  const run = (fn: () => void) => {\n    if (!editorView) return;\n    fn();\n    editorView.focus();\n  };\n\n  return (\n    <div\n      className={cn(\n        \"bg-background flex shrink-0 flex-wrap items-center gap-0.5 border-b px-3 py-2 md:px-4\",\n        className,\n      )}\n    >\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"실행 취소\"\n        onClick={() => editorView && undo(editorView)}\n      >\n        <Undo2 className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"다시 실행\"\n        onClick={() => editorView && redo(editorView)}\n      >\n        <Redo2 className=\"size-4\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"h1\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"제목 1\"\n        onClick={() => run(() => editorView && setCurrentLineHeading(editorView, 1))}\n      >\n        <Heading1 className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"h2\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"제목 2\"\n        onClick={() => run(() => editorView && setCurrentLineHeading(editorView, 2))}\n      >\n        <Heading2 className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"h3\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"제목 3\"\n        onClick={() => run(() => editorView && setCurrentLineHeading(editorView, 3))}\n      >\n        <Heading3 className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"paragraph\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"본문\"\n        onClick={() =>\n          run(() => editorView && normalizeLineToParagraph(editorView))\n        }\n      >\n        <Heading4 className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"quote\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"인용\"\n        onClick={() => run(() => editorView && toggleLineBlockquote(editorView))}\n      >\n        <Quote className=\"size-4\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"bullet\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"글머리 기호 목록\"\n        onClick={() => run(() => editorView && toggleLineBullet(editorView))}\n      >\n        <List className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className={cn(\"size-8 p-0\", block === \"number\" && \"bg-accent\")}\n        disabled={!editorView}\n        aria-label=\"번호 목록\"\n        onClick={() => run(() => editorView && toggleLineOrdered(editorView))}\n      >\n        <ListOrdered className=\"size-4\" />\n      </Button>\n\n      <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"굵게\"\n        onClick={() => run(() => editorView && wrapSelection(editorView, \"**\", \"**\"))}\n      >\n        <Bold className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"기울임\"\n        onClick={() => run(() => editorView && wrapSelection(editorView, \"*\", \"*\"))}\n      >\n        <Italic className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"취소선\"\n        onClick={() => run(() => editorView && wrapSelection(editorView, \"~~\", \"~~\"))}\n      >\n        <Strikethrough className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"인라인 코드\"\n        onClick={() => run(() => editorView && wrapSelection(editorView, \"`\", \"`\"))}\n      >\n        <Code2 className=\"size-4\" />\n      </Button>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"size-8 p-0\"\n        disabled={!editorView}\n        aria-label=\"링크\"\n        onClick={() => run(() => editorView && insertLink(editorView))}\n      >\n        <Link2 className=\"size-4\" />\n      </Button>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}