add cursor position information down inside the editor area.

All-Hands-AI · Oct 30, 2024 · 11f11ff · 11f11ff
1 parent 572b3ad
commit 11f11ff
Showing 1 changed file with 31 additions and 16 deletions.
diff --git a/frontend/src/routes/_oh.app._index/code-editor-component.tsx b/frontend/src/routes/_oh.app._index/code-editor-component.tsx
@@ -1,5 +1,5 @@
 import { Editor, Monaco } from "@monaco-editor/react";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { VscCode } from "react-icons/vsc";
 import { type editor } from "monaco-editor";
@@ -22,6 +22,8 @@ function CodeEditorCompoonent({ isReadOnly }: CodeEditorCompoonentProps) {
     saveFileContent: saveNewFileContent,
   } = useFiles();
 
+  const [cursorPosition, setCursorPosition] = useState({ line: 1, column: 1 });
+
   const handleEditorDidMount = React.useCallback(
     (editor: editor.IStandaloneCodeEditor, monaco: Monaco): void => {
       monaco.editor.defineTheme("my-theme", {
@@ -34,6 +36,10 @@ function CodeEditorCompoonent({ isReadOnly }: CodeEditorCompoonentProps) {
       });
 
       monaco.editor.setTheme("my-theme");
+
+      editor.onDidChangeCursorPosition((e) => {
+        setCursorPosition({ line: e.position.lineNumber, column: e.position.column });
+      });
     },
     [],
   );
@@ -62,7 +68,7 @@ function CodeEditorCompoonent({ isReadOnly }: CodeEditorCompoonentProps) {
     return () => {
       document.removeEventListener("keydown", handleSave);
     };
-  }, [saveNewFileContent]);
+  }, [saveNewFileContent, selectedPath]);
 
   if (!selectedPath) {
     return (
@@ -77,20 +83,29 @@ function CodeEditorCompoonent({ isReadOnly }: CodeEditorCompoonentProps) {
   }
 
   return (
-    <Editor
-      data-testid="code-editor"
-      height="100%"
-      path={selectedPath ?? undefined}
-      defaultValue=""
-      value={
-        selectedPath
-          ? modifiedFiles[selectedPath] || files[selectedPath]
-          : undefined
-      }
-      onMount={handleEditorDidMount}
-      onChange={handleEditorChange}
-      options={{ readOnly: isReadOnly }}
-    />
+    <div className="flex grow flex-col h-full w-full">
+      {/* Ensure that the editor takes up the maximum amount of space in the parent container */}
+      <div className="flex-grow min-h-0">
+        <Editor
+          data-testid="code-editor"
+          height="100%"
+          path={selectedPath ?? undefined}
+          defaultValue=""
+          value={
+            selectedPath
+              ? modifiedFiles[selectedPath] || files[selectedPath]
+              : undefined
+          }
+          onMount={handleEditorDidMount}
+          onChange={handleEditorChange}
+          options={{ readOnly: isReadOnly }}
+        />
+      </div>
+      {/* cursor position information */}
+      <div className="p-2 text-neutral-500 flex-shrink-0">
+        Row: {cursorPosition.line}, Column: {cursorPosition.column}
+      </div>
+    </div>
   );
 }