enh: arrow keys navigation improvements #1273
Closed
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.
Requirements: #1264 (range selection on component. Full PR, not the merged part)
It is now possible to navigate through and edit (with other my PR's) content using only the keyboard (honestly, almost, if we are talking about not using the mouse at all, but it is a good step).
When component is selected:
←, ↑: select end of the previous node
→, ↓: select start of the next node
A custom handler for arrow keys mainly solves the problem with jumping over components when the selection is on the component positioned before/after them (depending on the offset direction).
The next step may be to further improve the navigation for ↑ and ↓ keys, that will allow navigating between "inline" blocks sections (same as I've done for table rows), e.g. for components (images, video) positioned on a single "line". Right now, I don't know how to implement the fully unified solution to determine the layout, and it also sounds like a crazy idea to replicate the default browser content layout system. For components, for instance, we can use their
__se__
classes to define the layout, but it is not universal.@JiHong88 maybe you know a better solution? Maybe some
css
adjustments to components classes or other html layout that will lead to intuitive default arrow keys behavior and prevent components elements skipping. If so, just the component selection code inonKeyUp_wysiwyg
may be sufficient (but, yeah, it won't be so responsive for key holding, which, on the other hand, may not be so crucial).Also, we have to note that
audio
components are "skipped/jumped over" on default arrow key carriage move from text node, so we will need some workaround here, maybe we should add some tricky hidden child toaudio
figure
element to provoke focus on it. <---- Add this to issues after (if) the PR acceptance.