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?