OpenHands icon indicating copy to clipboard operation
OpenHands copied to clipboard

issue/4599-add cursor position information down inside the editor area.

Open STF-Zero opened this issue 1 year ago • 0 comments

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: image

I've made this change by only modifying

frontend/src/routes/_oh.app._index/code-editor-component.tsx

  1. State management: Use React's useState hook to create a state called cursorPosition that stores the position of the cursor (row and column numbers).
  2. 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. image
  3. Cursor Position Display: In the component's JSX return, the cursorPosition state is used to dynamically display the current cursor position. image

Link of any specific issues this addresses source issue issue#4599

STF-Zero avatar Oct 30 '24 02:10 STF-Zero