zenoamaro / react-quill

A Quill component for React.
https://zenoamaro.github.io/react-quill
MIT License
6.78k stars 923 forks source link

Editor removing <strong> tags on paste if there is a font-weight for <strong> tags defined in SCSS #992

Open raytri opened 3 months ago

raytri commented 3 months ago

When pasting text within or between a Quill editor, <strong> tags are stripped out IF the app's SCSS defines a font-weight for <strong> tags.

Example below. Steps to reproduce:

  1. Note that in app.scss, strong tags are given a font-weight of 500.
  2. In the editor do the following:
  3. Enter some text and make it bold. Note that the text turns semibold.
  4. Cut and paste it back into the editor. Note that the bold is removed. If you inspect the editor, you'll see that the <strong> tags were removed on paste.
  5. In app.scss, remove the font-weight styling.
  6. Make some text bold again. Note that the text turns default bold.
  7. Cut and paste the text back into the editor. Note that the bold styling pastes successfully.

[template]: Link to codesandbox showing the issue

Ticket due diligence

ReactQuill version

FAQ

Is this a bug in Quill or ReactQuill?

ReactQuill is just a ~thin~ wrapper on top of the Quill editor. Often, what looks like a bug in ReactQuill, is actually a bug in the Quill editor itself. Before opening a ticket, please check the [Quill documentation], and the [issues page], and see if that answers your question first.

[Quill documentation]: https://quilljs.com/docs

[issues page]: https://github.com/quilljs/quill/issues

How do I access the wrapped Quill instance?

See the [instance methods] and [API] documentation.

[instance methods]: https://github.com/zenoamaro/react-quill#methods

[API]: https://github.com/zenoamaro/react-quill#api-reference