I am using the Quill editor in a React app, using react-quill.
On my app, the user can perform a search for a word in the editor and if it's found, I simply highlight the word using the Quill API formatText()
My app also uses the standard MUI dashboard with a left hand menu bar.
The problem I'm facing is this. After the user enters a word to search on, I then highlight the word(s) within the editor. However, when I collapse the menu using the hamburger menu icon, all of the highlighting is lost.
Here's the app with the menu open and words highlighted - using the Quill API formatText().
Upon collapsing the menu, the highlighting is lost...
I also notice this behaviour when the app is displayed on mobile phones and when the keyboard is dismissed - again losing all highlights.
Interestingly, if I do a before and after getContents(), the fomatting attributes are indeed lost at 'after'.
How do I preserve the formatting? and secondly, why does this happen?