onModelChange callback not working when using FroalaEditorComponent inside react web component with shadow root

[ghost]

I have a react web component with shadow root, when I open the froala editor inside it by initializing editor FroalaEditorComponent everything works except for onModelChange function , this function does not return in model. it is always undefined.

[os-lmo]

I am also facing the same issue.
I know that, using the fullPage prop, we can overcome this issue. But, in that case, some other features will not work properly like popover position

[Amit-Milli]

Any update on this? this is very crucial for us!! When I use fullPage boolean prop as true all the css that we have written already gets affected. how can we make froala editor work seamlessly inside a shadowDOM?

[ghost]

Any update on this? This is hurting us real bad.

[ghost]

I am also facing the same issue. I know that, using the fullPage prop, we can overcome this issue. But, in that case, some other features will not work properly like popover position

Were you able to find a solution for this?

[loganvolkers]

It looks like Froala may not support being rendered in a Shadow Root. Here's a small self-contained minimal example that shows it not working as expected: https://jsfiddle.net/m2z4ys8a/1/

This shows that this exists in the core library, and isn't limited to the React wrapper.

[ilyaskarim]

Support for Shadow DOM in the WYSIWYG editors is limited, and it may lead to unexpected behavior and styling issues, as you have experienced. While loading the required styles in your app is a step in the right direction, there are certain limitations when it comes to the proper functioning of the editor within the Shadow DOM environment.
For that reason, Froala strongly recommend enabling the iframe/fullPage option to avoid unwanted conflicts in the editor functionality when working inside a shadow DOM element.
Froala users are welcome to submit requests regarding their issues with iframe/fullPage, and we will provide solutions for them: https://froala.com/wysiwyg-editor/contact/

[emilianionascu]

Same issue here as well. What is it that prevents Froala from working properly in a Shadow DOM?

[hectordvv]

Enabling full page on editor worked for me.