The UX of resizing small images.

packages/ckeditor5-image/theme/image.css

@@ -12,6 +12,9 @@
 		/* Make sure there is some space between the content and the image. Center image by default. */
 		margin: 1em auto;
 
+		/* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
+		min-width: 50px;
+
 		& img {
 			/* Prevent unnecessary margins caused by line-height (see #44). */
 			display: block;
@@ -21,9 +24,6 @@
 
 			/* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
 			max-width: 100%;
-
-			/* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
-			min-width: 50px;
 		}
 	}
 
@@ -61,6 +61,9 @@
 	& .image > figcaption.ck-placeholder::before {
 		padding-left: inherit;
 		padding-right: inherit;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	/*

packages/ckeditor5-widget/src/widgetresize/resizer.js

@@ -7,7 +7,6 @@
  * @module widget/widgetresize/resizer
  */
 
-import View from '@ckeditor/ckeditor5-ui/src/view';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import compareArrays from '@ckeditor/ckeditor5-utils/src/comparearrays';
@@ -16,6 +15,7 @@ import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
 
 import ResizeState from './resizerstate';
+import SizeView from './sizeview';
 
 /**
  * Represents a resizer for a single resizable object.
@@ -41,7 +41,7 @@ export default class Resizer {
 		 *
 		 * @protected
 		 * @readonly
-		 * @member {module:widget/widgetresize/resizer~SizeView} #_sizeUI
+		 * @member {module:widget/widgetresize/sizeview} #_sizeUI
 		 */
 
 		/**
@@ -475,61 +475,6 @@ export default class Resizer {
 
 mix( Resizer, ObservableMixin );
 
-/**
- * A view displaying the proposed new element size during the resizing.
- *
- * @extends {module:ui/view~View}
- */
-class SizeView extends View {
-	constructor() {
-		super();
-
-		const bind = this.bindTemplate;
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-size-view',
-					bind.to( 'activeHandlePosition', value => value ? `ck-orientation-${ value }` : '' )
-				],
-				style: {
-					display: bind.if( 'isVisible', 'none', visible => !visible )
-				}
-			},
-			children: [ {
-				text: bind.to( 'label' )
-			} ]
-		} );
-	}
-
-	bindToState( options, resizerState ) {
-		this.bind( 'isVisible' ).to( resizerState, 'proposedWidth', resizerState, 'proposedHeight', ( width, height ) =>
-			width !== null && height !== null );
-
-		this.bind( 'label' ).to(
-			resizerState, 'proposedHandleHostWidth',
-			resizerState, 'proposedHandleHostHeight',
-			resizerState, 'proposedWidthPercents',
-			( width, height, widthPercents ) => {
-				if ( options.unit === 'px' ) {
-					return `${ width }×${ height }`;
-				} else {
-					return `${ widthPercents }%`;
-				}
-			}
-		);
-
-		this.bind( 'activeHandlePosition' ).to( resizerState );
-	}
-
-	dismiss() {
-		this.unbind();
-		this.isVisible = false;
-	}
-}
-
 // @private
 // @param {String} resizerPosition Expected resizer position like `"top-left"`, `"bottom-right"`.
 // @returns {String} A prefixed HTML class name for the resizer element

packages/ckeditor5-widget/src/widgetresize/sizeview.js

@@ -0,0 +1,80 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module widget/widgetresize/sizeview
+ */
+
+import View from '@ckeditor/ckeditor5-ui/src/view';
+
+/**
+ * A view displaying the proposed new element size during the resizing.
+ *
+ * @extends {module:ui/view~View}
+ */
+
+export default class SizeView extends View {
+	constructor() {
+		/**
+		 * The position of the view defined based on the host size and active handle position.
+		 *
+		 * @private
+		 * @observable
+		 * @member {String} #viewPosition
+		 */
+
+		super();
+
+		const bind = this.bindTemplate;
+
+		this.setTemplate( {
+			tag: 'div',
+			attributes: {
+				class: [
+					'ck',
+					'ck-size-view',
+					bind.to( 'viewPosition', value => value ? `ck-orientation-${ value }` : '' )
+				],
+				style: {
+					display: bind.if( 'isVisible', 'none', visible => !visible )
+				}
+			},
+			children: [ {
+				text: bind.to( 'label' )
+			} ]
+		} );
+	}
+
+	bindToState( options, resizerState ) {
+		this.bind( 'isVisible' ).to( resizerState, 'proposedWidth', resizerState, 'proposedHeight', ( width, height ) =>
+			width !== null && height !== null );
+
+		this.bind( 'label' ).to(
+			resizerState, 'proposedHandleHostWidth',
+			resizerState, 'proposedHandleHostHeight',
+			resizerState, 'proposedWidthPercents',
+			( width, height, widthPercents ) => {
+				if ( options.unit === 'px' ) {
+					return `${ width }×${ height }`;
+				} else {
+					return `${ widthPercents }%`;
+				}
+			}
+		);
+
+		this.bind( 'viewPosition' ).to(
+			resizerState, 'activeHandlePosition',
+			resizerState, 'proposedHandleHostWidth',
+			resizerState, 'proposedHandleHostHeight',
+			// If the widget is too small to contain the size label, display the label above.
+			( position, width, height ) => width < 50 || height < 50 ? 'above-center' : position
+		);
+	}
+
+	dismiss() {
+		this.unbind();
+		this.isVisible = false;
+	}
+}

packages/ckeditor5-widget/tests/widgetresize/sizeview.js

@@ -0,0 +1,56 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+import SizeView from '../../src/widgetresize/sizeview';
+import ResizerState from '../../src/widgetresize/resizerstate';
+
+describe( 'SizeView', () => {
+	describe( 'activeHandlePosition', () => {
+		let sizeView, state;
+
+		beforeEach( async () => {
+			state = new ResizerState();
+			sizeView = new SizeView();
+
+			sizeView.bindToState( {}, state );
+			sizeView.render();
+		} );
+
+		it( 'should have valid `viewPosition` property and class if the widget width is smaller than 50px', () => {
+			state.activeHandlePosition = 'top-right';
+			state.update( {
+				handleHostWidth: 49,
+				handleHostHeight: 200
+			} );
+
+			expect( sizeView.viewPosition ).to.equal( 'above-center' );
+			expect( sizeView.element.classList.contains( 'ck-orientation-above-center' ) ).to.be.true;
+		} );
+
+		it( 'should have valid `viewPosition` property and class if the widget height is smaller than 50px', () => {
+			state.activeHandlePosition = 'top-right';
+			state.update( {
+				handleHostWidth: 200,
+				handleHostHeight: 49
+			} );
+
+			expect( sizeView.viewPosition ).to.equal( 'above-center' );
+			expect( sizeView.element.classList.contains( 'ck-orientation-above-center' ) ).to.be.true;
+		} );
+
+		it( 'should have valid `viewPosition` property and class if the widget width is bigger than 50px/50px', () => {
+			const position = 'top-right';
+
+			state.activeHandlePosition = position;
+			state.update( {
+				handleHostWidth: 200,
+				handleHostHeight: 200
+			} );
+
+			expect( sizeView.viewPosition ).to.equal( position );
+			expect( sizeView.element.classList.contains( `ck-orientation-${ position }` ) ).to.be.true;
+		} );
+	} );
+} );

packages/ckeditor5-widget/theme/widget.css

@@ -10,6 +10,7 @@
 
 	--ck-resizer-border-radius: var(--ck-border-radius);
 	--ck-resizer-tooltip-offset: 10px;
+	--ck-resizer-tooltip-height: calc(var(--ck-spacing-small) * 2 + 10px);
 }
 
 .ck .ck-widget {
@@ -51,12 +52,15 @@
 	border-radius: var(--ck-resizer-border-radius);
 	font-size: var(--ck-font-size-tiny);
 	display: block;
-	padding: var(--ck-spacing-small);
+	padding: 0 var(--ck-spacing-small);
+	height: var(--ck-resizer-tooltip-height);
+	line-height: var(--ck-resizer-tooltip-height);
 
 	&.ck-orientation-top-left,
 	&.ck-orientation-top-right,
 	&.ck-orientation-bottom-right,
-	&.ck-orientation-bottom-left {
+	&.ck-orientation-bottom-left,
+	&.ck-orientation-above-center {
 		position: absolute;
 	}
 
@@ -79,4 +83,11 @@
 		bottom: var(--ck-resizer-tooltip-offset);
 		left: var(--ck-resizer-tooltip-offset);
 	}
+
+	/* Class applied if the widget is too small to contain the size label */
+	&.ck-orientation-above-center {
+		top: calc(var(--ck-resizer-tooltip-height) * -1);
+		left: 50%;
+		transform: translate(-50%);
+	}
 }