Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: absorb format boundaries into RichText toTree #11322

Closed
wants to merge 19 commits into from

Conversation

ellatrix
Copy link
Member

@ellatrix ellatrix commented Oct 31, 2018

Description

Related: #13153, #12973, #12978, #11091, #12966, #11178, #11276, #11743.

This PR adds boundary logic to the Rich Text package.

How is it done? Zero width non breaking spaces are being added in front of the text inside the format element, and in front of the text after the format element. These are used the trick the browser to move the caret next to them. This basic addition already fully enables inserting text in any position. Of course the zero width characters are only added to the editable tree, not the saved one.

Next, we look at the deepest selected format, which receives a class to style the selected element. To know the selected format, the state must have some additional information about which format is selected at a certain index. We need add an extra property to the value selectedFormat: 0 for outside, 1 for inside the first format, 2 for inside the second format, if any, etc. This information is derived from the DOM during create.

To do:

  • Add getActiveFormat unit tests.
  • Add boundary e2e tests.
  • Fix failing e2e tests.

How has this been tested?

Screenshots

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.

@ellatrix ellatrix added [Status] In Progress Tracking issues with work in progress [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable labels Oct 31, 2018
@gziolo gziolo added this to the 4.4 milestone Nov 5, 2018
@youknowriad youknowriad modified the milestones: 4.4, 4.5 Nov 15, 2018
@gziolo gziolo removed this from the 4.5 milestone Nov 19, 2018
@gziolo
Copy link
Member

gziolo commented Nov 19, 2018

It's still in progress, I'm removing it from 4.5 milestone.

@ellatrix ellatrix added the [Package] Rich text /packages/rich-text label Jan 30, 2019
@ellatrix ellatrix added this to the 5.1 (Gutenberg) milestone Jan 30, 2019
@youknowriad
Copy link
Contributor

First impressions: It seems to work fairly well.

Bug encountered for now: "Backspacing at the beginning of a paragraph with a format applied" don't merge blocks.

@youknowriad
Copy link
Contributor

Another small bug but I believe this one is also an existing bug in master:

  • Try activating a format (italic) and start writing, the button is not set as active even if it is because if you start writing, it's indeed italic.
  • Try activating two formats and start writing, only the last one is applied.

@ellatrix
Copy link
Member Author

ellatrix commented Feb 6, 2019

Closing in favour of #13697.

@ellatrix ellatrix closed this Feb 6, 2019
@ellatrix ellatrix deleted the try/format-boundaries branch February 6, 2019 13:31
@ellatrix
Copy link
Member Author

ellatrix commented Feb 6, 2019

@youknowriad That last issue you're describing is currently an issue as well I think. See #11743.

@gziolo gziolo removed the [Status] In Progress Tracking issues with work in progress label Feb 7, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Package] Rich text /packages/rich-text
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants