OpenHands
OpenHands copied to clipboard
issue/4599-add cursor position information down inside the editor area.
End-user friendly description of the problem this fixes or functionality that this introduces
- [ ] Include this change in the Release Notes. If checked, you must provide an end-user friendly description for your change below
Give a summary of what the PR does, explaining any non-trivial design decisions
This PR add information of where the cursor is inside the editor area. The information goes like:
Row: 4, Column: 15
Here's the implementation:
I've made this change by only modifying
frontend/src/routes/_oh.app._index/code-editor-component.tsx
- State management: Use React's useState hook to create a state called cursorPosition that stores the position of the cursor (row and column numbers).
- Register events for cursor position changes: In the handleEditorDidMount callback, use Monaco Editor's onDidChangeCursorPosition event to monitor cursor position changes. When the cursor position changes, this code updates the cursorPosition state, storing the row and column numbers of the current cursor.
- Cursor Position Display: In the component's JSX return, the cursorPosition state is used to dynamically display the current cursor position.
Link of any specific issues this addresses source issue issue#4599