Merge pull request #298 from ckeditor/t/ckeditor5-image/241

Feature: Introduced image widget resizer. Closes #241.

Author: Reinmar

docs/_snippets/features/build-image-source.html

@@ -0,0 +1,14 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+
+import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+
+ClassicEditor.builtinPlugins.push( ImageResize );
+
+window.ClassicEditor = ClassicEditor;

docs/_snippets/features/build-image-source.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-caption' ), {
-		removePlugins: [ 'ImageStyle' ],
+		removePlugins: [ 'ImageStyle', 'ImageResize' ],
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		},

docs/_snippets/features/image-caption.js

@@ -0,0 +1,14 @@
+<div id="snippet-image-resize-px">
+	<h2>Resize me!</h2>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+
+	<h2>Resized image (width: 400px):</h2>
+
+	<figure class="image image_resized" style="width:400px;">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+</div>

docs/_snippets/features/image-resize-px.html

@@ -0,0 +1,25 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-resize-px' ), {
+		image: {
+			resizeUnit: 'px'
+		},
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResizePX = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

docs/_snippets/features/image-resize-px.js

@@ -0,0 +1,14 @@
+<div id="snippet-image-resize">
+	<h2>Resize me!</h2>
+
+	<figure class="image">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+
+	<h2>Resized image (width: 75%):</h2>
+
+	<figure class="image image_resized" style="width:75%;">
+		<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+	</figure>
+</div>

docs/_snippets/features/image-resize.html

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-resize' ), {
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResize = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

docs/_snippets/features/image-resize.js

@@ -9,6 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
+		removePlugins: [ 'ImageResize' ],
 		image: {
 			styles: [
 				// This option is equal to a situation where no style is applied.

docs/_snippets/features/image-style-custom.js

@@ -9,6 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style' ), {
+		removePlugins: [ 'ImageResize' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

docs/_snippets/features/image-style.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-toolbar' ), {
-		removePlugins: [ 'ImageCaption', 'ImageStyle' ],
+		removePlugins: [ 'ImageCaption', 'ImageStyle', 'ImageResize' ],
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		},

docs/_snippets/features/image-toolbar.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image' ), {
-		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle' ],
+		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

docs/_snippets/features/image.js

@@ -3,7 +3,7 @@ title: Images
 category: features
 ---
 
-{@snippet build-classic-source}
+{@snippet features/build-image-source}
 
 The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains multiple plugins that implement various image-related features:
 
@@ -13,9 +13,12 @@ The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckedit
 * {@link module:image/imagestyle~ImageStyle} adds support for image styles.
 * {@link module:image/imagetextalternative~ImageTextAlternative} adds support for adding text alternative.
 * {@link module:image/imageupload~ImageUpload} adds support for uploading dropped or pasted images (see: {@link features/image-upload Image upload}).
+* {@link module:image/imageresize~ImageResize} adds support for resizing images.
 
 <info-box info>
-	All features listed above are enabled by default in all builds.
+	All features listed above expect image resize are enabled by default in all builds.
+
+	Check the documentation of each sub-feature to learn more about it.
 </info-box>
 
 ## Base image support
@@ -175,6 +178,29 @@ See the {@link features/image-upload Image upload} guide.
 
 Responsive images support in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Learn more how to use the feature in your project in the {@link features/easy-image#responsive-images "Easy Image integration"} guide.
 
+## Resizing images
+
+TODO:
+
+* overview
+* markup
+* styling concerns
+* installation
+* note about it not being enabled by default
+* a note about followups? a dialog, a toggle predefined sizes (e.g. 40%, 50%, 75%, 100%)
+
+{@snippet features/image-resize}
+
+### Using pixels instead of percentage width
+
+TODO:
+
+* overview
+* downsides
+* configuration
+
+{@snippet features/image-resize-px}
+
 ## Installation
 
 To add image features to your editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:

docs/features/image.md

@@ -19,13 +19,17 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
+    "@ckeditor/ckeditor5-block-quote": "^11.1.2",
     "@ckeditor/ckeditor5-clipboard": "^12.0.1",
     "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
-    "@ckeditor/ckeditor5-enter": "^11.0.4",
+	"@ckeditor/ckeditor5-enter": "^11.0.4",
+	"@ckeditor/ckeditor5-easy-image": "^11.0.4",
     "@ckeditor/ckeditor5-heading": "^11.0.4",
+    "@ckeditor/ckeditor5-indent": "^10.0.1",
     "@ckeditor/ckeditor5-link": "^11.1.1",
     "@ckeditor/ckeditor5-list": "^12.0.4",
     "@ckeditor/ckeditor5-paragraph": "^11.0.4",
+    "@ckeditor/ckeditor5-table": "^13.0.0",
     "@ckeditor/ckeditor5-typing": "^12.1.1",
     "@ckeditor/ckeditor5-undo": "^11.0.4",
     "eslint": "^5.5.0",

package.json

@@ -0,0 +1,165 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/imageresize
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
+import ImageResizeCommand from './imageresize/imageresizecommand';
+
+import '../theme/imageresize.css';
+
+/**
+ * The image resize plugin.
+ *
+ * It adds a possibility to resize each image using handles.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageResize extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ WidgetResize ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ImageResize';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const command = new ImageResizeCommand( editor );
+
+		this._registerSchema();
+		this._registerConverters();
+
+		editor.commands.add( 'imageResize', command );
+
+		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
+			const widget = conversionApi.mapper.toViewElement( data.item );
+
+			const resizer = editor.plugins
+				.get( WidgetResize )
+				.attachTo( {
+					unit: editor.config.get( 'image.resizeUnit' ) || '%',
+
+					modelElement: data.item,
+					viewElement: widget,
+					downcastWriter: conversionApi.writer,
+
+					getHandleHost( domWidgetElement ) {
+						return domWidgetElement.querySelector( 'img' );
+					},
+					getResizeHost( domWidgetElement ) {
+						return domWidgetElement;
+					},
+					// TODO consider other positions.
+					isCentered() {
+						const imageStyle = data.item.getAttribute( 'imageStyle' );
+
+						return !imageStyle || imageStyle == 'full' || imageStyle == 'alignCenter';
+					},
+
+					onCommit( newValue ) {
+						editor.execute( 'imageResize', { width: newValue } );
+					}
+				} );
+
+			resizer.on( 'updateSize', () => {
+				if ( !widget.hasClass( 'image_resized' ) ) {
+					editor.editing.view.change( writer => {
+						writer.addClass( 'image_resized', widget );
+					} );
+				}
+			} );
+
+			resizer.bind( 'isEnabled' ).to( command );
+		}, { priority: 'low' } );
+	}
+
+	/**
+	 * @private
+	 */
+	_registerSchema() {
+		this.editor.model.schema.extend( 'image', {
+			allowAttributes: 'width'
+		} );
+	}
+
+	/**
+	 * Registers image resize converters.
+	 *
+	 * @private
+	 */
+	_registerConverters() {
+		const editor = this.editor;
+
+		// Dedicated converter to propagate image's attribute to the img tag.
+		editor.conversion.for( 'downcast' ).add( dispatcher =>
+			dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const viewWriter = conversionApi.writer;
+				const figure = conversionApi.mapper.toViewElement( data.item );
+
+				if ( data.attributeNewValue !== null ) {
+					viewWriter.setStyle( 'width', data.attributeNewValue, figure );
+					viewWriter.addClass( 'image_resized', figure );
+				} else {
+					viewWriter.removeStyle( 'width', figure );
+					viewWriter.removeClass( 'image_resized', figure );
+				}
+			} )
+		);
+
+		editor.conversion.for( 'upcast' )
+			.attributeToAttribute( {
+				view: {
+					name: 'figure',
+					styles: {
+						width: /.+/
+					}
+				},
+				model: {
+					key: 'width',
+					value: viewElement => viewElement.getStyle( 'width' )
+				}
+			} );
+	}
+}
+
+/**
+ * The available options are `'px'` or `'%'`.
+ *
+ * Determines size unit applied to resized image.
+ *
+ * ```js
+ * ClassicEditor
+ * 	.create( editorElement, {
+ * 		 image: {
+ * 			 resizeUnit: 'px'
+ * 		 }
+ * 	 } )
+ * 	.then( ... )
+ * 	.catch( ... );
+ * ```
+ *
+ * This option is used by the {@link module:image/imageresize~ImageResize} feature.
+ *
+ * @default '%'
+ * @member {String} module:image/image~ImageConfig#resizeUnit
+ */