Writing flow: fix horizontal caret placing for empty editable with placeholder #30463
Conversation
This file contains 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
|
Size Change: +103 B (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
7 tasks
|
Nice! This manually tests well for me, I also verified that this calculation is only run on the edges of a text range vs on any key press. It does look like there's spec failing in paragraphnav.mp4 |
ellatrix
commented
Apr 1, 2021
| @@ -12,6 +12,7 @@ export default function QueryPaginationNextEdit( { | |||
| <PlainText | |||
| __experimentalVersion={ 2 } | |||
| tagName="a" | |||
| style={ { display: 'inline-block' } } | |||
There was a problem hiding this comment.
Not really related, but saw this when running full site editor e2e tests. Looks like the warnings are ignored so let's log an error instead.
|
E2e test should pass now. |
gwwar
approved these changes
Apr 2, 2021
| @@ -305,6 +305,8 @@ export function toTree( { | |||
| // selection. The placeholder is also not editable after | |||
| // all. | |||
| contenteditable: 'false', | |||
| style: | |||
| 'pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;', | |||
There was a problem hiding this comment.
Never ran into user-select before, TIL.
There was a problem hiding this comment.
Yeah, everything selection related is a bit obscure
7 tasks
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.
Description
Attempts to fix #30393 (comment).
Horizontal caret placement at content editable edges by the writing flow component does not work as expected when there is a placeholder. Currently we let the browser select the field's content (which includes the placeholder) and then collapse the selection either to the start or end. This seems a bit problematic since the caret can end up after the placeholder, which is technically possible, but shouldn't be allowed. The caret cannot be placed there unless programmatically done so.
To resolve the issue, I've changed
placeCaretAtHorizontalEdgeto use the same technique asisEdgeandplaceCaretAtVerticalEdgewhich is to let the browser create aRangethat is closest to a certain point. This will completely ignore the placeholder (which is non editable and disables pointer events).How has this been tested?
Create a new post. Focus the title field. Press three times Enter and two times ArrowLeft. The caret should be in the first paragraph block.
Screenshots
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).