"use client"; import React, { createContext, useContext, useRef, useState } from "react"; import Editor, { EditorProps } from "@monaco-editor/react"; import { Tooltip, TooltipProvider, TooltipContent, TooltipTrigger, } from "@/components/ui/tooltip"; import { cn } from "@/lib/utils"; type CodeEditorContext = { value: string; language: string; theme: string; isLoading: boolean; disabled?: boolean; setValue: (value: string) => void; setLanguage: (language: string) => void; setTheme: (theme: string) => void; // eslint-disable-next-line @typescript-eslint/no-explicit-any editorRef: React.RefObject; onFormat?: () => void; onExecute?: () => void; }; const CodeEditorContext = createContext({ value: "", language: "javascript", theme: "vs-dark", isLoading: false, setValue: () => {}, setLanguage: () => {}, setTheme: () => {}, disabled: false, editorRef: React.createRef(), }); function useCodeEditorContext() { const ctx = useContext(CodeEditorContext); if (!ctx) { throw Error("useCodeEditorContext must be used within a CodeEditor"); } return ctx; } type CodeEditAreaProps = { loader?: React.ReactNode; className?: string; height?: string | number; width?: string | number; } & Omit; export function CodeEditArea({ loader, className, height = "400px", width = "100%", ...props }: CodeEditAreaProps) { const { disabled, value, setValue, language, theme, editorRef } = useCodeEditorContext(); // eslint-disable-next-line @typescript-eslint/no-explicit-any const handleEditorDidMount = (editor: any, monaco: any) => { editorRef.current = editor; props.onMount?.(editor, monaco); }; return (

setValue(value || "")} onMount={handleEditorDidMount} options={{ readOnly: disabled, minimap: { enabled: false }, fontSize: 14, lineNumbers: "on", roundedSelection: false, scrollBeyondLastLine: false, automaticLayout: true, ...props.options, }} {...props} />

); } type CodeEditorActionsProps = React.HTMLAttributes; export function CodeEditorActions({ children, className, ...props }: CodeEditorActionsProps) { return (

{children}

); } type CodeEditorActionProps = { className?: string; tooltip: React.ReactNode; children: React.ReactNode; side?: "top" | "bottom" | "left" | "right"; onClick?: () => void; } & React.ComponentProps; export function CodeEditorAction({ className, tooltip, children, side = "top", onClick, ...props }: CodeEditorActionProps) { const { disabled } = useCodeEditorContext(); return ( { event.stopPropagation(); onClick?.(); }} > {tooltip} ); } type CodeEditorProps = { value?: string; onValueChange?: (value: string) => void; language?: string; onLanguageChange?: (language: string) => void; theme?: string; onThemeChange?: (theme: string) => void; isLoading?: boolean; disabled?: boolean; children: React.ReactNode; className?: string; onFormat?: () => void; onExecute?: () => void; }; export function CodeEditor({ value, onValueChange, language = "javascript", onLanguageChange, theme = "vs-dark", onThemeChange, isLoading = false, disabled = false, children, className, onFormat, onExecute, }: CodeEditorProps) { const [internalValue, setInternalValue] = useState(value || ""); const [internalLanguage, setInternalLanguage] = useState(language); const [internalTheme, setInternalTheme] = useState(theme); // eslint-disable-next-line @typescript-eslint/no-explicit-any const editorRef = useRef(null); function handleValueChange(newValue: string) { setInternalValue(newValue); onValueChange?.(newValue); } function handleLanguageChange(newLanguage: string) { setInternalLanguage(newLanguage); onLanguageChange?.(newLanguage); } function handleThemeChange(newTheme: string) { setInternalTheme(newTheme); onThemeChange?.(newTheme); } function handleFormat() { if (editorRef.current) { editorRef.current.getAction("editor.action.formatDocument").run(); } onFormat?.(); } return (

{children}

); }

Code Editor

Examples

Installation