@ckeditor/ckeditor5-font 41.4.2 → 42.0.0-alpha.1

package/dist/index.js

@@ -7,23 +7,37 @@ import { ColorSelectorView, createDropdown, addListToDropdown, MenuBarMenuView,
 import { Collection, CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { isLength, isPercentage, addBackgroundRules } from '@ckeditor/ckeditor5-engine/dist/index.js';
 
-class FontCommand extends Command {
+/**
+ * The base font command.
+ */ class FontCommand extends Command {
+    /**
+	 * A model attribute on which this command operates.
+	 */ attributeKey;
+    /**
+	 * Creates an instance of the command.
+	 *
+	 * @param editor Editor instance.
+	 * @param attributeKey The name of a model attribute on which this command operates.
+	 */ constructor(editor, attributeKey){
+        super(editor);
+        this.attributeKey = attributeKey;
+    }
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * @inheritDoc
+	 */ refresh() {
         const model = this.editor.model;
         const doc = model.document;
         this.value = doc.selection.getAttribute(this.attributeKey);
         this.isEnabled = model.schema.checkAttributeInSelection(doc.selection, this.attributeKey);
     }
     /**
-     * Executes the command. Applies the `value` of the {@link #attributeKey} to the selection.
-     * If no `value` is passed, it removes the attribute from the selection.
-     *
-     * @param options Options for the executed command.
-     * @param options.value The value to apply.
-     * @fires execute
-     */ execute(options = {}) {
+	 * Executes the command. Applies the `value` of the {@link #attributeKey} to the selection.
+	 * If no `value` is passed, it removes the attribute from the selection.
+	 *
+	 * @param options Options for the executed command.
+	 * @param options.value The value to apply.
+	 * @fires execute
+	 */ execute(options = {}) {
         const model = this.editor.model;
         const document = model.document;
         const selection = document.selection;
@@ -58,15 +72,6 @@ class FontCommand extends Command {
             });
         }
     }
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor Editor instance.
-     * @param attributeKey The name of a model attribute on which this command operates.
-     */ constructor(editor, attributeKey){
-        super(editor);
-        this.attributeKey = attributeKey;
-    }
 }
 
 /**
@@ -155,10 +160,19 @@ class FontCommand extends Command {
     return value.replace(/\s/g, '');
 }
 
-class FontFamilyCommand extends FontCommand {
+/**
+ * The font family command. It is used by {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing}
+ * to apply the font family.
+ *
+ * ```ts
+ * editor.execute( 'fontFamily', { value: 'Arial' } );
+ * ```
+ *
+ * **Note**: Executing the command without the value removes the attribute from the model.
+ */ class FontFamilyCommand extends FontCommand {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor, FONT_FAMILY);
     }
 }
@@ -236,15 +250,42 @@ class FontFamilyCommand extends FontCommand {
     return fontName;
 }
 
-class FontFamilyEditing extends Plugin {
+/**
+ * The font family editing feature.
+ *
+ * It introduces the {@link module:font/fontfamily/fontfamilycommand~FontFamilyCommand command} and
+ * the `fontFamily` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as an inline `<span>` element (`<span style="font-family: Arial">`),
+ * depending on the {@link module:font/fontconfig~FontFamilyConfig configuration}.
+ */ class FontFamilyEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontFamilyEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        // Define default configuration using font families shortcuts.
+        editor.config.define(FONT_FAMILY, {
+            options: [
+                'default',
+                'Arial, Helvetica, sans-serif',
+                'Courier New, Courier, monospace',
+                'Georgia, serif',
+                'Lucida Sans Unicode, Lucida Grande, sans-serif',
+                'Tahoma, Geneva, sans-serif',
+                'Times New Roman, Times, serif',
+                'Trebuchet MS, Helvetica, sans-serif',
+                'Verdana, Geneva, sans-serif'
+            ],
+            supportAllValues: false
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         // Allow fontFamily attribute on text nodes.
         editor.model.schema.extend('$text', {
@@ -267,9 +308,9 @@ class FontFamilyEditing extends Plugin {
         editor.commands.add(FONT_FAMILY, new FontFamilyCommand(editor));
     }
     /**
-     * These converters enable keeping any value found as `style="font-family: *"` as a value of an attribute on a text even
-     * if it is not defined in the plugin configuration.
-     */ _prepareAnyValueConverters() {
+	 * These converters enable keeping any value found as `style="font-family: *"` as a value of an attribute on a text even
+	 * if it is not defined in the plugin configuration.
+	 */ _prepareAnyValueConverters() {
         const editor = this.editor;
         editor.conversion.for('downcast').attributeToElement({
             model: FONT_FAMILY,
@@ -295,8 +336,8 @@ class FontFamilyEditing extends Plugin {
         });
     }
     /**
-     * Adds support for legacy `<font face="..">` formatting.
-     */ _prepareCompatibilityConverter() {
+	 * Adds support for legacy `<font face="..">` formatting.
+	 */ _prepareCompatibilityConverter() {
         const editor = this.editor;
         editor.conversion.for('upcast').elementToAttribute({
             view: {
@@ -311,39 +352,21 @@ class FontFamilyEditing extends Plugin {
             }
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        // Define default configuration using font families shortcuts.
-        editor.config.define(FONT_FAMILY, {
-            options: [
-                'default',
-                'Arial, Helvetica, sans-serif',
-                'Courier New, Courier, monospace',
-                'Georgia, serif',
-                'Lucida Sans Unicode, Lucida Grande, sans-serif',
-                'Tahoma, Geneva, sans-serif',
-                'Times New Roman, Times, serif',
-                'Trebuchet MS, Helvetica, sans-serif',
-                'Verdana, Geneva, sans-serif'
-            ],
-            supportAllValues: false
-        });
-    }
 }
 
 var fontFamilyIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M11.03 3h6.149a.75.75 0 1 1 0 1.5h-5.514L11.03 3zm1.27 3h4.879a.75.75 0 1 1 0 1.5h-4.244L12.3 6zm1.27 3h3.609a.75.75 0 1 1 0 1.5h-2.973L13.57 9zm-2.754 2.5L8.038 4.785 5.261 11.5h5.555zm.62 1.5H4.641l-1.666 4.028H1.312l5.789-14h1.875l5.789 14h-1.663L11.436 13z\"/></svg>";
 
-class FontFamilyUI extends Plugin {
+/**
+ * The font family UI plugin. It introduces the `'fontFamily'` dropdown.
+ */ class FontFamilyUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontFamilyUI';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const options = this._getLocalizedOptions();
@@ -405,13 +428,13 @@ class FontFamilyUI extends Plugin {
         });
     }
     /**
-     * Returns options as defined in `config.fontFamily.options` but processed to account for
-     * editor localization, i.e. to display {@link module:font/fontconfig~FontFamilyOption}
-     * 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.
-     */ _getLocalizedOptions() {
+	 * Returns options as defined in `config.fontFamily.options` but processed to account for
+	 * editor localization, i.e. to display {@link module:font/fontconfig~FontFamilyOption}
+	 * 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.
+	 */ _getLocalizedOptions() {
         const editor = this.editor;
         const t = editor.t;
         const options = normalizeOptions$1(editor.config.get(FONT_FAMILY).options);
@@ -459,26 +482,43 @@ class FontFamilyUI extends Plugin {
     return itemDefinitions;
 }
 
-class FontFamily extends Plugin {
+/**
+ * The font family plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentatiom
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:font/fontfamily/fontfamilyediting~FontFamilyEditing} and
+ * {@link module:font/fontfamily/fontfamilyui~FontFamilyUI} features in the editor.
+ */ class FontFamily extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FontFamilyEditing,
             FontFamilyUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontFamily';
     }
 }
 
-class FontSizeCommand extends FontCommand {
+/**
+ * The font size command. It is used by {@link module:font/fontsize/fontsizeediting~FontSizeEditing}
+ * to apply the font size.
+ *
+ * ```ts
+ * editor.execute( 'fontSize', { value: 'small' } );
+ * ```
+ *
+ * **Note**: Executing the command without the value removes the attribute from the model.
+ */ class FontSizeCommand extends FontCommand {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor, FONT_SIZE);
     }
 }
@@ -616,12 +656,12 @@ function isNumericalDefinition(definition) {
     if (typeof definition === 'object') {
         if (!definition.model) {
             /**
-             * Provided value as an option for {@link module:font/fontsize~FontSize} seems to invalid.
-             *
-             * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
-             *
-             * @error font-size-invalid-definition
-             */ throw new CKEditorError('font-size-invalid-definition', null, definition);
+			 * Provided value as an option for {@link module:font/fontsize~FontSize} seems to invalid.
+			 *
+			 * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
+			 *
+			 * @error font-size-invalid-definition
+			 */ throw new CKEditorError('font-size-invalid-definition', null, definition);
         } else {
             numberValue = parseFloat(definition.model);
         }
@@ -642,15 +682,41 @@ const styleFontSize = [
     'xx-large',
     'xxx-large'
 ];
-class FontSizeEditing extends Plugin {
+/**
+ * The font size editing feature.
+ *
+ * It introduces the {@link module:font/fontsize/fontsizecommand~FontSizeCommand command} and the `fontSize`
+ * attribute in the {@link module:engine/model/model~Model model} which renders in the {@link module:engine/view/view view}
+ * as a `<span>` element with either:
+ * * a style attribute (`<span style="font-size:12px">...</span>`),
+ * * or a class attribute (`<span class="text-small">...</span>`)
+ *
+ * depending on the {@link module:font/fontconfig~FontSizeConfig configuration}.
+ */ class FontSizeEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontSizeEditing';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        // Define default configuration using named presets.
+        editor.config.define(FONT_SIZE, {
+            options: [
+                'tiny',
+                'small',
+                'default',
+                'big',
+                'huge'
+            ],
+            supportAllValues: false
+        });
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         // Allow fontSize attribute on text nodes.
         editor.model.schema.extend('$text', {
@@ -675,11 +741,11 @@ class FontSizeEditing extends Plugin {
         editor.commands.add(FONT_SIZE, new FontSizeCommand(editor));
     }
     /**
-     * These converters enable keeping any value found as `style="font-size: *"` as a value of an attribute on a text even
-     * if it is not defined in the plugin configuration.
-     *
-     * @param definition Converter definition out of input data.
-     */ _prepareAnyValueConverters(definition) {
+	 * These converters enable keeping any value found as `style="font-size: *"` as a value of an attribute on a text even
+	 * if it is not defined in the plugin configuration.
+	 *
+	 * @param definition Converter definition out of input data.
+	 */ _prepareAnyValueConverters(definition) {
         const editor = this.editor;
         // If `fontSize.supportAllValues=true`, we do not allow to use named presets in the plugin's configuration.
         const presets = definition.model.values.filter((value)=>{
@@ -687,14 +753,14 @@ class FontSizeEditing extends Plugin {
         });
         if (presets.length) {
             /**
-             * If {@link module:font/fontconfig~FontSizeConfig#supportAllValues `config.fontSize.supportAllValues`} is `true`,
-             * you need to use numerical values as font size options.
-             *
-             * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
-             *
-             * @error font-size-invalid-use-of-named-presets
-             * @param {Array.<String>} presets Invalid values.
-             */ throw new CKEditorError('font-size-invalid-use-of-named-presets', null, {
+			 * If {@link module:font/fontconfig~FontSizeConfig#supportAllValues `config.fontSize.supportAllValues`} is `true`,
+			 * you need to use numerical values as font size options.
+			 *
+			 * See valid examples described in the {@link module:font/fontconfig~FontSizeConfig#options plugin configuration}.
+			 *
+			 * @error font-size-invalid-use-of-named-presets
+			 * @param {Array.<String>} presets Invalid values.
+			 */ throw new CKEditorError('font-size-invalid-use-of-named-presets', null, {
                 presets
             });
         }
@@ -725,8 +791,8 @@ class FontSizeEditing extends Plugin {
         });
     }
     /**
-     * Adds support for legacy `<font size="..">` formatting.
-     */ _prepareCompatibilityConverter() {
+	 * Adds support for legacy `<font size="..">` formatting.
+	 */ _prepareCompatibilityConverter() {
         const editor = this.editor;
         editor.conversion.for('upcast').elementToAttribute({
             view: {
@@ -755,35 +821,21 @@ class FontSizeEditing extends Plugin {
             }
         });
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        // Define default configuration using named presets.
-        editor.config.define(FONT_SIZE, {
-            options: [
-                'tiny',
-                'small',
-                'default',
-                'big',
-                'huge'
-            ],
-            supportAllValues: false
-        });
-    }
 }
 
 var fontSizeIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M9.816 11.5 7.038 4.785 4.261 11.5h5.555zm.62 1.5H3.641l-1.666 4.028H.312l5.789-14h1.875l5.789 14h-1.663L10.436 13zm7.55 2.279.779-.779.707.707-2.265 2.265-2.193-2.265.707-.707.765.765V4.825c0-.042 0-.083.002-.123l-.77.77-.707-.707L17.207 2.5l2.265 2.265-.707.707-.782-.782c.002.043.003.089.003.135v10.454z\"/></svg>";
 
-class FontSizeUI extends Plugin {
+/**
+ * The font size UI plugin. It introduces the `'fontSize'` dropdown.
+ */ class FontSizeUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontSizeUI';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const t = editor.t;
         const options = this._getLocalizedOptions();
@@ -848,13 +900,13 @@ class FontSizeUI extends Plugin {
         });
     }
     /**
-     * Returns options as defined in `config.fontSize.options` but processed to account for
-     * editor localization, i.e. to display {@link module:font/fontconfig~FontSizeOption}
-     * 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.
-     */ _getLocalizedOptions() {
+	 * Returns options as defined in `config.fontSize.options` but processed to account for
+	 * editor localization, i.e. to display {@link module:font/fontconfig~FontSizeOption}
+	 * 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.
+	 */ _getLocalizedOptions() {
         const editor = this.editor;
         const t = editor.t;
         const localizedTitles = {
@@ -908,47 +960,71 @@ class FontSizeUI extends Plugin {
     return itemDefinitions;
 }
 
-class FontSize extends Plugin {
+/**
+ * The font size plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentation
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:font/fontsize/fontsizeediting~FontSizeEditing} and
+ * {@link module:font/fontsize/fontsizeui~FontSizeUI} features in the editor.
+ */ class FontSize extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FontSizeEditing,
             FontSizeUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontSize';
     }
     /**
-     * Normalizes and translates the {@link module:font/fontconfig~FontSizeConfig#options configuration options}
-     * to the {@link module:font/fontconfig~FontSizeOption} format.
-     *
-     * @param configuredOptions An array of options taken from the configuration.
-     */ normalizeSizeOptions(options) {
+	 * Normalizes and translates the {@link module:font/fontconfig~FontSizeConfig#options configuration options}
+	 * to the {@link module:font/fontconfig~FontSizeOption} format.
+	 *
+	 * @param configuredOptions An array of options taken from the configuration.
+	 */ normalizeSizeOptions(options) {
         return normalizeOptions(options);
     }
 }
 
-class FontColorCommand extends FontCommand {
+/**
+ * The font color command. It is used by {@link module:font/fontcolor/fontcolorediting~FontColorEditing}
+ * to apply the font color.
+ *
+ * ```ts
+ * editor.execute( 'fontColor', { value: 'rgb(250, 20, 20)' } );
+ * ```
+ *
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
+ */ class FontColorCommand extends FontCommand {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor, FONT_COLOR);
     }
 }
 
-class FontColorEditing extends Plugin {
+/**
+ * The font color editing feature.
+ *
+ * It introduces the {@link module:font/fontcolor/fontcolorcommand~FontColorCommand command} and
+ * the `fontColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="color: ...">`),
+ * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
+ */ class FontColorEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontColorEditing';
     }
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor);
         editor.config.define(FONT_COLOR, {
             colors: [
@@ -1057,10 +1133,49 @@ class FontColorEditing extends Plugin {
     }
 }
 
-class ColorUI extends Plugin {
+/**
+ * The color UI plugin which isolates the common logic responsible for displaying dropdowns with color grids.
+ *
+ * It is used to create the `'fontBackgroundColor'` and `'fontColor'` dropdowns, each hosting
+ * a {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
+ */ class ColorUI extends Plugin {
+    /**
+	 * The name of the command which will be executed when a color tile is clicked.
+	 */ commandName;
+    /**
+	 * The name of this component in the {@link module:ui/componentfactory~ComponentFactory}.
+	 * Also the configuration scope name in `editor.config`.
+	 */ componentName;
+    /**
+	 * The SVG icon used by the dropdown.
+	 */ icon;
+    /**
+	 * The label used by the dropdown.
+	 */ dropdownLabel;
+    /**
+	 * The number of columns in the color grid.
+	 */ columns;
+    /**
+	 * Creates a plugin which introduces a dropdown with a pre–configured
+	 * {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
+	 *
+	 * @param config The configuration object.
+	 * @param config.commandName The name of the command which will be executed when a color tile is clicked.
+	 * @param config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
+	 * and the configuration scope name in `editor.config`.
+	 * @param config.icon The SVG icon used by the dropdown.
+	 * @param config.dropdownLabel The label used by the dropdown.
+	 */ constructor(editor, { commandName, componentName, icon, dropdownLabel }){
+        super(editor);
+        this.commandName = commandName;
+        this.componentName = componentName;
+        this.icon = icon;
+        this.dropdownLabel = dropdownLabel;
+        this.columns = editor.config.get(`${this.componentName}.columns`);
+    }
     /**
-    * @inheritDoc
-    */ init() {
+	* @inheritDoc
+	*/ init() {
         const editor = this.editor;
         const locale = editor.locale;
         const t = locale.t;
@@ -1199,37 +1314,16 @@ class ColorUI extends Plugin {
             return menuView;
         });
     }
-    /**
-     * Creates a plugin which introduces a dropdown with a pre–configured
-     * {@link module:ui/colorselector/colorselectorview~ColorSelectorView}.
-     *
-     * @param config The configuration object.
-     * @param config.commandName The name of the command which will be executed when a color tile is clicked.
-     * @param config.componentName The name of the dropdown in the {@link module:ui/componentfactory~ComponentFactory}
-     * and the configuration scope name in `editor.config`.
-     * @param config.icon The SVG icon used by the dropdown.
-     * @param config.dropdownLabel The label used by the dropdown.
-     */ constructor(editor, { commandName, componentName, icon, dropdownLabel }){
-        super(editor);
-        this.commandName = commandName;
-        this.componentName = componentName;
-        this.icon = icon;
-        this.dropdownLabel = dropdownLabel;
-        this.columns = editor.config.get(`${this.componentName}.columns`);
-    }
 }
 
 var fontColorIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M12.4 10.3 10 4.5l-2.4 5.8h4.8zm.5 1.2H7.1L5.7 15H4.2l5-12h1.6l5 12h-1.5L13 11.5zm3.1 7H4a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2z\"/></svg>";
 
-class FontColorUI extends ColorUI {
-    /**
-     * @inheritDoc
-     */ static get pluginName() {
-        return 'FontColorUI';
-    }
+/**
+ * The font color UI plugin. It introduces the `'fontColor'` dropdown.
+ */ class FontColorUI extends ColorUI {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         const t = editor.locale.t;
         super(editor, {
             commandName: FONT_COLOR,
@@ -1238,41 +1332,71 @@ class FontColorUI extends ColorUI {
             dropdownLabel: t('Font Color')
         });
     }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'FontColorUI';
+    }
 }
 
-class FontColor extends Plugin {
+/**
+ * The font color plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentation
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads the {@link module:font/fontcolor/fontcolorediting~FontColorEditing} and
+ * {@link module:font/fontcolor/fontcolorui~FontColorUI} features in the editor.
+ */ class FontColor extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FontColorEditing,
             FontColorUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontColor';
     }
 }
 
-class FontBackgroundColorCommand extends FontCommand {
+/**
+ * The font background color command. It is used by
+ * {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing}
+ * to apply the font background color.
+ *
+ * ```ts
+ * editor.execute( 'fontBackgroundColor', { value: 'rgb(250, 20, 20)' } );
+ * ```
+ *
+ * **Note**: Executing the command with the `null` value removes the attribute from the model.
+ */ class FontBackgroundColorCommand extends FontCommand {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor, FONT_BACKGROUND_COLOR);
     }
 }
 
-class FontBackgroundColorEditing extends Plugin {
+/**
+ * The font background color editing feature.
+ *
+ * It introduces the {@link module:font/fontbackgroundcolor/fontbackgroundcolorcommand~FontBackgroundColorCommand command} and
+ * the `fontBackgroundColor` attribute in the {@link module:engine/model/model~Model model} which renders
+ * in the {@link module:engine/view/view view} as a `<span>` element (`<span style="background-color: ...">`),
+ * depending on the {@link module:font/fontconfig~FontColorConfig configuration}.
+ */ class FontBackgroundColorEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontBackgroundColorEditing';
     }
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         super(editor);
         editor.config.define(FONT_BACKGROUND_COLOR, {
             colors: [
@@ -1371,15 +1495,12 @@ class FontBackgroundColorEditing extends Plugin {
 
 var fontBackgroundColorIcon = "<svg viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M4 2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8.38 9.262H7.62L10 5.506l2.38 5.756zm.532 1.285L14.34 16h1.426L10.804 4H9.196L4.234 16H5.66l1.428-3.453h5.824z\"/></svg>";
 
-class FontBackgroundColorUI extends ColorUI {
-    /**
-     * @inheritDoc
-     */ static get pluginName() {
-        return 'FontBackgroundColorUI';
-    }
+/**
+ * The font background color UI plugin. It introduces the `'fontBackgroundColor'` dropdown.
+ */ class FontBackgroundColorUI extends ColorUI {
     /**
-     * @inheritDoc
-     */ constructor(editor){
+	 * @inheritDoc
+	 */ constructor(editor){
         const t = editor.locale.t;
         super(editor, {
             commandName: FONT_BACKGROUND_COLOR,
@@ -1388,28 +1509,52 @@ class FontBackgroundColorUI extends ColorUI {
             dropdownLabel: t('Font Background Color')
         });
     }
+    /**
+	 * @inheritDoc
+	 */ static get pluginName() {
+        return 'FontBackgroundColorUI';
+    }
 }
 
-class FontBackgroundColor extends Plugin {
+/**
+ * The font background color plugin.
+ *
+ * For a detailed overview, check the {@glink features/font font feature} documentation
+ * and the {@glink api/font package page}.
+ *
+ * This is a "glue" plugin which loads
+ * the {@link module:font/fontbackgroundcolor/fontbackgroundcolorediting~FontBackgroundColorEditing} and
+ * {@link module:font/fontbackgroundcolor/fontbackgroundcolorui~FontBackgroundColorUI} features in the editor.
+ */ class FontBackgroundColor extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FontBackgroundColorEditing,
             FontBackgroundColorUI
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'FontBackgroundColor';
     }
 }
 
-class Font extends Plugin {
+/**
+ * A plugin that enables a set of text styling features:
+ *
+ * * {@link module:font/fontsize~FontSize},
+ * * {@link module:font/fontfamily~FontFamily}.
+ * * {@link module:font/fontcolor~FontColor},
+ * * {@link module:font/fontbackgroundcolor~FontBackgroundColor}.
+ *
+ * For a detailed overview, check the {@glink features/font Font feature} documentation
+ * and the {@glink api/font package page}.
+ */ class Font extends Plugin {
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             FontFamily,
             FontSize,
@@ -1418,8 +1563,8 @@ class Font extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'Font';
     }
 }