@ckeditor/ckeditor5-engine 44.2.1 → 44.3.0-alpha.1

package/dist/index.js

@@ -687,309 +687,757 @@ TextProxy$1.prototype.is = function(type) {
 };
 
 /**
- * View matcher class.
- * Instance of this class can be used to find {@link module:engine/view/element~Element elements} that match given pattern.
- */ class Matcher {
-    _patterns = [];
+ * Class used for handling consumption of view {@link module:engine/view/element~Element elements},
+ * {@link module:engine/view/text~Text text nodes} and {@link module:engine/view/documentfragment~DocumentFragment document fragments}.
+ * Element's name and its parts (attributes, classes and styles) can be consumed separately. Consuming an element's name
+ * does not consume its attributes, classes and styles.
+ * To add items for consumption use {@link module:engine/conversion/viewconsumable~ViewConsumable#add add method}.
+ * To test items use {@link module:engine/conversion/viewconsumable~ViewConsumable#test test method}.
+ * To consume items use {@link module:engine/conversion/viewconsumable~ViewConsumable#consume consume method}.
+ * To revert already consumed items use {@link module:engine/conversion/viewconsumable~ViewConsumable#revert revert method}.
+ *
+ * ```ts
+ * viewConsumable.add( element, { name: true } ); // Adds element's name as ready to be consumed.
+ * viewConsumable.add( textNode ); // Adds text node for consumption.
+ * viewConsumable.add( docFragment ); // Adds document fragment for consumption.
+ * viewConsumable.test( element, { name: true }  ); // Tests if element's name can be consumed.
+ * viewConsumable.test( textNode ); // Tests if text node can be consumed.
+ * viewConsumable.test( docFragment ); // Tests if document fragment can be consumed.
+ * viewConsumable.consume( element, { name: true }  ); // Consume element's name.
+ * viewConsumable.consume( textNode ); // Consume text node.
+ * viewConsumable.consume( docFragment ); // Consume document fragment.
+ * viewConsumable.revert( element, { name: true }  ); // Revert already consumed element's name.
+ * viewConsumable.revert( textNode ); // Revert already consumed text node.
+ * viewConsumable.revert( docFragment ); // Revert already consumed document fragment.
+ * ```
+ */ class ViewConsumable {
     /**
-	 * Creates new instance of Matcher.
+	 * Map of consumable elements. If {@link module:engine/view/element~Element element} is used as a key,
+	 * {@link module:engine/conversion/viewconsumable~ViewElementConsumables ViewElementConsumables} instance is stored as value.
+	 * For {@link module:engine/view/text~Text text nodes} and
+	 * {@link module:engine/view/documentfragment~DocumentFragment document fragments} boolean value is stored as value.
+	 */ _consumables = new Map();
+    /**
+	 * Adds view {@link module:engine/view/element~Element element}, {@link module:engine/view/text~Text text node} or
+	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} as ready to be consumed.
 	 *
-	 * @param pattern Match patterns. See {@link module:engine/view/matcher~Matcher#add add method} for more information.
-	 */ constructor(...pattern){
-        this.add(...pattern);
+	 * ```ts
+	 * viewConsumable.add( p, { name: true } ); // Adds element's name to consume.
+	 * viewConsumable.add( p, { attributes: 'name' } ); // Adds element's attribute.
+	 * viewConsumable.add( p, { classes: 'foobar' } ); // Adds element's class.
+	 * viewConsumable.add( p, { styles: 'color' } ); // Adds element's style
+	 * viewConsumable.add( p, { attributes: 'name', styles: 'color' } ); // Adds attribute and style.
+	 * viewConsumable.add( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be provided.
+	 * viewConsumable.add( textNode ); // Adds text node to consume.
+	 * viewConsumable.add( docFragment ); // Adds document fragment to consume.
+	 * ```
+	 *
+	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
+	 * attribute is provided - it should be handled separately by providing actual style/class.
+	 *
+	 * ```ts
+	 * viewConsumable.add( p, { attributes: 'style' } ); // This call will throw an exception.
+	 * viewConsumable.add( p, { styles: 'color' } ); // This is properly handled style.
+	 * ```
+	 *
+	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
+	 * @param consumables.name If set to true element's name will be included.
+	 * @param consumables.attributes Attribute name or array of attribute names.
+	 * @param consumables.classes Class name or array of class names.
+	 * @param consumables.styles Style name or array of style names.
+	 */ add(element, consumables) {
+        let elementConsumables;
+        // For text nodes and document fragments just mark them as consumable.
+        if (element.is('$text') || element.is('documentFragment')) {
+            this._consumables.set(element, true);
+            return;
+        }
+        // For elements create new ViewElementConsumables or update already existing one.
+        if (!this._consumables.has(element)) {
+            elementConsumables = new ViewElementConsumables(element);
+            this._consumables.set(element, elementConsumables);
+        } else {
+            elementConsumables = this._consumables.get(element);
+        }
+        elementConsumables.add(consumables ? normalizeConsumables(consumables) : element._getConsumables());
     }
     /**
-	 * Adds pattern or patterns to matcher instance.
+	 * Tests if {@link module:engine/view/element~Element view element}, {@link module:engine/view/text~Text text node} or
+	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} can be consumed.
+	 * It returns `true` when all items included in method's call can be consumed. Returns `false` when
+	 * first already consumed item is found and `null` when first non-consumable item is found.
 	 *
 	 * ```ts
-	 * // String.
-	 * matcher.add( 'div' );
+	 * viewConsumable.test( p, { name: true } ); // Tests element's name.
+	 * viewConsumable.test( p, { attributes: 'name' } ); // Tests attribute.
+	 * viewConsumable.test( p, { classes: 'foobar' } ); // Tests class.
+	 * viewConsumable.test( p, { styles: 'color' } ); // Tests style.
+	 * viewConsumable.test( p, { attributes: 'name', styles: 'color' } ); // Tests attribute and style.
+	 * viewConsumable.test( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be tested.
+	 * viewConsumable.test( textNode ); // Tests text node.
+	 * viewConsumable.test( docFragment ); // Tests document fragment.
+	 * ```
 	 *
-	 * // Regular expression.
-	 * matcher.add( /^\w/ );
+	 * Testing classes and styles as attribute will test if all added classes/styles can be consumed.
 	 *
-	 * // Single class.
-	 * matcher.add( {
-	 * 	classes: 'foobar'
-	 * } );
+	 * ```ts
+	 * viewConsumable.test( p, { attributes: 'class' } ); // Tests if all added classes can be consumed.
+	 * viewConsumable.test( p, { attributes: 'style' } ); // Tests if all added styles can be consumed.
 	 * ```
 	 *
-	 * See {@link module:engine/view/matcher~MatcherPattern} for more examples.
+	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
+	 * @param consumables.name If set to true element's name will be included.
+	 * @param consumables.attributes Attribute name or array of attribute names.
+	 * @param consumables.classes Class name or array of class names.
+	 * @param consumables.styles Style name or array of style names.
+	 * @returns Returns `true` when all items included in method's call can be consumed. Returns `false`
+	 * when first already consumed item is found and `null` when first non-consumable item is found.
+	 */ test(element, consumables) {
+        const elementConsumables = this._consumables.get(element);
+        if (elementConsumables === undefined) {
+            return null;
+        }
+        // For text nodes and document fragments return stored boolean value.
+        if (element.is('$text') || element.is('documentFragment')) {
+            return elementConsumables;
+        }
+        // For elements test consumables object.
+        return elementConsumables.test(normalizeConsumables(consumables));
+    }
+    /**
+	 * Consumes {@link module:engine/view/element~Element view element}, {@link module:engine/view/text~Text text node} or
+	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment}.
+	 * It returns `true` when all items included in method's call can be consumed, otherwise returns `false`.
 	 *
-	 * Multiple patterns can be added in one call:
+	 * ```ts
+	 * viewConsumable.consume( p, { name: true } ); // Consumes element's name.
+	 * viewConsumable.consume( p, { attributes: 'name' } ); // Consumes element's attribute.
+	 * viewConsumable.consume( p, { classes: 'foobar' } ); // Consumes element's class.
+	 * viewConsumable.consume( p, { styles: 'color' } ); // Consumes element's style.
+	 * viewConsumable.consume( p, { attributes: 'name', styles: 'color' } ); // Consumes attribute and style.
+	 * viewConsumable.consume( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be consumed.
+	 * viewConsumable.consume( textNode ); // Consumes text node.
+	 * viewConsumable.consume( docFragment ); // Consumes document fragment.
+	 * ```
+	 *
+	 * Consuming classes and styles as attribute will test if all added classes/styles can be consumed.
 	 *
 	 * ```ts
-	 * matcher.add( 'div', { classes: 'foobar' } );
+	 * viewConsumable.consume( p, { attributes: 'class' } ); // Consume only if all added classes can be consumed.
+	 * viewConsumable.consume( p, { attributes: 'style' } ); // Consume only if all added styles can be consumed.
 	 * ```
 	 *
-	 * @param pattern Object describing pattern details. If string or regular expression
-	 * is provided it will be used to match element's name. Pattern can be also provided in a form
-	 * of a function - then this function will be called with each {@link module:engine/view/element~Element element} as a parameter.
-	 * Function's return value will be stored under `match` key of the object returned from
-	 * {@link module:engine/view/matcher~Matcher#match match} or {@link module:engine/view/matcher~Matcher#matchAll matchAll} methods.
-	 */ add(...pattern) {
-        for (let item of pattern){
-            // String or RegExp pattern is used as element's name.
-            if (typeof item == 'string' || item instanceof RegExp) {
-                item = {
-                    name: item
-                };
+	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
+	 * @param consumables.name If set to true element's name will be included.
+	 * @param consumables.attributes Attribute name or array of attribute names.
+	 * @param consumables.classes Class name or array of class names.
+	 * @param consumables.styles Style name or array of style names.
+	 * @returns Returns `true` when all items included in method's call can be consumed,
+	 * otherwise returns `false`.
+	 */ consume(element, consumables) {
+        if (element.is('$text') || element.is('documentFragment')) {
+            if (!this.test(element, consumables)) {
+                return false;
             }
-            this._patterns.push(item);
+            // For text nodes and document fragments set value to false.
+            this._consumables.set(element, false);
+            return true;
+        }
+        // For elements - consume consumables object.
+        const elementConsumables = this._consumables.get(element);
+        if (elementConsumables === undefined) {
+            return false;
         }
+        return elementConsumables.consume(normalizeConsumables(consumables));
     }
     /**
-	 * Matches elements for currently stored patterns. Returns match information about first found
-	 * {@link module:engine/view/element~Element element}, otherwise returns `null`.
+	 * Reverts {@link module:engine/view/element~Element view element}, {@link module:engine/view/text~Text text node} or
+	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} so they can be consumed once again.
+	 * Method does not revert items that were never previously added for consumption, even if they are included in
+	 * method's call.
 	 *
-	 * Example of returned object:
+	 * ```ts
+	 * viewConsumable.revert( p, { name: true } ); // Reverts element's name.
+	 * viewConsumable.revert( p, { attributes: 'name' } ); // Reverts element's attribute.
+	 * viewConsumable.revert( p, { classes: 'foobar' } ); // Reverts element's class.
+	 * viewConsumable.revert( p, { styles: 'color' } ); // Reverts element's style.
+	 * viewConsumable.revert( p, { attributes: 'name', styles: 'color' } ); // Reverts attribute and style.
+	 * viewConsumable.revert( p, { classes: [ 'baz', 'bar' ] } ); // Multiple names can be reverted.
+	 * viewConsumable.revert( textNode ); // Reverts text node.
+	 * viewConsumable.revert( docFragment ); // Reverts document fragment.
+	 * ```
+	 *
+	 * Reverting classes and styles as attribute will revert all classes/styles that were previously added for
+	 * consumption.
 	 *
 	 * ```ts
-	 * {
-	 * 	element: <instance of found element>,
-	 * 	pattern: <pattern used to match found element>,
-	 * 	match: {
-	 * 		name: true,
-	 * 		attributes: [ 'title', 'href' ],
-	 * 		classes: [ 'foo' ],
-	 * 		styles: [ 'color', 'position' ]
-	 * 	}
-	 * }
+	 * viewConsumable.revert( p, { attributes: 'class' } ); // Reverts all classes added for consumption.
+	 * viewConsumable.revert( p, { attributes: 'style' } ); // Reverts all styles added for consumption.
 	 * ```
 	 *
-	 * @see module:engine/view/matcher~Matcher#add
-	 * @see module:engine/view/matcher~Matcher#matchAll
-	 * @param element View element to match against stored patterns.
-	 */ match(...element) {
-        for (const singleElement of element){
-            for (const pattern of this._patterns){
-                const match = isElementMatching(singleElement, pattern);
-                if (match) {
-                    return {
-                        element: singleElement,
-                        pattern,
-                        match
-                    };
-                }
+	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
+	 * @param consumables.name If set to true element's name will be included.
+	 * @param consumables.attributes Attribute name or array of attribute names.
+	 * @param consumables.classes Class name or array of class names.
+	 * @param consumables.styles Style name or array of style names.
+	 */ revert(element, consumables) {
+        const elementConsumables = this._consumables.get(element);
+        if (elementConsumables !== undefined) {
+            if (element.is('$text') || element.is('documentFragment')) {
+                // For text nodes and document fragments - set consumable to true.
+                this._consumables.set(element, true);
+            } else {
+                // For elements - revert items from consumables object.
+                elementConsumables.revert(normalizeConsumables(consumables));
             }
         }
-        return null;
     }
     /**
-	 * Matches elements for currently stored patterns. Returns array of match information with all found
-	 * {@link module:engine/view/element~Element elements}. If no element is found - returns `null`.
+	 * Creates {@link module:engine/conversion/viewconsumable~ViewConsumable ViewConsumable} instance from
+	 * {@link module:engine/view/node~Node node} or {@link module:engine/view/documentfragment~DocumentFragment document fragment}.
+	 * Instance will contain all elements, child nodes, attributes, styles and classes added for consumption.
 	 *
-	 * @see module:engine/view/matcher~Matcher#add
-	 * @see module:engine/view/matcher~Matcher#match
-	 * @param element View element to match against stored patterns.
-	 * @returns Array with match information about found elements or `null`. For more information
-	 * see {@link module:engine/view/matcher~Matcher#match match method} description.
-	 */ matchAll(...element) {
-        const results = [];
-        for (const singleElement of element){
-            for (const pattern of this._patterns){
-                const match = isElementMatching(singleElement, pattern);
-                if (match) {
-                    results.push({
-                        element: singleElement,
-                        pattern,
-                        match
-                    });
-                }
+	 * @param from View node or document fragment from which `ViewConsumable` will be created.
+	 * @param instance If provided, given `ViewConsumable` instance will be used
+	 * to add all consumables. It will be returned instead of a new instance.
+	 */ static createFrom(from, instance) {
+        if (!instance) {
+            instance = new ViewConsumable();
+        }
+        if (from.is('$text')) {
+            instance.add(from);
+        } else if (from.is('element') || from.is('documentFragment')) {
+            instance.add(from);
+            for (const child of from.getChildren()){
+                ViewConsumable.createFrom(child, instance);
             }
         }
-        return results.length > 0 ? results : null;
+        return instance;
     }
+}
+/**
+ * This is a private helper-class for {@link module:engine/conversion/viewconsumable~ViewConsumable}.
+ * It represents and manipulates consumable parts of a single {@link module:engine/view/element~Element}.
+ */ class ViewElementConsumables {
+    element;
     /**
-	 * Returns the name of the element to match if there is exactly one pattern added to the matcher instance
-	 * and it matches element name defined by `string` (not `RegExp`). Otherwise, returns `null`.
-	 *
-	 * @returns Element name trying to match.
-	 */ getElementName() {
-        if (this._patterns.length !== 1) {
-            return null;
-        }
-        const pattern = this._patterns[0];
-        const name = pattern.name;
-        return typeof pattern != 'function' && name && !(name instanceof RegExp) ? name : null;
-    }
-}
-/**
- * Returns match information if {@link module:engine/view/element~Element element} is matching provided pattern.
- * If element cannot be matched to provided pattern - returns `null`.
- *
- * @returns Returns object with match information or null if element is not matching.
- */ function isElementMatching(element, pattern) {
-    // If pattern is provided as function - return result of that function;
-    if (typeof pattern == 'function') {
-        return pattern(element);
+	 * Flag indicating if name of the element can be consumed.
+	 */ _canConsumeName = null;
+    /**
+	 * A map of element's consumables.
+	 * * For plain attributes the value is a boolean indicating whether the attribute is available to consume.
+	 * * For token based attributes (like class list and style) the value is a map of tokens to booleans
+	 * indicating whether the token is available to consume on the given attribute.
+	 */ _attributes = new Map();
+    /**
+	 * Creates ViewElementConsumables instance.
+	 *
+	 * @param from View element from which `ViewElementConsumables` is being created.
+	 */ constructor(from){
+        this.element = from;
     }
-    const match = {};
-    // Check element's name.
-    if (pattern.name) {
-        match.name = matchName(pattern.name, element.name);
-        if (!match.name) {
-            return null;
+    /**
+	 * Adds consumable parts of the {@link module:engine/view/element~Element view element}.
+	 * Element's name itself can be marked to be consumed (when element's name is consumed its attributes, classes and
+	 * styles still could be consumed):
+	 *
+	 * ```ts
+	 * consumables.add( { name: true } );
+	 * ```
+	 *
+	 * Attributes classes and styles:
+	 *
+	 * ```ts
+	 * consumables.add( { attributes: [ [ 'title' ], [ 'class', 'foo' ], [ 'style', 'color'] ] } );
+	 * consumables.add( { attributes: [ [ 'title' ], [ 'name' ], [ 'class', 'foo' ], [ 'class', 'bar' ] ] } );
+	 * ```
+	 *
+	 * Note: This method accepts only {@link module:engine/view/element~NormalizedConsumables}.
+	 * You can use {@link module:engine/conversion/viewconsumable~normalizeConsumables} helper to convert from
+	 * {@link module:engine/conversion/viewconsumable~Consumables} to `NormalizedConsumables`.
+	 *
+	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
+	 * attribute is provided - it should be handled separately by providing `style` and `class` in consumables object.
+	 *
+	 * @param consumables Object describing which parts of the element can be consumed.
+	 */ add(consumables) {
+        if (consumables.name) {
+            this._canConsumeName = true;
+        }
+        for (const [name, token] of consumables.attributes){
+            if (token) {
+                let attributeTokens = this._attributes.get(name);
+                if (!attributeTokens || typeof attributeTokens == 'boolean') {
+                    attributeTokens = new Map();
+                    this._attributes.set(name, attributeTokens);
+                }
+                attributeTokens.set(token, true);
+            } else if (name == 'style' || name == 'class') {
+                /**
+				 * Class and style attributes should be handled separately in
+				 * {@link module:engine/conversion/viewconsumable~ViewConsumable#add `ViewConsumable#add()`}.
+				 *
+				 * What you have done is trying to use:
+				 *
+				 * ```ts
+				 * consumables.add( { attributes: [ 'class', 'style' ] } );
+				 * ```
+				 *
+				 * While each class and style should be registered separately:
+				 *
+				 * ```ts
+				 * consumables.add( { classes: 'some-class', styles: 'font-weight' } );
+				 * ```
+				 *
+				 * @error viewconsumable-invalid-attribute
+				 */ throw new CKEditorError('viewconsumable-invalid-attribute', this);
+            } else {
+                this._attributes.set(name, true);
+            }
         }
     }
-    // Check element's attributes.
-    if (pattern.attributes) {
-        match.attributes = matchAttributes(pattern.attributes, element);
-        if (!match.attributes) {
-            return null;
+    /**
+	 * Tests if parts of the {@link module:engine/view/element~Element view element} can be consumed.
+	 *
+	 * Element's name can be tested:
+	 *
+	 * ```ts
+	 * consumables.test( { name: true } );
+	 * ```
+	 *
+	 * Attributes classes and styles:
+	 *
+	 * ```ts
+	 * consumables.test( { attributes: [ [ 'title' ], [ 'class', 'foo' ], [ 'style', 'color' ] ] } );
+	 * consumables.test( { attributes: [ [ 'title' ], [ 'name' ], [ 'class', 'foo' ], [ 'class', 'bar' ] ] } );
+	 * ```
+	 *
+	 * @param consumables Object describing which parts of the element should be tested.
+	 * @returns `true` when all tested items can be consumed, `null` when even one of the items
+	 * was never marked for consumption and `false` when even one of the items was already consumed.
+	 */ test(consumables) {
+        // Check if name can be consumed.
+        if (consumables.name && !this._canConsumeName) {
+            return this._canConsumeName;
+        }
+        for (const [name, token] of consumables.attributes){
+            const value = this._attributes.get(name);
+            // Return null if attribute is not found.
+            if (value === undefined) {
+                return null;
+            }
+            // Already consumed.
+            if (value === false) {
+                return false;
+            }
+            // Simple attribute is not consumed so continue to next attribute.
+            if (value === true) {
+                continue;
+            }
+            if (!token) {
+                // Tokenized attribute but token is not specified so check if all tokens are not consumed.
+                for (const tokenValue of value.values()){
+                    // Already consumed token.
+                    if (!tokenValue) {
+                        return false;
+                    }
+                }
+            } else {
+                const tokenValue = value.get(token);
+                // Return null if token is not found.
+                if (tokenValue === undefined) {
+                    return null;
+                }
+                // Already consumed.
+                if (!tokenValue) {
+                    return false;
+                }
+            }
         }
+        // Return true only if all can be consumed.
+        return true;
     }
-    // Check element's classes.
-    if (pattern.classes) {
-        match.classes = matchClasses(pattern.classes, element);
-        if (!match.classes) {
-            return null;
+    /**
+	 * Tests if parts of the {@link module:engine/view/element~Element view element} can be consumed and consumes them if available.
+	 * It returns `true` when all items included in method's call can be consumed, otherwise returns `false`.
+	 *
+	 * Element's name can be consumed:
+	 *
+	 * ```ts
+	 * consumables.consume( { name: true } );
+	 * ```
+	 *
+	 * Attributes classes and styles:
+	 *
+	 * ```ts
+	 * consumables.consume( { attributes: [ [ 'title' ], [ 'class', 'foo' ], [ 'style', 'color' ] ] } );
+	 * consumables.consume( { attributes: [ [ 'title' ], [ 'name' ], [ 'class', 'foo' ], [ 'class', 'bar' ] ] } );
+	 * ```
+	 *
+	 * @param consumables Object describing which parts of the element should be consumed.
+	 * @returns `true` when all tested items can be consumed and `false` when even one of the items could not be consumed.
+	 */ consume(consumables) {
+        if (!this.test(consumables)) {
+            return false;
+        }
+        if (consumables.name) {
+            this._canConsumeName = false;
+        }
+        for (const [name, token] of consumables.attributes){
+            // `value` must be set, because `this.test()` returned `true`.
+            const value = this._attributes.get(name);
+            // Plain (not tokenized) not-consumed attribute.
+            if (typeof value == 'boolean') {
+                // Use Element API to collect related attributes.
+                for (const [toConsume] of this.element._getConsumables(name, token).attributes){
+                    this._attributes.set(toConsume, false);
+                }
+            } else if (!token) {
+                // Tokenized attribute but token is not specified so consume all tokens.
+                for (const token of value.keys()){
+                    value.set(token, false);
+                }
+            } else {
+                // Use Element API to collect related attribute tokens.
+                for (const [, toConsume] of this.element._getConsumables(name, token).attributes){
+                    value.set(toConsume, false);
+                }
+            }
         }
+        return true;
     }
-    // Check element's styles.
-    if (pattern.styles) {
-        match.styles = matchStyles(pattern.styles, element);
-        if (!match.styles) {
-            return null;
+    /**
+	 * Revert already consumed parts of {@link module:engine/view/element~Element view Element}, so they can be consumed once again.
+	 * Element's name can be reverted:
+	 *
+	 * ```ts
+	 * consumables.revert( { name: true } );
+	 * ```
+	 *
+	 * Attributes classes and styles:
+	 *
+	 * ```ts
+	 * consumables.revert( { attributes: [ [ 'title' ], [ 'class', 'foo' ], [ 'style', 'color' ] ] } );
+	 * consumables.revert( { attributes: [ [ 'title' ], [ 'name' ], [ 'class', 'foo' ], [ 'class', 'bar' ] ] } );
+	 * ```
+	 *
+	 * @param consumables Object describing which parts of the element should be reverted.
+	 */ revert(consumables) {
+        if (consumables.name) {
+            this._canConsumeName = true;
+        }
+        for (const [name, token] of consumables.attributes){
+            const value = this._attributes.get(name);
+            // Plain consumed attribute.
+            if (value === false) {
+                this._attributes.set(name, true);
+                continue;
+            }
+            // Unknown attribute or not consumed.
+            if (value === undefined || value === true) {
+                continue;
+            }
+            if (!token) {
+                // Tokenized attribute but token is not specified so revert all tokens.
+                for (const token of value.keys()){
+                    value.set(token, true);
+                }
+            } else {
+                const tokenValue = value.get(token);
+                if (tokenValue === false) {
+                    value.set(token, true);
+                }
+            // Note that revert of consumed related styles is not handled.
+            }
         }
     }
-    return match;
 }
 /**
- * Checks if name can be matched by provided pattern.
- *
- * @returns Returns `true` if name can be matched, `false` otherwise.
- */ function matchName(pattern, name) {
-    // If pattern is provided as RegExp - test against this regexp.
-    if (pattern instanceof RegExp) {
-        return !!name.match(pattern);
+ * Normalizes a {@link module:engine/conversion/viewconsumable~Consumables} or {@link module:engine/view/matcher~Match}
+ * to a {@link module:engine/view/element~NormalizedConsumables}.
+ */ function normalizeConsumables(consumables) {
+    const attributes = [];
+    if ('attributes' in consumables && consumables.attributes) {
+        normalizeConsumablePart(attributes, consumables.attributes);
     }
-    return pattern === name;
+    if ('classes' in consumables && consumables.classes) {
+        normalizeConsumablePart(attributes, consumables.classes, 'class');
+    }
+    if ('styles' in consumables && consumables.styles) {
+        normalizeConsumablePart(attributes, consumables.styles, 'style');
+    }
+    return {
+        name: consumables.name || false,
+        attributes
+    };
 }
 /**
- * Checks if an array of key/value pairs can be matched against provided patterns.
- *
- * Patterns can be provided in a following ways:
- * - a boolean value matches any attribute with any value (or no value):
- *
- * ```ts
- * pattern: true
- * ```
- *
- * - a RegExp expression or object matches any attribute name:
- *
- * ```ts
- * pattern: /h[1-6]/
- * ```
- *
- * - an object matches any attribute that has the same name as the object item's key, where object item's value is:
- * 	- equal to `true`, which matches any attribute value:
- *
- * ```ts
- * pattern: {
- * 	required: true
- * }
- * ```
- *
- * 	- a string that is equal to attribute value:
- *
- * ```ts
- * pattern: {
- * 	rel: 'nofollow'
- * }
- * ```
- *
- * 	- a regular expression that matches attribute value,
- *
- * ```ts
- * pattern: {
- * 	src: /^https/
- * }
- * ```
- *
- * - an array with items, where the item is:
- * 	- a string that is equal to attribute value:
- *
- * ```ts
- * pattern: [ 'data-property-1', 'data-property-2' ],
- * ```
- *
- * 	- an object with `key` and `value` property, where `key` is a regular expression matching attribute name and
- * 		`value` is either regular expression matching attribute value or a string equal to attribute value:
- *
- * ```ts
- * pattern: [
- * 	{ key: /^data-property-/, value: true },
- * 	// or:
- * 	{ key: /^data-property-/, value: 'foobar' },
- * 	// or:
- * 	{ key: /^data-property-/, value: /^foo/ }
- * ]
- * ```
- *
- * @param patterns Object with information about attributes to match.
- * @param keys Attribute, style or class keys.
- * @param valueGetter A function providing value for a given item key.
- * @returns Returns array with matched attribute names or `null` if no attributes were matched.
- */ function matchPatterns(patterns, keys, valueGetter) {
-    const normalizedPatterns = normalizePatterns(patterns);
-    const normalizedItems = Array.from(keys);
-    const match = [];
-    normalizedPatterns.forEach(([patternKey, patternValue])=>{
-        normalizedItems.forEach((itemKey)=>{
-            if (isKeyMatched(patternKey, itemKey) && isValueMatched(patternValue, itemKey, valueGetter)) {
-                match.push(itemKey);
-            }
-        });
-    });
-    // Return matches only if there are at least as many of them as there are patterns.
-    // The RegExp pattern can match more than one item.
-    if (!normalizedPatterns.length || match.length < normalizedPatterns.length) {
-        return undefined;
+ * Normalizes a list of consumable attributes to a common tuple format.
+ */ function normalizeConsumablePart(attributes, items, prefix) {
+    if (typeof items == 'string') {
+        attributes.push(prefix ? [
+            prefix,
+            items
+        ] : [
+            items
+        ]);
+        return;
+    }
+    for (const item of items){
+        if (Array.isArray(item)) {
+            attributes.push(item);
+        } else {
+            attributes.push(prefix ? [
+                prefix,
+                item
+            ] : [
+                item
+            ]);
+        }
     }
-    return match;
 }
+
 /**
- * Bring all the possible pattern forms to an array of arrays where first item is a key and second is a value.
- *
- * Examples:
- *
- * Boolean pattern value:
- *
- * ```ts
- * true
- * ```
- *
- * to
- *
- * ```ts
- * [ [ true, true ] ]
- * ```
- *
- * Textual pattern value:
- *
- * ```ts
- * 'attribute-name-or-class-or-style'
- * ```
- *
- * to
- *
- * ```ts
- * [ [ 'attribute-name-or-class-or-style', true ] ]
- * ```
- *
- * Regular expression:
- *
- * ```ts
- * /^data-.*$/
- * ```
- *
- * to
- *
- * ```ts
- * [ [ /^data-.*$/, true ] ]
- * ```
- *
+ * View matcher class.
+ * Instance of this class can be used to find {@link module:engine/view/element~Element elements} that match given pattern.
+ */ class Matcher {
+    _patterns = [];
+    /**
+	 * Creates new instance of Matcher.
+	 *
+	 * @param pattern Match patterns. See {@link module:engine/view/matcher~Matcher#add add method} for more information.
+	 */ constructor(...pattern){
+        this.add(...pattern);
+    }
+    /**
+	 * Adds pattern or patterns to matcher instance.
+	 *
+	 * ```ts
+	 * // String.
+	 * matcher.add( 'div' );
+	 *
+	 * // Regular expression.
+	 * matcher.add( /^\w/ );
+	 *
+	 * // Single class.
+	 * matcher.add( {
+	 * 	classes: 'foobar'
+	 * } );
+	 * ```
+	 *
+	 * See {@link module:engine/view/matcher~MatcherPattern} for more examples.
+	 *
+	 * Multiple patterns can be added in one call:
+	 *
+	 * ```ts
+	 * matcher.add( 'div', { classes: 'foobar' } );
+	 * ```
+	 *
+	 * @param pattern Object describing pattern details. If string or regular expression
+	 * is provided it will be used to match element's name. Pattern can be also provided in a form
+	 * of a function - then this function will be called with each {@link module:engine/view/element~Element element} as a parameter.
+	 * Function's return value will be stored under `match` key of the object returned from
+	 * {@link module:engine/view/matcher~Matcher#match match} or {@link module:engine/view/matcher~Matcher#matchAll matchAll} methods.
+	 */ add(...pattern) {
+        for (let item of pattern){
+            // String or RegExp pattern is used as element's name.
+            if (typeof item == 'string' || item instanceof RegExp) {
+                item = {
+                    name: item
+                };
+            }
+            this._patterns.push(item);
+        }
+    }
+    /**
+	 * Matches elements for currently stored patterns. Returns match information about first found
+	 * {@link module:engine/view/element~Element element}, otherwise returns `null`.
+	 *
+	 * Example of returned object:
+	 *
+	 * ```ts
+	 * {
+	 * 	element: <instance of found element>,
+	 * 	pattern: <pattern used to match found element>,
+	 * 	match: {
+	 * 		name: true,
+	 * 		attributes: [
+	 * 			[ 'title' ],
+	 * 			[ 'href' ],
+	 * 			[ 'class', 'foo' ],
+	 * 			[ 'style', 'color' ],
+	 * 			[ 'style', 'position' ]
+	 * 		]
+	 * 	}
+	 * }
+	 * ```
+	 *
+	 * You could use the `match` field from the above returned object as an input for the
+	 * {@link module:engine/conversion/viewconsumable~ViewConsumable#test `ViewConsumable#test()`} and
+	 * {@link module:engine/conversion/viewconsumable~ViewConsumable#consume `ViewConsumable#consume()`} methods.
+	 *
+	 * @see module:engine/view/matcher~Matcher#add
+	 * @see module:engine/view/matcher~Matcher#matchAll
+	 * @param element View element to match against stored patterns.
+	 * @returns The match information about found element or `null`.
+	 */ match(...element) {
+        for (const singleElement of element){
+            for (const pattern of this._patterns){
+                const match = this._isElementMatching(singleElement, pattern);
+                if (match) {
+                    return {
+                        element: singleElement,
+                        pattern,
+                        match
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    /**
+	 * Matches elements for currently stored patterns. Returns array of match information with all found
+	 * {@link module:engine/view/element~Element elements}. If no element is found - returns `null`.
+	 *
+	 * @see module:engine/view/matcher~Matcher#add
+	 * @see module:engine/view/matcher~Matcher#match
+	 * @param element View element to match against stored patterns.
+	 * @returns Array with match information about found elements or `null`. For more information
+	 * see {@link module:engine/view/matcher~Matcher#match match method} description.
+	 */ matchAll(...element) {
+        const results = [];
+        for (const singleElement of element){
+            for (const pattern of this._patterns){
+                const match = this._isElementMatching(singleElement, pattern);
+                if (match) {
+                    results.push({
+                        element: singleElement,
+                        pattern,
+                        match
+                    });
+                }
+            }
+        }
+        return results.length > 0 ? results : null;
+    }
+    /**
+	 * Returns the name of the element to match if there is exactly one pattern added to the matcher instance
+	 * and it matches element name defined by `string` (not `RegExp`). Otherwise, returns `null`.
+	 *
+	 * @returns Element name trying to match.
+	 */ getElementName() {
+        if (this._patterns.length !== 1) {
+            return null;
+        }
+        const pattern = this._patterns[0];
+        const name = pattern.name;
+        return typeof pattern != 'function' && name && !(name instanceof RegExp) ? name : null;
+    }
+    /**
+	 * Returns match information if {@link module:engine/view/element~Element element} is matching provided pattern.
+	 * If element cannot be matched to provided pattern - returns `null`.
+	 *
+	 * @returns Returns object with match information or null if element is not matching.
+	 */ _isElementMatching(element, pattern) {
+        // If pattern is provided as function - return result of that function;
+        if (typeof pattern == 'function') {
+            const match = pattern(element);
+            // In some places we use Matcher with callback pattern that returns boolean.
+            if (!match || typeof match != 'object') {
+                return match;
+            }
+            return normalizeConsumables(match);
+        }
+        const match = {};
+        // Check element's name.
+        if (pattern.name) {
+            match.name = matchName(pattern.name, element.name);
+            if (!match.name) {
+                return null;
+            }
+        }
+        const attributesMatch = [];
+        // Check element's attributes.
+        if (pattern.attributes && !matchAttributes(pattern.attributes, element, attributesMatch)) {
+            return null;
+        }
+        // Check element's classes.
+        if (pattern.classes && !matchClasses(pattern.classes, element, attributesMatch)) {
+            return null;
+        }
+        // Check element's styles.
+        if (pattern.styles && !matchStyles(pattern.styles, element, attributesMatch)) {
+            return null;
+        }
+        // Note the `attributesMatch` array is populated by the above calls.
+        if (attributesMatch.length) {
+            match.attributes = attributesMatch;
+        }
+        return match;
+    }
+}
+/**
+ * Returns true if the given `item` matches the pattern.
+ *
+ * @internal
+ * @param pattern A pattern representing a key/value we want to match.
+ * @param item An actual item key/value (e.g. `'src'`, `'background-color'`, `'ck-widget'`) we're testing against pattern.
+ */ function isPatternMatched(pattern, item) {
+    return pattern === true || pattern === item || pattern instanceof RegExp && !!String(item).match(pattern);
+}
+/**
+ * Checks if name can be matched by provided pattern.
+ *
+ * @returns Returns `true` if name can be matched, `false` otherwise.
+ */ function matchName(pattern, name) {
+    // If pattern is provided as RegExp - test against this regexp.
+    if (pattern instanceof RegExp) {
+        return !!name.match(pattern);
+    }
+    return pattern === name;
+}
+/**
+ * Bring all the possible pattern forms to an array of tuples where first item is a key, second is a value,
+ * and third optional is a token value.
+ *
+ * Examples:
+ *
+ * Boolean pattern value:
+ *
+ * ```ts
+ * true
+ * ```
+ *
+ * to
+ *
+ * ```ts
+ * [ [ true, true ] ]
+ * ```
+ *
+ * Textual pattern value:
+ *
+ * ```ts
+ * 'attribute-name-or-class-or-style'
+ * ```
+ *
+ * to
+ *
+ * ```ts
+ * [ [ 'attribute-name-or-class-or-style', true ] ]
+ * ```
+ *
+ * Regular expression:
+ *
+ * ```ts
+ * /^data-.*$/
+ * ```
+ *
+ * to
+ *
+ * ```ts
+ * [ [ /^data-.*$/, true ] ]
+ * ```
+ *
  * Objects (plain or with `key` and `value` specified explicitly):
  *
  * ```ts
@@ -1014,11 +1462,15 @@ TextProxy$1.prototype.is = function(type) {
  * ```
  *
  * @returns Returns an array of objects or null if provided patterns were not in an expected form.
- */ function normalizePatterns(patterns) {
+ */ function normalizePatterns(patterns, prefix) {
     if (Array.isArray(patterns)) {
         return patterns.map((pattern)=>{
             if (typeof pattern !== 'object' || pattern instanceof RegExp) {
-                return [
+                return prefix ? [
+                    prefix,
+                    pattern,
+                    true
+                ] : [
                     pattern,
                     true
                 ];
@@ -1027,7 +1479,11 @@ TextProxy$1.prototype.is = function(type) {
                 // Documented at the end of matcher.js.
                 logWarning('matcher-pattern-missing-key-or-value', pattern);
             }
-            return [
+            return prefix ? [
+                prefix,
+                pattern.key,
+                pattern.value
+            ] : [
                 pattern.key,
                 pattern.value
             ];
@@ -1035,18 +1491,26 @@ TextProxy$1.prototype.is = function(type) {
     }
     if (typeof patterns !== 'object' || patterns instanceof RegExp) {
         return [
-            [
+            prefix ? [
+                prefix,
+                patterns,
+                true
+            ] : [
                 patterns,
                 true
             ]
         ];
     }
-    // Below we do what Object.entries() does, but faster.
+    // Below we do what Object.entries() does, but faster
     const normalizedPatterns = [];
     for(const key in patterns){
         // Replace with Object.hasOwn() when we upgrade to es2022.
         if (Object.prototype.hasOwnProperty.call(patterns, key)) {
-            normalizedPatterns.push([
+            normalizedPatterns.push(prefix ? [
+                prefix,
+                key,
+                patterns[key]
+            ] : [
                 key,
                 patterns[key]
             ]);
@@ -1054,35 +1518,16 @@ TextProxy$1.prototype.is = function(type) {
     }
     return normalizedPatterns;
 }
-/**
- * @param patternKey A pattern representing a key we want to match.
- * @param itemKey An actual item key (e.g. `'src'`, `'background-color'`, `'ck-widget'`) we're testing against pattern.
- */ function isKeyMatched(patternKey, itemKey) {
-    return patternKey === true || patternKey === itemKey || patternKey instanceof RegExp && itemKey.match(patternKey);
-}
-/**
- * @param patternValue A pattern representing a value we want to match.
- * @param itemKey An item key, e.g. `background`, `href`, 'rel', etc.
- * @param valueGetter A function used to provide a value for a given `itemKey`.
- */ function isValueMatched(patternValue, itemKey, valueGetter) {
-    if (patternValue === true) {
-        return true;
-    }
-    const itemValue = valueGetter(itemKey);
-    // For now, the reducers are not returning the full tree of properties.
-    // Casting to string preserves the old behavior until the root cause is fixed.
-    // More can be found in https://github.com/ckeditor/ckeditor5/issues/10399.
-    return patternValue === itemValue || patternValue instanceof RegExp && !!String(itemValue).match(patternValue);
-}
 /**
  * Checks if attributes of provided element can be matched against provided patterns.
  *
  * @param patterns Object with information about attributes to match. Each key of the object will be
  * used as attribute name. Value of each key can be a string or regular expression to match against attribute value.
  * @param  element Element which attributes will be tested.
+ * @param match An array to populate with matching tuples.
  * @returns Returns array with matched attribute names or `null` if no attributes were matched.
- */ function matchAttributes(patterns, element) {
-    const attributeKeys = new Set(element.getAttributeKeys());
+ */ function matchAttributes(patterns, element, match) {
+    let excludeAttributes;
     // `style` and `class` attribute keys are deprecated. Only allow them in object pattern
     // for backward compatibility.
     if (typeof patterns === 'object' && !(patterns instanceof RegExp) && !Array.isArray(patterns)) {
@@ -1095,20 +1540,22 @@ TextProxy$1.prototype.is = function(type) {
             logWarning('matcher-pattern-deprecated-attributes-class-key', patterns);
         }
     } else {
-        attributeKeys.delete('style');
-        attributeKeys.delete('class');
+        excludeAttributes = [
+            'class',
+            'style'
+        ];
     }
-    return matchPatterns(patterns, attributeKeys, (key)=>element.getAttribute(key));
+    return element._collectAttributesMatch(normalizePatterns(patterns), match, excludeAttributes);
 }
 /**
  * Checks if classes of provided element can be matched against provided patterns.
  *
  * @param patterns Array of strings or regular expressions to match against element's classes.
  * @param element Element which classes will be tested.
+ * @param match An array to populate with matching tuples.
  * @returns Returns array with matched class names or `null` if no classes were matched.
- */ function matchClasses(patterns, element) {
-    // We don't need `getter` here because patterns for classes are always normalized to `[ className, true ]`.
-    return matchPatterns(patterns, element.getClassNames(), /* istanbul ignore next -- @preserve */ ()=>{});
+ */ function matchClasses(patterns, element, match) {
+    return element._collectAttributesMatch(normalizePatterns(patterns, 'class'), match);
 }
 /**
  * Checks if styles of provided element can be matched against provided patterns.
@@ -1116,9 +1563,10 @@ TextProxy$1.prototype.is = function(type) {
  * @param patterns Object with information about styles to match. Each key of the object will be
  * used as style name. Value of each key can be a string or regular expression to match against style value.
  * @param element Element which styles will be tested.
+ * @param match An array to populate with matching tuples.
  * @returns Returns array with matched style names or `null` if no styles were matched.
- */ function matchStyles(patterns, element) {
-    return matchPatterns(patterns, element.getStyleNames(true), (key)=>element.getStyle(key));
+ */ function matchStyles(patterns, element, match) {
+    return element._collectAttributesMatch(normalizePatterns(patterns, 'style'), match);
 }
  /**
  * The key-value matcher pattern is missing key or value. Both must be present.
@@ -1238,6 +1686,7 @@ TextProxy$1.prototype.is = function(type) {
         for (const [key, value] of parsedStyles){
             this._styleProcessor.toNormalizedForm(key, value, this._styles);
         }
+        return this;
     }
     /**
 	 * Checks if a given style is set.
@@ -1315,14 +1764,16 @@ TextProxy$1.prototype.is = function(type) {
 	 * styles.toString(); // -> 'margin-bottom:1px;margin-left:1px;'
 	 * ```
 	 *
-	 * @param name Style name.
-	 */ remove(name) {
-        this._cachedStyleNames = null;
-        this._cachedExpandedStyleNames = null;
-        const path = toPath(name);
-        unset(this._styles, path);
-        delete this._styles[name];
-        this._cleanEmptyObjectsOnPath(path);
+	 * @param names Style name or an array of names.
+	 */ remove(names) {
+        for (const name of toArray(names)){
+            this._cachedStyleNames = null;
+            this._cachedExpandedStyleNames = null;
+            const path = toPath(name);
+            unset(this._styles, path);
+            delete this._styles[name];
+            this._cleanEmptyObjectsOnPath(path);
+        }
     }
     /**
 	 * Returns a normalized style object or a single value.
@@ -1478,6 +1929,11 @@ TextProxy$1.prototype.is = function(type) {
         this._cachedStyleNames = this._cachedStyleNames || this.getStylesEntries().map(([key])=>key);
         return this._cachedStyleNames;
     }
+    /**
+	 * Alias for {@link #getStyleNames}.
+	 */ keys() {
+        return this.getStyleNames();
+    }
     /**
 	 * Removes all styles.
 	 */ clear() {
@@ -1485,6 +1941,19 @@ TextProxy$1.prototype.is = function(type) {
         this._cachedStyleNames = null;
         this._cachedExpandedStyleNames = null;
     }
+    /**
+	 * Returns `true` if both attributes have the same styles.
+	 */ isSimilar(other) {
+        if (this.size !== other.size) {
+            return false;
+        }
+        for (const property of this.getStyleNames()){
+            if (!other.has(property) || other.getAsString(property) !== this.getAsString(property)) {
+                return false;
+            }
+        }
+        return true;
+    }
     /**
 	 * Returns normalized styles entries for further processing.
 	 */ getStylesEntries() {
@@ -1496,21 +1965,125 @@ TextProxy$1.prototype.is = function(type) {
         return parsed;
     }
     /**
-	 * Removes empty objects upon removing an entry from internal object.
-	 */ _cleanEmptyObjectsOnPath(path) {
-        const pathParts = path.split('.');
-        const isChildPath = pathParts.length > 1;
-        if (!isChildPath) {
-            return;
-        }
-        const parentPath = pathParts.splice(0, pathParts.length - 1).join('.');
-        const parentObject = get(this._styles, parentPath);
-        if (!parentObject) {
-            return;
-        }
-        const isParentEmpty = !Object.keys(parentObject).length;
-        if (isParentEmpty) {
-            this.remove(parentPath);
+	 * Clones the attribute value.
+	 *
+	 * @internal
+	 */ _clone() {
+        const clone = new this.constructor(this._styleProcessor);
+        clone.set(this.getNormalized());
+        return clone;
+    }
+    /**
+	 * Used by the {@link module:engine/view/matcher~Matcher Matcher} to collect matching styles.
+	 *
+	 * @internal
+	 * @param tokenPattern The matched style name pattern.
+	 * @param valuePattern The matched style value pattern.
+	 * @returns An array of matching tokens (style names).
+	 */ _getTokensMatch(tokenPattern, valuePattern) {
+        const match = [];
+        for (const styleName of this.getStyleNames(true)){
+            if (isPatternMatched(tokenPattern, styleName)) {
+                if (valuePattern === true) {
+                    match.push(styleName);
+                    continue;
+                }
+                // For now, the reducers are not returning the full tree of properties.
+                // Casting to string preserves the old behavior until the root cause is fixed.
+                // More can be found in https://github.com/ckeditor/ckeditor5/issues/10399.
+                const value = this.getAsString(styleName);
+                if (isPatternMatched(valuePattern, value)) {
+                    match.push(styleName);
+                }
+            }
+        }
+        return match.length ? match : undefined;
+    }
+    /**
+	 * Returns a list of consumables for the attribute. This includes related styles.
+	 *
+	 * Could be filtered by the given style name.
+	 *
+	 * @internal
+	 */ _getConsumables(name) {
+        const result = [];
+        if (name) {
+            result.push(name);
+            for (const relatedName of this._styleProcessor.getRelatedStyles(name)){
+                result.push(relatedName);
+            }
+        } else {
+            for (const name of this.getStyleNames()){
+                for (const relatedName of this._styleProcessor.getRelatedStyles(name)){
+                    result.push(relatedName);
+                }
+                result.push(name);
+            }
+        }
+        return result;
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_canMergeAttributesFrom} to verify if the given attribute can be merged without
+	 * conflicts into the attribute.
+	 *
+	 * This method is indirectly used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to merge it with other AttributeElement.
+	 *
+	 * @internal
+	 */ _canMergeFrom(other) {
+        for (const key of other.getStyleNames()){
+            if (this.has(key) && this.getAsString(key) !== other.getAsString(key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_mergeAttributesFrom} to merge a given attribute into the attribute.
+	 *
+	 * This method is indirectly used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to merge it with other AttributeElement.
+	 *
+	 * @internal
+	 */ _mergeFrom(other) {
+        for (const prop of other.getStyleNames()){
+            if (!this.has(prop)) {
+                this.set(prop, other.getAsString(prop));
+            }
+        }
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_canSubtractAttributesOf} to verify if the given attribute can be fully
+	 * subtracted from the attribute.
+	 *
+	 * This method is indirectly used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to unwrap the AttributeElement.
+	 *
+	 * @internal
+	 */ _isMatching(other) {
+        for (const key of other.getStyleNames()){
+            if (!this.has(key) || this.getAsString(key) !== other.getAsString(key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+	 * Removes empty objects upon removing an entry from internal object.
+	 */ _cleanEmptyObjectsOnPath(path) {
+        const pathParts = path.split('.');
+        const isChildPath = pathParts.length > 1;
+        if (!isChildPath) {
+            return;
+        }
+        const parentPath = pathParts.splice(0, pathParts.length - 1).join('.');
+        const parentObject = get(this._styles, parentPath);
+        if (!parentObject) {
+            return;
+        }
+        const isParentEmpty = !Object.keys(parentObject).length;
+        if (isParentEmpty) {
+            this.remove(parentPath);
         }
     }
 }
@@ -1942,6 +2515,176 @@ TextProxy$1.prototype.is = function(type) {
     set(stylesObject, nameOrPath, valueToSet);
 }
 
+/**
+ * Token list. Allows handling (adding, removing, retrieving) a set of tokens (for example class names).
+ */ class TokenList {
+    /**
+	 * The set of tokens.
+	 */ _set = new Set();
+    /**
+	 * Returns true if token list has no tokens set.
+	 */ get isEmpty() {
+        return this._set.size == 0;
+    }
+    /**
+	 * Number of tokens.
+	 */ get size() {
+        return this._set.size;
+    }
+    /**
+	 * Checks if a given token is set.
+	 */ has(name) {
+        return this._set.has(name);
+    }
+    /**
+	 * Returns all tokens.
+	 */ keys() {
+        return Array.from(this._set.keys());
+    }
+    /**
+	 * Resets the value to the given one.
+	 */ setTo(value) {
+        this.clear();
+        for (const token of value.split(/\s+/)){
+            if (token) {
+                this._set.add(token);
+            }
+        }
+        return this;
+    }
+    /**
+	 * Sets a given token without affecting other tokens.
+	 */ set(tokens) {
+        for (const token of toArray(tokens)){
+            if (token) {
+                this._set.add(token);
+            }
+        }
+    }
+    /**
+	 * Removes given token.
+	 */ remove(tokens) {
+        for (const token of toArray(tokens)){
+            this._set.delete(token);
+        }
+    }
+    /**
+	 * Removes all tokens.
+	 */ clear() {
+        this._set.clear();
+    }
+    /**
+	 * Returns a normalized tokens string.
+	 */ toString() {
+        return Array.from(this._set).join(' ');
+    }
+    /**
+	 * Returns `true` if both attributes have the same tokens.
+	 */ isSimilar(other) {
+        if (this.size !== other.size) {
+            return false;
+        }
+        for (const token of this.keys()){
+            if (!other.has(token)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+	 * Clones the attribute value.
+	 *
+	 * @internal
+	 */ _clone() {
+        const clone = new this.constructor();
+        clone._set = new Set(this._set);
+        return clone;
+    }
+    /**
+	 * Used by the {@link module:engine/view/matcher~Matcher Matcher} to collect matching attribute tokens.
+	 *
+	 * @internal
+	 * @param tokenPattern The matched token name pattern.
+	 * @returns An array of matching tokens.
+	 */ _getTokensMatch(tokenPattern) {
+        const match = [];
+        if (tokenPattern === true) {
+            for (const token of this._set.keys()){
+                match.push(token);
+            }
+            return match;
+        }
+        if (typeof tokenPattern == 'string') {
+            for (const token of tokenPattern.split(/\s+/)){
+                if (this._set.has(token)) {
+                    match.push(token);
+                } else {
+                    return undefined;
+                }
+            }
+            return match;
+        }
+        for (const token of this._set.keys()){
+            if (token.match(tokenPattern)) {
+                match.push(token);
+            }
+        }
+        return match.length ? match : undefined;
+    }
+    /**
+	 * Returns a list of consumables for the attribute.
+	 *
+	 * Could be filtered by the given token name.
+	 *
+	 * @internal
+	 */ _getConsumables(name) {
+        return name ? [
+            name
+        ] : this.keys();
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_canMergeAttributesFrom} to verify if the given attribute
+	 * can be merged without conflicts into the attribute.
+	 *
+	 * This method is indirectly used by the {@link module:engine/view/downcastwriter~DowncastWriter} while downcasting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to merge it with other `AttributeElement`.
+	 *
+	 * @internal
+	 */ _canMergeFrom() {
+        return true;
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_mergeAttributesFrom} to merge a given attribute into the attribute.
+	 *
+	 * This method is indirectly used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to merge it with other AttributeElement.
+	 *
+	 * @internal
+	 */ _mergeFrom(other) {
+        for (const token of other._set.keys()){
+            if (!this._set.has(token)) {
+                this._set.add(token);
+            }
+        }
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_canSubtractAttributesOf} to verify if the given attribute
+	 * can be fully subtracted from the attribute.
+	 *
+	 * This method is indirectly used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to unwrap the AttributeElement.
+	 *
+	 * @internal
+	 */ _isMatching(other) {
+        for (const name of other._set.keys()){
+            if (!this._set.has(name)) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+
 // @if CK_DEBUG_ENGINE // const { convertMapToTags } = require( '../dev-utils/utils' );
 /**
  * View element.
@@ -1986,16 +2729,24 @@ TextProxy$1.prototype.is = function(type) {
     /**
 	 * Array of child nodes.
 	 */ _children;
-    /**
-	 * Set of classes associated with element instance.
-	 */ _classes;
-    /**
-	 * Normalized styles.
-	 */ _styles;
     /**
 	 * Map of custom properties.
 	 * Custom properties can be added to element instance, will be cloned but not rendered into DOM.
 	 */ _customProperties = new Map();
+    /**
+	 * Set of classes associated with element instance.
+	 *
+	 * Note that this is just an alias for `this._attrs.get( 'class' );`
+	 */ get _classes() {
+        return this._attrs.get('class');
+    }
+    /**
+	 * Normalized styles.
+	 *
+	 * Note that this is just an alias for `this._attrs.get( 'style' );`
+	 */ get _styles() {
+        return this._attrs.get('style');
+    }
     /**
 	 * Creates a view element.
 	 *
@@ -2015,24 +2766,11 @@ TextProxy$1.prototype.is = function(type) {
 	 */ constructor(document, name, attrs, children){
         super(document);
         this.name = name;
-        this._attrs = parseAttributes(attrs);
+        this._attrs = this._parseAttributes(attrs);
         this._children = [];
         if (children) {
             this._insertChild(0, children);
         }
-        this._classes = new Set();
-        if (this._attrs.has('class')) {
-            // Remove class attribute and handle it by class set.
-            const classString = this._attrs.get('class');
-            parseClasses(this._classes, classString);
-            this._attrs.delete('class');
-        }
-        this._styles = new StylesMap(this.document.stylesProcessor);
-        if (this._attrs.has('style')) {
-            // Remove style attribute and handle it by styles map.
-            this._styles.setTo(this._attrs.get('style'));
-            this._attrs.delete('style');
-        }
     }
     /**
 	 * Number of element's children.
@@ -2072,13 +2810,19 @@ TextProxy$1.prototype.is = function(type) {
 	 *
 	 * @returns Keys for attributes.
 	 */ *getAttributeKeys() {
-        if (this._classes.size > 0) {
+        // This is yielded in this specific order to maintain backward compatibility of data.
+        // Otherwise, we could simply just have the `for` loop only inside this method.
+        if (this._classes) {
             yield 'class';
         }
-        if (!this._styles.isEmpty) {
+        if (this._styles) {
             yield 'style';
         }
-        yield* this._attrs.keys();
+        for (const key of this._attrs.keys()){
+            if (key != 'class' && key != 'style') {
+                yield key;
+            }
+        }
     }
     /**
 	 * Returns iterator that iterates over this element's attributes.
@@ -2086,17 +2830,10 @@ TextProxy$1.prototype.is = function(type) {
 	 * Attributes are returned as arrays containing two items. First one is attribute key and second is attribute value.
 	 * This format is accepted by native `Map` object and also can be passed in `Node` constructor.
 	 */ *getAttributes() {
-        yield* this._attrs.entries();
-        if (this._classes.size > 0) {
+        for (const [name, value] of this._attrs.entries()){
             yield [
-                'class',
-                this.getAttribute('class')
-            ];
-        }
-        if (!this._styles.isEmpty) {
-            yield [
-                'style',
-                this.getAttribute('style')
+                name,
+                String(value)
             ];
         }
     }
@@ -2106,33 +2843,25 @@ TextProxy$1.prototype.is = function(type) {
 	 * @param key Attribute key.
 	 * @returns Attribute value.
 	 */ getAttribute(key) {
-        if (key == 'class') {
-            if (this._classes.size > 0) {
-                return [
-                    ...this._classes
-                ].join(' ');
-            }
-            return undefined;
-        }
-        if (key == 'style') {
-            const inlineStyle = this._styles.toString();
-            return inlineStyle == '' ? undefined : inlineStyle;
-        }
-        return this._attrs.get(key);
+        return this._attrs.has(key) ? String(this._attrs.get(key)) : undefined;
     }
     /**
 	 * Returns a boolean indicating whether an attribute with the specified key exists in the element.
 	 *
 	 * @param key Attribute key.
 	 * @returns `true` if attribute with the specified key exists in the element, `false` otherwise.
-	 */ hasAttribute(key) {
-        if (key == 'class') {
-            return this._classes.size > 0;
+	 */ hasAttribute(key, token) {
+        if (!this._attrs.has(key)) {
+            return false;
         }
-        if (key == 'style') {
-            return !this._styles.isEmpty;
+        if (token !== undefined) {
+            if (usesStylesMap(this.name, key) || usesTokenList(this.name, key)) {
+                return this._attrs.get(key).has(token);
+            } else {
+                return this._attrs.get(key) === token;
+            }
         }
-        return this._attrs.has(key);
+        return true;
     }
     /**
 	 * Checks if this element is similar to other element.
@@ -2151,24 +2880,20 @@ TextProxy$1.prototype.is = function(type) {
             return false;
         }
         // Check number of attributes, classes and styles.
-        if (this._attrs.size !== otherElement._attrs.size || this._classes.size !== otherElement._classes.size || this._styles.size !== otherElement._styles.size) {
+        if (this._attrs.size !== otherElement._attrs.size) {
             return false;
         }
         // Check if attributes are the same.
         for (const [key, value] of this._attrs){
-            if (!otherElement._attrs.has(key) || otherElement._attrs.get(key) !== value) {
+            const otherValue = otherElement._attrs.get(key);
+            if (otherValue === undefined) {
                 return false;
             }
-        }
-        // Check if classes are the same.
-        for (const className of this._classes){
-            if (!otherElement._classes.has(className)) {
-                return false;
-            }
-        }
-        // Check if styles are the same.
-        for (const property of this._styles.getStyleNames()){
-            if (!otherElement._styles.has(property) || otherElement._styles.getAsString(property) !== this._styles.getAsString(property)) {
+            if (typeof value == 'string' || typeof otherValue == 'string') {
+                if (otherValue !== value) {
+                    return false;
+                }
+            } else if (!value.isSimilar(otherValue)) {
                 return false;
             }
         }
@@ -2184,7 +2909,7 @@ TextProxy$1.prototype.is = function(type) {
 	 * ```
 	 */ hasClass(...className) {
         for (const name of className){
-            if (!this._classes.has(name)) {
+            if (!this._classes || !this._classes.has(name)) {
                 return false;
             }
         }
@@ -2193,10 +2918,15 @@ TextProxy$1.prototype.is = function(type) {
     /**
 	 * Returns iterator that contains all class names.
 	 */ getClassNames() {
-        return this._classes.keys();
+        const array = this._classes ? this._classes.keys() : [];
+        // This is overcomplicated because we need to be backward compatible for use cases when iterator is expected.
+        const iterator = array[Symbol.iterator]();
+        return Object.assign(array, {
+            next: iterator.next.bind(iterator)
+        });
     }
     /**
-	 * Returns style value for the given property mae.
+	 * Returns style value for the given property name.
 	 * If the style does not exist `undefined` is returned.
 	 *
 	 * **Note**: This method can work with normalized style names if
@@ -2220,7 +2950,7 @@ TextProxy$1.prototype.is = function(type) {
 	 * element.getStyle( 'margin' ); // -> 'margin: 1px 1px 3em;'
 	 * ```
 	 */ getStyle(property) {
-        return this._styles.getAsString(property);
+        return this._styles && this._styles.getAsString(property);
     }
     /**
 	 * Returns a normalized style object or single style value.
@@ -2256,14 +2986,14 @@ TextProxy$1.prototype.is = function(type) {
 	 *
 	 * @param property Name of CSS property
 	 */ getNormalizedStyle(property) {
-        return this._styles.getNormalized(property);
+        return this._styles && this._styles.getNormalized(property);
     }
     /**
-	 * Returns iterator that contains all style names.
+	 * Returns an array that contains all style names.
 	 *
 	 * @param expand Expand shorthand style properties and return all equivalent style representations.
 	 */ getStyleNames(expand) {
-        return this._styles.getStyleNames(expand);
+        return this._styles ? this._styles.getStyleNames(expand) : [];
     }
     /**
 	 * Returns true if style keys are present.
@@ -2275,7 +3005,7 @@ TextProxy$1.prototype.is = function(type) {
 	 * ```
 	 */ hasStyle(...property) {
         for (const name of property){
-            if (!this._styles.has(name)) {
+            if (!this._styles || !this._styles.has(name)) {
                 return false;
             }
         }
@@ -2335,9 +3065,9 @@ TextProxy$1.prototype.is = function(type) {
 	 *
 	 * **Note**: Classes, styles and other attributes are sorted alphabetically.
 	 */ getIdentity() {
-        const classes = Array.from(this._classes).sort().join(',');
-        const styles = this._styles.toString();
-        const attributes = Array.from(this._attrs).map((i)=>`${i[0]}="${i[1]}"`).sort().join(' ');
+        const classes = this._classes ? this._classes.keys().sort().join(',') : '';
+        const styles = this._styles && String(this._styles);
+        const attributes = Array.from(this._attrs).filter(([key])=>key != 'style' && key != 'class').map((i)=>`${i[0]}="${i[1]}"`).sort().join(' ');
         return this.name + (classes == '' ? '' : ` class="${classes}"`) + (!styles ? '' : ` style="${styles}"`) + (attributes == '' ? '' : ` ${attributes}`);
     }
     /**
@@ -2366,10 +3096,6 @@ TextProxy$1.prototype.is = function(type) {
         }
         // ContainerElement and AttributeElement should be also cloned properly.
         const cloned = new this.constructor(this.document, this.name, this._attrs, childrenClone);
-        // Classes and styles are cloned separately - this solution is faster than adding them back to attributes and
-        // parse once again in constructor.
-        cloned._classes = new Set(this._classes);
-        cloned._styles.set(this._styles.getNormalized());
         // Clone custom properties.
         cloned._customProperties = new Map(this._customProperties);
         // Clone filler offset method.
@@ -2446,16 +3172,30 @@ TextProxy$1.prototype.is = function(type) {
 	 * @internal
 	 * @param key Attribute key.
 	 * @param value Attribute value.
+	 * @param overwrite Whether tokenized attribute should override the attribute value or just add a token.
 	 * @fires change
-	 */ _setAttribute(key, value) {
-        const stringValue = String(value);
+	 */ _setAttribute(key, value, overwrite = true) {
         this._fireChange('attributes', this);
-        if (key == 'class') {
-            parseClasses(this._classes, stringValue);
-        } else if (key == 'style') {
-            this._styles.setTo(stringValue);
+        if (usesStylesMap(this.name, key) || usesTokenList(this.name, key)) {
+            let currentValue = this._attrs.get(key);
+            if (!currentValue) {
+                currentValue = usesStylesMap(this.name, key) ? new StylesMap(this.document.stylesProcessor) : new TokenList();
+                this._attrs.set(key, currentValue);
+            }
+            if (overwrite) {
+                // If reset is set then value have to be a string to tokenize.
+                currentValue.setTo(String(value));
+            } else if (usesStylesMap(this.name, key)) {
+                if (Array.isArray(value)) {
+                    currentValue.set(value[0], value[1]);
+                } else {
+                    currentValue.set(value);
+                }
+            } else {
+                currentValue.set(typeof value == 'string' ? value.split(/\s+/) : value);
+            }
         } else {
-            this._attrs.set(key, stringValue);
+            this._attrs.set(key, String(value));
         }
     }
     /**
@@ -2464,27 +3204,25 @@ TextProxy$1.prototype.is = function(type) {
 	 * @see module:engine/view/downcastwriter~DowncastWriter#removeAttribute
 	 * @internal
 	 * @param key Attribute key.
+	 * @param tokens Attribute value tokens to remove. The whole attribute is removed if not specified.
 	 * @returns Returns true if an attribute existed and has been removed.
 	 * @fires change
-	 */ _removeAttribute(key) {
+	 */ _removeAttribute(key, tokens) {
         this._fireChange('attributes', this);
-        // Remove class attribute.
-        if (key == 'class') {
-            if (this._classes.size > 0) {
-                this._classes.clear();
-                return true;
+        if (tokens !== undefined && (usesStylesMap(this.name, key) || usesTokenList(this.name, key))) {
+            const currentValue = this._attrs.get(key);
+            if (!currentValue) {
+                return false;
             }
-            return false;
-        }
-        // Remove style attribute.
-        if (key == 'style') {
-            if (!this._styles.isEmpty) {
-                this._styles.clear();
-                return true;
+            if (usesTokenList(this.name, key) && typeof tokens == 'string') {
+                tokens = tokens.split(/\s+/);
+            }
+            currentValue.remove(tokens);
+            if (currentValue.isEmpty) {
+                return this._attrs.delete(key);
             }
             return false;
         }
-        // Remove other attributes.
         return this._attrs.delete(key);
     }
     /**
@@ -2499,10 +3237,7 @@ TextProxy$1.prototype.is = function(type) {
 	 * @internal
 	 * @fires change
 	 */ _addClass(className) {
-        this._fireChange('attributes', this);
-        for (const name of toArray(className)){
-            this._classes.add(name);
-        }
+        this._setAttribute('class', className, false);
     }
     /**
 	 * Removes specified class.
@@ -2516,17 +3251,16 @@ TextProxy$1.prototype.is = function(type) {
 	 * @internal
 	 * @fires change
 	 */ _removeClass(className) {
-        this._fireChange('attributes', this);
-        for (const name of toArray(className)){
-            this._classes.delete(name);
-        }
+        this._removeAttribute('class', className);
     }
     _setStyle(property, value) {
-        this._fireChange('attributes', this);
         if (typeof property != 'string') {
-            this._styles.set(property);
+            this._setAttribute('style', property, false);
         } else {
-            this._styles.set(property, value);
+            this._setAttribute('style', [
+                property,
+                value
+            ], false);
         }
     }
     /**
@@ -2545,28 +3279,325 @@ TextProxy$1.prototype.is = function(type) {
 	 * @internal
 	 * @fires change
 	 */ _removeStyle(property) {
-        this._fireChange('attributes', this);
-        for (const name of toArray(property)){
-            this._styles.remove(name);
-        }
+        this._removeAttribute('style', property);
     }
     /**
-	 * Sets a custom property. Unlike attributes, custom properties are not rendered to the DOM,
-	 * so they can be used to add special data to elements.
+	 * Used by the {@link module:engine/view/matcher~Matcher Matcher} to collect matching attribute tuples
+	 * (attribute name and optional token).
 	 *
-	 * @see module:engine/view/downcastwriter~DowncastWriter#setCustomProperty
-	 * @internal
-	 */ _setCustomProperty(key, value) {
-        this._customProperties.set(key, value);
-    }
-    /**
-	 * Removes the custom property stored under the given key.
+	 * Normalized patterns can be used in following ways:
+	 * - to match any attribute name with any or no value:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ true, true ]
+	 * ]
+	 * ```
+	 *
+	 * - to match a specific attribute with any value:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ 'required', true ]
+	 * ]
+	 * ```
+	 *
+	 * - to match an attribute name with a RegExp with any value:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ /h[1-6]/, true ]
+	 * ]
+	 * ```
+	 *
+	 * 	- to match a specific attribute with the exact value:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ 'rel', 'nofollow' ]
+	 * ]
+	 * ```
+	 *
+	 * 	- to match a specific attribute with a value matching a RegExp:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ 'src', /^https/ ]
+	 * ]
+	 * ```
+	 *
+	 * 	- to match an attribute name with a RegExp and the exact value:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ /^data-property-/, 'foobar' ],
+	 * ]
+	 * ```
+	 *
+	 * 	- to match an attribute name with a RegExp and match a value with another RegExp:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ /^data-property-/, /^foo/ ]
+	 * ]
+	 * ```
+	 *
+	 * 	- to match a specific style property with the value matching a RegExp:
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ 'style', 'font-size', /px$/ ]
+	 * ]
+	 * ```
+	 *
+	 * 	- to match a specific class (class attribute is tokenized so it matches tokens individually):
+	 *
+	 * ```ts
+	 * patterns: [
+	 * 	[ 'class', 'foo' ]
+	 * ]
+	 * ```
 	 *
-	 * @see module:engine/view/downcastwriter~DowncastWriter#removeCustomProperty
 	 * @internal
-	 * @returns Returns true if property was removed.
-	 */ _removeCustomProperty(key) {
-        return this._customProperties.delete(key);
+	 * @param patterns An array of normalized patterns (tuples of 2 or 3 items depending on if tokenized attribute value match is needed).
+	 * @param match An array to populate with matching tuples.
+	 * @param exclude Array of attribute names to exclude from match.
+	 * @returns `true` if element matches all patterns. The matching tuples are pushed to the `match` array.
+	 */ _collectAttributesMatch(patterns, match, exclude) {
+        for (const [keyPattern, tokenPattern, valuePattern] of patterns){
+            let hasKey = false;
+            let hasValue = false;
+            for (const [key, value] of this._attrs){
+                if (exclude && exclude.includes(key) || !isPatternMatched(keyPattern, key)) {
+                    continue;
+                }
+                hasKey = true;
+                if (typeof value == 'string') {
+                    if (isPatternMatched(tokenPattern, value)) {
+                        match.push([
+                            key
+                        ]);
+                        hasValue = true;
+                    } else if (!(keyPattern instanceof RegExp)) {
+                        return false;
+                    }
+                } else {
+                    const tokenMatch = value._getTokensMatch(tokenPattern, valuePattern || true);
+                    if (tokenMatch) {
+                        hasValue = true;
+                        for (const tokenMatchItem of tokenMatch){
+                            match.push([
+                                key,
+                                tokenMatchItem
+                            ]);
+                        }
+                    } else if (!(keyPattern instanceof RegExp)) {
+                        return false;
+                    }
+                }
+            }
+            if (!hasKey || !hasValue) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+	 * Used by the {@link module:engine/conversion/viewconsumable~ViewConsumable} to collect the
+	 * {@link module:engine/view/element~NormalizedConsumables} for the element.
+	 *
+	 * When `key` and `token` parameters are provided the output is filtered for the specified attribute and it's tokens and related tokens.
+	 *
+	 * @internal
+	 * @param key Attribute name.
+	 * @param token Reference token to collect all related tokens.
+	 */ _getConsumables(key, token) {
+        const attributes = [];
+        if (key) {
+            const value = this._attrs.get(key);
+            if (value !== undefined) {
+                if (typeof value == 'string') {
+                    attributes.push([
+                        key
+                    ]);
+                } else {
+                    for (const prop of value._getConsumables(token)){
+                        attributes.push([
+                            key,
+                            prop
+                        ]);
+                    }
+                }
+            }
+        } else {
+            for (const [key, value] of this._attrs){
+                if (typeof value == 'string') {
+                    attributes.push([
+                        key
+                    ]);
+                } else {
+                    for (const prop of value._getConsumables()){
+                        attributes.push([
+                            key,
+                            prop
+                        ]);
+                    }
+                }
+            }
+        }
+        return {
+            name: !key,
+            attributes
+        };
+    }
+    /**
+	 * Verify if the given element can be merged without conflicts into the element.
+	 *
+	 * Note that this method is extended by the {@link module:engine/view/attributeelement~AttributeElement} implementation.
+	 *
+	 * This method is used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to merge it with other AttributeElement.
+	 *
+	 * @internal
+	 * @returns Returns `true` if elements can be merged.
+	 */ _canMergeAttributesFrom(otherElement) {
+        if (this.name != otherElement.name) {
+            return false;
+        }
+        for (const [key, otherValue] of otherElement._attrs){
+            const value = this._attrs.get(key);
+            if (value === undefined) {
+                continue;
+            }
+            if (typeof value == 'string' || typeof otherValue == 'string') {
+                if (value !== otherValue) {
+                    return false;
+                }
+            } else if (!value._canMergeFrom(otherValue)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+	 * Merges attributes of a given element into the element.
+	 * This includes also tokenized attributes like style and class.
+	 *
+	 * Note that you should make sure there are no conflicts before merging (see {@link #_canMergeAttributesFrom}).
+	 *
+	 * This method is used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to merge it with other AttributeElement.
+	 *
+	 * @internal
+	 */ _mergeAttributesFrom(otherElement) {
+        this._fireChange('attributes', this);
+        // Move all attributes/classes/styles from wrapper to wrapped AttributeElement.
+        for (const [key, otherValue] of otherElement._attrs){
+            const value = this._attrs.get(key);
+            if (value === undefined || typeof value == 'string' || typeof otherValue == 'string') {
+                this._setAttribute(key, otherValue);
+            } else {
+                value._mergeFrom(otherValue);
+            }
+        }
+    }
+    /**
+	 * Verify if the given element attributes can be fully subtracted from the element.
+	 *
+	 * Note that this method is extended by the {@link module:engine/view/attributeelement~AttributeElement} implementation.
+	 *
+	 * This method is used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to unwrap the AttributeElement.
+	 *
+	 * @internal
+	 * @returns Returns `true` if elements attributes can be fully subtracted.
+	 */ _canSubtractAttributesOf(otherElement) {
+        if (this.name != otherElement.name) {
+            return false;
+        }
+        for (const [key, otherValue] of otherElement._attrs){
+            const value = this._attrs.get(key);
+            if (value === undefined) {
+                return false;
+            }
+            if (typeof value == 'string' || typeof otherValue == 'string') {
+                if (value !== otherValue) {
+                    return false;
+                }
+            } else if (!value._isMatching(otherValue)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+	 * Removes (subtracts) corresponding attributes of the given element from the element.
+	 * This includes also tokenized attributes like style and class.
+	 * All attributes, classes and styles from given element should be present inside the element being unwrapped.
+	 *
+	 * Note that you should make sure all attributes could be subtracted before subtracting them (see {@link #_canSubtractAttributesOf}).
+	 *
+	 * This method is used by the {@link module:engine/view/downcastwriter~DowncastWriter} while down-casting
+	 * an {@link module:engine/view/attributeelement~AttributeElement} to unwrap the AttributeElement.
+	 *
+	 * @internal
+	 */ _subtractAttributesOf(otherElement) {
+        this._fireChange('attributes', this);
+        for (const [key, otherValue] of otherElement._attrs){
+            const value = this._attrs.get(key);
+            if (typeof value == 'string' || typeof otherValue == 'string') {
+                this._attrs.delete(key);
+            } else {
+                value.remove(otherValue.keys());
+                if (value.isEmpty) {
+                    this._attrs.delete(key);
+                }
+            }
+        }
+    }
+    /**
+	 * Sets a custom property. Unlike attributes, custom properties are not rendered to the DOM,
+	 * so they can be used to add special data to elements.
+	 *
+	 * @see module:engine/view/downcastwriter~DowncastWriter#setCustomProperty
+	 * @internal
+	 */ _setCustomProperty(key, value) {
+        this._customProperties.set(key, value);
+    }
+    /**
+	 * Removes the custom property stored under the given key.
+	 *
+	 * @see module:engine/view/downcastwriter~DowncastWriter#removeCustomProperty
+	 * @internal
+	 * @returns Returns true if property was removed.
+	 */ _removeCustomProperty(key) {
+        return this._customProperties.delete(key);
+    }
+    /**
+	 * Parses attributes provided to the element constructor before they are applied to an element. If attributes are passed
+	 * as an object (instead of `Iterable`), the object is transformed to the map. Attributes with `null` value are removed.
+	 * Attributes with non-`String` value are converted to `String`.
+	 *
+	 * @param attrs Attributes to parse.
+	 * @returns Parsed attributes.
+	 */ _parseAttributes(attrs) {
+        const attrsMap = toMap(attrs);
+        for (const [key, value] of attrsMap){
+            if (value === null) {
+                attrsMap.delete(key);
+            } else if (usesStylesMap(this.name, key)) {
+                // This is either an element clone so we need to clone styles map, or a new instance which requires value to be parsed.
+                const newValue = value instanceof StylesMap ? value._clone() : new StylesMap(this.document.stylesProcessor).setTo(String(value));
+                attrsMap.set(key, newValue);
+            } else if (usesTokenList(this.name, key)) {
+                // This is either an element clone so we need to clone token list, or a new instance which requires value to be parsed.
+                const newValue = value instanceof TokenList ? value._clone() : new TokenList().setTo(String(value));
+                attrsMap.set(key, newValue);
+            } else if (typeof value != 'string') {
+                attrsMap.set(key, String(value));
+            }
+        }
+        return attrsMap;
     }
 };
 // The magic of type inference using `is` method is centralized in `TypeCheckable` class.
@@ -2579,35 +3610,6 @@ Element$1.prototype.is = function(type, name) {
         return name === this.name && (type === 'element' || type === 'view:element');
     }
 };
-/**
- * Parses attributes provided to the element constructor before they are applied to an element. If attributes are passed
- * as an object (instead of `Iterable`), the object is transformed to the map. Attributes with `null` value are removed.
- * Attributes with non-`String` value are converted to `String`.
- *
- * @param attrs Attributes to parse.
- * @returns Parsed attributes.
- */ function parseAttributes(attrs) {
-    const attrsMap = toMap(attrs);
-    for (const [key, value] of attrsMap){
-        if (value === null) {
-            attrsMap.delete(key);
-        } else if (typeof value != 'string') {
-            attrsMap.set(key, String(value));
-        }
-    }
-    return attrsMap;
-}
-/**
- * Parses class attribute and puts all classes into classes set.
- * Classes set s cleared before insertion.
- *
- * @param classesSet Set to insert parsed classes.
- * @param classesString String with classes to parse.
- */ function parseClasses(classesSet, classesString) {
-    const classArray = classesString.split(/\s+/);
-    classesSet.clear();
-    classArray.forEach((name)=>classesSet.add(name));
-}
 /**
  * Converts strings to Text and non-iterables to arrays.
  */ function normalize$3(document, nodes) {
@@ -2634,6 +3636,16 @@ Element$1.prototype.is = function(type, name) {
     }
     return normalizedNodes;
 }
+/**
+ * Returns `true` if an attribute on a given element should be handled as a TokenList.
+ */ function usesTokenList(elementName, key) {
+    return key == 'class' || elementName == 'a' && key == 'rel';
+}
+/**
+ * Returns `true` if an attribute on a given element should be handled as a StylesMap.
+ */ function usesStylesMap(elementName, key) {
+    return key == 'style';
+}
 
 /**
  * Containers are elements which define document structure. They define boundaries for
@@ -5060,6 +6072,30 @@ const DEFAULT_PRIORITY = 10;
         cloned._id = this._id;
         return cloned;
     }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_mergeAttributesFrom} to verify if the given element can be merged without
+	 * conflicts into this element.
+	 *
+	 * @internal
+	 */ _canMergeAttributesFrom(otherElement) {
+        // Can't merge if any of elements have an id or a difference of priority.
+        if (this.id !== null || otherElement.id !== null || this.priority !== otherElement.priority) {
+            return false;
+        }
+        return super._canMergeAttributesFrom(otherElement);
+    }
+    /**
+	 * Used by {@link module:engine/view/element~Element#_subtractAttributesOf} to verify if the given element attributes
+	 * can be fully subtracted from this element.
+	 *
+	 * @internal
+	 */ _canSubtractAttributesOf(otherElement) {
+        // Can't subtract if any of elements have an id or a difference of priority.
+        if (this.id !== null || otherElement.id !== null || this.priority !== otherElement.priority) {
+            return false;
+        }
+        return super._canSubtractAttributesOf(otherElement);
+    }
 }
 // The magic of type inference using `is` method is centralized in `TypeCheckable` class.
 // Proper overload would interfere with that.
@@ -5851,28 +6887,19 @@ DocumentFragment$1.prototype.is = function(type) {
         }
         return rawElement;
     }
-    /**
-	 * Adds or overwrites the element's attribute with a specified key and value.
-	 *
-	 * ```ts
-	 * writer.setAttribute( 'href', 'http://ckeditor.com', linkElement );
-	 * ```
-	 *
-	 * @param key The attribute key.
-	 * @param value The attribute value.
-	 */ setAttribute(key, value, element) {
-        element._setAttribute(key, value);
+    setAttribute(key, value, elementOrOverwrite, element) {
+        if (element !== undefined) {
+            element._setAttribute(key, value, elementOrOverwrite);
+        } else {
+            elementOrOverwrite._setAttribute(key, value);
+        }
     }
-    /**
-	 * Removes attribute from the element.
-	 *
-	 * ```ts
-	 * writer.removeAttribute( 'href', linkElement );
-	 * ```
-	 *
-	 * @param key Attribute key.
-	 */ removeAttribute(key, element) {
-        element._removeAttribute(key);
+    removeAttribute(key, elementOrTokens, element) {
+        if (element !== undefined) {
+            element._removeAttribute(key, elementOrTokens);
+        } else {
+            elementOrTokens._removeAttribute(key);
+        }
     }
     /**
 	 * Adds specified class to the element.
@@ -6571,7 +7598,8 @@ DocumentFragment$1.prototype.is = function(type) {
             //
             // <p><span class="bar">abc</span></p>  -->  <p><span class="foo bar">abc</span></p>
             //
-            if (isAttribute && this._wrapAttributeElement(wrapElement, child)) {
+            if (isAttribute && child._canMergeAttributesFrom(wrapElement)) {
+                child._mergeAttributesFrom(wrapElement);
                 wrapPositions.push(new Position$1(parent, i));
             } else if (isText || !isAttribute || shouldABeOutsideB(wrapElement, child)) {
                 // Clone attribute.
@@ -6648,7 +7676,8 @@ DocumentFragment$1.prototype.is = function(type) {
             // <p><span class="foo bar">abc</span>xyz</p>  -->  <p><span class="bar">abc</span>xyz</p>
             // <p><i class="foo">abc</i>xyz</p>            -->  <p><i class="foo">abc</i>xyz</p>
             //
-            if (this._unwrapAttributeElement(unwrapElement, child)) {
+            if (child._canSubtractAttributesOf(unwrapElement)) {
+                child._subtractAttributesOf(unwrapElement);
                 unwrapPositions.push(new Position$1(parent, i), new Position$1(parent, i + 1));
                 i++;
                 continue;
@@ -6740,114 +7769,6 @@ DocumentFragment$1.prototype.is = function(type) {
         // If position is next to text node - move position inside.
         return movePositionToTextNode(newPosition);
     }
-    /**
-	 * Wraps one {@link module:engine/view/attributeelement~AttributeElement AttributeElement} into another by
-	 * merging them if possible. When merging is possible - all attributes, styles and classes are moved from wrapper
-	 * element to element being wrapped.
-	 *
-	 * @param wrapper Wrapper AttributeElement.
-	 * @param toWrap AttributeElement to wrap using wrapper element.
-	 * @returns Returns `true` if elements are merged.
-	 */ _wrapAttributeElement(wrapper, toWrap) {
-        if (!canBeJoined(wrapper, toWrap)) {
-            return false;
-        }
-        // Can't merge if name or priority differs.
-        if (wrapper.name !== toWrap.name || wrapper.priority !== toWrap.priority) {
-            return false;
-        }
-        // Check if attributes can be merged.
-        for (const key of wrapper.getAttributeKeys()){
-            // Classes and styles should be checked separately.
-            if (key === 'class' || key === 'style') {
-                continue;
-            }
-            // If some attributes are different we cannot wrap.
-            if (toWrap.hasAttribute(key) && toWrap.getAttribute(key) !== wrapper.getAttribute(key)) {
-                return false;
-            }
-        }
-        // Check if styles can be merged.
-        for (const key of wrapper.getStyleNames()){
-            if (toWrap.hasStyle(key) && toWrap.getStyle(key) !== wrapper.getStyle(key)) {
-                return false;
-            }
-        }
-        // Move all attributes/classes/styles from wrapper to wrapped AttributeElement.
-        for (const key of wrapper.getAttributeKeys()){
-            // Classes and styles should be checked separately.
-            if (key === 'class' || key === 'style') {
-                continue;
-            }
-            // Move only these attributes that are not present - other are similar.
-            if (!toWrap.hasAttribute(key)) {
-                this.setAttribute(key, wrapper.getAttribute(key), toWrap);
-            }
-        }
-        for (const key of wrapper.getStyleNames()){
-            if (!toWrap.hasStyle(key)) {
-                this.setStyle(key, wrapper.getStyle(key), toWrap);
-            }
-        }
-        for (const key of wrapper.getClassNames()){
-            if (!toWrap.hasClass(key)) {
-                this.addClass(key, toWrap);
-            }
-        }
-        return true;
-    }
-    /**
-	 * Unwraps {@link module:engine/view/attributeelement~AttributeElement AttributeElement} from another by removing
-	 * corresponding attributes, classes and styles. All attributes, classes and styles from wrapper should be present
-	 * inside element being unwrapped.
-	 *
-	 * @param wrapper Wrapper AttributeElement.
-	 * @param toUnwrap AttributeElement to unwrap using wrapper element.
-	 * @returns Returns `true` if elements are unwrapped.
-	 **/ _unwrapAttributeElement(wrapper, toUnwrap) {
-        if (!canBeJoined(wrapper, toUnwrap)) {
-            return false;
-        }
-        // Can't unwrap if name or priority differs.
-        if (wrapper.name !== toUnwrap.name || wrapper.priority !== toUnwrap.priority) {
-            return false;
-        }
-        // Check if AttributeElement has all wrapper attributes.
-        for (const key of wrapper.getAttributeKeys()){
-            // Classes and styles should be checked separately.
-            if (key === 'class' || key === 'style') {
-                continue;
-            }
-            // If some attributes are missing or different we cannot unwrap.
-            if (!toUnwrap.hasAttribute(key) || toUnwrap.getAttribute(key) !== wrapper.getAttribute(key)) {
-                return false;
-            }
-        }
-        // Check if AttributeElement has all wrapper classes.
-        if (!toUnwrap.hasClass(...wrapper.getClassNames())) {
-            return false;
-        }
-        // Check if AttributeElement has all wrapper styles.
-        for (const key of wrapper.getStyleNames()){
-            // If some styles are missing or different we cannot unwrap.
-            if (!toUnwrap.hasStyle(key) || toUnwrap.getStyle(key) !== wrapper.getStyle(key)) {
-                return false;
-            }
-        }
-        // Remove all wrapper's attributes from unwrapped element.
-        for (const key of wrapper.getAttributeKeys()){
-            // Classes and styles should be checked separately.
-            if (key === 'class' || key === 'style') {
-                continue;
-            }
-            this.removeAttribute(key, toUnwrap);
-        }
-        // Remove all wrapper's classes from unwrapped element.
-        this.removeClass(Array.from(wrapper.getClassNames()), toUnwrap);
-        // Remove all wrapper's styles from unwrapped element.
-        this.removeStyle(Array.from(wrapper.getStyleNames()), toUnwrap);
-        return true;
-    }
     /**
 	 * Helper function used by other `DowncastWriter` methods. Breaks attribute elements at the boundaries of given range.
 	 *
@@ -7204,12 +8125,6 @@ const validNodesToInsert = [
 		 */ throw new CKEditorError('view-writer-invalid-range-container', errorContext);
     }
 }
-/**
- * Checks if two attribute elements can be joined together. Elements can be joined together if, and only if
- * they do not have ids specified.
- */ function canBeJoined(a, b) {
-    return a.id === null && b.id === null;
-}
 
 /**
  * Set of utilities related to handling block and inline fillers.
@@ -8891,6 +9806,10 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
         generator.next();
         // Whitespace cleaning.
         this._processDomInlineNodes(null, inlineNodes, options);
+        // This was a single block filler so just remove it.
+        if (this.blockFillerMode == 'br' && isViewBrFiller(node)) {
+            return null;
+        }
         // Text not got trimmed to an empty string so there is no result node.
         if (node.is('$text') && node.data.length == 0) {
             return null;
@@ -8928,7 +9847,10 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
                 if (this._isBlockViewElement(viewChild)) {
                     this._processDomInlineNodes(domElement, inlineNodes, options);
                 }
-                yield viewChild;
+                // Yield only if this is not a block filler.
+                if (!(this.blockFillerMode == 'br' && isViewBrFiller(viewChild))) {
+                    yield viewChild;
+                }
                 // Trigger children handling.
                 generator.next();
             }
@@ -9232,8 +10154,9 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
         if (this.blockFillerMode == 'br') {
             return domNode.isEqualNode(BR_FILLER_REF);
         }
-        // Special case for <p><br></p> in which <br> should be treated as filler even when we are not in the 'br' mode. See ckeditor5#5564.
-        if (domNode.tagName === 'BR' && hasBlockParent(domNode, this.blockElements) && domNode.parentNode.childNodes.length === 1) {
+        // Special case for <p><br></p> in which <br> should be treated as filler even when we are not in the 'br' mode.
+        // See https://github.com/ckeditor/ckeditor5/issues/5564.
+        if (isOnlyBrInBlock(domNode, this.blockElements)) {
             return true;
         }
         // If not in 'br' mode, try recognizing both marked and regular nbsp block fillers.
@@ -9374,7 +10297,9 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
 	 * @param inlineNodes An array of recently encountered inline nodes truncated to the block element boundaries.
 	 * Used later to process whitespaces.
 	 */ *_domToView(domNode, options, inlineNodes) {
-        if (this.isBlockFiller(domNode)) {
+        // Special case for <p><br></p> in which <br> should be treated as filler even when we are not in the 'br' mode.
+        // See https://github.com/ckeditor/ckeditor5/issues/5564.
+        if (this.blockFillerMode != 'br' && isOnlyBrInBlock(domNode, this.blockElements)) {
             return null;
         }
         // When node is inside a UIElement or a RawElement return that parent as it's view representation.
@@ -9515,6 +10440,20 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
                 // This causes a problem because the normal space would be removed in `.replace` calls above. To prevent that,
                 // the inline filler is removed only after the data is initially processed (by the `.replace` above). See ckeditor5#692.
                 data = getDataWithoutFiller(data);
+                // Block filler handling.
+                if (this.blockFillerMode != 'br' && node.parent) {
+                    if (isViewMarkedNbspFiller(node.parent, data)) {
+                        data = '';
+                        // Mark block element as it has a block filler and remove the `<span data-cke-filler="true">` element.
+                        if (node.parent.parent) {
+                            node.parent.parent._setCustomProperty('$hasBlockFiller', true);
+                            node.parent._remove();
+                        }
+                    } else if (isViewNbspFiller(node.parent, data, this.blockElements)) {
+                        data = '';
+                        node.parent._setCustomProperty('$hasBlockFiller', true);
+                    }
+                }
                 // At this point we should have removed all whitespaces from DOM text data.
                 //
                 // Now, We will reverse the process that happens in `_processDataFromViewText`.
@@ -9754,7 +10693,7 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
     }
 }
 /**
- * Checks if given node is a nbsp block filler.
+ * Checks if given DOM node is a nbsp block filler.
  *
  * A &nbsp; is a block filler only if it is a single child of a block element.
  *
@@ -9771,6 +10710,33 @@ const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
     const parent = domNode.parentNode;
     return !!parent && !!parent.tagName && blockElements.includes(parent.tagName.toLowerCase());
 }
+/**
+ * Checks if given view node is a nbsp block filler.
+ *
+ * A &nbsp; is a block filler only if it is a single child of a block element.
+ */ function isViewNbspFiller(parent, data, blockElements) {
+    return data == '\u00A0' && parent && parent.is('element') && parent.childCount == 1 && blockElements.includes(parent.name);
+}
+/**
+ * Checks if given view node is a marked-nbsp block filler.
+ *
+ * A &nbsp; is a block filler only if it is wrapped in `<span data-cke-filler="true">` element.
+ */ function isViewMarkedNbspFiller(parent, data) {
+    return data == '\u00A0' && parent && parent.is('element', 'span') && parent.childCount == 1 && parent.hasAttribute('data-cke-filler');
+}
+/**
+ * Checks if given view node is a br block filler.
+ *
+ * A <br> is a block filler only if it has data-cke-filler attribute set.
+ */ function isViewBrFiller(node) {
+    return node.is('element', 'br') && node.hasAttribute('data-cke-filler');
+}
+/**
+ * Special case for `<p><br></p>` in which `<br>` should be treated as filler even when we are not in the 'br' mode.
+ */ function isOnlyBrInBlock(domNode, blockElements) {
+    // See https://github.com/ckeditor/ckeditor5/issues/5564.
+    return domNode.tagName === 'BR' && hasBlockParent(domNode, blockElements) && domNode.parentNode.childNodes.length === 1;
+}
 /**
  * Log to console the information about element that was replaced.
  * Check UNSAFE_ELEMENTS for all recognized unsafe elements.
@@ -19801,51 +20767,23 @@ function cloneNodes(nodes) {
         }
         // First remove the old attribute if there was one.
         if (data.attributeOldValue !== null && oldAttribute) {
-            if (oldAttribute.key == 'class') {
-                const classes = typeof oldAttribute.value == 'string' ? oldAttribute.value.split(/\s+/) : oldAttribute.value;
-                for (const className of classes){
-                    viewWriter.removeClass(className, viewElement);
-                }
-            } else if (oldAttribute.key == 'style') {
+            let value = oldAttribute.value;
+            if (oldAttribute.key == 'style') {
                 if (typeof oldAttribute.value == 'string') {
-                    const styles = new StylesMap(viewWriter.document.stylesProcessor);
-                    styles.setTo(oldAttribute.value);
-                    for (const [key] of styles.getStylesEntries()){
-                        viewWriter.removeStyle(key, viewElement);
-                    }
+                    value = new StylesMap(viewWriter.document.stylesProcessor).setTo(oldAttribute.value).getStylesEntries().map(([key])=>key);
                 } else {
-                    const keys = Object.keys(oldAttribute.value);
-                    for (const key of keys){
-                        viewWriter.removeStyle(key, viewElement);
-                    }
+                    value = Object.keys(oldAttribute.value);
                 }
-            } else {
-                viewWriter.removeAttribute(oldAttribute.key, viewElement);
             }
+            viewWriter.removeAttribute(oldAttribute.key, value, viewElement);
         }
         // Then set the new attribute.
         if (data.attributeNewValue !== null && newAttribute) {
-            if (newAttribute.key == 'class') {
-                const classes = typeof newAttribute.value == 'string' ? newAttribute.value.split(/\s+/) : newAttribute.value;
-                for (const className of classes){
-                    viewWriter.addClass(className, viewElement);
-                }
-            } else if (newAttribute.key == 'style') {
-                if (typeof newAttribute.value == 'string') {
-                    const styles = new StylesMap(viewWriter.document.stylesProcessor);
-                    styles.setTo(newAttribute.value);
-                    for (const [key, value] of styles.getStylesEntries()){
-                        viewWriter.setStyle(key, value, viewElement);
-                    }
-                } else {
-                    const keys = Object.keys(newAttribute.value);
-                    for (const key of keys){
-                        viewWriter.setStyle(key, newAttribute.value[key], viewElement);
-                    }
-                }
-            } else {
-                viewWriter.setAttribute(newAttribute.key, newAttribute.value, viewElement);
+            let value = newAttribute.value;
+            if (newAttribute.key == 'style' && typeof newAttribute.value == 'string') {
+                value = Object.fromEntries(new StylesMap(viewWriter.document.stylesProcessor).setTo(newAttribute.value).getStylesEntries());
             }
+            viewWriter.setAttribute(newAttribute.key, value, false, viewElement);
         }
     };
 }
@@ -21944,643 +22882,124 @@ function getFromAttributeCreator(config) {
         this.downcastDispatcher.on('selection', convertRangeSelection(), {
             priority: 'low'
         });
-        this.downcastDispatcher.on('selection', convertCollapsedSelection(), {
-            priority: 'low'
-        });
-        // Binds {@link module:engine/view/document~Document#roots view roots collection} to
-        // {@link module:engine/model/document~Document#roots model roots collection} so creating
-        // model root automatically creates corresponding view root.
-        this.view.document.roots.bindTo(this.model.document.roots).using((root)=>{
-            // $graveyard is a special root that has no reflection in the view.
-            if (root.rootName == '$graveyard') {
-                return null;
-            }
-            const viewRoot = new RootEditableElement(this.view.document, root.name);
-            viewRoot.rootName = root.rootName;
-            this.mapper.bindElements(root, viewRoot);
-            return viewRoot;
-        });
-    // @if CK_DEBUG_ENGINE // initDocumentDumping( this.model.document );
-    // @if CK_DEBUG_ENGINE // initDocumentDumping( this.view.document );
-    // @if CK_DEBUG_ENGINE // dumpTrees( this.model.document, this.model.document.version );
-    // @if CK_DEBUG_ENGINE // dumpTrees( this.view.document, this.model.document.version );
-    // @if CK_DEBUG_ENGINE // this.model.document.on( 'change', () => {
-    // @if CK_DEBUG_ENGINE //	dumpTrees( this.view.document, this.model.document.version );
-    // @if CK_DEBUG_ENGINE // }, { priority: 'lowest' } );
-    }
-    /**
-	 * Removes all event listeners attached to the `EditingController`. Destroys all objects created
-	 * by `EditingController` that need to be destroyed.
-	 */ destroy() {
-        this.view.destroy();
-        this.stopListening();
-    }
-    /**
-	 * Calling this method will refresh the marker by triggering the downcast conversion for it.
-	 *
-	 * Reconverting the marker is useful when you want to change its {@link module:engine/view/element~Element view element}
-	 * without changing any marker data. For instance:
-	 *
-	 * ```ts
-	 * let isCommentActive = false;
-	 *
-	 * model.conversion.markerToHighlight( {
-	 * 	model: 'comment',
-	 * 	view: data => {
-	 * 		const classes = [ 'comment-marker' ];
-	 *
-	 * 		if ( isCommentActive ) {
-	 * 			classes.push( 'comment-marker--active' );
-	 * 		}
-	 *
-	 * 		return { classes };
-	 * 	}
-	 * } );
-	 *
-	 * // ...
-	 *
-	 * // Change the property that indicates if marker is displayed as active or not.
-	 * isCommentActive = true;
-	 *
-	 * // Reconverting will downcast and synchronize the marker with the new isCommentActive state value.
-	 * editor.editing.reconvertMarker( 'comment' );
-	 * ```
-	 *
-	 * **Note**: If you want to reconvert a model item, use {@link #reconvertItem} instead.
-	 *
-	 * @param markerOrName Name of a marker to update, or a marker instance.
-	 */ reconvertMarker(markerOrName) {
-        const markerName = typeof markerOrName == 'string' ? markerOrName : markerOrName.name;
-        const currentMarker = this.model.markers.get(markerName);
-        if (!currentMarker) {
-            /**
-			 * The marker with the provided name does not exist and cannot be reconverted.
-			 *
-			 * @error editingcontroller-reconvertmarker-marker-not-exist
-			 * @param {String} markerName The name of the reconverted marker.
-			 */ throw new CKEditorError('editingcontroller-reconvertmarker-marker-not-exist', this, {
-                markerName
-            });
-        }
-        this.model.change(()=>{
-            this.model.markers._refresh(currentMarker);
-        });
-    }
-    /**
-	 * Calling this method will downcast a model item on demand (by requesting a refresh in the {@link module:engine/model/differ~Differ}).
-	 *
-	 * You can use it if you want the view representation of a specific item updated as a response to external modifications. For instance,
-	 * when the view structure depends not only on the associated model data but also on some external state.
-	 *
-	 * **Note**: If you want to reconvert a model marker, use {@link #reconvertMarker} instead.
-	 *
-	 * @param item Item to refresh.
-	 */ reconvertItem(item) {
-        this.model.change(()=>{
-            this.model.document.differ._refreshItem(item);
-        });
-    }
-}
-/**
- * Checks whether the target ranges provided by the `beforeInput` event can be properly mapped to model ranges and fixes them if needed.
- *
- * This is using the same logic as the selection post-fixer.
- */ function fixTargetRanges(mapper, schema, view) {
-    return (evt, data)=>{
-        // The Renderer is disabled while composing on non-android browsers, so we can't be sure that target ranges
-        // could be properly mapped to view and model because the DOM and view tree drifted apart.
-        if (view.document.isComposing && !env.isAndroid) {
-            return;
-        }
-        for(let i = 0; i < data.targetRanges.length; i++){
-            const viewRange = data.targetRanges[i];
-            const modelRange = mapper.toModelRange(viewRange);
-            const correctedRange = tryFixingRange(modelRange, schema);
-            if (!correctedRange || correctedRange.isEqual(modelRange)) {
-                continue;
-            }
-            data.targetRanges[i] = mapper.toViewRange(correctedRange);
-        }
-    };
-}
-
-/**
- * Class used for handling consumption of view {@link module:engine/view/element~Element elements},
- * {@link module:engine/view/text~Text text nodes} and {@link module:engine/view/documentfragment~DocumentFragment document fragments}.
- * Element's name and its parts (attributes, classes and styles) can be consumed separately. Consuming an element's name
- * does not consume its attributes, classes and styles.
- * To add items for consumption use {@link module:engine/conversion/viewconsumable~ViewConsumable#add add method}.
- * To test items use {@link module:engine/conversion/viewconsumable~ViewConsumable#test test method}.
- * To consume items use {@link module:engine/conversion/viewconsumable~ViewConsumable#consume consume method}.
- * To revert already consumed items use {@link module:engine/conversion/viewconsumable~ViewConsumable#revert revert method}.
- *
- * ```ts
- * viewConsumable.add( element, { name: true } ); // Adds element's name as ready to be consumed.
- * viewConsumable.add( textNode ); // Adds text node for consumption.
- * viewConsumable.add( docFragment ); // Adds document fragment for consumption.
- * viewConsumable.test( element, { name: true }  ); // Tests if element's name can be consumed.
- * viewConsumable.test( textNode ); // Tests if text node can be consumed.
- * viewConsumable.test( docFragment ); // Tests if document fragment can be consumed.
- * viewConsumable.consume( element, { name: true }  ); // Consume element's name.
- * viewConsumable.consume( textNode ); // Consume text node.
- * viewConsumable.consume( docFragment ); // Consume document fragment.
- * viewConsumable.revert( element, { name: true }  ); // Revert already consumed element's name.
- * viewConsumable.revert( textNode ); // Revert already consumed text node.
- * viewConsumable.revert( docFragment ); // Revert already consumed document fragment.
- * ```
- */ class ViewConsumable {
-    /**
-	 * Map of consumable elements. If {@link module:engine/view/element~Element element} is used as a key,
-	 * {@link module:engine/conversion/viewconsumable~ViewElementConsumables ViewElementConsumables} instance is stored as value.
-	 * For {@link module:engine/view/text~Text text nodes} and
-	 * {@link module:engine/view/documentfragment~DocumentFragment document fragments} boolean value is stored as value.
-	 */ _consumables = new Map();
-    add(element, consumables) {
-        let elementConsumables;
-        // For text nodes and document fragments just mark them as consumable.
-        if (element.is('$text') || element.is('documentFragment')) {
-            this._consumables.set(element, true);
-            return;
-        }
-        // For elements create new ViewElementConsumables or update already existing one.
-        if (!this._consumables.has(element)) {
-            elementConsumables = new ViewElementConsumables(element);
-            this._consumables.set(element, elementConsumables);
-        } else {
-            elementConsumables = this._consumables.get(element);
-        }
-        elementConsumables.add(consumables);
-    }
-    /**
-	 * Tests if {@link module:engine/view/element~Element view element}, {@link module:engine/view/text~Text text node} or
-	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} can be consumed.
-	 * It returns `true` when all items included in method's call can be consumed. Returns `false` when
-	 * first already consumed item is found and `null` when first non-consumable item is found.
-	 *
-	 * ```ts
-	 * viewConsumable.test( p, { name: true } ); // Tests element's name.
-	 * viewConsumable.test( p, { attributes: 'name' } ); // Tests attribute.
-	 * viewConsumable.test( p, { classes: 'foobar' } ); // Tests class.
-	 * viewConsumable.test( p, { styles: 'color' } ); // Tests style.
-	 * viewConsumable.test( p, { attributes: 'name', styles: 'color' } ); // Tests attribute and style.
-	 * viewConsumable.test( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be tested.
-	 * viewConsumable.test( textNode ); // Tests text node.
-	 * viewConsumable.test( docFragment ); // Tests document fragment.
-	 * ```
-	 *
-	 * Testing classes and styles as attribute will test if all added classes/styles can be consumed.
-	 *
-	 * ```ts
-	 * viewConsumable.test( p, { attributes: 'class' } ); // Tests if all added classes can be consumed.
-	 * viewConsumable.test( p, { attributes: 'style' } ); // Tests if all added styles can be consumed.
-	 * ```
-	 *
-	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
-	 * @param consumables.name If set to true element's name will be included.
-	 * @param consumables.attributes Attribute name or array of attribute names.
-	 * @param consumables.classes Class name or array of class names.
-	 * @param consumables.styles Style name or array of style names.
-	 * @returns Returns `true` when all items included in method's call can be consumed. Returns `false`
-	 * when first already consumed item is found and `null` when first non-consumable item is found.
-	 */ test(element, consumables) {
-        const elementConsumables = this._consumables.get(element);
-        if (elementConsumables === undefined) {
-            return null;
-        }
-        // For text nodes and document fragments return stored boolean value.
-        if (element.is('$text') || element.is('documentFragment')) {
-            return elementConsumables;
-        }
-        // For elements test consumables object.
-        return elementConsumables.test(consumables);
-    }
-    /**
-	 * Consumes {@link module:engine/view/element~Element view element}, {@link module:engine/view/text~Text text node} or
-	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment}.
-	 * It returns `true` when all items included in method's call can be consumed, otherwise returns `false`.
-	 *
-	 * ```ts
-	 * viewConsumable.consume( p, { name: true } ); // Consumes element's name.
-	 * viewConsumable.consume( p, { attributes: 'name' } ); // Consumes element's attribute.
-	 * viewConsumable.consume( p, { classes: 'foobar' } ); // Consumes element's class.
-	 * viewConsumable.consume( p, { styles: 'color' } ); // Consumes element's style.
-	 * viewConsumable.consume( p, { attributes: 'name', styles: 'color' } ); // Consumes attribute and style.
-	 * viewConsumable.consume( p, { classes: [ 'baz', 'bar' ] } ); // Multiple consumables can be consumed.
-	 * viewConsumable.consume( textNode ); // Consumes text node.
-	 * viewConsumable.consume( docFragment ); // Consumes document fragment.
-	 * ```
-	 *
-	 * Consuming classes and styles as attribute will test if all added classes/styles can be consumed.
-	 *
-	 * ```ts
-	 * viewConsumable.consume( p, { attributes: 'class' } ); // Consume only if all added classes can be consumed.
-	 * viewConsumable.consume( p, { attributes: 'style' } ); // Consume only if all added styles can be consumed.
-	 * ```
-	 *
-	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
-	 * @param consumables.name If set to true element's name will be included.
-	 * @param consumables.attributes Attribute name or array of attribute names.
-	 * @param consumables.classes Class name or array of class names.
-	 * @param consumables.styles Style name or array of style names.
-	 * @returns Returns `true` when all items included in method's call can be consumed,
-	 * otherwise returns `false`.
-	 */ consume(element, consumables) {
-        if (this.test(element, consumables)) {
-            if (element.is('$text') || element.is('documentFragment')) {
-                // For text nodes and document fragments set value to false.
-                this._consumables.set(element, false);
-            } else {
-                // For elements - consume consumables object.
-                this._consumables.get(element).consume(consumables);
-            }
-            return true;
-        }
-        return false;
-    }
-    /**
-	 * Reverts {@link module:engine/view/element~Element view element}, {@link module:engine/view/text~Text text node} or
-	 * {@link module:engine/view/documentfragment~DocumentFragment document fragment} so they can be consumed once again.
-	 * Method does not revert items that were never previously added for consumption, even if they are included in
-	 * method's call.
-	 *
-	 * ```ts
-	 * viewConsumable.revert( p, { name: true } ); // Reverts element's name.
-	 * viewConsumable.revert( p, { attributes: 'name' } ); // Reverts element's attribute.
-	 * viewConsumable.revert( p, { classes: 'foobar' } ); // Reverts element's class.
-	 * viewConsumable.revert( p, { styles: 'color' } ); // Reverts element's style.
-	 * viewConsumable.revert( p, { attributes: 'name', styles: 'color' } ); // Reverts attribute and style.
-	 * viewConsumable.revert( p, { classes: [ 'baz', 'bar' ] } ); // Multiple names can be reverted.
-	 * viewConsumable.revert( textNode ); // Reverts text node.
-	 * viewConsumable.revert( docFragment ); // Reverts document fragment.
-	 * ```
-	 *
-	 * Reverting classes and styles as attribute will revert all classes/styles that were previously added for
-	 * consumption.
-	 *
-	 * ```ts
-	 * viewConsumable.revert( p, { attributes: 'class' } ); // Reverts all classes added for consumption.
-	 * viewConsumable.revert( p, { attributes: 'style' } ); // Reverts all styles added for consumption.
-	 * ```
-	 *
-	 * @param consumables Used only if first parameter is {@link module:engine/view/element~Element view element} instance.
-	 * @param consumables.name If set to true element's name will be included.
-	 * @param consumables.attributes Attribute name or array of attribute names.
-	 * @param consumables.classes Class name or array of class names.
-	 * @param consumables.styles Style name or array of style names.
-	 */ revert(element, consumables) {
-        const elementConsumables = this._consumables.get(element);
-        if (elementConsumables !== undefined) {
-            if (element.is('$text') || element.is('documentFragment')) {
-                // For text nodes and document fragments - set consumable to true.
-                this._consumables.set(element, true);
-            } else {
-                // For elements - revert items from consumables object.
-                elementConsumables.revert(consumables);
-            }
-        }
-    }
-    /**
-	 * Creates consumable object from {@link module:engine/view/element~Element view element}. Consumable object will include
-	 * element's name and all its attributes, classes and styles.
-	 */ static consumablesFromElement(element) {
-        const consumables = {
-            element,
-            name: true,
-            attributes: [],
-            classes: [],
-            styles: []
-        };
-        const attributes = element.getAttributeKeys();
-        for (const attribute of attributes){
-            // Skip classes and styles - will be added separately.
-            if (attribute == 'style' || attribute == 'class') {
-                continue;
+        this.downcastDispatcher.on('selection', convertCollapsedSelection(), {
+            priority: 'low'
+        });
+        // Binds {@link module:engine/view/document~Document#roots view roots collection} to
+        // {@link module:engine/model/document~Document#roots model roots collection} so creating
+        // model root automatically creates corresponding view root.
+        this.view.document.roots.bindTo(this.model.document.roots).using((root)=>{
+            // $graveyard is a special root that has no reflection in the view.
+            if (root.rootName == '$graveyard') {
+                return null;
             }
-            consumables.attributes.push(attribute);
-        }
-        const classes = element.getClassNames();
-        for (const className of classes){
-            consumables.classes.push(className);
-        }
-        const styles = element.getStyleNames();
-        for (const style of styles){
-            consumables.styles.push(style);
-        }
-        return consumables;
-    }
-    /**
-	 * Creates {@link module:engine/conversion/viewconsumable~ViewConsumable ViewConsumable} instance from
-	 * {@link module:engine/view/node~Node node} or {@link module:engine/view/documentfragment~DocumentFragment document fragment}.
-	 * Instance will contain all elements, child nodes, attributes, styles and classes added for consumption.
-	 *
-	 * @param from View node or document fragment from which `ViewConsumable` will be created.
-	 * @param instance If provided, given `ViewConsumable` instance will be used
-	 * to add all consumables. It will be returned instead of a new instance.
-	 */ static createFrom(from, instance) {
-        if (!instance) {
-            instance = new ViewConsumable();
-        }
-        if (from.is('$text')) {
-            instance.add(from);
-            return instance;
-        }
-        // Add `from` itself, if it is an element.
-        if (from.is('element')) {
-            instance.add(from, ViewConsumable.consumablesFromElement(from));
-        }
-        if (from.is('documentFragment')) {
-            instance.add(from);
-        }
-        for (const child of from.getChildren()){
-            instance = ViewConsumable.createFrom(child, instance);
-        }
-        return instance;
+            const viewRoot = new RootEditableElement(this.view.document, root.name);
+            viewRoot.rootName = root.rootName;
+            this.mapper.bindElements(root, viewRoot);
+            return viewRoot;
+        });
+    // @if CK_DEBUG_ENGINE // initDocumentDumping( this.model.document );
+    // @if CK_DEBUG_ENGINE // initDocumentDumping( this.view.document );
+    // @if CK_DEBUG_ENGINE // dumpTrees( this.model.document, this.model.document.version );
+    // @if CK_DEBUG_ENGINE // dumpTrees( this.view.document, this.model.document.version );
+    // @if CK_DEBUG_ENGINE // this.model.document.on( 'change', () => {
+    // @if CK_DEBUG_ENGINE //	dumpTrees( this.view.document, this.model.document.version );
+    // @if CK_DEBUG_ENGINE // }, { priority: 'lowest' } );
     }
-}
-const CONSUMABLE_TYPES = [
-    'attributes',
-    'classes',
-    'styles'
-];
-/**
- * This is a private helper-class for {@link module:engine/conversion/viewconsumable~ViewConsumable}.
- * It represents and manipulates consumable parts of a single {@link module:engine/view/element~Element}.
- */ class ViewElementConsumables {
-    element;
-    /**
-	 * Flag indicating if name of the element can be consumed.
-	 */ _canConsumeName;
-    /**
-	 * Contains maps of element's consumables: attributes, classes and styles.
-	 */ _consumables;
     /**
-	 * Creates ViewElementConsumables instance.
-	 *
-	 * @param from View node or document fragment from which `ViewElementConsumables` is being created.
-	 */ constructor(from){
-        this.element = from;
-        this._canConsumeName = null;
-        this._consumables = {
-            attributes: new Map(),
-            styles: new Map(),
-            classes: new Map()
-        };
+	 * Removes all event listeners attached to the `EditingController`. Destroys all objects created
+	 * by `EditingController` that need to be destroyed.
+	 */ destroy() {
+        this.view.destroy();
+        this.stopListening();
     }
     /**
-	 * Adds consumable parts of the {@link module:engine/view/element~Element view element}.
-	 * Element's name itself can be marked to be consumed (when element's name is consumed its attributes, classes and
-	 * styles still could be consumed):
-	 *
-	 * ```ts
-	 * consumables.add( { name: true } );
-	 * ```
+	 * Calling this method will refresh the marker by triggering the downcast conversion for it.
 	 *
-	 * Attributes classes and styles:
+	 * Reconverting the marker is useful when you want to change its {@link module:engine/view/element~Element view element}
+	 * without changing any marker data. For instance:
 	 *
 	 * ```ts
-	 * consumables.add( { attributes: 'title', classes: 'foo', styles: 'color' } );
-	 * consumables.add( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
-	 * ```
-	 *
-	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
-	 * attribute is provided - it should be handled separately by providing `style` and `class` in consumables object.
-	 *
-	 * @param consumables Object describing which parts of the element can be consumed.
-	 * @param consumables.name If set to `true` element's name will be added as consumable.
-	 * @param consumables.attributes Attribute name or array of attribute names to add as consumable.
-	 * @param consumables.classes Class name or array of class names to add as consumable.
-	 * @param consumables.styles Style name or array of style names to add as consumable.
-	 */ add(consumables) {
-        if (consumables.name) {
-            this._canConsumeName = true;
-        }
-        for (const type of CONSUMABLE_TYPES){
-            if (type in consumables) {
-                this._add(type, consumables[type]);
-            }
-        }
-    }
-    /**
-	 * Tests if parts of the {@link module:engine/view/node~Node view node} can be consumed.
+	 * let isCommentActive = false;
 	 *
-	 * Element's name can be tested:
+	 * model.conversion.markerToHighlight( {
+	 * 	model: 'comment',
+	 * 	view: data => {
+	 * 		const classes = [ 'comment-marker' ];
 	 *
-	 * ```ts
-	 * consumables.test( { name: true } );
-	 * ```
+	 * 		if ( isCommentActive ) {
+	 * 			classes.push( 'comment-marker--active' );
+	 * 		}
 	 *
-	 * Attributes classes and styles:
+	 * 		return { classes };
+	 * 	}
+	 * } );
 	 *
-	 * ```ts
-	 * consumables.test( { attributes: 'title', classes: 'foo', styles: 'color' } );
-	 * consumables.test( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
-	 * ```
+	 * // ...
 	 *
-	 * @param consumables Object describing which parts of the element should be tested.
-	 * @param consumables.name If set to `true` element's name will be tested.
-	 * @param consumables.attributes Attribute name or array of attribute names to test.
-	 * @param consumables.classes Class name or array of class names to test.
-	 * @param consumables.styles Style name or array of style names to test.
-	 * @returns `true` when all tested items can be consumed, `null` when even one of the items
-	 * was never marked for consumption and `false` when even one of the items was already consumed.
-	 */ test(consumables) {
-        // Check if name can be consumed.
-        if (consumables.name && !this._canConsumeName) {
-            return this._canConsumeName;
-        }
-        for (const type of CONSUMABLE_TYPES){
-            if (type in consumables) {
-                const value = this._test(type, consumables[type]);
-                if (value !== true) {
-                    return value;
-                }
-            }
-        }
-        // Return true only if all can be consumed.
-        return true;
-    }
-    /**
-	 * Consumes parts of {@link module:engine/view/element~Element view element}. This function does not check if consumable item
-	 * is already consumed - it consumes all consumable items provided.
-	 * Element's name can be consumed:
+	 * // Change the property that indicates if marker is displayed as active or not.
+	 * isCommentActive = true;
 	 *
-	 * ```ts
-	 * consumables.consume( { name: true } );
+	 * // Reconverting will downcast and synchronize the marker with the new isCommentActive state value.
+	 * editor.editing.reconvertMarker( 'comment' );
 	 * ```
 	 *
-	 * Attributes classes and styles:
-	 *
-	 * ```ts
-	 * consumables.consume( { attributes: 'title', classes: 'foo', styles: 'color' } );
-	 * consumables.consume( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
-	 * ```
+	 * **Note**: If you want to reconvert a model item, use {@link #reconvertItem} instead.
 	 *
-	 * @param consumables Object describing which parts of the element should be consumed.
-	 * @param consumables.name If set to `true` element's name will be consumed.
-	 * @param consumables.attributes Attribute name or array of attribute names to consume.
-	 * @param consumables.classes Class name or array of class names to consume.
-	 * @param consumables.styles Style name or array of style names to consume.
-	 */ consume(consumables) {
-        if (consumables.name) {
-            this._canConsumeName = false;
-        }
-        for (const type of CONSUMABLE_TYPES){
-            if (type in consumables) {
-                this._consume(type, consumables[type]);
-            }
+	 * @param markerOrName Name of a marker to update, or a marker instance.
+	 */ reconvertMarker(markerOrName) {
+        const markerName = typeof markerOrName == 'string' ? markerOrName : markerOrName.name;
+        const currentMarker = this.model.markers.get(markerName);
+        if (!currentMarker) {
+            /**
+			 * The marker with the provided name does not exist and cannot be reconverted.
+			 *
+			 * @error editingcontroller-reconvertmarker-marker-not-exist
+			 * @param {String} markerName The name of the reconverted marker.
+			 */ throw new CKEditorError('editingcontroller-reconvertmarker-marker-not-exist', this, {
+                markerName
+            });
         }
+        this.model.change(()=>{
+            this.model.markers._refresh(currentMarker);
+        });
     }
     /**
-	 * Revert already consumed parts of {@link module:engine/view/element~Element view Element}, so they can be consumed once again.
-	 * Element's name can be reverted:
-	 *
-	 * ```ts
-	 * consumables.revert( { name: true } );
-	 * ```
-	 *
-	 * Attributes classes and styles:
-	 *
-	 * ```ts
-	 * consumables.revert( { attributes: 'title', classes: 'foo', styles: 'color' } );
-	 * consumables.revert( { attributes: [ 'title', 'name' ], classes: [ 'foo', 'bar' ] );
-	 * ```
+	 * Calling this method will downcast a model item on demand (by requesting a refresh in the {@link module:engine/model/differ~Differ}).
 	 *
-	 * @param consumables Object describing which parts of the element should be reverted.
-	 * @param consumables.name If set to `true` element's name will be reverted.
-	 * @param consumables.attributes Attribute name or array of attribute names to revert.
-	 * @param consumables.classes Class name or array of class names to revert.
-	 * @param consumables.styles Style name or array of style names to revert.
-	 */ revert(consumables) {
-        if (consumables.name) {
-            this._canConsumeName = true;
-        }
-        for (const type of CONSUMABLE_TYPES){
-            if (type in consumables) {
-                this._revert(type, consumables[type]);
-            }
-        }
-    }
-    /**
-	 * Helper method that adds consumables of a given type: attribute, class or style.
+	 * You can use it if you want the view representation of a specific item updated as a response to external modifications. For instance,
+	 * when the view structure depends not only on the associated model data but also on some external state.
 	 *
-	 * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `viewconsumable-invalid-attribute` when `class` or `style`
-	 * type is provided - it should be handled separately by providing actual style/class type.
-	 *
-	 * @param type Type of the consumable item: `attributes`, `classes` or `styles`.
-	 * @param item Consumable item or array of items.
-	 */ _add(type, item) {
-        const items = toArray(item);
-        const consumables = this._consumables[type];
-        for (const name of items){
-            if (type === 'attributes' && (name === 'class' || name === 'style')) {
-                /**
-				 * Class and style attributes should be handled separately in
-				 * {@link module:engine/conversion/viewconsumable~ViewConsumable#add `ViewConsumable#add()`}.
-				 *
-				 * What you have done is trying to use:
-				 *
-				 * ```ts
-				 * consumables.add( { attributes: [ 'class', 'style' ] } );
-				 * ```
-				 *
-				 * While each class and style should be registered separately:
-				 *
-				 * ```ts
-				 * consumables.add( { classes: 'some-class', styles: 'font-weight' } );
-				 * ```
-				 *
-				 * @error viewconsumable-invalid-attribute
-				 */ throw new CKEditorError('viewconsumable-invalid-attribute', this);
-            }
-            consumables.set(name, true);
-            if (type === 'styles') {
-                for (const alsoName of this.element.document.stylesProcessor.getRelatedStyles(name)){
-                    consumables.set(alsoName, true);
-                }
-            }
-        }
-    }
-    /**
-	 * Helper method that tests consumables of a given type: attribute, class or style.
+	 * **Note**: If you want to reconvert a model marker, use {@link #reconvertMarker} instead.
 	 *
-	 * @param type Type of the consumable item: `attributes`, `classes` or `styles`.
-	 * @param item Consumable item or array of items.
-	 * @returns Returns `true` if all items can be consumed, `null` when one of the items cannot be
-	 * consumed and `false` when one of the items is already consumed.
-	 */ _test(type, item) {
-        const items = toArray(item);
-        const consumables = this._consumables[type];
-        for (const name of items){
-            if (type === 'attributes' && (name === 'class' || name === 'style')) {
-                const consumableName = name == 'class' ? 'classes' : 'styles';
-                // Check all classes/styles if class/style attribute is tested.
-                const value = this._test(consumableName, [
-                    ...this._consumables[consumableName].keys()
-                ]);
-                if (value !== true) {
-                    return value;
-                }
-            } else {
-                const value = consumables.get(name);
-                // Return null if attribute is not found.
-                if (value === undefined) {
-                    return null;
-                }
-                if (!value) {
-                    return false;
-                }
-            }
-        }
-        return true;
+	 * @param item Item to refresh.
+	 */ reconvertItem(item) {
+        this.model.change(()=>{
+            this.model.document.differ._refreshItem(item);
+        });
     }
-    /**
-	 * Helper method that consumes items of a given type: attribute, class or style.
-	 *
-	 * @param type Type of the consumable item: `attributes`, `classes` or `styles`.
-	 * @param item Consumable item or array of items.
-	 */ _consume(type, item) {
-        const items = toArray(item);
-        const consumables = this._consumables[type];
-        for (const name of items){
-            if (type === 'attributes' && (name === 'class' || name === 'style')) {
-                const consumableName = name == 'class' ? 'classes' : 'styles';
-                // If class or style is provided for consumption - consume them all.
-                this._consume(consumableName, [
-                    ...this._consumables[consumableName].keys()
-                ]);
-            } else {
-                consumables.set(name, false);
-                if (type == 'styles') {
-                    for (const toConsume of this.element.document.stylesProcessor.getRelatedStyles(name)){
-                        consumables.set(toConsume, false);
-                    }
-                }
-            }
+}
+/**
+ * Checks whether the target ranges provided by the `beforeInput` event can be properly mapped to model ranges and fixes them if needed.
+ *
+ * This is using the same logic as the selection post-fixer.
+ */ function fixTargetRanges(mapper, schema, view) {
+    return (evt, data)=>{
+        // The Renderer is disabled while composing on non-android browsers, so we can't be sure that target ranges
+        // could be properly mapped to view and model because the DOM and view tree drifted apart.
+        if (view.document.isComposing && !env.isAndroid) {
+            return;
         }
-    }
-    /**
-	 * Helper method that reverts items of a given type: attribute, class or style.
-	 *
-	 * @param type Type of the consumable item: `attributes`, `classes` or , `styles`.
-	 * @param item Consumable item or array of items.
-	 */ _revert(type, item) {
-        const items = toArray(item);
-        const consumables = this._consumables[type];
-        for (const name of items){
-            if (type === 'attributes' && (name === 'class' || name === 'style')) {
-                const consumableName = name == 'class' ? 'classes' : 'styles';
-                // If class or style is provided for reverting - revert them all.
-                this._revert(consumableName, [
-                    ...this._consumables[consumableName].keys()
-                ]);
-            } else {
-                const value = consumables.get(name);
-                if (value === false) {
-                    consumables.set(name, true);
-                }
+        for(let i = 0; i < data.targetRanges.length; i++){
+            const viewRange = data.targetRanges[i];
+            const modelRange = mapper.toModelRange(viewRange);
+            const correctedRange = tryFixingRange(modelRange, schema);
+            if (!correctedRange || correctedRange.isEqual(modelRange)) {
+                continue;
             }
+            data.targetRanges[i] = mapper.toViewRange(correctedRange);
         }
-    }
+    };
 }
 
 /**