Fix: Custom HTML block preview keeps expanding when iframe uses height:100vh

[hbhalodia]

What?

Closes #78539

Why?

• PR needs to fix the infinte expansion and scroll when custom HTML content is previewed with iframe that has 100vh height.

How?

• PR fixes the regex pattern which does not match the correctly for the units.

Testing Instructions

1. Add a Custom HTML block.
2. Click Edit HTML.
3. Add an iframe in the HTML tab. The iframe uses height:100vh:

<iframe src="https://www.photopea.com" style="width:100%; height:100vh; border:0;"></iframe>

4. Click Update.
5. After updating, the Custom HTML block preview becomes normal.

Testing Instructions for Keyboard

• None

Screenshots or screencast

Before

After

Screen.Recording.2026-05-26.at.3.46.56.PM.mov

Use of AI Tools

• GitHub Copilot with Claude Opus 4.6
• Used for debugging and fixing the issue. The fix was reviwed by me.

---

Detailed AI review

AI Summary Started

Root cause

The SandBox component (used by the Custom HTML block's preview) intentionally strips viewport-unit styles (vh, vw, etc.) from user-supplied HTML, because those units are relative to the iframe's own size and would otherwise create a measurement feedback loop.

That stripping is done by removeViewportStyles in packages/components/src/sandbox/index.tsx using this regex:

/^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/

The pattern contains a double backslash (\\d). In a regex literal \\d means "a literal backslash followed by the letter d" — not "a digit". So the regex never matches any real CSS value, including 100vh, and the strip step is effectively a no-op.

Why this causes unbounded expansion

When the user puts <iframe style="height:100vh"> inside the Custom HTML block:

1. The inline 100vh is not stripped (because of the broken regex).
2. Inside the sandbox iframe, that inner <iframe> resolves 100vh against the sandbox iframe's current height.
3. The sandbox's MutationObserver measures document.body.getBoundingClientRect() and posts the new height to the parent via postMessage.
4. The parent component sets the sandbox iframe's height attribute to that value.
5. The sandbox iframe is now taller → 100vh resolves to a larger value → body grows → observer fires → parent grows the iframe again → infinite loop.

That's what produces the "preview keeps expanding, editor becomes heavy, very tall scrollbar" behavior described in the issue.

Fix

Correct the regex (single backslash) and also accept decimal values like 50.5vh:

- /^\\d+(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/
+ /^\d+(?:\.\d+)?(vw|vh|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)$/

With this in place, 100vh is correctly identified and stripped before the first measurement, the feedback loop is broken, and the preview settles at a stable height.

Test steps

1. Add a Custom HTML block.
2. Paste: <iframe src="https://www.photopea.com" style="width:100%; height:100vh; border:0;"></iframe>
3. Click Preview.

Before: the block grows continuously, vertical scrollbar appears, editor becomes sluggish.
After: the preview renders at a stable, finite height with no runaway growth.

AI Summary Completed

---

Regex101 Test

Previous regex

Link - https://regex101.com/?regex=%5E%5C%5Cd%2B%28vw%7Cvh%7Csvw%7Clvw%7Cdvw%7Csvh%7Clvh%7Cdvh%7Cvi%7Csvi%7Clvi%7Cdvi%7Cvb%7Csvb%7Clvb%7Cdvb%7Cvmin%7Csvmin%7Clvmin%7Cdvmin%7Cvmax%7Csvmax%7Clvmax%7Cdvmax%29%24&testString=100vh%0A&flags=&flavor=pcre2&delimiter=%2F

New Regex

Link - https://regex101.com/?regex=%5E%5Cd%2B%28%3F%3A%5C.%5Cd%2B%29%3F%28vw%7Cvh%7Csvw%7Clvw%7Cdvw%7Csvh%7Clvh%7Cdvh%7Cvi%7Csvi%7Clvi%7Cdvi%7Cvb%7Csvb%7Clvb%7Cdvb%7Cvmin%7Csvmin%7Clvmin%7Cdvmin%7Cvmax%7Csvmax%7Clvmax%7Cdvmax%29%24%0A&testString=100vh%0A&flags=&flavor=pcre2&delimiter=%2F