feat(collaboration service): language support

Add multi-language support and syntax highlighting

Add support for multiple programming languages (Python, JavaScript, Java, C++) and Plain Text
Add language dropdown with real-time synchronisation between collaborators for language switching functionality
Configure CodeMirror with syntax highlighting for all supported languages
Add code autocompletion for Python (other languages do not have built-in autocompletion support in their packages)
Partially completes requirement N2H1.1 (Enhanced Code Editor)

Author: leepoeaik

frontend/package.json

@@ -12,6 +12,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@codemirror/lang-cpp": "^6.0.3",
+    "@codemirror/lang-java": "^6.0.2",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-python": "^6.2.1",
     "@tanstack/react-query": "^5.90.2",
     "@tanstack/react-query-devtools": "^5.90.2",
     "axios": "^1.12.2",

frontend/src/collaboration/components/CodeMirror.tsx

@@ -1,6 +1,6 @@
 // src/codemirror.tsx
 import React, {useEffect, useRef} from 'react';
-import {EditorState} from '@codemirror/state';
+import {EditorState, Compartment, type Extension} from '@codemirror/state';
 import {
   EditorView,
   keymap,
@@ -21,7 +21,13 @@ import {
   foldGutter,
   foldKeymap,
 } from '@codemirror/language';
-import {defaultKeymap, history, historyKeymap} from '@codemirror/commands';
+
+import {javascript} from '@codemirror/lang-javascript';
+import {python} from '@codemirror/lang-python';
+import {cpp} from '@codemirror/lang-cpp';
+import {java} from '@codemirror/lang-java';
+
+import {defaultKeymap, history, historyKeymap, indentMore, indentLess} from '@codemirror/commands';
 import {searchKeymap, highlightSelectionMatches} from '@codemirror/search';
 import {
   autocompletion,
@@ -34,18 +40,32 @@ import {yCollab} from 'y-codemirror.next';
 import * as Y from 'yjs';
 import {Awareness} from 'y-protocols/awareness';
 
+const languageCompartment = new Compartment();
+
+const languageMap: { [key: string]: () => Extension } = {
+  javascript: () => javascript(),
+  python: () => python(),
+  cpp: () => cpp(),
+  java: () => java(),
+  default: () => [], // plain text mode
+};
+
 interface CodeMirrorProps {
   ytext: Y.Text;
   awareness: Awareness;
+  languageConfig: string;
 }
 
-export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
+export default function CodeMirror({ytext, awareness, languageConfig}: CodeMirrorProps) {
   const editorRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<EditorView | null>(null);
 
   useEffect(() => {
     if (!editorRef.current || !ytext || !awareness) return;
 
+    const lazyInitialLang = languageMap[languageConfig.toLowerCase()] || languageMap.default;
+    const initialLanguageExtension = lazyInitialLang();
+
     // Create the editor view with yCollab extension
     const view = new EditorView({
       doc: ytext.toString(),
@@ -68,7 +88,9 @@ export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
         // Re-indent lines when typing specific input
         indentOnInput(),
         // Highlight syntax with a default style
-        syntaxHighlighting(defaultHighlightStyle),
+        syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+        // Dyanmic configuration for language mode
+        languageCompartment.of(initialLanguageExtension),
         // Highlight matching brackets near cursor
         bracketMatching(),
         // Automatically close brackets
@@ -88,6 +110,17 @@ export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
         // Yjs collaboration extension for CodeMirror 6
         yCollab(ytext, awareness),
         keymap.of([
+          {
+            key: "Tab",
+            preventDefault: true,
+            run: indentMore,
+          },
+          {
+            key: "Shift-Tab",
+            preventDefault: true,
+            run: indentLess,
+          },
+
           // Closed-brackets aware backspace
           ...closeBracketsKeymap,
           // A large set of basic bindings
@@ -117,6 +150,20 @@ export default function CodeMirror({ytext, awareness}: CodeMirrorProps) {
     };
   }, [ytext, awareness]);
 
+  // Effect to handle language changes
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+
+    const newLazyLangFn = languageMap[languageConfig.toLowerCase()] || languageMap.default;
+    const newExtension = newLazyLangFn();
+
+    // Reconfigures compartment with the new language extension
+    view.dispatch({
+      effects: languageCompartment.reconfigure(newExtension),
+    });
+  }, [languageConfig]);
+
   return (
     <div
       ref={editorRef}

frontend/src/collaboration/components/CollabEditor.tsx

@@ -1,16 +1,45 @@
 import useCollabEditor from '../hooks/useCollabEditor';
 import CodeMirror from './CodeMirror';
+import React from 'react';
+
+const LANGUAGE_OPTIONS = [
+  { value: 'python', label: 'Python' },
+  { value: 'javascript', label: 'JavaScript' },
+  { value: 'cpp', label: 'C++' },
+  { value: 'java', label: 'Java' },
+  { value: 'default', label: 'Plain Text' },
+];
 
 export default function CollabEditor({roomId}: {roomId: string}) {
-  const {ytext, awareness, isReady} = useCollabEditor({roomId});
+  const {ytext, awareness, isReady, languageConfig, setSharedLanguage} = useCollabEditor({roomId});
   if (!isReady || !ytext) {
     return <div>Loading...</div>;
   }
 
+  const handleLanguageChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSharedLanguage(event.target.value);
+  };
+
   return (
     <div style={{padding: '20px'}}>
-      <h2>Happy Coding :D</h2>
-      <CodeMirror ytext={ytext} awareness={awareness} />
+      <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px'}}>
+        <h2>Happy Coding :D</h2>
+        <label>
+          Language: 
+          <select 
+            value={languageConfig} 
+            onChange={handleLanguageChange}
+            style={{marginLeft: '10px', padding: '5px', borderRadius: '4px', border: '1px solid #ccc'}}
+          >
+            {LANGUAGE_OPTIONS.map(option => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      </div>
+      <CodeMirror ytext={ytext} awareness={awareness} languageConfig={languageConfig} />
     </div>
   );
 }

frontend/src/collaboration/hooks/useCollabEditor.ts

@@ -1,5 +1,5 @@
 // src/codemirroreditor.tsx
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState, useCallback} from 'react';
 import YPartyKitProvider from 'y-partykit/provider';
 import * as Y from 'yjs';
 import toast from 'react-hot-toast';
@@ -92,15 +92,32 @@ const handleUsersRemoved = (
   });
 };
 
+interface CollabEditorHook {
+  provider: YPartyKitProvider | null;
+  ytext: Y.Text | null;
+  awareness: any;
+  isReady: boolean;
+  languageConfig: string; // current selected language
+  setSharedLanguage: (newLang: string) => void;
+}
 
-export default function useCollabEditor({roomId}: {roomId: string}) {
+export default function useCollabEditor({roomId}: {roomId: string}): CollabEditorHook {
   const [isReady, setIsReady] = useState<boolean>(false);
+  const [languageConfig, setLanguageConfig] = useState<string>('python'); // Default to Python
+  const configMapRef = useRef<Y.Map<string> | null>(null);
   const ytextRef = useRef<Y.Text | null>(null);
   const providerRef = useRef<YPartyKitProvider | null>(null);
   const awarenessRef = useRef<any>(null);
   const isFirstChangeRef = useRef<boolean>(true);
   const userNamesRef = useRef<Map<number, string>>(new Map());
   const recentlyRemovedRef = useRef<Set<number>>(new Set());
+  
+  const setSharedLanguage = useCallback((newLang: string) => {
+    if (configMapRef.current) {
+      configMapRef.current.set('language', newLang);
+    }
+  }, []);
+
   const timeoutRefs = useRef(new Map<number, NodeJS.Timeout>());
 
   useEffect(() => {
@@ -124,6 +141,23 @@ export default function useCollabEditor({roomId}: {roomId: string}) {
     const ytext = provider.doc.getText('codemirror');
     ytextRef.current = ytext;
 
+    const configMap = provider.doc.getMap<string>('config');
+    configMapRef.current = configMap;
+
+    if (!configMap.get('language')) {
+      console.log('Setting default language: python');
+      configMap.set('language', 'python');
+    }
+    setLanguageConfig(configMap.get('language') || 'python');
+
+    const configMapHandler = () => {
+      const newLang = configMap.get('language') || 'python';
+      setLanguageConfig(newLang);
+      console.log('Shared language updated to:', newLang);
+    };
+
+    configMap.observe(configMapHandler);
+
     // Sets up user awareness
     const currUserId = provider.awareness.clientID;
     const username = getRandomName();
@@ -180,6 +214,7 @@ export default function useCollabEditor({roomId}: {roomId: string}) {
     return () => {
       console.log('Cleanup! destroying provider for room:', roomId);
 
+      configMap.unobserve(configMapHandler);
       provider.awareness.off('change', awarenessChangeHandler);
       userNamesRef.current.clear();
       recentlyRemovedRef.current.clear();
@@ -197,13 +232,16 @@ export default function useCollabEditor({roomId}: {roomId: string}) {
       providerRef.current = null;
       ytextRef.current = null;
       awarenessRef.current = null;
+      configMapRef.current = null;
     };
-  }, [roomId]);
+  }, [roomId, setSharedLanguage]);
 
   return {
     provider: providerRef.current,
     ytext: ytextRef.current,
     awareness: awarenessRef.current,
     isReady,
+    languageConfig,
+    setSharedLanguage,
   };
 }