PEER-234: Add functional syntax highlighting

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

Author: SeeuSim

frontend/package.json

@@ -48,10 +48,8 @@
     "remark-math": "^6.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
-    "y-codemirror": "^3.0.1",
     "y-codemirror.next": "^0.3.5",
     "y-socket.io": "^1.1.3",
-    "y-websocket": "^2.0.4",
     "yjs": "^13.6.20",
     "zod": "^3.23.8"
   },

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

@@ -24,9 +24,8 @@ type EditorProps = {
 export const Editor = ({ room }: EditorProps) => {
   const { height } = useWindowSize();
   const [code, setCode] = useState('');
-  const [language, setLanguage] = useState<LanguageName>('python');
   const [theme, setTheme] = useState<IEditorTheme>('darcula');
-  const { editorRef, extensions } = useCollab(room);
+  const { editorRef, extensions, language, setLanguage } = useCollab(room);
   return (
     <div className='flex flex-col gap-4 p-4'>
       <div className='flex gap-4'>
@@ -61,7 +60,7 @@ export const Editor = ({ room }: EditorProps) => {
           </Select>
         </div>
       </div>
-      <div className='border-border w-full text-clip rounded-lg border shadow-sm'>
+      <div className='border-border w-full !overflow-clip rounded-lg border shadow-sm'>
         <CodeMirror
           ref={editorRef}
           style={{

frontend/src/lib/editor/extensions.ts

@@ -21,7 +21,10 @@ export const languages = [
 
 languages.forEach(loadLanguage);
 
-const langExtensions = languages.map((v) => langs[v]());
+const langExtensions = Object.fromEntries(languages.map((v) => [v, langs[v]()]));
+export const getLanguage = (language: (typeof languages)[number]) => {
+  return langExtensions[language];
+};
 
 export const themeOptions = [
   'abcdef',
@@ -68,4 +71,4 @@ export const getTheme = (theme: IEditorTheme) => {
   return themes[theme as keyof typeof themes] as Extension;
 };
 
-export const extensions = [keymap.of(vscodeKeymap), ...langExtensions];
+export const extensions = [keymap.of(vscodeKeymap)];

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

@@ -1,11 +1,12 @@
 import { EditorState, Extension, type ReactCodeMirrorRef } from '@uiw/react-codemirror';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { yCollab } from 'y-codemirror.next';
 import * as Y from 'yjs';
 import { SocketIOProvider } from 'y-socket.io';
 
 import { COLLAB_SERVICE } from '@/services/api-clients';
-import { extensions as baseExtensions } from '@/lib/editor/extensions';
+import { extensions as baseExtensions, getLanguage } from '@/lib/editor/extensions';
+import { LanguageName } from '@uiw/codemirror-extensions-langs';
 
 // credit: https://github.com/yjs/y-websocket
 const usercolors = [
@@ -27,6 +28,11 @@ const getRandomColor = () => {
 export const useCollab = (roomId: string) => {
   const editorRef = useRef<ReactCodeMirrorRef>(null);
   const [extensions, setExtensions] = useState<Array<Extension>>([baseExtensions]);
+  const [language, setLanguage] = useState<LanguageName>('python');
+  const langExtension = useMemo(() => {
+    return getLanguage(language);
+  }, [language]);
+
   useEffect(() => {
     if (editorRef.current) {
       const doc = new Y.Doc();
@@ -66,6 +72,8 @@ export const useCollab = (roomId: string) => {
   }, [editorRef]);
   return {
     editorRef,
-    extensions,
+    extensions: [...extensions, langExtension],
+    language,
+    setLanguage,
   };
 };