Merge branch 't/13199' into major

Author: Reinmar

plugins/embed/plugin.js

@@ -26,6 +26,23 @@
 					'//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}'
 				),
 
+				// The filter element callback actually allows all divs with data-oembed-url,
+				// so registering styles to the filter is virtually unnecessary because
+				// classes won't be filtered out. However, registering them will make filter.check() work
+				// which may be important in some cases.
+				styleToAllowedContentRules: function( style ) {
+					// Retrieve classes defined in the style.
+					var classes = style.getClassesArray();
+
+					return {
+						div: {
+							propertiesOnly: true,
+							classes: classes,
+							attributes: '!data-oembed-url'
+						}
+					};
+				},
+
 				upcast: function( el, data ) {
 					if ( el.name == 'div' && el.attributes[ 'data-oembed-url' ] ) {
 						data.url = el.attributes[ 'data-oembed-url' ];

plugins/embedsemantic/plugin.js

@@ -25,6 +25,7 @@
 				button: editor.lang.embedbase.button,
 				allowedContent: 'oembed',
 				requiredContent: 'oembed',
+				styleableElements: 'oembed',
 				// Share config with the embed plugin.
 				providerUrl: new CKEDITOR.template(
 					editor.config.embed_provider ||

tests/plugins/embed/integration.js

@@ -1,5 +1,5 @@
 /* bender-tags: widget */
-/* bender-ckeditor-plugins: embed,toolbar */
+/* bender-ckeditor-plugins: embed,toolbar,stylescombo */
 /* bender-include: ../widget/_helpers/tools.js, ../embedbase/_helpers/tools.js */
 /* global embedTools, widgetTestsTools */
 
@@ -10,7 +10,11 @@ bender.editors = {
 		name: 'editor_classic',
 		creator: 'replace',
 		config: {
-			extraAllowedContent: 'div(a,b,c)'
+			extraAllowedContent: 'div(a,b,c)',
+			stylesSet: [
+				{ name: 'Foo media', type: 'widget', widget: 'embed', attributes: { 'class': 'foo' } },
+				{ name: 'Bar media', type: 'widget', widget: 'embed', attributes: { 'class': 'bar' } }
+			]
 		}
 	}
 };
@@ -21,7 +25,7 @@ var classes2Array = widgetTestsTools.classes2Array;
 embedTools.mockJsonp();
 
 var tcs = {
-	'test support for widget classes': function() {
+	'test support for widget classes - from extraAC': function() {
 		var bot = this.editorBots.classic,
 			editor = bot.editor,
 			data = '<div class="a b c" data-oembed-url="http://foo.jpg">' +
@@ -36,6 +40,25 @@ var tcs = {
 				assert.areSame( data, bot.getData( 1, 1 ), 'classes transfered from widget.element back to data' );
 			}, 100 );
 		} );
+	},
+
+	'test support for widget classes - from stylesSet': function() {
+		var bot = this.editorBots.classic,
+			editor = bot.editor,
+			data = '<div class="bar foo" data-oembed-url="http://foo.jpg">' +
+					'<img alt="image" src="//foo.jpg" style="max-width:100%;" />' +
+				'</div>';
+
+		assert.isTrue( editor.filter.check( 'div[data-oembed-url](foo)' ), 'class from a stylesSet is registered' );
+		assert.isTrue( editor.filter.check( 'div[data-oembed-url](foo)', false, true ), 'class from a stylesSet is registered - strict check' );
+		assert.isFalse( editor.filter.check( 'div(foo)', false, true ), 'registered rules are precise - data-oembed-url must exist' );
+
+		bot.setData( data, function() {
+			arrayAssert.itemsAreSame( [ 'bar', 'foo' ],
+				classes2Array( obj2Array( editor.widgets.instances )[ 0 ].getClasses() ).sort(), 'classes transfered from data to widget.element' );
+
+			assert.areSame( data, bot.getData( 1, 1 ), 'classes transfered from widget.element back to data' );
+		} );
 	}
 };
 

tests/plugins/embedsemantic/integration.js

@@ -1,5 +1,5 @@
 /* bender-tags: widget */
-/* bender-ckeditor-plugins: embedsemantic,toolbar,undo,basicstyles */
+/* bender-ckeditor-plugins: embedsemantic,toolbar,undo,basicstyles,stylescombo */
 /* bender-include: ../widget/_helpers/tools.js, ../embedbase/_helpers/tools.js */
 /* global embedTools, widgetTestsTools */
 
@@ -10,7 +10,11 @@ bender.editors = {
 		name: 'editor_classic',
 		creator: 'replace',
 		config: {
-			extraAllowedContent: 'oembed(a,b,c)'
+			extraAllowedContent: 'oembed(a,b,c)',
+			stylesSet: [
+				{ name: 'Foo media', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'foo' } },
+				{ name: 'Bar media', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'bar' } }
+			]
 		}
 	}
 };
@@ -87,7 +91,7 @@ var tcs = {
 		} );
 	},
 
-	'test support for widget classes': function() {
+	'test support for widget classes - from extraAC': function() {
 		var bot = this.editorBots.classic,
 			editor = bot.editor;
 
@@ -99,6 +103,22 @@ var tcs = {
 				assert.areSame( '<p>x</p><oembed class="a b c">http://widget/classes</oembed><p>x</p>', bot.getData(), 'classes transfered from widget.element back to data' );
 			}, 100 );
 		} );
+	},
+
+	'test support for widget classes - from stylesSet': function() {
+		var bot = this.editorBots.classic,
+			editor = bot.editor;
+
+		assert.isTrue( editor.filter.check( 'oembed(foo)' ), 'class from a stylesSet is registered' );
+
+		bot.setData( '<p>x</p><oembed class="bar foo">http://widget/classes</oembed><p>x</p>', function() {
+			wait( function() {
+				arrayAssert.itemsAreSame( [ 'bar', 'foo' ],
+					classes2Array( obj2Array( editor.widgets.instances )[ 0 ].getClasses() ).sort(), 'classes transfered from data to widget.element' );
+
+				assert.areSame( '<p>x</p><oembed class="bar foo">http://widget/classes</oembed><p>x</p>', bot.getData(), 'classes transfered from widget.element back to data' );
+			}, 100 );
+		} );
 	}
 };