Răsfoiți Sursa

Merge branch 'stable'

Piotrek Koszuliński 6 ani în urmă
părinte
comite
08e9be442a

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/custom-font-color-and-background-color-options.html

@@ -1,6 +1,6 @@
 <div id="snippet-custom-font-color-and-background-color-options">
 	<p><span style="color:yellow;background-color:hsl(0,0%,0%);">Text</span> in this <span style="color:white;background-color:hsl(0,100%,50%);">sample</span> <span style="color:aqua;background-color:hsl(240,100%,50%);">has</span> <span style="color:lime;background-color:hsl(300,100%,20%);">m</span><span style="color:lime;background-color:hsl(300,100%,30%);">u</span><span style="color:lime;background-color:hsl(300,100%,40%);">l</span><span style="background-color:hsl(300,100%,50%);">t</span><span style="background-color:hsl(300,100%,60%);">i</span><span style="background-color:hsl(300,100%,70%);">p</span><span style="background-color:hsl(300,100%,80%);">l</span><span style="background-color:hsl(300,100%,90%);">e</span> <span style="color:purple;">font colors</span> and <span style="background-color:hsl(120,100%,90%);">font background</span> <span style="color:red;background-color:hsl(0,0%,62.50%);">colors</span>.</p>
 	<p>
-		Here are <span style="color:rgb(90%,100%,0%);background-color: #454545">some examples</span> of <span style="color:midnightblue;background-color:rgb(150,240,255)">custom colors</span> not defined in <span style="color:rgb(255, 186, 57);background-color:#442200">configuration</span> which might be recognized and used in the <span style="color:rgb(150,250,150);background-color:#153">"document colors"</span> section.
+		Here are <span style="color:rgb(90%,100%,0%);background-color: #454545">some examples</span> of <span style="color:midnightblue;background-color:rgb(150,240,255)">custom colors</span> not defined in the <span style="color:rgb(255, 186, 57);background-color:#442200">configuration</span> that might be recognized and used in the <span style="color:rgb(150,250,150);background-color:#153">"document colors"</span> section.
 	</p>
 </div>

+ 1 - 1
packages/ckeditor5-font/docs/_snippets/features/font.html

@@ -24,6 +24,6 @@
 	</p>
 
 	<p>
-		<span style="color:#505050;background-color:rgb(75, 255, 190)">This text has custom color used for text and background. Those colors are available in the "document colors" section.</span>
+		<span style="color:#505050;background-color:rgb(75, 255, 190)">This text has a custom color used for text and background. These colors are available in the "document colors" section.</span>
 	</p>
 </div>

+ 1 - 1
packages/ckeditor5-font/docs/api/font.md

@@ -14,7 +14,7 @@ Check out the {@link features/font#demo demo in the Font feature} guide.
 
 ## Documentation
 
-See the {@link features/font Font feature} guide and plugins documentation:
+See the {@link features/font Font feature} guide and plugin documentation:
 - {@link module:font/fontfamily~FontFamily}.
 - {@link module:font/fontsize~FontSize}.
 - {@link module:font/fontcolor~FontColor}.

+ 11 - 11
packages/ckeditor5-font/docs/features/font.md

@@ -5,7 +5,7 @@ category: features
 
 {@snippet features/build-font-source}
 
-The {@link module:font/font~Font} plugin enables the following features in the editor:
+The {@link module:font/font~Font} plugin enables the following features in the rich-text editor:
 * {@link module:font/fontfamily~FontFamily} &ndash; Allows to change the font family by applying inline `<span>` elements with a `font-family` in the `style` attribute.
 * {@link module:font/fontsize~FontSize} &ndash; Allows to control the font size by applying inline `<span>` elements that either have a CSS class or a `font-size` in the `style` attribute.
 * {@link module:font/fontcolor~FontColor} &ndash; Allows to control the font color by applying inline `<span>` elements with a `color` in the `style` attribute.
@@ -17,7 +17,7 @@ The {@link module:font/font~Font} plugin enables the following features in the e
 
 ## Configuring the font family feature
 
-It is possible to configure which font family options are supported by the editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option to do so.
+It is possible to configure which font family options are supported by the WYSIWYG editor. Use the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option to do so.
 
 Use the special `'default'` keyword to use the default font family defined in the web page styles. It removes any custom font family.
 
@@ -45,7 +45,7 @@ ClassicEditor
 
 ## Configuring the font size feature
 
-It is possible to configure which font size options are supported by the editor. Use the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option to do so.
+It is possible to configure which font size options are supported by the WYSIWYG editor. Use the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option to do so.
 
 Use the special `'default'` keyword to use the default font size defined in the web page styles. It removes any custom font size.
 
@@ -112,7 +112,7 @@ ClassicEditor
 
 ### Using numerical values
 
-The font feature also supports numerical values.
+The font size feature also supports numerical values.
 
 In this case, each size is represented in the view as a `<span>` element with the `font-size` style set in `px`. For example, `14` will be represented in the editor data as:
 
@@ -120,7 +120,7 @@ In this case, each size is represented in the view as a `<span>` element with th
 <span style="font-size: 14px">...</span>
 ```
 
-Here is an example of the editor that supports numerical font sizes. Note that `'default'` is controlled by the default styles of the web page:
+Here is an example of the WYSIWYG editor that supports numerical font sizes. Note that `'default'` is controlled by the default styles of the web page:
 
 ```js
 ClassicEditor
@@ -154,7 +154,7 @@ Both font color and font background color features are configurable and share th
 	Please note that {@link module:font/fontcolor~FontColor font color} and {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} are separate plugins. They must be enabled and configured individually.
 </info-box>
 
-Check out the editor below with both features customized using the editor configuration:
+Check out the WYSIWYG editor below with both features customized using the editor configuration:
 
 {@snippet features/custom-font-color-and-background-color-options}
 
@@ -228,7 +228,7 @@ ClassicEditor
 
 ### Changing the geometry of the color grid
 
-You can set the number of columns in the color picker by setting {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`}.
+You can configure the number of columns in the color dropdown by setting the {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`} configuration options.
 
 Usually, you will want to use this option when changing the number of [available colors](#specifying-available-colors).
 
@@ -240,7 +240,7 @@ ClassicEditor
 				// 9 colors defined here...
 			]
 
-			columns: 3, // so, let's display them in 3 columns
+			columns: 3, // so, you can display them in 3 columns.
 
 			// ...
 		},
@@ -259,9 +259,9 @@ ClassicEditor
 
 ### Documents colors
 
-The font and font background color pickers contain the *Document colors* section. It lists the colors already used in the document for the users to be able to easily reuse them (for consistency purposes).
+The font and font background color dropdowns contain the "Document colors" section. It lists the colors already used in the document for the users to be able to easily reuse them (for consistency purposes).
 
-By default the number of displayed document colors is limited to one row, but you can adjust it (or remove the whole section) by using {@link module:font/fontcolor~FontColorConfig#documentColors `fontColor.documentColors`} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors `fontBackgroundColor.documentColors`} options.
+By default, the number of displayed document colors is limited to one row, but you can adjust it (or remove the whole section) by using the {@link module:font/fontcolor~FontColorConfig#documentColors `fontColor.documentColors`} or {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#documentColors `fontBackgroundColor.documentColors`} options.
 
 ```js
 ClassicEditor
@@ -291,7 +291,7 @@ ClassicEditor
 
 ## Installation
 
-To add this feature to your editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-font`](https://www.npmjs.com/package/@ckeditor/ckeditor5-font) package:
 
 ```bash
 npm install --save @ckeditor/ckeditor5-font

+ 8 - 8
packages/ckeditor5-font/src/documentcolorcollection.js

@@ -7,7 +7,7 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
  */
 
 /**
- * Collection to store document colors. It enforces colors to be unique.
+ * A collection to store document colors. It enforces colors to be unique.
  *
  * @mixes module:utils/observablemixin~ObservableMixin
  * @extends module:utils/collection~Collection
@@ -17,7 +17,7 @@ export default class DocumentColorCollection extends Collection {
 		super( options );
 
 		/**
-		 * Indicates whether the collection is empty.
+		 * Indicates whether the document color collection is empty.
 		 *
 		 * @observable
 		 * @readonly
@@ -27,17 +27,17 @@ export default class DocumentColorCollection extends Collection {
 	}
 
 	/**
-	 * Adds a color into the collection.
+	 * Adds a color to the document color collection.
 	 *
-	 * Function ensures that no color duplicates are inserted (compared using
-	 * the color value of {@link module:ui/colorgrid/colorgrid~ColorDefinition}).
+	 * This method ensures that no color duplicates are inserted (compared using
+	 * the color value of the {@link module:ui/colorgrid/colorgrid~ColorDefinition}).
 	 *
-	 * If the item does not have an id, then it will be automatically generated and set on the item.
+	 * If the item does not have an ID, it will be automatically generated and set on the item.
 	 *
 	 * @chainable
 	 * @param {module:ui/colorgrid/colorgrid~ColorDefinition} item
 	 * @param {Number} [index] The position of the item in the collection. The item
-	 * is pushed to the collection when `index` not specified.
+	 * is pushed to the collection when `index` is not specified.
 	 * @fires add
 	 */
 	add( item, index ) {
@@ -65,7 +65,7 @@ export default class DocumentColorCollection extends Collection {
 	}
 
 	/**
-	 * Checks if object with given colors is present in collection.
+	 * Checks if an object with given colors is present in the document color collection.
 	 *
 	 * @param {String} color
 	 * @returns {Boolean}

+ 11 - 11
packages/ckeditor5-font/src/fontbackgroundcolor.js

@@ -141,7 +141,7 @@ export default class FontBackgroundColor extends Plugin {
  */
 
 /**
- * Represents the number of columns in the dropdown.
+ * Represents the number of columns in the font background color dropdown.
  *
  * The default value is:
  *
@@ -153,31 +153,31 @@ export default class FontBackgroundColor extends Plugin {
  */
 
 /**
- * Determines maximum number of available document colors.
- * Setting it to `0` will disable document colors feature.
+ * Determines the maximum number of available document colors.
+ * Setting it to `0` will disable the document colors feature.
  *
- * By default it equals to {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns} value.
+ * By default it equals to the {@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.
+ * 	// 1) Neither document colors nor columns are defined in the configuration.
+ * 	// Document colors will equal 5,
+ * 	// because the value will be inherited from columns,
+ * 	// which has a predefined value of 5.
  * 	const fontBackgroundColorConfig = {}
  *
- * 	// 2) documentColors will equal 8, because value will be inherited from `columns`.
+ * 	// 2) Document colors will equal 8, because the value will be inherited from columns.
  * 	const fontBackgroundColorConfig = {
  * 		columns: 8
  * 	}
  *
- * 	// 3) documentColors will equal 24, because has defined own value.
+ * 	// 3) Document colors will equal 24, because it has its own value defined.
  * 	const fontBackgroundColorConfig = {
  * 		columns: 8,
  * 		documentColors: 24
  * 	}
  *
- * 	// 4) documentColors feature will be disabled.
+ * 	// 4) The document colors feature will be disabled.
  * 	const fontBackgroundColorConfig = {
  * 		columns: 8,
  * 		documentColors: 0

+ 11 - 11
packages/ckeditor5-font/src/fontcolor.js

@@ -140,7 +140,7 @@ export default class FontColor extends Plugin {
  */
 
 /**
- * Represents the number of columns in the dropdown.
+ * Represents the number of columns in the font color dropdown.
  *
  * The default value is:
  *
@@ -152,31 +152,31 @@ export default class FontColor extends Plugin {
  */
 
 /**
- * Determines maximum number of available document colors.
- * Setting it to `0` will disable document colors feature.
+ * Determines the maximum number of available document colors.
+ * Setting it to `0` will disable the document colors feature.
  *
- * By default it equals to {@link module:font/fontcolor~FontColorConfig#columns} value.
+ * By default it equals to the {@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.
+ * 	// 1) Neither document colors nor columns are defined in the configuration.
+ * 	// Document colors will equal 5,
+ * 	// because the value will be inherited from columns,
+ * 	// which has a predefined value of 5.
  * 	const fontColorConfig = {}
  *
- * 	// 2) documentColors will equal 8, because value will be inherited from `columns`.
+ * 	// 2) Document colors will equal 8, because the value will be inherited from columns.
  * 	const fontColorConfig = {
  * 		columns: 8
  * 	}
  *
- * 	// 3) documentColors will equal 24, because has defined own value.
+ * 	// 3) Document colors will equal 24, because it has its own value defined.
  * 	const fontColorConfig = {
  * 		columns: 8,
  * 		documentColors: 24
  * 	}
  *
- * 	// 4) documentColors feature will be disabled.
+ * 	// 4) The document colors feature will be disabled.
  * 	const fontColorConfig = {
  * 		columns: 8,
  * 		documentColors: 0

+ 20 - 19
packages/ckeditor5-font/src/ui/colortableview.js

@@ -40,13 +40,13 @@ export default class ColorTableView extends View {
 	 * @param {Number} config.columns The number of columns in the color grid.
 	 * @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.
+	 * @param {String} config.documentColorsCount The number of colors in the document colors section inside the color dropdown.
 	 */
 	constructor( locale, { colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {
 		super( locale );
 
 		/**
-		 * Collection of the children of the table.
+		 * A collection of the children of the table.
 		 *
 		 * @readonly
 		 * @member {module:ui/viewcollection~ViewCollection}
@@ -61,7 +61,7 @@ export default class ColorTableView extends View {
 		this.colorDefinitions = colors;
 
 		/**
-		 * Tracks information about DOM focus in the list.
+		 * Tracks information about the DOM focus in the list.
 		 *
 		 * @readonly
 		 * @member {module:utils/focustracker~FocusTracker}
@@ -77,7 +77,7 @@ export default class ColorTableView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
-		 * Keeps value of the command associated with the table for the current selection.
+		 * Keeps the value of the command associated with the table for the current selection.
 		 *
 		 * @type {String}
 		 */
@@ -98,7 +98,7 @@ export default class ColorTableView extends View {
 		this.columns = columns;
 
 		/**
-		 * A collection of definitions stores document colors.
+		 * A collection of definitions that store the document colors.
 		 *
 		 * @readonly
 		 * @member {module:font/documentcolorcollection~DocumentColorCollection}
@@ -106,8 +106,8 @@ export default class ColorTableView extends View {
 		this.documentColors = new DocumentColorCollection();
 
 		/**
-		 * Maximum number of colors in document colors section.
-		 * If equals 0, then document colors section is not added.
+		 * The maximum number of colors in the document colors section.
+		 * If it equals 0, the document colors section is not added.
 		 *
 		 * @readonly
 		 * @type {Number}
@@ -115,8 +115,8 @@ export default class ColorTableView extends View {
 		this.documentColorsCount = documentColorsCount;
 
 		/**
-		 * Preserves reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
-		 * default (static) colors set.
+		 * Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
+		 * the default (static) color set.
 		 *
 		 * @readonly
 		 * @member {module:ui/colorgrid/colorgrid~ColorGridView}
@@ -124,8 +124,8 @@ export default class ColorTableView extends View {
 		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.
+		 * Preserves the reference to {@link module:ui/colorgrid/colorgrid~ColorGridView} used to create
+		 * the document colors. It remains undefined if the document colors feature is disabled.
 		 *
 		 * @readonly
 		 * @member {module:ui/colorgrid/colorgrid~ColorGridView}
@@ -190,13 +190,13 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Method scans through the editor's model and searches for text node attributes with attributeName.
+	 * Scans through the editor model and searches for text node attributes with the given attribute name.
 	 * 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.
+	 * @param {module:engine/model/model~Model} model The model used as a source to obtain the document colors.
+	 * @param {String} attributeName Determines the name of the related model's attribute for a given dropdown.
 	 */
 	updateDocumentColors( model, attributeName ) {
 		const document = model.document;
@@ -221,8 +221,9 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Method refresh state of `selectedColor` in single or both {@link module:ui/colorgrid/colorgrid~ColorGridView}
-	 * available in {@link module:font/ui/colortableview~ColorTableView}.
+	 * Refreshes the state of the selected color in one or both {@link module:ui/colorgrid/colorgrid~ColorGridView}s
+	 * available in the {@link module:font/ui/colortableview~ColorTableView}. It guarantees that the selection will occur only in one
+	 * of them.
 	 */
 	updateSelectedColors() {
 		const documentColorsGrid = this.documentColorsGrid;
@@ -307,7 +308,7 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Creates document colors section view and binds it to {@link #documentColors}.
+	 * Creates the document colors section view and binds it to {@link #documentColors}.
 	 *
 	 * @private
 	 * @returns {module:ui/colorgrid/colorgrid~ColorGridView}
@@ -363,11 +364,11 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Method adds a given `color` to the document colors list. If possible, method will attempt to use
+	 * Adds a given color to the document colors list. If possible, the 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.
+	 * @param {String} color A string that stores the value of the recently applied color.
 	 */
 	_addColorToDocumentColors( color ) {
 		const predefinedColor = this.colorDefinitions

+ 4 - 4
packages/ckeditor5-font/src/ui/colorui.js

@@ -32,8 +32,8 @@ export default class ColorUI extends Plugin {
 	 * @param {String} config.commandName The name of the command which will be executed when a color tile is clicked.
 	 * @param {String} config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
 	 * and the configuration scope name in `editor.config`.
-	 * @param {String} config.icon SVG icon used by the dropdown.
-	 * @param {String} config.dropdownLabel Label used by the dropdown.
+	 * @param {String} config.icon The SVG icon used by the dropdown.
+	 * @param {String} config.dropdownLabel The label used by the dropdown.
 	 */
 	constructor( editor, { commandName, icon, componentName, dropdownLabel } ) {
 		super( editor );
@@ -54,13 +54,13 @@ export default class ColorUI extends Plugin {
 		this.componentName = componentName;
 
 		/**
-		 * SVG icon used by the dropdown.
+		 * The SVG icon used by the dropdown.
 		 * @type {String}
 		 */
 		this.icon = icon;
 
 		/**
-		 * Label used by the dropdown.
+		 * The label used by the dropdown.
 		 *
 		 * @type {String}
 		 */

+ 6 - 6
packages/ckeditor5-font/src/utils.js

@@ -25,7 +25,7 @@ export const FONT_FAMILY = 'fontFamily';
 export const FONT_COLOR = 'fontColor';
 
 /**
- * The name of the font font background color plugin.
+ * The name of the font background color plugin.
  */
 export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
 
@@ -63,7 +63,7 @@ export function buildDefinition( modelAttributeKey, options ) {
  * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
  * responsible for upcasting data to the model.
  *
- * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
+ * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
  *
  * @param {String} styleAttr
  * @return {String}
@@ -77,7 +77,7 @@ export function renderUpcastAttribute( styleAttr ) {
  * {@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'`.
+ * **Note**: The `styleAttr` parameter should be either `'color'` or `'background-color'`.
  *
  * @param {String} styleAttr
  */
@@ -101,7 +101,7 @@ export function normalizeColorOptions( options ) {
 }
 
 /**
- * Helper that adds {@link module:font/ui/colortableview~ColorTableView} to a dropdown with proper initial values.
+ * A helper that adds {@link module:font/ui/colortableview~ColorTableView} to the color dropdown with proper initial values.
  *
  * @param {Object} config The configuration object.
  * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView The dropdown view to which
@@ -109,8 +109,8 @@ export function normalizeColorOptions( options ) {
  * @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 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.
+ * @param {String} config.documentColorsLabel The label for the section with document colors.
+ * @param {String} config.documentColorsCount The number of document colors inside the dropdown.
  * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  */
 export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel, documentColorsLabel, documentColorsCount } ) {