@ckeditor/ckeditor5-media-embed 41.4.1 → 42.0.0-alpha.0

package/dist/index.js

@@ -2,10 +2,10 @@
  * @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, Plugin, icons } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { Command, Plugin } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { toWidget, isWidget, findOptimalInsertionRange, Widget, WidgetToolbarRepository } from '@ckeditor/ckeditor5-widget/dist/index.js';
-import { toArray, logWarning, first, global, FocusTracker, KeystrokeHandler } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { IconView, Template, View, submitHandler, LabeledFieldView, createLabeledInputText, ButtonView, ViewCollection, FocusCycler, createDropdown, CssTransitionDisablerMixin } from '@ckeditor/ckeditor5-ui/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 { LivePosition, LiveRange } 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';
@@ -15,6 +15,8 @@ import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
  * @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/converters
+ */ /**
  * 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):
@@ -145,10 +147,20 @@ import { Undo } from '@ckeditor/ckeditor5-undo/dist/index.js';
     });
 }
 
-class MediaEmbedCommand extends Command {
+/**
+ * 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' );
+ * ```
+ */ class MediaEmbedCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const model = this.editor.model;
         const selection = model.document.selection;
         const selectedMedia = getSelectedMediaModelWidget(selection);
@@ -156,14 +168,14 @@ class MediaEmbedCommand extends Command {
         this.isEnabled = isMediaSelected(selection) || isAllowedInParent(selection, model);
     }
     /**
-     * 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) {
+	 * 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) {
         const model = this.editor.model;
         const selection = model.document.selection;
         const selectedMedia = getSelectedMediaModelWidget(selection);
@@ -197,31 +209,72 @@ class MediaEmbedCommand extends Command {
 var mediaPlaceholderIcon = "<svg viewBox=\"0 0 64 42\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M47.426 17V3.713L63.102 0v19.389h-.001l.001.272c0 1.595-2.032 3.43-4.538 4.098-2.506.668-4.538-.083-4.538-1.678 0-1.594 2.032-3.43 4.538-4.098.914-.244 2.032-.565 2.888-.603V4.516L49.076 7.447v9.556A1.014 1.014 0 0 0 49 17h-1.574zM29.5 17h-8.343a7.073 7.073 0 1 0-4.657 4.06v3.781H3.3a2.803 2.803 0 0 1-2.8-2.804V8.63a2.803 2.803 0 0 1 2.8-2.805h4.082L8.58 2.768A1.994 1.994 0 0 1 10.435 1.5h8.985c.773 0 1.477.448 1.805 1.149l1.488 3.177H26.7c1.546 0 2.8 1.256 2.8 2.805V17zm-11.637 0H17.5a1 1 0 0 0-1 1v.05A4.244 4.244 0 1 1 17.863 17zm29.684 2c.97 0 .953-.048.953.889v20.743c0 .953.016.905-.953.905H19.453c-.97 0-.953.048-.953-.905V19.89c0-.937-.016-.889.97-.889h28.077zm-4.701 19.338V22.183H24.154v16.155h18.692zM20.6 21.375v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616v-1.616H20.6zm0 3.231v1.616h1.616V37.53H20.6zm24.233-16.155v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615v-1.616h-1.615zm0 3.231v1.616h1.615V37.53h-1.615zM29.485 25.283a.4.4 0 0 1 .593-.35l9.05 4.977a.4.4 0 0 1 0 .701l-9.05 4.978a.4.4 0 0 1-.593-.35v-9.956z\"/></svg>";
 
 const mediaPlaceholderIconViewBox = '0 0 64 42';
-class MediaRegistry {
+/**
+ * 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.
+ */ class MediaRegistry {
+    /**
+	 * The {@link module:utils/locale~Locale} instance.
+	 */ locale;
+    /**
+	 * The media provider definitions available for the registry. Usually corresponding with the
+	 * {@link module:media-embed/mediaembedconfig~MediaEmbedConfig media configuration}.
+	 */ providerDefinitions;
     /**
-     * Checks whether the passed URL is representing a certain media type allowed in the editor.
-     *
-     * @param url The URL to be checked
-     */ hasMedia(url) {
+	 * 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, config){
+        const providers = config.providers;
+        const extraProviders = config.extraProviders || [];
+        const removedProviders = new Set(config.removeProviders);
+        const providerDefinitions = providers.concat(extraProviders).filter((provider)=>{
+            const name = provider.name;
+            if (!name) {
+                /**
+					 * One of the providers (or extra providers) specified in the media embed configuration
+					 * has no name and will not be used by the editor. In order to get this media
+					 * provider working, double check your editor configuration.
+					 *
+					 * @error media-embed-no-provider-name
+					 */ logWarning('media-embed-no-provider-name', {
+                    provider
+                });
+                return false;
+            }
+            return !removedProviders.has(name);
+        });
+        this.locale = locale;
+        this.providerDefinitions = providerDefinitions;
+    }
+    /**
+	 * Checks whether the passed URL is representing a certain media type allowed in the editor.
+	 *
+	 * @param url The URL to be checked
+	 */ hasMedia(url) {
         return !!this._getMedia(url);
     }
     /**
-     * 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, url, options) {
+	 * 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, url, options) {
         return this._getMedia(url).getViewElement(writer, options);
     }
     /**
-     * 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.
-     */ _getMedia(url) {
+	 * 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.
+	 */ _getMedia(url) {
         if (!url) {
             return new Media(this.locale);
         }
@@ -239,11 +292,11 @@ class MediaRegistry {
         return null;
     }
     /**
-     * Tries to match `url` to `pattern`.
-     *
-     * @param url The URL of the media.
-     * @param pattern The pattern that should accept the media URL.
-     */ _getUrlMatches(url, pattern) {
+	 * Tries to match `url` to `pattern`.
+	 *
+	 * @param url The URL of the media.
+	 * @param pattern The pattern that should accept the media URL.
+	 */ _getUrlMatches(url, pattern) {
         // 1. Try to match without stripping the protocol and "www" subdomain.
         let match = url.match(pattern);
         if (match) {
@@ -263,34 +316,6 @@ class MediaRegistry {
         }
         return null;
     }
-    /**
-     * 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, config){
-        const providers = config.providers;
-        const extraProviders = config.extraProviders || [];
-        const removedProviders = new Set(config.removeProviders);
-        const providerDefinitions = providers.concat(extraProviders).filter((provider)=>{
-            const name = provider.name;
-            if (!name) {
-                /**
-                 * One of the providers (or extra providers) specified in the media embed configuration
-                 * has no name and will not be used by the editor. In order to get this media
-                 * provider working, double check your editor configuration.
-                 *
-                 * @error media-embed-no-provider-name
-                 */ logWarning('media-embed-no-provider-name', {
-                    provider
-                });
-                return false;
-            }
-            return !removedProviders.has(name);
-        });
-        this.locale = locale;
-        this.providerDefinitions = providerDefinitions;
-    }
 }
 /**
  * Represents media defined by the provider configuration.
@@ -298,10 +323,30 @@ class MediaRegistry {
  * It can be rendered to the {@link module:engine/view/element~Element view element} and used in the editing or data pipeline.
  */ class Media {
     /**
-     * Returns the view element representation of the media.
-     *
-     * @param writer The view writer used to produce a view element.
-     */ getViewElement(writer, options) {
+	 * The URL this Media instance represents.
+	 */ url;
+    /**
+	 * Shorthand for {@link module:utils/locale~Locale#t}.
+	 *
+	 * @see module:utils/locale~Locale#t
+	 */ _locale;
+    /**
+	 * The output of the `RegExp.match` which validated the {@link #url} of this media.
+	 */ _match;
+    /**
+	 * The function returning the HTML string preview of this media.
+	 */ _previewRenderer;
+    constructor(locale, url, match, previewRenderer){
+        this.url = this._getValidUrl(url);
+        this._locale = locale;
+        this._match = match;
+        this._previewRenderer = previewRenderer;
+    }
+    /**
+	 * Returns the view element representation of the media.
+	 *
+	 * @param writer The view writer used to produce a view element.
+	 */ getViewElement(writer, options) {
         const attributes = {};
         let viewElement;
         if (options.renderForEditingView || options.renderMediaPreview && this.url && this._previewRenderer) {
@@ -325,8 +370,8 @@ class MediaRegistry {
         return viewElement;
     }
     /**
-     * Returns the HTML string of the media content preview.
-     */ _getPreviewHtml(options) {
+	 * Returns the HTML string of the media content preview.
+	 */ _getPreviewHtml(options) {
         if (this._previewRenderer) {
             return this._previewRenderer(this._match);
         } else {
@@ -339,8 +384,8 @@ class MediaRegistry {
         }
     }
     /**
-     * Returns the placeholder HTML when the media has no content preview.
-     */ _getPlaceholderHtml() {
+	 * Returns the placeholder HTML when the media has no content preview.
+	 */ _getPlaceholderHtml() {
         const icon = new IconView();
         const t = this._locale.t;
         icon.content = mediaPlaceholderIcon;
@@ -386,10 +431,10 @@ class MediaRegistry {
         return placeholder.outerHTML;
     }
     /**
-     * Returns the full URL to the specified media.
-     *
-     * @param url The URL of the media.
-     */ _getValidUrl(url) {
+	 * Returns the full URL to the specified media.
+	 *
+	 * @param url The URL of the media.
+	 */ _getValidUrl(url) {
         if (!url) {
             return null;
         }
@@ -398,23 +443,111 @@ class MediaRegistry {
         }
         return 'https://' + url;
     }
-    constructor(locale, url, match, previewRenderer){
-        this.url = this._getValidUrl(url);
-        this._locale = locale;
-        this._match = match;
-        this._previewRenderer = previewRenderer;
-    }
 }
 
-class MediaEmbedEditing extends Plugin {
+/**
+ * The media embed editing feature.
+ */ class MediaEmbedEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbedEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * The media registry managing the media providers in the editor.
+	 */ registry;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        editor.config.define('mediaEmbed', {
+            elementName: 'oembed',
+            providers: [
+                {
+                    name: 'dailymotion',
+                    url: [
+                        /^dailymotion\.com\/video\/(\w+)/,
+                        /^dai.ly\/(\w+)/
+                    ],
+                    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>';
+                    }
+                },
+                {
+                    name: 'spotify',
+                    url: [
+                        /^open\.spotify\.com\/(artist\/\w+)/,
+                        /^open\.spotify\.com\/(album\/\w+)/,
+                        /^open\.spotify\.com\/(track\/\w+)/
+                    ],
+                    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>';
+                    }
+                },
+                {
+                    name: 'youtube',
+                    url: [
+                        /^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/,
+                        /^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/,
+                        /^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/,
+                        /^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/
+                    ],
+                    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" allowfullscreen>' + '</iframe>' + '</div>';
+                    }
+                },
+                {
+                    name: 'vimeo',
+                    url: [
+                        /^vimeo\.com\/(\d+)/,
+                        /^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
+                        /^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
+                        /^vimeo\.com\/channels\/[^/]+\/(\d+)/,
+                        /^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
+                        /^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
+                        /^player\.vimeo\.com\/video\/(\d+)/
+                    ],
+                    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>';
+                    }
+                },
+                {
+                    name: 'instagram',
+                    url: /^instagram\.com\/p\/(\w+)/
+                },
+                {
+                    name: 'twitter',
+                    url: /^twitter\.com/
+                },
+                {
+                    name: 'googleMaps',
+                    url: [
+                        /^google\.com\/maps/,
+                        /^goo\.gl\/maps/,
+                        /^maps\.google\.com/,
+                        /^maps\.app\.goo\.gl/
+                    ]
+                },
+                {
+                    name: 'flickr',
+                    url: /^flickr\.com/
+                },
+                {
+                    name: 'facebook',
+                    url: /^facebook\.com/
+                }
+            ]
+        });
+        this.registry = new MediaRegistry(editor.locale, editor.config.get('mediaEmbed'));
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const schema = editor.model.schema;
         const t = editor.t;
@@ -522,102 +655,16 @@ class MediaEmbedEditing extends Plugin {
             dispatcher.on('element:figure', converter);
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        editor.config.define('mediaEmbed', {
-            elementName: 'oembed',
-            providers: [
-                {
-                    name: 'dailymotion',
-                    url: [
-                        /^dailymotion\.com\/video\/(\w+)/,
-                        /^dai.ly\/(\w+)/
-                    ],
-                    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>';
-                    }
-                },
-                {
-                    name: 'spotify',
-                    url: [
-                        /^open\.spotify\.com\/(artist\/\w+)/,
-                        /^open\.spotify\.com\/(album\/\w+)/,
-                        /^open\.spotify\.com\/(track\/\w+)/
-                    ],
-                    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>';
-                    }
-                },
-                {
-                    name: 'youtube',
-                    url: [
-                        /^(?:m\.)?youtube\.com\/watch\?v=([\w-]+)(?:&t=(\d+))?/,
-                        /^(?:m\.)?youtube\.com\/v\/([\w-]+)(?:\?t=(\d+))?/,
-                        /^youtube\.com\/embed\/([\w-]+)(?:\?start=(\d+))?/,
-                        /^youtu\.be\/([\w-]+)(?:\?t=(\d+))?/
-                    ],
-                    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" allowfullscreen>' + '</iframe>' + '</div>';
-                    }
-                },
-                {
-                    name: 'vimeo',
-                    url: [
-                        /^vimeo\.com\/(\d+)/,
-                        /^vimeo\.com\/[^/]+\/[^/]+\/video\/(\d+)/,
-                        /^vimeo\.com\/album\/[^/]+\/video\/(\d+)/,
-                        /^vimeo\.com\/channels\/[^/]+\/(\d+)/,
-                        /^vimeo\.com\/groups\/[^/]+\/videos\/(\d+)/,
-                        /^vimeo\.com\/ondemand\/[^/]+\/(\d+)/,
-                        /^player\.vimeo\.com\/video\/(\d+)/
-                    ],
-                    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>';
-                    }
-                },
-                {
-                    name: 'instagram',
-                    url: /^instagram\.com\/p\/(\w+)/
-                },
-                {
-                    name: 'twitter',
-                    url: /^twitter\.com/
-                },
-                {
-                    name: 'googleMaps',
-                    url: [
-                        /^google\.com\/maps/,
-                        /^goo\.gl\/maps/,
-                        /^maps\.google\.com/,
-                        /^maps\.app\.goo\.gl/
-                    ]
-                },
-                {
-                    name: 'flickr',
-                    url: /^flickr\.com/
-                },
-                {
-                    name: 'facebook',
-                    url: /^facebook\.com/
-                }
-            ]
-        });
-        this.registry = new MediaRegistry(editor.locale, editor.config.get('mediaEmbed'));
-    }
 }
 
 const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w-]+\.[\w-.~:/?#[\]@!$&'()*+,;=%]+$/;
-class AutoMediaEmbed extends Plugin {
+/**
+ * The auto-media embed plugin. It recognizes media links in the pasted content and embeds
+ * them shortly after they are injected into the document.
+ */ class AutoMediaEmbed extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             Clipboard,
             Delete,
@@ -625,13 +672,28 @@ class AutoMediaEmbed extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'AutoMediaEmbed';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * The paste–to–embed `setTimeout` ID. Stored as a property to allow
+	 * cleaning of the timeout.
+	 */ _timeoutId;
+    /**
+	 * The position where the `<media>` element will be inserted after the timeout,
+	 * determined each time the new content is pasted into the document.
+	 */ _positionToInsert;
+    /**
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this._timeoutId = null;
+        this._positionToInsert = null;
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const modelDocument = editor.model.document;
         // We need to listen on `Clipboard#inputTransformation` because we need to save positions of selection.
@@ -665,12 +727,12 @@ class AutoMediaEmbed extends Plugin {
         });
     }
     /**
-     * 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.
-     */ _embedMediaBetweenPositions(leftPosition, rightPosition) {
+	 * 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.
+	 */ _embedMediaBetweenPositions(leftPosition, rightPosition) {
         const editor = this.editor;
         const mediaRegistry = editor.plugins.get(MediaEmbedEditing).registry;
         // TODO: Use marker instead of LiveRange & LivePositions.
@@ -722,71 +784,95 @@ class AutoMediaEmbed extends Plugin {
             editor.plugins.get(Delete).requestUndoOnBackspace();
         }, 100);
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        this._timeoutId = null;
-        this._positionToInsert = null;
-    }
 }
 
-class MediaFormView extends View {
+/**
+ * The media form view controller class.
+ *
+ * See {@link module:media-embed/ui/mediaformview~MediaFormView}.
+ */ class MediaFormView extends View {
+    /**
+	 * Tracks information about the DOM focus in the form.
+	 */ focusTracker;
+    /**
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
+    /**
+	 * The URL input view.
+	 */ urlInputView;
+    /**
+	 * An array of form validators used by {@link #isValid}.
+	 */ _validators;
+    /**
+	 * The default info text for the {@link #urlInputView}.
+	 */ _urlInputViewInfoDefault;
     /**
-     * @inheritDoc
-     */ render() {
+	 * The info text with an additional tip for the {@link #urlInputView},
+	 * displayed when the input has some value.
+	 */ _urlInputViewInfoTip;
+    /**
+	 * @param validators Form validators used by {@link #isValid}.
+	 * @param locale The localization services instance.
+	 */ constructor(validators, locale){
+        super(locale);
+        this.focusTracker = new FocusTracker();
+        this.keystrokes = new KeystrokeHandler();
+        this.set('mediaURLInputValue', '');
+        this.urlInputView = this._createUrlInput();
+        this._validators = validators;
+        this.setTemplate({
+            tag: 'form',
+            attributes: {
+                class: [
+                    'ck',
+                    'ck-media-form',
+                    'ck-responsive-form'
+                ],
+                tabindex: '-1'
+            },
+            children: [
+                this.urlInputView
+            ]
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
         super.render();
         submitHandler({
             view: this
         });
-        const childViews = [
-            this.urlInputView,
-            this.saveButtonView,
-            this.cancelButtonView
-        ];
-        childViews.forEach((v)=>{
-            // Register the view as focusable.
-            this._focusables.add(v);
-            // Register the view in the focus tracker.
-            this.focusTracker.add(v.element);
-        });
+        // Register the view in the focus tracker.
+        this.focusTracker.add(this.urlInputView.element);
         // Start listening for the keystrokes coming from #element.
         this.keystrokes.listenTo(this.element);
-        const stopPropagation = (data)=>data.stopPropagation();
-        // Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
-        // keystroke handler would take over the key management in the URL input. We need to prevent
-        // this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
-        this.keystrokes.set('arrowright', stopPropagation);
-        this.keystrokes.set('arrowleft', stopPropagation);
-        this.keystrokes.set('arrowup', stopPropagation);
-        this.keystrokes.set('arrowdown', stopPropagation);
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         this.focusTracker.destroy();
         this.keystrokes.destroy();
     }
     /**
-     * Focuses the fist {@link #_focusables} in the form.
-     */ focus() {
-        this._focusCycler.focusFirst();
+	 * Focuses the {@link #urlInputView}.
+	 */ focus() {
+        this.urlInputView.focus();
     }
     /**
-     * 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() {
+	 * 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() {
         return this.urlInputView.fieldView.element.value.trim();
     }
     set url(url) {
-        this.urlInputView.fieldView.element.value = url.trim();
+        this.urlInputView.fieldView.value = url.trim();
     }
     /**
-     * Validates the form and returns `false` when some fields are invalid.
-     */ isValid() {
+	 * Validates the form and returns `false` when some fields are invalid.
+	 */ isValid() {
         this.resetFormStatus();
         for (const validator of this._validators){
             const errorText = validator(this);
@@ -800,19 +886,19 @@ class MediaFormView extends View {
         return true;
     }
     /**
-     * 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() {
+	 * 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() {
         this.urlInputView.errorText = null;
         this.urlInputView.infoText = this._urlInputViewInfoDefault;
     }
     /**
-     * Creates a labeled input view.
-     *
-     * @returns Labeled input view instance.
-     */ _createUrlInput() {
+	 * Creates a labeled input view.
+	 *
+	 * @returns Labeled input view instance.
+	 */ _createUrlInput() {
         const t = this.locale.t;
         const labeledInput = new LabeledFieldView(this.locale, createLabeledInputText);
         const inputField = labeledInput.fieldView;
@@ -820,6 +906,7 @@ class MediaFormView extends View {
         this._urlInputViewInfoTip = t('Tip: Paste the URL into the content to embed faster.');
         labeledInput.label = t('Media URL');
         labeledInput.infoText = this._urlInputViewInfoDefault;
+        inputField.inputMode = 'url';
         inputField.on('input', ()=>{
             // Display the tip text only when there is some value. Otherwise fall back to the default info text.
             labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
@@ -827,152 +914,107 @@ class MediaFormView extends View {
         });
         return labeledInput;
     }
-    /**
-     * 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.
-     */ _createButton(label, icon, className, eventName) {
-        const button = new ButtonView(this.locale);
-        button.set({
-            label,
-            icon,
-            tooltip: true
-        });
-        button.extendTemplate({
-            attributes: {
-                class: className
-            }
-        });
-        if (eventName) {
-            button.delegate('execute').to(this, eventName);
-        }
-        return button;
-    }
-    /**
-     * @param validators Form validators used by {@link #isValid}.
-     * @param locale The localization services instance.
-     */ constructor(validators, locale){
-        super(locale);
-        const t = locale.t;
-        this.focusTracker = new FocusTracker();
-        this.keystrokes = new KeystrokeHandler();
-        this.set('mediaURLInputValue', '');
-        this.urlInputView = this._createUrlInput();
-        this.saveButtonView = this._createButton(t('Save'), icons.check, 'ck-button-save');
-        this.saveButtonView.type = 'submit';
-        this.cancelButtonView = this._createButton(t('Cancel'), icons.cancel, 'ck-button-cancel', 'cancel');
-        this._focusables = new ViewCollection();
-        this._focusCycler = new FocusCycler({
-            focusables: this._focusables,
-            focusTracker: this.focusTracker,
-            keystrokeHandler: this.keystrokes,
-            actions: {
-                // Navigate form fields backwards using the <kbd>Shift</kbd> + <kbd>Tab</kbd> keystroke.
-                focusPrevious: 'shift + tab',
-                // Navigate form fields forwards using the <kbd>Tab</kbd> key.
-                focusNext: 'tab'
-            }
-        });
-        this._validators = validators;
-        this.setTemplate({
-            tag: 'form',
-            attributes: {
-                class: [
-                    'ck',
-                    'ck-media-form',
-                    'ck-responsive-form'
-                ],
-                tabindex: '-1'
-            },
-            children: [
-                this.urlInputView,
-                this.saveButtonView,
-                this.cancelButtonView
-            ]
-        });
-    }
 }
 
 var mediaIcon = "<svg viewBox=\"0 0 22 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M1.587 1.5c-.612 0-.601-.029-.601.551v14.84c0 .59-.01.559.591.559h18.846c.602 0 .591.03.591-.56V2.052c0-.58.01-.55-.591-.55H1.587Zm.701.971h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-14.24 1h13.008v12H4.467l.029-12Zm-2.208 1h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003v1H2.288v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h1.003l-.029 1h-.974v-1Zm16.448 0h1.003v1h-1.003v-1Zm-16.448 2h.974v1h-.974v-1Zm16.448 0h1.003v1h-1.003v-1Z\"/><path d=\"M8.374 6.648a.399.399 0 0 1 .395-.4.402.402 0 0 1 .2.049l5.148 2.824a.4.4 0 0 1 0 .7l-5.148 2.824a.403.403 0 0 1-.595-.35V6.648Z\"/></svg>";
 
-class MediaEmbedUI extends Plugin {
+/**
+ * The media embed UI plugin.
+ */ class MediaEmbedUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
-            MediaEmbedEditing
+            MediaEmbedEditing,
+            Dialog
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbedUI';
     }
+    _formView;
+    /**
+	 * @inheritDoc
+	 */ init() {
+        const editor = this.editor;
+        editor.ui.componentFactory.add('mediaEmbed', ()=>{
+            const t = this.editor.locale.t;
+            const button = this._createDialogButton(ButtonView);
+            button.tooltip = true;
+            button.label = t('Insert media');
+            return button;
+        });
+        editor.ui.componentFactory.add('menuBar:mediaEmbed', ()=>{
+            const t = this.editor.locale.t;
+            const button = this._createDialogButton(MenuBarMenuListItemButtonView);
+            button.label = t('Media');
+            return button;
+        });
+    }
     /**
-     * @inheritDoc
-     */ init() {
+	 * Creates a button for menu bar that will show media embed dialog.
+	 */ _createDialogButton(ButtonClass) {
         const editor = this.editor;
+        const buttonView = new ButtonClass(editor.locale);
         const command = editor.commands.get('mediaEmbed');
-        editor.ui.componentFactory.add('mediaEmbed', (locale)=>{
-            const dropdown = createDropdown(locale);
-            this._setUpDropdown(dropdown, command);
-            return dropdown;
+        const dialogPlugin = this.editor.plugins.get('Dialog');
+        buttonView.icon = mediaIcon;
+        buttonView.bind('isEnabled').to(command, 'isEnabled');
+        buttonView.on('execute', ()=>{
+            if (dialogPlugin.id === 'mediaEmbed') {
+                dialogPlugin.hide();
+            } else {
+                this._showDialog();
+            }
         });
+        return buttonView;
     }
-    _setUpDropdown(dropdown, command) {
+    _showDialog() {
         const editor = this.editor;
-        const t = editor.t;
-        const button = dropdown.buttonView;
-        const registry = editor.plugins.get(MediaEmbedEditing).registry;
-        dropdown.once('change:isOpen', ()=>{
-            const form = new (CssTransitionDisablerMixin(MediaFormView))(getFormValidators(editor.t, registry), editor.locale);
-            dropdown.panelView.children.add(form);
-            // Note: Use the low priority to make sure the following listener starts working after the
-            // default action of the drop-down is executed (i.e. the panel showed up). Otherwise, the
-            // invisible form/input cannot be focused/selected.
-            button.on('open', ()=>{
-                form.disableCssTransitions();
-                // Make sure that each time the panel shows up, the URL field remains in sync with the value of
-                // the command. If the user typed in the input, then canceled (`urlInputView#fieldView#value` stays
-                // unaltered) and re-opened it without changing the value of the media command (e.g. because they
-                // didn't change the selection), they would see the old value instead of the actual value of the
-                // command.
-                form.url = command.value || '';
-                form.urlInputView.fieldView.select();
-                form.enableCssTransitions();
-            }, {
-                priority: 'low'
-            });
-            dropdown.on('submit', ()=>{
-                if (form.isValid()) {
-                    editor.execute('mediaEmbed', form.url);
-                    editor.editing.view.focus();
+        const dialog = editor.plugins.get('Dialog');
+        const command = editor.commands.get('mediaEmbed');
+        const t = editor.locale.t;
+        if (!this._formView) {
+            const registry = editor.plugins.get(MediaEmbedEditing).registry;
+            this._formView = new (CssTransitionDisablerMixin(MediaFormView))(getFormValidators(editor.t, registry), editor.locale);
+            this._formView.on('submit', ()=>this._handleSubmitForm());
+        }
+        dialog.show({
+            id: 'mediaEmbed',
+            title: t('Insert media'),
+            content: this._formView,
+            isModal: true,
+            onShow: ()=>{
+                this._formView.url = command.value || '';
+                this._formView.resetFormStatus();
+                this._formView.urlInputView.fieldView.select();
+            },
+            actionButtons: [
+                {
+                    label: t('Cancel'),
+                    withText: true,
+                    onExecute: ()=>dialog.hide()
+                },
+                {
+                    label: t('Accept'),
+                    class: 'ck-button-action',
+                    withText: true,
+                    onExecute: ()=>this._handleSubmitForm()
                 }
-            });
-            dropdown.on('change:isOpen', ()=>form.resetFormStatus());
-            dropdown.on('cancel', ()=>{
-                editor.editing.view.focus();
-            });
-            form.delegate('submit', 'cancel').to(dropdown);
-            form.urlInputView.fieldView.bind('value').to(command, 'value');
-            // Update balloon position when form error changes.
-            form.urlInputView.on('change:errorText', ()=>{
-                editor.ui.update();
-            });
-            // Form elements should be read-only when corresponding commands are disabled.
-            form.urlInputView.bind('isEnabled').to(command, 'isEnabled');
-        });
-        dropdown.bind('isEnabled').to(command);
-        button.set({
-            label: t('Insert media'),
-            icon: mediaIcon,
-            tooltip: true
+            ]
         });
     }
+    _handleSubmitForm() {
+        const editor = this.editor;
+        const dialog = editor.plugins.get('Dialog');
+        if (this._formView.isValid()) {
+            editor.execute('mediaEmbed', this._formView.url);
+            dialog.hide();
+            editor.editing.view.focus();
+        }
+    }
 }
 function getFormValidators(t, registry) {
     return [
@@ -989,10 +1031,20 @@ function getFormValidators(t, registry) {
     ];
 }
 
-class MediaEmbed extends Plugin {
+/**
+ * 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}.
+ */ class MediaEmbed extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             MediaEmbedEditing,
             MediaEmbedUI,
@@ -1001,28 +1053,33 @@ class MediaEmbed extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbed';
     }
 }
 
-class MediaEmbedToolbar extends Plugin {
+/**
+ * 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}.
+ */ class MediaEmbedToolbar extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             WidgetToolbarRepository
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'MediaEmbedToolbar';
     }
     /**
-     * @inheritDoc
-     */ afterInit() {
+	 * @inheritDoc
+	 */ afterInit() {
         const editor = this.editor;
         const t = editor.t;
         const widgetToolbarRepository = editor.plugins.get(WidgetToolbarRepository);