@ckeditor/ckeditor5-style 41.4.2 → 42.0.0-alpha.0

package/dist/index.js

@@ -8,10 +8,39 @@ import { FocusTracker, KeystrokeHandler, first, logWarning } from '@ckeditor/cke
 import { isObject } from 'lodash-es';
 import { findAttributeRange, findAttributeRangeBound } from '@ckeditor/ckeditor5-typing/dist/index.js';
 
-class StyleGridButtonView extends ButtonView {
+/**
+ * A class representing an individual button (style) in the grid. Renders a rich preview of the style.
+ */ class StyleGridButtonView extends ButtonView {
+    /**
+	 * Definition of the style the button will apply when executed.
+	 */ styleDefinition;
+    /**
+	 * The view rendering the preview of the style.
+	 */ previewView;
     /**
-     * Creates the view representing the preview of the style.
-     */ _createPreview() {
+	 * Creates an instance of the {@link module:style/ui/stylegridbuttonview~StyleGridButtonView} class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param styleDefinition Definition of the style.
+	 */ constructor(locale, styleDefinition){
+        super(locale);
+        this.styleDefinition = styleDefinition;
+        this.previewView = this._createPreview();
+        this.set({
+            label: styleDefinition.name,
+            class: 'ck-style-grid__button',
+            withText: true
+        });
+        this.extendTemplate({
+            attributes: {
+                role: 'option'
+            }
+        });
+        this.children.add(this.previewView, 0);
+    }
+    /**
+	 * Creates the view representing the preview of the style.
+	 */ _createPreview() {
         const previewView = new View(this.locale);
         previewView.setTemplate({
             tag: 'div',
@@ -31,65 +60,27 @@ class StyleGridButtonView extends ButtonView {
         });
         return previewView;
     }
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegridbuttonview~StyleGridButtonView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinition Definition of the style.
-     */ constructor(locale, styleDefinition){
-        super(locale);
-        this.styleDefinition = styleDefinition;
-        this.previewView = this._createPreview();
-        this.set({
-            label: styleDefinition.name,
-            class: 'ck-style-grid__button',
-            withText: true
-        });
-        this.extendTemplate({
-            attributes: {
-                role: 'option'
-            }
-        });
-        this.children.add(this.previewView, 0);
-    }
 }
 
-class StyleGridView extends View {
+/**
+ * A class representing a grid of styles ({@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}).
+ * Allows users to select a style.
+ */ class StyleGridView extends View {
     /**
-     * @inheritDoc
-     */ render() {
-        super.render();
-        for (const child of this.children){
-            this.focusTracker.add(child.element);
-        }
-        addKeyboardHandlingForGrid({
-            keystrokeHandler: this.keystrokes,
-            focusTracker: this.focusTracker,
-            gridItems: this.children,
-            numberOfColumns: 3,
-            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
-        });
-        // Start listening for the keystrokes coming from the grid view.
-        this.keystrokes.listenTo(this.element);
-    }
+	 * Tracks information about the DOM focus in the view.
+	 */ focusTracker;
     /**
-     * Focuses the first style button in the grid.
-     */ focus() {
-        this.children.first.focus();
-    }
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
     /**
-     * @inheritDoc
-     */ destroy() {
-        super.destroy();
-        this.focusTracker.destroy();
-        this.keystrokes.destroy();
-    }
+	 * A collection of style {@link module:style/ui/stylegridbuttonview~StyleGridButtonView buttons}.
+	 */ children;
     /**
-     * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinitions Definitions of the styles.
-     */ constructor(locale, styleDefinitions){
+	 * Creates an instance of the {@link module:style/ui/stylegridview~StyleGridView} class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param styleDefinitions Definitions of the styles.
+	 */ constructor(locale, styleDefinitions){
         super(locale);
         this.focusTracker = new FocusTracker();
         this.keystrokes = new KeystrokeHandler();
@@ -123,16 +114,55 @@ class StyleGridView extends View {
             children: this.children
         });
     }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        for (const child of this.children){
+            this.focusTracker.add(child.element);
+        }
+        addKeyboardHandlingForGrid({
+            keystrokeHandler: this.keystrokes,
+            focusTracker: this.focusTracker,
+            gridItems: this.children,
+            numberOfColumns: 3,
+            uiLanguageDirection: this.locale && this.locale.uiLanguageDirection
+        });
+        // Start listening for the keystrokes coming from the grid view.
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * Focuses the first style button in the grid.
+	 */ focus() {
+        this.children.first.focus();
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        this.focusTracker.destroy();
+        this.keystrokes.destroy();
+    }
 }
 
-class StyleGroupView extends View {
-    /**
-     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
-     *
-     * @param locale The localization services instance.
-     * @param label The localized label of the group.
-     * @param styleDefinitions Definitions of the styles in the group.
-     */ constructor(locale, label, styleDefinitions){
+/**
+ * A class representing a group of styles (e.g. "block" or "inline").
+ *
+ * Renders a {@link module:style/ui/stylegridview~StyleGridView style grid} and a label.
+ */ class StyleGroupView extends View {
+    /**
+	 * The styles grid of the group.
+	 */ gridView;
+    /**
+	 * The label of the group.
+	 */ labelView;
+    /**
+	 * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param label The localized label of the group.
+	 * @param styleDefinitions Definitions of the styles in the group.
+	 */ constructor(locale, label, styleDefinitions){
         super(locale);
         this.labelView = new LabelView(locale);
         this.labelView.text = label;
@@ -155,35 +185,37 @@ class StyleGroupView extends View {
     }
 }
 
-class StylePanelView extends View {
+/**
+ * A class representing a panel with available content styles. It renders styles in button grids, grouped
+ * in categories.
+ */ class StylePanelView extends View {
     /**
-     * @inheritDoc
-     */ render() {
-        super.render();
-        // Register the views as focusable.
-        this._focusables.add(this.blockStylesGroupView.gridView);
-        this._focusables.add(this.inlineStylesGroupView.gridView);
-        // Register the views in the focus tracker.
-        this.focusTracker.add(this.blockStylesGroupView.gridView.element);
-        this.focusTracker.add(this.inlineStylesGroupView.gridView.element);
-        this.keystrokes.listenTo(this.element);
-    }
+	 * Tracks information about DOM focus in the panel.
+	 */ focusTracker;
     /**
-     * Focuses the first focusable element in the panel.
-     */ focus() {
-        this._focusCycler.focusFirst();
-    }
+	 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+	 */ keystrokes;
     /**
-     * Focuses the last focusable element in the panel.
-     */ focusLast() {
-        this._focusCycler.focusLast();
-    }
+	 * A collection of panel children.
+	 */ children;
     /**
-     * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
-     *
-     * @param locale The localization services instance.
-     * @param styleDefinitions Normalized definitions of the styles.
-     */ constructor(locale, styleDefinitions){
+	 * A view representing block styles group.
+	 */ blockStylesGroupView;
+    /**
+	 * A view representing inline styles group
+	 */ inlineStylesGroupView;
+    /**
+	 * A collection of views that can be focused in the panel.
+	 */ _focusables;
+    /**
+	 * Helps cycling over {@link #_focusables} in the panel.
+	 */ _focusCycler;
+    /**
+	 * Creates an instance of the {@link module:style/ui/stylegroupview~StyleGroupView} class.
+	 *
+	 * @param locale The localization services instance.
+	 * @param styleDefinitions Normalized definitions of the styles.
+	 */ constructor(locale, styleDefinitions){
         super(locale);
         const t = locale.t;
         this.focusTracker = new FocusTracker();
@@ -230,6 +262,28 @@ class StylePanelView extends View {
             children: this.children
         });
     }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        // Register the views as focusable.
+        this._focusables.add(this.blockStylesGroupView.gridView);
+        this._focusables.add(this.inlineStylesGroupView.gridView);
+        // Register the views in the focus tracker.
+        this.focusTracker.add(this.blockStylesGroupView.gridView.element);
+        this.focusTracker.add(this.inlineStylesGroupView.gridView.element);
+        this.keystrokes.listenTo(this.element);
+    }
+    /**
+	 * Focuses the first focusable element in the panel.
+	 */ focus() {
+        this._focusCycler.focusFirst();
+    }
+    /**
+	 * Focuses the last focusable element in the panel.
+	 */ focusLast() {
+        this._focusCycler.focusLast();
+    }
 }
 
 // These are intermediate element names that can't be rendered as style preview because they don't make sense standalone.
@@ -254,37 +308,51 @@ const NON_PREVIEWABLE_ELEMENT_NAMES = [
     'tr'
 ];
 class StyleUtils extends Plugin {
+    _htmlSupport;
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'StyleUtils';
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ constructor(editor){
+        super(editor);
+        this.decorate('isStyleEnabledForBlock');
+        this.decorate('isStyleActiveForBlock');
+        this.decorate('getAffectedBlocks');
+        this.decorate('isStyleEnabledForInlineSelection');
+        this.decorate('isStyleActiveForInlineSelection');
+        this.decorate('getAffectedInlineSelectable');
+        this.decorate('getStylePreview');
+        this.decorate('configureGHSDataFilter');
+    }
+    /**
+	 * @inheritDoc
+	 */ init() {
         this._htmlSupport = this.editor.plugins.get('GeneralHtmlSupport');
     }
     /**
-     * Normalizes {@link module:style/styleconfig~StyleConfig#definitions} in the configuration of the styles feature.
-     * The structure of normalized styles looks as follows:
-     *
-     * ```ts
-     * {
-     * 	block: [
-     * 		<module:style/style~StyleDefinition>,
-     * 		<module:style/style~StyleDefinition>,
-     * 		...
-     * 	],
-     * 	inline: [
-     * 		<module:style/style~StyleDefinition>,
-     * 		<module:style/style~StyleDefinition>,
-     * 		...
-     * 	]
-     * }
-     * ```
-     *
-     * @returns An object with normalized style definitions grouped into `block` and `inline` categories (arrays).
-     */ normalizeConfig(dataSchema, styleDefinitions = []) {
+	 * Normalizes {@link module:style/styleconfig~StyleConfig#definitions} in the configuration of the styles feature.
+	 * The structure of normalized styles looks as follows:
+	 *
+	 * ```ts
+	 * {
+	 * 	block: [
+	 * 		<module:style/style~StyleDefinition>,
+	 * 		<module:style/style~StyleDefinition>,
+	 * 		...
+	 * 	],
+	 * 	inline: [
+	 * 		<module:style/style~StyleDefinition>,
+	 * 		<module:style/style~StyleDefinition>,
+	 * 		...
+	 * 	]
+	 * }
+	 * ```
+	 *
+	 * @returns An object with normalized style definitions grouped into `block` and `inline` categories (arrays).
+	 */ normalizeConfig(dataSchema, styleDefinitions = []) {
         const normalizedDefinitions = {
             block: [],
             inline: []
@@ -331,10 +399,10 @@ class StyleUtils extends Plugin {
         return normalizedDefinitions;
     }
     /**
-     * Verifies if the given style is applicable to the provided block element.
-     *
-     * @internal
-     */ isStyleEnabledForBlock(definition, block) {
+	 * Verifies if the given style is applicable to the provided block element.
+	 *
+	 * @internal
+	 */ isStyleEnabledForBlock(definition, block) {
         const model = this.editor.model;
         const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
         if (!model.schema.checkAttribute(block, attributeName)) {
@@ -343,19 +411,19 @@ class StyleUtils extends Plugin {
         return definition.modelElements.includes(block.name);
     }
     /**
-     * Returns true if the given style is applied to the specified block element.
-     *
-     * @internal
-     */ isStyleActiveForBlock(definition, block) {
+	 * Returns true if the given style is applied to the specified block element.
+	 *
+	 * @internal
+	 */ isStyleActiveForBlock(definition, block) {
         const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
         const ghsAttributeValue = block.getAttribute(attributeName);
         return this.hasAllClasses(ghsAttributeValue, definition.classes);
     }
     /**
-     * Returns an array of block elements that style should be applied to.
-     *
-     * @internal
-     */ getAffectedBlocks(definition, block) {
+	 * Returns an array of block elements that style should be applied to.
+	 *
+	 * @internal
+	 */ getAffectedBlocks(definition, block) {
         if (definition.modelElements.includes(block.name)) {
             return [
                 block
@@ -364,10 +432,10 @@ class StyleUtils extends Plugin {
         return null;
     }
     /**
-     * Verifies if the given style is applicable to the provided document selection.
-     *
-     * @internal
-     */ isStyleEnabledForInlineSelection(definition, selection) {
+	 * Verifies if the given style is applicable to the provided document selection.
+	 *
+	 * @internal
+	 */ isStyleEnabledForInlineSelection(definition, selection) {
         const model = this.editor.model;
         for (const ghsAttributeName of definition.ghsAttributes){
             if (model.schema.checkAttributeInSelection(selection, ghsAttributeName)) {
@@ -377,10 +445,10 @@ class StyleUtils extends Plugin {
         return false;
     }
     /**
-     * Returns true if the given style is applied to the specified document selection.
-     *
-     * @internal
-     */ isStyleActiveForInlineSelection(definition, selection) {
+	 * Returns true if the given style is applied to the specified document selection.
+	 *
+	 * @internal
+	 */ isStyleActiveForInlineSelection(definition, selection) {
         for (const ghsAttributeName of definition.ghsAttributes){
             const ghsAttributeValue = this._getValueFromFirstAllowedNode(selection, ghsAttributeName);
             if (this.hasAllClasses(ghsAttributeValue, definition.classes)) {
@@ -390,17 +458,17 @@ class StyleUtils extends Plugin {
         return false;
     }
     /**
-     * Returns a selectable that given style should be applied to.
-     *
-     * @internal
-     */ getAffectedInlineSelectable(definition, selection) {
+	 * Returns a selectable that given style should be applied to.
+	 *
+	 * @internal
+	 */ getAffectedInlineSelectable(definition, selection) {
         return selection;
     }
     /**
-     * Returns the `TemplateDefinition` used by styles dropdown to render style preview.
-     *
-     * @internal
-     */ getStylePreview(definition, children) {
+	 * Returns the `TemplateDefinition` used by styles dropdown to render style preview.
+	 *
+	 * @internal
+	 */ getStylePreview(definition, children) {
         const { element, classes } = definition;
         return {
             tag: isPreviewable(element) ? element : 'div',
@@ -411,32 +479,32 @@ class StyleUtils extends Plugin {
         };
     }
     /**
-     * Verifies if all classes are present in the given GHS attribute.
-     *
-     * @internal
-     */ hasAllClasses(ghsAttributeValue, classes) {
+	 * Verifies if all classes are present in the given GHS attribute.
+	 *
+	 * @internal
+	 */ hasAllClasses(ghsAttributeValue, classes) {
         return isObject(ghsAttributeValue) && hasClassesProperty(ghsAttributeValue) && classes.every((className)=>ghsAttributeValue.classes.includes(className));
     }
     /**
-     * This is where the styles feature configures the GHS feature. This method translates normalized
-     * {@link module:style/styleconfig~StyleDefinition style definitions} to
-     * {@link module:engine/view/matcher~MatcherObjectPattern matcher patterns} and feeds them to the GHS
-     * {@link module:html-support/datafilter~DataFilter} plugin.
-     *
-     * @internal
-     */ configureGHSDataFilter({ block, inline }) {
+	 * This is where the styles feature configures the GHS feature. This method translates normalized
+	 * {@link module:style/styleconfig~StyleDefinition style definitions} to
+	 * {@link module:engine/view/matcher~MatcherObjectPattern matcher patterns} and feeds them to the GHS
+	 * {@link module:html-support/datafilter~DataFilter} plugin.
+	 *
+	 * @internal
+	 */ configureGHSDataFilter({ block, inline }) {
         const ghsDataFilter = this.editor.plugins.get('DataFilter');
         ghsDataFilter.loadAllowedConfig(block.map(normalizedStyleDefinitionToMatcherPattern));
         ghsDataFilter.loadAllowedConfig(inline.map(normalizedStyleDefinitionToMatcherPattern));
     }
     /**
-     * Checks the attribute value of the first node in the selection that allows the attribute.
-     * For the collapsed selection, returns the selection attribute.
-     *
-     * @param selection The document selection.
-     * @param attributeName Name of the GHS attribute.
-     * @returns The attribute value.
-     */ _getValueFromFirstAllowedNode(selection, attributeName) {
+	 * Checks the attribute value of the first node in the selection that allows the attribute.
+	 * For the collapsed selection, returns the selection attribute.
+	 *
+	 * @param selection The document selection.
+	 * @param attributeName Name of the GHS attribute.
+	 * @returns The attribute value.
+	 */ _getValueFromFirstAllowedNode(selection, attributeName) {
         const model = this.editor.model;
         const schema = model.schema;
         if (selection.isCollapsed) {
@@ -451,19 +519,6 @@ class StyleUtils extends Plugin {
         }
         return null;
     }
-    /**
-     * @inheritDoc
-     */ constructor(editor){
-        super(editor);
-        this.decorate('isStyleEnabledForBlock');
-        this.decorate('isStyleActiveForBlock');
-        this.decorate('getAffectedBlocks');
-        this.decorate('isStyleEnabledForInlineSelection');
-        this.decorate('isStyleActiveForInlineSelection');
-        this.decorate('getAffectedInlineSelectable');
-        this.decorate('getStylePreview');
-        this.decorate('configureGHSDataFilter');
-    }
 }
 /**
  * Checks if given object has `classes` property which is an array.
@@ -490,22 +545,27 @@ class StyleUtils extends Plugin {
     };
 }
 
-class StyleUI extends Plugin {
+/**
+ * The UI plugin of the style feature .
+ *
+ * It registers the `'style'` UI dropdown in the editor's {@link module:ui/componentfactory~ComponentFactory component factory}
+ * that displays a grid of styles and allows changing styles of the content.
+ */ class StyleUI extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'StyleUI';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             StyleUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const dataSchema = editor.plugins.get('DataSchema');
         const styleUtils = editor.plugins.get('StyleUtils');
@@ -566,10 +626,32 @@ class StyleUI extends Plugin {
     }
 }
 
-class StyleCommand extends Command {
+/**
+ * Style command.
+ *
+ * Applies and removes styles from selection and elements.
+ */ class StyleCommand extends Command {
     /**
-     * @inheritDoc
-     */ refresh() {
+	 * Normalized definitions of the styles.
+	 */ _styleDefinitions;
+    /**
+	 * The StyleUtils plugin.
+	 */ _styleUtils;
+    /**
+	 * Creates an instance of the command.
+	 *
+	 * @param editor Editor on which this command will be used.
+	 * @param styleDefinitions Normalized definitions of the styles.
+	 */ constructor(editor, styleDefinitions){
+        super(editor);
+        this.set('value', []);
+        this.set('enabledStyles', []);
+        this._styleDefinitions = styleDefinitions;
+        this._styleUtils = this.editor.plugins.get(StyleUtils);
+    }
+    /**
+	 * @inheritDoc
+	 */ refresh() {
         const model = this.editor.model;
         const selection = model.document.selection;
         const value = new Set();
@@ -619,41 +701,41 @@ class StyleCommand extends Command {
         this.value = this.isEnabled ? Array.from(value).sort() : [];
     }
     /**
-     * Executes the command &ndash; applies the style classes to the selection or removes it from the selection.
-     *
-     * If the command value already contains the requested style, it will remove the style classes. Otherwise, it will set it.
-     *
-     * The execution result differs, depending on the {@link module:engine/model/document~Document#selection} and the
-     * style type (inline or block):
-     *
-     * * When applying inline styles:
-     *   * If the selection is on a range, the command applies the style classes to all nodes in that range.
-     *   * If the selection is collapsed in a non-empty node, the command applies the style classes to the
-     * {@link module:engine/model/document~Document#selection}.
-     *
-     * * When applying block styles:
-     *   * If the selection is on a range, the command applies the style classes to the nearest block parent element.
-     *
-     * @fires execute
-     * @param options Command options.
-     * @param options.styleName Style name matching the one defined in the
-     * {@link module:style/styleconfig~StyleConfig#definitions configuration}.
-     * @param options.forceValue Whether the command should add given style (`true`) or remove it (`false`) from the selection.
-     * If not set (default), the command will toggle the style basing on the first selected node. Note, that this will not force
-     * setting a style on an element that cannot receive given style.
-     */ execute({ styleName, forceValue }) {
+	 * Executes the command &ndash; applies the style classes to the selection or removes it from the selection.
+	 *
+	 * If the command value already contains the requested style, it will remove the style classes. Otherwise, it will set it.
+	 *
+	 * The execution result differs, depending on the {@link module:engine/model/document~Document#selection} and the
+	 * style type (inline or block):
+	 *
+	 * * When applying inline styles:
+	 *   * If the selection is on a range, the command applies the style classes to all nodes in that range.
+	 *   * If the selection is collapsed in a non-empty node, the command applies the style classes to the
+	 * {@link module:engine/model/document~Document#selection}.
+	 *
+	 * * When applying block styles:
+	 *   * If the selection is on a range, the command applies the style classes to the nearest block parent element.
+	 *
+	 * @fires execute
+	 * @param options Command options.
+	 * @param options.styleName Style name matching the one defined in the
+	 * {@link module:style/styleconfig~StyleConfig#definitions configuration}.
+	 * @param options.forceValue Whether the command should add given style (`true`) or remove it (`false`) from the selection.
+	 * If not set (default), the command will toggle the style basing on the first selected node. Note, that this will not force
+	 * setting a style on an element that cannot receive given style.
+	 */ execute({ styleName, forceValue }) {
         if (!this.enabledStyles.includes(styleName)) {
             /**
-             * Style command can be executed only with a correct style name.
-             *
-             * This warning may be caused by:
-             *
-             * * passing a name that is not specified in the {@link module:style/styleconfig~StyleConfig#definitions configuration}
-             * (e.g. a CSS class name),
-             * * when trying to apply a style that is not allowed on a given element.
-             *
-             * @error style-command-executed-with-incorrect-style-name
-             */ logWarning('style-command-executed-with-incorrect-style-name');
+			 * Style command can be executed only with a correct style name.
+			 *
+			 * This warning may be caused by:
+			 *
+			 * * passing a name that is not specified in the {@link module:style/styleconfig~StyleConfig#definitions configuration}
+			 * (e.g. a CSS class name),
+			 * * when trying to apply a style that is not allowed on a given element.
+			 *
+			 * @error style-command-executed-with-incorrect-style-name
+			 */ logWarning('style-command-executed-with-incorrect-style-name');
             return;
         }
         const model = this.editor.model;
@@ -685,8 +767,8 @@ class StyleCommand extends Command {
         });
     }
     /**
-     * Returns a set of elements that should be affected by the block-style change.
-     */ _findAffectedBlocks(selectedBlocks, definition) {
+	 * Returns a set of elements that should be affected by the block-style change.
+	 */ _findAffectedBlocks(selectedBlocks, definition) {
         const blocks = new Set();
         for (const selectedBlock of selectedBlocks){
             const ancestorBlocks = selectedBlock.getAncestors({
@@ -708,18 +790,6 @@ class StyleCommand extends Command {
         }
         return blocks;
     }
-    /**
-     * Creates an instance of the command.
-     *
-     * @param editor Editor on which this command will be used.
-     * @param styleDefinitions Normalized definitions of the styles.
-     */ constructor(editor, styleDefinitions){
-        super(editor);
-        this.set('value', []);
-        this.set('enabledStyles', []);
-        this._styleDefinitions = styleDefinitions;
-        this._styleUtils = this.editor.plugins.get(StyleUtils);
-    }
 }
 /**
  * Returns classes that are defined only in the supplied definition and not in any other active definition. It's used
@@ -756,22 +826,25 @@ class StyleCommand extends Command {
 }
 
 class ListStyleSupport extends Plugin {
+    _listUtils;
+    _styleUtils;
+    _htmlSupport;
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'ListStyleSupport';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             StyleUtils,
             'GeneralHtmlSupport'
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         if (!editor.plugins.has('ListEditing')) {
             return;
@@ -815,8 +888,8 @@ class ListStyleSupport extends Plugin {
         });
     }
     /**
-     * Verifies if the given style is applicable to the provided block element.
-     */ _isStyleEnabledForBlock(definition, block) {
+	 * Verifies if the given style is applicable to the provided block element.
+	 */ _isStyleEnabledForBlock(definition, block) {
         const model = this.editor.model;
         if (![
             'ol',
@@ -841,15 +914,15 @@ class ListStyleSupport extends Plugin {
         }
     }
     /**
-     * Returns true if the given style is applied to the specified block element.
-     */ _isStyleActiveForBlock(definition, block) {
+	 * Returns true if the given style is applied to the specified block element.
+	 */ _isStyleActiveForBlock(definition, block) {
         const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
         const ghsAttributeValue = block.getAttribute(attributeName);
         return this._styleUtils.hasAllClasses(ghsAttributeValue, definition.classes);
     }
     /**
-     * Returns an array of block elements that style should be applied to.
-     */ _getAffectedBlocks(definition, block) {
+	 * Returns an array of block elements that style should be applied to.
+	 */ _getAffectedBlocks(definition, block) {
         if (!this._isStyleEnabledForBlock(definition, block)) {
             return null;
         }
@@ -862,8 +935,8 @@ class ListStyleSupport extends Plugin {
         }
     }
     /**
-     * Returns a view template definition for the style preview.
-     */ _getStylePreview(definition, children) {
+	 * Returns a view template definition for the style preview.
+	 */ _getStylePreview(definition, children) {
         const { element, classes } = definition;
         if (element == 'ol' || element == 'ul') {
             return {
@@ -897,21 +970,23 @@ class ListStyleSupport extends Plugin {
 }
 
 class TableStyleSupport extends Plugin {
+    _tableUtils;
+    _styleUtils;
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'TableStyleSupport';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             StyleUtils
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         if (!editor.plugins.has('TableEditing')) {
             return;
@@ -943,12 +1018,12 @@ class TableStyleSupport extends Plugin {
         });
     }
     /**
-     * Checks if this plugin's custom logic should be applied for defintion-block pair.
-     *
-     * @param definition Style definition that is being considered.
-     * @param block Block element to check if should be styled.
-     * @returns True if the defintion-block pair meet the plugin criteria, false otherwise.
-     */ _isApplicable(definition, block) {
+	 * Checks if this plugin's custom logic should be applied for defintion-block pair.
+	 *
+	 * @param definition Style definition that is being considered.
+	 * @param block Block element to check if should be styled.
+	 * @returns True if the defintion-block pair meet the plugin criteria, false otherwise.
+	 */ _isApplicable(definition, block) {
         if ([
             'td',
             'th'
@@ -964,12 +1039,12 @@ class TableStyleSupport extends Plugin {
         return false;
     }
     /**
-     * Checks if the style definition should be applied to selected block.
-     *
-     * @param definition Style definition that is being considered.
-     * @param block Block element to check if should be styled.
-     * @returns True if the block should be style with the style description, false otherwise.
-     */ _isStyleEnabledForBlock(definition, block) {
+	 * Checks if the style definition should be applied to selected block.
+	 *
+	 * @param definition Style definition that is being considered.
+	 * @param block Block element to check if should be styled.
+	 * @returns True if the block should be style with the style description, false otherwise.
+	 */ _isStyleEnabledForBlock(definition, block) {
         if ([
             'td',
             'th'
@@ -1000,12 +1075,12 @@ class TableStyleSupport extends Plugin {
         /* istanbul ignore next -- @preserve */ return false;
     }
     /**
-     * Gets all blocks that the style should be applied to.
-     *
-     * @param definition Style definition that is being considered.
-     * @param block A block element from selection.
-     * @returns An array with the block that was passed as an argument if meets the criteria, null otherwise.
-     */ _getAffectedBlocks(definition, block) {
+	 * Gets all blocks that the style should be applied to.
+	 *
+	 * @param definition Style definition that is being considered.
+	 * @param block A block element from selection.
+	 * @returns An array with the block that was passed as an argument if meets the criteria, null otherwise.
+	 */ _getAffectedBlocks(definition, block) {
         if (!this._isStyleEnabledForBlock(definition, block)) {
             return null;
         }
@@ -1016,22 +1091,24 @@ class TableStyleSupport extends Plugin {
 }
 
 class LinkStyleSupport extends Plugin {
+    _styleUtils;
+    _htmlSupport;
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'LinkStyleSupport';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             StyleUtils,
             'GeneralHtmlSupport'
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         if (!editor.plugins.has('LinkEditing')) {
             return;
@@ -1068,8 +1145,8 @@ class LinkStyleSupport extends Plugin {
         });
     }
     /**
-     * Verifies if the given style is applicable to the provided document selection.
-     */ _isStyleEnabled(definition, selection) {
+	 * Verifies if the given style is applicable to the provided document selection.
+	 */ _isStyleEnabled(definition, selection) {
         const model = this.editor.model;
         // Handle collapsed selection.
         if (selection.isCollapsed) {
@@ -1086,8 +1163,8 @@ class LinkStyleSupport extends Plugin {
         return false;
     }
     /**
-     * Returns true if the given style is applied to the specified document selection.
-     */ _isStyleActive(definition, selection) {
+	 * Returns true if the given style is applied to the specified document selection.
+	 */ _isStyleActive(definition, selection) {
         const model = this.editor.model;
         const attributeName = this._htmlSupport.getGhsAttributeNameForElement(definition.element);
         // Handle collapsed selection.
@@ -1112,8 +1189,8 @@ class LinkStyleSupport extends Plugin {
         return false;
     }
     /**
-     * Returns a selectable that given style should be applied to.
-     */ _getAffectedSelectable(definition, selection) {
+	 * Returns a selectable that given style should be applied to.
+	 */ _getAffectedSelectable(definition, selection) {
         const model = this.editor.model;
         // Handle collapsed selection.
         if (selection.isCollapsed) {
@@ -1163,15 +1240,21 @@ class LinkStyleSupport extends Plugin {
     return ranges;
 }
 
-class StyleEditing extends Plugin {
+/**
+ * The style engine feature.
+ *
+ * It configures the {@glink features/html/general-html-support General HTML Support feature} based on
+ * {@link module:style/styleconfig~StyleConfig#definitions configured style definitions} and introduces the
+ * {@link module:style/stylecommand~StyleCommand style command} that applies styles to the content of the document.
+ */ class StyleEditing extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'StyleEditing';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             'GeneralHtmlSupport',
             StyleUtils,
@@ -1181,8 +1264,8 @@ class StyleEditing extends Plugin {
         ];
     }
     /**
-     * @inheritDoc
-     */ init() {
+	 * @inheritDoc
+	 */ init() {
         const editor = this.editor;
         const dataSchema = editor.plugins.get('DataSchema');
         const styleUtils = editor.plugins.get('StyleUtils');
@@ -1193,15 +1276,20 @@ class StyleEditing extends Plugin {
     }
 }
 
-class Style extends Plugin {
+/**
+ * The style plugin.
+ *
+ * This is a "glue" plugin that loads the {@link module:style/styleediting~StyleEditing style editing feature}
+ * and {@link module:style/styleui~StyleUI style UI feature}.
+ */ class Style extends Plugin {
     /**
-     * @inheritDoc
-     */ static get pluginName() {
+	 * @inheritDoc
+	 */ static get pluginName() {
         return 'Style';
     }
     /**
-     * @inheritDoc
-     */ static get requires() {
+	 * @inheritDoc
+	 */ static get requires() {
         return [
             StyleEditing,
             StyleUI