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

package/lang/translations/pl.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Wstaw media"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Pasek narzędzi mediów"

package/lang/translations/pt-br.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Inserir mídia"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Ferramentas de Mídia"

package/lang/translations/pt.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Inserir media"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Barra de ferramentas de media"

package/lang/translations/ro.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Inserează media"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Bară media"

package/lang/translations/ru.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Вставить медиа"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Панель инструментов медиа"

package/lang/translations/sk.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Vložiť média"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Nástroje pre médiá"

package/lang/translations/sq.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Shto Medie"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Kokështrirja e mediave"

package/lang/translations/sr-latn.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Dodaj media"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Mediji traka sa alatkama"

package/lang/translations/sr.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Додај медиа"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Медији трака са алаткама"

package/lang/translations/sv.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Lägg in media"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Medieverktygsfält"

package/lang/translations/th.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "แทรกสื่อ"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "แถบเครื่องมือสื่อ"

package/lang/translations/tk.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Mediýa goýuň"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Mediýa gurallar paneli"

package/lang/translations/tr.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Medya Ekle"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Medya araç çubuğu"

package/lang/translations/uk.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Вставити медіа"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Панель інструментів медіа"

package/lang/translations/ur.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "میڈیا نصب کریں"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "آلہ جات برائے میڈیا"

package/lang/translations/uz.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Mediani joylashtiring"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Media asboblar paneli"

package/lang/translations/vi.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "Chèn đa phương tiện"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "Thanh công cụ đa phương tiện"

package/lang/translations/zh-cn.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "插入媒体"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "媒体工具栏"

package/lang/translations/zh.po

@@ -45,6 +45,10 @@ msgctxt "Toolbar button tooltip for the Media Embed feature."
 msgid "Insert media"
 msgstr "插入影音"
 
+msgctxt "Label describing type of the inserted content (e.g. 'insert media')."
+msgid "Media"
+msgstr ""
+
 msgctxt "The label used by assistive technologies describing an image toolbar attached to an image widget."
 msgid "Media toolbar"
 msgstr "影音工具"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-media-embed",
-  "version": "41.4.1",
+  "version": "42.0.0-alpha.0",
   "description": "Media embed feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,8 +13,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-ui": "41.4.1",
-    "ckeditor5": "41.4.1"
+    "@ckeditor/ckeditor5-ui": "42.0.0-alpha.0",
+    "ckeditor5": "42.0.0-alpha.0"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",

package/src/mediaembedui.d.ts

@@ -6,6 +6,7 @@
  * @module media-embed/mediaembedui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
+import { Dialog } from 'ckeditor5/src/ui.js';
 import MediaEmbedEditing from './mediaembedediting.js';
 /**
  * The media embed UI plugin.
@@ -14,14 +15,20 @@ export default class MediaEmbedUI extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof MediaEmbedEditing];
+    static get requires(): readonly [typeof MediaEmbedEditing, typeof Dialog];
     /**
      * @inheritDoc
      */
     static get pluginName(): "MediaEmbedUI";
+    private _formView;
     /**
      * @inheritDoc
      */
     init(): void;
-    private _setUpDropdown;
+    /**
+     * Creates a button for menu bar that will show media embed dialog.
+     */
+    private _createDialogButton;
+    private _showDialog;
+    private _handleSubmitForm;
 }

package/src/mediaembedui.js

@@ -6,7 +6,7 @@
  * @module media-embed/mediaembedui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { createDropdown, CssTransitionDisablerMixin } from 'ckeditor5/src/ui.js';
+import { ButtonView, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, Dialog } from 'ckeditor5/src/ui.js';
 import MediaFormView from './ui/mediaformview.js';
 import MediaEmbedEditing from './mediaembedediting.js';
 import mediaIcon from '../theme/icons/media.svg';
@@ -18,7 +18,7 @@ export default class MediaEmbedUI extends Plugin {
      * @inheritDoc
      */
     static get requires() {
-        return [MediaEmbedEditing];
+        return [MediaEmbedEditing, Dialog];
     }
     /**
      * @inheritDoc
@@ -31,61 +31,84 @@ export default class MediaEmbedUI extends Plugin {
      */
     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;
+        });
+    }
+    /**
+     * 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 [

package/src/ui/mediaformview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module media-embed/ui/mediaformview
  */
-import { type InputTextView, ButtonView, LabeledFieldView, View } from 'ckeditor5/src/ui.js';
+import { type InputTextView, 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';
@@ -31,22 +31,6 @@ export default class MediaFormView extends View {
      * 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}.
      */
@@ -74,7 +58,7 @@ export default class MediaFormView extends View {
      */
     destroy(): void;
     /**
-     * Focuses the fist {@link #_focusables} in the form.
+     * Focuses the {@link #urlInputView}.
      */
     focus(): void;
     /**
@@ -102,14 +86,4 @@ export default class MediaFormView extends 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;
 }

package/src/ui/mediaformview.js

@@ -5,9 +5,8 @@
 /**
  * @module media-embed/ui/mediaformview
  */
-import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
+import { LabeledFieldView, View, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
 import { FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils.js';
-import { icons } from 'ckeditor5/src/core.js';
 // See: #8833.
 // eslint-disable-next-line ckeditor5-rules/ckeditor-imports
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
@@ -24,26 +23,10 @@ export default class MediaFormView extends View {
      */
     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',
@@ -56,9 +39,7 @@ export default class MediaFormView extends View {
                 tabindex: '-1'
             },
             children: [
-                this.urlInputView,
-                this.saveButtonView,
-                this.cancelButtonView
+                this.urlInputView
             ]
         });
     }
@@ -70,27 +51,10 @@ export default class MediaFormView extends View {
         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
@@ -101,10 +65,10 @@ export default class MediaFormView extends View {
         this.keystrokes.destroy();
     }
     /**
-     * Focuses the fist {@link #_focusables} in the form.
+     * Focuses the {@link #urlInputView}.
      */
     focus() {
-        this._focusCycler.focusFirst();
+        this.urlInputView.focus();
     }
     /**
      * The native DOM `value` of the {@link #urlInputView} element.
@@ -116,7 +80,7 @@ export default class MediaFormView extends View {
         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.
@@ -157,6 +121,7 @@ export default 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;
@@ -164,30 +129,4 @@ export default 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;
-    }
 }

package/theme/mediaform.css

@@ -10,15 +10,21 @@
 	align-items: flex-start;
 	flex-direction: row;
 	flex-wrap: nowrap;
+	width: 400px;
 
 	& .ck-labeled-field-view {
 		display: inline-block;
+		width: 100%;
 	}
 
 	& .ck-label {
 		display: none;
 	}
 
+	& .ck-input {
+		width: 100%;
+	}
+
 	@mixin ck-media-phone {
 		flex-wrap: wrap;