@ckeditor/ckeditor5-media-embed 48.8.1-alpha.4 → 49.0.0-alpha.0

package/ckeditor5-metadata.json

@@ -4,7 +4,7 @@
 			"name": "Media embed",
 			"className": "MediaEmbed",
 			"description": "Allows for inserting embeddable media such as YouTube or Vimeo videos, Instagram posts and tweets or Google Maps into your rich-text content.",
-			"docs": "features/media-embed.html",
+			"docs": "features/media-embed/media-embed.html",
 			"path": "src/mediaembed.ts",
 			"uiComponents": [
 				{
@@ -37,27 +37,25 @@
 				},
 				{
 					"elements": "div",
-					"styles": [
-						"height",
-						"padding-bottom",
-						"position"
-					],
 					"isAlternative": true,
-					"_comment": "If `config.mediaEmbed.previewsInData` is turned on, the media preview is displayed in the view."
+					"_comment": "A plain wrapper element placed between the outer `<div data-oembed-url>` and the preview `<iframe>`."
 				},
 				{
 					"elements": "iframe",
 					"styles": [
+						"aspect-ratio",
+						"border",
+						"display",
 						"height",
-						"left",
-						"position",
-						"top",
 						"width"
 					],
 					"attributes": [
 						"*allow*",
 						"frameborder",
-						"src"
+						"height",
+						"referrerpolicy",
+						"src",
+						"width"
 					],
 					"isAlternative": true,
 					"_comment": "If `config.mediaEmbed.previewsInData` is turned on, the media preview is displayed in the view."
@@ -72,11 +70,109 @@
 				}
 			]
 		},
+		{
+			"name": "Media embed resize",
+			"className": "MediaEmbedResize",
+			"description": "Allows for resizing media embeds using drag handles, a toolbar dropdown, or standalone buttons for predefined sizes plus a custom-width balloon.",
+			"docs": "features/media-embed/media-embed-resize.html",
+			"path": "src/mediaembedresize.ts",
+			"requires": [
+				"MediaEmbed"
+			],
+			"htmlOutput": [
+				{
+					"elements": "figure",
+					"classes": "media_resized",
+					"styles": [
+						"width"
+					]
+				}
+			]
+		},
+		{
+			"name": "Media embed style",
+			"className": "MediaEmbedStyle",
+			"description": "Adds configurable styles (such as alignments) to media embeds.",
+			"docs": "features/media-embed/media-embed-styles.html",
+			"path": "src/mediaembedstyle.ts",
+			"requires": [
+				"MediaEmbed"
+			],
+			"uiComponents": [
+				{
+					"type": "Button",
+					"name": "mediaEmbed:alignLeft",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectInlineLeft"
+				},
+				{
+					"type": "Button",
+					"name": "mediaEmbed:alignBlockLeft",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectLeft"
+				},
+				{
+					"type": "Button",
+					"name": "mediaEmbed:alignCenter",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectCenter"
+				},
+				{
+					"type": "Button",
+					"name": "mediaEmbed:alignBlockRight",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectRight"
+				},
+				{
+					"type": "Button",
+					"name": "mediaEmbed:alignRight",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectInlineRight"
+				},
+				{
+					"type": "SplitButton",
+					"name": "mediaEmbed:wrapText",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectInlineLeft"
+				},
+				{
+					"type": "SplitButton",
+					"name": "mediaEmbed:breakText",
+					"toolbars": [
+						"mediaEmbed.toolbar"
+					],
+					"iconName": "IconObjectCenter"
+				}
+			],
+			"htmlOutput": [
+				{
+					"elements": "figure",
+					"classes": [
+						"media-style-align-left",
+						"media-style-block-align-left",
+						"media-style-block-align-right",
+						"media-style-align-right"
+					]
+				}
+			]
+		},
 		{
 			"name": "Media embed toolbar",
 			"className": "MediaEmbedToolbar",
 			"description": "Implements an optional toolbar for media embed that shows when the media element is selected.",
-			"docs": "features/media-embed.html",
+			"docs": "features/media-embed/media-embed.html",
 			"path": "src/mediaembedtoolbar.ts",
 			"requires": [
 				"MediaEmbed"

package/dist/augmentation.d.ts

@@ -1,25 +1,35 @@
 /**
- * @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
- */
-import type { MediaEmbedConfig, AutoMediaEmbed, MediaEmbed, MediaEmbedEditing, MediaEmbedToolbar, MediaEmbedUI, MediaEmbedCommand } from './index.js';
-declare module '@ckeditor/ckeditor5-core' {
-    interface EditorConfig {
-        /**
-         * The configuration of the {@link module:media-embed/mediaembed~MediaEmbed} feature.
-         *
-         * Read more in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig}.
-         */
-        mediaEmbed?: MediaEmbedConfig;
-    }
-    interface PluginsMap {
-        [AutoMediaEmbed.pluginName]: AutoMediaEmbed;
-        [MediaEmbed.pluginName]: MediaEmbed;
-        [MediaEmbedEditing.pluginName]: MediaEmbedEditing;
-        [MediaEmbedToolbar.pluginName]: MediaEmbedToolbar;
-        [MediaEmbedUI.pluginName]: MediaEmbedUI;
-    }
-    interface CommandsMap {
-        mediaEmbed: MediaEmbedCommand;
-    }
+* @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
+*/
+import type { MediaEmbedConfig, AutoMediaEmbed, MediaEmbed, MediaEmbedEditing, MediaEmbedToolbar, MediaEmbedUI, MediaEmbedCommand, MediaEmbedResize, MediaEmbedResizeEditing, MediaEmbedResizeHandles, MediaEmbedResizeButtons, MediaEmbedCustomResizeUI, ResizeMediaEmbedCommand, MediaEmbedStyle, MediaEmbedStyleEditing, MediaEmbedStyleUI, MediaEmbedStyleCommand } from "./index.js";
+declare module "@ckeditor/ckeditor5-core" {
+	interface EditorConfig {
+		/**
+		* The configuration of the {@link module:media-embed/mediaembed~MediaEmbed} feature.
+		*
+		* Read more in {@link module:media-embed/mediaembedconfig~MediaEmbedConfig}.
+		*/
+		mediaEmbed?: MediaEmbedConfig;
+	}
+	interface PluginsMap {
+		[AutoMediaEmbed.pluginName]: AutoMediaEmbed;
+		[MediaEmbed.pluginName]: MediaEmbed;
+		[MediaEmbedEditing.pluginName]: MediaEmbedEditing;
+		[MediaEmbedToolbar.pluginName]: MediaEmbedToolbar;
+		[MediaEmbedUI.pluginName]: MediaEmbedUI;
+		[MediaEmbedResize.pluginName]: MediaEmbedResize;
+		[MediaEmbedResizeEditing.pluginName]: MediaEmbedResizeEditing;
+		[MediaEmbedResizeHandles.pluginName]: MediaEmbedResizeHandles;
+		[MediaEmbedResizeButtons.pluginName]: MediaEmbedResizeButtons;
+		[MediaEmbedCustomResizeUI.pluginName]: MediaEmbedCustomResizeUI;
+		[MediaEmbedStyle.pluginName]: MediaEmbedStyle;
+		[MediaEmbedStyleEditing.pluginName]: MediaEmbedStyleEditing;
+		[MediaEmbedStyleUI.pluginName]: MediaEmbedStyleUI;
+	}
+	interface CommandsMap {
+		mediaEmbed: MediaEmbedCommand;
+		resizeMediaEmbed: ResizeMediaEmbedCommand;
+		mediaStyle: MediaEmbedStyleCommand;
+	}
 }

package/dist/automediaembed.d.ts

@@ -1,55 +1,55 @@
 /**
- * @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
- */
+* @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/automediaembed
- */
-import { type Editor, Plugin } from '@ckeditor/ckeditor5-core';
-import { Clipboard } from '@ckeditor/ckeditor5-clipboard';
-import { Delete } from '@ckeditor/ckeditor5-typing';
-import { Undo } from '@ckeditor/ckeditor5-undo';
+* @module media-embed/automediaembed
+*/
+import { type Editor, Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { Clipboard } from "@ckeditor/ckeditor5-clipboard";
+import { Delete } from "@ckeditor/ckeditor5-typing";
+import { Undo } from "@ckeditor/ckeditor5-undo";
 /**
- * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
- * them shortly after they are injected into the document.
- */
+* The auto-media embed plugin. It recognizes media links in the pasted content and embeds
+* them shortly after they are injected into the document.
+*/
 export declare class AutoMediaEmbed extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get requires(): readonly [typeof Clipboard, typeof Delete, typeof Undo];
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "AutoMediaEmbed";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * The paste–to–embed `setTimeout` ID. Stored as a property to allow
-     * cleaning of the timeout.
-     */
-    private _timeoutId;
-    /**
-     * The position where the `<media>` element will be inserted after the timeout,
-     * determined each time the new content is pasted into the document.
-     */
-    private _positionToInsert;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): void;
-    /**
-     * Analyzes the part of the document between provided positions in search for a URL representing media.
-     * When the URL is found, it is automatically converted into media.
-     *
-     * @param leftPosition Left position of the selection.
-     * @param rightPosition Right position of the selection.
-     */
-    private _embedMediaBetweenPositions;
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[Clipboard, Delete, Undo]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "AutoMediaEmbed";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* The paste–to–embed `setTimeout` ID. Stored as a property to allow
+	* cleaning of the timeout.
+	*/
+	private _timeoutId;
+	/**
+	* The position where the `<media>` element will be inserted after the timeout,
+	* determined each time the new content is pasted into the document.
+	*/
+	private _positionToInsert;
+	/**
+	* @inheritDoc
+	*/
+	constructor(editor: Editor);
+	/**
+	* @inheritDoc
+	*/
+	init(): void;
+	/**
+	* Analyzes the part of the document between provided positions in search for a URL representing media.
+	* When the URL is found, it is automatically converted into media.
+	*
+	* @param leftPosition Left position of the selection.
+	* @param rightPosition Right position of the selection.
+	*/
+	private _embedMediaBetweenPositions;
 }

package/dist/converters.d.ts

@@ -1,40 +1,40 @@
 /**
- * @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
- */
-import type { DowncastDispatcher } from '@ckeditor/ckeditor5-engine';
-import { type MediaRegistry } from './mediaregistry.js';
-import type { MediaOptions } from './utils.js';
+* @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
+*/
+import type { DowncastDispatcher } from "@ckeditor/ckeditor5-engine";
+import { type MediaRegistry } from "./mediaregistry.js";
+import type { MediaOptions } from "./utils.js";
 /**
- * Returns a function that converts the model "url" attribute to the view representation.
- *
- * Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
- *
- * ```html
- * <figure class="media">
- * 	<oembed url="foo"></oembed>
- * </figure>
- * ```
- *
- * or "non-semantic" (for the editing view pipeline):
- *
- * ```html
- * <figure class="media">
- * 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
- * </figure>
- * ```
- *
- * **Note:** Changing the model "url" attribute replaces the entire content of the
- * `<figure>` in the view.
- *
- * @param registry The registry providing
- * the media and their content.
- * @param options options object with following properties:
- * - elementName When set, overrides the default element name for semantic media embeds.
- * - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
- * - renderForEditingView When `true`, the converter will create a view specific for the
- * editing pipeline (e.g. including CSS classes, content placeholders).
- *
- * @internal
- */
+* Returns a function that converts the model "url" attribute to the view representation.
+*
+* Depending on the configuration, the view representation can be "semantic" (for the data pipeline):
+*
+* ```html
+* <figure class="media">
+* 	<oembed url="foo"></oembed>
+* </figure>
+* ```
+*
+* or "non-semantic" (for the editing view pipeline):
+*
+* ```html
+* <figure class="media">
+* 	<div data-oembed-url="foo">[ non-semantic media preview for "foo" ]</div>
+* </figure>
+* ```
+*
+* **Note:** Changing the model "url" attribute replaces the entire content of the
+* `<figure>` in the view.
+*
+* @param registry The registry providing
+* the media and their content.
+* @param options options object with following properties:
+* - elementName When set, overrides the default element name for semantic media embeds.
+* - renderMediaPreview When `true`, the converter will create the view in the non-semantic form.
+* - renderForEditingView When `true`, the converter will create a view specific for the
+* editing pipeline (e.g. including CSS classes, content placeholders).
+*
+* @internal
+*/
 export declare function modelToViewUrlAttributeConverter(registry: MediaRegistry, options: MediaOptions): (dispatcher: DowncastDispatcher) => void;

package/dist/index-content.css

@@ -2,9 +2,57 @@
  * @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
  */
-.ck-content .media{
-  clear:both;
-  min-width:15em;
-  margin:.9em 0;
-  display:block;
-}
+.ck-content .media {
+  clear: both;
+  min-width: 15em;
+  margin: .9em auto;
+  display: block;
+}
+
+.ck-content .media:has( > div[data-oembed-url*="open.spotify.com"]) {
+  width: 300px;
+  min-width: 286px;
+}
+
+.ck-content .media.media_resized {
+  box-sizing: border-box;
+  max-width: 100%;
+  display: block;
+
+  & > div[data-oembed-url] {
+    width: 100%;
+  }
+}
+
+:root, :host {
+  --ck-content-media-style-spacing: 1.5em;
+}
+
+.ck-content {
+  & .media.media-style-align-left, & .media.media-style-align-right {
+    clear: none;
+    width: 100%;
+  }
+
+  & .media.media-style-align-left {
+    float: left;
+    margin-right: var(--ck-content-media-style-spacing);
+  }
+
+  & .media.media-style-align-right {
+    float: right;
+    margin-left: var(--ck-content-media-style-spacing);
+  }
+
+  & .media.media-style-block-align-left {
+    margin-left: 0;
+    margin-right: auto;
+  }
+
+  & .media.media-style-block-align-right {
+    margin-left: auto;
+    margin-right: 0;
+  }
+}
+
+/*# sourceMappingURL=index-content.css.map */

package/dist/index-content.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../theme/index-content.css","index-content.css"],"names":[],"mappings":"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","file":"index-content.css.map","sourcesContent":["/*\n * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n.ck-content .media {\n\t/* Don't allow floated content overlap the media.\n\thttps://github.com/ckeditor/ckeditor5-media-embed/issues/53 */\n\tclear: both;\n\n\t/* Make sure there is some space between the content and the media. */\n\t/* The first value should be equal to --ck-spacing-large variable if used in the editor context\n\tto avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */\n\tmargin: 0.9em auto;\n\n\t/* Make sure media is not overriden with Bootstrap default `flex` value.\n\tSee: https://github.com/ckeditor/ckeditor5/issues/1373. */\n\tdisplay: block;\n\n\t/* Give the media some minimal width in the content to prevent them\n\tfrom being \"squashed\" in tight spaces, e.g. in table cells (https://github.com/ckeditor/ckeditor5-media-embed/issues/44) */\n\tmin-width: 15em;\n}\n\n/* Preserve the historical 300px default size for unresized Spotify embeds (backward\n   compatibility). Set on the figure so the selection outline hugs the embed; an inline\n   `style=\"width: X%\"` from resize beats this rule.\n   Spotify's responsive breakpoint is 280px — below it the embed's internal layout\n   switches and the iframe's declared aspect ratio no longer matches. The 286px min-width\n   reserves 3px per side for the widget border that track changes suggestion markers\n   (insertion, deletion, formatInline) paint on the figure, so the iframe interior stays\n   at or above 280px even with an active marker. */\n.ck-content .media:has(> div[data-oembed-url*=\"open.spotify.com\"]) {\n\twidth: 300px;\n\tmin-width: 286px;\n}\n.ck-content .media.media_resized {\n\tdisplay: block;\n\tbox-sizing: border-box;\n\tmax-width: 100%;\n\n\t/* The wrapper should fill the figure when an explicit width is set. */\n\t& > div[data-oembed-url] {\n\t\twidth: 100%;\n\t}\n}\n:root,\n:host {\n\t/* Side spacing between a floated media and surrounding text. */\n\t--ck-content-media-style-spacing: 1.5em;\n}\n.ck-content {\n\t/* `clear: none` lets multiple floats stack horizontally. `width: 100%` keeps float\n\t   from collapsing the iframe to its 300×150 default; resize's inline `style=\"width: …\"`\n\t   and Spotify's `:has()` rule in mediaembedediting.css both win on specificity. */\n\t& .media.media-style-align-left,\n\t& .media.media-style-align-right {\n\t\tclear: none;\n\t\twidth: 100%;\n\t}\n\n\t& .media.media-style-align-left {\n\t\tfloat: left;\n\t\tmargin-right: var(--ck-content-media-style-spacing);\n\t}\n\n\t& .media.media-style-align-right {\n\t\tfloat: right;\n\t\tmargin-left: var(--ck-content-media-style-spacing);\n\t}\n\n\t/* Margin-auto shifts a width-constrained figure within its line — a no-op for full-width\n\t   figures, visible once a width constraint applies (resize's inline width, or Spotify's\n\t   backward-compat 300px). */\n\t& .media.media-style-block-align-left {\n\t\tmargin-left: 0;\n\t\tmargin-right: auto;\n\t}\n\n\t& .media.media-style-block-align-right {\n\t\tmargin-left: auto;\n\t\tmargin-right: 0;\n\t}\n}\n",".ck-content .media {\n  clear: both;\n  min-width: 15em;\n  margin: .9em auto;\n  display: block;\n}\n\n.ck-content .media:has( > div[data-oembed-url*=\"open.spotify.com\"]) {\n  width: 300px;\n  min-width: 286px;\n}\n\n.ck-content .media.media_resized {\n  box-sizing: border-box;\n  max-width: 100%;\n  display: block;\n\n  & > div[data-oembed-url] {\n    width: 100%;\n  }\n}\n\n:root, :host {\n  --ck-content-media-style-spacing: 1.5em;\n}\n\n.ck-content {\n  & .media.media-style-align-left, & .media.media-style-align-right {\n    clear: none;\n    width: 100%;\n  }\n\n  & .media.media-style-align-left {\n    float: left;\n    margin-right: var(--ck-content-media-style-spacing);\n  }\n\n  & .media.media-style-align-right {\n    float: right;\n    margin-left: var(--ck-content-media-style-spacing);\n  }\n\n  & .media.media-style-block-align-left {\n    margin-left: 0;\n    margin-right: auto;\n  }\n\n  & .media.media-style-block-align-right {\n    margin-left: auto;\n    margin-right: 0;\n  }\n}\n\n/*# sourceMappingURL=index-content.css.map */"]}