added editor languages

Author: programmer-rahul

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

@@ -9,40 +9,45 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import useStore from "@/lib/store/store";
-import { setTheme } from "@/lib/themes/change-theme";
+import { setTheme } from "@/lib/editor/themes/change-theme";
 
 import themeList from "monaco-themes/themes/themelist.json";
+import editorLanguages from "@/lib/editor/languages/editor-languages";
 
 export default function ControlOptions() {
+  // store
   const changeEditorTheme = useStore((state) => state.changeEditorTheme);
+  const changeEditorLanguage = useStore((state) => state.changeEditorLanguage);
 
   return (
     <div className="options space-y-4 p-2">
       <div className="language w-full flex gap-2 items-center">
         <div className="option-name w-1/3">Language</div>
         <div className="option-input w-full">
-          <Select>
+          <Select
+            onValueChange={(value) => {
+              changeEditorLanguage(value);
+            }}
+          >
             <SelectTrigger>
               <SelectValue placeholder="Javascript" />
             </SelectTrigger>
             <SelectContent>
               <SelectGroup>
-                <SelectItem value="javascript">Javascript</SelectItem>
-                <SelectItem value="typescript">Typescript</SelectItem>
-                <SelectItem value="react">React</SelectItem>
-                <SelectItem value="html">Html</SelectItem>
-                <SelectItem value="css">Css</SelectItem>
+                {editorLanguages.map((language) => (
+                  <SelectItem value={language}>{language}</SelectItem>
+                ))}
               </SelectGroup>
             </SelectContent>
           </Select>
         </div>
       </div>
+
       <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
             onValueChange={(value) => {
-              console.log("value", value);
               changeEditorTheme(value);
               setTheme(value);
             }}

app/components/code-capture/preview/window-content.tsx

@@ -14,7 +14,7 @@ export default function WindowContent() {
       `;
 
   return (
-    <div className="content rounded-b-md opacity-90 h-20">
+    <div className="content rounded-b-md opacity-90 h-60">
       <MonacoEditor />
     </div>
   );

components/ui/select.tsx

@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 capitalize w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -46,8 +46,8 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUp className="h-4 w-4" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -63,9 +63,9 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDown className="h-4 w-4" />
   </SelectPrimitive.ScrollDownButton>
-))
+));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+  SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -75,7 +75,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relativ z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -96,8 +96,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -108,8 +108,8 @@ const SelectLabel = React.forwardRef<
     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -118,7 +118,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative capitalize flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
@@ -131,8 +131,8 @@ const SelectItem = React.forwardRef<
 
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -143,8 +143,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -157,4 +157,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};

lib/editor/languages/editor-languages.ts

@@ -0,0 +1,21 @@
+const editorLanguages = [
+  "javascript",
+  "typescript",
+  "python",
+  "java",
+  "csharp",
+  "cpp",
+  "php",
+  "ruby",
+  "swift",
+  "go",
+  "kotlin",
+  "sql",
+  "html",
+  "css",
+  "json",
+  "markdown",
+  "shell",
+];
+
+export default editorLanguages;

lib/themes/change-theme.ts renamed to lib/editor/themes/change-theme.ts

@@ -3,16 +3,19 @@
 import { Editor, MonacoDiffEditor } from "@monaco-editor/react";
 import React from "react";
 import useStore from "./store/store";
-import { setTheme } from "./themes/change-theme";
+import { setTheme } from "./editor/themes/change-theme";
+import { Languages } from "lucide-react";
 
 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);
+  const editorLanguage = useStore((state) => state.editorLanguage);
 
-  // Example function to log scroll width
+  // to adjust editor width based on its content
   const controlEditorWidth = () => {
     if (editorRef.current) {
       const scrollWidth = editorRef.current.getScrollWidth();
@@ -24,18 +27,25 @@ export default function MonacoEditor() {
     }
   };
 
+  console.log('changed language',editorLanguage);
+
   return (
     <Editor
-      language="javascript"
+      language={editorLanguage}
       height={"100%"}
-      value="const width = 55;"
+      value={`class HelloWorldApp {
+        public static void main(String[] args) {
+            System.out.println("Hello World!");
+        }
+    }`}
       theme="vs-dark"
       onMount={(editor) => {
         editorRef.current = editor;
         setTheme(editorTheme);
       }}
-      onChange={() => {
+      onChange={(editor, monaco) => {
         controlEditorWidth();
+        // detectModel()
       }}
       options={{
         lineNumbers: "off",

lib/monoco-editor.tsx

@@ -6,6 +6,9 @@ interface StoreStates {
 
   editorTheme: string;
   changeEditorTheme: (theme: string) => void;
+
+  editorLanguage: string;
+  changeEditorLanguage: (language: string) => void;
 }
 
 const useStore = create<StoreStates>()((set) => ({
@@ -20,6 +23,12 @@ const useStore = create<StoreStates>()((set) => ({
     set(() => ({
       editorTheme: theme,
     })),
+
+  editorLanguage: "javascript",
+  changeEditorLanguage: (language) =>
+    set(() => ({
+      editorLanguage: language,
+    })),
 }));
 
 export default useStore;