Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

STF-Zero
Copy link

@STF-Zero STF-Zero commented Oct 30, 2024

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 STF-Zero closed this Oct 30, 2024
@STF-Zero STF-Zero changed the title add cursor position information down inside the editor area. issue/4599-add cursor position information down inside the editor area. Oct 30, 2024
@STF-Zero STF-Zero reopened this Oct 30, 2024
Copy link
Collaborator

@rbren rbren left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the improvement!

@xingyaoww xingyaoww enabled auto-merge (squash) October 30, 2024 15:36
auto-merge was automatically disabled October 31, 2024 01:56

Head branch was pushed to by a user without write access

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants