Pages Editor hydration warnings caused by pre-hydration DOM changes on placeholders and component elements

[Suman-Bharati]

Describe the Bug
We are seeing hydration warnings in Pages Editor because the editor’s JavaScript modifies the DOM before React hydration completes. We have identified three related cases where this happens:

Surface 1 — sc-jss-empty-placeholder wrapper (no app-side workaround)
When an empty placeholder is rendered, the SDK-generated sc-jss-empty-placeholder div receives style="cursor:pointer" from Pages Editor before hydration. Because this element is created internally by the SDK, app code cannot add suppressHydrationWarning to it.

Surface 2 — PlaceholderMetadata <code> elements (no app-side workaround)
The <code> elements rendered by PlaceholderMetadata appear to receive the same Pages Editor DOM injection. These are also SDK-internal and cannot be handled from app code.

Surface 3 — component root elements (app-side workaround exists)
Rendered Sitecore component root elements also receive DOM changes such as cursor:pointer and tabindex="0" from Pages Editor before hydration. App code can work around this with suppressHydrationWarning={isEditing} on the component root wrapper, but this requires adding the same pattern manually across components.

All three cases appear to share the same root cause: Pages Editor modifies the DOM before React hydration completes.

To Reproduce

• Open a page in Pages Editor
• Render a layout with at least one empty placeholder or empty grid column
• Render any component on the page
• Check the browser console
• Observe hydration warnings related to sc-jss-empty-placeholder, PlaceholderMetadata elements, or component root elements

Expected Behavior
No hydration warnings should appear in Pages Editor for SDK-rendered elements or component root elements that are being modified by Pages Editor before hydration completes.

Possible Fix
Please review how the SDK and Pages Editor handle these editing-mode DOM updates before hydration. One possible direction could be adding suppressHydrationWarning to SDK-generated editing-mode elements such as sc-jss-empty-placeholder and PlaceholderMetadata wrappers. Another possible direction could be reducing or deferring the editor-side DOM changes until after React hydration completes. I wanted to keep this open in case there is a better SDK-side or editor-side solution.

Provide environment information

• Sitecore Version: SitecoreAI Pages Editor
• Content SDK Version: @sitecore-content-sdk/nextjs 1.4.1
• Browser Name and version: Google Chrome 147.0.7727.102 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 11, Desktop
• Link to your project (if available): Private internal project, not publicly shareable

[art-alexeyenko]

Thank you for registering tis @Suman-Bharati
The issue you describe should've been addressed by #339 - however this doesn't seem to be the case.
So I've put this bug into our backlog for re-testing and re-evaluation.