From 762384272f84e9096b9902b267fad8685d8ffd6b Mon Sep 17 00:00:00 2001 From: panr Date: Tue, 11 Feb 2020 10:27:20 +0100 Subject: [PATCH 1/3] Fix paths and move some of the tests after moving color normalization utils to color grid utils --- src/ui/colorui.js | 12 +++-- src/utils.js | 97 +--------------------------------------- tests/utils.js | 111 +--------------------------------------------- 3 files changed, 7 insertions(+), 213 deletions(-) diff --git a/src/ui/colorui.js b/src/ui/colorui.js index 954826e..88a8759 100644 --- a/src/ui/colorui.js +++ b/src/ui/colorui.js @@ -9,11 +9,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; -import { - addColorTableToDropdown, - normalizeColorOptions, - getLocalizedColorOptions -} from '../utils'; +import { normalizeColorOptions, getLocalizedColorOptions } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils'; +import { addColorTableToDropdown } from '../utils'; /** * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids. @@ -86,10 +83,11 @@ export default class ColorUI extends Plugin { */ init() { const editor = this.editor; - const t = editor.t; + const locale = editor.locale; + const t = locale.t; const command = editor.commands.get( this.commandName ); const colorsConfig = normalizeColorOptions( editor.config.get( this.componentName ).colors ); - const localizedColors = getLocalizedColorOptions( editor, colorsConfig ); + const localizedColors = getLocalizedColorOptions( locale, colorsConfig ); const documentColorsCount = editor.config.get( `${ this.componentName }.documentColors` ); // Register the UI component. diff --git a/src/utils.js b/src/utils.js index eafb411..7b0e1a1 100644 --- a/src/utils.js +++ b/src/utils.js @@ -8,6 +8,7 @@ */ import ColorTableView from './ui/colortableview'; +import { normalizeColorCode } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils'; /** * The name of the font size plugin. @@ -87,19 +88,6 @@ export function renderDowncastElement( styleAttr ) { }, { priority: 7 } ); } -/** - * Creates a unified color definition object from color configuration options. - * The object contains the information necessary to both render the UI and initialize the conversion. - * - * @param {module:ui/colorgrid/colorgrid~ColorDefinition} options - * @returns {Array.} - */ -export function normalizeColorOptions( options ) { - return options - .map( normalizeSingleColorDefinition ) - .filter( option => !!option ); -} - /** * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values. * @@ -124,86 +112,3 @@ export function addColorTableToDropdown( { dropdownView, colors, columns, remove return colorTableView; } - -/** - * Returns color configuration options as defined in `editor.config.(fontColor|fontBackgroundColor).colors` - * 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 {Array.} options - * @returns {Array.}. - */ -export function getLocalizedColorOptions( editor, options ) { - 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 options.map( colorOption => { - const label = localizedColorNames[ colorOption.label ]; - - if ( label && label != colorOption.label ) { - colorOption.label = label; - } - - return colorOption; - } ); -} - -// Fixes the color value string. -// -// @param {String} value -// @returns {String} -function normalizeColorCode( value ) { - return value.replace( /\s/g, '' ); -} - -// Creates a normalized color definition from the user-defined configuration. -// -// @param {String|module:ui/colorgrid/colorgrid~ColorDefinition} -// @returns {module:ui/colorgrid/colorgrid~ColorDefinition} -function normalizeSingleColorDefinition( color ) { - if ( typeof color === 'string' ) { - return { - model: color.replace( / /g, '' ), - label: color, - hasBorder: false, - view: { - name: 'span', - styles: { - color - } - } - }; - } else { - return { - model: color.color.replace( / /g, '' ), - label: color.label || color.color, - hasBorder: color.hasBorder === undefined ? false : color.hasBorder, - view: { - name: 'span', - styles: { - color: `${ color.color }` - } - } - }; - } -} diff --git a/tests/utils.js b/tests/utils.js index fa0ed36..9c4498c 100644 --- a/tests/utils.js +++ b/tests/utils.js @@ -6,7 +6,6 @@ import { FONT_COLOR, FONT_BACKGROUND_COLOR, - normalizeColorOptions, addColorTableToDropdown, renderDowncastElement } from './../src/utils'; @@ -14,7 +13,7 @@ import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ColorTableView from './../src/ui/colortableview'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; -describe( 'utils', () => { +describe.only( 'utils', () => { testUtils.createSinonSandbox(); it( 'plugin names has proper values', () => { @@ -22,114 +21,6 @@ describe( 'utils', () => { expect( FONT_BACKGROUND_COLOR ).to.equal( 'fontBackgroundColor' ); } ); - describe( 'normalizeColorOptions()', () => { - it( 'should return normalized config object from string', () => { - const normalizedOption = normalizeColorOptions( [ 'black' ] ); - - expect( normalizedOption ).to.deep.equal( [ - { - model: 'black', - label: 'black', - hasBorder: false, - view: { - name: 'span', - styles: { - color: 'black' - } - } - } - ] ); - } ); - - it( 'should return normalized config object from object( color )', () => { - const normalizedOption = normalizeColorOptions( [ { color: 'black' } ] ); - - expect( normalizedOption ).to.deep.equal( [ - { - model: 'black', - label: 'black', - hasBorder: false, - view: { - name: 'span', - styles: { - color: 'black' - } - } - } - ] ); - } ); - - it( 'should return normalized config object from object( color, label )', () => { - const normalizedOption = normalizeColorOptions( [ - { - color: 'black', - label: 'Black' - } - ] ); - - expect( normalizedOption ).to.deep.equal( [ - { - model: 'black', - label: 'Black', - hasBorder: false, - view: { - name: 'span', - styles: { - color: 'black' - } - } - } - ] ); - } ); - - it( 'should return normalized config object from object( color, label, hasBorder )', () => { - const normalizedOption = normalizeColorOptions( [ - { - color: 'black', - label: 'Black', - hasBorder: true - } - ] ); - - expect( normalizedOption ).to.deep.equal( [ - { - model: 'black', - label: 'Black', - hasBorder: true, - view: { - name: 'span', - styles: { - color: 'black' - } - } - } - ] ); - } ); - - it( 'should return normalized config object from object( color, hasBorder )', () => { - const normalizedOption = normalizeColorOptions( [ - { - color: 'black', - hasBorder: true - } - ] ); - - expect( normalizedOption ).to.deep.equal( [ - { - model: 'black', - label: 'black', - hasBorder: true, - view: { - name: 'span', - styles: { - color: 'black' - } - } - } - ] ); - } ); - } ); - describe( 'addColorTableToDropdown()', () => { it( 'should create dropdown with color table', () => { const dropdown = createDropdown(); From 8f1935d51322caf6eb4a577475a1a054265b70f9 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 09:31:29 +0100 Subject: [PATCH 2/3] Tests: Removed .only(). --- tests/utils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/utils.js b/tests/utils.js index 9c4498c..d79922f 100644 --- a/tests/utils.js +++ b/tests/utils.js @@ -13,7 +13,7 @@ import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; import ColorTableView from './../src/ui/colortableview'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; -describe.only( 'utils', () => { +describe( 'utils', () => { testUtils.createSinonSandbox(); it( 'plugin names has proper values', () => { From 387d6c266066d8d13267f60e0d24c6ea802fcedd Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 12 Feb 2020 09:35:32 +0100 Subject: [PATCH 3/3] Moved normalizeColorCode() helper from ckeditor5-ui. --- src/utils.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/utils.js b/src/utils.js index 7b0e1a1..67147c8 100644 --- a/src/utils.js +++ b/src/utils.js @@ -8,7 +8,6 @@ */ import ColorTableView from './ui/colortableview'; -import { normalizeColorCode } from '@ckeditor/ckeditor5-ui/src/colorgrid/utils'; /** * The name of the font size plugin. @@ -112,3 +111,11 @@ export function addColorTableToDropdown( { dropdownView, colors, columns, remove return colorTableView; } + +// Fixes the color value string. +// +// @param {String} value +// @returns {String} +function normalizeColorCode( value ) { + return value.replace( /\s/g, '' ); +}