@ckeditor/ckeditor5-engine 32.0.0 → 34.1.0

package/src/conversion/upcastdispatcher.js

@@ -40,10 +40,7 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
  * The third parameter of the callback is an instance of {@link module:engine/conversion/upcastdispatcher~UpcastConversionApi}
  * which provides additional tools for converters.
  *
- * You can read more about conversion in the following guides:
- *
- * * {@glink framework/guides/deep-dive/conversion/conversion-introduction Advanced conversion concepts — attributes}
- * * {@glink framework/guides/deep-dive/conversion/custom-element-conversion Custom element conversion}
+ * You can read more about conversion in the {@glink framework/guides/deep-dive/conversion/upcast Upcast conversion} guide.
  *
  * Examples of event-based converters:
  *
@@ -127,7 +124,7 @@ export default class UpcastDispatcher {
 		/**
 		 * The list of elements that were created during splitting.
 		 *
-		 * After the conversion process the list is cleared.
+		 * After the conversion process, the list is cleared.
 		 *
 		 * @private
 		 * @type {Map.<module:engine/model/element~Element,Array.<module:engine/model/element~Element>>}
@@ -154,6 +151,16 @@ export default class UpcastDispatcher {
 		 */
 		this._modelCursor = null;
 
+		/**
+		 * The list of elements that were created during the splitting but should not get removed on conversion end even if they are empty.
+		 *
+		 * The list is cleared after the conversion process.
+		 *
+		 * @private
+		 * @type {Set.<module:engine/model/element~Element>}
+		 */
+		this._emptyElementsToKeep = new Set();
+
 		/**
 		 * An interface passed by the dispatcher to the event callbacks.
 		 *
@@ -170,6 +177,7 @@ export default class UpcastDispatcher {
 		// Advanced API - use only if custom position handling is needed.
 		this.conversionApi.splitToAllowedParent = this._splitToAllowedParent.bind( this );
 		this.conversionApi.getSplitParts = this._getSplitParts.bind( this );
+		this.conversionApi.keepEmptyElement = this._keepEmptyElement.bind( this );
 	}
 
 	/**
@@ -229,6 +237,7 @@ export default class UpcastDispatcher {
 		// Clear split elements & parents lists.
 		this._splitParts.clear();
 		this._cursorParents.clear();
+		this._emptyElementsToKeep.clear();
 
 		// Clear conversion API.
 		this.conversionApi.writer = null;
@@ -454,6 +463,15 @@ export default class UpcastDispatcher {
 		return parts;
 	}
 
+	/**
+	 * Mark an element that were created during the splitting to not get removed on conversion end even if it is empty.
+	 *
+	 * @private
+	 */
+	_keepEmptyElement( element ) {
+		this._emptyElementsToKeep.add( element );
+	}
+
 	/**
 	 * Checks if there are any empty elements created while splitting and removes them.
 	 *
@@ -466,7 +484,7 @@ export default class UpcastDispatcher {
 		let anyRemoved = false;
 
 		for ( const element of this._splitParts.keys() ) {
-			if ( element.isEmpty ) {
+			if ( element.isEmpty && !this._emptyElementsToKeep.has( element ) ) {
 				this.conversionApi.writer.remove( element );
 				this._splitParts.delete( element );
 
@@ -760,6 +778,15 @@ function createContextTree( contextDefinition, writer ) {
  * @returns {Array.<module:engine/model/element~Element>}
  */
 
+/**
+ * Mark an element that was created during splitting to not get removed on conversion end even if it is empty.
+ *
+ * **Note:** This is an advanced method. For most cases you will not need to keep the split empty element.
+ *
+ * @method #keepEmptyElement
+ * @param {module:engine/model/element~Element} element
+ */
+
 /**
  * Stores information about what parts of the processed view item are still waiting to be handled. After a piece of view item
  * was converted, an appropriate consumable value should be

package/src/conversion/upcasthelpers.js

@@ -12,7 +12,7 @@ import priorities from '@ckeditor/ckeditor5-utils/src/priorities';
 import { isParagraphable, wrapInParagraph } from '../model/utils/autoparagraphing';
 
 /**
- * Contains {@link module:engine/view/view view} to {@link module:engine/model/model model} converters for
+ * Contains the {@link module:engine/view/view view} to {@link module:engine/model/model model} converters for
  * {@link module:engine/conversion/upcastdispatcher~UpcastDispatcher}.
  *
  * @module engine/conversion/upcasthelpers
@@ -21,6 +21,8 @@ import { isParagraphable, wrapInParagraph } from '../model/utils/autoparagraphin
 /**
  * Upcast conversion helper functions.
  *
+ * Learn more about {@glink framework/guides/deep-dive/conversion/upcast upcast helpers}.
+ *
  * @extends module:engine/conversion/conversionhelpers~ConversionHelpers
  */
 export default class UpcastHelpers extends ConversionHelpers {
@@ -865,6 +867,13 @@ function prepareToAttributeConverter( config, shallow ) {
 	const matcher = new Matcher( config.view );
 
 	return ( evt, data, conversionApi ) => {
+		// Converting an attribute of an element that has not been converted to anything does not make sense
+		// because there will be nowhere to set that attribute on. At this stage, the element should've already
+		// been converted (https://github.com/ckeditor/ckeditor5/issues/11000).
+		if ( !data.modelRange && shallow ) {
+			return;
+		}
+
 		const match = matcher.match( data.viewItem );
 
 		// If there is no match, this callback should not do anything.
@@ -875,7 +884,8 @@ function prepareToAttributeConverter( config, shallow ) {
 		if ( onlyViewNameIsDefined( config.view, data.viewItem ) ) {
 			match.match.name = true;
 		} else {
-			// Do not test or consume `name` consumable.
+			// Do not test `name` consumable because it could get consumed already while upcasting some other attribute
+			// on the same element (for example <span class="big" style="color: red">foo</span>).
 			delete match.match.name;
 		}
 
@@ -906,6 +916,15 @@ function prepareToAttributeConverter( config, shallow ) {
 		// It may happen that a converter will try to set an attribute that is not allowed in the given context.
 		// In such a situation we cannot consume the attribute. See: https://github.com/ckeditor/ckeditor5/pull/9249#issuecomment-815658459.
 		if ( attributeWasSet ) {
+			// Verify if the element itself wasn't consumed yet. It could be consumed already while upcasting some other attribute
+			// on the same element (for example <span class="big" style="color: red">foo</span>).
+			// We need to consume it so other features (especially GHS) won't try to convert it.
+			// Note that it's not tested by the other element-to-attribute converters whether an element was consumed before
+			// (in case of converters that the element itself is just a context and not the primary information to convert).
+			if ( conversionApi.consumable.test( data.viewItem, { name: true } ) ) {
+				match.match.name = true;
+			}
+
 			conversionApi.consumable.consume( data.viewItem, match.match );
 		}
 	};

package/src/dataprocessor/htmldataprocessor.js

@@ -114,7 +114,7 @@ export default class HtmlDataProcessor {
 	 * @returns {DocumentFragment}
 	 */
 	_toDom( data ) {
-		// Wrap data with a <body> so leading non-layout nodes (like <script>, <style>, HTML comment)
+		// Wrap data with a <body> tag so leading non-layout nodes (like <script>, <style>, HTML comment)
 		// will be preserved in the body collection.
 		// Do it only for data that is not a full HTML document.
 		if ( !data.match( /<(?:html|body|head|meta)(?:\s[^>]*)?>/i ) ) {

package/src/dev-utils/model.js

@@ -31,6 +31,7 @@ import Mapper from '../conversion/mapper';
 import {
 	convertCollapsedSelection,
 	convertRangeSelection,
+	insertAttributesAndChildren,
 	insertElement,
 	insertText,
 	insertUIElement,
@@ -233,6 +234,7 @@ export function stringify( node, selectionOrPositionOrRange = null, markers = nu
 	mapper.bindElements( node.root, viewRoot );
 
 	downcastDispatcher.on( 'insert:$text', insertText() );
+	downcastDispatcher.on( 'insert', insertAttributesAndChildren(), { priority: 'lowest' } );
 	downcastDispatcher.on( 'attribute', ( evt, data, conversionApi ) => {
 		if ( data.item instanceof ModelSelection || data.item instanceof DocumentSelection || data.item.is( '$textProxy' ) ) {
 			const converter = wrap( ( modelAttributeValue, { writer } ) => {
@@ -260,28 +262,28 @@ export function stringify( node, selectionOrPositionOrRange = null, markers = nu
 		return writer.createUIElement( name );
 	} ) );
 
+	const markersMap = new Map();
+
+	if ( markers ) {
+		// To provide stable results, sort markers by name.
+		for ( const marker of Array.from( markers ).sort( ( a, b ) => a.name < b.name ? 1 : -1 ) ) {
+			markersMap.set( marker.name, marker.getRange() );
+		}
+	}
+
 	// Convert model to view.
 	const writer = view._writer;
-	downcastDispatcher.convertInsert( range, writer );
+	downcastDispatcher.convert( range, markersMap, writer );
 
 	// Convert model selection to view selection.
 	if ( selection ) {
 		downcastDispatcher.convertSelection( selection, markers || model.markers, writer );
 	}
 
-	if ( markers ) {
-		// To provide stable results, sort markers by name.
-		markers = Array.from( markers ).sort( ( a, b ) => a.name < b.name ? 1 : -1 );
-
-		for ( const marker of markers ) {
-			downcastDispatcher.convertMarkerAdd( marker.name, marker.getRange(), writer );
-		}
-	}
-
 	// Parse view to data string.
 	let data = viewStringify( viewRoot, viewDocument.selection, { sameSelectionCharacters: true } );
 
-	// Removing unneccessary <div> and </div> added because `viewRoot` was also stringified alongside input data.
+	// Removing unnecessary <div> and </div> added because `viewRoot` was also stringified alongside input data.
 	data = data.substr( 5, data.length - 11 );
 
 	view.destroy();

package/src/index.js

@@ -28,10 +28,22 @@ export { default as LivePosition } from './model/liveposition';
 export { default as Model } from './model/model';
 export { default as TreeWalker } from './model/treewalker';
 export { default as Element } from './model/element';
+export { default as Position } from './model/position';
+export { default as DocumentFragment } from './model/documentfragment';
+export { default as History } from './model/history';
+export { default as Text } from './model/text';
 
 export { default as DomConverter } from './view/domconverter';
 export { default as Renderer } from './view/renderer';
 export { default as ViewDocument } from './view/document';
+export { default as ViewText } from './view/text';
+export { default as ViewElement } from './view/element';
+export { default as ViewContainerElement } from './view/containerelement';
+export { default as ViewAttributeElement } from './view/attributeelement';
+export { default as ViewEmptyElement } from './view/emptyelement';
+export { default as ViewRawElement } from './view/rawelement';
+export { default as ViewUIElement } from './view/uielement';
+export { default as ViewDocumentFragment } from './view/documentfragment';
 
 export { getFillerOffset } from './view/containerelement';
 export { default as Observer } from './view/observer/observer';

package/src/model/batch.js

@@ -27,20 +27,20 @@ export default class Batch {
 	 *
 	 * @see module:engine/model/model~Model#enqueueChange
 	 * @see module:engine/model/model~Model#change
-	 * @param {Object} [type] Set of flags that specifies the type of the batch. Batch type can alter how some of the features work when
-	 * encountering given `Batch` instance (for example, when a feature listens to applied operations).
-	 * @param {Boolean} [type.isUndoable=true] Whether batch can be undone through undo feature.
-	 * @param {Boolean} [type.isLocal=true] Whether batch includes operations created locally (`true`) or operations created on
+	 * @param {Object} [type] A set of flags that specify the type of the batch. Batch type can alter how some of the features work
+	 * when encountering a given `Batch` instance (for example, when a feature listens to applied operations).
+	 * @param {Boolean} [type.isUndoable=true] Whether a batch can be undone through undo feature.
+	 * @param {Boolean} [type.isLocal=true] Whether a batch includes operations created locally (`true`) or operations created on
 	 * other, remote editors (`false`).
-	 * @param {Boolean} [type.isUndo=false] Whether batch was created by the undo feature and undoes other operations.
-	 * @param {Boolean} [type.isTyping=false] Whether batch includes operations connected with typing action.
+	 * @param {Boolean} [type.isUndo=false] Whether a batch was created by the undo feature and undoes other operations.
+	 * @param {Boolean} [type.isTyping=false] Whether a batch includes operations connected with a typing action.
 	 */
 	constructor( type = {} ) {
 		if ( typeof type === 'string' ) {
 			type = type === 'transparent' ? { isUndoable: false } : {};
 
 			/**
-			 * The string value for `type` property of the `Batch` constructor has been deprecated and will be removed in the near future.
+			 * The string value for a `type` property of the `Batch` constructor has been deprecated and will be removed in the near future.
 			 * Please refer to the {@link module:engine/model/batch~Batch#constructor `Batch` constructor API documentation} for more
 			 * information.
 			 *
@@ -60,7 +60,7 @@ export default class Batch {
 		this.operations = [];
 
 		/**
-		 * Whether batch can be undone through the undo feature.
+		 * Whether the batch can be undone through the undo feature.
 		 *
 		 * @readonly
 		 * @type {Boolean}
@@ -68,7 +68,7 @@ export default class Batch {
 		this.isUndoable = isUndoable;
 
 		/**
-		 * Whether batch includes operations created locally (`true`) or operations created on other, remote editors (`false`).
+		 * Whether the batch includes operations created locally (`true`) or operations created on other, remote editors (`false`).
 		 *
 		 * @readonly
 		 * @type {Boolean}
@@ -76,7 +76,7 @@ export default class Batch {
 		this.isLocal = isLocal;
 
 		/**
-		 * Whether batch was created by the undo feature and undoes other operations.
+		 * Whether the batch was created by the undo feature and undoes other operations.
 		 *
 		 * @readonly
 		 * @type {Boolean}
@@ -84,7 +84,7 @@ export default class Batch {
 		this.isUndo = isUndo;
 
 		/**
-		 * Whether batch includes operations connected with typing.
+		 * Whether the batch includes operations connected with typing.
 		 *
 		 * @readonly
 		 * @type {Boolean}
@@ -95,7 +95,7 @@ export default class Batch {
 	/**
 	 * The type of the batch.
 	 *
-	 * **This property has been deprecated and is always set to `'default'` value.**
+	 * **This property has been deprecated and is always set to the `'default'` value.**
 	 *
 	 * It can be one of the following values:
 	 * * `'default'` – All "normal" batches. This is the most commonly used type.

package/src/model/differ.js

@@ -58,11 +58,12 @@ export default class Differ {
 		 * A map that stores all changed markers.
 		 *
 		 * The keys of the map are marker names.
-		 * The values of the map are objects with the `oldRange` and `newRange` properties. They store the marker range
-		 * state before and after the change.
+		 * The values of the map are objects with the following properties:
+		 * - `oldMarkerData`,
+		 * - `newMarkerData`.
 		 *
 		 * @private
-		 * @type {Map}
+		 * @type {Map.<String, Object>}
 		 */
 		this._changedMarkers = new Map();
 
@@ -98,6 +99,14 @@ export default class Differ {
 		 * @type {Array.<Object>|null}
 		 */
 		this._cachedChangesWithGraveyard = null;
+
+		/**
+		 * Set of model items that were marked to get refreshed in {@link #_refreshItem}.
+		 *
+		 * @private
+		 * @type {Set.<module:engine/model/item~Item>}
+		 */
+		this._refreshedItems = new Set();
 	}
 
 	/**
@@ -110,32 +119,6 @@ export default class Differ {
 		return this._changesInElement.size == 0 && this._changedMarkers.size == 0;
 	}
 
-	/**
-	 * Marks given `item` in differ to be "refreshed". It means that the item will be marked as removed and inserted in the differ changes
-	 * set, so it will be effectively re-converted when differ changes will be handled by a dispatcher.
-	 *
-	 * @param {module:engine/model/item~Item} item Item to refresh.
-	 */
-	refreshItem( item ) {
-		if ( this._isInInsertedElement( item.parent ) ) {
-			return;
-		}
-
-		this._markRemove( item.parent, item.startOffset, item.offsetSize );
-		this._markInsert( item.parent, item.startOffset, item.offsetSize );
-
-		const range = Range._createOn( item );
-
-		for ( const marker of this._markerCollection.getMarkersIntersectingRange( range ) ) {
-			const markerRange = marker.getRange();
-
-			this.bufferMarkerChange( marker.name, markerRange, markerRange, marker.affectsData );
-		}
-
-		// Clear cache after each buffered operation as it is no longer valid.
-		this._cachedChanges = null;
-	}
-
 	/**
 	 * Buffers the given operation. An operation has to be buffered before it is executed.
 	 *
@@ -208,9 +191,9 @@ export default class Differ {
 				const range = Range._createFromPositionAndShift( operation.position, 1 );
 
 				for ( const marker of this._markerCollection.getMarkersIntersectingRange( range ) ) {
-					const markerRange = marker.getRange();
+					const markerData = marker.getData();
 
-					this.bufferMarkerChange( marker.name, markerRange, markerRange, marker.affectsData );
+					this.bufferMarkerChange( marker.name, markerData, markerData );
 				}
 
 				break;
@@ -267,27 +250,23 @@ export default class Differ {
 	 * Buffers a marker change.
 	 *
 	 * @param {String} markerName The name of the marker that changed.
-	 * @param {module:engine/model/range~Range|null} oldRange Marker range before the change or `null` if the marker has just
-	 * been created.
-	 * @param {module:engine/model/range~Range|null} newRange Marker range after the change or `null` if the marker was removed.
-	 * @param {Boolean} affectsData Flag indicating whether marker affects the editor data.
+	 * @param {module:engine/model/markercollection~MarkerData} oldMarkerData Marker data before the change.
+	 * @param {module:engine/model/markercollection~MarkerData} newMarkerData Marker data after the change.
 	 */
-	bufferMarkerChange( markerName, oldRange, newRange, affectsData ) {
+	bufferMarkerChange( markerName, oldMarkerData, newMarkerData ) {
 		const buffered = this._changedMarkers.get( markerName );
 
 		if ( !buffered ) {
 			this._changedMarkers.set( markerName, {
-				oldRange,
-				newRange,
-				affectsData
+				newMarkerData,
+				oldMarkerData
 			} );
 		} else {
-			buffered.newRange = newRange;
-			buffered.affectsData = affectsData;
+			buffered.newMarkerData = newMarkerData;
 
-			if ( buffered.oldRange == null && buffered.newRange == null ) {
-				// The marker is going to be removed (`newRange == null`) but it did not exist before the first buffered change
-				// (`buffered.oldRange == null`). In this case, do not keep the marker in buffer at all.
+			if ( buffered.oldMarkerData.range == null && newMarkerData.range == null ) {
+				// The marker is going to be removed (`newMarkerData.range == null`) but it did not exist before the first buffered change
+				// (`buffered.oldMarkerData.range == null`). In this case, do not keep the marker in buffer at all.
 				this._changedMarkers.delete( markerName );
 			}
 		}
@@ -302,8 +281,8 @@ export default class Differ {
 		const result = [];
 
 		for ( const [ name, change ] of this._changedMarkers ) {
-			if ( change.oldRange != null ) {
-				result.push( { name, range: change.oldRange } );
+			if ( change.oldMarkerData.range != null ) {
+				result.push( { name, range: change.oldMarkerData.range } );
 			}
 		}
 
@@ -319,8 +298,8 @@ export default class Differ {
 		const result = [];
 
 		for ( const [ name, change ] of this._changedMarkers ) {
-			if ( change.newRange != null ) {
-				result.push( { name, range: change.newRange } );
+			if ( change.newMarkerData.range != null ) {
+				result.push( { name, range: change.newMarkerData.range } );
 			}
 		}
 
@@ -333,12 +312,12 @@ export default class Differ {
 	 * @returns {Array.<Object>}
 	 */
 	getChangedMarkers() {
-		return Array.from( this._changedMarkers ).map( item => (
+		return Array.from( this._changedMarkers ).map( ( [ name, change ] ) => (
 			{
-				name: item[ 0 ],
+				name,
 				data: {
-					oldRange: item[ 1 ].oldRange,
-					newRange: item[ 1 ].newRange
+					oldRange: change.oldMarkerData.range,
+					newRange: change.newMarkerData.range
 				}
 			}
 		) );
@@ -351,19 +330,33 @@ export default class Differ {
 	 *
 	 * * model structure changes,
 	 * * attribute changes,
-	 * * changes of markers which were defined as `affectingData`.
+	 * * changes of markers which were defined as `affectsData`,
+	 * * changes of markers' `affectsData` property.
 	 *
 	 * @returns {Boolean}
 	 */
 	hasDataChanges() {
-		for ( const [ , change ] of this._changedMarkers ) {
-			if ( change.affectsData ) {
+		if ( this._changesInElement.size > 0 ) {
+			return true;
+		}
+
+		for ( const { newMarkerData, oldMarkerData } of this._changedMarkers.values() ) {
+			if ( newMarkerData.affectsData !== oldMarkerData.affectsData ) {
 				return true;
 			}
+
+			if ( newMarkerData.affectsData ) {
+				const markerAdded = newMarkerData.range && !oldMarkerData.range;
+				const markerRemoved = !newMarkerData.range && oldMarkerData.range;
+				const markerChanged = newMarkerData.range && oldMarkerData.range && !newMarkerData.range.isEqual( oldMarkerData.range );
+
+				if ( markerAdded || markerRemoved || markerChanged ) {
+					return true;
+				}
+			}
 		}
 
-		// If markers do not affect the data, check whether there are some changes in elements.
-		return this._changesInElement.size > 0;
+		return false;
 	}
 
 	/**
@@ -430,12 +423,12 @@ export default class Differ {
 			for ( const action of actions ) {
 				if ( action === 'i' ) {
 					// Generate diff item for this element and insert it into the diff set.
-					diffSet.push( this._getInsertDiff( element, i, elementChildren[ i ].name ) );
+					diffSet.push( this._getInsertDiff( element, i, elementChildren[ i ] ) );
 
 					i++;
 				} else if ( action === 'r' ) {
 					// Generate diff item for this element and insert it into the diff set.
-					diffSet.push( this._getRemoveDiff( element, i, snapshotChildren[ j ].name ) );
+					diffSet.push( this._getRemoveDiff( element, i, snapshotChildren[ j ] ) );
 
 					j++;
 				} else if ( action === 'a' ) {
@@ -540,16 +533,25 @@ export default class Differ {
 		this._changeCount = 0;
 
 		// Cache changes.
-		this._cachedChangesWithGraveyard = diffSet.slice();
+		this._cachedChangesWithGraveyard = diffSet;
 		this._cachedChanges = diffSet.filter( _changesInGraveyardFilter );
 
 		if ( options.includeChangesInGraveyard ) {
-			return this._cachedChangesWithGraveyard;
+			return this._cachedChangesWithGraveyard.slice();
 		} else {
-			return this._cachedChanges;
+			return this._cachedChanges.slice();
 		}
 	}
 
+	/**
+	 * Returns a set of model items that were marked to get refreshed.
+	 *
+	 * @return {Set.<module:engine/model/item~Item>}
+	 */
+	getRefreshedItems() {
+		return new Set( this._refreshedItems );
+	}
+
 	/**
 	 * Resets `Differ`. Removes all buffered changes.
 	 */
@@ -557,6 +559,36 @@ export default class Differ {
 		this._changesInElement.clear();
 		this._elementSnapshots.clear();
 		this._changedMarkers.clear();
+		this._refreshedItems = new Set();
+		this._cachedChanges = null;
+	}
+
+	/**
+	 * Marks the given `item` in differ to be "refreshed". It means that the item will be marked as removed and inserted
+	 * in the differ changes set, so it will be effectively re-converted when the differ changes are handled by a dispatcher.
+	 *
+	 * @protected
+	 * @param {module:engine/model/item~Item} item Item to refresh.
+	 */
+	_refreshItem( item ) {
+		if ( this._isInInsertedElement( item.parent ) ) {
+			return;
+		}
+
+		this._markRemove( item.parent, item.startOffset, item.offsetSize );
+		this._markInsert( item.parent, item.startOffset, item.offsetSize );
+
+		this._refreshedItems.add( item );
+
+		const range = Range._createOn( item );
+
+		for ( const marker of this._markerCollection.getMarkersIntersectingRange( range ) ) {
+			const markerData = marker.getData();
+
+			this.bufferMarkerChange( marker.name, markerData, markerData );
+		}
+
+		// Clear cache after each buffered operation as it is no longer valid.
 		this._cachedChanges = null;
 	}
 
@@ -897,14 +929,15 @@ export default class Differ {
 	 * @private
 	 * @param {module:engine/model/element~Element} parent The element in which the change happened.
 	 * @param {Number} offset The offset at which change happened.
-	 * @param {String} name The name of the removed element or `'$text'` for a character.
+	 * @param {Object} elementSnapshot The snapshot of the removed element a character.
 	 * @returns {Object} The diff item.
 	 */
-	_getInsertDiff( parent, offset, name ) {
+	_getInsertDiff( parent, offset, elementSnapshot ) {
 		return {
 			type: 'insert',
 			position: Position._createAt( parent, offset ),
-			name,
+			name: elementSnapshot.name,
+			attributes: new Map( elementSnapshot.attributes ),
 			length: 1,
 			changeCount: this._changeCount++
 		};
@@ -916,14 +949,15 @@ export default class Differ {
 	 * @private
 	 * @param {module:engine/model/element~Element} parent The element in which change happened.
 	 * @param {Number} offset The offset at which change happened.
-	 * @param {String} name The name of the removed element or `'$text'` for a character.
+	 * @param {Object} elementSnapshot The snapshot of the removed element a character.
 	 * @returns {Object} The diff item.
 	 */
-	_getRemoveDiff( parent, offset, name ) {
+	_getRemoveDiff( parent, offset, elementSnapshot ) {
 		return {
 			type: 'remove',
 			position: Position._createAt( parent, offset ),
-			name,
+			name: elementSnapshot.name,
+			attributes: new Map( elementSnapshot.attributes ),
 			length: 1,
 			changeCount: this._changeCount++
 		};
@@ -1201,6 +1235,12 @@ function _changesInGraveyardFilter( entry ) {
  * @member {String} module:engine/model/differ~DiffItemInsert#name
  */
 
+/**
+ * Map of attributes that were set on the item while it was inserted.
+ *
+ * @member {Map.<String,*>} module:engine/model/differ~DiffItemInsert#attributes
+ */
+
 /**
  * The position where the node was inserted.
  *
@@ -1232,6 +1272,12 @@ function _changesInGraveyardFilter( entry ) {
  * @member {String} module:engine/model/differ~DiffItemRemove#name
  */
 
+/**
+ * Map of attributes that were set on the item while it was removed.
+ *
+ * @member {Map.<String,*>} module:engine/model/differ~DiffItemRemove#attributes
+ */
+
 /**
  * The position where the node was removed.
  *