Quill: Bold, italics, underline formatting undo doesn't work when content is selected in a certain way

Created on 28 Jun 2017  ·  7Comments  ·  Source: quilljs/quill

If we selected a chunk of text, spanning across a <p> and a <pre>, and make them bold using the "B" button or by using Command + B, and if we press "B" again to undo the bold, this undo fails.

Steps for Reproduction

  1. Visit [quilljs.com]
  2. Notice the code block below "Getting Started Easy" section.
  3. Write something between this code block, and "Built with" heading.
  4. Drag your mouse cursor to make selection across some of the code block, and the new text we just wrote.
  5. Click on "B" to make the text bold. This works fine. Click on "B" again to un-bolden the text.

Expected behavior:
The newly written text should have been un-boldened.

Actual behavior:
The newly written text fails to get un-boldened.

Platforms:
Chrome 59.0.3071.115, Mac OS Sierra 10.12.5

Version:
1.2.6

bug

Most helpful comment

最近开发项目,发现斜体并不起作用

All 7 comments

Not sure about the solution yet but the reason this happens is because when there is a range of text, some bold some not, clicking "B" should bold the entire range. Only in the case where the entire range is bolded, does clicking "B" unbold the range. This UX is consistent with most editors like Word or Docs.

The issue comes in because code cannot be bolded. So it will never be the case where the is a range where code is involved and unbolding will work.

Based on the feedback I've received from the users, people expect that whatever was bolded on clicking "B", to be unbolded by clicking on it again, which makes sense, since the button is a toggle. Would be good to know the opinion of other people here as well.

If I have "Hello world" and highlight both words and click B, I expect "world" to be bolded. If I click B again, I expect both Hello and world to be unbolded. As I mentioned this is the behavior of Word and Docs.

@jhchen You're right, but the unbolded part is something that doesn't happen in this case. I understood what you meant about certain types that don't support bold, because of this it never reaches the "100% bold" text selection, which in turn prevents the unbolding on second Bold toggle.
I'm poring through to codebase to see if this can be improved anyhow.

FWIW here's a GIF:

And the workaround:

最近开发项目,发现斜体并不起作用

Was this page helpful?
0 / 5 - 0 ratings