diff --git a/frontend/src/components/features/editor/code-editor-component.tsx b/frontend/src/components/features/editor/code-editor-component.tsx index 673010b8b1..cc7e402480 100644 --- a/frontend/src/components/features/editor/code-editor-component.tsx +++ b/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 ( - +
+
+ +
+
+ Row: {cursorPosition.line}, Column: {cursorPosition.column} +
+
); } diff --git a/frontend/src/routes/_oh.app._index/route.tsx b/frontend/src/routes/_oh.app._index/route.tsx index 1a8528f61a..cf2fdb59da 100644 --- a/frontend/src/routes/_oh.app._index/route.tsx +++ b/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(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() {