Added the image resize balloon (#16140)

Feature (image): Added the custom image width input option to the image toolbar, as an alternative to drag-and-drop resizing. --------- Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
ckeditor · Apr 15, 2024 · 7c0d752 · 7c0d752
1 parent 0cf0b1e
commit 7c0d752
Show file tree

Hide file tree

Showing 40 changed files with 2,182 additions and 119 deletions.
diff --git a/packages/ckeditor5-core/src/index.ts b/packages/ckeditor5-core/src/index.ts
@@ -76,6 +76,7 @@ import objectLeft from './../theme/icons/object-inline-left.svg';
 import objectRight from './../theme/icons/object-inline-right.svg';
 
 import objectSizeFull from './../theme/icons/object-size-full.svg';
+import objectSizeCustom from './../theme/icons/object-size-custom.svg';
 import objectSizeLarge from './../theme/icons/object-size-large.svg';
 import objectSizeSmall from './../theme/icons/object-size-small.svg';
 import objectSizeMedium from './../theme/icons/object-size-medium.svg';
@@ -158,6 +159,7 @@ export const icons = {
 	objectBlockLeft,
 	objectBlockRight,
 
+	objectSizeCustom,
 	objectSizeFull,
 	objectSizeLarge,
 	objectSizeSmall,

diff --git a/packages/ckeditor5-core/theme/icons/object-size-custom.svg b/packages/ckeditor5-core/theme/icons/object-size-custom.svg
diff --git a/packages/ckeditor5-image/ckeditor5-metadata.json b/packages/ckeditor5-image/ckeditor5-metadata.json
@@ -112,7 +112,7 @@
 		{
 			"name": "Image resize",
 			"className": "ImageResize",
-			"description": "Allows for resizing images using handles.",
+			"description": "Allows for resizing images using handles and offers the UI fine tune the sizes.",
 			"docs": "features/images/images-resizing.html",
 			"path": "src/imageresize.js",
 			"requires": [

diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-full.js b/packages/ckeditor5-image/docs/_snippets/features/image-full.js
@@ -41,6 +41,7 @@ ClassicEditor
 				'resizeImage:100',
 				'resizeImage:200',
 				'resizeImage:original',
+				'resizeImage:custom',
 				'|',
 				'ckboxImageEdit'
 			],
@@ -50,6 +51,11 @@ ClassicEditor
 					value: null,
 					icon: 'original'
 				},
+				{
+					name: 'resizeImage:custom',
+					value: 'custom',
+					icon: 'custom'
+				},
 				{
 					name: 'resizeImage:100',
 					value: '100',

diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons-dropdown.js b/packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons-dropdown.js
@@ -38,6 +38,11 @@ ClassicEditor
 					label: 'Original',
 					value: null
 				},
+				{
+					name: 'resizeImage:custom',
+					label: 'Custom',
+					value: 'custom'
+				},
 				{
 					name: 'resizeImage:40',
 					label: '40%',

diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons.js b/packages/ckeditor5-image/docs/_snippets/features/image-resize-buttons.js
@@ -38,6 +38,12 @@ ClassicEditor
 					value: null,
 					icon: 'original'
 				},
+				{
+					name: 'resizeImage:custom',
+					label: 'Custom',
+					value: 'custom',
+					icon: 'custom'
+				},
 				{
 					name: 'resizeImage:20',
 					label: '20%',
@@ -55,6 +61,7 @@ ClassicEditor
 				'resizeImage:20',
 				'resizeImage:40',
 				'resizeImage:original',
+				'resizeImage:custom',
 				'|',
 				'ckboxImageEdit'
 			]

diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-resize-px.js b/packages/ckeditor5-image/docs/_snippets/features/image-resize-px.js
@@ -28,6 +28,11 @@ ClassicEditor
 					label: 'Original',
 					value: null
 				},
+				{
+					name: 'resizeImage:custom',
+					label: 'Custom',
+					value: 'custom'
+				},
 				{
 					name: 'resizeImage:100',
 					label: '100px',

diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-responsive.js b/packages/ckeditor5-image/docs/_snippets/features/image-responsive.js
@@ -36,6 +36,7 @@ ClassicEditor
 				'resizeImage:100',
 				'resizeImage:200',
 				'resizeImage:original',
+				'resizeImage:custom',
 				'|',
 				'ckboxImageEdit'
 			],
@@ -45,6 +46,11 @@ ClassicEditor
 					value: null,
 					icon: 'original'
 				},
+				{
+					name: 'resizeImage:custom',
+					value: 'custom',
+					icon: 'custom'
+				},
 				{
 					name: 'resizeImage:100',
 					value: '100',

diff --git a/packages/ckeditor5-image/docs/_snippets/features/image-style-presentational.js b/packages/ckeditor5-image/docs/_snippets/features/image-style-presentational.js
@@ -28,6 +28,11 @@ ClassicEditor
 					label: 'Original',
 					value: null
 				},
+				{
+					name: 'resizeImage:custom',
+					label: 'Custom',
+					value: 'custom'
+				},
 				{
 					name: 'resizeImage:40',
 					label: '50%',

diff --git a/packages/ckeditor5-image/docs/features/images-resizing.md b/packages/ckeditor5-image/docs/features/images-resizing.md
@@ -69,6 +69,11 @@ const imageConfiguration = {
 			value: null,
 			label: 'Original'
 		},
+		{
+			name: 'resizeImage:custom',
+			label: 'Custom',
+			value: 'custom'
+		},
 		{
 			name: 'resizeImage:40',
 			value: '40',
@@ -110,6 +115,11 @@ const imageConfiguration = {
 			value: null,
 			icon: 'original'
 		},
+		{
+			name: 'resizeImage:custom',
+			value: 'custom',
+			icon: 'custom'
+		},
 		{
 			name: 'resizeImage:50',
 			value: '50',
@@ -125,6 +135,7 @@ const imageConfiguration = {
 		'resizeImage:50',
 		'resizeImage:75',
 		'resizeImage:original',
+		'resizeImage:custom',
 		// More toolbar options.
 		// ...
 	]
@@ -155,6 +166,11 @@ ClassicEditor
 				value: null,
 				icon: 'original'
 			},
+			{
+				name: 'resizeImage:custom',
+				value: 'custom',
+				icon: 'custom'
+			},
 			{
 				name: 'resizeImage:50',
 				value: '50',
@@ -170,6 +186,7 @@ ClassicEditor
 			'resizeImage:50',
 			'resizeImage:75',
 			'resizeImage:original',
+			'resizeImage:custom',
 			// More toolbar options.
 			// ...
 		] }
@@ -242,6 +259,11 @@ ClassicEditor
 					label: 'Original',
 					value: null
 				},
+				{
+					name: 'resizeImage:custom',
+					label: 'Custom',
+					value: 'custom'
+				},
 				{
 					name: 'resizeImage:100',
 					label: '100px',

diff --git a/packages/ckeditor5-image/lang/contexts.json b/packages/ckeditor5-image/lang/contexts.json
@@ -23,12 +23,17 @@
 	"Resize image": "The label used for the dropdown in the image toolbar containing defined resize options.",
 	"Resize image to %0": "The label used for the standalone resize options buttons in the image toolbar.",
 	"Resize image to the original size": "The accessibility label of the standalone image resize reset option button in the image toolbar for screen readers.",
+	"Resize image (in %0)": "The label for image resize balloon input.",
 	"Original": "The default label for the resize option that resets the size of the image.",
+	"Custom image size": "The accessibility label of the standalone image resize custom option button in the image toolbar for screen readers.",
+	"Custom": "The label for the resize option that allows user to enter custom size of the image.",
 	"Image resize list": "The accessibility label of the image resize dropdown for screen readers.",
 	"Insert": "The label of the form submit button if the image source URL input has no value.",
 	"Update": "The label of the form submit button if the image source URL input has a value.",
 	"Insert image via URL": "The input label for the Insert image via URL form.",
 	"Update image URL": "The input label for the Insert image via URL form for a pre-existing image.",
 	"Caption for the image": "Text used by screen readers do describe an image when the image has no text alternative.",
-	"Caption for image: %0": "Text used by screen readers do describe an image when there is a text alternative available, e.g. 'Caption for image: this is a description of the image.'"
+	"Caption for image: %0": "Text used by screen readers do describe an image when there is a text alternative available, e.g. 'Caption for image: this is a description of the image.'",
+	"The value must not be empty.": "Text used as error label when user submitted custom image resize form with blank value.",
+	"The value should be a plain number.": "Text used as error label when user submitted custom image resize form with incorrect value."
 }
diff --git a/packages/ckeditor5-image/src/augmentation.ts b/packages/ckeditor5-image/src/augmentation.ts
@@ -26,6 +26,7 @@ import type {
 	ImageCaptionUtils,
 	ImageInsertUI,
 	ImageResizeEditing,
+	ImageCustomResizeUI,
 	ImageSizeAttributes,
 	ImageStyleEditing,
 	ImageStyleUI,
@@ -77,6 +78,7 @@ declare module '@ckeditor/ckeditor5-core' {
 		[ ImageCaptionUtils.pluginName ]: ImageCaptionUtils;
 		[ ImageInsertUI.pluginName ]: ImageInsertUI;
 		[ ImageResizeEditing.pluginName ]: ImageResizeEditing;
+		[ ImageCustomResizeUI.pluginName ]: ImageCustomResizeUI;
 		[ ImageSizeAttributes.pluginName ]: ImageSizeAttributes;
 		[ ImageStyleEditing.pluginName ]: ImageStyleEditing;
 		[ ImageStyleUI.pluginName ]: ImageStyleUI;

diff --git a/packages/ckeditor5-image/src/imageresize.ts b/packages/ckeditor5-image/src/imageresize.ts
@@ -11,6 +11,7 @@ import { Plugin } from 'ckeditor5/src/core.js';
 import ImageResizeButtons from './imageresize/imageresizebuttons.js';
 import ImageResizeEditing from './imageresize/imageresizeediting.js';
 import ImageResizeHandles from './imageresize/imageresizehandles.js';
+import ImageCustomResizeUI from './imageresize/imagecustomresizeui.js';
 
 import '../theme/imageresize.css';
 
@@ -24,7 +25,7 @@ export default class ImageResize extends Plugin {
 	 * @inheritDoc
 	 */
 	public static get requires() {
-		return [ ImageResizeEditing, ImageResizeHandles, ImageResizeButtons ] as const;
+		return [ ImageResizeEditing, ImageResizeHandles, ImageCustomResizeUI, ImageResizeButtons ] as const;
 	}
 
 	/**