Render <iframe> embeds in Vue

What does this MR do and why?

Use Vue to render our <iframe> embeds. This provides the base for Click-to-activate functionality for `<iframe>`s (!254949 - merged), which significantly extends the logic and really wanted Vue.

• We apply a min-width in preparation for !254949 (merged), and extract common sizing logic out from the regular render and content editor so dimensions live in one place.
  • This min-width yields to containers narrower than it so it doesn't overflow horizontally; to allow this, embeds now render on their own line rather than inline with text. (There is not really a good reason to permit embeds inline in a paragraph.)
  • max-height is now min(80vh, <height>) when the user sets both width and height; this stops the min-width from making small embeds taller through aspect-ratio.
  • In the rich-text editor, resizing an embed starts from its rendered size and stops at the min-width.
  • px-suffixed dimensions (e.g. {width=560px height=315px}) now keep their aspect ratio; previously they fell back to 150px tall.
• You can now copy/quote the embeds. They'd just vanish before this.
  • Please note: the embeds paste into the rich-text editor as an image (which looks broken), and require being saved (or some other roundtrip through the backend) before being rendered as an <iframe>. This is intentional, and is not new as of this MR: read the second bullet point of !254948 (merged) for details.

The feature is behind a wip FF, disabled everywhere; no current users.

MR stack

MR 9/12 of Rework <iframe> embed configuration (#599713):

1. Add `<iframe>` provider model and parser (!254943 - merged)
2. Add `<iframe>` provider loader and base config (!254944 - merged)
3. Convert `<iframe>` allowlist setting to provide... (!254945 - merged)
4. Move to `<iframe>` providers (!254946 - merged)
5. Remove dead `<iframe>` transform code (!254947 - merged)
6. Allow additional CSP hosts in `<iframe>` embeds (!257463 - merged)
7. Reject sneaky dot segments in `<iframe>` URLs (!258894 - merged)
8. Frontend `<iframe>` hardening (!254948 - merged)
9. Render `<iframe>` embeds in Vue (!259513 - merged) ⬅️ you are here
10. Click-to-activate functionality for `<iframe>`s (!254949 - merged)
11. Admin UI for `<iframe>` providers (!254950 - merged)
12. Draft: Mark `<iframe>` config, loader and rende... (!255246)

Part of <iframe> embeds in Markdown content (#282443).

Screenshots or screen recordings

![](https://www.youtube.com/watch?v=J---aiyznGQ){width=1}

What	Before	After
Rendered
Rich-text editor
Copy-pasting from render into RTE

How to set up and validate locally

1. Check out master.
2. Enable the allow_iframes_in_markdown FF.
3. Go to Admin → Settings → General → Embedded content.
4. Check "Enable embedded content", enter youtube into the "Allowed domains" list, and click "Save changes":
   
   (This interface is odd but will be fixed as of Admin UI for `<iframe>` providers (!254950 - merged). I've also added figma above for my testing, but it isn't necessary for this scenario.)
5. For best chances of first-try success, consider restarting your GDK/Caproni edit mode. The FF/setting change may be cached.
6. Navigate to a work item, enter the above Markdown in a plain-text area (can be the work item description, or a new comment), and save. You should see the relevant "Before" side.
7. Edit the field and enter the rich-text editor. You should see the relevant "Before" side there, too.
8. Try copy-pasting the embed from the rendered view into the rich-text editor. (I removed the {width=1} and put some text on either side to make it easier to copy 😹) You should see it vanish, like the relevant "Before" side.
9. Check out this branch.
10. Re-check steps 6–8; you should see the relevant "After" sides. (Please note the MR description about why it appears as a broken image on first paste. The plain-text editor Just Works™, though.)

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.