Skip to content

Resolve #3508575 Preview positions are out of sync

Jesse Bakerrequested to merge
issue/experience_builder-3508575:3508575-preview-positions-are into 0.x

Closes #3508575

I did a bit of a delve to reach the bottom of this

useSyncIframeHeightToContent Hook

Uses both resize observer and mutation observer

Used in: Viewport.tsx - Watches both the resize and mutation events of the contents of the iFrame and resizes the preview Iframe to match the content. This in turn triggers the resize observer in ViewportOverlay.tsx

useResizeObserver Hook

Only uses resize observer (as implied by the name 😅 )

Used in: ViewportOverlay.tsx - Watches the resize event of the iframe itself and on resize updates the size of the portal that the overlay is rendered into. Doesn't need mutation observer because that's already handled in the Viewport.tsx which updates the iFrame's height based on a mutation observer as described above.

useSyncPreviewElementSize Hook

Previously was only resize observer, but as @balintbrews pointed out, this should also watch mutations to ensure the size it returns is always correct.
Used in:

  • RegionOverlay.tsx
  • ComponentOverlay.tsx
  • SlotOverlay.tsx

useSyncElementSize Hook

Not used any more. If I remember this was originally used to do what useSyncPreviewElementSize does now before the Overlay concept was implemented. It has/had both a resize and mutation observer. In the process of refactoring it into useSyncPreviewElementSize, I did not port across the mutation observer capability of this hook.

Merge request reports