Code Editor

1"use client";
2import React, { createContext, useContext, useRef, useState } from "react";
3import Editor, { EditorProps, Monaco } from "@monaco-editor/react";
4import type { editor } from "monaco-editor";
5import { cn } from "@/lib/utils";
6import { motion } from "framer-motion";
7import {
8  Select,
9  SelectContent,
10  SelectItem,
11  SelectTrigger,
12} from "@/components/ui/select";
13import {
14  Tooltip,
15  TooltipContent,
16  TooltipProvider,
17  TooltipTrigger,
18} from "@/components/ui/tooltip";
19 
20export const ACTION_ANIMATION = {
21  whileHover: { backgroundColor: "rgba(255, 255, 255, 0.1)" },
22  whileTap: { backgroundColor: "rgba(255, 255, 255, 0.15)" },
23  transition: { duration: 0.15 },
24};
25 
26export const SPINNER_ANIMATION = {
27  animate: { rotate: 360 },
28  transition: { duration: 1.5, repeat: Infinity, ease: "linear" as const },
29};
30 
31export const PULSE_ANIMATION = {
32  animate: { opacity: [1, 0.5, 1] },
33  transition: { duration: 2, repeat: Infinity },
34};
35 
36export type Language = { value: string; label: string; icon?: string };
37 
38const DEVICON = "https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons";
39export const DEFAULT_LANGUAGES: Language[] = [
40  {
41    value: "python",
42    label: "Python",
43    icon: `${DEVICON}/python/python-original.svg`,
44  },
45  {
46    value: "javascript",
47    label: "JavaScript",
48    icon: `${DEVICON}/javascript/javascript-original.svg`,
49  },
50  {
51    value: "typescript",
52    label: "TypeScript",
53    icon: `${DEVICON}/typescript/typescript-original.svg`,
54  },
55  { value: "java", label: "Java", icon: `${DEVICON}/java/java-original.svg` },
56  {
57    value: "cpp",
58    label: "C++",
59    icon: `${DEVICON}/cplusplus/cplusplus-original.svg`,
60  },
61  { value: "c", label: "C", icon: `${DEVICON}/c/c-original.svg` },
62  { value: "go", label: "Go", icon: `${DEVICON}/go/go-original.svg` },
63  { value: "rust", label: "Rust", icon: `${DEVICON}/rust/rust-original.svg` },
64  {
65    value: "swift",
66    label: "Swift",
67    icon: `${DEVICON}/swift/swift-original.svg`,
68  },
69  {
70    value: "kotlin",
71    label: "Kotlin",
72    icon: `${DEVICON}/kotlin/kotlin-original.svg`,
73  },
74];
75 
76type CodeEditorContextType = {
77  value: string;
78  language: string;
79  theme: string;
80  languages: Language[];
81  cursorLine: number;
82  cursorColumn: number;
83  disabled?: boolean;
84  setValue: (v: string) => void;
85  setLanguage: (l: string) => void;
86  setCursorPosition: (line: number, col: number) => void;
87  editorRef: React.RefObject<editor.IStandaloneCodeEditor | null>;
88};
89 
90// … truncated