fix: In MonacoEditor the caret jumps to the start

[katsyuta]

Closes #228

When the user types text, a is triggered a code to update the note text. After the note updates, the Monaco editor compares its own current editor content with the updated note text — if they differ, setValue is called to update editor content.

On Ubuntu, the note text was sometimes one character behind the editor content. This caused editor content updates to be called unnecessarily, which reset the cursor position. It is unclear why this happens on Ubuntu but not on other systems.

The fix was to replace useEffect with useLayoutEffect. It runs after React has applied the state change, but before the browser has painted the frame. At that point the browser is blocked and no new input events can arrive — the note text is to be up to date.

Fix:

monaco.mp4

Bug:

monaco_bug_2.mp4

Summary by CodeRabbit

• Bug Fixes
  • Enhanced the Monaco editor's value synchronization mechanism to execute at the proper timing phase during the rendering cycle and only respond when the editor's value actually changes. This resolves timing inconsistencies, eliminates unnecessary operations, and ensures the editor maintains consistent and correct state throughout all value updates and user interactions.

[coderabbitai]

📝 Walkthrough

Walkthrough

The Monaco editor's value synchronization was refactored from a useEffect without an explicit dependency array to a useLayoutEffect with a value dependency. This ensures the editor's setValue logic executes during the layout phase and only when the value prop changes, preventing unintended caret position shifts during editing.

Changes

Cohort / File(s)	Summary
Monaco Editor Value Sync packages/app/src/features/MonakoEditor/MonacoEditor.tsx	Moved value synchronization from useEffect to useLayoutEffect with explicit value dependency to fix caret jumping to start position during editing.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• fix: Note is sometimes updates while opening #268: Related through editor synchronization handling — that PR filters programmatic updates to prevent treating synced changes as user edits, complementing this PR's timing fix.

Suggested reviewers

• vitonsky

Poem

🐰✨ The caret dances, no more a leap,
Layout timing runs deep,
When value changes, we synchronize right,
No more jumping to start—the editor shines bright! 🎯

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main bug fix: preventing the caret from jumping to the start of the line in MonacoEditor, which directly matches the changeset's purpose.
Linked Issues check	✅ Passed	The code change directly addresses issue #228 by replacing useEffect with useLayoutEffect to prevent caret position loss during editor sync, ensuring the note text is up-to-date before setValue is called.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the caret jump issue in MonacoEditor; no unrelated modifications or out-of-scope changes are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[katsyuta]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.

[katsyuta]

@coderabbitai full review

[coderabbitai]

✅ Actions performed

Full review triggered.