Support iframe embeds in rich-text editor

Asherah Connorrequested to merge
push-ywllzquowqpp into master

What does this MR do and why?

Support <iframe> embeds in rich-text editor.

Add a new iframe node type to the RTE 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 RTE previously treated these as regular images, which would just fail to load. The new extension parses this HTML, renders a sandboxed iframe in the editor per render_iframe.js, and serialises back to regular embed syntax (![alt](url){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
image image

How to set up and validate locally

  1. Check out the branch.
  2. Enable the allow_iframes_in_markdown feature on your GDK.
  3. Enable embedding of www.youtube.com from /admin/application_settings/general#js-iframe-settings, and ensure Enable embedded content is turned on.
  4. It may be wise to restart the GDK Rails instance here, for best chances of success.
  5. In the rich-text editor (e.g. in an issue or MR description, or a comment), try the following tasks:
    1. Copy a YouTube embed code from a video and paste it right in. You can try this one: 
      <iframe width="560" height="315" src="https://www.youtube.com/embed/DwIepRJgMF4"
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    2. Use the embed syntax with the YouTube watch URL, instead; e.g. try typing or copy-pasting this in: 
      ![](https://www.youtube.com/watch?v=DwIepRJgMF4)
      You can also use youtu.be-style URLs.
    3. Copy- or cut-and-pasting videos from the editor back into the editor.
  6. In all cases, you should be able to:
    1. See the video embedded in the editor.
    2. Resize it after clicking it once, using the resize handles.
    3. Play the video after clicking on it a second time.
    4. Save it and see it embedded correctly.

Please note that clicking on the title to open the video in a new window doesn't work; see Add allow-popups-to-escape-sandbox to render_if... (!231827 - closed) (there is a lengthy discussion going on here).

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.

Edited by Asherah Connor

Merge request reports