feat: language change handler

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>
   )

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,
       }}