I'm using Tinymce in a Salesforce lightning web component. I have Lightning Web Security turned on, which allows Tinymce to run correctly.
I found a very strange bug however where Tinymce will only initialize correctly if I have certain chrome extensions turned on. I narrowed it down to a 2 extensions: Dark Reader and Ad Block Plus on Chrome. If EITHER one of those is on, then the component works perfectly. If I turn off both extensions, the component does not load correctly.
This is how it looks with EITHER extension enabled: here
And this is how it looks when both extensions are disabled: here
I did some debugging through the network tab in Chrome and noticed in the first image, when the extension loads correctly, it will load skin.min.css and skin.shadowdom.min.css. It will then load content.min.css from this location: tinymce/skins/ui/oxide/content.min.css and content.min.css from this location: tinymce/skins/content/default/content.min.css
In the second image, with both extensions disabled, it stops loading anything after skin.min.css.
I also noticed the tinymce.init function is a Promise. In the first image (with either extension enabled), the promise is sucessfully fufilled. In the second image, the promise is infinitely pending.
I do not know what the difference is when either of these extensions is enabled but I am not sure how to proceed debugging this now.
Any help is appreciated!
UPDATE: I determined it was this one line in the manifest.json of adblock plus
"all_frames" : true,
It seems this injects the extension into the iframe that tinymce loads, and somehow this makes tinymce able to initialize. If anyone has more insight I'd appreciate it.