@ckeditor/ckeditor5-font - npm Package Compare versions

Comparing version 11.0.0 to 11.1.0

CHANGELOG.md

 Changelog
 =========
 
+## [11.1.0](https://github.com/ckeditor/ckeditor5-font/compare/v11.0.0...v11.1.0) (2019-04-10)
+
+### Features
+
+* Introduced font color and font background color features. Closes [ckeditor/ckeditor5#1457](https://github.com/ckeditor/ckeditor5/issues/1457). ([c456b2a](https://github.com/ckeditor/ckeditor5-font/commit/c456b2a))
+* Marked font size and font family as a formatting attribute using the `AttributeProperties#isFormatting` property. Closes [ckeditor/ckeditor5#1664](https://github.com/ckeditor/ckeditor5/issues/1664). ([d9f0a51](https://github.com/ckeditor/ckeditor5-font/commit/d9f0a51))
+
+### Other changes
+
+* Optimized icons. ([47ca23f](https://github.com/ckeditor/ckeditor5-font/commit/47ca23f))
+* Updated translations. ([6f3332f](https://github.com/ckeditor/ckeditor5-font/commit/6f3332f)) ([f756b70](https://github.com/ckeditor/ckeditor5-font/commit/f756b70))
+
+
 ## [11.0.0](https://github.com/ckeditor/ckeditor5-font/compare/v10.0.4...v11.0.0) (2019-02-28)
@@ -5,0 +18,0 @@

lang/contexts.json

@@ -8,3 +8,21 @@ {
 	"Font Family": "Tooltip for the font family dropdown.",
-	"Default": "Dropdown option label for the default font family."
+	"Default": "Dropdown option label for the default font family.",
+	"Font Color": "Label of a button that allows selecting a font color.",
+	"Font Background Color": "Label of a button that allows selecting a font background color.",
+	"Remove color": "Label or a button that removes the color from the text (font color and background).",
+	"Black": "Label of a button that applies a black text color (font color and background)",
+	"Dim grey": "Label of a button that applies a dim grey text color (font color and background)",
+	"Grey": "Label of a button that applies a grey text color (font color and background)",
+	"Light grey": "Label of a button that applies a light grey text color (font color and background)",
+	"White": "Label of a button that applies a white text color (font color and background)",
+	"Red": "Label of a button that applies a red text color (font color and background)",
+	"Orange": "Label of a button that applies a orange text color (font color and background)",
+	"Yellow": "Label of a button that applies a yellow text color (font color and background)",
+	"Light green": "Label of a button that applies a light green text color (font color and background)",
+	"Green": "Label of a button that applies a green text color (font color and background)",
+	"Aquamarine": "Label of a button that applies a aquamarine text color (font color and background)",
+	"Turquoise": "Label of a button that applies a turquoise text color (font color and background)",
+	"Light blue": "Label of a button that applies a light blue text color (font color and background)",
+	"Blue": "Label of a button that applies a blue text color (font color and background)",
+	"Purple": "Label of a button that applies a purple text color (font color and background)"
 }

package.json

 {
   "name": "@ckeditor/ckeditor5-font",
-  "version": "11.0.0",
+  "version": "11.1.0",
   "description": "Font feature for CKEditor 5.",
@@ -13,12 +13,11 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.0.0",
-    "@ckeditor/ckeditor5-ui": "^12.0.0",
-    "@ckeditor/ckeditor5-utils": "^12.0.0"
+    "@ckeditor/ckeditor5-core": "^12.1.0",
+    "@ckeditor/ckeditor5-ui": "^12.1.0",
+    "@ckeditor/ckeditor5-utils": "^12.1.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-cloud-services": "^11.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^12.0.0",
-    "@ckeditor/ckeditor5-engine": "^13.0.0",
-    "@ckeditor/ckeditor5-highlight": "^11.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-engine": "^13.1.0",
+    "@ckeditor/ckeditor5-highlight": "^11.0.1",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.1",
     "eslint": "^5.5.0",
@@ -25,0 +24,0 @@ "eslint-config-ckeditor5": "^1.0.11",

README.md

@@ -13,4 +13,9 @@ CKEditor 5 font feature
 
-This package implements font size and font family support for CKEditor 5.
+This package implements support for the following CKEditor 5 features:
 
+* font size,
+* font family,
+* font color,
+* font background color.
+
 ## Demo
@@ -17,0 +22,0 @@

src/font.js

@@ -14,2 +14,4 @@ /**
 import FontSize from './fontsize';
+import FontColor from './fontcolor';
+import FontBackgroundColor from './fontbackgroundcolor';
 
@@ -21,2 +23,4 @@ /**
  * * {@link module:font/fontfamily~FontFamily}.
+ * * {@link module:font/fontcolor~FontColor},
+ * * {@link module:font/fontbackgroundcolor~FontBackgroundColor}.
  *
@@ -33,3 +37,3 @@ * For a detailed overview, check the {@glink features/font Font feature} documentation
 	static get requires() {
-		return [ FontFamily, FontSize ];
+		return [ FontFamily, FontSize, FontColor, FontBackgroundColor ];
 	}
@@ -36,0 +40,0 @@

src/fontfamily/fontfamilycommand.js

@@ -11,2 +11,3 @@ /**
 import FontCommand from '../fontcommand';
+import { FONT_FAMILY } from '../utils';
 
@@ -28,4 +29,4 @@ /**
 	constructor( editor ) {
-		super( editor, 'fontFamily' );
+		super( editor, FONT_FAMILY );
 	}
 }

src/fontfamily/fontfamilyediting.js

@@ -14,6 +14,4 @@ /**
 import { normalizeOptions } from './utils';
-import { buildDefinition } from '../utils';
+import { buildDefinition, FONT_FAMILY } from '../utils';
 
-const FONT_FAMILY = 'fontFamily';
-
 /**
@@ -60,2 +58,3 @@ * The font family editing feature.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_FAMILY } );
+		editor.model.schema.setAttributeProperties( FONT_FAMILY, { isFormatting: true } );
 
@@ -62,0 +61,0 @@ // Get configured font family options without "default" option.

src/fontfamily/fontfamilyui.js

@@ -16,2 +16,3 @@ /**
 import { normalizeOptions } from './utils';
+import { FONT_FAMILY } from '../utils';
 import fontFamilyIcon from '../../theme/icons/font-family.svg';
@@ -34,6 +35,6 @@
 
-		const command = editor.commands.get( 'fontFamily' );
+		const command = editor.commands.get( FONT_FAMILY );
 
 		// Register UI component.
-		editor.ui.componentFactory.add( 'fontFamily', locale => {
+		editor.ui.componentFactory.add( FONT_FAMILY, locale => {
 			const dropdownView = createDropdown( locale );
@@ -81,3 +82,3 @@ addListToDropdown( dropdownView, _prepareListOptions( options, command ) );
 
-		const options = normalizeOptions( editor.config.get( 'fontFamily.options' ) );
+		const options = normalizeOptions( editor.config.get( FONT_FAMILY ).options );
 
@@ -107,3 +108,3 @@ return options.map( option => {
 			model: new Model( {
-				commandName: 'fontFamily',
+				commandName: FONT_FAMILY,
 				commandParam: option.model,
@@ -110,0 +111,0 @@ label: option.title,

src/fontsize/fontsizecommand.js

@@ -11,2 +11,3 @@ /**
 import FontCommand from '../fontcommand';
+import { FONT_SIZE } from '../utils';
 
@@ -28,4 +29,4 @@ /**
 	constructor( editor ) {
-		super( editor, 'fontSize' );
+		super( editor, FONT_SIZE );
 	}
 }

src/fontsize/fontsizeediting.js

@@ -14,6 +14,4 @@ /**
 import { normalizeOptions } from './utils';
-import { buildDefinition } from '../utils';
+import { buildDefinition, FONT_SIZE } from '../utils';
 
-const FONT_SIZE = 'fontSize';
-
 /**
@@ -69,3 +67,4 @@ * The font size editing feature.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_SIZE } );
+		editor.model.schema.setAttributeProperties( FONT_SIZE, { isFormatting: true } );
 	}
 }

src/fontsize/fontsizeui.js

@@ -15,3 +15,4 @@ /**
 import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-import { normalizeOptions } from '../fontsize/utils';
+import { normalizeOptions } from './utils';
+import { FONT_SIZE } from '../utils';
 
@@ -36,6 +37,6 @@ import fontSizeIcon from '../../theme/icons/font-size.svg';
 
-		const command = editor.commands.get( 'fontSize' );
+		const command = editor.commands.get( FONT_SIZE );
 
 		// Register UI component.
-		editor.ui.componentFactory.add( 'fontSize', locale => {
+		editor.ui.componentFactory.add( FONT_SIZE, locale => {
 			const dropdownView = createDropdown( locale );
@@ -94,3 +95,3 @@ addListToDropdown( dropdownView, _prepareListOptions( options, command ) );
 
-		const options = normalizeOptions( editor.config.get( 'fontSize.options' ) );
+		const options = normalizeOptions( editor.config.get( FONT_SIZE ).options );
 
@@ -121,3 +122,3 @@ return options.map( option => {
 			model: new Model( {
-				commandName: 'fontSize',
+				commandName: FONT_SIZE,
 				commandParam: option.model,
@@ -124,0 +125,0 @@ label: option.title,

src/utils.js

@@ -10,3 +10,25 @@ /**
 
+import ColorTableView from './ui/colortableview';
+
 /**
+ * Name of the font size plugin.
+ */
+export const FONT_SIZE = 'fontSize';
+
+/**
+ * Name of the font family plugin.
+ */
+export const FONT_FAMILY = 'fontFamily';
+
+/**
+ * Name of the font color plugin.
+ */
+export const FONT_COLOR = 'fontColor';
+
+/**
+ * Name of font font background color plugin.
+ */
+export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
+
+/**
  * Builds a proper {@link module:engine/conversion/conversion~ConverterDefinition converter definition} out of input data.
@@ -39,1 +61,151 @@ *
 }
+
+/**
+ * A {@link module:font/fontcolor~FontColor font color} and
+ * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
+ * responsible for upcasting data to model.
+ *
+ * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
+ *
+ * @param {String} styleAttr
+ * @return {String}
+ */
+export function renderUpcastAttribute( styleAttr ) {
+	return viewElement => normalizeColorCode( viewElement.getStyle( styleAttr ) );
+}
+
+/**
+ * A {@link module:font/fontcolor~FontColor font color} and
+ * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
+ * responsible for downcasting a color attribute to a span element.
+ *
+ * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
+ *
+ * @param {String} styleAttr
+ */
+export function renderDowncastElement( styleAttr ) {
+	return ( modelAttributeValue, viewWriter ) => viewWriter.createAttributeElement( 'span', {
+		style: `${ styleAttr }:${ modelAttributeValue }`
+	} );
+}
+
+/**
+ * Creates a unified color definition object from color configuration options.
+ * The object contains both the information necessary to render the UI and initialize a 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 );
+}
+
+/**
+ * Helper which add {@link module:font/ui/colortableview~ColorTableView} to a dropdown with proper initial values.
+ *
+ * @param {Object} config Configuration object
+ * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView Dropdown view to which
+ * a {@link module:font/ui/colortableview~ColorTableView} will be added.
+ * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors An array with definitions
+ * representing colors to be displayed in the color table.
+ * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
+ * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
+ */
+export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel } ) {
+	const locale = dropdownView.locale;
+	const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel } );
+
+	dropdownView.colorTableView = colorTableView;
+	dropdownView.panelView.children.add( colorTableView );
+
+	colorTableView.delegate( 'execute' ).to( dropdownView, 'execute' );
+
+	return colorTableView;
+}
+
+/**
+ * Returns color configuration options as defined in the `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 color value string
+//
+// @param {String} value
+// @returns {String}
+function normalizeColorCode( value ) {
+	return value.replace( /\s/g, '' );
+}
+
+// Creates normalized color definition from 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
+				},
+				priority: 5
+			}
+		};
+	} 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 }`
+				},
+				priority: 5
+			}
+		};
+	}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

193270

increased by117.38%

Dev dependency count

8

decreased by-11.11%

Number of package files

68

increased by23.64%

Lines of code

2045

increased by113.69%

Number of lines in readme file

31

increased by19.23%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^12.1.0

• Updated@ckeditor/ckeditor5-ui@^12.1.0

• Updated@ckeditor/ckeditor5-utils@^12.1.0