Merge pull request #59 from ckeditor/i/6106

Other: Moved `normalizeColorOptions()` and `getLocalizedColorOptions()` to `ckeditor5-ui` (see ckeditor/ckeditor5/issues/6106). MINOR BREAKING CHANGE: `normalizeColorOptions()` and `getLocalizedColorOptions()` are no longer available in this package. You can import them from `@ckeditor/ckeditor5-ui/src/colorgrid/utils` instead.
ckeditor · Feb 12, 2020 · c3e7673 · c3e7673
2 parents 02cedc8 + 387d6c2
commit c3e7673
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 204 deletions.
diff --git 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
@@ -87,19 +87,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.<module:ui/colorgrid/colorgrid~ColorDefinition>}
- */
-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.
  *
@@ -125,85 +112,10 @@ 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.<module:ui/colorgrid/colorgrid~ColorDefinition>} options
- * @returns {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>}.
- */
-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
@@ -6,7 +6,6 @@
 import {
  FONT_COLOR,
  FONT_BACKGROUND_COLOR,
- normalizeColorOptions,
  addColorTableToDropdown,
  renderDowncastElement
 } from './../src/utils';
@@ -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();