added editor themes changes

Author: programmer-rahul

app/components/code-capture/code-image-preview.tsx

@@ -12,13 +12,13 @@ export default function CodeImagePreview() {
       <div className="preview-box w-full mt-40">
         {/* frame  */}
         <div
-          className="frame mx-auto max-w-full bg-gradient-to-tr to-purple-600 from-blue-400 rounded-md border border-red-500 px-4 py-4"
+          className="frame mx-auto max-w-full bg-gradient-to-tr to-purple-600 from-blue-400 rounded-md px-4 py-4"
           style={{
             width: windowWidth + 32,
           }}
         >
           <div
-            className="window flex flex-col bg-[#353742af] border rounded-md border-[#82738E] border-yellow-600"
+            className="window flex flex-col bg-[#353742af] border rounded-md border-[#82738E]"
             style={{
               width: windowWidth,
             }}

app/components/code-capture/controls/control-options.tsx

@@ -5,12 +5,17 @@ import {
   SelectContent,
   SelectGroup,
   SelectItem,
-  SelectLabel,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import useStore from "@/lib/store/store";
+import { setTheme } from "@/lib/themes/change-theme";
+
+import themeList from "monaco-themes/themes/themelist.json";
 
 export default function ControlOptions() {
+  const changeEditorTheme = useStore((state) => state.changeEditorTheme);
+
   return (
     <div className="options space-y-4 p-2">
       <div className="language w-full flex gap-2 items-center">
@@ -35,16 +40,21 @@ export default function ControlOptions() {
       <div className="theme w-full flex gap-2 items-center">
         <div className="option-name w-1/3">Theme</div>
         <div className="option-input w-full">
-          <Select>
+          <Select
+            onValueChange={(value) => {
+              console.log("value", value);
+              changeEditorTheme(value);
+              setTheme(value);
+            }}
+          >
             <SelectTrigger>
-              <SelectValue placeholder="Night-Owl" />
+              <SelectValue placeholder="Night Owl" />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
-                <SelectItem value="andromeda">Andromeda</SelectItem>
-                <SelectItem value="night-owl">Night-Owl</SelectItem>
-                <SelectItem value="vs-code">Vs-Code</SelectItem>
-                <SelectItem value="github-dark">Github-Dark</SelectItem>
+                {Object.values(themeList).map((theme) => (
+                  <SelectItem value={theme}>{theme}</SelectItem>
+                ))}
               </SelectGroup>
             </SelectContent>
           </Select>

lib/monoco-editor.tsx

@@ -3,21 +3,20 @@
 import { Editor, MonacoDiffEditor } from "@monaco-editor/react";
 import React from "react";
 import useStore from "./store/store";
+import { setTheme } from "./themes/change-theme";
 
 export default function MonacoEditor() {
   const editorRef = React.useRef<MonacoDiffEditor>(null);
 
   const windowWidth = useStore((state) => state.windowWidth);
   const changeWindowWidth = useStore((state) => state.changeWindowWidth);
+  const editorTheme = useStore((state) => state.editorTheme);
 
   // Example function to log scroll width
-  const logScrollWidth = () => {
+  const controlEditorWidth = () => {
     if (editorRef.current) {
       const scrollWidth = editorRef.current.getScrollWidth();
 
-      console.log("width", windowWidth);
-      console.log("Scroll width:", scrollWidth);
-
       if (scrollWidth + 28 > windowWidth) {
         console.log("yes");
         changeWindowWidth(scrollWidth + 28);
@@ -33,9 +32,10 @@ export default function MonacoEditor() {
       theme="vs-dark"
       onMount={(editor) => {
         editorRef.current = editor;
+        setTheme(editorTheme);
       }}
       onChange={() => {
-        logScrollWidth();
+        controlEditorWidth();
       }}
       options={{
         lineNumbers: "off",

lib/store/store.tsx

@@ -3,6 +3,9 @@ import { create } from "zustand";
 interface StoreStates {
   windowWidth: number;
   changeWindowWidth: (newWidth: number) => void;
+
+  editorTheme: string;
+  changeEditorTheme: (theme: string) => void;
 }
 
 const useStore = create<StoreStates>()((set) => ({
@@ -11,6 +14,12 @@ const useStore = create<StoreStates>()((set) => ({
     set(() => ({
       windowWidth: newWidth,
     })),
+
+  editorTheme: "Night Owl",
+  changeEditorTheme: (theme) =>
+    set(() => ({
+      editorTheme: theme,
+    })),
 }));
 
 export default useStore;

lib/themes/change-theme.ts

@@ -0,0 +1,21 @@
+import { loader } from "@monaco-editor/react";
+
+const setTheme = async (themeName: string) => {
+  console.log(themeName);
+  let themeData = await import(`monaco-themes/themes/${themeName}.json`);
+  themeData = { ...themeData };
+
+  themeName &&
+    loader.init().then((monaco) => {
+      if (themeName.split(" ").length > 1) {
+        console.log("yes");
+        themeName = themeName.split(" ")[0] + "-" + themeName.split(" ")[1];
+      }
+      monaco.editor.defineTheme(themeName, themeData);
+      monaco.editor.setTheme(themeName);
+    });
+
+  return { ...themeData };
+};
+
+export { setTheme };

package.json

@@ -14,6 +14,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.395.0",
+    "monaco-themes": "^0.4.4",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",

yarn.lock

@@ -1875,6 +1875,11 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
+fast-plist@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/fast-plist/-/fast-plist-0.1.3.tgz#328cd9335e93a2479ac90814a1302437574ea925"
+  integrity sha512-d9cEfo/WcOezgPLAC/8t8wGb6YOD6JTCPMw2QcG2nAdFmyY+9rTUizCTaGjIZAloWENTEUMAPpkUAIJJJ0i96A==
+
 fastq@^1.6.0:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
@@ -2733,6 +2738,13 @@ mkdirp@^2.1.6:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-2.1.6.tgz#964fbcb12b2d8c5d6fbc62a963ac95a273e2cc19"
   integrity sha512-+hEnITedc8LAtIP9u3HJDFIdcLV2vXP33sqLLIzkv1Db1zO/1OxbvYf0Y1OC/S/Qo5dxHXepofhmxL02PsKe+A==
 
+monaco-themes@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/monaco-themes/-/monaco-themes-0.4.4.tgz#28ab13e538c4867a9bc89dc67f15dfaf3fc69de1"
+  integrity sha512-Hbb9pvRrpSi0rZezcB/IOdQnpx10o55Lx4zFdRAAVpFMa1HP7FgaqEZdKffb4ovd90fETCixeFO9JPYFMAq+TQ==
+  dependencies:
+    fast-plist "^0.1.3"
+
 [email protected]:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"