From 770742ed3600fcfed3feaa4c0f4228ebdddcde4c Mon Sep 17 00:00:00 2001
From: Izan Gil <66965250+SrIzan10@users.noreply.github.com>
Date: Fri, 1 Mar 2024 14:29:38 +0100
Subject: [PATCH] feat: language change handler

---
 src/components/CreateSnippet/CreateSnippet.tsx |  6 ++++--
 src/components/MonacoEditor/MonacoEditor.tsx   | 13 +++++++++++--
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/CreateSnippet/CreateSnippet.tsx b/src/components/CreateSnippet/CreateSnippet.tsx
index 5e110c4..5195c37 100644
--- a/src/components/CreateSnippet/CreateSnippet.tsx
+++ b/src/components/CreateSnippet/CreateSnippet.tsx
@@ -43,7 +43,9 @@ export default function CreateSnippet() {
         <Select
           placeholder="Select language"
           data={['Typescript', 'Javascript']}
-          onChange={(ev) => setSnippet({ ...snippet, lang: ev as "javascript" | "typescript" })}
+          defaultValue={'Typescript'}
+          allowDeselect={false}
+          onChange={(ev) => setSnippet({ ...snippet, lang: ev!.toLowerCase() as "javascript" | "typescript" })}
         />
         <Button
           variant={'filled'}
@@ -72,7 +74,7 @@ export default function CreateSnippet() {
         </Button>
       </div>
       <div className={styles.monaco}>
-        <MonacoEditor setEditorText={setEditorText} readOnly={false} />
+        <MonacoEditor setEditorText={setEditorText} readOnly={false} defaultLanguage={snippet.lang} />
       </div>
     </main>
   )
diff --git a/src/components/MonacoEditor/MonacoEditor.tsx b/src/components/MonacoEditor/MonacoEditor.tsx
index 2413381..039e509 100644
--- a/src/components/MonacoEditor/MonacoEditor.tsx
+++ b/src/components/MonacoEditor/MonacoEditor.tsx
@@ -1,12 +1,21 @@
 'use client'
 
-import {Editor} from "@monaco-editor/react";
+import {Editor, useMonaco} from "@monaco-editor/react";
 import {useUser} from "@clerk/nextjs";
+import React from "react";
 
 export default function MonacoEditor(props: Props) {
   const clerk = useUser()
+  const monaco = useMonaco()
+  React.useEffect(() => {
+    if (!monaco || !props.defaultLanguage) return
+    try {
+      monaco.editor.setModelLanguage(monaco.editor.getModels()[0], props.defaultLanguage)
+    } catch {}
+  },[props.defaultLanguage])
+
   return clerk.isLoaded && <Editor
-      height={props.height || '40vw'}
+      height={props.height || '60vh'}
       options={{
         readOnly: props.readOnly,
       }}