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

package/dist/mediaembedediting.d.ts

@@ -1,35 +1,34 @@
 /**
- * @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/mediaembedediting
- */
-import { Plugin, type Editor } from '@ckeditor/ckeditor5-core';
-import { MediaRegistry } from './mediaregistry.js';
-import '../theme/mediaembedediting.css';
+* @module media-embed/mediaembedediting
+*/
+import { Plugin, type Editor } from "@ckeditor/ckeditor5-core";
+import { MediaRegistry } from "./mediaregistry.js";
 /**
- * The media embed editing feature.
- */
+* The media embed editing feature.
+*/
 export declare class MediaEmbedEditing extends Plugin {
-    /**
-     * @inheritDoc
-     */
-    static get pluginName(): "MediaEmbedEditing";
-    /**
-     * @inheritDoc
-     */
-    static get isOfficialPlugin(): true;
-    /**
-     * The media registry managing the media providers in the editor.
-     */
-    registry: MediaRegistry;
-    /**
-     * @inheritDoc
-     */
-    constructor(editor: Editor);
-    /**
-     * @inheritDoc
-     */
-    init(): void;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "MediaEmbedEditing";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* The media registry managing the media providers in the editor.
+	*/
+	registry: MediaRegistry;
+	/**
+	* @inheritDoc
+	*/
+	constructor(editor: Editor);
+	/**
+	* @inheritDoc
+	*/
+	init(): void;
 }

package/dist/mediaembedresize/constants.d.ts

@@ -0,0 +1,17 @@
+/**
+* @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
+*/
+export declare const RESIZED_MEDIA_CLASS = "media_resized";

package/dist/mediaembedresize/mediaembedcustomresizeui.d.ts

@@ -0,0 +1,64 @@
+/**
+* @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/mediaembedcustomresizeui
+*/
+import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { ContextualBalloon } from "@ckeditor/ckeditor5-ui";
+/**
+* The custom resize media embed UI plugin.
+*
+* The plugin uses the {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon}.
+*/
+export declare class MediaEmbedCustomResizeUI extends Plugin {
+	/**
+	* The contextual balloon plugin instance.
+	*/
+	private _balloon?;
+	/**
+	* A form used to set the custom resize width.
+	*/
+	private _form?;
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[ContextualBalloon]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "MediaEmbedCustomResizeUI";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	override destroy(): void;
+	/**
+	* Creates the {@link module:media-embed/mediaembedresize/ui/mediaembedcustomresizeformview~MediaEmbedCustomResizeFormView} form.
+	*/
+	private _createForm;
+	/**
+	* Shows the {@link #_form} in the {@link #_balloon}.
+	*
+	* @internal
+	*/
+	_showForm(unit: string): void;
+	/**
+	* Removes the {@link #_form} from the {@link #_balloon}.
+	*
+	* @param focusEditable Controls whether the editing view is focused afterwards.
+	*/
+	private _hideForm;
+	/**
+	* Returns `true` when the {@link #_form} is the visible view in the {@link #_balloon}.
+	*/
+	private get _isVisible();
+	/**
+	* Returns `true` when the {@link #_form} is in the {@link #_balloon}.
+	*/
+	private get _isInBalloon();
+}

package/dist/mediaembedresize/mediaembedresizebuttons.d.ts

@@ -0,0 +1,54 @@
+/**
+* @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/mediaembedresizebuttons
+*/
+import { Plugin, type Editor, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { MediaEmbedResizeEditing } from "./mediaembedresizeediting.js";
+/**
+* The media embed resize buttons plugin.
+*
+* It adds a possibility to resize media embeds using the toolbar dropdown or individual buttons,
+* depending on the plugin configuration.
+*/
+export declare class MediaEmbedResizeButtons extends Plugin {
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[MediaEmbedResizeEditing]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "MediaEmbedResizeButtons";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	private readonly _resizeUnit;
+	/**
+	* @inheritDoc
+	*/
+	constructor(editor: Editor);
+	/**
+	* @inheritDoc
+	*/
+	init(): void;
+	/**
+	* Creates a standalone button component for the given resize option.
+	*/
+	private _registerMediaEmbedResizeButton;
+	/**
+	* Creates the dropdown component containing all resize options.
+	*/
+	private _registerMediaEmbedResizeDropdown;
+	/**
+	* Returns a label for the given resize option.
+	*/
+	private _getOptionLabelValue;
+	/**
+	* Returns list item definitions for the resize dropdown.
+	*/
+	private _getResizeDropdownListItemDefinitions;
+}

package/dist/mediaembedresize/mediaembedresizeediting.d.ts

@@ -0,0 +1,51 @@
+/**
+* @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 { Plugin, type Editor, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { MediaEmbedEditing } from "../mediaembedediting.js";
+/**
+* The media embed resize editing feature.
+*
+* It adds the ability to resize each media embed using handles.
+*/
+export declare class MediaEmbedResizeEditing extends Plugin {
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[MediaEmbedEditing]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "MediaEmbedResizeEditing";
+	/**
+	* @inheritDoc
+	* @internal
+	*/
+	static get licenseFeatureCode(): string;
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	static override get isPremiumPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	constructor(editor: Editor);
+	/**
+	* @inheritDoc
+	*/
+	init(): void;
+	/**
+	* @inheritDoc
+	*/
+	afterInit(): void;
+	private _registerSchema;
+	/**
+	* Registers media embed resize converters.
+	*/
+	private _registerConverters;
+}

package/dist/mediaembedresize/mediaembedresizehandles.d.ts

@@ -0,0 +1,42 @@
+/**
+* @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 { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { WidgetResize } from "@ckeditor/ckeditor5-widget";
+/**
+* The media embed resize by handles feature.
+*
+* It adds the ability to resize each media embed using handles.
+*/
+export declare class MediaEmbedResizeHandles extends Plugin {
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[WidgetResize]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "MediaEmbedResizeHandles";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+	/**
+	* @inheritDoc
+	*/
+	init(): void;
+	/**
+	* 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.
+	*/
+	private _setupResizerCreator;
+	/**
+	* Attaches a resizer to a single media widget.
+	*/
+	private _attachResizer;
+}

package/dist/mediaembedresize/resizemediaembedcommand.d.ts

@@ -0,0 +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
+*/
+/**
+* @module media-embed/mediaembedresize/resizemediaembedcommand
+*/
+import { Command } from "@ckeditor/ckeditor5-core";
+/**
+* The resize media embed command.
+*/
+export declare class ResizeMediaEmbedCommand extends Command {
+	/**
+	* The current width of the selected media embed, or `null` if not resized.
+	*/
+	value: string | null;
+	/**
+	* @inheritDoc
+	*/
+	override refresh(): void;
+	/**
+	* 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
+	*/
+	override execute(options: {
+		width: string | null;
+	}): void;
+}

package/dist/mediaembedresize/ui/mediaembedcustomresizeformview.d.ts

@@ -0,0 +1,117 @@
+/**
+* @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/ui/mediaembedcustomresizeformview
+*/
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, type FocusableView, type InputNumberView } from "@ckeditor/ckeditor5-ui";
+import { FocusTracker, KeystrokeHandler, type Locale } from "@ckeditor/ckeditor5-utils";
+/**
+* The MediaEmbedCustomResizeFormView class.
+*
+* @internal
+*/
+export declare class MediaEmbedCustomResizeFormView extends View {
+	/**
+	* Tracks information about the DOM focus in the form.
+	*/
+	readonly focusTracker: FocusTracker;
+	/**
+	* An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	*/
+	readonly keystrokes: KeystrokeHandler;
+	/**
+	* Resize unit shortcut.
+	*/
+	readonly unit: string;
+	/**
+	* The Back button view displayed in the header.
+	*/
+	backButtonView: ButtonView;
+	/**
+	* A button used to submit the form.
+	*/
+	saveButtonView: ButtonView;
+	/**
+	* An input with a label.
+	*/
+	labeledInput: LabeledFieldView<InputNumberView>;
+	/**
+	* A collection of child views.
+	*/
+	readonly children: ViewCollection;
+	/**
+	* A collection of views which can be focused in the form.
+	*/
+	protected readonly _focusables: ViewCollection<FocusableView>;
+	/**
+	* Helps cycling over {@link #_focusables} in the form.
+	*/
+	protected readonly _focusCycler: FocusCycler;
+	/**
+	* An array of form validators used by {@link #isValid}.
+	*/
+	private readonly _validators;
+	/**
+	* @inheritDoc
+	*/
+	constructor(locale: Locale, unit: string, validators: Array<MediaEmbedCustomResizeFormValidatorCallback>);
+	/**
+	* @inheritDoc
+	*/
+	override render(): void;
+	/**
+	* @inheritDoc
+	*/
+	override destroy(): void;
+	private _createBackButton;
+	private _createSaveButton;
+	private _createHeaderView;
+	private _createLabeledInputView;
+	/**
+	* Validates the form and returns `false` when some fields are invalid.
+	*/
+	isValid(): boolean;
+	/**
+	* Cleans up error and information text of {@link #labeledInput}.
+	*/
+	resetFormStatus(): void;
+	/**
+	* The native DOM `value` of the input element of {@link #labeledInput}.
+	*/
+	get rawSize(): string | null;
+	/**
+	* Get numeric value of size. Returns `null` if value is not a number.
+	*/
+	get parsedSize(): number | null;
+	/**
+	* Returns serialized media embed input size with unit.
+	* Returns `null` if value is not a number.
+	*/
+	get sizeWithUnits(): string | null;
+}
+/**
+* Callback used by {@link ~MediaEmbedCustomResizeFormView} to check if passed form value is valid.
+*
+* @internal
+*/
+export type MediaEmbedCustomResizeFormValidatorCallback = (form: MediaEmbedCustomResizeFormView) => string | undefined;
+/**
+* Fired when the form view is submitted.
+*
+* @eventName ~MediaEmbedCustomResizeFormView#submit
+*/
+export type MediaEmbedCustomResizeFormViewSubmitEvent = {
+	name: "submit";
+	args: [];
+};
+/**
+* Fired when the form view is canceled.
+*
+* @eventName ~MediaEmbedCustomResizeFormView#cancel
+*/
+export type MediaEmbedCustomResizeFormViewCancelEvent = {
+	name: "cancel";
+	args: [];
+};

package/dist/mediaembedresize/utils/getselectedmediaembededitornodes.d.ts

@@ -0,0 +1,23 @@
+/**
+* @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/utils/getselectedmediaembededitornodes
+*/
+import type { ViewElement, ModelElement } from "@ckeditor/ckeditor5-engine";
+import type { Editor } from "@ckeditor/ckeditor5-core";
+/**
+* Finds model, view and DOM element for selected media embed element.
+* Returns `null` if there is no media embed selected.
+*
+* @param editor Editor instance.
+* @internal
+*/
+export declare function getSelectedMediaEmbedEditorNodes(editor: Editor): MediaEmbedEditorNodes | null;
+type MediaEmbedEditorNodes = {
+	model: ModelElement;
+	view: ViewElement;
+	dom: HTMLElement;
+};
+export {};

package/dist/mediaembedresize/utils/getselectedmediaembedpossibleresizerange.d.ts

@@ -0,0 +1,25 @@
+/**
+* @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/utils/getselectedmediaembedpossibleresizerange
+*/
+import type { Editor } from "@ckeditor/ckeditor5-core";
+/**
+* Returns the min and max resize values for the selected media embed in the specified unit.
+*
+* @param editor Editor instance.
+* @param targetUnit Unit in which dimension will be returned.
+* @returns Possible resize range in numeric form.
+* @internal
+*/
+export declare function getSelectedMediaEmbedPossibleResizeRange(editor: Editor, targetUnit: string): PossibleResizeMediaEmbedRange | null;
+/**
+* @internal
+*/
+export type PossibleResizeMediaEmbedRange = {
+	unit: string;
+	lower: number;
+	upper: number;
+};

package/dist/mediaembedresize/utils/getselectedmediaembedwidthinunits.d.ts

@@ -0,0 +1,21 @@
+/**
+* @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/utils/getselectedmediaembedwidthinunits
+*/
+import { type _DimensionWithUnit } from "@ckeditor/ckeditor5-utils";
+import type { Editor } from "@ckeditor/ckeditor5-core";
+/**
+* Returns media embed width in specified units after resize.
+*
+* 	* If no media embed is selected or command is disabled, `null` will be returned.
+*	* If `targetUnit` percentage is passed then it will return width percentage relative to its ancestor.
+*
+* @param editor Editor instance.
+* @param targetUnit Unit in which dimension will be returned.
+* @returns Parsed media embed width after resize (with unit).
+* @internal
+*/
+export declare function getSelectedMediaEmbedWidthInUnits(editor: Editor, targetUnit: string): _DimensionWithUnit | null;

package/dist/mediaembedresize.d.ts

@@ -0,0 +1,32 @@
+/**
+* @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
+*/
+import { Plugin, type PluginDependenciesOf } from "@ckeditor/ckeditor5-core";
+import { MediaEmbedResizeEditing } from "./mediaembedresize/mediaembedresizeediting.js";
+import { MediaEmbedResizeHandles } from "./mediaembedresize/mediaembedresizehandles.js";
+import { MediaEmbedResizeButtons } from "./mediaembedresize/mediaembedresizebuttons.js";
+import { MediaEmbedCustomResizeUI } from "./mediaembedresize/mediaembedcustomresizeui.js";
+/**
+* The media embed resize plugin.
+*
+* It adds a possibility to resize each media embed using handles, toolbar buttons,
+* or a balloon-hosted custom-width input.
+*/
+export declare class MediaEmbedResize extends Plugin {
+	/**
+	* @inheritDoc
+	*/
+	static get requires(): PluginDependenciesOf<[MediaEmbedResizeEditing, MediaEmbedResizeHandles, MediaEmbedCustomResizeUI, MediaEmbedResizeButtons]>;
+	/**
+	* @inheritDoc
+	*/
+	static get pluginName(): "MediaEmbedResize";
+	/**
+	* @inheritDoc
+	*/
+	static override get isOfficialPlugin(): true;
+}

package/dist/mediaembedstyle/constants.d.ts

@@ -0,0 +1,29 @@
+/**
+* @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 { MediaStyleDropdownDefinition, NormalizedMediaStyleOption } from "../mediaembedconfig.js";
+/**
+* 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
+*/
+export declare const DEFAULT_OPTIONS: Record<string, NormalizedMediaStyleOption>;
+/**
+* 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
+*/
+export declare const DEFAULT_ICONS: Record<string, string>;
+/**
+* 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
+*/
+export declare const DEFAULT_DROPDOWN_DEFINITIONS: Array<MediaStyleDropdownDefinition>;

package/dist/mediaembedstyle/mediaembedstylecommand.d.ts

@@ -0,0 +1,72 @@
+/**
+* @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/mediaembedstyle/mediaembedstylecommand
+*/
+import { Command, type Editor } from "@ckeditor/ckeditor5-core";
+import type { NormalizedMediaStyleOption } from "../mediaembedconfig.js";
+/**
+* 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}.
+*/
+export declare class MediaEmbedStyleCommand extends Command {
+	/**
+	* The currently-applied style name. `false` when no style applies — either no media is
+	* selected, or the selected media has no `mediaStyle` attribute and no style in
+	* {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#styles `config.mediaEmbed.styles`}
+	* is marked `isDefault: true`.
+	*/
+	value: string | false;
+	/**
+	* 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.
+	*/
+	private readonly _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.
+	*/
+	private readonly _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: Editor, styles: Array<NormalizedMediaStyleOption>);
+	/**
+	* @inheritDoc
+	*/
+	override refresh(): void;
+	/**
+	* 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
+	*/
+	override execute(options: {
+		value: string | null;
+	}): void;
+}