PEER-234: Streamline Editor Code

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/src/components/blocks/interview/editor.tsx

@@ -1,8 +1,7 @@
-import { getTheme, type IEditorTheme, languages, themeOptions } from '@/lib/editor/extensions';
 import { useWindowSize } from '@uidotdev/usehooks';
 import type { LanguageName } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { Label } from '@/components/ui/label';
 import {
@@ -12,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { getTheme, type IEditorTheme, languages, themeOptions } from '@/lib/editor/extensions';
 import { useCollab } from '@/lib/hooks/use-collab';
 
 const EXTENSION_HEIGHT = 250;
@@ -23,9 +23,12 @@ type EditorProps = {
 
 export const Editor = ({ room }: EditorProps) => {
   const { height } = useWindowSize();
-  const [code, setCode] = useState('');
   const [theme, setTheme] = useState<IEditorTheme>('darcula');
-  const { editorRef, extensions, language, setLanguage } = useCollab(room);
+  const { editorRef, extensions, language, setLanguage, code, setCode } = useCollab(room);
+  const themePreset = useMemo(() => {
+    return getTheme(theme);
+  }, [theme]);
+
   return (
     <div className='flex flex-col gap-4 p-4'>
       <div className='flex gap-4'>
@@ -71,7 +74,7 @@ export const Editor = ({ room }: EditorProps) => {
           onChange={(value, _viewUpdate) => {
             setCode(value);
           }}
-          theme={getTheme(theme)}
+          theme={themePreset}
           lang={language}
           basicSetup={{
             tabSize: language === 'python' ? 4 : 2,

frontend/src/lib/editor/extensions.ts

@@ -42,6 +42,7 @@ export const themeOptions = [
   'duotone',
   'eclipse',
   'github',
+  'githubDark',
   'gruvbox',
   'gruvboxDark',
   'kimbie',

frontend/src/lib/hooks/use-collab.ts

@@ -1,4 +1,4 @@
-import { EditorState, Extension, type ReactCodeMirrorRef } from '@uiw/react-codemirror';
+import { Extension, type ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { yCollab } from 'y-codemirror.next';
 import * as Y from 'yjs';
@@ -26,8 +26,9 @@ const getRandomColor = () => {
 
 // TODO: Test if collab logic works
 export const useCollab = (roomId: string) => {
+  const [code, setCode] = useState('');
   const editorRef = useRef<ReactCodeMirrorRef>(null);
-  const [extensions, setExtensions] = useState<Array<Extension>>([baseExtensions]);
+  const [extensions, setExtensions] = useState<Array<Extension>>(baseExtensions);
   const [language, setLanguage] = useState<LanguageName>('python');
   const langExtension = useMemo(() => {
     return getLanguage(language);
@@ -46,10 +47,6 @@ export const useCollab = (roomId: string) => {
         );
         return;
       }
-      if (!provider.socket.connected) {
-        console.log('Failed to connect');
-        return;
-      }
       const ytext = doc.getText('codemirror');
       const undoManager = new Y.UndoManager(ytext);
       const awareness = provider.awareness;
@@ -60,9 +57,7 @@ export const useCollab = (roomId: string) => {
         colorLight: light,
       });
       const collabExt = yCollab(ytext, awareness, { undoManager });
-      editorRef.current.state = EditorState.create({
-        doc: ytext.toJSON(),
-      });
+      setCode(ytext.toString());
       setExtensions([...extensions, collabExt]);
       return () => {
         doc.destroy();
@@ -75,5 +70,7 @@ export const useCollab = (roomId: string) => {
     extensions: [...extensions, langExtension],
     language,
     setLanguage,
+    code,
+    setCode,
   };
 };