PEER-234: Add line num extension

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

Author: SeeuSim

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

@@ -27,8 +27,17 @@ type EditorProps = {
 export const Editor = ({ room }: EditorProps) => {
   const { height } = useWindowSize();
   const [theme, setTheme] = useState<IEditorTheme>('vscodeDark');
-  const { editorRef, extensions, language, setLanguage, code, setCode, members, isLoading } =
-    useCollab(room);
+  const {
+    editorRef,
+    extensions,
+    language,
+    setLanguage,
+    code,
+    setCode,
+    cursorPosition,
+    members,
+    isLoading,
+  } = useCollab(room);
   const themePreset = useMemo(() => {
     return getTheme(theme);
   }, [theme]);
@@ -122,6 +131,11 @@ export const Editor = ({ room }: EditorProps) => {
           readOnly={isLoading}
           extensions={extensions}
         />
+        <div className='bg-secondary text-secondary-foreground z-10 flex w-full translate-y-[-0.5px] border-none py-1 text-xs'>
+          <span className='ml-auto mr-2'>
+            Ln {cursorPosition.lineNum}, Col {cursorPosition.colNum}
+          </span>
+        </div>
       </div>
     </div>
   );

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

@@ -1,3 +1,4 @@
+import { EditorView } from '@codemirror/view';
 import type { LanguageName } from '@uiw/codemirror-extensions-langs';
 import type { Extension, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -38,6 +39,7 @@ export const useCollab = (roomId: string) => {
   const [code, setCode] = useState('');
   const [language, _setLanguage] = useState<LanguageName>('python');
   const [members, _setMembers] = useState<Array<IYjsUserState['user']>>([]);
+  const [cursorPosition, setCursorPosition] = useState({ lineNum: 1, colNum: 0 });
   const setMembers = useCallback(_setMembers, [members]);
   const setLanguage = useCallback(
     (lang: LanguageName) => {
@@ -92,9 +94,19 @@ export const useCollab = (roomId: string) => {
       };
       awareness.setLocalStateField('user', userState);
 
+      const lNumExt = EditorView.updateListener.of((up) => {
+        if (up.selectionSet) {
+          const { head } = up.state.selection.main;
+          const curline = up.state.doc.lineAt(head);
+          const lineNum = Math.max(curline.number, 1);
+          const colNum = head - curline.from;
+          setCursorPosition({ lineNum, colNum });
+        }
+      });
+
       const collabExt = yCollab(yText, awareness, { undoManager });
       setCode(yText.toString());
-      setExtensions([...extensions, collabExt]);
+      setExtensions([...extensions, collabExt, lNumExt]);
 
       // Initialise room preferences
       const yState = doc.getMap('state');
@@ -127,5 +139,6 @@ export const useCollab = (roomId: string) => {
     setCode,
     members,
     isLoading,
+    cursorPosition,
   };
 };