Przeglądaj źródła

AdAdd support for percents.

Piotrek Koszuliński 6 lat temu
rodzic
commit
b0172a7d6f

+ 8 - 9
packages/ckeditor5-image/src/imageresize.js

@@ -51,17 +51,17 @@ export default class ImageResize extends Plugin {
 			const resizer = editor.plugins
 				.get( WidgetResize )
 				.attachTo( {
+					unit: editor.config.get( 'image.resizeUnit' ) || '%',
+
 					modelElement: data.item,
 					viewElement: widget,
 					downcastWriter: conversionApi.writer,
-					getResizeHost( domWidgetElement ) {
-						return domWidgetElement.querySelector( 'img' );
-					},
+
 					getHandleHost( domWidgetElement ) {
 						return domWidgetElement.querySelector( 'img' );
 					},
-					getAspectRatio( domResizeHost ) {
-						return domResizeHost.naturalWidth / domResizeHost.naturalHeight;
+					getResizeHost( domWidgetElement ) {
+						return domWidgetElement;
 					},
 					// TODO consider other positions.
 					isCentered() {
@@ -69,10 +69,9 @@ export default class ImageResize extends Plugin {
 
 						return !imageStyle || imageStyle == 'full';
 					},
-					onCommit( resizerState ) {
-						const value = resizerState.proposedWidthPercents ?
-							resizerState.proposedWidthPercents + '%' : resizerState.proposedWidth + 'px';
-						editor.execute( 'imageResize', { width: value } );
+
+					onCommit( newValue ) {
+						editor.execute( 'imageResize', { width: newValue } );
 					}
 				} );
 

+ 4 - 1
packages/ckeditor5-image/tests/imageresize.js

@@ -51,7 +51,10 @@ describe( 'ImageResize', () => {
 
 		return ClassicEditor
 			.create( editorElement, {
-				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
+				plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
+				image: {
+					resizeUnit: 'px'
+				}
 			} )
 			.then( newEditor => {
 				editor = newEditor;

+ 48 - 27
packages/ckeditor5-image/tests/manual/imageresize.html

@@ -1,58 +1,79 @@
 <style>
-	.fancyEditorWrapper figure {
+	.fancy-editor-wrapper figure {
 		padding: 20px;
 	}
-
 </style>
 
 <div id="editor">
-	<figure class="image image-style-side" style="width: 240px">
+	<h2>Image (width: 40%)</h2>
+
+	<figure class="image image-style-side" style="width: 40%">
 		<img src="sample.jpg" alt="" />
 	</figure>
 
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
-		et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
-		leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+
+	<h2>Image (width: not set)</h2>
 
 	<figure class="image">
 		<img src="sample.jpg" alt="" />
 	</figure>
 
-	<p>Responisve image below:</p>
+	<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
 
 	<figure class="image">
-		<img src="https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png" srcset="https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_110 110w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_220 220w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_330 330w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_440 440w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_550 550w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_660 660w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_770 770w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_880 880w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_990 990w, https://33333.cdn.cke-cs.com/rc1DFuFpHqcR3Mah6y0e/images/975eb604695aced27171b01b318281ee640d5f11d8fc828b.png/w_1025 1025w"
-		sizes="100vw" width="1024">
+		<img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
 	</figure>
 
-	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
-		et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
-		leo interdum. </p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortisleo interdum. </p>
 </div>
 
-<div class="fancyEditorWrapper">
-	<h2>Fancy editor</h2>
+<h1>Fancy editor (padding inside figure)</h1>
 
-	<p>This is editor with fancier image styling. Images have some internal padding.</p>
+<div class="fancy-editor-wrapper">
+	<div id="fancy-editor">
+		<h2>Image (width: 40%)</h2>
 
-	<div id="fancyEditor">
-		<figure class="image image-style-side" style="width: 240px">
+		<figure class="image image-style-side" style="width: 40%">
 			<img src="sample.jpg" alt="" />
 		</figure>
 
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
-			tellus
-			et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
-			lobortis
-			leo interdum. </p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+
+		<h2>Image (width: not set)</h2>
+
 		<figure class="image">
 			<img src="sample.jpg" alt="" />
 		</figure>
 
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id
-			tellus
-			et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non
-			lobortis
-			leo interdum. </p>
+		<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
+
+		<figure class="image">
+			<img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
+		</figure>
+
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortisleo interdum. </p>
 	</div>
 </div>
+
+<h1>Images with widths defined with other units</h1>
+
+<div id="editor-other-units">
+	<h2>Image (width: 200px)</h2>
+
+	<figure class="image" style="width: 200px">
+		<img src="sample.jpg" alt="" />
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+
+	<h2>Image (width: 10em)</h2>
+
+	<figure class="image" style="width: 10em">
+		<img src="sample.jpg" alt="" />
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+</div>

+ 10 - 1
packages/ckeditor5-image/tests/manual/imageresize.js

@@ -45,10 +45,19 @@ ClassicEditor
 	} );
 
 ClassicEditor
-	.create( document.querySelector( '#fancyEditor' ), commonConfig )
+	.create( document.querySelector( '#fancy-editor' ), commonConfig )
 	.then( editor => {
 		window.fancyEditor = editor;
 	} )
 	.catch( err => {
 		console.error( err.stack );
 	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-other-units' ), commonConfig )
+	.then( editor => {
+		window.editorOtherUnits = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 83 - 0
packages/ckeditor5-image/tests/manual/imageresizepx.html

@@ -0,0 +1,83 @@
+<style>
+	.fancy-editor-wrapper figure {
+		padding: 20px;
+	}
+</style>
+
+<div id="editor">
+	<h2>Image (width: 200px)</h2>
+
+	<figure class="image image-style-side" style="width: 200px">
+		<img src="sample.jpg" alt="" />
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+
+	<h2>Image (width: not set)</h2>
+
+	<figure class="image">
+		<img src="sample.jpg" alt="" />
+	</figure>
+
+	<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
+
+	<figure class="image">
+		<img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+</div>
+
+<h1>Images with widths defined with other units</h1>
+
+<div id="editor-other-units">
+	<h2>Image (width: 40%)</h2>
+
+	<figure class="image" style="width: 40%">
+		<img src="sample.jpg" alt="" />
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+
+	<h2>Image (width: 10em)</h2>
+
+	<figure class="image" style="width: 10em">
+		<img src="sample.jpg" alt="" />
+	</figure>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
+</div>
+
+<div style="background:red; padding: 10px">
+	<h1>Fancy editor (padding inside figure)</h1>
+
+	<p>Note: this feature doesn't well with padding and px units for now.</p>
+
+	<div class="fancy-editor-wrapper" style="background:red">
+		<div id="fancy-editor">
+			<h2>Image (width: 200px)</h2>
+
+			<figure class="image image-style-side" style="width: 200px">
+				<img src="sample.jpg" alt="" />
+			</figure>
+
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum. </p>
+
+			<h2>Image (width: not set)</h2>
+
+			<figure class="image">
+				<img src="sample.jpg" alt="" />
+			</figure>
+
+			<h2>Responsive image (width style: not set, width attribute present on the image)</h2>
+
+			<figure class="image">
+				<img alt="Picture of the Warsaw Old Town." width="4288" srcset="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_430 430w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_860 860w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1290 1290w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_1720 1720w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2150 2150w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_2580 2580w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3010 3010w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3440 3440w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_3870 3870w, https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg/w_4288 4288w" sizes="100vw" src="https://33333.cdn.cke-cs.com/0fNqCUeBSal4ENvGfd7K/images/c12cb88e596270d8d963b7c87bef1767880f42d94fb2ec43_warsaw01.jpg">
+			</figure>
+
+			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id telluset mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortisleo interdum. </p>
+		</div>
+	</div>
+</div>

+ 64 - 0
packages/ckeditor5-image/tests/manual/imageresizepx.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document, console, window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+import ImageResize from '../../src/imageresize';
+import Indent from '@ckeditor/ckeditor5-indent/src/indent';
+import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';
+import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+const commonConfig = {
+	plugins: [
+		ArticlePluginSet,
+		ImageResize,
+		Indent,
+		IndentBlock,
+		EasyImage
+	],
+	toolbar: [ 'heading', '|', 'bold', 'italic', 'link',
+		'bulletedList', 'numberedList', 'blockQuote', 'insertTable', 'undo', 'redo', 'outdent', 'indent' ],
+	image: {
+		resizeUnit: 'px',
+		toolbar: [ 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:side' ],
+		styles: [
+			'full',
+			'alignLeft',
+			'side' // Purposely using side image instead right aligned image to make sure it works well with both style types.
+		]
+	},
+	cloudServices: CS_CONFIG
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), commonConfig )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#fancy-editor' ), commonConfig )
+	.then( editor => {
+		window.fancyEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+ClassicEditor
+	.create( document.querySelector( '#editor-other-units' ), commonConfig )
+	.then( editor => {
+		window.editorOtherUnits = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 10 - 0
packages/ckeditor5-image/tests/manual/imageresizepx.md

@@ -0,0 +1,10 @@
+## Image resize
+
+* Image resizer should be visible after focusing the image.
+* There should be four resizers.
+* Resizers should always be bound to image, not the entire image widget.
+
+### Edge cases
+
+* Make sure that the resized image can't be bigger than the editable.
+* Make sure that releasing mouse button outside of an editable stops the resize.