Skip to content
This repository has been archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #59 from ckeditor/i/6106
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@jodator
jodator authored Feb 12, 2020
2 parents 02cedc8 + 387d6c2 commit c3e7673
Show file tree
Hide file tree
Showing 3 changed files with 5 additions and 204 deletions.
12 changes: 5 additions & 7 deletions src/ui/colorui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
88 changes: 0 additions & 88 deletions src/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand All @@ -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 }`
}
}
};
}
}
109 changes: 0 additions & 109 deletions tests/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import {
FONT_COLOR,
FONT_BACKGROUND_COLOR,
normalizeColorOptions,
addColorTableToDropdown,
renderDowncastElement
} from './../src/utils';
Expand All @@ -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();
Expand Down

0 comments on commit c3e7673

Please sign in to comment.