react-froala-wysiwyg icon indicating copy to clipboard operation
react-froala-wysiwyg copied to clipboard

Published 20 hours ago • verified publisher icon froala

More text > Inline Classes issue - if any inline class is deselected, "&ZeroWidthSpace" is appended and wraps the content

Open iamdarshshah opened this issue 3 years ago • 0 comments

Issue:

Any inline class that is deselected adds &ZeroWidthSpace to the parent html element and wraps the content. As a result, if we select the entire text element, it will be treated as a new element, and the inline class state will be lost, meaning we won't be able to see what other inline classes have been selected for this text element.

Steps to reproduce:

  1. Go to https://froala.com/wysiwyg-editor/
  2. Remove all of the editor's content.
  3. type anything within the editor for ex: test description
  4. Select the text you've written (ctrl + A or cmd + a), Add inline class(es) (code, highlight, transparent)
  5. Then, using ctrl + A or cmd + a, select the text again and deselect any inline classes that are active for that element.
  6. Using the chrome inspector tool, inspect the element on the DOM. You'll notice that the html entity '&ZeroWidthSpace' has been appended.

Refer to the attached video to replicate the same scenario.

Please let me know if anyone has encountered this problem before and could assist me in resolving it, or if there is a workaround to get rid of the &ZeroWidthSpace appended to the DOM. Any assistance will be greatly appreciated.

Screen recording

https://vimeo.com/user166776844/review/677595234/e457385c87

iamdarshshah avatar Feb 15 '22 08:02 iamdarshshah