search

froala / react-froala-wysiwyg

React component for Froala WYSIWYG HTML Rich Text Editor.
https://froala.com/wysiwyg-editor
563 stars 129 forks source link

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

Open ghost opened 11 months ago

ghost commented 11 months ago

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 commented 11 months ago

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 commented 9 months ago

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 commented 8 months ago

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

ghost commented 8 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

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

hectordvv commented 1 month ago

Enabling full page on editor worked for me. image