From e24cb4a9692d4cfa11fccf7904110ec949e9da4c Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Wed, 8 Jan 2025 16:42:57 +0800
Subject: [PATCH] feat(playground): add configuration for default editor themes
 and languages

---
 .../(main)/components/language-selector.tsx   |  54 +-
 src/app/(main)/components/theme-selector.tsx  |  60 +--
 src/app/(main)/page.tsx                       |  60 ++-
 src/config/index.ts                           |  42 ++
 src/constants/editor/languages.ts             |  51 +-
 src/constants/editor/themes.ts                | 483 +++++++++++++-----
 src/store/useCodeEditorStore.ts               |  96 ++--
 7 files changed, 560 insertions(+), 286 deletions(-)
 create mode 100644 src/config/index.ts

diff --git a/src/app/(main)/components/language-selector.tsx b/src/app/(main)/components/language-selector.tsx
index c5ae98a..f6fdbd2 100644
--- a/src/app/(main)/components/language-selector.tsx
+++ b/src/app/(main)/components/language-selector.tsx
@@ -1,29 +1,29 @@
-import {
-  Select,
-  SelectItem,
-  SelectValue,
-  SelectContent,
-  SelectTrigger,
-} from "@/components/ui/select";
-import { useCodeEditorStore } from "@/store/useCodeEditorStore";
-import { SUPPORTED_LANGUAGES } from "@/constants/editor/languages";
+// import {
+//   Select,
+//   SelectItem,
+//   SelectValue,
+//   SelectContent,
+//   SelectTrigger,
+// } from "@/components/ui/select";
+// import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+// import { SUPPORTED_LANGUAGES } from "@/constants/editor/languages";
 
-export default function LanguageSelector() {
-  const { language, setLanguage } = useCodeEditorStore();
+// export default function LanguageSelector() {
+//   const { language, setLanguage } = useCodeEditorStore();
 
-  return (
-    <Select value={language} onValueChange={setLanguage}>
-      <SelectTrigger className="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80 w-36">
-        <SelectValue placeholder="Select Language" />
-      </SelectTrigger>
-      <SelectContent className="[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
-        {SUPPORTED_LANGUAGES.map((lang) => (
-          <SelectItem key={lang.key} value={lang.value}>
-            <lang.icon size={16} aria-hidden="true" />
-            <span className="truncate">{lang.label}</span>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
+//   return (
+//     <Select value={language} onValueChange={setLanguage}>
+//       <SelectTrigger className="[&>span]:flex [&>span]:items-center [&>span]:gap-2 [&>span_svg]:shrink-0 [&>span_svg]:text-muted-foreground/80 w-36">
+//         <SelectValue placeholder="Select Language" />
+//       </SelectTrigger>
+//       <SelectContent className="[&_*[role=option]>span>svg]:shrink-0 [&_*[role=option]>span>svg]:text-muted-foreground/80 [&_*[role=option]>span]:end-2 [&_*[role=option]>span]:start-auto [&_*[role=option]>span]:flex [&_*[role=option]>span]:items-center [&_*[role=option]>span]:gap-2 [&_*[role=option]]:pe-8 [&_*[role=option]]:ps-2">
+//         {SUPPORTED_LANGUAGES.map((lang) => (
+//           <SelectItem key={lang.key} value={lang.value}>
+//             <lang.icon size={16} aria-hidden="true" />
+//             <span className="truncate">{lang.label}</span>
+//           </SelectItem>
+//         ))}
+//       </SelectContent>
+//     </Select>
+//   );
+// }
diff --git a/src/app/(main)/components/theme-selector.tsx b/src/app/(main)/components/theme-selector.tsx
index 3df140f..89397eb 100644
--- a/src/app/(main)/components/theme-selector.tsx
+++ b/src/app/(main)/components/theme-selector.tsx
@@ -1,32 +1,32 @@
-import {
-  Select,
-  SelectItem,
-  SelectValue,
-  SelectContent,
-  SelectTrigger,
-} from "@/components/ui/select";
-import { Palette } from "lucide-react";
-import { SUPPORTED_THEMES } from "@/constants/editor/themes";
-import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+// import {
+//   Select,
+//   SelectItem,
+//   SelectValue,
+//   SelectContent,
+//   SelectTrigger,
+// } from "@/components/ui/select";
+// import { Palette } from "lucide-react";
+// import { SUPPORTED_THEMES } from "@/constants/editor/themes";
+// import { useCodeEditorStore } from "@/store/useCodeEditorStore";
 
-export default function ThemeSelector() {
-  const { theme, setTheme } = useCodeEditorStore();
+// export default function ThemeSelector() {
+//   const { theme, setTheme } = useCodeEditorStore();
 
-  return (
-    <Select value={theme} onValueChange={setTheme}>
-      <SelectTrigger className="relative ps-9 w-40">
-        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
-          <Palette size={16} strokeWidth={2} aria-hidden="true" />
-        </div>
-        <SelectValue placeholder="Select Theme" />
-      </SelectTrigger>
-      <SelectContent>
-        {SUPPORTED_THEMES.map((theme) => (
-          <SelectItem key={theme.key} value={theme.value}>
-            <span className="truncate">{theme.label}</span>
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
-}
+//   return (
+//     <Select value={theme} onValueChange={setTheme}>
+//       <SelectTrigger className="relative ps-9 w-40">
+//         <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 group-has-[[disabled]]:opacity-50">
+//           <Palette size={16} strokeWidth={2} aria-hidden="true" />
+//         </div>
+//         <SelectValue placeholder="Select Theme" />
+//       </SelectTrigger>
+//       <SelectContent>
+//         {SUPPORTED_THEMES.map((theme) => (
+//           <SelectItem key={theme.key} value={theme.value}>
+//             <span className="truncate">{theme.label}</span>
+//           </SelectItem>
+//         ))}
+//       </SelectContent>
+//     </Select>
+//   );
+// }
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
index b45a092..ec018ab 100644
--- a/src/app/(main)/page.tsx
+++ b/src/app/(main)/page.tsx
@@ -1,33 +1,37 @@
-"use client";
+// "use client";
 
-import * as monaco from "monaco-editor";
-import Editor from "@monaco-editor/react";
-import { loader } from "@monaco-editor/react";
-import ThemeSelector from "./components/theme-selector";
-import FontSizeSlider from "./components/font-size-slider";
-import LanguageSelector from "./components/language-selector";
-import { useCodeEditorStore } from "@/store/useCodeEditorStore";
-import { highlightMonacoEditor } from "@/constants/editor/themes";
+// import * as monaco from "monaco-editor";
+// import Editor from "@monaco-editor/react";
+// import { loader } from "@monaco-editor/react";
+// import ThemeSelector from "./components/theme-selector";
+// import FontSizeSlider from "./components/font-size-slider";
+// import LanguageSelector from "./components/language-selector";
+// import { useCodeEditorStore } from "@/store/useCodeEditorStore";
+// import { highlightMonacoEditor } from "@/constants/editor/themes";
 
-loader.config({ monaco });
+// loader.config({ monaco });
 
-export default function MainPage() {
-  const { language, theme, fontSize, setEditor } = useCodeEditorStore();
+// export default function MainPage() {
+//   const { language, theme, fontSize, setEditor } = useCodeEditorStore();
 
-  return (
-    <div className="h-full flex flex-col gap-2">
-      <div className="flex items-center px-4 gap-2">
-        <LanguageSelector />
-        <ThemeSelector />
-        <FontSizeSlider />
-      </div>
-      <Editor
-        language={language}
-        theme={theme}
-        beforeMount={highlightMonacoEditor}
-        onMount={setEditor}
-        options={{ fontSize, automaticLayout: true }}
-      />
-    </div>
-  );
+//   return (
+//     <div className="h-full flex flex-col gap-2">
+//       <div className="flex items-center px-4 gap-2">
+//         <LanguageSelector />
+//         <ThemeSelector />
+//         <FontSizeSlider />
+//       </div>
+//       <Editor
+//         language={language}
+//         theme={theme}
+//         beforeMount={highlightMonacoEditor}
+//         onMount={setEditor}
+//         options={{ fontSize, automaticLayout: true }}
+//       />
+//     </div>
+//   );
+// }
+
+export default function HomePage() {
+  return null;
 }
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..4caa3f8
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1,42 @@
+import { SupportedEditorLanguage } from "@/constants/editor/languages";
+
+export const DEFAULT_EDITOR_THEME = "one-dark-pro";
+
+export const DEFAULT_EDITOR_LANGUAGE: SupportedEditorLanguage = "c";
+
+export interface EditorFile {
+  path: string;
+  language: SupportedEditorLanguage;
+  value: string;
+}
+
+export const DEFAULT_FILES: Record<SupportedEditorLanguage, EditorFile> = {
+  c: {
+    path: "playground/main.c",
+    language: "c",
+    value: `#include <stdio.h>
+int main() {
+  printf("Hello, World!");
+  return 0;
+}`,
+  },
+  cpp: {
+    path: "playground/main.cpp",
+    language: "cpp",
+    value: `#include <iostream>
+using namespace std;
+int main() {
+  cout << "Hello, World!";
+  return 0;
+}`,
+  },
+  java: {
+    path: "playground/Main.java",
+    language: "java",
+    value: `public class Main {
+  public static void main(String[] args) {
+      System.out.println("Hello, World!");
+  }
+}`,
+  },
+};
diff --git a/src/constants/editor/languages.ts b/src/constants/editor/languages.ts
index 9763145..c979ce2 100644
--- a/src/constants/editor/languages.ts
+++ b/src/constants/editor/languages.ts
@@ -1,15 +1,40 @@
-import {
-  COriginal,
-  CplusplusOriginal,
-  JavaOriginal,
-  PythonOriginal,
-} from "devicons-react";
+// import {
+//   COriginal,
+//   CplusplusOriginal,
+//   JavaOriginal,
+//   PythonOriginal,
+// } from "devicons-react";
 
-export const SUPPORTED_LANGUAGES = [
-  { key: "c", value: "c", label: "C", icon: COriginal },
-  { key: "cpp", value: "cpp", label: "C++", icon: CplusplusOriginal },
-  { key: "java", value: "java", label: "Java", icon: JavaOriginal },
-  { key: "python", value: "python", label: "Python", icon: PythonOriginal },
-];
+// export const SUPPORTED_LANGUAGES = [
+//   { key: "c", value: "c", label: "C", icon: COriginal },
+//   { key: "cpp", value: "cpp", label: "C++", icon: CplusplusOriginal },
+//   { key: "java", value: "java", label: "Java", icon: JavaOriginal },
+//   { key: "python", value: "python", label: "Python", icon: PythonOriginal },
+// ];
 
-export const DEFAULT_LANGUAGE = SUPPORTED_LANGUAGES[0].value;
+// export const DEFAULT_LANGUAGE = SUPPORTED_LANGUAGES[0].value;
+
+import { COriginal, CplusplusOriginal, JavaOriginal } from "devicons-react";
+
+export const SUPPORTED_EDITOR_LANGUAGES = ["c", "cpp", "java"];
+
+export const SUPPORTED_EDITOR_LANGUAGES_CONFIG = {
+  c: {
+    id: "c",
+    label: "C",
+    icon: COriginal,
+  },
+  cpp: {
+    id: "cpp",
+    label: "C++",
+    icon: CplusplusOriginal,
+  },
+  java: {
+    id: "java",
+    label: "Java",
+    icon: JavaOriginal,
+  },
+};
+
+export type SupportedEditorLanguage =
+  (typeof SUPPORTED_EDITOR_LANGUAGES)[number];
diff --git a/src/constants/editor/themes.ts b/src/constants/editor/themes.ts
index fa4c8d0..e7ec770 100644
--- a/src/constants/editor/themes.ts
+++ b/src/constants/editor/themes.ts
@@ -1,292 +1,495 @@
-import { createHighlighter } from "shiki";
-import { Monaco } from "@monaco-editor/react";
-import { shikiToMonaco } from "@shikijs/monaco";
-import { SUPPORTED_LANGUAGES } from "./languages";
+// import { createHighlighter } from "shiki";
+// import { Monaco } from "@monaco-editor/react";
+// import { shikiToMonaco } from "@shikijs/monaco";
+// import { SUPPORTED_LANGUAGES } from "./languages";
 
-export const SUPPORTED_THEMES = [
+// export const SUPPORTED_THEMES = [
+//   {
+//     key: "andromeeda",
+//     value: "andromeeda",
+//     label: "Andromeeda",
+//   },
+//   {
+//     key: "aurora-x",
+//     value: "aurora-x",
+//     label: "Aurora X",
+//   },
+//   {
+//     key: "ayu-dark",
+//     value: "ayu-dark",
+//     label: "Ayu Dark",
+//   },
+//   {
+//     key: "catppuccin-frappe",
+//     value: "catppuccin-frappe",
+//     label: "Catppuccin Frappé",
+//   },
+//   {
+//     key: "catppuccin-latte",
+//     value: "catppuccin-latte",
+//     label: "Catppuccin Latte",
+//   },
+//   {
+//     key: "catppuccin-macchiato",
+//     value: "catppuccin-macchiato",
+//     label: "Catppuccin Macchiato",
+//   },
+//   {
+//     key: "catppuccin-mocha",
+//     value: "catppuccin-mocha",
+//     label: "Catppuccin Mocha",
+//   },
+//   {
+//     key: "dark-plus",
+//     value: "dark-plus",
+//     label: "Dark Plus",
+//   },
+//   {
+//     key: "dracula",
+//     value: "dracula",
+//     label: "Dracula",
+//   },
+//   {
+//     key: "dracula-soft",
+//     value: "dracula-soft",
+//     label: "Dracula Soft",
+//   },
+//   {
+//     key: "everforest-dark",
+//     value: "everforest-dark",
+//     label: "Everforest Dark",
+//   },
+//   {
+//     key: "everforest-light",
+//     value: "everforest-light",
+//     label: "Everforest Light",
+//   },
+//   {
+//     key: "github-dark",
+//     value: "github-dark",
+//     label: "GitHub Dark",
+//   },
+//   // {
+//   //   key: "github-dark-default",
+//   //   value: "github-dark-default",
+//   //   label: "GitHub Dark Default",
+//   // },
+//   // {
+//   //   key: "github-dark-dimmed",
+//   //   value: "github-dark-dimmed",
+//   //   label: "GitHub Dark Dimmed",
+//   // },
+//   // {
+//   //   key: "github-dark-high-contrast",
+//   //   value: "github-dark-high-contrast",
+//   //   label: "GitHub Dark High Contrast",
+//   // },
+//   {
+//     key: "github-light",
+//     value: "github-light",
+//     label: "GitHub Light",
+//   },
+//   {
+//     key: "github-light-default",
+//     value: "github-light-default",
+//     label: "GitHub Light Default",
+//   },
+//   {
+//     key: "github-light-high-contrast",
+//     value: "github-light-high-contrast",
+//     label: "GitHub Light High Contrast",
+//   },
+//   {
+//     key: "houston",
+//     value: "houston",
+//     label: "Houston",
+//   },
+//   {
+//     key: "kanagawa-dragon",
+//     value: "kanagawa-dragon",
+//     label: "Kanagawa Dragon",
+//   },
+//   {
+//     key: "kanagawa-lotus",
+//     value: "kanagawa-lotus",
+//     label: "Kanagawa Lotus",
+//   },
+//   {
+//     key: "kanagawa-wave",
+//     value: "kanagawa-wave",
+//     label: "Kanagawa Wave",
+//   },
+//   {
+//     key: "laserwave",
+//     value: "laserwave",
+//     label: "Laserwave",
+//   },
+//   {
+//     key: "light-plus",
+//     value: "light-plus",
+//     label: "Light Plus",
+//   },
+//   {
+//     key: "material-theme",
+//     value: "material-theme",
+//     label: "Material Theme",
+//   },
+//   {
+//     key: "material-theme-darker",
+//     value: "material-theme-darker",
+//     label: "Material Theme Darker",
+//   },
+//   {
+//     key: "material-theme-lighter",
+//     value: "material-theme-lighter",
+//     label: "Material Theme Lighter",
+//   },
+//   {
+//     key: "material-theme-ocean",
+//     value: "material-theme-ocean",
+//     label: "Material Theme Ocean",
+//   },
+//   {
+//     key: "material-theme-palenight",
+//     value: "material-theme-palenight",
+//     label: "Material Theme Palenight",
+//   },
+//   {
+//     key: "min-dark",
+//     value: "min-dark",
+//     label: "Min Dark",
+//   },
+//   {
+//     key: "min-light",
+//     value: "min-light",
+//     label: "Min Light",
+//   },
+//   {
+//     key: "monokai",
+//     value: "monokai",
+//     label: "Monokai",
+//   },
+//   {
+//     key: "night-owl",
+//     value: "night-owl",
+//     label: "Night Owl",
+//   },
+//   {
+//     key: "nord",
+//     value: "nord",
+//     label: "Nord",
+//   },
+//   {
+//     key: "one-dark-pro",
+//     value: "one-dark-pro",
+//     label: "One Dark Pro",
+//   },
+//   {
+//     key: "one-light",
+//     value: "one-light",
+//     label: "One Light",
+//   },
+//   {
+//     key: "plastic",
+//     value: "plastic",
+//     label: "Plastic",
+//   },
+//   {
+//     key: "poimandres",
+//     value: "poimandres",
+//     label: "Poimandres",
+//   },
+//   {
+//     key: "red",
+//     value: "red",
+//     label: "Red",
+//   },
+//   {
+//     key: "rose-pine",
+//     value: "rose-pine",
+//     label: "Rosé Pine",
+//   },
+//   {
+//     key: "rose-pine-dawn",
+//     value: "rose-pine-dawn",
+//     label: "Rosé Pine Dawn",
+//   },
+//   {
+//     key: "rose-pine-moon",
+//     value: "rose-pine-moon",
+//     label: "Rosé Pine Moon",
+//   },
+//   {
+//     key: "slack-dark",
+//     value: "slack-dark",
+//     label: "Slack Dark",
+//   },
+//   {
+//     key: "slack-ochin",
+//     value: "slack-ochin",
+//     label: "Slack Ochin",
+//   },
+//   {
+//     key: "snazzy-light",
+//     value: "snazzy-light",
+//     label: "Snazzy Light",
+//   },
+//   {
+//     key: "solarized-dark",
+//     value: "solarized-dark",
+//     label: "Solarized Dark",
+//   },
+//   {
+//     key: "solarized-light",
+//     value: "solarized-light",
+//     label: "Solarized Light",
+//   },
+//   {
+//     key: "synthwave-84",
+//     value: "synthwave-84",
+//     label: "Synthwave '84",
+//   },
+//   {
+//     key: "tokyo-night",
+//     value: "tokyo-night",
+//     label: "Tokyo Night",
+//   },
+//   // {
+//   //   key: "vesper",
+//   //   value: "vesper",
+//   //   label: "Vesper",
+//   // },
+//   {
+//     key: "vitesse-black",
+//     value: "vitesse-black",
+//     label: "Vitesse Black",
+//   },
+//   {
+//     key: "vitesse-dark",
+//     value: "vitesse-dark",
+//     label: "Vitesse Dark",
+//   },
+//   {
+//     key: "vitesse-light",
+//     value: "vitesse-light",
+//     label: "Vitesse Light",
+//   },
+// ];
+
+// export const DEFAULT_THEME = SUPPORTED_THEMES[0].value;
+
+// export const highlightMonacoEditor = async (monaco: Monaco) => {
+//   const highlighter = await createHighlighter({
+//     themes: SUPPORTED_THEMES.map((theme) => theme.value),
+//     langs: SUPPORTED_LANGUAGES.map((lang) => lang.value),
+//   });
+
+//   for (const lang of SUPPORTED_LANGUAGES) {
+//     monaco.languages.register({ id: lang.value });
+//   }
+
+//   shikiToMonaco(highlighter, monaco);
+// };
+
+export const SUPPORTED_EDITOR_THEMES = [
   {
-    key: "andromeeda",
-    value: "andromeeda",
+    id: "andromeeda",
     label: "Andromeeda",
   },
   {
-    key: "aurora-x",
-    value: "aurora-x",
+    id: "aurora-x",
     label: "Aurora X",
   },
   {
-    key: "ayu-dark",
-    value: "ayu-dark",
+    id: "ayu-dark",
     label: "Ayu Dark",
   },
   {
-    key: "catppuccin-frappe",
-    value: "catppuccin-frappe",
+    id: "catppuccin-frappe",
     label: "Catppuccin Frappé",
   },
   {
-    key: "catppuccin-latte",
-    value: "catppuccin-latte",
+    id: "catppuccin-latte",
     label: "Catppuccin Latte",
   },
   {
-    key: "catppuccin-macchiato",
-    value: "catppuccin-macchiato",
+    id: "catppuccin-macchiato",
     label: "Catppuccin Macchiato",
   },
   {
-    key: "catppuccin-mocha",
-    value: "catppuccin-mocha",
+    id: "catppuccin-mocha",
     label: "Catppuccin Mocha",
   },
   {
-    key: "dark-plus",
-    value: "dark-plus",
+    id: "dark-plus",
     label: "Dark Plus",
   },
   {
-    key: "dracula",
-    value: "dracula",
+    id: "dracula",
     label: "Dracula",
   },
   {
-    key: "dracula-soft",
-    value: "dracula-soft",
+    id: "dracula-soft",
     label: "Dracula Soft",
   },
   {
-    key: "everforest-dark",
-    value: "everforest-dark",
+    id: "everforest-dark",
     label: "Everforest Dark",
   },
   {
-    key: "everforest-light",
-    value: "everforest-light",
+    id: "everforest-light",
     label: "Everforest Light",
   },
   {
-    key: "github-dark",
-    value: "github-dark",
+    id: "github-dark",
     label: "GitHub Dark",
   },
-  // {
-  //   key: "github-dark-default",
-  //   value: "github-dark-default",
-  //   label: "GitHub Dark Default",
-  // },
-  // {
-  //   key: "github-dark-dimmed",
-  //   value: "github-dark-dimmed",
-  //   label: "GitHub Dark Dimmed",
-  // },
-  // {
-  //   key: "github-dark-high-contrast",
-  //   value: "github-dark-high-contrast",
-  //   label: "GitHub Dark High Contrast",
-  // },
   {
-    key: "github-light",
-    value: "github-light",
+    id: "github-light",
     label: "GitHub Light",
   },
   {
-    key: "github-light-default",
-    value: "github-light-default",
+    id: "github-light-default",
     label: "GitHub Light Default",
   },
   {
-    key: "github-light-high-contrast",
-    value: "github-light-high-contrast",
+    id: "github-light-high-contrast",
     label: "GitHub Light High Contrast",
   },
   {
-    key: "houston",
-    value: "houston",
+    id: "houston",
     label: "Houston",
   },
   {
-    key: "kanagawa-dragon",
-    value: "kanagawa-dragon",
+    id: "kanagawa-dragon",
     label: "Kanagawa Dragon",
   },
   {
-    key: "kanagawa-lotus",
-    value: "kanagawa-lotus",
+    id: "kanagawa-lotus",
     label: "Kanagawa Lotus",
   },
   {
-    key: "kanagawa-wave",
-    value: "kanagawa-wave",
+    id: "kanagawa-wave",
     label: "Kanagawa Wave",
   },
   {
-    key: "laserwave",
-    value: "laserwave",
+    id: "laserwave",
     label: "Laserwave",
   },
   {
-    key: "light-plus",
-    value: "light-plus",
+    id: "light-plus",
     label: "Light Plus",
   },
   {
-    key: "material-theme",
-    value: "material-theme",
+    id: "material-theme",
     label: "Material Theme",
   },
   {
-    key: "material-theme-darker",
-    value: "material-theme-darker",
+    id: "material-theme-darker",
     label: "Material Theme Darker",
   },
   {
-    key: "material-theme-lighter",
-    value: "material-theme-lighter",
+    id: "material-theme-lighter",
     label: "Material Theme Lighter",
   },
   {
-    key: "material-theme-ocean",
-    value: "material-theme-ocean",
+    id: "material-theme-ocean",
     label: "Material Theme Ocean",
   },
   {
-    key: "material-theme-palenight",
-    value: "material-theme-palenight",
+    id: "material-theme-palenight",
     label: "Material Theme Palenight",
   },
   {
-    key: "min-dark",
-    value: "min-dark",
+    id: "min-dark",
     label: "Min Dark",
   },
   {
-    key: "min-light",
-    value: "min-light",
+    id: "min-light",
     label: "Min Light",
   },
   {
-    key: "monokai",
-    value: "monokai",
+    id: "monokai",
     label: "Monokai",
   },
   {
-    key: "night-owl",
-    value: "night-owl",
+    id: "night-owl",
     label: "Night Owl",
   },
   {
-    key: "nord",
-    value: "nord",
+    id: "nord",
     label: "Nord",
   },
   {
-    key: "one-dark-pro",
-    value: "one-dark-pro",
+    id: "one-dark-pro",
     label: "One Dark Pro",
   },
   {
-    key: "one-light",
-    value: "one-light",
+    id: "one-light",
     label: "One Light",
   },
   {
-    key: "plastic",
-    value: "plastic",
+    id: "plastic",
     label: "Plastic",
   },
   {
-    key: "poimandres",
-    value: "poimandres",
+    id: "poimandres",
     label: "Poimandres",
   },
   {
-    key: "red",
-    value: "red",
+    id: "red",
     label: "Red",
   },
   {
-    key: "rose-pine",
-    value: "rose-pine",
+    id: "rose-pine",
     label: "Rosé Pine",
   },
   {
-    key: "rose-pine-dawn",
-    value: "rose-pine-dawn",
+    id: "rose-pine-dawn",
     label: "Rosé Pine Dawn",
   },
   {
-    key: "rose-pine-moon",
-    value: "rose-pine-moon",
+    id: "rose-pine-moon",
     label: "Rosé Pine Moon",
   },
   {
-    key: "slack-dark",
-    value: "slack-dark",
+    id: "slack-dark",
     label: "Slack Dark",
   },
   {
-    key: "slack-ochin",
-    value: "slack-ochin",
+    id: "slack-ochin",
     label: "Slack Ochin",
   },
   {
-    key: "snazzy-light",
-    value: "snazzy-light",
+    id: "snazzy-light",
     label: "Snazzy Light",
   },
   {
-    key: "solarized-dark",
-    value: "solarized-dark",
+    id: "solarized-dark",
     label: "Solarized Dark",
   },
   {
-    key: "solarized-light",
-    value: "solarized-light",
+    id: "solarized-light",
     label: "Solarized Light",
   },
   {
-    key: "synthwave-84",
-    value: "synthwave-84",
+    id: "synthwave-84",
     label: "Synthwave '84",
   },
   {
-    key: "tokyo-night",
-    value: "tokyo-night",
+    id: "tokyo-night",
     label: "Tokyo Night",
   },
-  // {
-  //   key: "vesper",
-  //   value: "vesper",
-  //   label: "Vesper",
-  // },
   {
-    key: "vitesse-black",
-    value: "vitesse-black",
+    id: "vitesse-black",
     label: "Vitesse Black",
   },
   {
-    key: "vitesse-dark",
-    value: "vitesse-dark",
+    id: "vitesse-dark",
     label: "Vitesse Dark",
   },
   {
-    key: "vitesse-light",
-    value: "vitesse-light",
+    id: "vitesse-light",
     label: "Vitesse Light",
   },
 ];
-
-export const DEFAULT_THEME = SUPPORTED_THEMES[0].value;
-
-export const highlightMonacoEditor = async (monaco: Monaco) => {
-  const highlighter = await createHighlighter({
-    themes: SUPPORTED_THEMES.map((theme) => theme.value),
-    langs: SUPPORTED_LANGUAGES.map((lang) => lang.value),
-  });
-
-  for (const lang of SUPPORTED_LANGUAGES) {
-    monaco.languages.register({ id: lang.value });
-  }
-
-  shikiToMonaco(highlighter, monaco);
-};
diff --git a/src/store/useCodeEditorStore.ts b/src/store/useCodeEditorStore.ts
index cc77fd1..a0f91ca 100644
--- a/src/store/useCodeEditorStore.ts
+++ b/src/store/useCodeEditorStore.ts
@@ -1,52 +1,52 @@
-import { create } from "zustand";
-import { editor } from "monaco-editor";
-import { CodeEditorState } from "@/types";
-import { DEFAULT_THEME } from "@/constants/editor/themes";
-import { DEFAULT_VALUE } from "@/constants/editor/values";
-import { DEFAULT_FONT_SIZE } from "@/constants/editor/options";
-import { DEFAULT_LANGUAGE } from "@/constants/editor/languages";
-import { persist, createJSONStorage } from "zustand/middleware";
+// import { create } from "zustand";
+// import { editor } from "monaco-editor";
+// import { CodeEditorState } from "@/types";
+// import { DEFAULT_THEME } from "@/constants/editor/themes";
+// import { DEFAULT_VALUE } from "@/constants/editor/values";
+// import { DEFAULT_FONT_SIZE } from "@/constants/editor/options";
+// import { DEFAULT_LANGUAGE } from "@/constants/editor/languages";
+// import { persist, createJSONStorage } from "zustand/middleware";
 
-const getSavedCode = (language: string) =>
-  localStorage.getItem(`code-editor-${language}`) ||
-  DEFAULT_VALUE.find((v) => v.key === language)?.value ||
-  "";
+// const getSavedCode = (language: string) =>
+//   localStorage.getItem(`code-editor-${language}`) ||
+//   DEFAULT_VALUE.find((v) => v.key === language)?.value ||
+//   "";
 
-const saveCode = (language: string, code: string) =>
-  localStorage.setItem(`code-editor-${language}`, code);
+// const saveCode = (language: string, code: string) =>
+//   localStorage.setItem(`code-editor-${language}`, code);
 
-export const useCodeEditorStore = create<CodeEditorState>()(
-  persist(
-    (set, get) => ({
-      language: DEFAULT_LANGUAGE,
-      theme: DEFAULT_THEME,
-      fontSize: DEFAULT_FONT_SIZE,
-      editor: null,
+// export const useCodeEditorStore = create<CodeEditorState>()(
+//   persist(
+//     (set, get) => ({
+//       language: DEFAULT_LANGUAGE,
+//       theme: DEFAULT_THEME,
+//       fontSize: DEFAULT_FONT_SIZE,
+//       editor: null,
 
-      setLanguage: (language: string) => {
-        const { editor: currentEditor, language: currentLanguage } = get();
-        const currentCode = currentEditor?.getValue() || "";
-        if (currentEditor) saveCode(currentLanguage, currentCode);
-        const savedCode = getSavedCode(language);
-        if (savedCode && currentEditor) currentEditor.setValue(savedCode);
-        set({ language });
-      },
-      setTheme: (theme: string) => set({ theme }),
-      setFontSize: (fontSize: number) => set({ fontSize }),
-      setEditor: (editor: editor.IStandaloneCodeEditor) => {
-        const savedCode = getSavedCode(get().language);
-        if (savedCode) editor.setValue(savedCode);
-        set({ editor });
-      },
-    }),
-    {
-      name: "code-editor-storage",
-      storage: createJSONStorage(() => localStorage),
-      partialize: (state) => ({
-        language: state.language,
-        theme: state.theme,
-        fontSize: state.fontSize,
-      }),
-    }
-  )
-);
+//       setLanguage: (language: string) => {
+//         const { editor: currentEditor, language: currentLanguage } = get();
+//         const currentCode = currentEditor?.getValue() || "";
+//         if (currentEditor) saveCode(currentLanguage, currentCode);
+//         const savedCode = getSavedCode(language);
+//         if (savedCode && currentEditor) currentEditor.setValue(savedCode);
+//         set({ language });
+//       },
+//       setTheme: (theme: string) => set({ theme }),
+//       setFontSize: (fontSize: number) => set({ fontSize }),
+//       setEditor: (editor: editor.IStandaloneCodeEditor) => {
+//         const savedCode = getSavedCode(get().language);
+//         if (savedCode) editor.setValue(savedCode);
+//         set({ editor });
+//       },
+//     }),
+//     {
+//       name: "code-editor-storage",
+//       storage: createJSONStorage(() => localStorage),
+//       partialize: (state) => ({
+//         language: state.language,
+//         theme: state.theme,
+//         fontSize: state.fontSize,
+//       }),
+//     }
+//   )
+// );