1 /**

     2  * Formatter.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /**

    12  * Text formatter engine class. This class is used to apply formats like bold, italic, font size

    13  * etc to the current selection or specific nodes. This engine was build to replace the browsers

    14  * default formatting logic for execCommand due to it's inconsistent and buggy behavior.

    15  *

    16  * @class tinymce.Formatter

    17  * @example

    18  *  tinymce.activeEditor.formatter.register('mycustomformat', {

    19  *    inline: 'span',

    20  *    styles: {color: '#ff0000'}

    21  *  });

    22  *

    23  *  tinymce.activeEditor.formatter.apply('mycustomformat');

    24  */

    25 define("tinymce/Formatter", [

    26 	"tinymce/dom/TreeWalker",

    27 	"tinymce/dom/RangeUtils",

    28 	"tinymce/dom/BookmarkManager",

    29 	"tinymce/dom/ElementUtils",

    30 	"tinymce/util/Tools",

    31 	"tinymce/fmt/Preview"

    32 ], function(TreeWalker, RangeUtils, BookmarkManager, ElementUtils, Tools, Preview) {

    33 	/**

    34 	 * Constructs a new formatter instance.

    35 	 *

    36 	 * @constructor Formatter

    37 	 * @param {tinymce.Editor} ed Editor instance to construct the formatter engine to.

    38 	 */

    39 	return function(ed) {

    40 		var formats = {},

    41 			dom = ed.dom,

    42 			selection = ed.selection,

    43 			rangeUtils = new RangeUtils(dom),

    44 			isValid = ed.schema.isValidChild,

    45 			isBlock = dom.isBlock,

    46 			forcedRootBlock = ed.settings.forced_root_block,

    47 			nodeIndex = dom.nodeIndex,

    48 			INVISIBLE_CHAR = '\uFEFF',

    49 			MCE_ATTR_RE = /^(src|href|style)$/,

    50 			FALSE = false,

    51 			TRUE = true,

    52 			formatChangeData,

    53 			undef,

    54 			getContentEditable = dom.getContentEditable,

    55 			disableCaretContainer,

    56 			markCaretContainersBogus,

    57 			isBookmarkNode = BookmarkManager.isBookmarkNode;

    58 

    59 		var each = Tools.each,

    60 			grep = Tools.grep,

    61 			walk = Tools.walk,

    62 			extend = Tools.extend;

    63 

    64 		function isTextBlock(name) {

    65 			if (name.nodeType) {

    66 				name = name.nodeName;

    67 			}

    68 

    69 			return !!ed.schema.getTextBlockElements()[name.toLowerCase()];

    70 		}

    71 

    72 		function isTableCell(node) {

    73 			return /^(TH|TD)$/.test(node.nodeName);

    74 		}

    75 

    76 		function getParents(node, selector) {

    77 			return dom.getParents(node, selector, dom.getRoot());

    78 		}

    79 

    80 		function isCaretNode(node) {

    81 			return node.nodeType === 1 && node.id === '_mce_caret';

    82 		}

    83 

    84 		function defaultFormats() {

    85 			register({

    86 				valigntop: [

    87 					{selector: 'td,th', styles: {'verticalAlign': 'top'}}

    88 				],

    89 

    90 				valignmiddle: [

    91 					{selector: 'td,th', styles: {'verticalAlign': 'middle'}}

    92 				],

    93 

    94 				valignbottom: [

    95 					{selector: 'td,th', styles: {'verticalAlign': 'bottom'}}

    96 				],

    97 

    98 				alignleft: [

    99 					{selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li', styles: {textAlign: 'left'}, defaultBlock: 'div'},

   100 					{selector: 'img,table', collapsed: false, styles: {'float': 'left'}}

   101 				],

   102 

   103 				aligncenter: [

   104 					{selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li', styles: {textAlign: 'center'}, defaultBlock: 'div'},

   105 					{selector: 'img', collapsed: false, styles: {display: 'block', marginLeft: 'auto', marginRight: 'auto'}},

   106 					{selector: 'table', collapsed: false, styles: {marginLeft: 'auto', marginRight: 'auto'}}

   107 				],

   108 

   109 				alignright: [

   110 					{selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li', styles: {textAlign: 'right'}, defaultBlock: 'div'},

   111 					{selector: 'img,table', collapsed: false, styles: {'float': 'right'}}

   112 				],

   113 

   114 				alignjustify: [

   115 					{selector: 'figure,p,h1,h2,h3,h4,h5,h6,td,th,tr,div,ul,ol,li', styles: {textAlign: 'justify'}, defaultBlock: 'div'}

   116 				],

   117 

   118 				bold: [

   119 					{inline: 'strong', remove: 'all'},

   120 					{inline: 'span', styles: {fontWeight: 'bold'}},

   121 					{inline: 'b', remove: 'all'}

   122 				],

   123 

   124 				italic: [

   125 					{inline: 'em', remove: 'all'},

   126 					{inline: 'span', styles: {fontStyle: 'italic'}},

   127 					{inline: 'i', remove: 'all'}

   128 				],

   129 

   130 				underline: [

   131 					{inline: 'span', styles: {textDecoration: 'underline'}, exact: true},

   132 					{inline: 'u', remove: 'all'}

   133 				],

   134 

   135 				strikethrough: [

   136 					{inline: 'span', styles: {textDecoration: 'line-through'}, exact: true},

   137 					{inline: 'strike', remove: 'all'}

   138 				],

   139 

   140 				forecolor: {inline: 'span', styles: {color: '%value'}, links: true, remove_similar: true},

   141 				hilitecolor: {inline: 'span', styles: {backgroundColor: '%value'}, links: true, remove_similar: true},

   142 				fontname: {inline: 'span', styles: {fontFamily: '%value'}},

   143 				fontsize: {inline: 'span', styles: {fontSize: '%value'}},

   144 				fontsize_class: {inline: 'span', attributes: {'class': '%value'}},

   145 				blockquote: {block: 'blockquote', wrapper: 1, remove: 'all'},

   146 				subscript: {inline: 'sub'},

   147 				superscript: {inline: 'sup'},

   148 				code: {inline: 'code'},

   149 

   150 				link: {inline: 'a', selector: 'a', remove: 'all', split: true, deep: true,

   151 					onmatch: function() {

   152 						return true;

   153 					},

   154 

   155 					onformat: function(elm, fmt, vars) {

   156 						each(vars, function(value, key) {

   157 							dom.setAttrib(elm, key, value);

   158 						});

   159 					}

   160 				},

   161 

   162 				removeformat: [

   163 					{

   164 						selector: 'b,strong,em,i,font,u,strike,sub,sup,dfn,code,samp,kbd,var,cite,mark,q,del,ins',

   165 						remove: 'all',

   166 						split: true,

   167 						expand: false,

   168 						block_expand: true,

   169 						deep: true

   170 					},

   171 					{selector: 'span', attributes: ['style', 'class'], remove: 'empty', split: true, expand: false, deep: true},

   172 					{selector: '*', attributes: ['style', 'class'], split: false, expand: false, deep: true}

   173 				]

   174 			});

   175 

   176 			// Register default block formats

   177 			each('p h1 h2 h3 h4 h5 h6 div address pre div dt dd samp'.split(/\s/), function(name) {

   178 				register(name, {block: name, remove: 'all'});

   179 			});

   180 

   181 			// Register user defined formats

   182 			register(ed.settings.formats);

   183 		}

   184 

   185 		function addKeyboardShortcuts() {

   186 			// Add some inline shortcuts

   187 			ed.addShortcut('meta+b', 'bold_desc', 'Bold');

   188 			ed.addShortcut('meta+i', 'italic_desc', 'Italic');

   189 			ed.addShortcut('meta+u', 'underline_desc', 'Underline');

   190 

   191 			// BlockFormat shortcuts keys

   192 			for (var i = 1; i <= 6; i++) {

   193 				ed.addShortcut('access+' + i, '', ['FormatBlock', false, 'h' + i]);

   194 			}

   195 

   196 			ed.addShortcut('access+7', '', ['FormatBlock', false, 'p']);

   197 			ed.addShortcut('access+8', '', ['FormatBlock', false, 'div']);

   198 			ed.addShortcut('access+9', '', ['FormatBlock', false, 'address']);

   199 		}

   200 

   201 		// Public functions

   202 

   203 		/**

   204 		 * Returns the format by name or all formats if no name is specified.

   205 		 *

   206 		 * @method get

   207 		 * @param {String} name Optional name to retrive by.

   208 		 * @return {Array/Object} Array/Object with all registred formats or a specific format.

   209 		 */

   210 		function get(name) {

   211 			return name ? formats[name] : formats;

   212 		}

   213 

   214 		/**

   215 		 * Registers a specific format by name.

   216 		 *

   217 		 * @method register

   218 		 * @param {Object/String} name Name of the format for example "bold".

   219 		 * @param {Object/Array} format Optional format object or array of format variants

   220 		 * can only be omitted if the first arg is an object.

   221 		 */

   222 		function register(name, format) {

   223 			if (name) {

   224 				if (typeof name !== 'string') {

   225 					each(name, function(format, name) {

   226 						register(name, format);

   227 					});

   228 				} else {

   229 					// Force format into array and add it to internal collection

   230 					format = format.length ? format : [format];

   231 

   232 					each(format, function(format) {

   233 						// Set deep to false by default on selector formats this to avoid removing

   234 						// alignment on images inside paragraphs when alignment is changed on paragraphs

   235 						if (format.deep === undef) {

   236 							format.deep = !format.selector;

   237 						}

   238 

   239 						// Default to true

   240 						if (format.split === undef) {

   241 							format.split = !format.selector || format.inline;

   242 						}

   243 

   244 						// Default to true

   245 						if (format.remove === undef && format.selector && !format.inline) {

   246 							format.remove = 'none';

   247 						}

   248 

   249 						// Mark format as a mixed format inline + block level

   250 						if (format.selector && format.inline) {

   251 							format.mixed = true;

   252 							format.block_expand = true;

   253 						}

   254 

   255 						// Split classes if needed

   256 						if (typeof format.classes === 'string') {

   257 							format.classes = format.classes.split(/\s+/);

   258 						}

   259 					});

   260 

   261 					formats[name] = format;

   262 				}

   263 			}

   264 		}

   265 

   266 		/**

   267 		 * Unregister a specific format by name.

   268 		 *

   269 		 * @method unregister

   270 		 * @param {String} name Name of the format for example "bold".

   271 		 */

   272 		function unregister(name) {

   273 			if (name && formats[name]) {

   274 				delete formats[name];

   275 			}

   276 

   277 			return formats;

   278 		}

   279 

   280 		function getTextDecoration(node) {

   281 			var decoration;

   282 

   283 			ed.dom.getParent(node, function(n) {

   284 				decoration = ed.dom.getStyle(n, 'text-decoration');

   285 				return decoration && decoration !== 'none';

   286 			});

   287 

   288 			return decoration;

   289 		}

   290 

   291 		function processUnderlineAndColor(node) {

   292 			var textDecoration;

   293 			if (node.nodeType === 1 && node.parentNode && node.parentNode.nodeType === 1) {

   294 				textDecoration = getTextDecoration(node.parentNode);

   295 				if (ed.dom.getStyle(node, 'color') && textDecoration) {

   296 					ed.dom.setStyle(node, 'text-decoration', textDecoration);

   297 				} else if (ed.dom.getStyle(node, 'text-decoration') === textDecoration) {

   298 					ed.dom.setStyle(node, 'text-decoration', null);

   299 				}

   300 			}

   301 		}

   302 

   303 		/**

   304 		 * Applies the specified format to the current selection or specified node.

   305 		 *

   306 		 * @method apply

   307 		 * @param {String} name Name of format to apply.

   308 		 * @param {Object} vars Optional list of variables to replace within format before applying it.

   309 		 * @param {Node} node Optional node to apply the format to defaults to current selection.

   310 		 */

   311 		function apply(name, vars, node) {

   312 			var formatList = get(name), format = formatList[0], bookmark, rng, isCollapsed = !node && selection.isCollapsed();

   313 

   314 			function setElementFormat(elm, fmt) {

   315 				fmt = fmt || format;

   316 

   317 				if (elm) {

   318 					if (fmt.onformat) {

   319 						fmt.onformat(elm, fmt, vars, node);

   320 					}

   321 

   322 					each(fmt.styles, function(value, name) {

   323 						dom.setStyle(elm, name, replaceVars(value, vars));

   324 					});

   325 

   326 					// Needed for the WebKit span spam bug

   327 					// TODO: Remove this once WebKit/Blink fixes this

   328 					if (fmt.styles) {

   329 						var styleVal = dom.getAttrib(elm, 'style');

   330 

   331 						if (styleVal) {

   332 							elm.setAttribute('data-mce-style', styleVal);

   333 						}

   334 					}

   335 

   336 					each(fmt.attributes, function(value, name) {

   337 						dom.setAttrib(elm, name, replaceVars(value, vars));

   338 					});

   339 

   340 					each(fmt.classes, function(value) {

   341 						value = replaceVars(value, vars);

   342 

   343 						if (!dom.hasClass(elm, value)) {

   344 							dom.addClass(elm, value);

   345 						}

   346 					});

   347 				}

   348 			}

   349 

   350 			function adjustSelectionToVisibleSelection() {

   351 				function findSelectionEnd(start, end) {

   352 					var walker = new TreeWalker(end);

   353 					for (node = walker.current(); node; node = walker.prev()) {

   354 						if (node.childNodes.length > 1 || node == start || node.tagName == 'BR') {

   355 							return node;

   356 						}

   357 					}

   358 				}

   359 

   360 				// Adjust selection so that a end container with a end offset of zero is not included in the selection

   361 				// as this isn't visible to the user.

   362 				var rng = ed.selection.getRng();

   363 				var start = rng.startContainer;

   364 				var end = rng.endContainer;

   365 

   366 				if (start != end && rng.endOffset === 0) {

   367 					var newEnd = findSelectionEnd(start, end);

   368 					var endOffset = newEnd.nodeType == 3 ? newEnd.length : newEnd.childNodes.length;

   369 

   370 					rng.setEnd(newEnd, endOffset);

   371 				}

   372 

   373 				return rng;

   374 			}

   375 

   376 			function applyRngStyle(rng, bookmark, node_specific) {

   377 				var newWrappers = [], wrapName, wrapElm, contentEditable = true;

   378 

   379 				// Setup wrapper element

   380 				wrapName = format.inline || format.block;

   381 				wrapElm = dom.create(wrapName);

   382 				setElementFormat(wrapElm);

   383 

   384 				rangeUtils.walk(rng, function(nodes) {

   385 					var currentWrapElm;

   386 

   387 					/**

   388 					 * Process a list of nodes wrap them.

   389 					 */

   390 					function process(node) {

   391 						var nodeName, parentName, found, hasContentEditableState, lastContentEditable;

   392 

   393 						lastContentEditable = contentEditable;

   394 						nodeName = node.nodeName.toLowerCase();

   395 						parentName = node.parentNode.nodeName.toLowerCase();

   396 

   397 						// Node has a contentEditable value

   398 						if (node.nodeType === 1 && getContentEditable(node)) {

   399 							lastContentEditable = contentEditable;

   400 							contentEditable = getContentEditable(node) === "true";

   401 							hasContentEditableState = true; // We don't want to wrap the container only it's children

   402 						}

   403 

   404 						// Stop wrapping on br elements

   405 						if (isEq(nodeName, 'br')) {

   406 							currentWrapElm = 0;

   407 

   408 							// Remove any br elements when we wrap things

   409 							if (format.block) {

   410 								dom.remove(node);

   411 							}

   412 

   413 							return;

   414 						}

   415 

   416 						// If node is wrapper type

   417 						if (format.wrapper && matchNode(node, name, vars)) {

   418 							currentWrapElm = 0;

   419 							return;

   420 						}

   421 

   422 						// Can we rename the block

   423 						// TODO: Break this if up, too complex

   424 						if (contentEditable && !hasContentEditableState && format.block &&

   425 							!format.wrapper && isTextBlock(nodeName) && isValid(parentName, wrapName)) {

   426 							node = dom.rename(node, wrapName);

   427 							setElementFormat(node);

   428 							newWrappers.push(node);

   429 							currentWrapElm = 0;

   430 							return;

   431 						}

   432 

   433 						// Handle selector patterns

   434 						if (format.selector) {

   435 							// Look for matching formats

   436 							each(formatList, function(format) {

   437 								// Check collapsed state if it exists

   438 								if ('collapsed' in format && format.collapsed !== isCollapsed) {

   439 									return;

   440 								}

   441 

   442 								if (dom.is(node, format.selector) && !isCaretNode(node)) {

   443 									setElementFormat(node, format);

   444 									found = true;

   445 								}

   446 							});

   447 

   448 							// Continue processing if a selector match wasn't found and a inline element is defined

   449 							if (!format.inline || found) {

   450 								currentWrapElm = 0;

   451 								return;

   452 							}

   453 						}

   454 

   455 						// Is it valid to wrap this item

   456 						// TODO: Break this if up, too complex

   457 						if (contentEditable && !hasContentEditableState && isValid(wrapName, nodeName) && isValid(parentName, wrapName) &&

   458 								!(!node_specific && node.nodeType === 3 &&

   459 								node.nodeValue.length === 1 &&

   460 								node.nodeValue.charCodeAt(0) === 65279) &&

   461 								!isCaretNode(node) &&

   462 								(!format.inline || !isBlock(node))) {

   463 							// Start wrapping

   464 							if (!currentWrapElm) {

   465 								// Wrap the node

   466 								currentWrapElm = dom.clone(wrapElm, FALSE);

   467 								node.parentNode.insertBefore(currentWrapElm, node);

   468 								newWrappers.push(currentWrapElm);

   469 							}

   470 

   471 							currentWrapElm.appendChild(node);

   472 						} else {

   473 							// Start a new wrapper for possible children

   474 							currentWrapElm = 0;

   475 

   476 							each(grep(node.childNodes), process);

   477 

   478 							if (hasContentEditableState) {

   479 								contentEditable = lastContentEditable; // Restore last contentEditable state from stack

   480 							}

   481 

   482 							// End the last wrapper

   483 							currentWrapElm = 0;

   484 						}

   485 					}

   486 

   487 					// Process siblings from range

   488 					each(nodes, process);

   489 				});

   490 

   491 				// Apply formats to links as well to get the color of the underline to change as well

   492 				if (format.links === true) {

   493 					each(newWrappers, function(node) {

   494 						function process(node) {

   495 							if (node.nodeName === 'A') {

   496 								setElementFormat(node, format);

   497 							}

   498 

   499 							each(grep(node.childNodes), process);

   500 						}

   501 

   502 						process(node);

   503 					});

   504 				}

   505 

   506 				// Cleanup

   507 				each(newWrappers, function(node) {

   508 					var childCount;

   509 

   510 					function getChildCount(node) {

   511 						var count = 0;

   512 

   513 						each(node.childNodes, function(node) {

   514 							if (!isWhiteSpaceNode(node) && !isBookmarkNode(node)) {

   515 								count++;

   516 							}

   517 						});

   518 

   519 						return count;

   520 					}

   521 

   522 					function mergeStyles(node) {

   523 						var child, clone;

   524 

   525 						each(node.childNodes, function(node) {

   526 							if (node.nodeType == 1 && !isBookmarkNode(node) && !isCaretNode(node)) {

   527 								child = node;

   528 								return FALSE; // break loop

   529 							}

   530 						});

   531 

   532 						// If child was found and of the same type as the current node

   533 						if (child && !isBookmarkNode(child) && matchName(child, format)) {

   534 							clone = dom.clone(child, FALSE);

   535 							setElementFormat(clone);

   536 

   537 							dom.replace(clone, node, TRUE);

   538 							dom.remove(child, 1);

   539 						}

   540 

   541 						return clone || node;

   542 					}

   543 

   544 					childCount = getChildCount(node);

   545 

   546 					// Remove empty nodes but only if there is multiple wrappers and they are not block

   547 					// elements so never remove single <h1></h1> since that would remove the

   548 					// currrent empty block element where the caret is at

   549 					if ((newWrappers.length > 1 || !isBlock(node)) && childCount === 0) {

   550 						dom.remove(node, 1);

   551 						return;

   552 					}

   553 

   554 					if (format.inline || format.wrapper) {

   555 						// Merges the current node with it's children of similar type to reduce the number of elements

   556 						if (!format.exact && childCount === 1) {

   557 							node = mergeStyles(node);

   558 						}

   559 

   560 						// Remove/merge children

   561 						each(formatList, function(format) {

   562 							// Merge all children of similar type will move styles from child to parent

   563 							// this: <span style="color:red"><b><span style="color:red; font-size:10px">text</span></b></span>

   564 							// will become: <span style="color:red"><b><span style="font-size:10px">text</span></b></span>

   565 							each(dom.select(format.inline, node), function(child) {

   566 								if (isBookmarkNode(child)) {

   567 									return;

   568 								}

   569 

   570 								removeFormat(format, vars, child, format.exact ? child : null);

   571 							});

   572 						});

   573 

   574 						// Remove child if direct parent is of same type

   575 						if (matchNode(node.parentNode, name, vars)) {

   576 							dom.remove(node, 1);

   577 							node = 0;

   578 							return TRUE;

   579 						}

   580 

   581 						// Look for parent with similar style format

   582 						if (format.merge_with_parents) {

   583 							dom.getParent(node.parentNode, function(parent) {

   584 								if (matchNode(parent, name, vars)) {

   585 									dom.remove(node, 1);

   586 									node = 0;

   587 									return TRUE;

   588 								}

   589 							});

   590 						}

   591 

   592 						// Merge next and previous siblings if they are similar <b>text</b><b>text</b> becomes <b>texttext</b>

   593 						if (node && format.merge_siblings !== false) {

   594 							node = mergeSiblings(getNonWhiteSpaceSibling(node), node);

   595 							node = mergeSiblings(node, getNonWhiteSpaceSibling(node, TRUE));

   596 						}

   597 					}

   598 				});

   599 			}

   600 

   601 			if (format) {

   602 				if (node) {

   603 					if (node.nodeType) {

   604 						rng = dom.createRng();

   605 						rng.setStartBefore(node);

   606 						rng.setEndAfter(node);

   607 						applyRngStyle(expandRng(rng, formatList), null, true);

   608 					} else {

   609 						applyRngStyle(node, null, true);

   610 					}

   611 				} else {

   612 					if (!isCollapsed || !format.inline || dom.select('td.mce-item-selected,th.mce-item-selected').length) {

   613 						// Obtain selection node before selection is unselected by applyRngStyle()

   614 						var curSelNode = ed.selection.getNode();

   615 

   616 						// If the formats have a default block and we can't find a parent block then

   617 						// start wrapping it with a DIV this is for forced_root_blocks: false

   618 						// It's kind of a hack but people should be using the default block type P since all desktop editors work that way

   619 						if (!forcedRootBlock && formatList[0].defaultBlock && !dom.getParent(curSelNode, dom.isBlock)) {

   620 							apply(formatList[0].defaultBlock);

   621 						}

   622 

   623 						// Apply formatting to selection

   624 						ed.selection.setRng(adjustSelectionToVisibleSelection());

   625 						bookmark = selection.getBookmark();

   626 						applyRngStyle(expandRng(selection.getRng(TRUE), formatList), bookmark);

   627 

   628 						// Colored nodes should be underlined so that the color of the underline matches the text color.

   629 						if (format.styles && (format.styles.color || format.styles.textDecoration)) {

   630 							walk(curSelNode, processUnderlineAndColor, 'childNodes');

   631 							processUnderlineAndColor(curSelNode);

   632 						}

   633 

   634 						selection.moveToBookmark(bookmark);

   635 						moveStart(selection.getRng(TRUE));

   636 						ed.nodeChanged();

   637 					} else {

   638 						performCaretAction('apply', name, vars);

   639 					}

   640 				}

   641 			}

   642 		}

   643 

   644 		/**

   645 		 * Removes the specified format from the current selection or specified node.

   646 		 *

   647 		 * @method remove

   648 		 * @param {String} name Name of format to remove.

   649 		 * @param {Object} vars Optional list of variables to replace within format before removing it.

   650 		 * @param {Node/Range} node Optional node or DOM range to remove the format from defaults to current selection.

   651 		 */

   652 		function remove(name, vars, node, similar) {

   653 			var formatList = get(name), format = formatList[0], bookmark, rng, contentEditable = true;

   654 

   655 			// Merges the styles for each node

   656 			function process(node) {

   657 				var children, i, l, lastContentEditable, hasContentEditableState;

   658 

   659 				// Node has a contentEditable value

   660 				if (node.nodeType === 1 && getContentEditable(node)) {

   661 					lastContentEditable = contentEditable;

   662 					contentEditable = getContentEditable(node) === "true";

   663 					hasContentEditableState = true; // We don't want to wrap the container only it's children

   664 				}

   665 

   666 				// Grab the children first since the nodelist might be changed

   667 				children = grep(node.childNodes);

   668 

   669 				// Process current node

   670 				if (contentEditable && !hasContentEditableState) {

   671 					for (i = 0, l = formatList.length; i < l; i++) {

   672 						if (removeFormat(formatList[i], vars, node, node)) {

   673 							break;

   674 						}

   675 					}

   676 				}

   677 

   678 				// Process the children

   679 				if (format.deep) {

   680 					if (children.length) {

   681 						for (i = 0, l = children.length; i < l; i++) {

   682 							process(children[i]);

   683 						}

   684 

   685 						if (hasContentEditableState) {

   686 							contentEditable = lastContentEditable; // Restore last contentEditable state from stack

   687 						}

   688 					}

   689 				}

   690 			}

   691 

   692 			function findFormatRoot(container) {

   693 				var formatRoot;

   694 

   695 				// Find format root

   696 				each(getParents(container.parentNode).reverse(), function(parent) {

   697 					var format;

   698 

   699 					// Find format root element

   700 					if (!formatRoot && parent.id != '_start' && parent.id != '_end') {

   701 						// Is the node matching the format we are looking for

   702 						format = matchNode(parent, name, vars, similar);

   703 						if (format && format.split !== false) {

   704 							formatRoot = parent;

   705 						}

   706 					}

   707 				});

   708 

   709 				return formatRoot;

   710 			}

   711 

   712 			function wrapAndSplit(formatRoot, container, target, split) {

   713 				var parent, clone, lastClone, firstClone, i, formatRootParent;

   714 

   715 				// Format root found then clone formats and split it

   716 				if (formatRoot) {

   717 					formatRootParent = formatRoot.parentNode;

   718 

   719 					for (parent = container.parentNode; parent && parent != formatRootParent; parent = parent.parentNode) {

   720 						clone = dom.clone(parent, FALSE);

   721 

   722 						for (i = 0; i < formatList.length; i++) {

   723 							if (removeFormat(formatList[i], vars, clone, clone)) {

   724 								clone = 0;

   725 								break;

   726 							}

   727 						}

   728 

   729 						// Build wrapper node

   730 						if (clone) {

   731 							if (lastClone) {

   732 								clone.appendChild(lastClone);

   733 							}

   734 

   735 							if (!firstClone) {

   736 								firstClone = clone;

   737 							}

   738 

   739 							lastClone = clone;

   740 						}

   741 					}

   742 

   743 					// Never split block elements if the format is mixed

   744 					if (split && (!format.mixed || !isBlock(formatRoot))) {

   745 						container = dom.split(formatRoot, container);

   746 					}

   747 

   748 					// Wrap container in cloned formats

   749 					if (lastClone) {

   750 						target.parentNode.insertBefore(lastClone, target);

   751 						firstClone.appendChild(target);

   752 					}

   753 				}

   754 

   755 				return container;

   756 			}

   757 

   758 			function splitToFormatRoot(container) {

   759 				return wrapAndSplit(findFormatRoot(container), container, container, true);

   760 			}

   761 

   762 			function unwrap(start) {

   763 				var node = dom.get(start ? '_start' : '_end'),

   764 					out = node[start ? 'firstChild' : 'lastChild'];

   765 

   766 				// If the end is placed within the start the result will be removed

   767 				// So this checks if the out node is a bookmark node if it is it

   768 				// checks for another more suitable node

   769 				if (isBookmarkNode(out)) {

   770 					out = out[start ? 'firstChild' : 'lastChild'];

   771 				}

   772 

   773 				// Since dom.remove removes empty text nodes then we need to try to find a better node

   774 				if (out.nodeType == 3 && out.data.length === 0) {

   775 					out = start ? node.previousSibling || node.nextSibling : node.nextSibling || node.previousSibling;

   776 				}

   777 

   778 				dom.remove(node, true);

   779 

   780 				return out;

   781 			}

   782 

   783 			function removeRngStyle(rng) {

   784 				var startContainer, endContainer;

   785 				var commonAncestorContainer = rng.commonAncestorContainer;

   786 

   787 				rng = expandRng(rng, formatList, TRUE);

   788 

   789 				if (format.split) {

   790 					startContainer = getContainer(rng, TRUE);

   791 					endContainer = getContainer(rng);

   792 

   793 					if (startContainer != endContainer) {

   794 						// WebKit will render the table incorrectly if we wrap a TH or TD in a SPAN

   795 						// so let's see if we can use the first child instead

   796 						// This will happen if you triple click a table cell and use remove formatting

   797 						if (/^(TR|TH|TD)$/.test(startContainer.nodeName) && startContainer.firstChild) {

   798 							if (startContainer.nodeName == "TR") {

   799 								startContainer = startContainer.firstChild.firstChild || startContainer;

   800 							} else {

   801 								startContainer = startContainer.firstChild || startContainer;

   802 							}

   803 						}

   804 

   805 						// Try to adjust endContainer as well if cells on the same row were selected - bug #6410

   806 						if (commonAncestorContainer &&

   807 							/^T(HEAD|BODY|FOOT|R)$/.test(commonAncestorContainer.nodeName) &&

   808 							isTableCell(endContainer) && endContainer.firstChild) {

   809 							endContainer = endContainer.firstChild || endContainer;

   810 						}

   811 

   812 						if (dom.isChildOf(startContainer, endContainer) && !isTableCell(startContainer) && !isTableCell(endContainer)) {

   813 							startContainer = wrap(startContainer, 'span', {id: '_start', 'data-mce-type': 'bookmark'});

   814 							splitToFormatRoot(startContainer);

   815 							startContainer = unwrap(TRUE);

   816 							return;

   817 						} else {

   818 							// Wrap start/end nodes in span element since these might be cloned/moved

   819 							startContainer = wrap(startContainer, 'span', {id: '_start', 'data-mce-type': 'bookmark'});

   820 							endContainer = wrap(endContainer, 'span', {id: '_end', 'data-mce-type': 'bookmark'});

   821 

   822 							// Split start/end

   823 							splitToFormatRoot(startContainer);

   824 							splitToFormatRoot(endContainer);

   825 

   826 							// Unwrap start/end to get real elements again

   827 							startContainer = unwrap(TRUE);

   828 							endContainer = unwrap();

   829 						}

   830 					} else {

   831 						startContainer = endContainer = splitToFormatRoot(startContainer);

   832 					}

   833 

   834 					// Update range positions since they might have changed after the split operations

   835 					rng.startContainer = startContainer.parentNode ? startContainer.parentNode : startContainer;

   836 					rng.startOffset = nodeIndex(startContainer);

   837 					rng.endContainer = endContainer.parentNode ? endContainer.parentNode : endContainer;

   838 					rng.endOffset = nodeIndex(endContainer) + 1;

   839 				}

   840 

   841 				// Remove items between start/end

   842 				rangeUtils.walk(rng, function(nodes) {

   843 					each(nodes, function(node) {

   844 						process(node);

   845 

   846 						// Remove parent span if it only contains text-decoration: underline, yet a parent node is also underlined.

   847 						if (node.nodeType === 1 && ed.dom.getStyle(node, 'text-decoration') === 'underline' &&

   848 							node.parentNode && getTextDecoration(node.parentNode) === 'underline') {

   849 							removeFormat({

   850 								'deep': false,

   851 								'exact': true,

   852 								'inline': 'span',

   853 								'styles': {

   854 									'textDecoration': 'underline'

   855 								}

   856 							}, null, node);

   857 						}

   858 					});

   859 				});

   860 			}

   861 

   862 			// Handle node

   863 			if (node) {

   864 				if (node.nodeType) {

   865 					rng = dom.createRng();

   866 					rng.setStartBefore(node);

   867 					rng.setEndAfter(node);

   868 					removeRngStyle(rng);

   869 				} else {

   870 					removeRngStyle(node);

   871 				}

   872 

   873 				return;

   874 			}

   875 

   876 			if (!selection.isCollapsed() || !format.inline || dom.select('td.mce-item-selected,th.mce-item-selected').length) {

   877 				bookmark = selection.getBookmark();

   878 				removeRngStyle(selection.getRng(TRUE));

   879 				selection.moveToBookmark(bookmark);

   880 

   881 				// Check if start element still has formatting then we are at: "<b>text|</b>text"

   882 				// and need to move the start into the next text node

   883 				if (format.inline && match(name, vars, selection.getStart())) {

   884 					moveStart(selection.getRng(true));

   885 				}

   886 

   887 				ed.nodeChanged();

   888 			} else {

   889 				performCaretAction('remove', name, vars, similar);

   890 			}

   891 		}

   892 

   893 		/**

   894 		 * Toggles the specified format on/off.

   895 		 *

   896 		 * @method toggle

   897 		 * @param {String} name Name of format to apply/remove.

   898 		 * @param {Object} vars Optional list of variables to replace within format before applying/removing it.

   899 		 * @param {Node} node Optional node to apply the format to or remove from. Defaults to current selection.

   900 		 */

   901 		function toggle(name, vars, node) {

   902 			var fmt = get(name);

   903 

   904 			if (match(name, vars, node) && (!('toggle' in fmt[0]) || fmt[0].toggle)) {

   905 				remove(name, vars, node);

   906 			} else {

   907 				apply(name, vars, node);

   908 			}

   909 		}

   910 

   911 		/**

   912 		 * Return true/false if the specified node has the specified format.

   913 		 *

   914 		 * @method matchNode

   915 		 * @param {Node} node Node to check the format on.

   916 		 * @param {String} name Format name to check.

   917 		 * @param {Object} vars Optional list of variables to replace before checking it.

   918 		 * @param {Boolean} similar Match format that has similar properties.

   919 		 * @return {Object} Returns the format object it matches or undefined if it doesn't match.

   920 		 */

   921 		function matchNode(node, name, vars, similar) {

   922 			var formatList = get(name), format, i, classes;

   923 

   924 			function matchItems(node, format, item_name) {

   925 				var key, value, items = format[item_name], i;

   926 

   927 				// Custom match

   928 				if (format.onmatch) {

   929 					return format.onmatch(node, format, item_name);

   930 				}

   931 

   932 				// Check all items

   933 				if (items) {

   934 					// Non indexed object

   935 					if (items.length === undef) {

   936 						for (key in items) {

   937 							if (items.hasOwnProperty(key)) {

   938 								if (item_name === 'attributes') {

   939 									value = dom.getAttrib(node, key);

   940 								} else {

   941 									value = getStyle(node, key);

   942 								}

   943 

   944 								if (similar && !value && !format.exact) {

   945 									return;

   946 								}

   947 

   948 								if ((!similar || format.exact) && !isEq(value, normalizeStyleValue(replaceVars(items[key], vars), key))) {

   949 									return;

   950 								}

   951 							}

   952 						}

   953 					} else {

   954 						// Only one match needed for indexed arrays

   955 						for (i = 0; i < items.length; i++) {

   956 							if (item_name === 'attributes' ? dom.getAttrib(node, items[i]) : getStyle(node, items[i])) {

   957 								return format;

   958 							}

   959 						}

   960 					}

   961 				}

   962 

   963 				return format;

   964 			}

   965 

   966 			if (formatList && node) {

   967 				// Check each format in list

   968 				for (i = 0; i < formatList.length; i++) {

   969 					format = formatList[i];

   970 

   971 					// Name name, attributes, styles and classes

   972 					if (matchName(node, format) && matchItems(node, format, 'attributes') && matchItems(node, format, 'styles')) {

   973 						// Match classes

   974 						if ((classes = format.classes)) {

   975 							for (i = 0; i < classes.length; i++) {

   976 								if (!dom.hasClass(node, classes[i])) {

   977 									return;

   978 								}

   979 							}

   980 						}

   981 

   982 						return format;

   983 					}

   984 				}

   985 			}

   986 		}

   987 

   988 		/**

   989 		 * Matches the current selection or specified node against the specified format name.

   990 		 *

   991 		 * @method match

   992 		 * @param {String} name Name of format to match.

   993 		 * @param {Object} vars Optional list of variables to replace before checking it.

   994 		 * @param {Node} node Optional node to check.

   995 		 * @return {boolean} true/false if the specified selection/node matches the format.

   996 		 */

   997 		function match(name, vars, node) {

   998 			var startNode;

   999 

  1000 			function matchParents(node) {

  1001 				var root = dom.getRoot();

  1002 

  1003 				if (node === root) {

  1004 					return false;

  1005 				}

  1006 

  1007 				// Find first node with similar format settings

  1008 				node = dom.getParent(node, function(node) {

  1009 					return node.parentNode === root || !!matchNode(node, name, vars, true);

  1010 				});

  1011 

  1012 				// Do an exact check on the similar format element

  1013 				return matchNode(node, name, vars);

  1014 			}

  1015 

  1016 			// Check specified node

  1017 			if (node) {

  1018 				return matchParents(node);

  1019 			}

  1020 

  1021 			// Check selected node

  1022 			node = selection.getNode();

  1023 			if (matchParents(node)) {

  1024 				return TRUE;

  1025 			}

  1026 

  1027 			// Check start node if it's different

  1028 			startNode = selection.getStart();

  1029 			if (startNode != node) {

  1030 				if (matchParents(startNode)) {

  1031 					return TRUE;

  1032 				}

  1033 			}

  1034 

  1035 			return FALSE;

  1036 		}

  1037 

  1038 		/**

  1039 		 * Matches the current selection against the array of formats and returns a new array with matching formats.

  1040 		 *

  1041 		 * @method matchAll

  1042 		 * @param {Array} names Name of format to match.

  1043 		 * @param {Object} vars Optional list of variables to replace before checking it.

  1044 		 * @return {Array} Array with matched formats.

  1045 		 */

  1046 		function matchAll(names, vars) {

  1047 			var startElement, matchedFormatNames = [], checkedMap = {};

  1048 

  1049 			// Check start of selection for formats

  1050 			startElement = selection.getStart();

  1051 			dom.getParent(startElement, function(node) {

  1052 				var i, name;

  1053 

  1054 				for (i = 0; i < names.length; i++) {

  1055 					name = names[i];

  1056 

  1057 					if (!checkedMap[name] && matchNode(node, name, vars)) {

  1058 						checkedMap[name] = true;

  1059 						matchedFormatNames.push(name);

  1060 					}

  1061 				}

  1062 			}, dom.getRoot());

  1063 

  1064 			return matchedFormatNames;

  1065 		}

  1066 

  1067 		/**

  1068 		 * Returns true/false if the specified format can be applied to the current selection or not. It

  1069 		 * will currently only check the state for selector formats, it returns true on all other format types.

  1070 		 *

  1071 		 * @method canApply

  1072 		 * @param {String} name Name of format to check.

  1073 		 * @return {boolean} true/false if the specified format can be applied to the current selection/node.

  1074 		 */

  1075 		function canApply(name) {

  1076 			var formatList = get(name), startNode, parents, i, x, selector;

  1077 

  1078 			if (formatList) {

  1079 				startNode = selection.getStart();

  1080 				parents = getParents(startNode);

  1081 

  1082 				for (x = formatList.length - 1; x >= 0; x--) {

  1083 					selector = formatList[x].selector;

  1084 

  1085 					// Format is not selector based then always return TRUE

  1086 					// Is it has a defaultBlock then it's likely it can be applied for example align on a non block element line

  1087 					if (!selector || formatList[x].defaultBlock) {

  1088 						return TRUE;

  1089 					}

  1090 

  1091 					for (i = parents.length - 1; i >= 0; i--) {

  1092 						if (dom.is(parents[i], selector)) {

  1093 							return TRUE;

  1094 						}

  1095 					}

  1096 				}

  1097 			}

  1098 

  1099 			return FALSE;

  1100 		}

  1101 

  1102 		/**

  1103 		 * Executes the specified callback when the current selection matches the formats or not.

  1104 		 *

  1105 		 * @method formatChanged

  1106 		 * @param {String} formats Comma separated list of formats to check for.

  1107 		 * @param {function} callback Callback with state and args when the format is changed/toggled on/off.

  1108 		 * @param {Boolean} similar True/false state if the match should handle similar or exact formats.

  1109 		 */

  1110 		function formatChanged(formats, callback, similar) {

  1111 			var currentFormats;

  1112 

  1113 			// Setup format node change logic

  1114 			if (!formatChangeData) {

  1115 				formatChangeData = {};

  1116 				currentFormats = {};

  1117 

  1118 				ed.on('NodeChange', function(e) {

  1119 					var parents = getParents(e.element), matchedFormats = {};

  1120 

  1121 					// Ignore bogus nodes like the <a> tag created by moveStart()

  1122 					parents = Tools.grep(parents, function(node) {

  1123 						return node.nodeType == 1 && !node.getAttribute('data-mce-bogus');

  1124 					});

  1125 

  1126 					// Check for new formats

  1127 					each(formatChangeData, function(callbacks, format) {

  1128 						each(parents, function(node) {

  1129 							if (matchNode(node, format, {}, callbacks.similar)) {

  1130 								if (!currentFormats[format]) {

  1131 									// Execute callbacks

  1132 									each(callbacks, function(callback) {

  1133 										callback(true, {node: node, format: format, parents: parents});

  1134 									});

  1135