@ckeditor/ckeditor5-style 34.0.0 → 35.0.0

package/src/stylecommand.js

@@ -18,29 +18,28 @@ import { logWarning, first } from 'ckeditor5/src/utils';
  * @extends module:core/command~Command
  */
 export default class StyleCommand extends Command {
-	constructor( editor, styles ) {
+	/**
+	 * Creates an instance of the command.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {Object} styleDefinitions Normalized definitions of the styles.
+	 * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions.block Definitions of block styles.
+	 * @param {Array.<module:style/style~StyleDefinition>} styleDefinitions.inline Definitions of inline styles.
+	 */
+	constructor( editor, styleDefinitions ) {
 		super( editor );
 
 		/**
-		 * Set of currently applied styles on current selection.
+		 * Set of currently applied styles on the current selection.
 		 *
 		 * Names of styles correspond to the `name` property of
 		 * {@link module:style/style~StyleDefinition configured definitions}.
 		 *
-		 * @observable
 		 * @readonly
-		 * @member {Boolean|String} #value
-		 */
-
-		/**
-		 * Styles object. Helps in getting styles definitions by
-		 * class name, style name and model element name.
-		 *
-		 * @private
-		 * @readonly
-		 * @member {module:style/styleediting~Styles}
+		 * @observable
+		 * @member {Array.<String>} #value
 		 */
-		this.styles = styles;
+		this.set( 'value', [] );
 
 		/**
 		 * Names of enabled styles (styles that can be applied to the current selection).
@@ -55,33 +54,80 @@ export default class StyleCommand extends Command {
 		this.set( 'enabledStyles', [] );
 
 		/**
-		 * Refresh state.
+		 * Normalized definitions of the styles.
+		 *
+		 * @private
+		 * @readonly
+		 * @member {Object} #styleDefinitions
 		 */
-		this.refresh();
+		this._styleDefinitions = styleDefinitions;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	refresh() {
-		let value = [];
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-		const block = first( selection.getSelectedBlocks() );
+		const model = this.editor.model;
+		const selection = model.document.selection;
 
-		this.enabledStyles = [];
+		const value = new Set();
+		const enabledStyles = new Set();
 
-		if ( !block || !editor.model.schema.isObject( block ) ) {
-			value = this._prepareNewInlineElementValue( value, selection );
-			this.enabledStyles = this.styles.getInlineElementsNames();
+		// Inline styles.
+		for ( const definition of this._styleDefinitions.inline ) {
+			for ( const ghsAttributeName of definition.ghsAttributes ) {
+				// Check if this inline style is enabled.
+				if ( model.schema.checkAttributeInSelection( selection, ghsAttributeName ) ) {
+					enabledStyles.add( definition.name );
+				}
 
-			if ( block ) {
-				value = this._prepareNewBlockElementValue( value, block );
+				// Check if this inline style is active.
+				const ghsAttributeValue = this._getValueFromFirstAllowedNode( ghsAttributeName );
+
+				if ( hasAllClasses( ghsAttributeValue, definition.classes ) ) {
+					value.add( definition.name );
+				}
 			}
 		}
 
+		// Block styles.
+		const firstBlock = first( selection.getSelectedBlocks() );
+
+		if ( firstBlock ) {
+			const ancestorBlocks = firstBlock.getAncestors( { includeSelf: true, parentFirst: true } );
+
+			for ( const block of ancestorBlocks ) {
+				// E.g. reached a model table when the selection is in a cell. The command should not modify
+				// ancestors of a table.
+				if ( model.schema.isLimit( block ) ) {
+					break;
+				}
+
+				if ( !model.schema.checkAttribute( block, 'htmlAttributes' ) ) {
+					continue;
+				}
+
+				for ( const definition of this._styleDefinitions.block ) {
+					// Check if this block style is enabled.
+					if ( !definition.modelElements.includes( block.name ) ) {
+						continue;
+					}
+
+					enabledStyles.add( definition.name );
+
+					// Check if this block style is active.
+					const ghsAttributeValue = block.getAttribute( 'htmlAttributes' );
+
+					if ( hasAllClasses( ghsAttributeValue, definition.classes ) ) {
+						value.add( definition.name );
+					}
+				}
+			}
+		}
+
+		this.enabledStyles = Array.from( enabledStyles ).sort();
 		this.isEnabled = this.enabledStyles.length > 0;
-		this.value = this.isEnabled ? value : [];
+		this.value = this.isEnabled ? Array.from( value ).sort() : [];
 	}
 
 	/**
@@ -95,145 +141,74 @@ export default class StyleCommand extends Command {
 	 * * 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} itself (note that typed characters copy style classes from the selection).
+	 * {@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.
 	 *
-	 * * When selection is set on a widget object:
-	 *   * Do nothing. Widgets are not yet supported by the style command.
-	 *
 	 * @fires execute
-	 * @param {String} styleName Style name matching the one defined in the config.
+	 * @param {Object} [options] Command options.
+	 * @param {String} options.styleName Style name matching the one defined in the
+	 * {@link module:style/style~StyleConfig#definitions configuration}.
+	 * @param {Boolean} [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 ) {
+	execute( { styleName, forceValue } ) {
 		if ( !this.enabledStyles.includes( styleName ) ) {
 			/**
-			 * Style command can be executed only on a correct style name.
-			 * This warning may be caused by passing name that it not specified in any of the
-			 * definitions in the styles config, when trying to apply style that is not allowed
-			 * on given element or passing class name instead of the 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/style~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 editor = this.editor;
-		const model = editor.model;
-		const doc = model.document;
-		const selection = doc.selection;
-
-		const selectedBlockElement = first( selection.getSelectedBlocks() );
-		const definition = this.styles.getDefinitionsByName( styleName );
 
-		if ( selectedBlockElement && definition.isBlock ) {
-			this._handleStyleUpdate( definition, selectedBlockElement );
-		} else {
-			this._handleStyleUpdate( definition, selection );
+			return;
 		}
-	}
 
-	/**
-	 * Adds or removes classes to element, range or selection.
-	 *
-	 * @private
-	 * @param {Object} definition Style definition object.
-	 * @param {module:engine/model/selection~Selectable} selectable Selection, range or element to update the style on.
-	 */
-	_handleStyleUpdate( definition, selectable ) {
-		const { name, element, classes } = definition;
+		const model = this.editor.model;
+		const selection = model.document.selection;
 		const htmlSupport = this.editor.plugins.get( 'GeneralHtmlSupport' );
 
-		if ( this.value.includes( name ) ) {
-			htmlSupport.removeModelHtmlClass( element, classes, selectable );
-		} else {
-			htmlSupport.addModelHtmlClass( element, classes, selectable );
-		}
-	}
-
-	/**
-	 * Returns inline element value.
-	 *
-	 * @private
-	 * @param {Array} value
-	 * @param {module:engine/model/selection~Selection} selection
-	 */
-	_prepareNewInlineElementValue( value, selection ) {
-		let newValue = [ ...value ];
-
-		const attributes = selection.getAttributes();
-
-		for ( const [ attribute ] of attributes ) {
-			newValue = [ ...newValue, ...this._getAttributeValue( attribute ) ];
-		}
-
-		return newValue;
-	}
-
-	/**
-	 * Returns element value and sets enabled styles.
-	 *
-	 * @private
-	 * @param {Array} value
-	 * @param {Object|null} element
-	 * @return {Array} Current block element styles value.
-	 */
-	_prepareNewBlockElementValue( value, element ) {
-		const availableDefinitions = this.styles.getDefinitionsByElementName( element.name );
-
-		if ( availableDefinitions ) {
-			const blockStyleNames = availableDefinitions.map( ( { name } ) => name );
-			this.enabledStyles = [ ...this.enabledStyles, ...blockStyleNames ];
-		}
+		const definition = [
+			...this._styleDefinitions.inline,
+			...this._styleDefinitions.block
+		].find( ( { name } ) => name == styleName );
 
-		return [ ...value, ...this._getAttributeValue( 'htmlAttributes' ) ];
-	}
+		const shouldAddStyle = forceValue === undefined ? !this.value.includes( definition.name ) : forceValue;
 
-	/**
-	 * Get classes attribute value.
-	 *
-	 * @private
-	 * @param {String} attribute
-	 */
-	_getAttributeValue( attribute ) {
-		const value = [];
-		const classes = attribute === 'htmlAttributes' ?
-			this._getValueFromBlockElement() :
-			this._getValueFromFirstAllowedNode( attribute );
+		model.change( () => {
+			let selectables;
 
-		for ( const htmlClass of classes ) {
-			const { name } = this.styles.getDefinitionsByClassName( htmlClass ) || {};
-
-			value.push( name );
-		}
-
-		return value;
-	}
-
-	/**
-	 * Gets classes from currently selected block element.
-	 *
-	 * @private
-	 */
-	_getValueFromBlockElement() {
-		const selection = this.editor.model.document.selection;
-		const block = first( selection.getSelectedBlocks() );
-		const attributes = block.getAttribute( 'htmlAttributes' );
-
-		if ( attributes ) {
-			return attributes.classes;
-		}
+			if ( definition.isBlock ) {
+				selectables = getAffectedBlocks( selection.getSelectedBlocks(), definition.modelElements, model.schema );
+			} else {
+				selectables = [ selection ];
+			}
 
-		return [];
+			for ( const selectable of selectables ) {
+				if ( shouldAddStyle ) {
+					htmlSupport.addModelHtmlClass( definition.element, definition.classes, selectable );
+				} else {
+					htmlSupport.removeModelHtmlClass( definition.element, definition.classes, selectable );
+				}
+			}
+		} );
 	}
 
 	/**
-	 * Gets classes from currently selected text element.
+	 * Checks the attribute value of the first node in the selection that allows the attribute.
+	 * For the collapsed selection, returns the selection attribute.
 	 *
 	 * @private
-	 * @param {String} attributeName Text attribute name.
+	 * @param {String} attributeName Name of the GHS attribute.
+	 * @returns {Object|null} The attribute value.
 	 */
 	_getValueFromFirstAllowedNode( attributeName ) {
 		const model = this.editor.model;
@@ -241,27 +216,49 @@ export default class StyleCommand extends Command {
 		const selection = model.document.selection;
 
 		if ( selection.isCollapsed ) {
-			/* istanbul ignore next */
-			const { classes } = selection.getAttribute( attributeName ) || {};
-
-			/* istanbul ignore next */
-			return classes || [];
+			return selection.getAttribute( attributeName );
 		}
 
 		for ( const range of selection.getRanges() ) {
 			for ( const item of range.getItems() ) {
-				/* istanbul ignore else */
 				if ( schema.checkAttribute( item, attributeName ) ) {
-					/* istanbul ignore next */
-					const { classes } = item.getAttribute( attributeName ) || {};
-
-					/* istanbul ignore next */
-					return classes || [];
+					return item.getAttribute( attributeName );
 				}
 			}
 		}
 
-		/* istanbul ignore next */
-		return [];
+		return null;
+	}
+}
+
+// Verifies if all classes are present in the given GHS attribute.
+function hasAllClasses( ghsAttributeValue, classes ) {
+	if ( !ghsAttributeValue || !ghsAttributeValue.classes ) {
+		return false;
 	}
+
+	return classes.every( className => ghsAttributeValue.classes.includes( className ) );
+}
+
+// Returns a set of elements that should be affected by the block-style change.
+function getAffectedBlocks( selectedBlocks, elementNames, schema ) {
+	const blocks = new Set();
+
+	for ( const selectedBlock of selectedBlocks ) {
+		const ancestorBlocks = selectedBlock.getAncestors( { includeSelf: true, parentFirst: true } );
+
+		for ( const block of ancestorBlocks ) {
+			if ( schema.isLimit( block ) ) {
+				break;
+			}
+
+			if ( elementNames.includes( block.name ) ) {
+				blocks.add( block );
+
+				break;
+			}
+		}
+	}
+
+	return blocks;
 }

package/src/styleediting.js

@@ -43,9 +43,8 @@ export default class StyleEditing extends Plugin {
 		const editor = this.editor;
 		const dataSchema = editor.plugins.get( 'DataSchema' );
 		const normalizedStyleDefinitions = normalizeConfig( dataSchema, editor.config.get( 'style.definitions' ) );
-		const styles = new Styles( normalizedStyleDefinitions );
 
-		editor.commands.add( 'style', new StyleCommand( editor, styles ) );
+		editor.commands.add( 'style', new StyleCommand( editor, normalizedStyleDefinitions ) );
 
 		this._configureGHSDataFilter( normalizedStyleDefinitions );
 	}
@@ -66,89 +65,6 @@ export default class StyleEditing extends Plugin {
 	}
 }
 
-/**
- * The helper class storing various mappings based on
- * {@link module:style/style~StyleConfig#definitions configured style definitions}. Used internally by
- * {@link module:style/stylecommand~StyleCommand}.
- *
- * @private
- */
-class Styles {
-	/**
-	 * @param {Object} An object with normalized style definitions grouped into `block` and `inline` categories (arrays).
-	 */
-	constructor( styleDefinitions ) {
-		this.styleTypes = [ 'inline', 'block' ];
-		this.styleDefinitions = styleDefinitions;
-		this.elementToDefinition = new Map();
-		this.classToDefinition = new Map();
-		this.nameToDefinition = new Map();
-
-		this._prepareDefinitionsMapping();
-	}
-
-	/**
-	 * Populates various maps to simplify getting config definitions
-	 * by model name,class name and style name.
-	 *
-	 * @private
-	 */
-	_prepareDefinitionsMapping() {
-		for ( const type of this.styleTypes ) {
-			for ( const { modelElements, name, element, classes, isBlock } of this.styleDefinitions[ type ] ) {
-				for ( const modelElement of modelElements ) {
-					const currentValue = this.elementToDefinition.get( modelElement ) || [];
-					const newValue = [ ...currentValue, { name, element, classes } ];
-					this.elementToDefinition.set( modelElement, newValue );
-				}
-
-				this.classToDefinition.set( classes.join( ' ' ), { name, element, classes } );
-				this.nameToDefinition.set( name, { name, element, classes, isBlock } );
-			}
-		}
-	}
-
-	/**
-	 * Returns all inline definitions elements names.
-	 *
-	 * @protected
-	 * @return {Array.<String>} Inline elements names.
-	 */
-	getInlineElementsNames() {
-		return this.styleDefinitions.inline.map( ( { name } ) => name );
-	}
-
-	/**
-	 * Returns the style config definitions by the model element name.
-	 *
-	 * @protected
-	 * @return {Object} Style config definition.
-	 */
-	getDefinitionsByElementName( elementName ) {
-		return this.elementToDefinition.get( elementName );
-	}
-
-	/**
-	 * Returns the style config definitions by the style name.
-	 *
-	 * @protected
-	 * @return {Object} Style config definition.
-	 */
-	getDefinitionsByName( name ) {
-		return this.nameToDefinition.get( name );
-	}
-
-	/**
-	 * Returns the style config definitions by the style name.
-	 *
-	 * @protected
-	 * @return {Object} Style config definition.
-	 */
-	getDefinitionsByClassName( className ) {
-		return this.classToDefinition.get( className );
-	}
-}
-
 // Translates a normalized style definition to a view matcher pattern.
 //
 // @param {Object} definition A normalized style definition.

package/src/styleui.js

@@ -39,7 +39,7 @@ export default class StyleUI extends Plugin {
 		const dataSchema = editor.plugins.get( 'DataSchema' );
 		const normalizedStyleDefinitions = normalizeConfig( dataSchema, editor.config.get( 'style.definitions' ) );
 
-		// Add the dropdown fo the component factory.
+		// Add the dropdown to the component factory.
 		editor.ui.componentFactory.add( 'style', locale => {
 			const t = locale.t;
 			const dropdown = createDropdown( locale );
@@ -85,8 +85,11 @@ export default class StyleUI extends Plugin {
 			panelView.delegate( 'execute' ).to( dropdown );
 
 			// Execute the command when a style is selected in the styles panel.
-			panelView.on( 'execute', evt => {
-				editor.execute( 'style', evt.source.styleDefinition.name );
+			// Also focus the editable after executing the command.
+			// It overrides a default behaviour where the focus is moved to the dropdown button (#12125).
+			dropdown.on( 'execute', evt => {
+				editor.execute( 'style', { styleName: evt.source.styleDefinition.name } );
+				editor.editing.view.focus();
 			} );
 
 			// Bind the state of the styles panel to the command.

package/src/ui/stylegridbuttonview.js

@@ -109,7 +109,7 @@ export default class StyleGridButtonView extends ButtonView {
 	 * be used instead. This avoids previewing a standalone `<td>`, `<li>`, etc. without a parent.
 	 *
 	 * @private
-	 * @param {module:style/style~StyleDefinition} styleDefinition
+	 * @param {String} elementName
 	 * @returns {Boolean} `true` when the element can be rendered. `false` otherwise.
 	 */
 	_isPreviewable( elementName ) {

package/src/utils.js

@@ -36,14 +36,21 @@ export function normalizeConfig( dataSchema, styleDefinitions = [] ) {
 	};
 
 	for ( const definition of styleDefinitions ) {
-		const matchingDefinitions = Array.from( dataSchema.getDefinitionsForView( definition.element ) );
-		const modelElements = matchingDefinitions.map( ( { model } ) => model );
-		const isBlock = matchingDefinitions.some( ( { isBlock } ) => isBlock );
+		const modelElements = [];
+		const ghsAttributes = [];
 
-		if ( isBlock ) {
-			normalizedDefinitions.block.push( { isBlock, modelElements, ...definition } );
+		for ( const ghsDefinition of dataSchema.getDefinitionsForView( definition.element ) ) {
+			if ( ghsDefinition.isBlock ) {
+				modelElements.push( ghsDefinition.model );
+			} else {
+				ghsAttributes.push( ghsDefinition.model );
+			}
+		}
+
+		if ( modelElements.length ) {
+			normalizedDefinitions.block.push( { ...definition, modelElements, isBlock: true } );
 		} else {
-			normalizedDefinitions.inline.push( { isBlock, modelElements, ...definition } );
+			normalizedDefinitions.inline.push( { ...definition, ghsAttributes } );
 		}
 	}
 	return normalizedDefinitions;

package/theme/stylegrid.css

@@ -10,6 +10,7 @@
 .ck.ck-style-panel .ck-style-grid {
 	display: grid;
 	grid-template-columns: repeat(var(--ck-style-panel-columns),auto);
+	justify-content: start;
 
 	& .ck-style-grid__button {
 		display: flex;