@ckeditor/ckeditor5-media-embed 0.0.0-nightly-20240602.0 → 0.0.0-nightly-20240604.0

package/dist/types/mediaembedui.d.ts

@@ -10,7 +10,6 @@
  * @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.
@@ -19,19 +18,14 @@ export default class MediaEmbedUI extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof MediaEmbedEditing, typeof Dialog];
+    static get requires(): readonly [typeof MediaEmbedEditing];
     /**
      * @inheritDoc
      */
     static get pluginName(): "MediaEmbedUI";
-    private _formView;
     /**
      * @inheritDoc
      */
     init(): void;
-    /**
-     * Creates a button for menu bar that will show media embed dialog.
-     */
-    private _createDialogButton;
-    private _showDialog;
+    private _setUpDropdown;
 }

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

@@ -9,7 +9,7 @@
 /**
  * @module media-embed/ui/mediaformview
  */
-import { type InputTextView, LabeledFieldView, View } from 'ckeditor5/src/ui.js';
+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';
@@ -35,6 +35,22 @@ 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}.
      */
@@ -62,7 +78,7 @@ export default class MediaFormView extends View {
      */
     destroy(): void;
     /**
-     * Focuses the {@link #urlInputView}.
+     * Focuses the fist {@link #_focusables} in the form.
      */
     focus(): void;
     /**
@@ -90,4 +106,14 @@ 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/lang/contexts.json

@@ -6,7 +6,6 @@
 	"The URL must not be empty.": "An error message that informs about an empty value in the URL input.",
 	"This media URL is not supported.": "An error message that informs about unsupported media URL.",
 	"Insert media": "Toolbar button tooltip for the Media Embed feature.",
-	"Media": "Label describing type of the inserted content (e.g. 'insert media').",
 	"Media toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget.",
 	"Open media in new tab": "A tooltip displayed when the user hovers a non-previewable media URL in the editor content."
 }

package/package.json

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

package/src/mediaembedui.d.ts

@@ -6,7 +6,6 @@
  * @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.
@@ -15,19 +14,14 @@ export default class MediaEmbedUI extends Plugin {
     /**
      * @inheritDoc
      */
-    static get requires(): readonly [typeof MediaEmbedEditing, typeof Dialog];
+    static get requires(): readonly [typeof MediaEmbedEditing];
     /**
      * @inheritDoc
      */
     static get pluginName(): "MediaEmbedUI";
-    private _formView;
     /**
      * @inheritDoc
      */
     init(): void;
-    /**
-     * Creates a button for menu bar that will show media embed dialog.
-     */
-    private _createDialogButton;
-    private _showDialog;
+    private _setUpDropdown;
 }

package/src/mediaembedui.js

@@ -6,7 +6,7 @@
  * @module media-embed/mediaembedui
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView, CssTransitionDisablerMixin, MenuBarMenuListItemButtonView, Dialog } from 'ckeditor5/src/ui.js';
+import { createDropdown, CssTransitionDisablerMixin } 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, Dialog];
+        return [MediaEmbedEditing];
     }
     /**
      * @inheritDoc
@@ -31,78 +31,59 @@ 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');
-        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();
-            }
+        editor.ui.componentFactory.add('mediaEmbed', locale => {
+            const dropdown = createDropdown(locale);
+            this._setUpDropdown(dropdown, command);
+            return dropdown;
         });
-        return buttonView;
     }
-    _showDialog() {
+    _setUpDropdown(dropdown, command) {
         const editor = this.editor;
-        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);
-        }
-        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: () => {
-                        if (this._formView.isValid()) {
-                            editor.execute('mediaEmbed', this._formView.url);
-                            dialog.hide();
-                            editor.editing.view.focus();
-                        }
-                    }
+        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();
                 }
-            ]
+            });
+            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
         });
     }
 }

package/src/ui/mediaformview.d.ts

@@ -5,7 +5,7 @@
 /**
  * @module media-embed/ui/mediaformview
  */
-import { type InputTextView, LabeledFieldView, View } from 'ckeditor5/src/ui.js';
+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';
@@ -31,6 +31,22 @@ 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}.
      */
@@ -58,7 +74,7 @@ export default class MediaFormView extends View {
      */
     destroy(): void;
     /**
-     * Focuses the {@link #urlInputView}.
+     * Focuses the fist {@link #_focusables} in the form.
      */
     focus(): void;
     /**
@@ -86,4 +102,14 @@ 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,8 +5,9 @@
 /**
  * @module media-embed/ui/mediaformview
  */
-import { LabeledFieldView, View, createLabeledInputText, submitHandler } from 'ckeditor5/src/ui.js';
+import { ButtonView, FocusCycler, LabeledFieldView, View, ViewCollection, 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';
@@ -23,10 +24,26 @@ 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',
@@ -39,7 +56,9 @@ export default class MediaFormView extends View {
                 tabindex: '-1'
             },
             children: [
-                this.urlInputView
+                this.urlInputView,
+                this.saveButtonView,
+                this.cancelButtonView
             ]
         });
     }
@@ -51,10 +70,27 @@ export default class MediaFormView extends View {
         submitHandler({
             view: this
         });
-        // Register the view in the focus tracker.
-        this.focusTracker.add(this.urlInputView.element);
+        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);
+        });
         // 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
@@ -65,10 +101,10 @@ export default class MediaFormView extends View {
         this.keystrokes.destroy();
     }
     /**
-     * Focuses the {@link #urlInputView}.
+     * Focuses the fist {@link #_focusables} in the form.
      */
     focus() {
-        this.urlInputView.focus();
+        this._focusCycler.focusFirst();
     }
     /**
      * The native DOM `value` of the {@link #urlInputView} element.
@@ -80,7 +116,7 @@ export default class MediaFormView extends View {
         return this.urlInputView.fieldView.element.value.trim();
     }
     set url(url) {
-        this.urlInputView.fieldView.value = url.trim();
+        this.urlInputView.fieldView.element.value = url.trim();
     }
     /**
      * Validates the form and returns `false` when some fields are invalid.
@@ -121,7 +157,6 @@ 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;
@@ -129,4 +164,30 @@ 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,21 +10,15 @@
 	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;