Merge "Fix class attribute preservation for images"

modules/ve/dm/nodes/ve.dm.MWBlockImageNode.js

@@ -50,6 +50,7 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
 		$caption = $figure.children( 'figcaption' ).eq( 0 ),
 		typeofAttr = $figure.attr( 'typeof' ),
 		classes = $figure.attr( 'class' ),
+		recognizedClasses = [],
 		attributes = {
 			href: $a.attr( 'href' ),
 			src: $img.attr( 'src' ),
@@ -60,8 +61,7 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
 		};
 
 	// Extract individual classes
-	classes = typeof classes === 'string' ?
+	classes = typeof classes === 'string' ? classes.trim().split( /\s+/ ) : [];
-		classes.replace( /\s{2,}/g, ' ' ).split( ' ' ) : [];
 
 	// Type
 	switch ( typeofAttr ) {
@@ -82,12 +82,16 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
 	// Horizontal alignment
 	if ( classes.indexOf( 'mw-halign-left' ) !== -1 ) {
 		attributes.align = 'left';
+		recognizedClasses.push( 'mw-halign-left' );
 	} else if ( classes.indexOf( 'mw-halign-right' ) !== -1 ) {
 		attributes.align = 'right';
+		recognizedClasses.push( 'mw-halign-right' );
 	} else if ( classes.indexOf( 'mw-halign-center' ) !== -1 ) {
 		attributes.align = 'center';
+		recognizedClasses.push( 'mw-halign-center' );
 	} else if ( classes.indexOf( 'mw-halign-none' ) !== -1 ) {
 		attributes.align = 'none';
+		recognizedClasses.push( 'mw-halign-none' );
 	} else {
 		attributes.align = 'default';
 	}
@@ -95,8 +99,12 @@ ve.dm.MWBlockImageNode.static.toDataElement = function ( domElements, converter
 	// Default-size
 	if ( classes.indexOf( 'mw-default-size' ) !== -1 ) {
 		attributes.defaultSize = true;
+		recognizedClasses.push( 'mw-default-size' );
 	}
 
+	// Store unrecognized classes so we can restore them on the way out
+	attributes.unrecognizedClasses = ve.simpleArrayDifference( classes, recognizedClasses );
+
 	if ( $caption.length === 0 ) {
 		return [
 			{ 'type': 'mwBlockImage', 'attributes': attributes },
@@ -161,7 +169,14 @@ ve.dm.MWBlockImageNode.static.toDomElements = function ( data, doc, converter )
 			break;
 	}
 
-	if ( originalClasses && ve.compare( originalClasses.split( ' ' ).sort(), classes.sort() ) ) {
+	if ( dataElement.attributes.unrecognizedClasses ) {
+		classes = ve.simpleArrayUnion( classes, dataElement.attributes.unrecognizedClasses );
+	}
+
+	if (
+		originalClasses &&
+		ve.compare( originalClasses.trim().split( /\s+/ ).sort(), classes.sort() )
+	) {
 		figure.className = originalClasses;
 	} else if ( classes.length > 0 ) {
 		figure.className = classes.join( ' ' );

modules/ve/dm/nodes/ve.dm.MWInlineImageNode.js

@@ -45,9 +45,11 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
 		$img = $firstChild.children().first(),
 		typeofAttr = $span.attr( 'typeof' ),
 		classes = $span.attr( 'class' ),
+		recognizedClasses = [],
 		attributes = {
 			src: $img.attr( 'src' ),
-			resource: $img.attr( 'resource' )
+			resource: $img.attr( 'resource' ),
+			originalClasses: classes
 		},
 		width = $img.attr( 'width' ),
 		height = $img.attr( 'height' );
@@ -61,8 +63,7 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
 	}
 
 	// Extract individual classes
-	classes = typeof classes === 'string' ?
+	classes = typeof classes === 'string' ? classes.trim().split( /\s+/ ) : [];
-		classes.replace( /\s{2,}/g, ' ' ).split( ' ' ) : [];
 
 	// Type
 	switch ( typeofAttr ) {
@@ -77,20 +78,28 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
 	// Vertical alignment
 	if ( classes.indexOf( 'mw-valign-middle' ) !== -1 ) {
 		attributes.valign = 'middle';
+		recognizedClasses.push( 'mw-valign-middle' );
 	} else if ( classes.indexOf( 'mw-valign-baseline' ) !== -1 ) {
 		attributes.valign = 'baseline';
+		recognizedClasses.push( 'mw-valign-baseline' );
 	} else if ( classes.indexOf( 'mw-valign-sub' ) !== -1 ) {
 		attributes.valign = 'sub';
+		recognizedClasses.push( 'mw-valign-sub' );
 	} else if ( classes.indexOf( 'mw-valign-super' ) !== -1 ) {
 		attributes.valign = 'super';
+		recognizedClasses.push( 'mw-valign-super' );
 	} else if ( classes.indexOf( 'mw-valign-top' ) !== -1 ) {
 		attributes.valign = 'top';
+		recognizedClasses.push( 'mw-valign-top' );
 	} else if ( classes.indexOf( 'mw-valign-text-top' ) !== -1 ) {
 		attributes.valign = 'text-top';
+		recognizedClasses.push( 'mw-valign-text-top' );
 	} else if ( classes.indexOf( 'mw-valign-bottom' ) !== -1 ) {
 		attributes.valign = 'bottom';
+		recognizedClasses.push( 'mw-valign-bottom' );
 	} else if ( classes.indexOf( 'mw-valign-text-bottom' ) !== -1 ) {
 		attributes.valign = 'text-bottom';
+		recognizedClasses.push( 'mw-valign-text-bottom' );
 	} else {
 		attributes.valign = 'default';
 	}
@@ -98,19 +107,27 @@ ve.dm.MWInlineImageNode.static.toDataElement = function ( domElements ) {
 	// Border
 	if ( classes.indexOf( 'mw-image-border' ) !== -1 ) {
 		attributes.border = true;
+		recognizedClasses.push( 'mw-image-border' );
 	}
 
 	// Default-size
 	if ( classes.indexOf( 'mw-default-size' ) !== -1 ) {
 		attributes.defaultSize = true;
+		recognizedClasses.push( 'mw-default-size' );
 	}
+
+	// Store unrecognized classes so we can restore them on the way out
+	attributes.unrecognizedClasses = ve.simpleArrayDifference( classes, recognizedClasses );
+
 	return { 'type': 'mwInlineImage', 'attributes': attributes };
 };
 
 ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
-	var span = doc.createElement( 'span' ),
+	var firstChild,
+		span = doc.createElement( 'span' ),
 		img = doc.createElement( 'img' ),
-		firstChild;
+		classes = [],
+		originalClasses = data.attributes.originalClasses;
 
 	ve.setDomAttributes( img, data.attributes, [ 'src', 'width', 'height', 'resource' ] );
 
@@ -124,15 +141,28 @@ ve.dm.MWInlineImageNode.static.toDomElements = function ( data, doc ) {
 	}
 
 	if ( data.attributes.defaultSize ) {
-		span.className += ' mw-default-size';
+		classes.push( 'mw-default-size' );
 	}
 
 	if ( data.attributes.border ) {
-		span.className += ' mw-image-border';
+		classes.push( 'mw-image-border' );
 	}
 
 	if ( data.attributes.valign && data.attributes.valign !== 'default' ) {
-		span.className += ' mw-image-' + data.attributes.valign;
+		classes.push( 'mw-valign-' + data.attributes.valign );
+	}
+
+	if ( data.attributes.unrecognizedClasses ) {
+		classes = ve.simpleArrayUnion( classes, data.attributes.unrecognizedClasses );
+	}
+
+	if (
+		originalClasses &&
+		ve.compare( originalClasses.trim().split( /\s+/ ).sort(), classes.sort() )
+	) {
+		span.className = originalClasses;
+	} else if ( classes.length > 0 ) {
+		span.className = classes.join( ' ' );
 	}
 
 	if ( data.attributes.isLinked ) {

modules/ve/test/dm/ve.dm.mwExample.js

@@ -12,7 +12,7 @@
  */
 ve.dm.mwExample = {};
 
-ve.dm.mwExample.MWInlineImageHtml = '<span typeof="mw:Image" data-parsoid="{&quot;tsr&quot;:[0,24],&quot;optList&quot;:[{&quot;ck&quot;:&quot;width&quot;,&quot;ak&quot;:&quot;500px&quot;}],&quot;cacheKey&quot;:&quot;[[Image:Wiki.png|500px]]&quot;,&quot;img&quot;:{&quot;h&quot;:155,&quot;w&quot;:135,&quot;wdset&quot;:true},&quot;dsr&quot;:[0,24,null,null]}"><a href="./File:Wiki.png" data-parsoid="{&quot;a&quot;:{&quot;href&quot;:&quot;./File:Wiki.png&quot;}}"><img resource="./File:Wiki.png" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" height="155" width="135" data-parsoid="{&quot;a&quot;:{&quot;resource&quot;:&quot;./File:Wiki.png&quot;,&quot;width&quot;:&quot;135&quot;},&quot;sa&quot;:{&quot;resource&quot;:&quot;Image:Wiki.png&quot;,&quot;width&quot;:&quot;500&quot;}}"></a></span>';
+ve.dm.mwExample.MWInlineImageHtml = '<span typeof="mw:Image" class="foo mw-valign-text-top" data-parsoid="{&quot;tsr&quot;:[0,24],&quot;optList&quot;:[{&quot;ck&quot;:&quot;width&quot;,&quot;ak&quot;:&quot;500px&quot;}],&quot;cacheKey&quot;:&quot;[[Image:Wiki.png|500px]]&quot;,&quot;img&quot;:{&quot;h&quot;:155,&quot;w&quot;:135,&quot;wdset&quot;:true},&quot;dsr&quot;:[0,24,null,null]}"><a href="./File:Wiki.png" data-parsoid="{&quot;a&quot;:{&quot;href&quot;:&quot;./File:Wiki.png&quot;}}"><img resource="./File:Wiki.png" src="http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png" height="155" width="135" data-parsoid="{&quot;a&quot;:{&quot;resource&quot;:&quot;./File:Wiki.png&quot;,&quot;width&quot;:&quot;135&quot;},&quot;sa&quot;:{&quot;resource&quot;:&quot;Image:Wiki.png&quot;,&quot;width&quot;:&quot;500&quot;}}"></a></span>';
 ve.dm.mwExample.MWTransclusion = {
 	'blockSpan':         '<span about="#mwt1" typeof="mw:Transclusion" data-mw="{&quot;target&quot;:{&quot;wt&quot;:&quot;Test&quot;},&quot;params&quot;:{&quot;1&quot;:{&quot;wt&quot;:&quot;Hello, world!&quot;}},&quot;id&quot;:&quot;mwt1&quot;}" data-parsoid="{&quot;tsr&quot;:[18,40],&quot;src&quot;:&quot;{{Test|Hello, world!}}&quot;,&quot;dsr&quot;:[18,40,null,null]}"></span>',
 	'blockSpanModified': '<span about="#mwt1" typeof="mw:Transclusion" data-mw="{&quot;id&quot;:&quot;mwt1&quot;,&quot;target&quot;:{&quot;wt&quot;:&quot;Test&quot;},&quot;params&quot;:{&quot;1&quot;:{&quot;wt&quot;:&quot;Hello, globe!&quot;}}}" data-parsoid="{&quot;tsr&quot;:[18,40],&quot;src&quot;:&quot;{{Test|Hello, world!}}&quot;,&quot;dsr&quot;:[18,40,null,null]}"></span>',
@@ -131,9 +131,11 @@ ve.dm.mwExample.domToDataCases = {
 					'width': 135,
 					'height': 155,
 					'isLinked': true,
-					'valign': 'default',
+					'valign': 'text-top',
 					'resource': './File:Wiki.png',
-					'type': 'inline'
+					'type': 'inline',
+					'originalClasses': 'foo mw-valign-text-top',
+					'unrecognizedClasses': ['foo']
 				},
 				'htmlAttributes': [
 					{
@@ -946,7 +948,7 @@ ve.dm.mwExample.domToDataCases = {
 		]
 	},
 	'thumb image': {
-		'html': '<body><figure typeof="mw:Image/Thumb" class="mw-halign-right"><a href="Foo"><img src="Bar" width="1" height="2" resource="FooBar"></a><figcaption>abc</figcaption></figure></body>',
+		'html': '<body><figure typeof="mw:Image/Thumb" class="mw-halign-right foobar"><a href="Foo"><img src="Bar" width="1" height="2" resource="FooBar"></a><figcaption>abc</figcaption></figure></body>',
 		'data': [
 			{
 				'type': 'mwBlockImage',
@@ -958,7 +960,8 @@ ve.dm.mwExample.domToDataCases = {
 					'width': '1',
 					'height': '2',
 					'resource': 'FooBar',
-					'originalClasses': 'mw-halign-right'
+					'originalClasses': 'mw-halign-right foobar',
+					'unrecognizedClasses': ['foobar']
 				}
 			},
 			{ 'type': 'mwImageCaption' },
@@ -984,7 +987,8 @@ ve.dm.mwExample.domToDataCases = {
 					'width': '1',
 					'height': '2',
 					'resource': 'FooBar',
-					'originalClasses': undefined
+					'originalClasses': undefined,
+					'unrecognizedClasses': []
 				},
 				'htmlAttributes': [ {
 					'values': { 'data-parsoid': '{}' },