Merge branch 't/13197' into major

ckeditor · May 5, 2015 · ce8ccc2 · ce8ccc2
2 parents 1b6e54b + e16b0f8
commit ce8ccc2
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 10 deletions.
diff --git a/CHANGES.md b/CHANGES.md
@@ -7,6 +7,7 @@ Fixed Issues:
 
 * [#13118](http://dev.ckeditor.com/ticket/13118): Fixed: The [`editor.getSelectedHtml()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-getSelectedHtml) method throws error when called in the source mode.
 * [#13158](http://dev.ckeditor.com/ticket/13158): Fixed: Error after canceling dialog when creating a widget.
+* [#13197](http://dev.ckeditor.com/ticket/13197): Fixed: Linked inline image2's alignment class is not transferred to widget wrapper.
 * Toolbar configurators:
   * [#13185](http://dev.ckeditor.com/ticket/13185): Fixed: Wrong position of the suggestion box if there is not enough space below the caret.
   * [#13138](http://dev.ckeditor.com/ticket/13138): Fixed: The "Toggle empty elements" button label is unclear.

diff --git a/plugins/image2/plugin.js b/plugins/image2/plugin.js
@@ -385,23 +385,26 @@
 				// Note: Center alignment is detected during upcast, so only left/right cases
 				// are checked below.
 				if ( !data.align ) {
+					var alignElement = data.hasCaption ? this.element : image;
+
 					// Read the initial left/right alignment from the class set on element.
 					if ( alignClasses ) {
-						if ( this.element.hasClass( alignClasses[ 0 ] ) )
+						if ( alignElement.hasClass( alignClasses[ 0 ] ) ) {
 							data.align = 'left';
-						else if ( this.element.hasClass( alignClasses[ 2 ] ) )
+						} else if ( alignElement.hasClass( alignClasses[ 2 ] ) ) {
 							data.align = 'right';
+						}
 
-						if ( data.align )
-							this.element.removeClass( alignClasses[ alignmentsObj[ data.align ] ] );
-						else
+						if ( data.align ) {
+							alignElement.removeClass( alignClasses[ alignmentsObj[ data.align ] ] );
+						} else {
 							data.align = 'none';
+						}
 					}
 					// Read initial float style from figure/image and then remove it.
 					else {
-						data.align = this.element.getStyle( 'float' ) || image.getStyle( 'float' ) || 'none';
-						this.element.removeStyle( 'float' );
-						image.removeStyle( 'float' );
+						data.align = alignElement.getStyle( 'float' ) || 'none';
+						alignElement.removeStyle( 'float' );
 					}
 				}
 
@@ -412,8 +415,9 @@
 					// Get rid of cke_widget_* classes in data. Otherwise
 					// they might appear in link dialog.
 					var advanced = data.link.advanced;
-					if ( advanced && advanced.advCSSClasses )
+					if ( advanced && advanced.advCSSClasses ) {
 						advanced.advCSSClasses = CKEDITOR.tools.trim( advanced.advCSSClasses.replace( /cke_\S+/, '' ) );
+					}
 				}
 
 				// Get rid of extra vertical space when there's no caption.

diff --git a/tests/plugins/image2/_assets/contents.css b/tests/plugins/image2/_assets/contents.css
@@ -0,0 +1,3 @@
+.cke_widget_wrapper.align-right {
+	float: right;
+}
diff --git a/tests/plugins/image2/link.js b/tests/plugins/image2/link.js
@@ -20,6 +20,20 @@
 		}
 	};
 
+	bender.editors = {
+		editor1: {
+			name: 'test_editor1',
+			config: {
+				image2_alignClasses: [ 'align-left', 'align-center', 'align-right' ],
+				image2_disableResizer: true,
+
+				stylesSet: [
+					{ name: 'Image 30%', type: 'widget', widget: 'image', attributes: { 'class': 'image30' } }
+				]
+			}
+		}
+	};
+
 	function getParentsList( el ) {
 		var parents = el.getParents(),
 			arr = [];
@@ -751,6 +765,24 @@
 					} );
 				} );
 			} );
+		},
+
+		// #13197
+		'test align classes transfered from nested image to widget wrapper': function() {
+			var bot = this.editorBots.editor1,
+				html = '<p>' +
+					'<a id="x" href="#foo">' +
+						'<img src="_assets/foo.png" alt="bag" class="image30 align-right" />' +
+					'</a>' +
+				'</p>';
+
+			bot.setData( html, function() {
+				var widget = getById( bot.editor, 'x' );
+
+				assert.isTrue( widget.wrapper.hasClass( 'align-right' ) );
+				assert.areSame( 'right', widget.data.align );
+				assert.isFalse( widget.parts.image.hasClass( 'align-right' ) );
+			} );
 		}
 	} );
-} )();
+} )();
diff --git a/tests/plugins/image2/manual/alignsetfromnestedimage.html b/tests/plugins/image2/manual/alignsetfromnestedimage.html
@@ -0,0 +1,19 @@
+<textarea id="editor1">
+&lt;p&gt;&lt;a id="x" href="#foo"&gt;&lt;img src="%BASE_PATH%_assets/logo.png" alt="bag" class="image30 align-right" /&gt;&lt;/a&gt;&lt;/p&gt;
+</textarea>
+<script>
+	CKEDITOR.replace( 'editor1', {
+		contentsCss: '%TEST_DIR%/../../_assets/contents.css',
+		image2_alignClasses: [ 'align-left', 'align-center', 'align-right' ],
+		image2_disableResizer: true,
+
+		stylesSet: [ {
+				name: 'Image 30%',
+				type: 'widget',
+				widget: 'image',
+				attributes: {
+					'class': 'image30'
+				}
+		} ]
+	} );
+</script>
diff --git a/tests/plugins/image2/manual/alignsetfromnestedimage.md b/tests/plugins/image2/manual/alignsetfromnestedimage.md
@@ -0,0 +1,5 @@
+@bender-tags: 4.5.0, tc, widget, image2
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, image2, link
+
+Image should be located on the right side of the editor.