Merge branch 't/9991-fixed' into major

bender.js

@@ -39,7 +39,8 @@ var config = {
 		'benderjs-yui',
 		'benderjs-sinon',
 		'benderjs-jquery',
-		'tests/_benderjs/ckeditor'
+		'tests/_benderjs/ckeditor',
+		'benderjs-yui-beautified'
 	],
 
 	tests: {
@@ -100,6 +101,19 @@ var config = {
 				'!**/_*/**'
 			]
 		}
+	},
+
+	'yui-beautified': {
+		indent_with_tabs: true,
+		wrap_line_length: 0,
+		// All tags should be reformatted.
+		unformatted: 'none',
+		indent_inner_html: true,
+		preserve_newlines: true,
+		max_preserve_newlines: 0,
+		indent_handlebars: false,
+		end_with_newline: true,
+		extra_liners: 'head, body, div, p, /html'
 	}
 };
 

core/filter.js

@@ -2123,6 +2123,107 @@
 			delete element.styles[ 'float' ]; // Uh... GCC doesn't like the 'float' prop name.
 		},
 
+		/**
+		 * Converts the shorthand form of the `border` style to seperate styles.
+		 *
+		 * @param {CKEDITOR.htmlParser.element} element
+		 */
+		splitBorderShorthand: function( element ) {
+			if ( !element.styles.border ) {
+				return;
+			}
+
+			var widths = element.styles.border.match( /([\.\d]+\w+)/g ) || [ '0px' ];
+			switch ( widths.length ) {
+				case 1:
+					element.styles[ 'border-width' ] = widths[0];
+					break;
+				case 2:
+					mapStyles( [ 0, 1, 0, 1 ] );
+					break;
+				case 3:
+					mapStyles( [ 0, 1, 2, 1 ] );
+					break;
+				case 4:
+					mapStyles( [ 0, 1, 2, 3 ] );
+					break;
+			}
+
+			element.styles[ 'border-style' ] = element.styles[ 'border-style' ] ||
+				( element.styles.border.match( /(none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit)/ ) || [] )[ 0 ];
+			if ( !element.styles[ 'border-style' ] )
+				delete element.styles[ 'border-style' ];
+
+			delete element.styles.border;
+
+			function mapStyles( map ) {
+				element.styles['border-top-width'] = widths[ map[0] ];
+				element.styles['border-right-width'] = widths[ map[1] ];
+				element.styles['border-bottom-width'] = widths[ map[2] ];
+				element.styles['border-left-width'] = widths[ map[3] ];
+			}
+		},
+
+		listTypeToStyle: function( element ) {
+			if ( element.attributes.type ) {
+				switch ( element.attributes.type ) {
+					case 'a':
+						element.styles[ 'list-style-type' ] = 'lower-alpha';
+						break;
+					case 'A':
+						element.styles[ 'list-style-type' ] = 'upper-alpha';
+						break;
+					case 'i':
+						element.styles[ 'list-style-type' ] = 'lower-roman';
+						break;
+					case 'I':
+						element.styles[ 'list-style-type' ] = 'upper-roman';
+						break;
+					case '1':
+						element.styles[ 'list-style-type' ] = 'decimal';
+						break;
+					default:
+						element.styles[ 'list-style-type' ] = element.attributes.type;
+				}
+			}
+		},
+
+		/**
+		 * Converts the shorthand form of the `margin` style to seperate styles.
+		 *
+		 * @param {CKEDITOR.htmlParser.element} element
+		 */
+		splitMarginShorthand: function( element ) {
+			if ( !element.styles.margin ) {
+				return;
+			}
+
+			var widths = element.styles.margin.match( /(\-?[\.\d]+\w+)/g ) || [ '0px' ];
+			switch ( widths.length ) {
+				case 1:
+					element.styles.margin = widths[0];
+					break;
+				case 2:
+					mapStyles( [ 0, 1, 0, 1 ] );
+					break;
+				case 3:
+					mapStyles( [ 0, 1, 2, 1 ] );
+					break;
+				case 4:
+					mapStyles( [ 0, 1, 2, 3 ] );
+					break;
+			}
+
+			delete element.styles.margin;
+
+			function mapStyles( map ) {
+				element.styles['margin-top'] = widths[ map[0] ];
+				element.styles['margin-right'] = widths[ map[1] ];
+				element.styles['margin-bottom'] = widths[ map[2] ];
+				element.styles['margin-left'] = widths[ map[3] ];
+			}
+		},
+
 		/**
 		 * Checks whether an element matches a given {@link CKEDITOR.style}.
 		 * The element can be a "superset" of a style, e.g. it may have

core/htmlparser/element.js

@@ -442,6 +442,38 @@ CKEDITOR.htmlParser.cssStyle = function() {
 			return clone;
 		},
 
+		/**
+		 * Search through the current node children to find nodes matching to the `criteria`.
+		 *
+		 * @param {String/Function} criteria Tag name or evaluator function.
+		 * @param {Boolean} [recursive=false]
+		 * @returns {CKEDITOR.htmlParser.node[]}
+		 */
+		find: function( criteria, recursive ) {
+			if ( recursive === undefined ) {
+				recursive = false;
+			}
+
+			var ret = [],
+				i;
+
+			for	( i = 0; i < this.children.length; i++ ) {
+				var curChild = this.children[ i ];
+
+				if ( typeof criteria == 'function' && criteria( curChild ) ) {
+					ret.push( curChild );
+				} else if ( typeof criteria == 'string' && curChild.name === criteria ) {
+					ret.push( curChild );
+				}
+
+				if ( recursive && curChild.find ) {
+					ret = ret.concat( curChild.find( criteria, recursive ) );
+				}
+			}
+
+			return ret;
+		},
+
 		/**
 		 * Adds a class name to the list of classes.
 		 *

dev/pastefromword/getclipboard.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Get Clipboard HTML</title>
+    <style>
+
+        textarea {
+            border: 1px solid #808080;
+            float: left;
+            height: 200px;
+            width: 100%;
+            overflow: auto;
+            margin-bottom: 20px;;
+        }
+
+    </style>
+	<script src="../../ckeditor.js"></script>
+</head>
+<body>
+    <p>Paste Inside the Editor:</p>
+    <div><textarea id="input"></textarea></div>
+
+	<div style="float: left; width: 49%">
+		<p>Raw Data Received:</p>
+		<textarea id="raw" readonly="readonly"></textarea>
+	</div>
+	<div style="float: right; width: 49%">
+		<p>After Paste Processing:</p>
+		<textarea id="output" readonly="readonly"></textarea>
+	</div>
+
+	<script>
+	var editor = CKEDITOR.replace( 'input', {
+		height: 100,
+		allowedContent: true,
+		plugins: 'pastefromword,wysiwygarea'
+	} );
+
+	editor.on( 'paste', function( evt ) {
+		var val = evt.data.dataValue;
+
+		if ( evt.data.dataTransfer && evt.data.dataTransfer.getData( 'text/html' ) ) {
+			val = evt.data.dataTransfer.getData( 'text/html' );
+		}
+
+		document.getElementById( 'raw' ).value = val;
+	}, null, null, -1 );
+
+	editor.on( 'paste', function( evt ) {
+		setTimeout( function() {
+			document.getElementById( 'output' ).value = editor.getData();
+		}, 0 );
+	}, null, null, 999 );
+	</script>
+</body>
+</html>

package.json

@@ -8,6 +8,7 @@
 		"benderjs-jquery": "^0.3.0",
 		"benderjs-sinon": "^0.3.1",
 		"benderjs-yui": "^0.3.2",
+    	"benderjs-yui-beautified": "0.0.5",
 		"grunt": "^0",
 		"grunt-contrib-imagemin": "^1.0.0",
 		"grunt-jscs": "^2.0.0",

plugins/colorbutton/plugin.js

@@ -24,6 +24,27 @@ CKEDITOR.plugins.add( 'colorbutton', {
 			addButton( 'BGColor', 'back', lang.bgColorTitle, 20 );
 		}
 
+		editor.filter.addFeature( {
+			allowedContent: 'span[style]{*}',
+			contentTransformations: [
+				[
+					{
+						element: 'font',
+						check: 'span{color}',
+						left: function( element ) {
+							return !!element.attributes.color;
+						},
+						right: function( element ) {
+							element.name = 'span';
+
+							element.attributes.color && ( element.styles.color = element.attributes.color );
+							delete element.attributes.color;
+						}
+					}
+				]
+			]
+		} );
+
 		function addButton( name, type, title, order ) {
 			var style = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ] ),
 				colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';

plugins/div/plugin.js

@@ -30,6 +30,9 @@
 				allowedContent: allowed,
 				requiredContent: 'div',
 				contextSensitive: true,
+				contentTransformations: [
+					[ 'div: alignmentToStyle' ]
+				],
 				refresh: function( editor, path ) {
 					var context = editor.config.div_wrapTable ? path.root : path.blockLimit;
 					this.setState( 'div' in context.getDtd() ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );

plugins/font/plugin.js

@@ -38,7 +38,48 @@
 			toolbar: 'styles,' + order,
 			allowedContent: style,
 			requiredContent: style,
+			contentTransformations: [
+				[
+					{
+						element: 'font',
+						check: 'span',
+						left: function( element ) {
+							return !!element.attributes.size ||
+								!!element.attributes.align ||
+								!!element.attributes.face;
+						},
+						right: function( element ) {
+							var sizes = [
+								'', // Non-existent size "0"
+								'x-small',
+								'small',
+								'medium',
+								'large',
+								'x-large',
+								'xx-large',
+								'48px' // Closest value to what size="7" might mean.
+							];
+
+							element.name = 'span';
+
+							if ( element.attributes.size ) {
+								element.styles[ 'font-size' ] = sizes[ element.attributes.size ];
+								delete element.attributes.size;
+							}
+
+							if ( element.attributes.align ) {
+								element.styles[ 'text-align' ] = element.attributes.align;
+								delete element.attributes.align;
+							}
 
+							if ( element.attributes.face ) {
+								element.styles[ 'font-family' ] = element.attributes.face;
+								delete element.attributes.face;
+							}
+						}
+					}
+				]
+			],
 			panel: {
 				css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),
 				multiSelect: false,

plugins/indentblock/plugin.js

@@ -39,6 +39,20 @@
 					}
 				};
 
+				this.contentTransformations = [
+					[ 'div: splitMarginShorthand' ],
+					[ 'h1: splitMarginShorthand' ],
+					[ 'h2: splitMarginShorthand' ],
+					[ 'h3: splitMarginShorthand' ],
+					[ 'h4: splitMarginShorthand' ],
+					[ 'h5: splitMarginShorthand' ],
+					[ 'h6: splitMarginShorthand' ],
+					[ 'ol: splitMarginShorthand' ],
+					[ 'p: splitMarginShorthand' ],
+					[ 'pre: splitMarginShorthand' ],
+					[ 'ul: splitMarginShorthand' ]
+				];
+
 				if ( this.enterBr )
 					this.allowedContent.div = true;
 

plugins/liststyle/plugin.js

@@ -17,15 +17,21 @@
 
 			def = new CKEDITOR.dialogCommand( 'numberedListStyle', {
 				requiredContent: 'ol',
-				allowedContent: 'ol{list-style-type}[start]'
+				allowedContent: 'ol{list-style-type}[start]; li{list-style-type}',
+				contentTransformations: [
+					[ 'ol: listTypeToStyle' ]
+				]
 			} );
 			cmd = editor.addCommand( 'numberedListStyle', def );
 			editor.addFeature( cmd );
 			CKEDITOR.dialog.add( 'numberedListStyle', this.path + 'dialogs/liststyle.js' );
 
 			def = new CKEDITOR.dialogCommand( 'bulletedListStyle', {
 				requiredContent: 'ul',
-				allowedContent: 'ul{list-style-type}'
+				allowedContent: 'ul{list-style-type}',
+				contentTransformations: [
+					[ 'ul: listTypeToStyle' ]
+				]
 			} );
 			cmd = editor.addCommand( 'bulletedListStyle', def );
 			editor.addFeature( cmd );