Media Embed

Embed the media

1. Put an URL in the clipboard,
2. Use the button in the dropdown or paste the URL directly in the editor,
3. Insert the media,
4. Check if media was inserted and is selected.

Update the media

1. Put an URL in the clipboard,
2. Select some media,
3. Use the button in the dropdown,
4. Update the URL,
5. Check if media was updated and remains selected.

Data output

1. Call editor.getData(),
2. Media with previews should include their previews. Preview–less media should be represented using only the <oembed> tag.

URL validation

Invalid

1. In the previous scenarios try using a non–media URL,
2. The error should be displayed next to the URL field,
3. Nothing should be inserted/updated.

Empty

1. In the previous scenarios try using an empty URL,
2. The error should be displayed next to the URL field,
3. Nothing should be inserted/updated.

Copy&Paste

1. Play with media copy&paste.
2. It should work just like images or any other widget.

Open media in new tab

1. Locate any generic media in the content,
2. Hover the URL in the content (the tooltip should show up),
3. Click the URL,
4. A new browser tab should open with the media URL.

Media embed toolbar

1. Click the media,
2. The block quote button should be visible,
3. Click the block quote button,
4. The block quote should be applied to the media.

Resize handles

1. Click on a video embed (YouTube, Vimeo),
2. Four resize handles should appear at the corners of the media wrapper,
3. Drag a corner handle to resize — a size label should appear during the drag,
4. The resized media should stay centered,
5. Both left and right handles should resize symmetrically,
6. Release the handle — the new width should persist (check editor.getData()),
7. The data output <figure> should include style="width: …" and class media_resized,
8. Undo (Ctrl+Z) should restore the original size.

Resize minimum width

1. Drag a resize handle to shrink the embed as far as possible,
2. The embed should floor at the base .media { min-width: 15em } (~240px). Handles should remain reachable at that floor.

Spotify default size and min-width

1. A freshly inserted (or pre-existing, never-resized) Spotify embed should render at its default 300px width (height ~378px from the 100/126 aspect ratio),
2. The figure has min-width: 300px so the resize handles cannot drag it below the default width (Spotify's player breaks layout below ~280px).

Resize upcast

1. The "Pre-resized media (50%)" section should load at 50% width, centered,
2. Clicking it should show resize handles,
3. Dragging handles should work normally.

Resize for generic media (no preview)

1. Click a generic media (Twitter, Flickr, etc.),
2. Resize handles should appear around the placeholder,
3. Dragging should change the figure width,
4. The placeholder should scale within the resized figure.

Resize + URL change

1. Resize a media embed to ~50%,
2. Change the media URL (select it, click the media embed button, enter a new URL),
3. The new media should retain the 50% width.

Aspect ratio (modern CSS)

1. Inspect a YouTube or Vimeo iframe in the DOM,
2. The iframe should be wrapped in a plain <div> (no padding-bottom or position styles on the wrapper),
3. The iframe's inline CSS should include aspect-ratio: 16 / 9 and height: auto,
4. Resizing the embed should preserve the 16:9 proportion.

Data migration

1. Load the existing document (the "Media with previews" section uses the old padding-bottom wrapper format),
2. The editor should render them correctly — upcast reads only the URL and regenerates the preview using the current provider HTML,
3. Call editor.getData() — the iframe should carry inline aspect-ratio CSS directly, wrapped only in a plain <div> (no padding-bottom or position styles on the wrapper).

Default centering

1. Insert a new media embed,
2. An unresized YouTube/Vimeo figure spans the full editor width; an unresized Spotify figure stays at 300px and is centered horizontally,
3. The data output <figure> should be class="media" only — no alignment class.

Alignment toolbar — buttons active on insert

1. Insert a media embed and select it,
2. The "Centered media" entry inside the Break text dropdown should be active by default,
3. The data <figure> has no media-style-* class while the center button is on (default style is encoded as attribute-absence).

Block alignment

1. Resize a media embed to ~50% (a full-width figure has no spare space to shift into),
2. From the Break text dropdown, click "Left aligned media" — the figure should pin to the left edge of the content area,
3. The data <figure> should include media-style-block-align-left,
4. Repeat for "Right aligned media" — the figure should pin to the right edge, class becomes media-style-block-align-right,
5. Click "Centered media" — both classes should be removed and the figure should re-center.

Text-wrap (float) alignment

1. Below a paragraph of text, select a resized media (~50% width),
2. From the Wrap text dropdown, click "Left aligned media" — the figure should float left and the surrounding paragraph text should wrap around it,
3. The data <figure> should include media-style-align-left (no "block-"),
4. Repeat with "Right aligned media" — the figure should float right with text wrapping on the left.

Side-by-side floats

1. Insert two media embeds in a row,
2. Float-align the first one left and the second one right,
3. Both should sit on the same line (the clear: none override allows this) with text wrapping between or below.

Alignment + resize coexist

1. Resize a media to ~50%,
2. Apply each alignment in turn — the figure should keep its 50% width and reposition correctly,
3. The data <figure> should include both media_resized (with style="width: …") and the corresponding alignment class.

Alignment URL change

1. Apply alignment to a media (e.g. alignBlockLeft),
2. Change the URL to any other provider — alignment should be preserved across providers.