Explorar el Código

Internal: Resized image class is now marked with ck_resized class.

This is used to avoid max-width limit for side images.
Marek Lewandowski hace 6 años
padre
commit
378dcb26ed

+ 27 - 2
packages/ckeditor5-image/src/image/imageresize.js

@@ -14,6 +14,8 @@ const WIDTH_ATTRIBUTE_NAME = 'width';
 
 const WIDTH_STYLE_NAME = WIDTH_ATTRIBUTE_NAME;
 
+const RESIZE_CLASS_NAME = 'ck_resized';
+
 /**
  *	Image resize plugin.
  *
@@ -43,7 +45,7 @@ export default class ImageResize extends Plugin {
 		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
 			const widget = conversionApi.mapper.toViewElement( data.item );
 
-			editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
+			const context = editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
 				getResizeHost( wrapper ) {
 					return wrapper.querySelector( 'img' );
 				},
@@ -56,6 +58,26 @@ export default class ImageResize extends Plugin {
 					return !imageStyle || imageStyle == 'full';
 				}
 			} );
+
+			context.on( 'begin', function( evt ) {
+				evt.source._temporaryResizeClassAdded = !evt.source.domResizeWrapper.parentElement.classList.contains( RESIZE_CLASS_NAME );
+
+				this._temporaryResizeClassAdded = !this.domResizeWrapper.parentElement.classList.contains( RESIZE_CLASS_NAME );
+			}, {
+				priority: 'high'
+			} );
+
+			context.on( 'updateSize', function() {
+				if ( this._temporaryResizeClassAdded ) {
+					this.domResizeWrapper.parentElement.classList.add( RESIZE_CLASS_NAME );
+				}
+			} );
+
+			context.on( 'cancel', () => {
+				if ( this._temporaryResizeClassAdded ) {
+					this.domResizeWrapper.parentElement.classList.remove( RESIZE_CLASS_NAME );
+				}
+			} );
 		}, {
 			priority: 'low'
 		} );
@@ -89,12 +111,15 @@ export default class ImageResize extends Plugin {
 				}
 
 				const viewWriter = conversionApi.writer;
-				const img = conversionApi.mapper.toViewElement( data.item ).getChild( 0 );
+				const figure = conversionApi.mapper.toViewElement( data.item );
+				const img = figure.getChild( 0 );
 
 				if ( data.attributeNewValue !== null ) {
 					viewWriter.setStyle( WIDTH_ATTRIBUTE_NAME, data.attributeNewValue + 'px', img );
+					viewWriter.addClass( RESIZE_CLASS_NAME, figure );
 				} else {
 					viewWriter.removeStyle( WIDTH_ATTRIBUTE_NAME, img );
+					viewWriter.removeClass( RESIZE_CLASS_NAME, figure );
 				}
 			} )
 		);

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

@@ -222,7 +222,7 @@ describe( 'Image resizer', () => {
 			} ).call( this );
 
 			expect( editor.getData() ).to.be.equal(
-				`<p>foo</p><figure class="image"><img style="width:120px;" src="${ imageFixture }"></figure>` );
+				`<p>foo</p><figure class="image ck_resized"><img style="width:120px;" src="${ imageFixture }"></figure>` );
 		} );
 	} );
 

+ 3 - 9
packages/ckeditor5-image/tests/manual/resize.html

@@ -1,13 +1,5 @@
 <style>
-	.ck-content .image-style-side,
-	.ck-content .image-style-align-left,
-	.ck-content .image-style-align-center,
-	.ck-content .image-style-align-right {
-		max-width: 100%;
-	}
-
-	.fancyEditorWrapper figure
-	{
+	.fancyEditorWrapper figure {
 		padding: 20px;
 	}
 
@@ -17,6 +9,7 @@
 	<figure class="image image-style-side">
 		<img src="sample.jpg" alt="" style="width: 240px" />
 	</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>
@@ -38,6 +31,7 @@
 		<figure class="image image-style-side">
 			<img src="sample.jpg" alt="" style="width: 240px" />
 		</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

+ 3 - 1
packages/ckeditor5-image/theme/imagestyle.css

@@ -12,7 +12,9 @@
 	& .image-style-align-left,
 	& .image-style-align-center,
 	& .image-style-align-right {
-		max-width: 50%;
+		&:not(.ck_resized) {
+			max-width: 50%;
+		}
 	}
 
 	& .image-style-side {