@ckeditor/ckeditor5-engine 27.1.0 → 29.2.0

package/src/view/styles/border.js

@@ -39,9 +39,6 @@ import { getShorthandValues, getBoxSidesValueReducer, getBoxSidesValues, isLengt
  *			}
  *		};
  *
- * The `border` value is reduced to a 4 values for each box edge (even if they could be further reduces to a single
- * `border:<width> <style> <color>` style.
- *
  * @param {module:engine/view/stylesmap~StylesProcessor} stylesProcessor
  */
 export function addBorderRules( stylesProcessor ) {
@@ -102,7 +99,7 @@ export function addBorderRules( stylesProcessor ) {
 	stylesProcessor.setReducer( 'border-right', getBorderPositionReducer( 'right' ) );
 	stylesProcessor.setReducer( 'border-bottom', getBorderPositionReducer( 'bottom' ) );
 	stylesProcessor.setReducer( 'border-left', getBorderPositionReducer( 'left' ) );
-	stylesProcessor.setReducer( 'border', borderReducer );
+	stylesProcessor.setReducer( 'border', getBorderReducer() );
 
 	stylesProcessor.setStyleRelation( 'border', [
 		'border-color', 'border-style', 'border-width',
@@ -238,39 +235,128 @@ function normalizeBorderShorthand( string ) {
 	return result;
 }
 
-function borderReducer( value ) {
-	const reduced = [];
+// The border reducer factory.
+//
+// It tries to produce the most optimal output for the specified styles.
+//
+// For a border style:
+//
+//      style: {top: "solid", bottom: "solid", right: "solid", left: "solid"}
+//
+// It will produce: `border-style: solid`.
+// For a border style and color:
+//
+//      color: {top: "#ff0", bottom: "#ff0", right: "#ff0", left: "#ff0"}
+//      style: {top: "solid", bottom: "solid", right: "solid", left: "solid"}
+//
+// It will produce: `border-color: #ff0; border-style: solid`.
+// If all border parameters are specified:
+//
+//      color: {top: "#ff0", bottom: "#ff0", right: "#ff0", left: "#ff0"}
+//      style: {top: "solid", bottom: "solid", right: "solid", left: "solid"}
+//      width: {top: "2px", bottom: "2px", right: "2px", left: "2px"}
+//
+// It will combine everything into a single property: `border: 2px solid #ff0`.
+//
+// The definitions are merged only if all border selectors have the same values.
+//
+// @returns {Function}
+function getBorderReducer() {
+	return value => {
+		const topStyles = extractBorderPosition( value, 'top' );
+		const rightStyles = extractBorderPosition( value, 'right' );
+		const bottomStyles = extractBorderPosition( value, 'bottom' );
+		const leftStyles = extractBorderPosition( value, 'left' );
+
+		const borderStyles = [ topStyles, rightStyles, bottomStyles, leftStyles ];
+
+		const borderStylesByType = {
+			width: getReducedStyleValueForType( borderStyles, 'width' ),
+			style: getReducedStyleValueForType( borderStyles, 'style' ),
+			color: getReducedStyleValueForType( borderStyles, 'color' )
+		};
+
+		// Try reducing to a single `border:` property.
+		const reducedBorderStyle = reduceBorderPosition( borderStylesByType, 'all' );
+
+		if ( reducedBorderStyle.length ) {
+			return reducedBorderStyle;
+		}
+
+		// Try reducing to `border-style:`, `border-width:`, `border-color:` properties.
+		const reducedStyleTypes = Object.entries( borderStylesByType ).reduce( ( reducedStyleTypes, [ type, value ] ) => {
+			if ( value ) {
+				reducedStyleTypes.push( [ `border-${ type }`, value ] );
+
+				// Remove it from the full set to not include it in the most specific properties later.
+				borderStyles.forEach( style => ( style[ type ] = null ) );
+			}
 
-	reduced.push( ...reduceBorderPosition( extractBorderPosition( value, 'top' ), 'top' ) );
-	reduced.push( ...reduceBorderPosition( extractBorderPosition( value, 'right' ), 'right' ) );
-	reduced.push( ...reduceBorderPosition( extractBorderPosition( value, 'bottom' ), 'bottom' ) );
-	reduced.push( ...reduceBorderPosition( extractBorderPosition( value, 'left' ), 'left' ) );
+			return reducedStyleTypes;
+		}, [] );
+
+		// The reduced properties (by type) and all that remains that could not be reduced.
+		return [
+			...reducedStyleTypes,
+			...reduceBorderPosition( topStyles, 'top' ),
+			...reduceBorderPosition( rightStyles, 'right' ),
+			...reduceBorderPosition( bottomStyles, 'bottom' ),
+			...reduceBorderPosition( leftStyles, 'left' )
+		];
+	};
 
-	return reduced;
+	// @param {Array.<Object>} styles The array of objects with `style`, `color`, `width` properties.
+	// @param {'width'|'style'|'color'} type
+	function getReducedStyleValueForType( styles, type ) {
+		return styles
+			.map( style => style[ type ] )
+			.reduce( ( result, style ) => result == style ? result : null );
+	}
 }
 
 function getBorderPositionReducer( which ) {
 	return value => reduceBorderPosition( value, which );
 }
 
+// Returns an array with reduced border styles depending on the specified values.
+//
+// If all border properties (width, style, color) are specified, the returned selector will be
+// merged into a group: `border-*: [width] [style] [color]`.
+//
+// Otherwise, the specific definitions will be returned: `border-(width|style|color)-*: [value]`.
+//
+// @param {Object|null} value Styles if defined.
+// @param {'top'|'right'|'bottom'|'left'|'all'} which The border position.
+// @returns {Array}
 function reduceBorderPosition( value, which ) {
-	const reduced = [];
+	const borderTypes = [];
+
+	if ( value && value.width ) {
+		borderTypes.push( 'width' );
+	}
 
-	if ( value && value.width !== undefined ) {
-		reduced.push( value.width );
+	if ( value && value.style ) {
+		borderTypes.push( 'style' );
 	}
 
-	if ( value && value.style !== undefined ) {
-		reduced.push( value.style );
+	if ( value && value.color ) {
+		borderTypes.push( 'color' );
 	}
 
-	if ( value && value.color !== undefined ) {
-		reduced.push( value.color );
+	if ( borderTypes.length == 3 ) {
+		const borderValue = borderTypes.map( item => value[ item ] ).join( ' ' );
+
+		return [
+			which == 'all' ? [ 'border', borderValue ] : [ `border-${ which }`, borderValue ]
+		];
 	}
 
-	if ( reduced.length ) {
-		return [ [ `border-${ which }`, reduced.join( ' ' ) ] ];
+	// We are unable to reduce to a single `border:` property.
+	if ( which == 'all' ) {
+		return [];
 	}
 
-	return [];
+	return borderTypes.map( type => {
+		return [ `border-${ which }-${ type }`, value[ type ] ];
+	} );
 }

package/src/view/styles/utils.js

@@ -220,7 +220,7 @@ export function getBoxSidesValueReducer( styleShorthand ) {
  *		// will return '1px 1px 2px'
  *
  * @param {module:engine/view/stylesmap~BoxSides} styleShorthand
- * @returns {Function}
+ * @returns {String}
  */
 export function getBoxSidesShorthandValue( { top, right, bottom, left } ) {
 	const out = [];

package/src/view/stylesmap.js

@@ -25,7 +25,7 @@ export default class StylesMap {
 		 * Keeps an internal representation of styles map. Normalized styles are kept as object tree to allow unified modification and
 		 * value access model using lodash's get, set, unset, etc methods.
 		 *
-		 * When no style processor rules are defined the it acts as simple key-value storage.
+		 * When no style processor rules are defined it acts as simple key-value storage.
 		 *
 		 * @private
 		 * @type {Object}
@@ -44,7 +44,7 @@ export default class StylesMap {
 	/**
 	 * Returns true if style map has no styles set.
 	 *
-	 * @returns {Boolean}
+	 * @type {Boolean}
 	 */
 	get isEmpty() {
 		const entries = Object.entries( this._styles );
@@ -350,15 +350,28 @@ export default class StylesMap {
 	}
 
 	/**
-	 * Returns style property names as they would appear when using {@link #toString `#toString()`}.
+	 * Returns all style properties names as they would appear when using {@link #toString `#toString()`}.
+	 *
+	 * When `expand` is set to true and there's a shorthand style property set, it will also return all equivalent styles:
+	 *
+	 * 		stylesMap.setTo( 'margin: 1em' )
+	 *
+	 * will be expanded to:
+	 *
+	 * 		[ 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' ]
 	 *
+	 * @param {Boolean} [expand=false] Expand shorthand style properties and all return equivalent style representations.
 	 * @returns {Array.<String>}
 	 */
-	getStyleNames() {
+	getStyleNames( expand = false ) {
 		if ( this.isEmpty ) {
 			return [];
 		}
 
+		if ( expand ) {
+			return this._styleProcessor.getStyleNames( this._styles );
+		}
+
 		const entries = this._getStylesEntries();
 
 		return entries.map( ( [ key ] ) => key );
@@ -540,7 +553,6 @@ export class StylesProcessor {
 	 *
 	 * **Note**: To define reducer callbacks use {@link #setReducer}.
 	 *
-	 * @param {String} name
 	 * @param {String} name Name of style property.
 	 * @param {Object} styles Object holding normalized styles.
 	 * @returns {Array.<module:engine/view/stylesmap~PropertyDescriptor>}
@@ -562,6 +574,34 @@ export class StylesProcessor {
 		return [ [ name, normalizedValue ] ];
 	}
 
+	/**
+	 * Return all style properties. Also expand shorthand properties (e.g. `margin`, `background`) if respective extractor is available.
+	 *
+	 * @param {Object} styles Object holding normalized styles.
+	 * @returns {Array.<String>}
+	 */
+	getStyleNames( styles ) {
+		// Find all extractable styles that have a value.
+		const expandedStyleNames = Array.from( this._consumables.keys() ).filter( name => {
+			const style = this.getNormalized( name, styles );
+
+			if ( style && typeof style == 'object' ) {
+				return Object.keys( style ).length;
+			}
+
+			return style;
+		} );
+
+		// For simple styles (for example `color`) we don't have a map of those styles
+		// but they are 1 to 1 with normalized object keys.
+		const styleNamesKeysSet = new Set( [
+			...expandedStyleNames,
+			...Object.keys( styles )
+		] );
+
+		return Array.from( styleNamesKeysSet.values() );
+	}
+
 	/**
 	 * Returns related style names.
 	 *

package/src/view/upcastwriter.js

@@ -222,7 +222,7 @@ export default class UpcastWriter {
 	/**
 	 * Adds or overwrites element's attribute with a specified key and value.
 	 *
-	 *		writer.setAttribute( linkElement, 'href', 'http://ckeditor.com' );
+	 *		writer.setAttribute( 'href', 'http://ckeditor.com', linkElement );
 	 *
 	 * @see module:engine/view/element~Element#_setAttribute
 	 * @param {String} key Attribute key.
@@ -236,7 +236,7 @@ export default class UpcastWriter {
 	/**
 	 * Removes attribute from the element.
 	 *
-	 *		writer.removeAttribute( linkElement, 'href' );
+	 *		writer.removeAttribute( 'href', linkElement );
 	 *
 	 * @see module:engine/view/element~Element#_removeAttribute
 	 * @param {String} key Attribute key.
@@ -249,8 +249,8 @@ export default class UpcastWriter {
 	/**
 	 * Adds specified class to the element.
 	 *
-	 *		writer.addClass( linkElement, 'foo' );
-	 *		writer.addClass( linkElement, [ 'foo', 'bar' ] );
+	 *		writer.addClass( 'foo', linkElement );
+	 *		writer.addClass( [ 'foo', 'bar' ], linkElement );
 	 *
 	 * @see module:engine/view/element~Element#_addClass
 	 * @param {Array.<String>|String} className Single class name or array of class names which will be added.
@@ -263,8 +263,8 @@ export default class UpcastWriter {
 	/**
 	 * Removes specified class from the element.
 	 *
-	 *		writer.removeClass( linkElement, 'foo' );
-	 *		writer.removeClass( linkElement, [ 'foo', 'bar' ] );
+	 *		writer.removeClass( 'foo', linkElement );
+	 *		writer.removeClass( [ 'foo', 'bar' ], linkElement );
 	 *
 	 * @see module:engine/view/element~Element#_removeClass
 	 * @param {Array.<String>|String} className Single class name or array of class names which will be removed.
@@ -277,11 +277,11 @@ export default class UpcastWriter {
 	/**
 	 * Adds style to the element.
 	 *
-	 *		writer.setStyle( element, 'color', 'red' );
-	 *		writer.setStyle( element, {
+	 *		writer.setStyle( 'color', 'red', element );
+	 *		writer.setStyle( {
 	 *			color: 'red',
 	 *			position: 'fixed'
-	 *		} );
+	 *		}, element );
 	 *
 	 * **Note**: This method can work with normalized style names if
 	 * {@link module:engine/controller/datacontroller~DataController#addStyleProcessorRules a particular style processor rule is enabled}.
@@ -302,8 +302,8 @@ export default class UpcastWriter {
 	/**
 	 * Removes specified style from the element.
 	 *
-	 *		writer.removeStyle( element, 'color' );  // Removes 'color' style.
-	 *		writer.removeStyle( element, [ 'color', 'border-top' ] ); // Removes both 'color' and 'border-top' styles.
+	 *		writer.removeStyle( 'color', element );  // Removes 'color' style.
+	 *		writer.removeStyle( [ 'color', 'border-top' ], element ); // Removes both 'color' and 'border-top' styles.
 	 *
 	 * **Note**: This method can work with normalized style names if
 	 * {@link module:engine/controller/datacontroller~DataController#addStyleProcessorRules a particular style processor rule is enabled}.
@@ -358,6 +358,7 @@ export default class UpcastWriter {
 	 * @param {module:engine/view/item~Item|module:engine/model/position~Position} itemOrPosition
 	 * @param {Number|'end'|'before'|'after'} [offset] Offset or one of the flags. Used only when
 	 * first parameter is a {@link module:engine/view/item~Item view item}.
+	 * @returns {module:engine/view/position~Position}
 	 */
 	createPositionAt( itemOrPosition, offset ) {
 		return Position._createAt( itemOrPosition, offset );

package/src/view/view.js

@@ -210,6 +210,11 @@ export default class View {
 		this.listenTo( this.document.selection, 'change', () => {
 			this._hasChangedSinceTheLastRendering = true;
 		} );
+
+		// Trigger re-render if only the focus changed.
+		this.listenTo( this.document, 'change:isFocused', () => {
+			this._hasChangedSinceTheLastRendering = true;
+		} );
 	}
 
 	/**