@ckeditor/ckeditor5-font - npm Package Compare versions

Comparing version 11.1.1 to 11.2.0

CHANGELOG.md

 Changelog
 =========
 
+## [11.2.0](https://github.com/ckeditor/ckeditor5-font/compare/v11.1.1...v11.2.0) (2019-07-04)
+
+### Features
+
+* Introduced the "document colors" section in the color picker dropdowns. Closes [#28](https://github.com/ckeditor/ckeditor5-font/issues/28)
+
+### Other changes
+
+* Updated translations. ([1ec1436](https://github.com/ckeditor/ckeditor5-font/commit/1ec1436)) ([6c85212](https://github.com/ckeditor/ckeditor5-font/commit/6c85212))
+* Updated view attribute elements priorities to ensure proper order in which attribute elements are applied. Closes [#35](https://github.com/ckeditor/ckeditor5-font/issues/35). ([54467b4](https://github.com/ckeditor/ckeditor5-font/commit/54467b4))
+
+
 ## [11.1.1](https://github.com/ckeditor/ckeditor5-font/compare/v11.1.0...v11.1.1) (2019-06-05)
@@ -8,3 +20,3 @@
 
-* Updated translations. ([cca7b24](https://github.com/ckeditor/ckeditor5-font/commit/cca7b24)) 
+* Updated translations. ([cca7b24](https://github.com/ckeditor/ckeditor5-font/commit/cca7b24))
 
@@ -11,0 +23,0 @@

lang/contexts.json

@@ -12,2 +12,3 @@ {
 	"Remove color": "Label or a button that removes the color from the text (font color and background).",
+	"Document colors": "Title of a color picker section containing the colors currently used in the document.",
 	"Black": "Label of a button that applies a black text color (font color and background)",
@@ -14,0 +15,0 @@ "Dim grey": "Label of a button that applies a dim grey text color (font color and background)",

package.json

 {
   "name": "@ckeditor/ckeditor5-font",
-  "version": "11.1.1",
+  "version": "11.2.0",
   "description": "Font feature for CKEditor 5.",
@@ -13,11 +13,11 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.1.1",
-    "@ckeditor/ckeditor5-ui": "^13.0.0",
-    "@ckeditor/ckeditor5-utils": "^12.1.1"
+    "@ckeditor/ckeditor5-core": "^12.2.0",
+    "@ckeditor/ckeditor5-ui": "^13.0.1",
+    "@ckeditor/ckeditor5-utils": "^13.0.0"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.1",
-    "@ckeditor/ckeditor5-engine": "^13.1.1",
-    "@ckeditor/ckeditor5-highlight": "^11.0.2",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.2",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.2",
+    "@ckeditor/ckeditor5-engine": "^13.2.0",
+    "@ckeditor/ckeditor5-highlight": "^11.0.3",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.3",
     "eslint": "^5.5.0",
@@ -24,0 +24,0 @@ "eslint-config-ckeditor5": "^1.0.11",

README.md

@@ -7,3 +7,2 @@ CKEditor 5 font feature
 [![Build Status](https://travis-ci.org/ckeditor/ckeditor5-font.svg?branch=master)](https://travis-ci.org/ckeditor/ckeditor5-font)
-[![BrowserStack Status](https://automate.browserstack.com/automate/badge.svg?badge_key=d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)](https://automate.browserstack.com/public-build/d3hvenZqQVZERFQ5d09FWXdyT0ozVXhLaVltRFRjTTUyZGpvQWNmWVhUUT0tLUZqNlJ1YWRUd0RvdEVOaEptM1B2Q0E9PQ==--c9d3dee40b9b4471ff3fb516d9ecf8d09292c7e0)
 [![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5-font/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5-font?branch=master)
@@ -10,0 +9,0 @@ <br>

src/fontbackgroundcolor.js

@@ -144,4 +144,6 @@ /**
 /**
- * Represents the number of columns in the dropdown. The default value is:
+ * Represents the number of columns in the dropdown.
  *
+ * The default value is:
+ *
  *		const fontBackgroundColorConfig = {
@@ -153,1 +155,35 @@ *			columns: 5
  */
+
+/**
+ * Determines maximum number of available document colors.
+ * Setting it to `0` will disable document colors feature.
+ *
+ * By default it equals to {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns} value.
+ *
+ * Examples:
+ *
+ * 	// 1) Neither documentColors nor columns are defined in config.
+ * 	// documentColors will equal 5,
+ * 	// because value will be inherited from `columns`,
+ * 	// which has predefined value 5.
+ * 	const fontBackgroundColorConfig = {}
+ *
+ * 	// 2) documentColors will equal 8, because value will be inherited from `columns`.
+ * 	const fontBackgroundColorConfig = {
+ * 		columns: 8
+ * 	}
+ *
+ * 	// 3) documentColors will equal 24, because has defined own value.
+ * 	const fontBackgroundColorConfig = {
+ * 		columns: 8,
+ * 		documentColors: 24
+ * 	}
+ *
+ * 	// 4) documentColors feature will be disabled.
+ * 	const fontBackgroundColorConfig = {
+ * 		columns: 8,
+ * 		documentColors: 0
+ * 	}
+ *
+ * @member {Number} module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors
+ */

src/fontcolor.js

@@ -143,4 +143,6 @@ /**
 /**
- * Represents the number of columns in the dropdown. The default value is:
+ * Represents the number of columns in the dropdown.
  *
+ * The default value is:
+ *
  *		const fontColorConfig = {
@@ -152,1 +154,35 @@ *			columns: 5
  */
+
+/**
+ * Determines maximum number of available document colors.
+ * Setting it to `0` will disable document colors feature.
+ *
+ * By default it equals to {@link module:font/fontcolor~FontColorConfig#columns} value.
+ *
+ * Examples:
+ *
+ * 	// 1) Neither documentColors nor columns are defined in config.
+ * 	// documentColors will equal 5,
+ * 	// because value will be inherited from `columns`,
+ * 	// which has predefined value 5.
+ * 	const fontColorConfig = {}
+ *
+ * 	// 2) documentColors will equal 8, because value will be inherited from `columns`.
+ * 	const fontColorConfig = {
+ * 		columns: 8
+ * 	}
+ *
+ * 	// 3) documentColors will equal 24, because has defined own value.
+ * 	const fontColorConfig = {
+ * 		columns: 8,
+ * 		documentColors: 24
+ * 	}
+ *
+ * 	// 4) documentColors feature will be disabled.
+ * 	const fontColorConfig = {
+ * 		columns: 8,
+ * 		documentColors: 0
+ * 	}
+ *
+ * @member {Number} module:font/fontcolor~FontColorConfig#documentColors
+ */

src/fontfamily/utils.js

@@ -75,3 +75,3 @@ /**
 			},
-			priority: 5
+			priority: 7
 		}
@@ -78,0 +78,0 @@ };

src/fontsize/utils.js

@@ -33,3 +33,3 @@ /**
 			classes: 'text-tiny',
-			priority: 5
+			priority: 7
 		}
@@ -43,3 +43,3 @@ },
 			classes: 'text-small',
-			priority: 5
+			priority: 7
 		}
@@ -53,3 +53,3 @@ },
 			classes: 'text-big',
-			priority: 5
+			priority: 7
 		}
@@ -63,3 +63,3 @@ },
 			classes: 'text-huge',
-			priority: 5
+			priority: 7
 		}
@@ -120,5 +120,5 @@ }
 			},
-			priority: 5
+			priority: 7
 		}
 	};
 }

src/ui/colortableview.js

@@ -12,3 +12,7 @@ /**
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import ColorTileView from '@ckeditor/ckeditor5-ui/src/colorgrid/colortileview';
 import ColorGridView from '@ckeditor/ckeditor5-ui/src/colorgrid/colorgridview';
+import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
+import DocumentColorCollection from '../documentcolorcollection';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -24,3 +28,4 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
  * * A remove color button,
- * * A {@link module:ui/colorgrid/colorgrid~ColorGridView}.
+ * * A static {@link module:ui/colorgrid/colorgrid~ColorGridView} of colors defined in the configuration,
+ * * A dynamic {@link module:ui/colorgrid/colorgrid~ColorGridView} of colors used in the document.
  *
@@ -39,4 +44,6 @@ * @extends module:ui/view~View
 	 * @param {String} config.removeButtonLabel The label of the button responsible for removing the color.
+	 * @param {String} config.documentColorsLabel The label for the section with the document colors.
+	 * @param {String} config.documentColorsCount The number of colors in document colors section inside dropdown.
 	 */
-	constructor( locale, { colors, columns, removeButtonLabel } ) {
+	constructor( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {
 		super( locale );
@@ -97,2 +104,37 @@
 		/**
+		 * A collection of definitions stores document colors.
+		 *
+		 * @readonly
+		 * @member {module:font/documentcolorcollection~DocumentColorCollection}
+		 */
+		this.documentColors = new DocumentColorCollection();
+
+		/**
+		 * Maximum number of colors in document colors section.
+		 * If equals 0, then document colors section is not added.
+		 *
+		 * @readonly
+		 * @type {Number}
+		 */
+		this.documentColorsCount = documentColorsCount;
+
+		/**
+		 * Preserves reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
+		 * default (static) colors set.
+		 *
+		 * @readonly
+		 * @member {module:ui/colorgrid/colorgrid~ColorGridView}
+		 */
+		this.staticColorsGrid = this._createStaticColorsGrid();
+
+		/**
+		 * Preserves reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
+		 * document colors. It remains undefined if document colors are disabled.
+		 *
+		 * @readonly
+		 * @member {module:ui/colorgrid/colorgrid~ColorGridView}
+		 */
+		this.documentColorGrid;
+
+		/**
 		 * Helps cycling over focusable {@link #items} in the list.
@@ -128,12 +170,117 @@ *
 
-		this.items.add( this.removeColorButton() );
-		this.items.add( this.createStaticColorTable() );
+		this.items.add( this._removeColorButton() );
+		this.items.add( this.staticColorsGrid );
+
+		if ( documentColorsCount ) {
+			// Create a label for document colors.
+			const bind = Template.bind( this.documentColors, this.documentColors );
+			const label = new LabelView( this.locale );
+
+			label.text = documentColorsLabel;
+			label.extendTemplate( {
+				attributes: {
+					class: [
+						'ck',
+						'ck-color-grid__label',
+						bind.if( 'isEmpty', 'ck-hidden' )
+					]
+				}
+			} );
+
+			this.items.add( label );
+
+			this.documentColorsGrid = this._createDocumentColorsGrid();
+			this.items.add( this.documentColorsGrid );
+		}
 	}
 
 	/**
+	 * Method scans through the editor's model and searches for text node attributes with attributeName.
+	 * Found entries are set as document colors.
+	 *
+	 * All the previously stored document colors will be lost in the process.
+	 *
+	 * @param {module:engine/model/model~Model} model Model used as a source to obtain document colors.
+	 * @param {String} attributeName Determines what is the name of a related model's attribute for given dropdown.
+	 */
+	updateDocumentColors( model, attributeName ) {
+		const document = model.document;
+		const maxCount = this.documentColorsCount;
+
+		this.documentColors.clear();
+
+		for ( const rootName of document.getRootNames() ) {
+			const root = document.getRoot( rootName );
+			const range = model.createRangeIn( root );
+
+			for ( const node of range.getItems() ) {
+				if ( node.is( 'textProxy' ) && node.hasAttribute( attributeName ) ) {
+					this._addColorToDocumentColors( node.getAttribute( attributeName ) );
+
+					if ( this.documentColors.length >= maxCount ) {
+						return;
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Method refresh state of `selectedColor` in single or both {@link module:ui/colorgrid/colorgrid~ColorGridView}
+	 * available in {@link module:font/ui/colortableview~ColorTableView}. It guarantees that selection will occur only in one of them.
+	 */
+	updateSelectedColors() {
+		const documentColorsGrid = this.documentColorsGrid;
+		const staticColorsGrid = this.staticColorsGrid;
+		const selectedColor = this.selectedColor;
+
+		if ( !this.documentColors.isEmpty ) {
+			if ( this.documentColors.hasColor( selectedColor ) ) {
+				staticColorsGrid.selectedColor = null;
+				documentColorsGrid.selectedColor = selectedColor;
+			} else {
+				staticColorsGrid.selectedColor = selectedColor;
+				documentColorsGrid.selectedColor = null;
+			}
+		} else {
+			staticColorsGrid.selectedColor = selectedColor;
+		}
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	render() {
+		super.render();
+
+		// Items added before rendering should be known to the #focusTracker.
+		for ( const item of this.items ) {
+			this.focusTracker.add( item.element );
+		}
+
+		// Start listening for the keystrokes coming from #element.
+		this.keystrokes.listenTo( this.element );
+	}
+
+	/**
+	 * Focuses the first focusable element in {@link #items}.
+	 */
+	focus() {
+		this._focusCycler.focusFirst();
+	}
+
+	/**
+	 * Focuses the last focusable element in {@link #items}.
+	 */
+	focusLast() {
+		this._focusCycler.focusLast();
+	}
+
+	/**
 	 * Adds the remove color button as a child of the current view.
 	 *
 	 * @private
+	 * @returns {module:ui/button/buttonview~ButtonView}
 	 */
-	removeColorButton() {
+	_removeColorButton() {
 		const buttonView = new ButtonView();
@@ -160,4 +307,5 @@
 	 * @private
+	 * @returns {module:ui/colorgrid/colorgrid~ColorGridView}
 	 */
-	createStaticColorTable() {
+	_createStaticColorsGrid() {
 		const colorGrid = new ColorGridView( this.locale, {
@@ -169,3 +317,2 @@ colorDefinitions: this.colorDefinitions,
 		colorGrid.delegate( 'execute' ).to( this );
-		colorGrid.bind( 'selectedColor' ).to( this );
 
@@ -176,29 +323,80 @@ return colorGrid;
 	/**
-	 * @inheritDoc
+	 * Creates document colors section view and binds it to {@link #documentColors}.
+	 *
+	 * @private
+	 * @returns {module:ui/colorgrid/colorgrid~ColorGridView}
 	 */
-	render() {
-		super.render();
+	_createDocumentColorsGrid() {
+		const bind = Template.bind( this.documentColors, this.documentColors );
+		const documentColorsGrid = new ColorGridView( this.locale, {
+			columns: this.columns
+		} );
 
-		// Items added before rendering should be known to the #focusTracker.
-		for ( const item of this.items ) {
-			this.focusTracker.add( item.element );
-		}
+		documentColorsGrid.delegate( 'execute' ).to( this );
 
-		// Start listening for the keystrokes coming from #element.
-		this.keystrokes.listenTo( this.element );
+		documentColorsGrid.extendTemplate( {
+			attributes: {
+				class: bind.if( 'isEmpty', 'ck-hidden' )
+			}
+		} );
+
+		documentColorsGrid.items.bindTo( this.documentColors ).using(
+			colorObj => {
+				const colorTile = new ColorTileView();
+
+				colorTile.set( {
+					color: colorObj.color,
+					hasBorder: colorObj.options && colorObj.options.hasBorder
+				} );
+
+				if ( colorObj.label ) {
+					colorTile.set( {
+						label: colorObj.label,
+						tooltip: true
+					} );
+				}
+
+				colorTile.on( 'execute', () => {
+					this.fire( 'execute', {
+						value: colorObj.color
+					} );
+				} );
+
+				return colorTile;
+			}
+		);
+
+		// Selected color should be cleared when document colors became empty.
+		this.documentColors.on( 'change:isEmpty', ( evt, name, val ) => {
+			if ( val ) {
+				documentColorsGrid.selectedColor = null;
+			}
+		} );
+
+		return documentColorsGrid;
 	}
 
 	/**
-	 * Focuses the first focusable element in {@link #items}.
+	 * Method adds a given `color` to the document colors list. If possible, method will attempt to use
+	 * data from the {@link #colorDefinitions} (label, color options).
+	 *
+	 * @private
+	 * @param {String} color String which stores value of recently applied color.
 	 */
-	focus() {
-		this._focusCycler.focusFirst();
-	}
+	_addColorToDocumentColors( color ) {
+		const predefinedColor = this.colorDefinitions
+			.find( definition => definition.color === color );
 
-	/**
-	 * Focuses the last focusable element in {@link #items}.
-	 */
-	focusLast() {
-		this._focusCycler.focusLast();
+		if ( !predefinedColor ) {
+			this.documentColors.add( {
+				color,
+				label: color,
+				options: {
+					hasBorder: false
+				}
+			} );
+		} else {
+			this.documentColors.add( Object.assign( {}, predefinedColor ) );
+		}
 	}
 }

src/ui/colorui.js

@@ -43,2 +43,3 @@ /**
 		 * The name of the command which will be executed when a color tile is clicked.
+		 *
 		 * @type {String}
@@ -51,2 +52,3 @@ */
 		 * Also the configuration scope name in `editor.config`.
+		 *
 		 * @type {String}
@@ -64,2 +66,3 @@ */
 		 * Label used by the dropdown.
+		 *
 		 * @type {String}
@@ -71,5 +74,13 @@ */
 		 * The number of columns in the color grid.
+		 *
 		 * @type {Number}
 		 */
 		this.columns = editor.config.get( `${ this.componentName }.columns` );
+
+		/**
+		 * Keeps a reference to {@link module:font/ui/colortableview~ColorTableView}.
+		 *
+		 * @member {module:font/ui/colortableview~ColorTableView}
+		 */
+		this.colorTableView;
 	}
@@ -86,2 +97,3 @@
 		const localizedColors = getLocalizedColorOptions( editor, colorsConfig );
+		const documentColorsCount = editor.config.get( `${ this.componentName }.documentColors` );
 
@@ -91,3 +103,3 @@ // Register the UI component.
 			const dropdownView = createDropdown( locale );
-			const colorTableView = addColorTableToDropdown( {
+			this.colorTableView = addColorTableToDropdown( {
 				dropdownView,
@@ -102,6 +114,8 @@ colors: localizedColors.map( option => ( {
 				columns: this.columns,
-				removeButtonLabel: t( 'Remove color' )
+				removeButtonLabel: t( 'Remove color' ),
+				documentColorsLabel: documentColorsCount !== 0 ? t( 'Document colors' ) : undefined,
+				documentColorsCount: documentColorsCount === undefined ? this.columns : documentColorsCount
 			} );
 
-			colorTableView.bind( 'selectedColor' ).to( command, 'value' );
+			this.colorTableView.bind( 'selectedColor' ).to( command, 'value' );
 
@@ -127,2 +141,11 @@ dropdownView.buttonView.set( {
 
+			dropdownView.on( 'change:isOpen', ( evt, name, isVisible ) => {
+				if ( isVisible ) {
+					if ( documentColorsCount !== 0 ) {
+						this.colorTableView.updateDocumentColors( editor.model, this.componentName );
+					}
+					this.colorTableView.updateSelectedColors();
+				}
+			} );
+
 			return dropdownView;
@@ -129,0 +152,0 @@ } );

src/utils.js

@@ -87,3 +87,3 @@ /**
 		style: `${ styleAttr }:${ modelAttributeValue }`
-	} );
+	}, { priority: 7 } );
 }
@@ -113,7 +113,9 @@
  * @param {String} config.removeButtonLabel The label for the button responsible for removing the color.
+ * @param {String} config.documentColorsLabel The label of a section with document colors.
+ * @param {String} config.documentColorsCount The number of document colors inside dropdown.
  * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  */
-export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel } ) {
+export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {
 	const locale = dropdownView.locale;
-	const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel } );
+	const colorTableView = new ColorTableView( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } );
 
@@ -193,4 +195,3 @@ dropdownView.colorTableView = colorTableView;
 					color
-				},
-				priority: 5
+				}
 			}
@@ -207,4 +208,3 @@ };
 					color: `${ color.color }`
-				},
-				priority: 5
+				}
 			}
@@ -211,0 +211,0 @@ };

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

227209

increased by8.32%

Number of package files

72

increased by1.41%

Lines of code

2394

increased by16.16%

Worsened metrics

Number of lines in readme file

30

decreased by-3.23%

Dependency changes

• - Removed@ckeditor/ckeditor5-utils@12.1.1(transitive)

• Updated@ckeditor/ckeditor5-core@^12.2.0

• Updated@ckeditor/ckeditor5-ui@^13.0.1

• Updated@ckeditor/ckeditor5-utils@^13.0.0