Support iframe embeds in rich-text editor
What does this MR do and why?
TODO: rewrite commit messages into a coherent MR description, add before/afters.
Stacked MR on top of Refactor media resize into shared mixin and fix... (!231411).
Fixes Support iframe embeds in rich-text editor (#596744). Part of <iframe> embeds in Markdown content (#282443).
Support iframe embeds in rich-text editor
Add a new iframe node type to the Content Editor so iframe embeds (YouTube, Figma, etc.) are recognised and editable in the rich-text editor.
The backend already produces the HTML (img.js-render-iframe inside a
.media-container), but the content editor previously treated these as
regular images, which would just fail to load. The new extension parses
this HTML at highest priority, renders a sandboxed iframe in the editor
per render_iframe.js, and serializes back to image Markdown syntax
({width=W height=H}). We don't support any attributes
other than width/height, so this is always safe.
The iframe wrapper includes an overlay that intercepts clicks for node selection which serves as a drag handle; we set pointer-events-none after mouseup once we know there's on drag so the iframe becomes interactive once selected.
References
Screenshots or screen recordings
| Before | After |
|---|---|
How to set up and validate locally
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.