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

Highlighted formatting in the toolbar doesn't match MCE inline boundaries #11091

Closed
talldan opened this issue Oct 26, 2018 · 7 comments · Fixed by #13697
Closed

Highlighted formatting in the toolbar doesn't match MCE inline boundaries #11091

talldan opened this issue Oct 26, 2018 · 7 comments · Fixed by #13697
Labels
[Package] Rich text /packages/rich-text [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Milestone

Comments

@talldan
Copy link
Contributor

talldan commented Oct 26, 2018

Duplicates: #11326, #13087.

Describe the bug
There's a minor inconsistency with the formatting toolbar and TinyMCE's inline boundaries (used to highlight formatted text).

When the caret is positioned on the left side of formatted text, within the inline boundary, the toolbar button for the active formatting is correctly shown toggled on:
screen shot 2018-10-26 at 4 05 40 pm

Pressing the left arrow key once to move the caret outside of the inline boundary, the format is incorrectly still shown toggled on:
screen shot 2018-10-26 at 3 57 50 pm

Positioning the caret on the right side of formatted text, back within the inline boundary, the toolbar button is incorrectly toggled off:
screen shot 2018-10-26 at 3 52 46 pm

To Reproduce
Steps to reproduce the behavior:

  1. Add formatted text (bold/italic/strikethrough/link) to a paragraph block.
  2. Position the caret on the left of the formatted text within the inline boundary.
  3. Move the mouse to display the toolbar and observe that formatting is toggled on correctly.
  4. Press the left arrow key once to move outside of the inline boundary.
  5. Move the mouse to display the toolbar and observe that formatting is incorrectly toggled on.
  6. Position the caret on the right of the formatted text within the inline boundary.
  7. Move the mouse to display the toolbar and observe that formatting is incorrectly toggled off.

Expected behavior
The toggle state of toolbar formats should match the position of the caret.

Additional context

@talldan talldan added [Type] Bug An existing feature does not function as intended [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Oct 26, 2018
@talldan
Copy link
Contributor Author

talldan commented Oct 26, 2018

@iseulde - I've noticed this issue, but not sure what the best way to solve it is. Let me know if you have any ideas.

@ellatrix
Copy link
Member

@talldan What's the behaviour in TinyMCE?

@talldan
Copy link
Contributor Author

talldan commented Nov 1, 2018

Hi @iseulde, It's a bit inconsistent in classic. It works as I would expect for links. The format is shown toggled on in the toolbar if the caret is on either the left or right side of the formatted text.

With bold, italics and strikethrough, it's the opposite to what we have in Gutenberg, at the end of the formatting the toolbar button is shown toggled on, but at the start it's toggled off.

classic

@ellatrix
Copy link
Member

ellatrix commented Nov 1, 2018

@talldan Thanks! I think this would be good to address in #11322. Not sure if we can do it earlier than that.

@talldan
Copy link
Contributor Author

talldan commented Nov 1, 2018

@iseulde Seems sensible.

@gziolo
Copy link
Member

gziolo commented Nov 1, 2018

I noticed a similar issue in 4.2-RC. Originally reported in #11326.

To Reproduce
Steps to reproduce the behavior:

  1. Add new block containing RichText control (Paragraph, List, etc)
  2. Write any text.
  3. Select some text and make it bold (or italic, underline, whatever).
  4. Move the cursor at the end of selection.
  5. You will notice that the block toolbar no longer highlights applied formater and it hides after a brief time.
  6. When you continue typing from the end of the selection, format will continue to be applied.
  7. No move the cursor to the beginning of the selection. Actually one keypress before.
  8. UI shows that format option is still selected and toolbar can be see.
  9. When you start typing you don't see format applied but UI tells something else.

Expected behavior
Formats should be properly applied with the proper visual state of Block Toolbar controls.

Screenshots
typing at the end of selection

Desktop:

  • OS: macOS
  • Browser: Chrome
  • Version: the latest

@gziolo gziolo added the [Type] Regression Related to a regression in the latest release label Nov 1, 2018
@ellatrix
Copy link
Member

This needs to be addressed in #11322. In other words, we need to make the rich text value boundary-aware.

This was referenced Apr 30, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Rich text /packages/rich-text [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended [Type] Regression Related to a regression in the latest release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants