Rich text: preserve multiple spaces on front-end #56280
Closed
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: +130 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
dmsnell
reviewed
Nov 19, 2023
|
|
||
| // When inserting multiple spaces, alternate between a normal space | ||
| // and a non-breaking space. This is to prevent browsers from | ||
| // collapsing multiple spaces into one. |
There was a problem hiding this comment.
yikes. this seems good, but dang - so hard to make an editor in the browser!
| Array.from( { length: endOffset - startOffset } ) | ||
| .map( ( _, index ) => ( index % 2 === 0 ? SP : NBSP ) ) | ||
| .join( '' ) + | ||
| text.slice( endOffset ); |
There was a problem hiding this comment.
would it make sense here to use a regular expression to handle this?
// Replace all successive spaces with an alternating pattern of space/nbsp.
newValue.text = newValue.replace( /[ \u00a0]+/g, match => ''.padStart( match.length, ' \u00a0' ) );There was a problem hiding this comment.
I don't think we want to be replacing all spaces. We shouldn't modify existing content too much imo, only the spaces around the selection.
|
Fixed by #56341 instead |
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.
What?
This PR fixes a long standing issue in RichText where multiple inserted spaces are not preserved on the front-end. They are collapsed into a single space.
Why?
What you see in the editor should be the same as the front-end. It's unexpected that spaces on the front-end are collapsed into a single space, after you explicitly inserted multiple.
How?
When inserting multiple space, we should alternate between normal spaces and non breaking spaces. This is the default behaviour in all browsers, but it's turned off in Gutenberg because we have
white-space: pre-wrapturned on for all rich text instances. We intentionally enabled this for stability, one of the reasons being that browsers insert the non breaking spaces a bit too much. For example, if you type two spaces, and remove one, you shouldn't be left with a non breaking space.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast