fix: correct stale toolbar button state on arrow key navigation#11191
fix: correct stale toolbar button state on arrow key navigation#11191DiegoCardoso wants to merge 1 commit intomainfrom
Conversation
Quill 2.0's selectionchange handler reads the selection before the browser commits the new cursor position, causing toolbar buttons to show the previous position's format. Work around this by deferring a corrective toolbar update via requestAnimationFrame on navigation keydown events. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
DiegoCardoso
force-pushed
the
fix/rte/active-state-issue
branch
from
d694ca2 to
2a32fc7
Compare
|
|
|
||
| // Force toolbar into stale state by updating with wrong range | ||
| // (simulates Quill 2.0 reading old selection on arrow key navigation) | ||
| toolbar.update({ index: 0, length: 1 }); |
There was a problem hiding this comment.
Why do we need to simulate this? Shouldn't this be observable just by using key presses?
| expect(boldBtn.part.contains('toolbar-button-pressed')).to.be.true; | ||
| expect(italicBtn.part.contains('toolbar-button-pressed')).to.be.false; | ||
|
|
||
| // Dispatch navigation keydown — our fix should correct the stale toolbar |
There was a problem hiding this comment.
Referencing "our fix" doesn't help with code comprehension in the future
| cancelAnimationFrame(this.__toolbarUpdateRaf); | ||
| this.__toolbarUpdateRaf = requestAnimationFrame(() => { |
There was a problem hiding this comment.
Having the __toolbarUpdateRaf property feels a bit over-engineered/unnecessary.
Even if the component gets disconnected on keydown (but before the raf executes), it doesn't seem to be an issue. If you want, you could check for this.isConnected inside the block.
The debouncing doesn't seem to bring value either since the raf typically executes before the next keydown event anyway.
4 participants
Summary
vaadin-rich-text-editorshowing the previous cursor position's format instead of the current one when navigating with arrow keysselectionchangefires before the browser commits the new cursor position, causinggetSelection()to return stale datakeydownlistener that defers a corrective toolbar update viarequestAnimationFramefor navigation keys (Arrow*,Home,End,PageUp,PageDown)Test plan
toolbar.test.jsverifies stale toolbar state is corrected on navigation keydownFixes #11184
🤖 Generated with Claude Code