@ckeditor/ckeditor5-media-embed 41.3.1 → 41.4.0

package/dist/types/mediaembed.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/mediaembed
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Widget } from 'ckeditor5/src/widget.js';
+import MediaEmbedEditing from './mediaembedediting.js';
+import AutoMediaEmbed from './automediaembed.js';
+import MediaEmbedUI from './mediaembedui.js';
+import '../theme/mediaembed.css';
+/**
+ * The media embed plugin.
+ *
+ * For a detailed overview, check the {@glink features/media-embed Media Embed feature documentation}.
+ *
+ * This is a "glue" plugin which loads the following plugins:
+ *
+ * * The {@link module:media-embed/mediaembedediting~MediaEmbedEditing media embed editing feature},
+ * * The {@link module:media-embed/mediaembedui~MediaEmbedUI media embed UI feature} and
+ * * The {@link module:media-embed/automediaembed~AutoMediaEmbed auto-media embed feature}.
+ */
+export default class MediaEmbed extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof MediaEmbedEditing, typeof MediaEmbedUI, typeof AutoMediaEmbed, typeof Widget];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "MediaEmbed";
+}

package/dist/types/mediaembedcommand.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Command } from 'ckeditor5/src/core.js';
+/**
+ * The insert media command.
+ *
+ * The command is registered by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} as `'mediaEmbed'`.
+ *
+ * To insert media at the current selection, execute the command and specify the URL:
+ *
+ * ```ts
+ * editor.execute( 'mediaEmbed', 'http://url.to.the/media' );
+ * ```
+ */
+export default class MediaEmbedCommand extends Command {
+    /**
+     * Media url.
+     */
+    value: string | undefined;
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command, which either:
+     *
+     * * updates the URL of the selected media,
+     * * inserts the new media into the editor and puts the selection around it.
+     *
+     * @fires execute
+     * @param url The URL of the media.
+     */
+    execute(url: string): void;
+}

package/dist/types/mediaembedconfig.d.ts

@@ -0,0 +1,282 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type { ToolbarConfigItem } from 'ckeditor5/src/core.js';
+import type { ArrayOrItem } from 'ckeditor5/src/utils.js';
+/**
+ * @module media-embed/mediaembedconfig
+ */
+/**
+ * The configuration of the media embed features.
+ *
+ * Read more about {@glink features/media-embed#configuration configuring the media embed feature}.
+ *
+ * ```ts
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 			mediaEmbed: ... // Media embed feature options.
+ * 	} )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ */
+export interface MediaEmbedConfig {
+    /**
+     * The default media providers supported by the editor.
+     *
+     * The names of providers with rendering functions (previews):
+     *
+     * * "dailymotion",
+     * * "spotify",
+     * * "youtube",
+     * * "vimeo"
+     *
+     * The names of providers without rendering functions:
+     *
+     * * "instagram",
+     * * "twitter",
+     * * "googleMaps",
+     * * "flickr",
+     * * "facebook"
+     *
+     * See the {@link module:media-embed/mediaembedconfig~MediaEmbedProvider provider syntax} to learn more about
+     * different kinds of media and media providers.
+     *
+     * **Note**: The default media provider configuration may not support all possible media URLs,
+     * only the most common are included.
+     *
+     * Media without rendering functions are always represented in the data using the "semantic" markup. See
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#previewsInData `config.mediaEmbed.previewsInData`} to
+     * learn more about possible data outputs.
+     *
+     * The priority of media providers corresponds to the order of configuration. The first provider
+     * to match the URL is always used, even if there are other providers that support a particular URL.
+     * The URL is never matched against the remaining providers.
+     *
+     * To discard **all** default media providers, simply override this configuration with your own
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedProvider definitions}:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		plugins: [ MediaEmbed, ... ],
+     * 		mediaEmbed: {
+     * 			providers: [
+     * 				{
+     * 					 name: 'myProvider',
+     * 					 url: /^example\.com\/media\/(\w+)/,
+     * 					 html: match => '...'
+     * 				},
+     * 				...
+     * 				]
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * You can take inspiration from the default configuration of this feature which you can find in:
+     * https://github.com/ckeditor/ckeditor5-media-embed/blob/master/src/mediaembedediting.js
+     *
+     * To **extend** the list of default providers, use
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}.
+     *
+     * To **remove** certain providers, use
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#removeProviders `config.mediaEmbed.removeProviders`}.
+     */
+    providers?: Array<MediaEmbedProvider>;
+    /**
+     * The additional media providers supported by the editor. This configuration helps extend the default
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#providers}.
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( editorElement, {
+     * 		plugins: [ MediaEmbed, ... ],
+     * 		mediaEmbed: {
+     * 			extraProviders: [
+     * 				{
+     * 					 name: 'extraProvider',
+     * 					 url: /^example\.com\/media\/(\w+)/,
+     * 					 html: match => '...'
+     * 				},
+     * 				...
+     * 				]
+     * 		}
+     * 	} )
+     * 	.then( ... )
+     * 	.catch( ... );
+     * ```
+     *
+     * See the {@link module:media-embed/mediaembedconfig~MediaEmbedProvider provider syntax} to learn more.
+     */
+    extraProviders?: Array<MediaEmbedProvider>;
+    /**
+     * The list of media providers that should not be used despite being available in
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#providers `config.mediaEmbed.providers`} and
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}
+     *
+     * ```ts
+     * mediaEmbed: {
+     * 	removeProviders: [ 'youtube', 'twitter' ]
+     * }
+     * ```
+     */
+    removeProviders?: Array<string>;
+    /**
+     * Overrides the element name used for "semantic" data.
+     *
+     * This is not relevant if
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#previewsInData `config.mediaEmbed.previewsInData`} is set to `true`.
+     *
+     * When not set, the feature produces the `<oembed>` tag:
+     *
+     * ```html
+     * <figure class="media">
+     * 	<oembed url="https://url"></oembed>
+     * </figure>
+     * ```
+     *
+     * To override the element name with, for instance, the `o-embed` name:
+     *
+     * ```ts
+     * mediaEmbed: {
+     * 	elementName: 'o-embed'
+     * }
+     * ```
+     *
+     * This will produce semantic data with the `<o-embed>` tag:
+     *
+     * ```html
+     * <figure class="media">
+     * 	<o-embed url="https://url"></o-embed>
+     * </figure>
+     * ```
+     *
+     * @default 'oembed'
+     */
+    elementName?: string;
+    /**
+     * Controls the data format produced by the feature.
+     *
+     * When `false` (default), the feature produces "semantic" data, i.e. it does not include the preview of
+     * the media, just the `<oembed>` tag with the `url` attribute:
+     *
+     * ```ts
+     * <figure class="media">
+     * 	<oembed url="https://url"></oembed>
+     * </figure>
+     * ```
+     *
+     * When `true`, the media is represented in the output in the same way it looks in the editor,
+     * i.e. the media preview is saved to the database:
+     *
+     * ```ts
+     * <figure class="media">
+     * 	<div data-oembed-url="https://url">
+     * 		<iframe src="https://preview"></iframe>
+     * 	</div>
+     * </figure>
+     * ```
+     *
+     * **Note:** Media without preview are always represented in the data using the "semantic" markup
+     * regardless of the value of the `previewsInData`. Learn more about different kinds of media
+     * in the {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#providers `config.mediaEmbed.providers`}
+     * configuration description.
+     *
+     * @defualt false
+     */
+    previewsInData?: boolean;
+    /**
+     * Items to be placed in the media embed toolbar.
+     * This option requires adding {@link module:media-embed/mediaembedtoolbar~MediaEmbedToolbar} to the plugin list.
+     *
+     * Read more about configuring toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.
+     */
+    toolbar?: Array<ToolbarConfigItem>;
+}
+/**
+ * The media embed provider descriptor. Used in
+ * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#providers `config.mediaEmbed.providers`} and
+ * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}.
+ *
+ * See {@link module:media-embed/mediaembedconfig~MediaEmbedConfig} to learn more.
+ *
+ * ```ts
+ * {
+ * 	name: 'example',
+ *
+ * 	// The following RegExp matches https://www.example.com/media/{media id},
+ * 	// (either with "http(s)://" and "www" or without), so the valid URLs are:
+ * 	//
+ * 	// * https://www.example.com/media/{media id},
+ * 	// * http://www.example.com/media/{media id},
+ * 	// * www.example.com/media/{media id},
+ * 	// * example.com/media/{media id}
+ * 	url: /^example\.com\/media\/(\w+)/,
+ *
+ * 	// The rendering function of the provider.
+ * 	// Used to represent the media when editing the content (i.e. in the view)
+ * 	// and also in the data output of the editor if semantic data output is disabled.
+ * 	html: match => `The HTML representing the media with ID=${ match[ 1 ] }.`
+ * }
+ * ```
+ *
+ * You can allow any sort of media in the editor using the "allow–all" `RegExp`.
+ * But mind that, since URLs are processed in the order of configuration, if one of the previous
+ * `RegExps` matches the URL, it will have a precedence over this one.
+ *
+ * ```ts
+ * {
+ * 	name: 'allow-all',
+ * 	url: /^.+/
+ * }
+ * ```
+ *
+ * To implement responsive media, you can use the following HTML structure:
+ *
+ * ```ts
+ * {
+ * 	...
+ * 	html: match =>
+ * 		'<div style="position:relative; padding-bottom:100%; height:0">' +
+ * 			'<iframe src="..." frameborder="0" ' +
+ * 				'style="position:absolute; width:100%; height:100%; top:0; left:0">' +
+ * 			'</iframe>' +
+ * 		'</div>'
+ * }
+ * ```
+ */
+export interface MediaEmbedProvider {
+    /**
+     * The name of the provider. Used e.g. when
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#removeProviders removing providers}.
+     */
+    name: string;
+    /**
+     * The `RegExp` object (or array of objects) defining the URL of the media.
+     * If any URL matches the `RegExp`, it becomes the media in the editor model, as defined by the provider. The result
+     * of matching (output of `String.prototype.match()`) is passed to the `html` rendering function of the media.
+     *
+     * **Note:** You do not need to include the protocol (`http://`, `https://`) and `www` subdomain in your `RegExps`,
+     * they are stripped from the URLs before matching anyway.
+     */
+    url: ArrayOrItem<RegExp>;
+    /**
+     * The rendering function of the media. The function receives the entire matching
+     * array from the corresponding `url` `RegExp` as an argument, allowing rendering a dedicated
+     * preview of the media identified by a certain ID or a hash. When not defined, the media embed feature
+     * will use a generic media representation in the view and output data.
+     * Note that when
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#previewsInData `config.mediaEmbed.previewsInData`}
+     * is `true`, the rendering function **will always** be used for the media in the editor data output.
+     */
+    html?: (match: RegExpMatchArray) => string;
+}

package/dist/types/mediaembedediting.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/mediaembedediting
+ */
+import { Plugin, type Editor } from 'ckeditor5/src/core.js';
+import MediaRegistry from './mediaregistry.js';
+import '../theme/mediaembedediting.css';
+/**
+ * The media embed editing feature.
+ */
+export default class MediaEmbedEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "MediaEmbedEditing";
+    /**
+     * The media registry managing the media providers in the editor.
+     */
+    registry: MediaRegistry;
+    /**
+     * @inheritDoc
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+}

package/dist/types/mediaembedtoolbar.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/mediaembedtoolbar
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import { WidgetToolbarRepository } from 'ckeditor5/src/widget.js';
+import './mediaembedconfig.js';
+/**
+ * The media embed toolbar plugin. It creates a toolbar for media embed that shows up when the media element is selected.
+ *
+ * Instances of toolbar components (e.g. buttons) are created based on the
+ * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig#toolbar `media.toolbar` configuration option}.
+ */
+export default class MediaEmbedToolbar extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof WidgetToolbarRepository];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "MediaEmbedToolbar";
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+}

package/dist/types/mediaembedui.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/mediaembedui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import MediaEmbedEditing from './mediaembedediting.js';
+/**
+ * The media embed UI plugin.
+ */
+export default class MediaEmbedUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof MediaEmbedEditing];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "MediaEmbedUI";
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    private _setUpDropdown;
+}

package/dist/types/mediaregistry.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/mediaregistry
+ */
+import type { DowncastWriter, ViewElement } from 'ckeditor5/src/engine.js';
+import { type Locale } from 'ckeditor5/src/utils.js';
+import type { MediaEmbedConfig, MediaEmbedProvider } from './mediaembedconfig.js';
+import type { MediaOptions } from './utils.js';
+/**
+ * A bridge between the raw media content provider definitions and the editor view content.
+ *
+ * It helps translating media URLs to corresponding {@link module:engine/view/element~Element view elements}.
+ *
+ * Mostly used by the {@link module:media-embed/mediaembedediting~MediaEmbedEditing} plugin.
+ */
+export default class MediaRegistry {
+    /**
+     * The {@link module:utils/locale~Locale} instance.
+     */
+    locale: Locale;
+    /**
+     * The media provider definitions available for the registry. Usually corresponding with the
+     * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig media configuration}.
+     */
+    providerDefinitions: Array<MediaEmbedProvider>;
+    /**
+     * Creates an instance of the {@link module:media-embed/mediaregistry~MediaRegistry} class.
+     *
+     * @param locale The localization services instance.
+     * @param config The configuration of the media embed feature.
+     */
+    constructor(locale: Locale, config: MediaEmbedConfig);
+    /**
+     * Checks whether the passed URL is representing a certain media type allowed in the editor.
+     *
+     * @param url The URL to be checked
+     */
+    hasMedia(url: string): boolean;
+    /**
+     * For the given media URL string and options, it returns the {@link module:engine/view/element~Element view element}
+     * representing that media.
+     *
+     * **Note:** If no URL is specified, an empty view element is returned.
+     *
+     * @param writer The view writer used to produce a view element.
+     * @param url The URL to be translated into a view element.
+     */
+    getMediaViewElement(writer: DowncastWriter, url: string, options: MediaOptions): ViewElement;
+    /**
+     * Returns a `Media` instance for the given URL.
+     *
+     * @param url The URL of the media.
+     * @returns The `Media` instance or `null` when there is none.
+     */
+    private _getMedia;
+    /**
+     * Tries to match `url` to `pattern`.
+     *
+     * @param url The URL of the media.
+     * @param pattern The pattern that should accept the media URL.
+     */
+    private _getUrlMatches;
+}

package/dist/types/ui/mediaformview.d.ts

@@ -0,0 +1,119 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module media-embed/ui/mediaformview
+ */
+import { type InputTextView, ButtonView, LabeledFieldView, View } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
+import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
+import '../../theme/mediaform.css';
+/**
+ * The media form view controller class.
+ *
+ * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
+ */
+export default class MediaFormView 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;
+    /**
+     * The value of the URL input.
+     */
+    mediaURLInputValue: string;
+    /**
+     * The URL input view.
+     */
+    urlInputView: LabeledFieldView<InputTextView>;
+    /**
+     * The Save button view.
+     */
+    saveButtonView: ButtonView;
+    /**
+     * The Cancel button view.
+     */
+    cancelButtonView: ButtonView;
+    /**
+     * A collection of views that can be focused in the form.
+     */
+    private readonly _focusables;
+    /**
+     * Helps cycling over {@link #_focusables} in the form.
+     */
+    private readonly _focusCycler;
+    /**
+     * An array of form validators used by {@link #isValid}.
+     */
+    private readonly _validators;
+    /**
+     * The default info text for the {@link #urlInputView}.
+     */
+    private _urlInputViewInfoDefault?;
+    /**
+     * The info text with an additional tip for the {@link #urlInputView},
+     * displayed when the input has some value.
+     */
+    private _urlInputViewInfoTip?;
+    /**
+     * @param validators Form validators used by {@link #isValid}.
+     * @param locale The localization services instance.
+     */
+    constructor(validators: Array<(v: MediaFormView) => string | undefined>, locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Focuses the fist {@link #_focusables} in the form.
+     */
+    focus(): void;
+    /**
+     * The native DOM `value` of the {@link #urlInputView} element.
+     *
+     * **Note**: Do not confuse it with the {@link module:ui/inputtext/inputtextview~InputTextView#value}
+     * which works one way only and may not represent the actual state of the component in the DOM.
+     */
+    get url(): string;
+    set url(url: string);
+    /**
+     * Validates the form and returns `false` when some fields are invalid.
+     */
+    isValid(): boolean;
+    /**
+     * Cleans up the supplementary error and information text of the {@link #urlInputView}
+     * bringing them back to the state when the form has been displayed for the first time.
+     *
+     * See {@link #isValid}.
+     */
+    resetFormStatus(): void;
+    /**
+     * Creates a labeled input view.
+     *
+     * @returns Labeled input view instance.
+     */
+    private _createUrlInput;
+    /**
+     * Creates a button view.
+     *
+     * @param label The button label.
+     * @param icon The button icon.
+     * @param className The additional button CSS class name.
+     * @param eventName An event name that the `ButtonView#execute` event will be delegated to.
+     * @returns The button view instance.
+     */
+    private _createButton;
+}