Media embed styles (custom config.mediaEmbed.styles)

Editor with MediaEmbed + MediaEmbedStyle + MediaEmbedResize and a non-default config:

  1. Only alignBlockLeft and alignCenter kept from the built-ins (wrapText auto-skips, breakText not placed in the toolbar).
  2. Two custom styles sideOrange / sideGreen – both float right with text wrapping, differ only in box-shadow ring color.
  3. Inline mediaEmbed:sideMedia split-button dropdown groups them in config.mediaEmbed.toolbar.

The YouTube embed loads pre-resized to 50% width so alignment shifts are visible.

Toolbar contents

  1. Select an embed,
  2. The contextual toolbar should show three entries: Left aligned media (flat, mediaEmbed:alignBlockLeft), Centered media (flat, mediaEmbed:alignCenter), and Side media (split-button dropdown, mediaEmbed:sideMedia),
  3. There should be no mediaEmbed:alignLeft, mediaEmbed:alignRight, or mediaEmbed:alignBlockRight buttons.

Flat buttons

  1. Click Left aligned media — the figure should pin left and the data <figure> should include media-style-block-align-left,
  2. Click Centered media — the figure should re-center and the data <figure> should have only class="media" (default, no class).

Side media dropdown

  1. With no side style applied, the action button should show Side media (orange border) (the defaultItem),
  2. Clicking the action should apply sideOrange,
  3. The flyout should contain (orange border) and (green border),
  4. Click (green border) — the figure should gain a green ring and the data <figure> should include media-style-side-green,
  5. Click the action while green is active — the dropdown should open instead of firing (action only fires when no child is on),
  6. Click (orange border) from the flyout — the ring should switch to orange and the data <figure> should include media-style-side-orange.

Resize interaction

  1. Apply Side media (orange border) to the pre-resized YouTube embed,
  2. Drag-resize the figure — the orange ring should remain attached as the width changes (proves the custom class composes with media_resized).

Filtered values silently rejected

  1. In the browser console, run editor.execute('mediaStyle', { value: 'alignRight' }),
  2. Nothing should change in the editor,
  3. editor.commands.get('mediaStyle').value should still report the previously applied style.

Clearing the style

  1. Apply Side media (orange border),
  2. In the console run editor.execute('mediaStyle', { value: null }) (or click Centered media),
  3. The figure should clear to the default centered state.

Example URLs

Test editor

Configurable styles demo

The config keeps only the two block alignments (alignBlockLeft, alignCenter) and adds two custom "side media" variants distinguished by border color (orange / green). Both built-in dropdowns (Wrap text, Break text) auto-skip; the toolbar uses two flat buttons plus a custom Side media split-button dropdown declared inline in config.mediaEmbed.toolbar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.