shadcn/app/public/registry/styles/default/code-editor.json

{
  "name": "code-editor",
  "description": "Full-featured code editor with syntax highlighting",
  "dependencies": [
    "@monaco-editor/react"
  ],
  "files": [
    {
      "name": "code-editor.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Editor, { OnChange, OnMount } from \"@monaco-editor/react\"\nimport { Check, ChevronDown, Copy } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\nimport { toast } from \"sonner\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport interface CodeEditorProps {\n  value?: string\n  defaultValue?: string\n  language?: string\n  height?: string | number\n  theme?: \"light\" | \"dark\" | \"auto\"\n  onChange?: OnChange\n  onMount?: OnMount\n  readOnly?: boolean\n  lineNumbers?: boolean\n  minimap?: boolean\n  wordWrap?: \"on\" | \"off\" | \"wordWrapColumn\" | \"bounded\"\n  fontSize?: number\n  className?: string\n  showCopyButton?: boolean\n  showLanguageSelector?: boolean\n  availableLanguages?: string[]\n}\n\nconst defaultLanguages = [\n  \"javascript\",\n  \"typescript\",\n  \"python\",\n  \"java\",\n  \"csharp\",\n  \"cpp\",\n  \"c\",\n  \"go\",\n  \"rust\",\n  \"ruby\",\n  \"php\",\n  \"swift\",\n  \"kotlin\",\n  \"dart\",\n  \"html\",\n  \"css\",\n  \"scss\",\n  \"json\",\n  \"xml\",\n  \"yaml\",\n  \"sql\",\n  \"markdown\",\n  \"shell\",\n  \"plaintext\",\n]\n\nconst languageDisplayNames: Record<string, string> = {\n  javascript: \"JavaScript\",\n  typescript: \"TypeScript\",\n  python: \"Python\",\n  java: \"Java\",\n  csharp: \"C#\",\n  cpp: \"C++\",\n  c: \"C\",\n  go: \"Go\",\n  rust: \"Rust\",\n  ruby: \"Ruby\",\n  php: \"PHP\",\n  swift: \"Swift\",\n  kotlin: \"Kotlin\",\n  dart: \"Dart\",\n  html: \"HTML\",\n  css: \"CSS\",\n  scss: \"SCSS\",\n  json: \"JSON\",\n  xml: \"XML\",\n  yaml: \"YAML\",\n  sql: \"SQL\",\n  markdown: \"Markdown\",\n  shell: \"Shell\",\n  plaintext: \"Plain Text\",\n}\n\nconst CodeEditor = React.forwardRef<HTMLDivElement, CodeEditorProps>(\n  (\n    {\n      value,\n      defaultValue = \"\",\n      language = \"javascript\",\n      height = \"400px\",\n      theme: themeProp = \"auto\",\n      onChange,\n      onMount,\n      readOnly = false,\n      lineNumbers = true,\n      minimap = false,\n      wordWrap = \"on\",\n      fontSize = 14,\n      className,\n      showCopyButton = true,\n      showLanguageSelector = true,\n      availableLanguages = defaultLanguages,\n    },\n    ref\n  ) => {\n    const { theme: systemTheme } = useTheme()\n    const [selectedLanguage, setSelectedLanguage] = React.useState(language)\n    const [copied, setCopied] = React.useState(false)\n    const [editorValue, setEditorValue] = React.useState(value || defaultValue)\n\n    React.useEffect(() => {\n      if (value !== undefined) {\n        setEditorValue(value)\n      }\n    }, [value])\n\n    const handleCopy = React.useCallback(async () => {\n      try {\n        await navigator.clipboard.writeText(editorValue)\n        setCopied(true)\n        setTimeout(() => setCopied(false), 2000)\n        toast.success(\"Code copied to clipboard\")\n      } catch (err) {\n        console.error(\"Failed to copy:\", err)\n        toast.error(\"Failed to copy code\")\n      }\n    }, [editorValue])\n\n    const handleChange: OnChange = React.useCallback(\n      (newValue, ev) => {\n        setEditorValue(newValue || \"\")\n        if (onChange) {\n          onChange(newValue, ev)\n        }\n      },\n      [onChange]\n    )\n\n    const resolveTheme = React.useMemo(() => {\n      if (themeProp === \"auto\") {\n        return systemTheme === \"dark\" ? \"vs-dark\" : \"light\"\n      }\n      return themeProp === \"dark\" ? \"vs-dark\" : \"light\"\n    }, [themeProp, systemTheme])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative overflow-hidden rounded-md border bg-background\",\n          className\n        )}\n      >\n        {(showLanguageSelector || showCopyButton) && (\n          <div className=\"flex items-center justify-between border-b bg-muted/50 px-3 py-2\">\n            {showLanguageSelector && (\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    className=\"h-8 gap-1 px-2 text-xs font-mono\"\n                  >\n                    {languageDisplayNames[selectedLanguage] || selectedLanguage}\n                    <ChevronDown className=\"h-3 w-3\" />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"max-h-80 overflow-auto\"\n                >\n                  {availableLanguages.map((lang) => (\n                    <DropdownMenuItem\n                      key={lang}\n                      onClick={() => setSelectedLanguage(lang)}\n                      className=\"font-mono text-xs\"\n                    >\n                      {languageDisplayNames[lang] || lang}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n            {showCopyButton && (\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"h-8 gap-1.5 px-2 text-xs\"\n                onClick={handleCopy}\n                disabled={!editorValue}\n              >\n                {copied ? (\n                  <>\n                    <Check className=\"h-3 w-3\" />\n                    Copied!\n                  </>\n                ) : (\n                  <>\n                    <Copy className=\"h-3 w-3\" />\n                    Copy\n                  </>\n                )}\n              </Button>\n            )}\n          </div>\n        )}\n        <Editor\n          height={height}\n          defaultLanguage={language}\n          language={selectedLanguage}\n          value={editorValue}\n          defaultValue={defaultValue}\n          theme={resolveTheme}\n          onChange={handleChange}\n          onMount={onMount}\n          options={{\n            readOnly,\n            lineNumbers: lineNumbers ? \"on\" : \"off\",\n            minimap: {\n              enabled: minimap,\n            },\n            wordWrap,\n            fontSize,\n            scrollBeyondLastLine: false,\n            automaticLayout: true,\n            tabSize: 2,\n            insertSpaces: true,\n            formatOnPaste: true,\n            formatOnType: true,\n            scrollbar: {\n              vertical: \"auto\",\n              horizontal: \"auto\",\n              verticalScrollbarSize: 10,\n              horizontalScrollbarSize: 10,\n            },\n            padding: {\n              top: 16,\n              bottom: 16,\n            },\n          }}\n        />\n      </div>\n    )\n  }\n)\n\nCodeEditor.displayName = \"CodeEditor\"\n\nexport { CodeEditor }\n"
    }
  ],
  "type": "components:code"
}