@ckeditor/ckeditor5-media-embed 48.1.1 → 48.2.0-alpha.1

package/dist/index.js

@@ -3,10 +3,10 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { isWidget, toWidget, findOptimalInsertionRange, Widget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
+import { isWidget, toWidget, findOptimalInsertionRange, Widget, WidgetToolbarRepository, WidgetResize } from '@ckeditor/ckeditor5-widget/dist/index.js';
 import { logWarning, toArray, first, global, FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { IconView, Template, View, submitHandler, LabeledFieldView, createLabeledInputText, Dialog, ButtonView, MenuBarMenuListItemButtonView, CssTransitionDisablerMixin } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { IconMediaPlaceholder, IconMedia } from '@ckeditor/ckeditor5-icons/dist/index.js';
+import { IconView, Template, View, submitHandler, LabeledFieldView, createLabeledInputText, Dialog, ButtonView, MenuBarMenuListItemButtonView, CssTransitionDisablerMixin, createDropdown, SplitButtonView, addToolbarToDropdown } from '@ckeditor/ckeditor5-ui/dist/index.js';
+import { IconMediaPlaceholder, IconMedia, IconObjectInlineRight, IconObjectRight, IconObjectCenter, IconObjectLeft, IconObjectInlineLeft } from '@ckeditor/ckeditor5-icons/dist/index.js';
 import { ModelLivePosition, ModelLiveRange } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { Clipboard } from '@ckeditor/ckeditor5-clipboard/dist/index.js';
 import { Delete } from '@ckeditor/ckeditor5-typing/dist/index.js';
@@ -488,7 +488,7 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
                     ],
                     html: (match)=>{
                         const id = match[1];
-                        return '<div style="position: relative; padding-bottom: 100%; height: 0; ">' + `<iframe src="https://www.dailymotion.com/embed/video/${id}" ` + 'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' + 'frameborder="0" width="480" height="270" allowfullscreen allow="autoplay">' + '</iframe>' + '</div>';
+                        return '<div>' + `<iframe src="https://www.dailymotion.com/embed/video/${id}" ` + 'width="1280" height="720" ' + 'style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ' + 'frameborder="0" allowfullscreen allow="autoplay">' + '</iframe>' + '</div>';
                     }
                 },
                 {
@@ -500,7 +500,9 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
                     ],
                     html: (match)=>{
                         const id = match[1];
-                        return '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 126%;">' + `<iframe src="https://open.spotify.com/embed/${id}" ` + 'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' + 'frameborder="0" allowtransparency="true" allow="encrypted-media">' + '</iframe>' + '</div>';
+                        const isTrack = id.startsWith('track/');
+                        const iframeStyle = isTrack ? 'width: 100%; height: 80px; border: 0; display: block;' : 'width: 100%; height: auto; aspect-ratio: 100 / 126; border: 0; display: block;';
+                        return '<div>' + `<iframe src="https://open.spotify.com/embed/${id}" ` + `width="300" height="${isTrack ? '80' : '378'}" ` + `style="${iframeStyle}" ` + 'frameborder="0" allowtransparency="true" allow="encrypted-media">' + '</iframe>' + '</div>';
                     }
                 },
                 {
@@ -515,7 +517,7 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
                     html: (match)=>{
                         const id = match[1];
                         const time = match[2];
-                        return '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' + `<iframe src="https://www.youtube.com/embed/${id}${time ? `?start=${time}` : ''}" ` + 'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' + 'frameborder="0" allow="autoplay; encrypted-media" referrerpolicy="strict-origin-when-cross-origin" ' + 'allowfullscreen>' + '</iframe>' + '</div>';
+                        return '<div>' + `<iframe src="https://www.youtube.com/embed/${id}${time ? `?start=${time}` : ''}" ` + 'width="1280" height="720" ' + 'style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ' + 'frameborder="0" allow="autoplay; encrypted-media" referrerpolicy="strict-origin-when-cross-origin" ' + 'allowfullscreen>' + '</iframe>' + '</div>';
                     }
                 },
                 {
@@ -531,7 +533,7 @@ const mediaPlaceholderIconViewBox = '0 0 64 42';
                     ],
                     html: (match)=>{
                         const id = match[1];
-                        return '<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;">' + `<iframe src="https://player.vimeo.com/video/${id}" ` + 'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' + 'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' + '</iframe>' + '</div>';
+                        return '<div>' + `<iframe src="https://player.vimeo.com/video/${id}" ` + 'width="1280" height="720" ' + 'style="width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block;" ' + 'frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>' + '</iframe>' + '</div>';
                     }
                 },
                 {
@@ -787,7 +789,8 @@ const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
             return;
         }
         const mediaEmbedCommand = editor.commands.get('mediaEmbed');
-        // Do not anything if media element cannot be inserted at the current position (#47).
+        // Do not anything if media element cannot be inserted at the current position.
+        // See https://github.com/ckeditor/ckeditor5-media-embed/issues/47.
         if (!mediaEmbedCommand.isEnabled) {
             urlRange.detach();
             return;
@@ -1067,7 +1070,7 @@ function getFormValidators(t, registry) {
 /**
  * The media embed plugin.
  *
- * For a detailed overview, check the {@glink features/media-embed Media Embed feature documentation}.
+ * For a detailed overview, check the {@glink features/media-embed/media-embed Media Embed feature documentation}.
  *
  * This is a "glue" plugin which loads the following plugins:
  *
@@ -1097,6 +1100,165 @@ function getFormValidators(t, registry) {
     }
 }
 
+/**
+ * Built-in style options provided by the plugin. Integrators can refer to these by
+ * name in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
+ * to opt out, override individual fields, or coexist with custom styles.
+ *
+ * @internal
+ */ const DEFAULT_OPTIONS = {
+    alignLeft: {
+        name: 'alignLeft',
+        title: 'Left aligned media',
+        icon: IconObjectInlineLeft,
+        className: 'media-style-align-left'
+    },
+    alignBlockLeft: {
+        name: 'alignBlockLeft',
+        title: 'Left aligned media',
+        icon: IconObjectLeft,
+        className: 'media-style-block-align-left'
+    },
+    alignCenter: {
+        name: 'alignCenter',
+        title: 'Centered media',
+        icon: IconObjectCenter,
+        isDefault: true
+    },
+    alignBlockRight: {
+        name: 'alignBlockRight',
+        title: 'Right aligned media',
+        icon: IconObjectRight,
+        className: 'media-style-block-align-right'
+    },
+    alignRight: {
+        name: 'alignRight',
+        title: 'Right aligned media',
+        icon: IconObjectInlineRight,
+        className: 'media-style-align-right'
+    }
+};
+/**
+ * Short icon-name aliases that can be used as the `icon` value in a media style
+ * option definition. Matches the alias set exposed by the image styles feature so
+ * the two APIs feel symmetrical.
+ *
+ * @internal
+ */ const DEFAULT_ICONS = {
+    inlineLeft: IconObjectInlineLeft,
+    left: IconObjectLeft,
+    center: IconObjectCenter,
+    right: IconObjectRight,
+    inlineRight: IconObjectInlineRight
+};
+/**
+ * Built-in dropdown groupings. Each entry references built-in style component names. If any
+ * items are filtered out by configuration, the dropdown is rebuilt from the remaining names
+ * (or skipped entirely if fewer than two remain).
+ *
+ * @internal
+ */ const DEFAULT_DROPDOWN_DEFINITIONS = [
+    {
+        name: 'mediaEmbed:wrapText',
+        title: 'Wrap text',
+        items: [
+            'mediaEmbed:alignLeft',
+            'mediaEmbed:alignRight'
+        ],
+        defaultItem: 'mediaEmbed:alignLeft'
+    },
+    {
+        name: 'mediaEmbed:breakText',
+        title: 'Break text',
+        items: [
+            'mediaEmbed:alignBlockLeft',
+            'mediaEmbed:alignCenter',
+            'mediaEmbed:alignBlockRight'
+        ],
+        defaultItem: 'mediaEmbed:alignCenter'
+    }
+];
+
+/**
+ * Normalizes the {@link module:media-embed/mediaembedconfig~MediaStyleConfig#options style options}
+ * provided by the integrator. Each entry is resolved into a full
+ * {@link module:media-embed/mediaembedconfig~MediaStyleOptionDefinition} and invalid entries
+ * are filtered out with a console warning.
+ *
+ * @internal
+ */ function normalizeStyles(configuredStyles) {
+    const configured = configuredStyles.options || [];
+    return configured.map((entry)=>normalizeDefinition(entry)).filter((entry)=>isValidOption(entry));
+}
+/**
+ * Resolves a single config entry into a style option definition. A string entry is first
+ * promoted to its object form (`{ name }`) and then shallow-merged on top of the matching
+ * built-in default — entries without a matching built-in pass through unchanged and are
+ * rejected by {@link ~isValidOption} if they lack required fields.
+ *
+ * Also resolves icon-name aliases (`'left'`, `'inlineLeft'`, etc.) to the corresponding
+ * SVG sources from {@link module:media-embed/mediaembedstyle/constants~DEFAULT_ICONS}.
+ */ function normalizeDefinition(entry) {
+    // Spread of `undefined` is a no-op, so unknown-name overrides produce a clean passthrough.
+    const override = typeof entry === 'string' ? {
+        name: entry
+    } : entry;
+    const definition = {
+        ...DEFAULT_OPTIONS[override.name],
+        ...override
+    };
+    if (typeof definition.icon === 'string' && DEFAULT_ICONS[definition.icon]) {
+        definition.icon = DEFAULT_ICONS[definition.icon];
+    }
+    return definition;
+}
+/**
+ * Validates a normalized style option. `name`, `title`, and `icon` are always required.
+ * `className` is required unless the entry is the default style (defaults encode as
+ * attribute-absence and intentionally have no class). Emits a console warning and returns
+ * `false` when any of these checks fails.
+ */ function isValidOption(option) {
+    if (!option.name || !option.title || !option.icon || !option.isDefault && !option.className) {
+        warnInvalidStyle({
+            style: option
+        });
+        return false;
+    }
+    return true;
+}
+function warnInvalidStyle(info) {
+    /**
+	 * The media style configuration provided in the editor config is invalid. The warning is
+	 * emitted in two situations:
+	 *
+	 * * An entry in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles.options`}
+	 *   does not reference a built-in style by name (`'alignLeft'`, `'alignBlockLeft'`,
+	 *   `'alignCenter'`, `'alignBlockRight'`, `'alignRight'`) and does not follow the
+	 *   {@link module:media-embed/mediaembedconfig~MediaStyleOptionDefinition} shape —
+	 *   `name`, `title`, `icon`, and (unless `isDefault: true`) `className` are required.
+	 *   The offending entry is reported under the `style` parameter.
+	 * * A dropdown entry placed inline in
+	 *   {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}
+	 *   does not follow the {@link module:media-embed/mediaembedconfig~MediaStyleDropdownDefinition} shape
+	 *   (`name` and every `items[]` entry must use the full `mediaEmbed:` prefix, `defaultItem` must
+	 *   be one of the `items`, `title` must be a non-empty string), or its `items[]` reference styles
+	 *   that are not in the resolved
+	 *   {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`} list.
+	 *   The offending entry is reported under the `dropdown` parameter.
+	 *
+	 * @error media-style-configuration-definition-invalid
+	 */ logWarning('media-style-configuration-definition-invalid', info);
+}
+/**
+ * Type guard for toolbar config entries shaped like a media style dropdown definition. The
+ * discriminator is `defaultItem` — generic toolbar groupings use `items` + `label` and never
+ * carry a `defaultItem` field.
+ *
+ * @internal
+ */ function isMediaStyleDropdown(item) {
+    return typeof item === 'object' && item !== null && typeof item.defaultItem === 'string';
+}
+
 /**
  * The media embed toolbar plugin. It creates a toolbar for media embed that shows up when the media element is selected.
  *
@@ -1128,11 +1290,758 @@ function getFormValidators(t, registry) {
         const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);
         widgetToolbarRepository.register('mediaEmbed', {
             ariaLabel: t('Media toolbar'),
-            items: editor.config.get('mediaEmbed.toolbar') || [],
+            items: normalizeDeclarativeConfig(editor.ui.componentFactory, editor.config.get('mediaEmbed.toolbar') || []),
             getRelatedElement: getSelectedMediaViewWidget
         });
     }
 }
+/**
+ * Flattens dropdown definitions to their factory names, dropping any `mediaEmbed:`-prefixed
+ * name the style UI did not register — otherwise the toolbar crashes with `componentfactory-item-missing`.
+ * Non-string entries (e.g. generic `{ label, items }` toolbar groupings) pass through unchanged.
+ */ function normalizeDeclarativeConfig(factory, config) {
+    return config.map((item)=>isMediaStyleDropdown(item) ? item.name : item).filter((item)=>typeof item !== 'string' || !item.startsWith('mediaEmbed:') || factory.has(item));
+}
+
+/**
+ * The resize media embed command.
+ */ class ResizeMediaEmbedCommand extends Command {
+    /**
+	 * @inheritDoc
+	 */ refresh() {
+        const element = getSelectedMediaModelWidget(this.editor.model.document.selection);
+        this.isEnabled = !!element;
+        if (!element || !element.hasAttribute('resizedWidth')) {
+            this.value = null;
+        } else {
+            this.value = element.getAttribute('resizedWidth');
+        }
+    }
+    /**
+	 * Executes the command.
+	 *
+	 * ```ts
+	 * // Sets the width as a percentage of the parent width:
+	 * editor.execute( 'resizeMediaEmbed', { width: '50%' } );
+	 *
+	 * // Removes the resize and restores the default width:
+	 * editor.execute( 'resizeMediaEmbed', { width: null } );
+	 * ```
+	 *
+	 * @param options
+	 * @param options.width The new width of the media embed as a CSS `width` value
+	 * (e.g. `'50%'`), or `null` to remove the resize.
+	 * @fires execute
+	 */ execute(options) {
+        const model = this.editor.model;
+        const mediaElement = getSelectedMediaModelWidget(model.document.selection);
+        if (mediaElement) {
+            model.change((writer)=>{
+                writer.setAttribute('resizedWidth', options.width, mediaElement);
+            });
+        }
+    }
+}
+
+/**
+ * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */ /**
+ * @module media-embed/mediaembedresize/constants
+ */ /**
+ * The view class applied to a resized media embed figure.
+ *
+ * Shared between the editing plugin (which toggles it via downcast of `resizedWidth` and consumes
+ * it on upcast) and the handles plugin (which adds it during drag and strips it on commit), so
+ * both layers agree on the exact class name.
+ *
+ * @internal
+ */ const RESIZED_MEDIA_CLASS = 'media_resized';
+
+/**
+ * The media embed resize editing feature.
+ *
+ * It adds the ability to resize each media embed using handles.
+ */ class MediaEmbedResizeEditing extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            MediaEmbedEditing
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'MediaEmbedResizeEditing';
+    }
+    /**
+	 * @inheritDoc
+	 * @internal
+	 */ static get licenseFeatureCode() {
+        return 'MER';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isPremiumPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const editor = this.editor;
+        editor.commands.add('resizeMediaEmbed', new ResizeMediaEmbedCommand(editor));
+        this._registerConverters();
+    }
+    /**
+	 * @inheritDoc
+	 */ afterInit() {
+        this._registerSchema();
+    }
+    _registerSchema() {
+        const schema = this.editor.model.schema;
+        schema.extend('media', {
+            allowAttributes: [
+                'resizedWidth'
+            ]
+        });
+        schema.setAttributeProperties('resizedWidth', {
+            isFormatting: true
+        });
+    }
+    /**
+	 * Registers media embed resize converters.
+	 */ _registerConverters() {
+        const editor = this.editor;
+        // Downcast (model → view): resizedWidth → style.width + class on <figure>.
+        editor.conversion.for('downcast').add((dispatcher)=>dispatcher.on('attribute:resizedWidth:media', (evt, data, conversionApi)=>{
+                if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                const viewWriter = conversionApi.writer;
+                const figure = conversionApi.mapper.toViewElement(data.item);
+                if (data.attributeNewValue !== null) {
+                    viewWriter.setStyle('width', data.attributeNewValue, figure);
+                    viewWriter.addClass(RESIZED_MEDIA_CLASS, figure);
+                } else {
+                    viewWriter.removeStyle('width', figure);
+                    viewWriter.removeClass(RESIZED_MEDIA_CLASS, figure);
+                }
+            }));
+        // Upcast: style.width on <figure class="media"> → resizedWidth.
+        //
+        // The `hasClass` guard lives in the value callback (not the matcher) because the `media`
+        // class is already consumed upstream by MediaEmbedEditing. Without the guard, any figure
+        // with a width style would match and could race image resize's upcast on image figures.
+        editor.conversion.for('upcast').attributeToAttribute({
+            view: {
+                name: 'figure',
+                styles: {
+                    width: /.+/
+                }
+            },
+            model: {
+                key: 'resizedWidth',
+                value: (viewElement)=>{
+                    if (!viewElement.hasClass('media')) {
+                        return null;
+                    }
+                    return viewElement.getStyle('width');
+                }
+            }
+        });
+        // Consume the media_resized class during upcast so it does not cause conversion issues.
+        editor.conversion.for('upcast').add((dispatcher)=>{
+            dispatcher.on('element:figure', (evt, data, conversionApi)=>{
+                conversionApi.consumable.consume(data.viewItem, {
+                    classes: [
+                        RESIZED_MEDIA_CLASS
+                    ]
+                });
+            });
+        });
+    }
+}
+
+/**
+ * The media embed resize by handles feature.
+ *
+ * It adds the ability to resize each media embed using handles.
+ */ class MediaEmbedResizeHandles extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            WidgetResize
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'MediaEmbedResizeHandles';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const command = this.editor.commands.get('resizeMediaEmbed');
+        this.bind('isEnabled').to(command);
+        this._setupResizerCreator();
+    }
+    /**
+	 * Attaches a resizer to every newly inserted media widget. Walks only the ranges
+	 * reported by the differ — never the whole document — so unrelated inserts (e.g.
+	 * pressing Enter to create a paragraph) cost only the differ check.
+	 *
+	 * Each resizer's `isEnabled` is bound to the plugin in {@link #_attachResizer},
+	 * so it auto-tracks the resize command's state.
+	 */ _setupResizerCreator() {
+        const editor = this.editor;
+        const model = editor.model;
+        const widgetResize = editor.plugins.get(WidgetResize);
+        // Low priority ensures downcast has run before we look up view elements.
+        this.listenTo(model.document, 'change:data', ()=>{
+            for (const change of model.document.differ.getChanges()){
+                if (change.type !== 'insert' || change.name === '$text') {
+                    continue;
+                }
+                const insertedRange = model.createRange(change.position, change.position.getShiftedBy(change.length));
+                for (const item of insertedRange.getItems()){
+                    if (!item.is('element', 'media')) {
+                        continue;
+                    }
+                    const viewElement = editor.editing.mapper.toViewElement(item);
+                    /* istanbul ignore if: paranoid check — conversion has run at this point -- @preserve */ if (!viewElement) {
+                        continue;
+                    }
+                    if (!widgetResize.getResizerByViewElement(viewElement)) {
+                        this._attachResizer(item, viewElement);
+                    }
+                }
+            }
+        }, {
+            priority: 'low'
+        });
+    }
+    /**
+	 * Attaches a resizer to a single media widget.
+	 */ _attachResizer(modelElement, widgetView) {
+        const editor = this.editor;
+        const editingView = editor.editing.view;
+        const resizer = editor.plugins.get(WidgetResize).attachTo({
+            unit: '%',
+            modelElement,
+            viewElement: widgetView,
+            editor,
+            getHandleHost: (domWidgetElement)=>domWidgetElement.querySelector('.ck-media__wrapper'),
+            getResizeHost: (domWidgetElement)=>domWidgetElement,
+            onCommit: (newValue)=>{
+                editingView.change((writer)=>writer.removeClass(RESIZED_MEDIA_CLASS, widgetView));
+                editor.execute('resizeMediaEmbed', {
+                    width: newValue
+                });
+            }
+        });
+        resizer.bind('isEnabled').to(this);
+        resizer.on('updateSize', ()=>{
+            if (!widgetView.hasClass(RESIZED_MEDIA_CLASS)) {
+                editingView.change((writer)=>writer.addClass(RESIZED_MEDIA_CLASS, widgetView));
+            }
+        });
+        // Redraw once the view has flushed to DOM — otherwise the freshly inserted resizer
+        // UIElement has no inline styles and handles cluster at the top-left corner (visible
+        // after drag-and-drop until another event eventually triggers a redraw).
+        editingView.once('render', ()=>resizer.redraw());
+    }
+}
+
+/**
+ * The media embed resize plugin.
+ *
+ * It adds a possibility to resize each media embed using handles.
+ */ class MediaEmbedResize extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            MediaEmbedResizeEditing,
+            MediaEmbedResizeHandles
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'MediaEmbedResize';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+}
+
+/**
+ * The media embed style command. It is used to apply a style option (e.g. an alignment) to a
+ * selected media embed.
+ *
+ * The set of accepted style values comes from the resolved
+ * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
+ * options. Values not in that set are silently rejected by {@link #execute}.
+ */ class MediaEmbedStyleCommand extends Command {
+    /**
+	 * Resolved styles indexed by `name`. Used to look up the `isDefault` flag at execute time
+	 * (any default-marked style clears the attribute) and to validate that a requested style
+	 * is part of the resolved options list.
+	 */ _styles;
+    /**
+	 * The `name` of the first style with `isDefault: true` in the resolved options, or `null`
+	 * when the integrator did not designate a default. Exposed via {@link #value} when the
+	 * selected media has no `mediaStyle` attribute, so the default-state UI button can light up.
+	 * Does not gate the "clear attribute" branch in {@link #execute} — that uses the per-style
+	 * `isDefault` flag so multi-default configs behave consistently with the downcast.
+	 */ _defaultStyleName;
+    /**
+	 * Creates an instance of the media embed style command.
+	 *
+	 * @param editor The editor instance.
+	 * @param styles The resolved list of style options that this command will accept.
+	 */ constructor(editor, styles){
+        super(editor);
+        this._styles = new Map(styles.map((style)=>[
+                style.name,
+                style
+            ]));
+        const defaultStyle = styles.find((style)=>style.isDefault);
+        this._defaultStyleName = defaultStyle ? defaultStyle.name : null;
+    }
+    /**
+	 * @inheritDoc
+	 */ refresh() {
+        const element = getSelectedMediaModelWidget(this.editor.model.document.selection);
+        this.isEnabled = !!element;
+        if (!element) {
+            this.value = false;
+        } else if (element.hasAttribute('mediaStyle')) {
+            const styleName = element.getAttribute('mediaStyle');
+            // A previously-applied style may have been dropped from the resolved options list
+            // (e.g. by a config change). Fall back to the effective default so the UI stays
+            // consistent with what the downcast actually renders (no class for unknown names).
+            this.value = this._styles.has(styleName) ? styleName : this._defaultStyleName ?? false;
+        } else {
+            this.value = this._defaultStyleName ?? false;
+        }
+    }
+    /**
+	 * Executes the command and applies the chosen style to the currently selected media embed.
+	 *
+	 * ```ts
+	 * editor.execute( 'mediaStyle', { value: 'alignLeft' } );
+	 * editor.execute( 'mediaStyle', { value: 'alignCenter' } ); // removes the attribute — alignCenter is the built-in default
+	 * editor.execute( 'mediaStyle', { value: null } );          // removes the attribute
+	 * ```
+	 *
+	 * The default style is encoded on the model as the absence of the `mediaStyle` attribute.
+	 * Passing any `isDefault: true` style name (or `null`) therefore clears the attribute. Values
+	 * that are neither falsy, an `isDefault` style, nor present in the resolved options list are
+	 * silently rejected.
+	 *
+	 * @param options
+	 * @param options.value The name of the style to apply, or `null` to clear the alignment.
+	 * @fires execute
+	 */ execute(options) {
+        const model = this.editor.model;
+        const element = getSelectedMediaModelWidget(model.document.selection);
+        const requestedStyle = options.value;
+        // Falsy value or any `isDefault: true` style clears the attribute. Default styles encode
+        // as attribute-absence on the model. The downcast emits no class for them.
+        if (!requestedStyle || this._styles.get(requestedStyle)?.isDefault) {
+            model.change((writer)=>{
+                writer.removeAttribute('mediaStyle', element);
+            });
+            return;
+        }
+        // Reject names that are not part of the resolved options list.
+        if (!this._styles.has(requestedStyle)) {
+            return;
+        }
+        model.change((writer)=>{
+            writer.setAttribute('mediaStyle', requestedStyle, element);
+        });
+    }
+}
+
+/**
+ * The media embed style engine plugin. It extends the schema with the `mediaStyle` attribute,
+ * registers the {@link module:media-embed/mediaembedstyle/mediaembedstylecommand~MediaEmbedStyleCommand} command,
+ * and adds the converters that apply alignment CSS classes to the figure.
+ */ class MediaEmbedStyleEditing extends Plugin {
+    /**
+	 * The resolved list of media style options. Built once from
+	 * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
+	 * during {@link #init} and consumed by both the command and the UI plugin (single source of truth).
+	 *
+	 * @internal
+	 * @readonly
+	 */ normalizedStyles;
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            MediaEmbedEditing
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'MediaEmbedStyleEditing';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const editor = this.editor;
+        const schema = editor.model.schema;
+        editor.config.define('mediaEmbed.styles', {
+            options: Object.keys(DEFAULT_OPTIONS)
+        });
+        this.normalizedStyles = normalizeStyles(editor.config.get('mediaEmbed.styles'));
+        schema.extend('media', {
+            allowAttributes: [
+                'mediaStyle'
+            ]
+        });
+        schema.setAttributeProperties('mediaStyle', {
+            isFormatting: true
+        });
+        editor.commands.add('mediaStyle', new MediaEmbedStyleCommand(editor, this.normalizedStyles));
+        this._registerConverters();
+    }
+    /**
+	 * Registers the downcast and upcast converters for the `mediaStyle` attribute.
+	 */ _registerConverters() {
+        const editor = this.editor;
+        // Runtime lookup of style `name` → CSS `className`. Excludes the default style, which is
+        // encoded as the absence of the attribute (no class). Iteration order follows the configured
+        // options order — the upcast relies on this so the last matching class wins on a figure
+        // that has multiple alignment classes.
+        const styleClassMap = new Map(this.normalizedStyles.filter((style)=>!style.isDefault && style.className).map((style)=>[
+                style.name,
+                style.className
+            ]));
+        // Downcast: `mediaStyle` → CSS class on the <figure>. Covers both editing and data pipelines.
+        editor.conversion.for('downcast').add((dispatcher)=>dispatcher.on('attribute:mediaStyle:media', (evt, data, conversionApi)=>{
+                if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                    return;
+                }
+                const figure = conversionApi.mapper.toViewElement(data.item);
+                const viewWriter = conversionApi.writer;
+                const oldClass = styleClassMap.get(data.attributeOldValue);
+                const newClass = styleClassMap.get(data.attributeNewValue);
+                if (oldClass) {
+                    viewWriter.removeClass(oldClass, figure);
+                }
+                if (newClass) {
+                    viewWriter.addClass(newClass, figure);
+                }
+            }));
+        // Upcast: alignment class on a media <figure> → `mediaStyle` attribute. Runs at `low`
+        // priority so the main media upcast creates the `media` model element first.
+        editor.conversion.for('upcast').add((dispatcher)=>{
+            dispatcher.on('element:figure', (_evt, data, conversionApi)=>{
+                if (!data.modelRange) {
+                    return;
+                }
+                const modelElement = first(data.modelRange.getItems());
+                if (!modelElement || !modelElement.is('element', 'media')) {
+                    return;
+                }
+                // Iterate in insertion order — last consumed class wins when multiple
+                // alignment classes are present on the same figure.
+                for (const [styleName, className] of styleClassMap){
+                    if (conversionApi.consumable.consume(data.viewItem, {
+                        classes: className
+                    })) {
+                        conversionApi.writer.setAttribute('mediaStyle', styleName, modelElement);
+                    }
+                }
+            }, {
+                priority: 'low'
+            });
+        });
+    }
+}
+
+/**
+ * The media embed style UI plugin.
+ *
+ * It registers a button for every style in the resolved
+ * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
+ * list, and the default split-button dropdowns (`mediaEmbed:wrapText`, `mediaEmbed:breakText`)
+ * — filtered to the styles that survived configuration. The resulting components can be placed
+ * in the {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar media embed toolbar}.
+ */ class MediaEmbedStyleUI extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            MediaEmbedStyleEditing
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'MediaEmbedStyleUI';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const titles = this._getLocalizedTitles();
+        for (const button of this._getButtonDefinitions(titles)){
+            this._createButton(button);
+        }
+        for (const dropdown of this._getDropdownDefinitions(titles)){
+            this._createDropdown(dropdown);
+        }
+    }
+    /**
+	 * Returns the alignment button definitions sourced from the resolved options list.
+	 */ _getButtonDefinitions(titles) {
+        const editing = this.editor.plugins.get(MediaEmbedStyleEditing);
+        return editing.normalizedStyles.map((option)=>({
+                name: option.name,
+                label: titles[option.title] || option.title,
+                icon: option.icon
+            }));
+    }
+    /**
+	 * Returns the localized titles of the built-in styles and dropdowns.
+	 */ _getLocalizedTitles() {
+        const t = this.editor.t;
+        return {
+            'Left aligned media': t('Left aligned media'),
+            'Centered media': t('Centered media'),
+            'Right aligned media': t('Right aligned media'),
+            'Wrap text': t('Wrap text'),
+            'Break text': t('Break text')
+        };
+    }
+    /**
+	 * Returns the split-button dropdown definitions, filtered to the styles present in the
+	 * resolved options list. Combines the {@link module:media-embed/mediaembedstyle/constants~DEFAULT_DROPDOWN_DEFINITIONS
+	 * built-in dropdowns} with custom dropdowns declared inline in
+	 * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `config.mediaEmbed.toolbar`}.
+	 *
+	 * A dropdown with fewer than two items is skipped — a single-item dropdown carries no value
+	 * over the flat button. If the configured `defaultItem` was filtered out, the first surviving
+	 * item becomes the default.
+	 *
+	 * When a *custom* dropdown's items reference styles that are not in the resolved options list,
+	 * a console warning is emitted (the integrator's config was not fully honored). Built-in
+	 * dropdowns auto-skip silently — they are added by the plugin, not the integrator.
+	 */ _getDropdownDefinitions(titles) {
+        const editor = this.editor;
+        const editing = editor.plugins.get(MediaEmbedStyleEditing);
+        const availableComponentNames = new Set(editing.normalizedStyles.map(({ name })=>`mediaEmbed:${name}`));
+        const dropdowns = [];
+        const resolveDropdown = (definition, warnOnFilter)=>{
+            const items = definition.items.filter((itemName)=>availableComponentNames.has(itemName));
+            if (warnOnFilter && items.length !== definition.items.length) {
+                warnInvalidDropdown({
+                    dropdown: definition
+                });
+            }
+            if (items.length < 2) {
+                return;
+            }
+            const defaultItem = availableComponentNames.has(definition.defaultItem) ? definition.defaultItem : items[0];
+            dropdowns.push({
+                name: definition.name,
+                title: titles[definition.title] || definition.title,
+                items,
+                defaultItem
+            });
+        };
+        for (const definition of DEFAULT_DROPDOWN_DEFINITIONS){
+            resolveDropdown(definition, false);
+        }
+        for (const definition of this._collectCustomDropdowns()){
+            resolveDropdown(definition, true);
+        }
+        return dropdowns;
+    }
+    /**
+	 * Scans `config.mediaEmbed.toolbar` for entries shaped like a dropdown definition
+	 * (objects with both `items` and `defaultItem`) and returns the valid ones. `defaultItem`
+	 * is the discriminator between our split-button dropdowns and generic toolbar groupings
+	 * (which use `items` + `label` and have no `defaultItem`).
+	 *
+	 * Invalid entries (wrong name prefix, `defaultItem` missing from `items`) are warned and
+	 * dropped here. Items that reference filtered-out styles are filtered later by
+	 * {@link #_getDropdownDefinitions}, alongside the same logic that applies to built-in
+	 * dropdowns.
+	 */ _collectCustomDropdowns() {
+        const toolbarConfig = this.editor.config.get('mediaEmbed.toolbar') || [];
+        return toolbarConfig.filter((item)=>isMediaStyleDropdown(item) && isValidCustomDropdown(item));
+    }
+    /**
+	 * Registers a single alignment toggle button in the component factory.
+	 */ _createButton(definition) {
+        const editor = this.editor;
+        const componentName = `mediaEmbed:${definition.name}`;
+        editor.ui.componentFactory.add(componentName, (locale)=>{
+            const command = editor.commands.get('mediaStyle');
+            const view = new ButtonView(locale);
+            view.set({
+                label: definition.label,
+                icon: definition.icon,
+                tooltip: true,
+                isToggleable: true
+            });
+            view.bind('isEnabled').to(command, 'isEnabled');
+            view.bind('isOn').to(command, 'value', (value)=>value === definition.name);
+            view.on('execute', ()=>{
+                editor.execute('mediaStyle', {
+                    value: definition.name
+                });
+                editor.editing.view.focus();
+            });
+            return view;
+        });
+    }
+    /**
+	 * Registers a split-button dropdown grouping a set of alignment buttons. The action button
+	 * reflects whichever child option is currently `isOn`, falling back to the dropdown's
+	 * `defaultItem` when nothing is active.
+	 */ _createDropdown(definition) {
+        const editor = this.editor;
+        const factory = editor.ui.componentFactory;
+        factory.add(definition.name, (locale)=>{
+            // Build child buttons via the factory; pick the default by name.
+            const buttonViews = definition.items.map((itemName)=>factory.create(itemName));
+            const defaultButton = buttonViews[definition.items.indexOf(definition.defaultItem)];
+            // Resolve the currently-active child or fall back to the default. Used by the
+            // reactive `icon` and `label` bindings on the split button.
+            const activeOrDefault = (...areOn)=>{
+                const index = areOn.findIndex(Boolean);
+                return index < 0 ? defaultButton : buttonViews[index];
+            };
+            // Build the dropdown shell.
+            const dropdownView = createDropdown(locale, SplitButtonView);
+            const splitButtonView = dropdownView.buttonView;
+            addToolbarToDropdown(dropdownView, buttonViews, {
+                enableActiveItemFocusOnDropdownOpen: true
+            });
+            splitButtonView.set({
+                label: getDropdownButtonTitle(definition.title, defaultButton.label),
+                class: null,
+                tooltip: true
+            });
+            splitButtonView.arrowView.unbind('label');
+            splitButtonView.arrowView.set({
+                label: definition.title
+            });
+            // Reactive: action button mirrors the active child's icon and label.
+            splitButtonView.bind('icon').toMany(buttonViews, 'isOn', (...areOn)=>activeOrDefault(...areOn).icon);
+            splitButtonView.bind('label').toMany(buttonViews, 'isOn', (...areOn)=>getDropdownButtonTitle(definition.title, activeOrDefault(...areOn).label));
+            // Reactive: split button shows the "active" state when any child is on.
+            splitButtonView.bind('isOn').toMany(buttonViews, 'isOn', (...areOn)=>areOn.some(Boolean));
+            splitButtonView.bind('class').toMany(buttonViews, 'isOn', (...areOn)=>areOn.some(Boolean) ? 'ck-splitbutton_flatten' : undefined);
+            // Action click: re-fire the default child when nothing is active; otherwise toggle the dropdown.
+            this.listenTo(splitButtonView, 'execute', ()=>{
+                if (buttonViews.some(({ isOn })=>isOn)) {
+                    dropdownView.isOpen = !dropdownView.isOpen;
+                } else {
+                    defaultButton.fire('execute');
+                }
+            });
+            // Reactive: dropdown is enabled when any child is enabled.
+            dropdownView.bind('isEnabled').toMany(buttonViews, 'isEnabled', (...areEnabled)=>areEnabled.some(Boolean));
+            // Refocus the editing view so the dropdown action doesn't steal caret position.
+            this.listenTo(dropdownView, 'execute', ()=>{
+                editor.editing.view.focus();
+            });
+            return dropdownView;
+        });
+    }
+}
+/**
+ * Combines the dropdown title and the default action item label for the split-button label.
+ */ function getDropdownButtonTitle(dropdownTitle, buttonTitle) {
+    return `${dropdownTitle}: ${buttonTitle}`;
+}
+/**
+ * Validates a user-supplied dropdown definition. Emits a console warning under
+ * `media-style-configuration-definition-invalid` and returns `false` when any of these rules is
+ * broken: `name` must start with `mediaEmbed:`, `title` must be a non-empty string, `items` must
+ * be non-empty and every entry must be a `mediaEmbed:`-prefixed string, and `defaultItem` must be
+ * one of the `items`.
+ *
+ * Item-membership against the resolved styles is checked separately, downstream, alongside the
+ * same logic that applies to built-in dropdowns.
+ */ function isValidCustomDropdown(definition) {
+    const valid = definition.name.startsWith('mediaEmbed:') && typeof definition.title === 'string' && definition.title.length > 0 && definition.items.length > 0 && definition.items.every((name)=>typeof name === 'string' && name.startsWith('mediaEmbed:')) && definition.items.includes(definition.defaultItem);
+    if (!valid) {
+        warnInvalidDropdown({
+            dropdown: definition
+        });
+    }
+    return valid;
+}
+/**
+ * Emits a console warning under `media-style-configuration-definition-invalid` for an invalid
+ * or partially-honored dropdown definition. Called from {@link ~isValidCustomDropdown} for
+ * structural problems and from {@link MediaEmbedStyleUI#_getDropdownDefinitions} when items
+ * reference styles that are not in the resolved options list.
+ */ function warnInvalidDropdown(info) {
+    logWarning('media-style-configuration-definition-invalid', info);
+}
+
+/**
+ * The media embed style plugin.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ * * {@link module:media-embed/mediaembedstyle/mediaembedstyleediting~MediaEmbedStyleEditing},
+ * * {@link module:media-embed/mediaembedstyle/mediaembedstyleui~MediaEmbedStyleUI}
+ *
+ * For a detailed overview, check the {@glink features/media-embed/media-embed-styles Media embed styles feature documentation}.
+ */ class MediaEmbedStyle extends Plugin {
+    /**
+	 * @inheritDoc
+	 */ static get requires() {
+        return [
+            MediaEmbedStyleEditing,
+            MediaEmbedStyleUI
+        ];
+    }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'MediaEmbedStyle';
+    }
+    /**
+	 * @inheritDoc
+	 */ static get isOfficialPlugin() {
+        return true;
+    }
+}
 
-export { AutoMediaEmbed, MediaEmbed, MediaEmbedCommand, MediaEmbedEditing, MediaEmbedToolbar, MediaEmbedUI, MediaRegistry, MediaFormView as _MediaFormView, createMediaFigureElement as _createMediaFigureElement, getSelectedMediaModelWidget as _getSelectedMediaModelWidget, getSelectedMediaViewWidget as _getSelectedMediaViewWidget, insertMedia as _insertMedia, isMediaWidget as _isMediaWidget, modelToViewUrlAttributeConverter as _modelToViewUrlAttributeMediaConverter, toMediaWidget as _toMediaWidget };
+export { AutoMediaEmbed, MediaEmbed, MediaEmbedCommand, MediaEmbedEditing, MediaEmbedResize, MediaEmbedResizeEditing, MediaEmbedResizeHandles, MediaEmbedStyle, MediaEmbedStyleCommand, MediaEmbedStyleEditing, MediaEmbedStyleUI, MediaEmbedToolbar, MediaEmbedUI, MediaRegistry, ResizeMediaEmbedCommand, MediaFormView as _MediaFormView, createMediaFigureElement as _createMediaFigureElement, getSelectedMediaModelWidget as _getSelectedMediaModelWidget, getSelectedMediaViewWidget as _getSelectedMediaViewWidget, insertMedia as _insertMedia, isMediaWidget as _isMediaWidget, modelToViewUrlAttributeConverter as _modelToViewUrlAttributeMediaConverter, toMediaWidget as _toMediaWidget };
 //# sourceMappingURL=index.js.map