浏览代码

Fixed broken color localization. Code refactoring.

Aleksander Nowodzinski 6 年之前
父节点
当前提交
f3112364ca

+ 28 - 14
packages/ckeditor5-font/src/fontbackgroundcolor.js

@@ -62,47 +62,61 @@ export default class FontBackgroundColor extends Plugin {
  *				{
  *				{
  *					color: 'hsl(0, 0%, 0%)',
  *					color: 'hsl(0, 0%, 0%)',
  *					label: 'Black'
  *					label: 'Black'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 30%)',
  *					color: 'hsl(0, 0%, 30%)',
  *					label: 'Dim grey'
  *					label: 'Dim grey'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 60%)',
  *					color: 'hsl(0, 0%, 60%)',
  *					label: 'Grey'
  *					label: 'Grey'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 90%)',
  *					color: 'hsl(0, 0%, 90%)',
  *					label: 'Light grey'
  *					label: 'Light grey'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 100%)',
  *					color: 'hsl(0, 0%, 100%)',
  *					label: 'White',
  *					label: 'White',
  *					hasBorder: true
  *					hasBorder: true
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 75%, 60%)',
  *					color: 'hsl(0, 75%, 60%)',
  *					label: 'Red'
  *					label: 'Red'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(30, 75%, 60%)',
  *					color: 'hsl(30, 75%, 60%)',
  *					label: 'Orange'
  *					label: 'Orange'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(60, 75%, 60%)',
  *					color: 'hsl(60, 75%, 60%)',
  *					label: 'Yellow'
  *					label: 'Yellow'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(90, 75%, 60%)',
  *					color: 'hsl(90, 75%, 60%)',
  *					label: 'Light green'
  *					label: 'Light green'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(120, 75%, 60%)',
  *					color: 'hsl(120, 75%, 60%)',
  *					label: 'Green'
  *					label: 'Green'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(150, 75%, 60%)',
  *					color: 'hsl(150, 75%, 60%)',
  *					label: 'Aquamarine'
  *					label: 'Aquamarine'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(180, 75%, 60%)',
  *					color: 'hsl(180, 75%, 60%)',
  *					label: 'Turquoise'
  *					label: 'Turquoise'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(210, 75%, 60%)',
  *					color: 'hsl(210, 75%, 60%)',
  *					label: 'Light blue'
  *					label: 'Light blue'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(240, 75%, 60%)',
  *					color: 'hsl(240, 75%, 60%)',
  *					label: 'Blue'
  *					label: 'Blue'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(270, 75%, 60%)',
  *					color: 'hsl(270, 75%, 60%)',
  *					label: 'Purple'
  *					label: 'Purple'
  *				}
  *				}

+ 28 - 14
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -33,47 +33,61 @@ export default class FontBackgroundColorEditing extends Plugin {
 				{
 				{
 					color: 'hsl(0, 0%, 0%)',
 					color: 'hsl(0, 0%, 0%)',
 					label: 'Black'
 					label: 'Black'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 30%)',
 					color: 'hsl(0, 0%, 30%)',
 					label: 'Dim grey'
 					label: 'Dim grey'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 60%)',
 					color: 'hsl(0, 0%, 60%)',
 					label: 'Grey'
 					label: 'Grey'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 90%)',
 					color: 'hsl(0, 0%, 90%)',
 					label: 'Light grey'
 					label: 'Light grey'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 100%)',
 					color: 'hsl(0, 0%, 100%)',
 					label: 'White',
 					label: 'White',
 					hasBorder: true
 					hasBorder: true
-				}, {
+				},
+				{
 					color: 'hsl(0, 75%, 60%)',
 					color: 'hsl(0, 75%, 60%)',
 					label: 'Red'
 					label: 'Red'
-				}, {
+				},
+				{
 					color: 'hsl(30, 75%, 60%)',
 					color: 'hsl(30, 75%, 60%)',
 					label: 'Orange'
 					label: 'Orange'
-				}, {
+				},
+				{
 					color: 'hsl(60, 75%, 60%)',
 					color: 'hsl(60, 75%, 60%)',
 					label: 'Yellow'
 					label: 'Yellow'
-				}, {
+				},
+				{
 					color: 'hsl(90, 75%, 60%)',
 					color: 'hsl(90, 75%, 60%)',
 					label: 'Light green'
 					label: 'Light green'
-				}, {
+				},
+				{
 					color: 'hsl(120, 75%, 60%)',
 					color: 'hsl(120, 75%, 60%)',
 					label: 'Green'
 					label: 'Green'
-				}, {
+				},
+				{
 					color: 'hsl(150, 75%, 60%)',
 					color: 'hsl(150, 75%, 60%)',
 					label: 'Aquamarine'
 					label: 'Aquamarine'
-				}, {
+				},
+				{
 					color: 'hsl(180, 75%, 60%)',
 					color: 'hsl(180, 75%, 60%)',
 					label: 'Turquoise'
 					label: 'Turquoise'
-				}, {
+				},
+				{
 					color: 'hsl(210, 75%, 60%)',
 					color: 'hsl(210, 75%, 60%)',
 					label: 'Light blue'
 					label: 'Light blue'
-				}, {
+				},
+				{
 					color: 'hsl(240, 75%, 60%)',
 					color: 'hsl(240, 75%, 60%)',
 					label: 'Blue'
 					label: 'Blue'
-				}, {
+				},
+				{
 					color: 'hsl(270, 75%, 60%)',
 					color: 'hsl(270, 75%, 60%)',
 					label: 'Purple'
 					label: 'Purple'
 				}
 				}

+ 28 - 14
packages/ckeditor5-font/src/fontcolor.js

@@ -61,47 +61,61 @@ export default class FontColor extends Plugin {
  *				{
  *				{
  *					color: 'hsl(0, 0%, 0%)',
  *					color: 'hsl(0, 0%, 0%)',
  *					label: 'Black'
  *					label: 'Black'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 30%)',
  *					color: 'hsl(0, 0%, 30%)',
  *					label: 'Dim grey'
  *					label: 'Dim grey'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 60%)',
  *					color: 'hsl(0, 0%, 60%)',
  *					label: 'Grey'
  *					label: 'Grey'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 90%)',
  *					color: 'hsl(0, 0%, 90%)',
  *					label: 'Light grey'
  *					label: 'Light grey'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 0%, 100%)',
  *					color: 'hsl(0, 0%, 100%)',
  *					label: 'White',
  *					label: 'White',
  *					hasBorder: true
  *					hasBorder: true
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(0, 75%, 60%)',
  *					color: 'hsl(0, 75%, 60%)',
  *					label: 'Red'
  *					label: 'Red'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(30, 75%, 60%)',
  *					color: 'hsl(30, 75%, 60%)',
  *					label: 'Orange'
  *					label: 'Orange'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(60, 75%, 60%)',
  *					color: 'hsl(60, 75%, 60%)',
  *					label: 'Yellow'
  *					label: 'Yellow'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(90, 75%, 60%)',
  *					color: 'hsl(90, 75%, 60%)',
  *					label: 'Light green'
  *					label: 'Light green'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(120, 75%, 60%)',
  *					color: 'hsl(120, 75%, 60%)',
  *					label: 'Green'
  *					label: 'Green'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(150, 75%, 60%)',
  *					color: 'hsl(150, 75%, 60%)',
  *					label: 'Aquamarine'
  *					label: 'Aquamarine'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(180, 75%, 60%)',
  *					color: 'hsl(180, 75%, 60%)',
  *					label: 'Turquoise'
  *					label: 'Turquoise'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(210, 75%, 60%)',
  *					color: 'hsl(210, 75%, 60%)',
  *					label: 'Light blue'
  *					label: 'Light blue'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(240, 75%, 60%)',
  *					color: 'hsl(240, 75%, 60%)',
  *					label: 'Blue'
  *					label: 'Blue'
- *				}, {
+ *				},
+ *				{
  *					color: 'hsl(270, 75%, 60%)',
  *					color: 'hsl(270, 75%, 60%)',
  *					label: 'Purple'
  *					label: 'Purple'
  *				}
  *				}

+ 28 - 14
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -33,47 +33,61 @@ export default class FontColorEditing extends Plugin {
 				{
 				{
 					color: 'hsl(0, 0%, 0%)',
 					color: 'hsl(0, 0%, 0%)',
 					label: 'Black'
 					label: 'Black'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 30%)',
 					color: 'hsl(0, 0%, 30%)',
 					label: 'Dim grey'
 					label: 'Dim grey'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 60%)',
 					color: 'hsl(0, 0%, 60%)',
 					label: 'Grey'
 					label: 'Grey'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 90%)',
 					color: 'hsl(0, 0%, 90%)',
 					label: 'Light grey'
 					label: 'Light grey'
-				}, {
+				},
+				{
 					color: 'hsl(0, 0%, 100%)',
 					color: 'hsl(0, 0%, 100%)',
 					label: 'White',
 					label: 'White',
 					hasBorder: true
 					hasBorder: true
-				}, {
+				},
+				{
 					color: 'hsl(0, 75%, 60%)',
 					color: 'hsl(0, 75%, 60%)',
 					label: 'Red'
 					label: 'Red'
-				}, {
+				},
+				{
 					color: 'hsl(30, 75%, 60%)',
 					color: 'hsl(30, 75%, 60%)',
 					label: 'Orange'
 					label: 'Orange'
-				}, {
+				},
+				{
 					color: 'hsl(60, 75%, 60%)',
 					color: 'hsl(60, 75%, 60%)',
 					label: 'Yellow'
 					label: 'Yellow'
-				}, {
+				},
+				{
 					color: 'hsl(90, 75%, 60%)',
 					color: 'hsl(90, 75%, 60%)',
 					label: 'Light green'
 					label: 'Light green'
-				}, {
+				},
+				{
 					color: 'hsl(120, 75%, 60%)',
 					color: 'hsl(120, 75%, 60%)',
 					label: 'Green'
 					label: 'Green'
-				}, {
+				},
+				{
 					color: 'hsl(150, 75%, 60%)',
 					color: 'hsl(150, 75%, 60%)',
 					label: 'Aquamarine'
 					label: 'Aquamarine'
-				}, {
+				},
+				{
 					color: 'hsl(180, 75%, 60%)',
 					color: 'hsl(180, 75%, 60%)',
 					label: 'Turquoise'
 					label: 'Turquoise'
-				}, {
+				},
+				{
 					color: 'hsl(210, 75%, 60%)',
 					color: 'hsl(210, 75%, 60%)',
 					label: 'Light blue'
 					label: 'Light blue'
-				}, {
+				},
+				{
 					color: 'hsl(240, 75%, 60%)',
 					color: 'hsl(240, 75%, 60%)',
 					label: 'Blue'
 					label: 'Blue'
-				}, {
+				},
+				{
 					color: 'hsl(270, 75%, 60%)',
 					color: 'hsl(270, 75%, 60%)',
 					label: 'Purple'
 					label: 'Purple'
 				}
 				}

+ 24 - 21
packages/ckeditor5-font/src/ui/colorgrid.js

@@ -23,11 +23,12 @@ export default class ColorGrid extends View {
 	 * Creates an instance of a color grid containing {@link module:font/ui/colortile~ColorTile}.
 	 * Creates an instance of a color grid containing {@link module:font/ui/colortile~ColorTile}.
 	 *
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
-	 * @param {Object} config Configuration
-	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} colorsDefinition Array with definitions
-	 * required to build {@link module:font/ui/colortile~ColorTile}.
+	 * @param {Object} options Component configuration
+	 * @param {Array.<module:font/ui/colorgrid~ColorDefinition>} [options.colorsDefinition] Array with definitions
+	 * required to create the {@link module:font/ui/colortile~ColorTile tiles}.
+	 * @param {Number} options.colorColumns A number of columns to display the tiles.
 	 */
 	 */
-	constructor( locale, { colorsDefinition = [], colorColumns } = {} ) {
+	constructor( locale, options ) {
 		super( locale );
 		super( locale );
 
 
 		/**
 		/**
@@ -74,26 +75,28 @@ export default class ColorGrid extends View {
 			}
 			}
 		} );
 		} );
 
 
-		colorsDefinition.forEach( item => {
-			const colorTile = new ColorTile();
+		if ( options.colorsDefinition ) {
+			options.colorsDefinition.forEach( item => {
+				const colorTile = new ColorTile();
 
 
-			colorTile.set( {
-				color: item.color,
-				label: item.label,
-				tooltip: true,
-				hasBorder: item.options.hasBorder
-			} );
+				colorTile.set( {
+					color: item.color,
+					label: item.label,
+					tooltip: true,
+					hasBorder: item.options.hasBorder
+				} );
 
 
-			colorTile.on( 'execute', () => {
-				this.fire( 'execute', {
-					value: item.color,
-					hasBorder: item.options.hasBorder,
-					label: item.label
+				colorTile.on( 'execute', () => {
+					this.fire( 'execute', {
+						value: item.color,
+						hasBorder: item.options.hasBorder,
+						label: item.label
+					} );
 				} );
 				} );
-			} );
 
 
-			this.items.add( colorTile );
-		} );
+				this.items.add( colorTile );
+			} );
+		}
 
 
 		this.setTemplate( {
 		this.setTemplate( {
 			tag: 'div',
 			tag: 'div',
@@ -101,7 +104,7 @@ export default class ColorGrid extends View {
 			attributes: {
 			attributes: {
 				class: 'ck-color-table__grid-container',
 				class: 'ck-color-table__grid-container',
 				style: {
 				style: {
-					gridTemplateColumns: `repeat( ${ colorColumns }, 1fr)`
+					gridTemplateColumns: `repeat( ${ options.colorColumns }, 1fr)`
 				}
 				}
 			}
 			}
 		} );
 		} );

+ 7 - 30
packages/ckeditor5-font/src/ui/colorui.js

@@ -10,8 +10,8 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 import {
 import {
-	normalizeOptions,
-	addColorsToDropdown
+	addColorsToDropdown,
+	getLocalizedColorOptions
 } from '../utils';
 } from '../utils';
 
 
 /**
 /**
@@ -74,18 +74,18 @@ export default class ColorUI extends Plugin {
 		const editor = this.editor;
 		const editor = this.editor;
 		const t = editor.t;
 		const t = editor.t;
 		const command = editor.commands.get( this.commandName );
 		const command = editor.commands.get( this.commandName );
-		const options = this._getLocalizedOptions();
+		const options = getLocalizedColorOptions( editor, this.componentName );
 
 
 		// Register UI component.
 		// Register UI component.
 		editor.ui.componentFactory.add( this.componentName, locale => {
 		editor.ui.componentFactory.add( this.componentName, locale => {
 			const dropdownView = createDropdown( locale );
 			const dropdownView = createDropdown( locale );
 			const colorTableView = addColorsToDropdown( {
 			const colorTableView = addColorsToDropdown( {
 				dropdownView,
 				dropdownView,
-				colors: options.map( element => ( {
-					label: element.label,
-					color: element.model,
+				colors: options.map( option => ( {
+					label: option.label,
+					color: option.model,
 					options: {
 					options: {
-						hasBorder: element.hasBorder
+						hasBorder: option.hasBorder
 					}
 					}
 				} ) ),
 				} ) ),
 				colorColumns: this.colorColumns,
 				colorColumns: this.colorColumns,
@@ -124,27 +124,4 @@ export default class ColorUI extends Plugin {
 			return dropdownView;
 			return dropdownView;
 		} );
 		} );
 	}
 	}
-
-	/**
-	 * Returns options as defined in the `editor.config` but processed to account for
-	 * editor localization, i.e. to display {@link module:font/fontcolor~FontColorConfig}
-	 * or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig} in the correct language.
-	 *
-	 * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
-	 * when the user configuration is defined because the editor does not exist yet.
-	 *
-	 * @private
-	 * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorConfig>|Array.<module:font/fontcolor~FontColorConfig>}.
-	 */
-	_getLocalizedOptions() {
-		const editor = this.editor;
-		const t = editor.t;
-		const options = normalizeOptions( editor.config.get( `${ this.componentName }.colors` ) );
-
-		options.forEach( option => {
-			option.label = t( option.label );
-		} );
-
-		return options;
-	}
 }
 }

+ 43 - 0
packages/ckeditor5-font/src/utils.js

@@ -107,6 +107,49 @@ export function addColorsToDropdown( { dropdownView, colors, colorColumns, remov
 	return colorTableView;
 	return colorTableView;
 }
 }
 
 
+/**
+ * Returns configuration options as defined in the `editor.config[ featureName ]` but processed to account for
+ * editor localization, i.e. to display {@link module:font/fontcolor~FontColorConfig}
+ * or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig} in the correct language.
+ *
+ * Note: The reason behind this method is that there is no way to use {@link module:utils/locale~Locale#t}
+ * when the user configuration is defined because the editor does not exist yet.
+ *
+ * @param {module:core/editor/editor~Editor} editor An editor instance.
+ * @param {String} featureName Determines which config (`editor.config[ featureName ]`) colors to localize.
+ * @returns {Array.<module:font/fontbackgroundcolor~FontBackgroundColorConfig>|Array.<module:font/fontcolor~FontColorConfig>}.
+ */
+export function getLocalizedColorOptions( editor, featureName ) {
+	const t = editor.t;
+	const localizedColorNames = {
+		Black: t( 'Black' ),
+		'Dim grey': t( 'Dim grey' ),
+		Grey: t( 'Grey' ),
+		'Light grey': t( 'Light grey' ),
+		White: t( 'White' ),
+		Red: t( 'Red' ),
+		Orange: t( 'Orange' ),
+		Yellow: t( 'Yellow' ),
+		'Light green': t( 'Light green' ),
+		Green: t( 'Green' ),
+		Aquamarine: t( 'Aquamarine' ),
+		Turquoise: t( 'Turquoise' ),
+		'Light blue': t( 'Light blue' ),
+		Blue: t( 'Blue' ),
+		Purple: t( 'Purple' )
+	};
+
+	return normalizeOptions( editor.config.get( featureName ).colors ).map( colorOption => {
+		const label = localizedColorNames[ colorOption.label ];
+
+		if ( label && label != colorOption.label ) {
+			colorOption.label = label;
+		}
+
+		return colorOption;
+	} );
+}
+
 function normalizeSingleColorDefinition( color ) {
 function normalizeSingleColorDefinition( color ) {
 	if ( typeof color === 'string' ) {
 	if ( typeof color === 'string' ) {
 		return {
 		return {

+ 36 - 18
packages/ckeditor5-font/tests/fontbackgroundcolor/fontbackgroundcoloreditng.js

@@ -43,47 +43,61 @@ describe( 'FontBackgroundColorEditing', () => {
 					{
 					{
 						color: 'hsl(0, 0%, 0%)',
 						color: 'hsl(0, 0%, 0%)',
 						label: 'Black'
 						label: 'Black'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 30%)',
 						color: 'hsl(0, 0%, 30%)',
 						label: 'Dim grey'
 						label: 'Dim grey'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 60%)',
 						color: 'hsl(0, 0%, 60%)',
 						label: 'Grey'
 						label: 'Grey'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 90%)',
 						color: 'hsl(0, 0%, 90%)',
 						label: 'Light grey'
 						label: 'Light grey'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 100%)',
 						color: 'hsl(0, 0%, 100%)',
 						label: 'White',
 						label: 'White',
 						hasBorder: true
 						hasBorder: true
-					}, {
+					},
+					{
 						color: 'hsl(0, 75%, 60%)',
 						color: 'hsl(0, 75%, 60%)',
 						label: 'Red'
 						label: 'Red'
-					}, {
+					},
+					{
 						color: 'hsl(30, 75%, 60%)',
 						color: 'hsl(30, 75%, 60%)',
 						label: 'Orange'
 						label: 'Orange'
-					}, {
+					},
+					{
 						color: 'hsl(60, 75%, 60%)',
 						color: 'hsl(60, 75%, 60%)',
 						label: 'Yellow'
 						label: 'Yellow'
-					}, {
+					},
+					{
 						color: 'hsl(90, 75%, 60%)',
 						color: 'hsl(90, 75%, 60%)',
 						label: 'Light green'
 						label: 'Light green'
-					}, {
+					},
+					{
 						color: 'hsl(120, 75%, 60%)',
 						color: 'hsl(120, 75%, 60%)',
 						label: 'Green'
 						label: 'Green'
-					}, {
+					},
+					{
 						color: 'hsl(150, 75%, 60%)',
 						color: 'hsl(150, 75%, 60%)',
 						label: 'Aquamarine'
 						label: 'Aquamarine'
-					}, {
+					},
+					{
 						color: 'hsl(180, 75%, 60%)',
 						color: 'hsl(180, 75%, 60%)',
 						label: 'Turquoise'
 						label: 'Turquoise'
-					}, {
+					},
+					{
 						color: 'hsl(210, 75%, 60%)',
 						color: 'hsl(210, 75%, 60%)',
 						label: 'Light blue'
 						label: 'Light blue'
-					}, {
+					},
+					{
 						color: 'hsl(240, 75%, 60%)',
 						color: 'hsl(240, 75%, 60%)',
 						label: 'Blue'
 						label: 'Blue'
-					}, {
+					},
+					{
 						color: 'hsl(270, 75%, 60%)',
 						color: 'hsl(270, 75%, 60%)',
 						label: 'Purple'
 						label: 'Purple'
 					}
 					}
@@ -102,10 +116,12 @@ describe( 'FontBackgroundColorEditing', () => {
 						{
 						{
 							label: 'Color1',
 							label: 'Color1',
 							color: '#000'
 							color: '#000'
-						}, {
+						},
+						{
 							label: 'Color2',
 							label: 'Color2',
 							color: '#123456'
 							color: '#123456'
-						}, {
+						},
+						{
 							label: 'Color3',
 							label: 'Color3',
 							color: 'rgb( 0, 10, 20 )'
 							color: 'rgb( 0, 10, 20 )'
 						},
 						},
@@ -155,10 +171,12 @@ describe( 'FontBackgroundColorEditing', () => {
 							{
 							{
 								label: 'Color1',
 								label: 'Color1',
 								color: '#000'
 								color: '#000'
-							}, {
+							},
+							{
 								label: 'Color2',
 								label: 'Color2',
 								color: '#123456'
 								color: '#123456'
-							}, {
+							},
+							{
 								label: 'Color3',
 								label: 'Color3',
 								color: 'rgb( 0, 10, 20 )'
 								color: 'rgb( 0, 10, 20 )'
 							},
 							},

+ 36 - 18
packages/ckeditor5-font/tests/fontcolor/fontcolorediting.js

@@ -42,47 +42,61 @@ describe( 'FontColorEditing', () => {
 					{
 					{
 						color: 'hsl(0, 0%, 0%)',
 						color: 'hsl(0, 0%, 0%)',
 						label: 'Black'
 						label: 'Black'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 30%)',
 						color: 'hsl(0, 0%, 30%)',
 						label: 'Dim grey'
 						label: 'Dim grey'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 60%)',
 						color: 'hsl(0, 0%, 60%)',
 						label: 'Grey'
 						label: 'Grey'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 90%)',
 						color: 'hsl(0, 0%, 90%)',
 						label: 'Light grey'
 						label: 'Light grey'
-					}, {
+					},
+					{
 						color: 'hsl(0, 0%, 100%)',
 						color: 'hsl(0, 0%, 100%)',
 						label: 'White',
 						label: 'White',
 						hasBorder: true
 						hasBorder: true
-					}, {
+					},
+					{
 						color: 'hsl(0, 75%, 60%)',
 						color: 'hsl(0, 75%, 60%)',
 						label: 'Red'
 						label: 'Red'
-					}, {
+					},
+					{
 						color: 'hsl(30, 75%, 60%)',
 						color: 'hsl(30, 75%, 60%)',
 						label: 'Orange'
 						label: 'Orange'
-					}, {
+					},
+					{
 						color: 'hsl(60, 75%, 60%)',
 						color: 'hsl(60, 75%, 60%)',
 						label: 'Yellow'
 						label: 'Yellow'
-					}, {
+					},
+					{
 						color: 'hsl(90, 75%, 60%)',
 						color: 'hsl(90, 75%, 60%)',
 						label: 'Light green'
 						label: 'Light green'
-					}, {
+					},
+					{
 						color: 'hsl(120, 75%, 60%)',
 						color: 'hsl(120, 75%, 60%)',
 						label: 'Green'
 						label: 'Green'
-					}, {
+					},
+					{
 						color: 'hsl(150, 75%, 60%)',
 						color: 'hsl(150, 75%, 60%)',
 						label: 'Aquamarine'
 						label: 'Aquamarine'
-					}, {
+					},
+					{
 						color: 'hsl(180, 75%, 60%)',
 						color: 'hsl(180, 75%, 60%)',
 						label: 'Turquoise'
 						label: 'Turquoise'
-					}, {
+					},
+					{
 						color: 'hsl(210, 75%, 60%)',
 						color: 'hsl(210, 75%, 60%)',
 						label: 'Light blue'
 						label: 'Light blue'
-					}, {
+					},
+					{
 						color: 'hsl(240, 75%, 60%)',
 						color: 'hsl(240, 75%, 60%)',
 						label: 'Blue'
 						label: 'Blue'
-					}, {
+					},
+					{
 						color: 'hsl(270, 75%, 60%)',
 						color: 'hsl(270, 75%, 60%)',
 						label: 'Purple'
 						label: 'Purple'
 					}
 					}
@@ -101,10 +115,12 @@ describe( 'FontColorEditing', () => {
 						{
 						{
 							label: 'Color1',
 							label: 'Color1',
 							color: '#000'
 							color: '#000'
-						}, {
+						},
+						{
 							label: 'Color2',
 							label: 'Color2',
 							color: '#123456'
 							color: '#123456'
-						}, {
+						},
+						{
 							label: 'Color3',
 							label: 'Color3',
 							color: 'rgb( 0, 10, 20 )'
 							color: 'rgb( 0, 10, 20 )'
 						},
 						},
@@ -153,10 +169,12 @@ describe( 'FontColorEditing', () => {
 							{
 							{
 								label: 'Color1',
 								label: 'Color1',
 								color: '#000'
 								color: '#000'
-							}, {
+							},
+							{
 								label: 'Color2',
 								label: 'Color2',
 								color: '#123456'
 								color: '#123456'
-							}, {
+							},
+							{
 								label: 'Color3',
 								label: 'Color3',
 								color: 'rgb( 0, 10, 20 )'
 								color: 'rgb( 0, 10, 20 )'
 							},
 							},

+ 4 - 2
packages/ckeditor5-font/tests/ui/colorgrid.js

@@ -23,13 +23,15 @@ describe( 'ColorGrid', () => {
 			options: {
 			options: {
 				hasBorder: false
 				hasBorder: false
 			}
 			}
-		}, {
+		},
+		{
 			color: 'rgb(255, 255, 255)',
 			color: 'rgb(255, 255, 255)',
 			label: 'White',
 			label: 'White',
 			options: {
 			options: {
 				hasBorder: true
 				hasBorder: true
 			}
 			}
-		}, {
+		},
+		{
 			color: 'red',
 			color: 'red',
 			label: 'Red',
 			label: 'Red',
 			options: {
 			options: {

+ 6 - 6
packages/ckeditor5-font/tests/ui/colortableview.js

@@ -12,7 +12,6 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
 import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
-
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 
 describe( 'ColorTableView', () => {
 describe( 'ColorTableView', () => {
@@ -25,7 +24,8 @@ describe( 'ColorTableView', () => {
 			options: {
 			options: {
 				hasBorder: false
 				hasBorder: false
 			}
 			}
-		}, {
+		},
+		{
 			color: 'rgb(255, 255, 255)',
 			color: 'rgb(255, 255, 255)',
 			label: 'White',
 			label: 'White',
 			options: {
 			options: {
@@ -45,7 +45,7 @@ describe( 'ColorTableView', () => {
 		colorTableView = new ColorTableView( locale, {
 		colorTableView = new ColorTableView( locale, {
 			colors: colorsDefinition,
 			colors: colorsDefinition,
 			colorColumns: 5,
 			colorColumns: 5,
-			removeButtonTooltip: 'Remove color'
+			removeButtonLabel: 'Remove color'
 		} );
 		} );
 		colorTableView.render();
 		colorTableView.render();
 	} );
 	} );
@@ -73,11 +73,11 @@ describe( 'ColorTableView', () => {
 			expect( colorTableView.selectedColor ).to.equal( 'white' );
 			expect( colorTableView.selectedColor ).to.equal( 'white' );
 		} );
 		} );
 
 
-		it( 'keep tooltip for remove color button', () => {
-			expect( colorTableView.removeButtonTooltip ).to.equal( 'Remove color' );
+		it( 'sets tooltip for the remove color button', () => {
+			expect( colorTableView.removeButtonLabel ).to.equal( 'Remove color' );
 		} );
 		} );
 
 
-		it( 'keep number of drawed columns', () => {
+		it( 'sets number of drawed columns', () => {
 			expect( colorTableView.colorColumns ).to.equal( 5 );
 			expect( colorTableView.colorColumns ).to.equal( 5 );
 		} );
 		} );
 
 

+ 26 - 31
packages/ckeditor5-font/tests/ui/colorui.js

@@ -19,7 +19,7 @@ describe( 'ColorUI', () => {
 				commandName: 'testColorCommand',
 				commandName: 'testColorCommand',
 				componentName: 'testColor',
 				componentName: 'testColor',
 				icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>',
 				icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>',
-				dropdownLabel: 'Test Color'
+				dropdownLabel: editor.locale.t( 'Test Color' )
 			} );
 			} );
 
 
 			editor.commands.add( 'testColorCommand', new FontColorCommand( editor ) );
 			editor.commands.add( 'testColorCommand', new FontColorCommand( editor ) );
@@ -43,7 +43,7 @@ describe( 'ColorUI', () => {
 			},
 			},
 			{
 			{
 				color: 'red',
 				color: 'red',
-				label: 'RED'
+				label: 'Red'
 			},
 			},
 			{
 			{
 				color: '#00FF00',
 				color: '#00FF00',
@@ -57,21 +57,12 @@ describe( 'ColorUI', () => {
 	testUtils.createSinonSandbox();
 	testUtils.createSinonSandbox();
 
 
 	before( () => {
 	before( () => {
-		addTranslations( 'en', {
-			'Test Color': 'Test Color',
-			'Remove color': 'Remove color',
-			'yellow': 'yellow',
-			'White': 'White',
-			'RED': 'RED',
-			'Green': 'Green'
-		} );
-
 		addTranslations( 'pl', {
 		addTranslations( 'pl', {
-			'Test Color': 'Testowy plugin do kolorów',
+			'Test Color': 'Testowy plugin',
 			'Remove color': 'Usuń kolor',
 			'Remove color': 'Usuń kolor',
-			'yellow': 'żółty',
+			'Yellow': 'Żółty',
 			'White': 'Biały',
 			'White': 'Biały',
-			'RED': 'CZERWONY',
+			'Red': 'Czerwony',
 			'Green': 'Zielony'
 			'Green': 'Zielony'
 		} );
 		} );
 	} );
 	} );
@@ -117,7 +108,7 @@ describe( 'ColorUI', () => {
 		} );
 		} );
 
 
 		it( 'has assigned proper dropdownLabel', () => {
 		it( 'has assigned proper dropdownLabel', () => {
-			expect( testColorPlugin.dropdownLabel ).to.equal( 'Test Color' );
+			expect( testColorPlugin.dropdownLabel ).to.equal( 'Testowy plugin' );
 		} );
 		} );
 
 
 		it( 'has assigned proper amount of columns', () => {
 		it( 'has assigned proper amount of columns', () => {
@@ -137,7 +128,7 @@ describe( 'ColorUI', () => {
 		it( 'button has the base properties', () => {
 		it( 'button has the base properties', () => {
 			const button = dropdown.buttonView;
 			const button = dropdown.buttonView;
 
 
-			expect( button ).to.have.property( 'label', 'Test Color' );
+			expect( button ).to.have.property( 'label', 'Testowy plugin' );
 			expect( button ).to.have.property( 'tooltip', true );
 			expect( button ).to.have.property( 'tooltip', true );
 			expect( button ).to.have.property( 'icon', '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>' );
 			expect( button ).to.have.property( 'icon', '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"></svg>' );
 		} );
 		} );
@@ -194,19 +185,28 @@ describe( 'ColorUI', () => {
 		} );
 		} );
 
 
 		describe( 'localization', () => {
 		describe( 'localization', () => {
+			let editor, editorElement;
+
 			beforeEach( () => {
 			beforeEach( () => {
-				return createLocalizedEditor();
+				editorElement = document.createElement( 'div' );
+				document.body.appendChild( editorElement );
+
+				return createLocalizedEditor( editorElement )
+					.then( localizedEditor => {
+						editor = localizedEditor;
+					} );
 			} );
 			} );
 
 
-			it( 'works for the #buttonView', () => {
-				const buttonView = dropdown.buttonView;
+			afterEach( () => {
+				editorElement.remove();
 
 
-				expect( buttonView.label ).to.equal( 'Testowy plugin do kolorów' );
+				return editor.destroy();
 			} );
 			} );
 
 
 			it( 'works for the colorTableView#items in the panel', () => {
 			it( 'works for the colorTableView#items in the panel', () => {
 				const colorTableView = dropdown.colorTableView;
 				const colorTableView = dropdown.colorTableView;
-				expect( colorTableView.removeButtonTooltip ).to.equal( 'Usuń kolor' );
+
+				expect( colorTableView.removeButtonLabel ).to.equal( 'Usuń kolor' );
 				expect( colorTableView.items.first.label ).to.equal( 'Usuń kolor' );
 				expect( colorTableView.items.first.label ).to.equal( 'Usuń kolor' );
 			} );
 			} );
 
 
@@ -214,7 +214,7 @@ describe( 'ColorUI', () => {
 				const colors = [
 				const colors = [
 					{
 					{
 						color: 'yellow',
 						color: 'yellow',
-						label: 'żółty'
+						label: 'yellow'
 					},
 					},
 					{
 					{
 						color: '#000',
 						color: '#000',
@@ -226,7 +226,7 @@ describe( 'ColorUI', () => {
 					},
 					},
 					{
 					{
 						color: 'red',
 						color: 'red',
-						label: 'CZERWONY'
+						label: 'Czerwony'
 					},
 					},
 					{
 					{
 						color: '#00FF00',
 						color: '#00FF00',
@@ -235,7 +235,7 @@ describe( 'ColorUI', () => {
 				];
 				];
 
 
 				colors.forEach( test => {
 				colors.forEach( test => {
-					it( `tested color ${ test.color } with name ${ test.label }.`, () => {
+					it( `tested color "${ test.color }" translated to "${ test.label }".`, () => {
 						const colorGrid = dropdown.colorTableView.items.get( 1 );
 						const colorGrid = dropdown.colorTableView.items.get( 1 );
 						const tile = colorGrid.items.find( colorTile => test.color === colorTile.color );
 						const tile = colorGrid.items.find( colorTile => test.color === colorTile.color );
 
 
@@ -244,10 +244,7 @@ describe( 'ColorUI', () => {
 				} );
 				} );
 			} );
 			} );
 
 
-			function createLocalizedEditor() {
-				const editorElement = document.createElement( 'div' );
-				document.body.appendChild( editorElement );
-
+			function createLocalizedEditor( editorElement ) {
 				return ClassicTestEditor
 				return ClassicTestEditor
 					.create( editorElement, {
 					.create( editorElement, {
 						plugins: [ TestColorPlugin ],
 						plugins: [ TestColorPlugin ],
@@ -260,9 +257,7 @@ describe( 'ColorUI', () => {
 						dropdown = editor.ui.componentFactory.create( 'testColor' );
 						dropdown = editor.ui.componentFactory.create( 'testColor' );
 						command = editor.commands.get( 'testColorCommand' );
 						command = editor.commands.get( 'testColorCommand' );
 
 
-						editorElement.remove();
-
-						return editor.destroy();
+						return editor;
 					} );
 					} );
 			}
 			}
 		} );
 		} );

+ 12 - 6
packages/ckeditor5-font/tests/utils.js

@@ -19,14 +19,17 @@ describe( 'utils', () => {
 				'black',
 				'black',
 				{
 				{
 					color: 'black'
 					color: 'black'
-				}, {
+				},
+				{
 					color: 'black',
 					color: 'black',
 					label: 'Black'
 					label: 'Black'
-				}, {
+				},
+				{
 					color: 'black',
 					color: 'black',
 					label: 'Black',
 					label: 'Black',
 					hasBorder: true
 					hasBorder: true
-				}, {
+				},
+				{
 					color: 'black',
 					color: 'black',
 					hasBorder: true
 					hasBorder: true
 				}
 				}
@@ -44,7 +47,8 @@ describe( 'utils', () => {
 						},
 						},
 						priority: 5
 						priority: 5
 					}
 					}
-				}, {
+				},
+				{
 					model: 'black',
 					model: 'black',
 					label: 'black',
 					label: 'black',
 					hasBorder: false,
 					hasBorder: false,
@@ -55,7 +59,8 @@ describe( 'utils', () => {
 						},
 						},
 						priority: 5
 						priority: 5
 					}
 					}
-				}, {
+				},
+				{
 					model: 'black',
 					model: 'black',
 					label: 'Black',
 					label: 'Black',
 					hasBorder: false,
 					hasBorder: false,
@@ -107,7 +112,8 @@ describe( 'utils', () => {
 						options: {
 						options: {
 							hasBorder: false
 							hasBorder: false
 						}
 						}
-					}, {
+					},
+					{
 						label: 'White',
 						label: 'White',
 						color: '#FFFFFF',
 						color: '#FFFFFF',
 						options: {
 						options: {