@saltcorn/mobile-app 0.7.3-beta.3 → 0.7.3

package/www/plugins/public/@saltcorn/ckeditor4/plugins/colorbutton/plugin.js

@@ -0,0 +1,1009 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @fileOverview The "colorbutton" plugin that makes it possible to assign
+ *               text and background colors to editor contents.
+ *
+ */
+
+( function() {
+	var ColorBox,
+		ColorHistoryRow,
+		ColorHistory;
+
+	CKEDITOR.plugins.add( 'colorbutton', {
+		requires: 'panelbutton,floatpanel',
+		// jscs:disable maximumLineLength
+		lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
+		// jscs:enable maximumLineLength
+		icons: 'bgcolor,textcolor', // %REMOVE_LINE_CORE%
+		hidpi: true, // %REMOVE_LINE_CORE%
+		init: function( editor ) {
+			var config = editor.config,
+				lang = editor.lang.colorbutton;
+
+			if ( !CKEDITOR.env.hc ) {
+				addButton( {
+					name: 'TextColor',
+					type: 'fore',
+					commandName: 'textColor',
+					title: lang.textColorTitle,
+					order: 10,
+					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;
+								}
+							}
+						]
+					]
+				} );
+
+				var contentTransformations,
+					normalizeBackground = editor.config.colorButton_normalizeBackground;
+
+				if ( normalizeBackground === undefined || normalizeBackground ) {
+					// If background contains only color, then we want to convert it into background-color so that it's
+					// correctly picked by colorbutton plugin.
+					contentTransformations = [
+						[
+							{
+								// Transform span that specify background with color only to background-color.
+								element: 'span',
+								left: function( element ) {
+									var tools = CKEDITOR.tools;
+									if ( element.name != 'span' || !element.styles || !element.styles.background ) {
+										return false;
+									}
+
+									var background = tools.style.parse.background( element.styles.background );
+
+									// We return true only if background specifies **only** color property, and there's only one background directive.
+									return background.color && tools.object.keys( background ).length === 1;
+								},
+								right: function( element ) {
+									var style = new CKEDITOR.style( editor.config.colorButton_backStyle, {
+											color: element.styles.background
+										} ),
+										definition = style.getDefinition();
+
+									// Align the output object with the template used in config.
+									element.name = definition.element;
+									element.styles = definition.styles;
+									element.attributes = definition.attributes || {};
+
+									return element;
+								}
+							}
+						]
+					];
+				}
+
+				addButton( {
+					name: 'BGColor',
+					type: 'back',
+					commandName: 'bgColor',
+					title: lang.bgColorTitle,
+					order: 20,
+					contentTransformations: contentTransformations
+				} );
+			}
+
+			function addButton( options ) {
+				var name = options.name,
+					type = options.type,
+					title = options.title,
+					order = options.order,
+					commandName = options.commandName,
+					contentTransformations = options.contentTransformations || {},
+					style = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ] ),
+					colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox',
+					colorData = { type: type },
+					defaultColorStyle = new CKEDITOR.style( config[ 'colorButton_' + type + 'Style' ], { color: 'inherit' } ),
+					clickFn = createClickFunction(),
+					history = ColorHistory.getRowLimit( editor ) ? new ColorHistory( editor, type == 'back' ? 'background-color' : 'color', clickFn ) : undefined,
+					panelBlock;
+
+				editor.addCommand( commandName, {
+					contextSensitive: true,
+					exec: function( editor, data ) {
+						if ( editor.readOnly ) {
+							return;
+						}
+
+						var newStyle = data.newStyle;
+
+						editor.removeStyle( defaultColorStyle );
+
+						editor.focus();
+
+						if ( newStyle ) {
+							editor.applyStyle( newStyle );
+						}
+
+						editor.fire( 'saveSnapshot' );
+					},
+
+					refresh: function( editor, path ) {
+						if ( !defaultColorStyle.checkApplicable( path, editor, editor.activeFilter ) ) {
+							this.setState( CKEDITOR.TRISTATE_DISABLED );
+						} else if ( defaultColorStyle.checkActive( path, editor ) ) {
+							this.setState( CKEDITOR.TRISTATE_ON );
+						} else {
+							this.setState( CKEDITOR.TRISTATE_OFF );
+						}
+					}
+				} );
+
+				editor.ui.add( name, CKEDITOR.UI_PANELBUTTON, {
+					label: title,
+					title: title,
+					command: commandName,
+					editorFocus: 0,
+					toolbar: 'colors,' + order,
+					allowedContent: style,
+					requiredContent: style,
+					contentTransformations: contentTransformations,
+
+					panel: {
+						css: CKEDITOR.skin.getPath( 'editor' ),
+						attributes: { role: 'listbox', 'aria-label': lang.panelTitle }
+					},
+
+					// Selects the color based on the first matching result from the given filter function.
+					//
+					// The filter function should accept a color iterated from the
+					// {@link CKEDITOR.config#colorButton_colors} list as a parameter. If the color could not be found,
+					// this method will fall back to the first color from the panel.
+					//
+					// @since 4.14.0
+					// @private
+					// @member CKEDITOR.ui.colorButton
+					// @param {Function} callback The filter function which should return `true` if a matching color is found.
+					// @param {String} callback.color The color compared by the filter function.
+					select: function( callback ) {
+						var colors = config.colorButton_colors.split( ',' ),
+							color = CKEDITOR.tools.array.find( colors, callback );
+
+						color = ColorBox.normalizeColor( color );
+
+						selectColor( panelBlock, color );
+						panelBlock._.markFirstDisplayed();
+					},
+
+					onBlock: function( panel, block ) {
+						panelBlock = block;
+						block.autoSize = true;
+						block.element.addClass( 'cke_colorblock' );
+						block.element.setHtml( renderColors( colorBoxId, clickFn, history ? history.getLength() : 0 ) );
+
+						// The block should not have scrollbars (https://dev.ckeditor.com/ticket/5933, https://dev.ckeditor.com/ticket/6056)
+						block.element.getDocument().getBody().setStyle( 'overflow', 'hidden' );
+
+						// First render of panel have a scrollbar, but it shouldn't (#4247).
+						block.element.getAscendant( { html: 1 } ).setStyle( 'overflow', 'hidden' );
+
+						CKEDITOR.ui.fire( 'ready', this );
+
+						var keys = block.keys,
+							rtl = editor.lang.dir == 'rtl';
+
+						keys[ rtl ? 37 : 39 ] = 'next'; // ARROW-RIGHT
+						keys[ 40 ] = 'next'; // ARROW-DOWN
+						keys[ 9 ] = 'next'; // TAB
+						keys[ rtl ? 39 : 37 ] = 'prev'; // ARROW-LEFT
+						keys[ 38 ] = 'prev'; // ARROW-UP
+						keys[ CKEDITOR.SHIFT + 9 ] = 'prev'; // SHIFT + TAB
+						keys[ 32 ] = 'click'; // SPACE
+
+						if ( history ) {
+							history.setContainer( block.element.findOne( '.cke_colorhistory' ) );
+						}
+					},
+
+					// The automatic colorbox should represent the real color (https://dev.ckeditor.com/ticket/6010)
+					onOpen: function() {
+						var selection = editor.getSelection(),
+							block = selection && selection.getStartElement(),
+							path = editor.elementPath( block ),
+							cssProperty = type == 'back' ? 'background-color' : 'color',
+							automaticColor;
+
+						if ( !path ) {
+							return;
+						}
+
+						// Find the closest block element.
+						block = path.block || path.blockLimit || editor.document.getBody();
+
+						// The background color might be transparent. In that case, look up the color in the DOM tree.
+						do {
+							automaticColor = block && block.getComputedStyle( cssProperty ) || 'transparent';
+						}
+						while ( type == 'back' && automaticColor == 'transparent' && block && ( block = block.getParent() ) );
+
+						// The box should never be transparent.
+						if ( !automaticColor || automaticColor == 'transparent' ) {
+							automaticColor = '#ffffff';
+						}
+
+						if ( config.colorButton_enableAutomatic ) {
+							panelBlock.element.findOne( '#' + colorBoxId ).setStyle( 'background-color', automaticColor );
+						}
+
+						var range = selection && selection.getRanges()[ 0 ];
+
+						if ( range ) {
+							var walker = new CKEDITOR.dom.walker( range ),
+								element = range.collapsed ? range.startContainer : walker.next(),
+								finalColor = '',
+								currentColor;
+
+							while ( element ) {
+								// (#2296)
+								if ( element.type !== CKEDITOR.NODE_ELEMENT ) {
+									element = element.getParent();
+								}
+
+								currentColor = ColorBox.normalizeColor( element.getComputedStyle( cssProperty ) );
+								finalColor = finalColor || currentColor;
+
+								if ( finalColor !== currentColor ) {
+									finalColor = '';
+									break;
+								}
+
+								element = walker.next();
+							}
+
+							if ( finalColor == 'transparent' ) {
+								finalColor = '';
+							}
+							if ( type == 'fore' ) {
+								colorData.automaticTextColor = '#' + ColorBox.normalizeColor( automaticColor );
+							}
+							colorData.selectionColor = finalColor ? '#' + finalColor : '';
+
+							selectColor( panelBlock, finalColor );
+						}
+
+						return automaticColor;
+					}
+				} );
+
+				function createColorStyleDefinition() {
+					var colorStyleDefinition = editor.config[ 'colorButton_' + type + 'Style' ];
+
+					colorStyleDefinition.childRule = type == 'back' ?
+						function( element ) {
+							// It's better to apply background color as the innermost style. (https://dev.ckeditor.com/ticket/3599)
+							// Except for "unstylable elements". (https://dev.ckeditor.com/ticket/6103)
+							return isUnstylable( element );
+						} : function( element ) {
+							// Fore color style must be applied inside links instead of around it. (https://dev.ckeditor.com/ticket/4772,https://dev.ckeditor.com/ticket/6908)
+							return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
+						};
+
+					return colorStyleDefinition;
+				}
+
+				function createClickFunction() {
+					return CKEDITOR.tools.addFunction( function addClickFn( color, colorName, colorbox ) {
+						editor.focus();
+						editor.fire( 'saveSnapshot' );
+
+						if ( color == '?' ) {
+							editor.getColorFromDialog( function( color ) {
+								if ( color ) {
+									setColor( color, colorName, history );
+								}
+							}, null, colorData );
+						} else {
+							setColor( color && '#' + color, colorName, history );
+						}
+
+						// The colors may be duplicated in both default palette and color history. If user reopens panel
+						// after choosing color without changing selection, the box that was clicked last should be selected.
+						// If selection changes in the meantime, color box from the default palette has the precedence.
+						// See https://github.com/ckeditor/ckeditor4/pull/3784#pullrequestreview-378461341 for details.
+						if ( !colorbox ) {
+							return;
+						}
+						colorbox.setAttribute( 'cke_colorlast', true );
+						editor.once( 'selectionChange', function() {
+							colorbox.removeAttribute( 'cke_colorlast' );
+						} );
+					} );
+				}
+
+				function setColor( color, colorName, colorHistory ) {
+					var colorStyleVars = {};
+
+					if ( color ) {
+						colorStyleVars.color = color;
+					}
+					if ( colorName ) {
+						colorStyleVars.colorName = colorName;
+					}
+
+					var colorStyle = !CKEDITOR.tools.isEmpty( colorStyleVars ) && new CKEDITOR.style( createColorStyleDefinition(), colorStyleVars );
+
+					editor.execCommand( commandName, { newStyle: colorStyle } );
+					if ( color && colorHistory ) {
+						colorHistory.addColor( color.substr( 1 ).toUpperCase() );
+						renumberElements( panelBlock );
+					}
+				}
+
+				function renumberElements( panel ) {
+					var panelElements = panel.element.find( '[role=option]' ).toArray();
+
+					for ( var i = 0; i < panelElements.length; i++ ) {
+						panelElements[ i ].setAttributes( {
+							'aria-posinset': i + 1,
+							'aria-setsize': panelElements.length
+						} );
+					}
+				}
+			}
+
+			function renderColors( colorBoxId, clickFn, historyLength ) {
+				var output = [],
+					colors = config.colorButton_colors.split( ',' ),
+					// Tells if we should include "More Colors..." button.
+					moreColorsEnabled = editor.plugins.colordialog && config.colorButton_enableMore,
+					// aria-setsize and aria-posinset attributes are used to indicate size of options, because
+					// screen readers doesn't play nice with table, based layouts (https://dev.ckeditor.com/ticket/12097).
+					total = colors.length + historyLength + ( moreColorsEnabled ? 1 : 0 ),
+					startingPosition = 1;
+
+				if ( config.colorButton_enableAutomatic ) {
+					total += 1;
+					startingPosition += 1;
+					generateAutomaticButtonHtml( output );
+				}
+
+				output.push( '<table role="presentation" cellspacing=0 cellpadding=0 width="100%"><tbody>' );
+
+				// Render the color boxes.
+				for ( var i = 0; i < colors.length; i++ ) {
+					if ( ( i % editor.config.colorButton_colorsPerRow ) === 0 )
+						output.push( '</tr><tr>' );
+
+					var parts = colors[ i ].split( '/' ),
+						colorName = parts[ 0 ],
+						colorCode = parts[ 1 ] || colorName,
+						colorLabel = parts[ 1 ] ? colorName : undefined,
+						box = new ColorBox( editor, { color: colorCode, label: colorLabel }, clickFn );
+
+					box.setPositionIndex( startingPosition + i, total );
+					output.push( box.getHtml() );
+				}
+
+				if ( ColorHistory.getRowLimit( editor ) ) {
+					ColorHistory.renderContainer( output, editor );
+				}
+
+				if ( moreColorsEnabled ) {
+					generateMoreColorsButtonHtml( output );
+				}
+
+				output.push( '</tr></tbody></table>' );
+
+				return output.join( '' );
+
+				function generateAutomaticButtonHtml( output ) {
+					output.push( '<a class="cke_colorauto" _cke_focus=1 hidefocus=true',
+						' title="', lang.auto, '"',
+						' draggable="false"',
+						' ondragstart="return false;"', // Draggable attribute is buggy on Firefox.
+						' onclick="CKEDITOR.tools.callFunction(', clickFn, ',null\);return false;"',
+						' href="javascript:void(\'', lang.auto, '\')"',
+						' role="option" aria-posinset="1" aria-setsize="', total, '">',
+							'<table role="presentation" cellspacing=0 cellpadding=0 width="100%">',
+								'<tr>',
+									'<td colspan="', editor.config.colorButton_colorsPerRow, '" align="center">',
+										'<span class="cke_colorbox" id="', colorBoxId, '"></span>', lang.auto,
+									'</td>',
+								'</tr>',
+							'</table>',
+						'</a>' );
+				}
+
+				function generateMoreColorsButtonHtml( output ) {
+					output.push( '</tr>',
+						'<tr>',
+							'<td colspan="', editor.config.colorButton_colorsPerRow, '" align="center">',
+								'<a class="cke_colormore" _cke_focus=1 hidefocus=true',
+									' title="', lang.more, '"',
+									' draggable="false"',
+									' ondragstart="return false;"', // Draggable attribute is buggy on Firefox.
+									' onclick="CKEDITOR.tools.callFunction(', clickFn, ',\'?\');return false;"',
+									' href="javascript:void(\'', lang.more, '\')"', ' role="option" aria-posinset="', total,
+									'" aria-setsize="', total, '">', lang.more,
+								'</a>',
+							'</td>' ); // </tr> is later in the code.
+				}
+			}
+
+			function isUnstylable( ele ) {
+				return ( ele.getAttribute( 'contentEditable' ) == 'false' ) || ele.getAttribute( 'data-nostyle' );
+			}
+
+			/*
+			* Selects the specified color in the specified panel block.
+			*
+			* @private
+			* @member CKEDITOR.plugins.colorbutton
+			* @param {CKEDITOR.ui.panel.block} block
+			* @param {String} color
+			*/
+			function selectColor( block, color ) {
+				var items = block._.getItems(),
+					selected = block.element.findOne( '[aria-selected]' ),
+					lastColor = block.element.findOne( '[cke_colorlast]' );
+
+				if ( selected ) {
+					selected.removeAttribute( 'aria-selected' );
+				}
+
+				if ( lastColor ) {
+					lastColor.setAttribute( 'aria-selected', true );
+					return;
+				}
+
+				for ( var i = 0; i < items.count(); i++ ) {
+					var item = items.getItem( i );
+
+					if ( color && color == ColorBox.normalizeColor( item.getAttribute( 'data-value' ) ) ) {
+						item.setAttribute( 'aria-selected', true );
+						return;
+					}
+				}
+			}
+		}
+	} );
+	ColorBox = CKEDITOR.tools.createClass( {
+		$: function( editor, colorData, clickFn ) {
+			this.$ = new CKEDITOR.dom.element( 'td' );
+
+			this.color = CKEDITOR.tools._isValidColorFormat( colorData.color ) ? colorData.color : '';
+			this.clickFn = clickFn;
+			this.label = colorData.label || ColorBox.colorNames( editor )[ this.color ] || this.color;
+
+			this.setHtml();
+		},
+
+		statics: {
+			colorNames: function( editor ) {
+				return editor.lang.colorbutton.colors;
+			},
+
+			/*
+			 * Converts a CSS color value to an easily comparable form.
+			 *
+			 * The function supports most of the color formats:
+			 *
+			 * * named colors (e.g. `yellow`),
+			 * * hex colors (e.g. `#FF0000` or `#F00`),
+			 * * RGB/RGBA colors (e.g. `rgb( 255, 0, 10)` or `rgba( 100, 20, 50, .5 )`),
+			 * * HSL/HSLA colors (e.g. `hsl( 100, 50%, 20%)` or `hsla( 100, 50%, 20%, 10%)`).
+			 *
+			 * @private
+			 * @param {String} color
+			 * @returns {String} Returns color in hex format, but without the hash at the beginning, e.g. `ff0000` for red.
+			 */
+			normalizeColor: function( color ) {
+				var alphaRegex = /^(rgb|hsl)a\(/g,
+					transparentRegex = /^rgba\((\s*0\s*,?){4}\)$/g,
+					isAlphaColor = alphaRegex.test( color ),
+					// Browsers tend to represent transparent color as rgba(0, 0, 0, 0), so we need to filter out this value.
+					isTransparentColor = transparentRegex.test( color ),
+					colorInstance;
+
+				// For colors with alpha channel we need to use CKEDITOR.tools.color normalization (#4351).
+				if ( isAlphaColor && !isTransparentColor ) {
+					colorInstance = new CKEDITOR.tools.color( color );
+
+					return CKEDITOR.tools.normalizeHex( colorInstance.getHex() || '' ).replace( /#/g, '' );
+				}
+
+				// Replace 3-character hexadecimal notation with a 6-character hexadecimal notation (#1008).
+				return CKEDITOR.tools.normalizeHex( '#' + CKEDITOR.tools.convertRgbToHex( color || '' ) ).replace( /#/g, '' );
+			}
+		},
+
+		proto: {
+			getElement: function() {
+				return this.$;
+			},
+
+			getHtml: function() {
+				return this.getElement().getOuterHtml();
+			},
+
+			setHtml: function() {
+				this.getElement().setHtml( '<a class="cke_colorbox" _cke_focus=1 hidefocus=true' +
+						' title="' + this.label + '"' +
+						' draggable="false"' +
+						' ondragstart="return false;"' + // Draggable attribute is buggy on Firefox.
+						' onclick="CKEDITOR.tools.callFunction(' + this.clickFn + ',\'' + this.color + '\',\'' + this.label +  '\', this);' +
+						' return false;"' +
+						' href="javascript:void(\'' + this.color + '\')"' +
+						' data-value="' + this.color + '"' +
+						' role="option">' +
+						'<span class="cke_colorbox" style="background-color:#' + this.color + '"></span>' +
+					'</a>' );
+			},
+
+			setPositionIndex: function( posinset, setsize ) {
+				this.getElement().getChild( 0 ).setAttributes( {
+					'aria-posinset': posinset,
+					'aria-setsize': setsize
+				} );
+			}
+		}
+	} );
+
+	ColorHistoryRow = CKEDITOR.tools.createClass( {
+		$: function() {
+			this.$ = new CKEDITOR.dom.element( 'tr' );
+			this.$.addClass( 'cke_colorhistory_row' );
+			this.boxes = [];
+		},
+
+		proto: {
+			getElement: function() {
+				return this.$;
+			},
+
+			removeLastColor: function() {
+				this.getElement().getLast().remove();
+				return this.boxes.pop();
+			},
+
+			addNewColor: function( colorBox ) {
+				this.boxes.unshift( colorBox );
+				this.getElement().append( colorBox.getElement(), true );
+			},
+
+			extractColorBox: function( colorCode ) {
+				var index = CKEDITOR.tools.getIndex( this.boxes, function( box ) {
+					return box.color === colorCode;
+				} );
+
+				if ( index < 0 ) {
+					return null;
+				}
+
+				this.boxes[ index ].getElement().remove();
+				return this.boxes.splice( index, 1 )[ 0 ];
+			}
+		}
+	} );
+
+	ColorHistory = CKEDITOR.tools.createClass( {
+		$: function( editor, cssProperty, clickFn ) {
+			this.editor = editor;
+			this.cssProperty = cssProperty;
+			this.clickFn = clickFn;
+
+			this.rows = [];
+			this._.addNewRow();
+
+			if ( this.editor.config.colorButton_renderContentColors ) {
+				// It can't be done right away - we have to wait till editable is set up.
+				this.editor.once( 'instanceReady', function() {
+					this.renderContentColors();
+				}, this );
+			}
+		},
+
+		statics: {
+			renderContainer: function( output, editor ) {
+				output.push( '</tbody><tbody class="cke_colorhistory" style="display:none;">',
+					'<tr>',
+						'<td colspan="', editor.config.colorButton_colorsPerRow, '" align="center">',
+							'<span><hr></span>',
+						'</td>',
+					'</tr>',
+				'</tbody><tbody>' );
+			},
+
+			getRowLimit: function( editor ) {
+				return editor.config.colorButton_historyRowLimit;
+			},
+
+			getCapacity: function( editor ) {
+				return ColorHistory.getRowLimit( editor ) * editor.config.colorButton_colorsPerRow;
+			},
+
+			colorList: CKEDITOR.tools.style.parse._colors
+		},
+
+		_: {
+			countColors: function() {
+				var spans = CKEDITOR.tools.getStyledSpans( this.cssProperty, this.editor.editable() ),
+					colorOccurrences = CKEDITOR.tools.array.reduce( spans, function( occurrences, span ) {
+						var colorCode = this._.getHexCode( span, this.cssProperty, ColorHistory.colorList );
+
+						occurrences[ colorCode ] = occurrences[ colorCode ] || 0;
+						occurrences[ colorCode ] += 1;
+
+						return occurrences;
+					}, {}, this );
+
+				return colorOccurrences;
+			},
+
+			getHexCode: function( span, cssProperty, list ) {
+				var color = span.getStyle( cssProperty );
+
+				return color in list ? list[ color ].substr( 1 ) : ColorBox.normalizeColor( span.getComputedStyle( cssProperty ) ).toUpperCase();
+			},
+
+			sortByOccurrencesAscending: function( objectToParse, targetKeyName ) {
+				var result = [];
+
+				for ( var key in objectToParse ) {
+					var color = {};
+
+					color[ targetKeyName ] = key;
+					color.frequency = objectToParse[ key ];
+
+					result.push( color );
+				}
+
+				result.sort( function( a, b ) {
+					return b.frequency - a.frequency;
+				} );
+
+				this._.trimToCapacity( result );
+
+				return result.reverse();
+			},
+
+			trimToCapacity: function( array ) {
+				array.splice( ColorHistory.getCapacity( this.editor ) );
+			},
+
+			addColors: function( colorData ) {
+				CKEDITOR.tools.array.forEach( colorData, function( color ) {
+					this.addColor( color.colorCode );
+				}, this );
+			},
+
+			extractColorBox: function( colorCode ) {
+				for ( var i = 0; i < this.rows.length; i++ ) {
+					var box = this.rows[ i ].extractColorBox( colorCode );
+
+					if ( box ) {
+						return box;
+					}
+				}
+
+				return null;
+			},
+
+			moveToBeginning: function( colorBox ) {
+				this.rows[ 0 ].addNewColor( colorBox );
+			},
+
+			createAtBeginning: function( colorCode ) {
+				this._.moveToBeginning( new ColorBox( this.editor, { color: colorCode }, this.clickFn ) );
+			},
+
+			addNewRow: function() {
+				this.rows.push( new ColorHistoryRow() );
+
+				if ( this.container ) {
+					this.container.append( this.rows[ this.rows.length - 1 ].getElement() );
+				}
+			},
+
+			alignRows: function() {
+				for ( var rowIndex = 0; rowIndex < ColorHistory.getRowLimit( this.editor ); rowIndex++ ) {
+					if ( this.rows[ rowIndex ].boxes.length <= this.editor.config.colorButton_colorsPerRow ) {
+						return;
+					} else if ( this.rows[ rowIndex + 1 ] ) {
+						this._.moveLastBoxToNextRow( rowIndex );
+					} else if ( rowIndex < ColorHistory.getRowLimit( this.editor ) - 1 ) {
+						this._.addNewRow();
+						this._.moveLastBoxToNextRow( rowIndex );
+					} else {
+						this.rows[ rowIndex ].removeLastColor();
+					}
+				}
+			},
+
+			moveLastBoxToNextRow: function( index ) {
+				this.rows[ index + 1 ].addNewColor( this.rows[ index ].removeLastColor() );
+			},
+
+			refreshPositions: function() {
+				var total = this._.countPanelElements(),
+					position = this._.calculateFirstPosition( total );
+
+				CKEDITOR.tools.array.forEach( this.rows, function( row ) {
+					CKEDITOR.tools.array.forEach( row.boxes, function( colorBox ) {
+						colorBox.setPositionIndex( position, total );
+						position += 1;
+					} );
+				} );
+			},
+
+			countPanelElements: function() {
+				var total = this.editor.config.colorButton_colors.split( ',' ).length + this.getLength();
+
+				if ( this.editor.plugins.colordialog && this.editor.config.colorButton_enableMore ) {
+					total += 1;
+				}
+
+				if ( this.editor.config.colorButton_enableAutomatic ) {
+					total += 1;
+				}
+
+				return total;
+			},
+
+			calculateFirstPosition: function( total ) {
+				if ( this.editor.plugins.colordialog && this.editor.config.colorButton_enableMore ) {
+					return total - this.getLength();
+				} else {
+					return total - this.getLength() + 1;
+				}
+			},
+
+			attachRows: function() {
+				CKEDITOR.tools.array.forEach( this.rows, function( row ) {
+					this.container.append( row.getElement() );
+				}, this );
+			}
+		},
+
+		proto: {
+			setContainer: function( container ) {
+				this.container = container;
+				this._.attachRows();
+
+				if ( this.getLength() ) {
+					this.show();
+				}
+			},
+
+			show: function() {
+				if ( this.container ) {
+					this.container.show();
+				}
+			},
+
+			renderContentColors: function() {
+				var colorOccurrences = this._.countColors();
+
+				if ( CKEDITOR.tools.isEmpty( colorOccurrences ) ) {
+					return;
+				}
+
+				var colorData = this._.sortByOccurrencesAscending( colorOccurrences, 'colorCode' );
+
+				this._.addColors( colorData );
+				this._.refreshPositions();
+			},
+
+			addColor: function( colorCode ) {
+				var existingBox = this._.extractColorBox( colorCode );
+
+				if ( this.container && !this.container.isVisible() ) {
+					this.show();
+				}
+
+				if ( existingBox ) {
+					this._.moveToBeginning( existingBox );
+				} else {
+					this._.createAtBeginning( colorCode );
+				}
+
+				this._.alignRows();
+			},
+
+			getLength: function() {
+				return CKEDITOR.tools.array.reduce( this.rows, function( total, row ) {
+					return total += row.boxes.length;
+				}, 0 );
+			}
+		}
+	} );
+} )();
+
+/**
+ * Whether to enable the **More Colors** button in the color selectors.
+ *
+ * Read more in the {@glink features/colorbutton documentation}
+ * and see the {@glink examples/colorbutton example}.
+ *
+ *		config.colorButton_enableMore = false;
+ *
+ * @cfg {Boolean} [colorButton_enableMore=true]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_enableMore = true;
+
+/**
+ * Defines the colors to be displayed in the color selectors. This is a string
+ * containing hexadecimal notation for HTML colors, without the `'#'` prefix.
+ *
+ * **Since 3.3:** A color name may optionally be defined by prefixing the entries with
+ * a name and the slash character. For example, `'FontColor1/FF9900'` will be
+ * displayed as the color `#FF9900` in the selector, but will be output as `'FontColor1'`.
+ * **This behaviour was altered in version 4.12.0.**
+ *
+ * **Since 4.6.2:** The default color palette has changed. It contains fewer colors in more
+ * pastel shades than the previous one.
+ *
+ * **Since 4.12.0:** Defining colors with names works in a different way. Colors names can be defined
+ * by `colorName/colorCode`. The color name is only used in the tooltip. The output will now use the color code.
+ * For example, `FontColor/FF9900` will be displayed as the color `#FF9900` in the selector, and will
+ * be output as `#FF9900`.
+ *
+ * Read more in the {@glink features/colorbutton documentation}
+ * and see the {@glink examples/colorbutton example}.
+ *
+ *		// Brazil colors only.
+ *		config.colorButton_colors = '00923E,F8C100,28166F';
+ *
+ *		config.colorButton_colors = 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00';
+ *
+ *		// CKEditor color palette available before version 4.6.2.
+ *		config.colorButton_colors =
+ *			'000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,' +
+ *			'B22222,A52A2A,DAA520,006400,40E0D0,0000CD,800080,808080,' +
+ *			'F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,A9A9A9,' +
+ *			'FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,' +
+ *			'FFF0F5,FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF';
+ *
+ * @cfg {String} [colorButton_colors]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_colors = '1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,' +
+	'16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,' +
+	'E67E22,E74C3C,ECF0F1,95A5A6,DDD,FFF,' +
+	'D35400,C0392B,BDC3C7,7F8C8D,999,000';
+
+/**
+ * Stores the style definition that applies the text foreground color.
+ *
+ * **Note:** Advanced Content Filter (ACF) is not updated automatically by a custom style definition.
+ * You may need to add additional ACF rules, so the customized style element is not removed.
+ * Learn more how to configure ACF with {@glink guide/dev_advanced_content_filter Advanced Content Filter guide}.
+ *
+ * Read more in the {@glink features/colorbutton documentation}
+ * and see the {@glink examples/colorbutton example}.
+ *
+ *		// This is actually the default value.
+ *		config.colorButton_foreStyle = {
+ *			element: 'span',
+ *			styles: { color: '#(color)' }
+ *		};
+ *
+ * **Since 4.15.0:** Added `colorName` property, which can be used instead of a `color`
+ * property to customize foreground style. For example to add custom class:
+ *
+ *		config.colorButton_foreStyle = {
+ *			element: 'span',
+ *			attributes: { 'class': '#(colorName)' }
+ *		};
+ *
+ * @cfg [colorButton_foreStyle]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_foreStyle = {
+	element: 'span',
+	styles: { 'color': '#(color)' },
+	overrides: [ {
+		element: 'font', attributes: { 'color': null }
+	} ]
+};
+
+/**
+ * Stores the style definition that applies the text background color.
+ *
+ * **Note:** Advanced Content Filter (ACF) is not updated automatically by a custom style definition.
+ * You may need to add additional ACF rules, so the customized style element is not removed.
+ * Learn more how to configure ACF with {@glink guide/dev_advanced_content_filter Advanced Content Filter guide}.
+ *
+ * Read more in the {@glink features/colorbutton documentation}
+ * and see the {@glink examples/colorbutton example}.
+ *
+ *		// This is actually the default value.
+ *		config.colorButton_backStyle = {
+ *			element: 'span',
+ *			styles: { 'background-color': '#(color)' }
+ *		};
+ *
+ * **Since 4.15.0:** Added `colorName` property, which can be used instead of a `color`
+ * property to customize background style. For example to add custom class:
+ *
+ *		config.colorButton_backStyle = {
+ *			element: 'span',
+ *			attributes: { 'class': '#(colorName)' }
+ *		};
+ *
+ * @cfg [colorButton_backStyle]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_backStyle = {
+	element: 'span',
+	styles: { 'background-color': '#(color)' }
+};
+
+/**
+ * Whether to enable the **Automatic** button in the color selectors.
+ *
+ * Read more in the {@glink features/colorbutton documentation}
+ * and see the {@glink examples/colorbutton example}.
+ *
+ *		config.colorButton_enableAutomatic = false;
+ *
+ * @cfg {Boolean} [colorButton_enableAutomatic=true]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_enableAutomatic = true;
+
+/**
+ * Defines how many colors will be shown per row in the color selectors.
+ *
+ * Read more in the {@glink features/colorbutton documentation}
+ * and see the {@glink examples/colorbutton example}.
+ *
+ *		config.colorButton_colorsPerRow = 8;
+ *
+ * @since 4.6.2
+ * @cfg {Number} [colorButton_colorsPerRow=6]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_colorsPerRow = 6;
+
+/**
+ * Whether the plugin should convert `background` CSS properties with color only, to a `background-color` property,
+ * allowing the [Color Button](https://ckeditor.com/cke4/addon/colorbutton) plugin to edit these styles.
+ *
+ *		config.colorButton_normalizeBackground = false;
+ *
+ * @since 4.6.1
+ * @cfg {Boolean} [colorButton_normalizeBackground=true]
+ * @member CKEDITOR.config
+ */
+
+/**
+ * Defines how many color history rows can be created.
+ *
+ *		config.colorButton_historyRowLimit = 2;
+ *
+ * @since 4.15.0
+ * @cfg {Number} [colorButton_historyRowLimit=1]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_historyRowLimit = 1;
+
+/**
+ * Defines if color history should be initially filled by colors found in content.
+ *
+ *		config.colorButton_renderContentColors = false;
+ *
+ * @since 4.15.0
+ * @cfg {Number} [colorButton_renderContentColors=true]
+ * @member CKEDITOR.config
+ */
+CKEDITOR.config.colorButton_renderContentColors = true;