Resolving the cursor jumping in the Editor bug #2976
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ouncing to frontend (better changeset later after testing)
Contributor
🗄️ Schema Change: No Changes ✅ |
Contributor
|
Size Change: -46 B (-0.01%) Total Size: 497 kB
ℹ️ View Unchanged
|
Contributor
🛠️ Item Splitting: No Changes ✅ |
Contributor
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (fe186b4) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR2976If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR2976If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR2976 |
github-actions
bot
added
schema-change
SonicScrewdriver
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR fixes the long-standing cursor jumping issue in Article and Exercise editors by moving the debouncing from the Perseus Editors to the upstream editors.
Issue
Issue: LEMS-3152
When users type quickly, the cursor jumps to the end of text fields. This happens because the frontend immediately updates state and passes content back to Perseus as props, creating a circular update cycle that loses cursor position.
Solution
Moved the debounce/timeout from Perseus to the Frontend's handling of Perseus onChange events, which should break the circular update cycle and prevent the cursor from jumping forward unexpectedly when typing quickly.
Future Work
A more comprehensive solution could add dedicated APIs (
insertImage(),setContent()) for content updates, ideally eliminating the need for prop-state synchronization at all.Suggested update for anyone using Perseus Editors⚠️
External Perseus consumers will likely need to debounce/throttle their
onChangehandlers to avoid performance issues and cursor jumping. Previously Perseus handled this internally with a 200ms delay (apiOptions.editorChangeDelay), but my testing has indicated that a 50ms delay is sufficient on the Perseus consumer side. However, we don't believe there are currently any external consumers of the Perseus Editors - so the impact is possibly negligible. I will make sure to notify any partners, but we should be safe to go!Test plan: