8
0
Просмотр исходного кода

Docs: Font color and background color API docs and guide corrected. [skip ci]

Anna Tomanek 6 лет назад
Родитель
Сommit
62df36c62f

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

@@ -6,7 +6,7 @@ category: api-reference
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-font.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-font)
 
-This package implements the font family and font size features for CKEditor 5.
+This package implements the font family, font size as well as font and background color features for CKEditor 5.
 
 ## Demo
 

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

@@ -147,7 +147,7 @@ ClassicEditor
 
 {@snippet features/custom-font-size-numeric-options}
 
-## Configuring font color and font background color features
+## Configuring the font color and font background color features
 
 Both font color and font background color features are configurable and share the same configuration format.
 
@@ -159,7 +159,7 @@ Check out the editor below with both features customized using the editor config
 
 {@snippet features/custom-font-color-and-background-color-options}
 
-### Specifying the available colors
+### Specifying available colors
 
 It is possible to configure which colors are available in the color dropdown. Use the {@link module:font/fontcolor~FontColorConfig#colors `fontColor.colors`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#colors `fontBackgroundColor.colors`} configuration options to do so.
 
@@ -229,7 +229,7 @@ ClassicEditor
 
 ### Changing the geometry of the color grid
 
-It is also possible to configure in how many columns the colors in the grid are displayed. Use {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`} to do so.
+It is also possible to configure in how many columns the colors in the grid are displayed. Use the {@link module:font/fontcolor~FontColorConfig#columns `fontColor.columns`} and {@link module:font/fontbackgroundcolor~FontBackgroundColorConfig#columns `fontBackgroundColor.columns`} options to do so.
 
 ```js
 ClassicEditor
@@ -274,7 +274,7 @@ ClassicEditor
 	.catch( ... );
 ```
 
-You can also add one of the font features to your plugin list and the toolbar configuration:
+You can also add just one or a selected few of the font features to your plugin list and the toolbar configuration:
 
 ```js
 import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
@@ -294,9 +294,9 @@ ClassicEditor
 
 ## Common API
 
-The {@link module:font/fontfamily~FontFamily} plugin registers:
+The {@link module:font/fontfamily~FontFamily} plugin registers the following components:
 
-* The `'fontFamily'` dropdown,
+* The `'fontFamily'` dropdown.
 * The {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand `'fontFamily'`} command.
 
 	The number of options and their names correspond to the {@link module:font/fontfamily~FontFamilyConfig#options `fontFamily.options`} configuration option.
@@ -342,7 +342,7 @@ The {@link module:font/fontfamily~FontFamily} plugin registers:
 
 The {@link module:font/fontsize~FontSize} plugin registers the following components:
 
-* The `'fontSize'` dropdown,
+* The `'fontSize'` dropdown.
 * The {@link module:font/fontsize/fontsizecommand~FontSizeCommand `'fontSize'`} command.
 
 	The number of options and their names correspond to the {@link module:font/fontsize~FontSizeConfig#options `fontSize.options`} configuration option.
@@ -365,7 +365,7 @@ The {@link module:font/fontsize~FontSize} plugin registers the following compone
 
 The {@link module:font/fontcolor~FontColor} plugin registers the following components:
 
-* The `'fontColor'` dropdown,
+* The `'fontColor'` dropdown.
 * The {@link module:font/fontcolor/fontcolorcommand~FontColorCommand `'fontColor'`} command.
 
 	You can change the font color of the current selection by executing the command with a desired value:
@@ -382,7 +382,7 @@ The {@link module:font/fontcolor~FontColor} plugin registers the following compo
 
 The {@link module:font/fontbackgroundcolor~FontBackgroundColor} plugin registers the following components:
 
-* The `'fontBackgroundColor'` dropdown,
+* The `'fontBackgroundColor'` dropdown.
 * The {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand `'fontBackgroundColor'`} command.
 
 	You can change the font background color of the current selection by executing the command with a desired value:

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

@@ -132,7 +132,7 @@ export default class FontBackgroundColor extends Plugin {
  */
 
 /**
- * Represents the amount of columns in the dropdown. The default value is:
+ * Represents the number of columns in the dropdown. The default value is:
  *
  *		const fontBackgroundColorConfig = {
  *			columns: 5

+ 1 - 1
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorcommand.js

@@ -11,7 +11,7 @@ import FontCommand from '../fontcommand';
 import { FONT_BACKGROUND_COLOR } from '../utils';
 
 /**
- * The font background color command. It's used by the
+ * The font background color command. It is used by
  * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
  * to apply the font background color.
  *

+ 1 - 1
packages/ckeditor5-font/src/fontbackgroundcolor/fontbackgroundcolorediting.js

@@ -115,7 +115,7 @@ export default class FontBackgroundColorEditing extends Plugin {
 
 		editor.commands.add( FONT_BACKGROUND_COLOR, new FontBackgroundColorCommand( editor ) );
 
-		// Allow fontBackgroundColor attribute on text nodes.
+		// Allow the font backgroundColor attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_BACKGROUND_COLOR } );
 
 		editor.model.schema.setAttributeProperties( FONT_BACKGROUND_COLOR, { isFormatting: true } );

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

@@ -131,7 +131,7 @@ export default class FontColor extends Plugin {
  */
 
 /**
- * Represents the amount of columns in the dropdown. The default value is:
+ * Represents the number of columns in the dropdown. The default value is:
  *
  *		const fontColorConfig = {
  *			columns: 5

+ 1 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorcommand.js

@@ -11,7 +11,7 @@ import FontCommand from '../fontcommand';
 import { FONT_COLOR } from '../utils';
 
 /**
- * The font color command. It's used by the {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
+ * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
  * to apply the font color.
  *
  *		editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );

+ 1 - 1
packages/ckeditor5-font/src/fontcolor/fontcolorediting.js

@@ -115,7 +115,7 @@ export default class FontColorEditing extends Plugin {
 
 		editor.commands.add( FONT_COLOR, new FontColorCommand( editor ) );
 
-		// Allow fontColor attribute on text nodes.
+		// Allow the font color attribute on text nodes.
 		editor.model.schema.extend( '$text', { allowAttributes: FONT_COLOR } );
 
 		editor.model.schema.setAttributeProperties( FONT_COLOR, { isFormatting: true } );

+ 18 - 18
packages/ckeditor5-font/src/ui/colortableview.js

@@ -17,23 +17,23 @@ import removeButtonIcon from '@ckeditor/ckeditor5-core/theme/icons/eraser.svg';
 import '../../theme/fontcolor.css';
 
 /**
- * Class which represents a view with the following sub–components:
+ * A class which represents a view with the following sub–components:
  *
- * * a remove color button,
- * * a {@link module:ui/colorgrid/colorgrid~ColorGridView}.
+ * * A remove color button,
+ * * A {@link module:ui/colorgrid/colorgrid~ColorGridView}.
  *
  * @extends module:ui/view~View
  */
 export default class ColorTableView extends View {
 	/**
-	 * Creates a view to be inserted as child of {@link module:ui/dropdown/dropdownview~DropdownView}.
+	 * Creates a view to be inserted as a child of {@link module:ui/dropdown/dropdownview~DropdownView}.
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
-	 * @param {Object} config Configuration object
-	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors Array with definitions of colors to
+	 * @param {Object} config The configuration object.
+	 * @param {Array.<module:ui/colorgrid/colorgrid~ColorDefinition>} config.colors An array with definitions of colors to
 	 * be displayed in the table.
-	 * @param {Number} config.columns Number of columns in the color grid.
-	 * @param {String} config.removeButtonLabel A label of a button responsible for removing the color.
+	 * @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.
 	 */
 	constructor( locale, { colors, columns, removeButtonLabel } ) {
 		super( locale );
@@ -62,7 +62,7 @@ export default class ColorTableView extends View {
 		this.focusTracker = new FocusTracker();
 
 		/**
-		 * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
 		 *
 		 * @readonly
 		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
@@ -70,21 +70,21 @@ export default class ColorTableView extends View {
 		this.keystrokes = new KeystrokeHandler();
 
 		/**
-		 * Keeps value of the command associated with the table for current selection.
+		 * Keeps value of the command associated with the table for the current selection.
 		 *
 		 * @type {String}
 		 */
 		this.set( 'selectedColor' );
 
 		/**
-		 * A label of the button responsible for removing color attributes.
+		 * The label of the button responsible for removing color attributes.
 		 *
 		 * @type {String}
 		 */
 		this.removeButtonLabel = removeButtonLabel;
 
 		/**
-		 * The number of columns in color grid.
+		 * The number of columns in the color grid.
 		 *
 		 * @type {Number}
 		 */
@@ -102,10 +102,10 @@ export default class ColorTableView extends View {
 			focusTracker: this.focusTracker,
 			keystrokeHandler: this.keystrokes,
 			actions: {
-				// Navigate list items backwards using the arrowup key.
+				// Navigate list items backwards using the Arrow Up key.
 				focusPrevious: 'arrowup',
 
-				// Navigate list items forwards using the arrowdown key.
+				// Navigate list items forwards using the Arrow Down key.
 				focusNext: 'arrowdown',
 			}
 		} );
@@ -126,7 +126,7 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Adds the remove color button as child for current view.
+	 * Adds the remove color button as a child of the current view.
 	 *
 	 * @private
 	 */
@@ -149,7 +149,7 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Creates a static color table grid based on editor config.
+	 * Creates a static color table grid based on the editor configuration.
 	 *
 	 * @private
 	 */
@@ -181,14 +181,14 @@ export default class ColorTableView extends View {
 	}
 
 	/**
-	 * Focuses the first focusable in {@link #items}.
+	 * Focuses the first focusable element in {@link #items}.
 	 */
 	focus() {
 		this._focusCycler.focusFirst();
 	}
 
 	/**
-	 * Focuses the last focusable in {@link #items}.
+	 * Focuses the last focusable element in {@link #items}.
 	 */
 	focusLast() {
 		this._focusCycler.focusLast();

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

@@ -18,19 +18,19 @@ import {
 /**
  * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
  *
- * It is used to create the `'fontBackgroundColor'` and the `'fontColor'` dropdowns, each hosting
+ * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
  * a {@link module:font/ui/colortableview~ColorTableView}.
  *
  * @extends module:core/plugin~Plugin
  */
 export default class ColorUI extends Plugin {
 	/**
-	 * Creates a plugin which brings dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}
+	 * Creates a plugin which introduces a dropdown with a pre–configured {@link module:font/ui/colortableview~ColorTableView}.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor
-	 * @param {Object} config Configuration object
-	 * @param {String} config.commandName Name of command which will be executed when a color tile is clicked.
-	 * @param {String} config.componentName Name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
+	 * @param {Object} config The configuration object.
+	 * @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.
@@ -39,13 +39,13 @@ export default class ColorUI extends Plugin {
 		super( editor );
 
 		/**
-		 * Name of the command which will be executed when a color tile is clicked.
+		 * The name of the command which will be executed when a color tile is clicked.
 		 * @type {String}
 		 */
 		this.commandName = commandName;
 
 		/**
-		 * Name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
+		 * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
 		 * Also the configuration scope name in `editor.config`.
 		 * @type {String}
 		 */
@@ -64,7 +64,7 @@ export default class ColorUI extends Plugin {
 		this.dropdownLabel = dropdownLabel;
 
 		/**
-		 * Number of columns in color grid.
+		 * The number of columns in the color grid.
 		 * @type {Number}
 		 */
 		this.columns = editor.config.get( `${ this.componentName }.columns` );
@@ -80,7 +80,7 @@ export default class ColorUI extends Plugin {
 		const colorsConfig = normalizeColorOptions( editor.config.get( this.componentName ).colors );
 		const localizedColors = getLocalizedColorOptions( editor, colorsConfig );
 
-		// Register UI component.
+		// Register the UI component.
 		editor.ui.componentFactory.add( this.componentName, locale => {
 			const dropdownView = createDropdown( locale );
 			const colorTableView = addColorTableToDropdown( {

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

@@ -10,22 +10,22 @@
 import ColorTableView from './ui/colortableview';
 
 /**
- * Name of the font size plugin.
+ * The name of the font size plugin.
  */
 export const FONT_SIZE = 'fontSize';
 
 /**
- * Name of the font family plugin.
+ * The name of the font family plugin.
  */
 export const FONT_FAMILY = 'fontFamily';
 
 /**
- * Name of the font color plugin.
+ * The name of the font color plugin.
  */
 export const FONT_COLOR = 'fontColor';
 
 /**
- * Name of font font background color plugin.
+ * The name of the font font background color plugin.
  */
 export const FONT_BACKGROUND_COLOR = 'fontBackgroundColor';
 
@@ -61,7 +61,7 @@ export function buildDefinition( modelAttributeKey, options ) {
 /**
  * A {@link module:font/fontcolor~FontColor font color} and
  * {@link module:font/fontbackgroundcolor~FontBackgroundColor font background color} helper
- * responsible for upcasting data to model.
+ * responsible for upcasting data to the model.
  *
  * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
  *
@@ -75,7 +75,7 @@ export function renderUpcastAttribute( 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.
+ * responsible for downcasting a color attribute to a `<span>` element.
  *
  * **Note**: `styleAttr` should be either `'color'` or `'background-color'`.
  *
@@ -89,7 +89,7 @@ export function renderDowncastElement( styleAttr ) {
 
 /**
  * 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.
+ * 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>}
@@ -101,14 +101,14 @@ export function normalizeColorOptions( options ) {
 }
 
 /**
- * Helper which add {@link module:font/ui/colortableview~ColorTableView} to a dropdown with proper initial values.
+ * Helper that adds {@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
+ * @param {Object} config The configuration object.
+ * @param {module:ui/dropdown/dropdownview~DropdownView} config.dropdownView The 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.
+ * @param {String} config.removeButtonLabel The label for the button responsible for removing the color.
  * @returns {module:font/ui/colortableview~ColorTableView} The new color table view.
  */
 export function addColorTableToDropdown( { dropdownView, colors, columns, removeButtonLabel } ) {
@@ -124,7 +124,7 @@ export function addColorTableToDropdown( { dropdownView, colors, columns, remove
 }
 
 /**
- * Returns color configuration options as defined in the `editor.config.(fontColor|fontBackgroundColor).colors`
+ * 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.
  *
@@ -166,7 +166,7 @@ export function getLocalizedColorOptions( editor, options ) {
 	} );
 }
 
-// Fixes color value string
+// Fixes the color value string.
 //
 // @param {String} value
 // @returns {String}
@@ -174,7 +174,7 @@ function normalizeColorCode( value ) {
 	return value.replace( /\s/g, '' );
 }
 
-// Creates normalized color definition from user defined configuration.
+// Creates a normalized color definition from the user-defined configuration.
 //
 // @param {String|module:ui/colorgrid/colorgrid~ColorDefinition}
 // @returns {module:ui/colorgrid/colorgrid~ColorDefinition}