issue/4599-Add cursor position information on the bottom of the editor area (#5379)

frontend/src/components/features/editor/code-editor-component.tsx

@@ -9,11 +9,13 @@ import { useSaveFile } from "#/hooks/mutation/use-save-file";
 interface CodeEditorComponentProps {
   onMount: EditorProps["onMount"];
   isReadOnly: boolean;
+  cursorPosition: { line: number; column: number };
 }
 
 function CodeEditorComponent({
   onMount,
   isReadOnly,
+  cursorPosition,
 }: CodeEditorComponentProps) {
   const { t } = useTranslation();
   const {
@@ -100,15 +102,22 @@ function CodeEditorComponent({
   }
 
   return (
-    <Editor
-      data-testid="code-editor"
-      path={selectedPath ?? undefined}
-      defaultValue=""
-      value={selectedPath ? fileContent : undefined}
-      onMount={onMount}
-      onChange={handleEditorChange}
-      options={{ readOnly: isReadOnly }}
-    />
+    <div className="flex flex-col h-full w-full">
+      <div className="flex-grow min-h-0 relative">
+        <Editor
+          data-testid="code-editor"
+          path={selectedPath ?? undefined}
+          defaultValue=""
+          value={selectedPath ? fileContent : undefined}
+          onMount={onMount}
+          onChange={handleEditorChange}
+          options={{ readOnly: isReadOnly }}
+        />
+      </div>
+      <div className="p-2 text-neutral-500 flex-shrink-0 absolute bottom-1">
+        Row: {cursorPosition.line}, Column: {cursorPosition.column}
+      </div>
+    </div>
   );
 }
 

frontend/src/routes/_oh.app._index/route.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useRouteError } from "react-router";
 import { editor } from "monaco-editor";
@@ -32,6 +32,7 @@ function CodeEditor() {
   } = useFiles();
 
   const [fileExplorerIsOpen, setFileExplorerIsOpen] = React.useState(true);
+  const [cursorPosition, setCursorPosition] = useState({ line: 1, column: 1 });
   const editorRef = React.useRef<editor.IStandaloneCodeEditor | null>(null);
 
   const { mutate: saveFile } = useSaveFile();
@@ -53,6 +54,13 @@ function CodeEditor() {
       },
     });
     monaco.editor.setTheme("oh-dark");
+
+    e.onDidChangeCursorPosition((ee) => {
+      setCursorPosition({
+        line: ee.position.lineNumber,
+        column: ee.position.column,
+      });
+    });
   };
 
   const agentState = useSelector(
@@ -103,6 +111,7 @@ function CodeEditor() {
         <CodeEditorComponent
           onMount={handleEditorDidMount}
           isReadOnly={!isEditingAllowed}
+          cursorPosition={cursorPosition}
         />
       </div>
     </div>