Adding inline styles and attributes to widget with applyStyle

CHANGES.md

@@ -6,6 +6,7 @@
 New Features:
 
 * [#1761](https://github.com/ckeditor/ckeditor-dev/issues/1761): [Autolink](https://ckeditor.com/cke4/addon/autolink) plugin supports email links.
+* [#1674](https://github.com/ckeditor/ckeditor-dev/issues/1674): The [Widget](https://ckeditor.com/cke4/addon/widget) plugin now fully supports [`CKEDITOR.style`](https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_style.html) `attributes` and `styles` via `applyStyle` or `removeStyle` and `checkStyleActive` methods.
 
 Fixed Issues:
 

plugins/image2/plugin.js

@@ -385,8 +385,11 @@
 				// 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;
-
+					var alignElement = data.hasCaption ? this.element : image,
+						align;
+					if ( this.styleDefinition && this.styleDefinition.styles ) {
+						align = this.styleDefinition.styles[ 'float' ];
+					}
 					// Read the initial left/right alignment from the class set on element.
 					if ( alignClasses ) {
 						if ( alignElement.hasClass( alignClasses[ 0 ] ) ) {
@@ -400,6 +403,8 @@
 						} else {
 							data.align = 'none';
 						}
+					} else if ( align ) {
+						data.align = align;
 					}
 					// Read initial float style from figure/image and then remove it.
 					else {
@@ -897,7 +902,8 @@
 		return function( el, data ) {
 			var dimensions = { width: 1, height: 1 },
 				name = el.name,
-				image;
+				image,
+				styleDefinition;
 
 			// https://dev.ckeditor.com/ticket/11110 Don't initialize on pasted fake objects.
 			if ( el.attributes[ 'data-cke-realelement' ] )
@@ -932,6 +938,14 @@
 
 				// Image can be wrapped in link <a><img/></a>.
 				image = el.getFirst( 'img' ) || el.getFirst( 'a' ).getFirst( 'img' );
+
+				// Add this style to lockedStyle so it is preserved on this element.
+				styleDefinition = el.attributes[ 'data-cke-style-definition' ] || {};
+				styleDefinition.lockedStyle = styleDefinition.lockedStyle || {};
+				styleDefinition.lockedStyle.display = 'inline-block';
+				styleDefinition.lockedStyle[ 'text-align' ] = 'center';
+
+				el.attributes[ 'data-cke-style-definition' ] = JSON.stringify( styleDefinition );
 			}
 
 			// No center wrapper has been found.
@@ -972,7 +986,8 @@
 			// inline styles or classes (image2_alignClasses).
 			var attrsHolder = el.name == 'a' ? el.getFirst() : el,
 				attrs = attrsHolder.attributes,
-				align = this.data.align;
+				align = this.data.align,
+				elementStyle = CKEDITOR.tools.parseCssText( el.attributes.style );
 
 			// De-wrap the image from resize handle wrapper.
 			// Only block widgets have one.
@@ -999,21 +1014,33 @@
 				// 	</div>
 				//
 				if ( align == 'center' && el.name == 'figure' ) {
+					if ( !alignClasses ) {
+						delete elementStyle[ 'text-align' ];
+						elementStyle.display = 'inline-block';
+						el.attributes.style = CKEDITOR.tools.writeCssText( elementStyle ) || undefined;
+					}
 					el = el.wrapWith( new CKEDITOR.htmlParser.element( 'div',
 						alignClasses ? { 'class': alignClasses[ 1 ] } : { style: 'text-align:center' } ) );
 				}
 
 				// If left/right, add float style to the downcasted element.
 				else if ( align in { left: 1, right: 1 } ) {
-					if ( alignClasses )
+					if ( alignClasses ) {
 						attrsHolder.addClass( alignClasses[ alignmentsObj[ align ] ] );
-					else
+					}
+					else {
 						styles[ 'float' ] = align;
-				}
+						// Don't duplicate float on linked image.
+						if ( attrsHolder !== el ) {
+							delete elementStyle[ 'float' ];
+							el.attributes.style = CKEDITOR.tools.writeCssText( elementStyle ) || undefined;
+						}
+					}
 
-				// Update element styles.
-				if ( !alignClasses && !CKEDITOR.tools.isEmpty( styles ) )
-					attrs.style = CKEDITOR.tools.writeCssText( styles );
+					// Update element styles.
+					if ( !alignClasses && !CKEDITOR.tools.isEmpty( styles ) )
+						attrs.style = CKEDITOR.tools.writeCssText( styles );
+				}
 			}
 
 			return el;
@@ -1340,9 +1367,18 @@
 			}
 		} );
 
-		// Change the position of the widget resizer when data changes.
-		widget.on( 'data', function() {
-			resizer[ widget.data.align == 'right' ? 'addClass' : 'removeClass' ]( 'cke_image_resizer_left' );
+		widget.on( 'data', function( evt ) {
+			var alignElement = evt.data.hasCaption ? this.element : this.parts.image,
+				align = evt.data.align;
+			// Change the position of the widget resizer when data changes.
+			resizer[ align == 'right' ? 'addClass' : 'removeClass' ]( 'cke_image_resizer_left' );
+
+			if ( ( align == 'right' || align == 'left' ) && alignElement.getStyle( 'float' ) === align ) {
+				this.styleDefinition.styles = this.styleDefinition.styles || {};
+				this.styleDefinition.styles[ 'float' ] = align;
+			} else if ( align && this.styleDefinition.styles && this.styleDefinition.styles[ 'float' ] ) {
+				delete this.styleDefinition.styles[ 'float' ];
+			}
 		} );
 	}
 

plugins/mathjax/plugin.js

@@ -11,7 +11,9 @@
 
 ( function() {
 	CKEDITOR.plugins.add( 'mathjax', {
+		/* jscs:disable maximumLineLength*/
 		lang: 'af,ar,az,bg,ca,cs,cy,da,de,de-ch,el,en,en-au,en-gb,eo,es,es-mx,eu,fa,fi,fr,gl,he,hr,hu,id,it,ja,km,ko,ku,lt,nb,nl,no,oc,pl,pt,pt-br,ro,ru,sk,sl,sq,sv,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
+		/* jscs:enable maximumLineLength*/
 		requires: 'widget,dialog',
 		icons: 'mathjax',
 		hidpi: true, // %REMOVE_LINE_CORE%
@@ -95,12 +97,20 @@
 					data.math = CKEDITOR.tools.htmlDecode( el.children[ 0 ].value );
 
 					// Add style display:inline-block to have proper height of widget wrapper and mask.
-					var attrs = el.attributes;
+					var attrs = el.attributes,
+						styleDefinition;
 
-					if ( attrs.style )
+					if ( attrs.style ) {
 						attrs.style += ';display:inline-block';
-					else
+					} else {
 						attrs.style = 'display:inline-block';
+					}
+
+					// Add this style to locked style so it is preserved on that element.
+					styleDefinition = attrs[ 'data-cke-styleDefinition' ] || {};
+					styleDefinition.lockedStyle = styleDefinition.lockedStyle || {};
+					styleDefinition.lockedStyle.display = 'inline-block';
+					el.attributes[ 'data-cke-style-definition' ] = JSON.stringify( styleDefinition );
 
 					// Add attribute to prevent deleting empty span in data processing.
 					attrs[ 'data-cke-survive' ] = 1;
@@ -115,10 +125,12 @@
 
 					// Remove style display:inline-block.
 					var attrs = el.attributes;
-					attrs.style = attrs.style.replace( /display:\s?inline-block;?\s?/, '' );
-					if ( attrs.style === '' )
+					if ( attrs.style ) {
+						attrs.style = attrs.style.replace( /display:\s?inline-block;?\s?/, '' );
+					}
+					if ( attrs.style === '' ) {
 						delete attrs.style;
-
+					}
 					return el;
 				}
 			} );