Scroll Behavior Issue in Froala Editor with Iframe in Shadow DOM

[vijay-gnanasekaran]

Description:

We are currently implementing the Froala Editor in a React application, utilizing the Iframe option within a Shadow DOM. We have encountered a persistent issue with the scroll behaviour when content is deleted. This issue is affecting the user experience and impeding our workflow.

We are currently utilizing an enterprise-paid account(Freshworks) and would greatly appreciate it if this issue could be resolved at your earliest convenience.

Expected Behaviour:

When content is deleted in the Froala Editor while in Iframe mode, the scroll position should remain unchanged. The editor should maintain the current scroll state, allowing users to continue editing without the need to manually adjust the scroll position.

Actual Behaviour:

When deleting content located below the current scroll position in the Froala Editor (Iframe mode), the scroll unexpectedly jumps to the top of the editor. This forces the user to scroll down again to continue editing or deleting content manually.

Steps to Reproduce:

• Embed the Froala Editor within an Iframe inside a Shadow DOM.
• Add content to the editor such that there is both content above and below the visible scroll area.
• Delete content located below the current scroll position.
• Observe that the scroll position resets to the top of the Iframe rather than staying in place.

Editor Version:

v4.3.1 (Latest)

Environment:

• Froala Editor in Iframe mode within a Shadow DOM.

Additional Information:

This issue occurs consistently and significantly impacts the user experience. It requires users to manually adjust the scroll position after each deletion, which disrupts the editing process.

Others have previously reported similar issues, but they do not appear to have been addressed.

#4599 , #4567 , #4733 , #3361

As this issue is a blocker for our project, we kindly request an urgent resolution.

Recording

Screen.Recording.2024-12-16.at.11.26.12.AM.mov