@ckeditor/ckeditor5-image 34.2.0 → 35.1.0

package/src/imageinsert/imageinsertui.js

@@ -7,8 +7,9 @@
  * @module image/imageinsert/imageinsertui
  */
 
-import { Plugin } from 'ckeditor5/src/core';
+import { Plugin, icons } from 'ckeditor5/src/core';
 import ImageInsertPanelView from './ui/imageinsertpanelview';
+import { SplitButtonView, createDropdown } from 'ckeditor5/src/ui';
 import { prepareIntegrations } from './utils';
 
 /**
@@ -54,41 +55,66 @@ export default class ImageInsertUI extends Plugin {
 	 */
 	_createDropdownView( locale ) {
 		const editor = this.editor;
-		const imageInsertView = new ImageInsertPanelView( locale, prepareIntegrations( editor ) );
-		const command = editor.commands.get( 'uploadImage' );
-
-		const dropdownView = imageInsertView.dropdownView;
-		const splitButtonView = dropdownView.buttonView;
-
-		splitButtonView.actionView = editor.ui.componentFactory.create( 'uploadImage' );
-		// After we replaced action button with `uploadImage` component,
-		// we have lost a proper styling and some minor visual quirks have appeared.
-		// Brining back original split button classes helps fix the button styling
-		// See https://github.com/ckeditor/ckeditor5/issues/7986.
-		splitButtonView.actionView.extendTemplate( {
+		const t = locale.t;
+
+		const uploadImageCommand = editor.commands.get( 'uploadImage' );
+		const insertImageCommand = editor.commands.get( 'insertImage' );
+
+		/**
+		 * The dropdown view responsible for displaying the image insert UI.
+		 *
+		 * @member {module:ui/dropdown/dropdownview~DropdownView}
+		 */
+		this.dropdownView = createDropdown( locale, uploadImageCommand ? SplitButtonView : undefined );
+
+		const buttonView = this.dropdownView.buttonView;
+		const panelView = this.dropdownView.panelView;
+
+		buttonView.set( {
+			label: t( 'Insert image' ),
+			icon: icons.image,
+			tooltip: true
+		} );
+
+		panelView.extendTemplate( {
 			attributes: {
-				class: 'ck ck-button ck-splitbutton__action'
+				class: 'ck-image-insert__panel'
 			}
 		} );
 
-		return this._setUpDropdown( dropdownView, imageInsertView, command );
+		if ( uploadImageCommand ) {
+			const splitButtonView = this.dropdownView.buttonView;
+
+			splitButtonView.actionView = editor.ui.componentFactory.create( 'uploadImage' );
+			// After we replaced action button with `uploadImage` component,
+			// we have lost a proper styling and some minor visual quirks have appeared.
+			// Brining back original split button classes helps fix the button styling
+			// See https://github.com/ckeditor/ckeditor5/issues/7986.
+			splitButtonView.actionView.extendTemplate( {
+				attributes: {
+					class: 'ck ck-button ck-splitbutton__action'
+				}
+			} );
+		}
+
+		return this._setUpDropdown( uploadImageCommand || insertImageCommand );
 	}
 
 	/**
 	 * Sets up the dropdown view.
 	 *
-	 * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdownView.
-	 * @param {module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView} imageInsertView An imageInsertView.
-	 * @param {module:core/command~Command} command An insertImage command
+	 * @param {module:core/command~Command} command An uploadImage or insertImage command.
 	 *
 	 * @private
 	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
 	 */
-	_setUpDropdown( dropdownView, imageInsertView, command ) {
+	_setUpDropdown( command ) {
 		const editor = this.editor;
 		const t = editor.t;
+		const imageInsertView = new ImageInsertPanelView( editor.locale, prepareIntegrations( editor ) );
 		const insertButtonView = imageInsertView.insertButtonView;
 		const insertImageViaUrlForm = imageInsertView.getIntegration( 'insertImageViaUrl' );
+		const dropdownView = this.dropdownView;
 		const panelView = dropdownView.panelView;
 		const imageUtils = this.editor.plugins.get( 'ImageUtils' );
 
@@ -104,8 +130,6 @@ export default class ImageInsertUI extends Plugin {
 			const selectedElement = editor.model.document.selection.getSelectedElement();
 
 			if ( dropdownView.isOpen ) {
-				imageInsertView.focus();
-
 				if ( imageUtils.isImage( selectedElement ) ) {
 					imageInsertView.imageURLInputValue = selectedElement.getAttribute( 'src' );
 					insertButtonView.label = t( 'Update' );

package/src/imageinsert/ui/imageinsertpanelview.js

@@ -8,7 +8,7 @@
  */
 
 import { icons } from 'ckeditor5/src/core';
-import { ButtonView, View, SplitButtonView, ViewCollection, submitHandler, createDropdown, FocusCycler } from 'ckeditor5/src/ui';
+import { ButtonView, View, ViewCollection, submitHandler, FocusCycler } from 'ckeditor5/src/ui';
 import { Collection, FocusTracker, KeystrokeHandler } from 'ckeditor5/src/utils';
 
 import ImageInsertFormRowView from './imageinsertformrowview';
@@ -49,13 +49,6 @@ export default class ImageInsertPanelView extends View {
 		 */
 		this.cancelButtonView = cancelButtonView;
 
-		/**
-		 * The dropdown view.
-		 *
-		 * @member {module:ui/dropdown/dropdownview~DropdownView}
-		 */
-		this.dropdownView = this._createDropdownView( locale );
-
 		/**
 		 * The value of the URL input.
 		 *
@@ -223,35 +216,6 @@ export default class ImageInsertPanelView extends View {
 		return this._integrations.find( integration => integration.name === name );
 	}
 
-	/**
-	 * Creates the dropdown view.
-	 *
-	 * @param {module:utils/locale~Locale} locale The localization services instance.
-	 *
-	 * @private
-	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
-	 */
-	_createDropdownView( locale ) {
-		const t = locale.t;
-		const dropdownView = createDropdown( locale, SplitButtonView );
-		const splitButtonView = dropdownView.buttonView;
-		const panelView = dropdownView.panelView;
-
-		splitButtonView.set( {
-			label: t( 'Insert image' ),
-			icon: icons.image,
-			tooltip: true
-		} );
-
-		panelView.extendTemplate( {
-			attributes: {
-				class: 'ck-image-insert__panel'
-			}
-		} );
-
-		return dropdownView;
-	}
-
 	/**
 	 * Creates the following form controls:
 	 *

package/src/imageinsert.js

@@ -9,6 +9,7 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import ImageUpload from './imageupload';
+import ImageInsertViaUrl from './imageinsertviaurl';
 import ImageInsertUI from './imageinsert/imageinsertui';
 
 /**
@@ -37,7 +38,7 @@ export default class ImageInsert extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ ImageUpload, ImageInsertUI ];
+		return [ ImageUpload, ImageInsertViaUrl, ImageInsertUI ];
 	}
 }
 

package/src/imageinsertviaurl.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/imageinsertviaurl
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import ImageInsertUI from './imageinsert/imageinsertui';
+
+/**
+ * The image insert via URL plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/images-inserting#inserting-images-via-source-url
+ * Insert images via source URL} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image inserting via implemented integrations:
+ *
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI},
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageInsertViaUrl extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ImageInsertViaUrl';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageInsertUI ];
+	}
+}

package/src/imageresize/imageresizehandles.js

@@ -104,7 +104,7 @@ export default class ImageResizeHandles extends Plugin {
 					},
 					getResizeHost() {
 						// Return the model image element parent to avoid setting an inline element (<a>/<span>) as a resize host.
-						return domConverter.viewToDom( mapper.toViewElement( imageModel.parent ) );
+						return domConverter.mapViewToDom( mapper.toViewElement( imageModel.parent ) );
 					},
 					// TODO consider other positions.
 					isCentered() {

package/src/imagestyle/imagestyleui.js

@@ -131,7 +131,7 @@ export default class ImageStyleUI extends Plugin {
 			const splitButtonView = dropdownView.buttonView;
 			const splitButtonViewArrow = splitButtonView.arrowView;
 
-			addToolbarToDropdown( dropdownView, buttonViews );
+			addToolbarToDropdown( dropdownView, buttonViews, { enableActiveItemFocusOnDropdownOpen: true } );
 
 			splitButtonView.set( {
 				label: getDropdownButtonTitle( title, defaultButton.label ),
@@ -172,6 +172,12 @@ export default class ImageStyleUI extends Plugin {
 			dropdownView.bind( 'isEnabled' )
 				.toMany( buttonViews, 'isEnabled', ( ...areEnabled ) => areEnabled.some( identity ) );
 
+			// Focus the editable after executing the command.
+			// Overrides a default behaviour where the focus is moved to the dropdown button (#12125).
+			this.listenTo( dropdownView, 'execute', () => {
+				this.editor.editing.view.focus();
+			} );
+
 			return dropdownView;
 		} );
 	}

package/src/imageupload/imageuploadui.js

@@ -59,6 +59,8 @@ export default class ImageUploadUI extends Plugin {
 
 				if ( imagesToUpload.length ) {
 					editor.execute( 'uploadImage', { file: imagesToUpload } );
+
+					editor.editing.view.focus();
 				}
 			} );
 

package/src/imageutils.js

@@ -127,13 +127,19 @@ export default class ImageUtils extends Plugin {
 	 * @returns {module:engine/view/element~Element|null}
 	 */
 	getClosestSelectedImageWidget( selection ) {
+		const selectionPosition = selection.getFirstPosition();
+
+		if ( !selectionPosition ) {
+			return null;
+		}
+
 		const viewElement = selection.getSelectedElement();
 
 		if ( viewElement && this.isImageWidget( viewElement ) ) {
 			return viewElement;
 		}
 
-		let parent = selection.getFirstPosition().parent;
+		let parent = selectionPosition.parent;
 
 		while ( parent ) {
 			if ( parent.is( 'element' ) && this.isImageWidget( parent ) ) {