@ckeditor/ckeditor5-html-support 31.1.0 → 34.0.0

package/src/generalhtmlsupport.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -8,6 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
+import { toArray } from 'ckeditor5/src/utils';
 
 import DataFilter from './datafilter';
 import CodeBlockElementSupport from './integrations/codeblock';
@@ -15,7 +16,10 @@ import DualContentModelElementSupport from './integrations/dualcontent';
 import HeadingElementSupport from './integrations/heading';
 import ImageElementSupport from './integrations/image';
 import MediaEmbedElementSupport from './integrations/mediaembed';
+import ScriptElementSupport from './integrations/script';
 import TableElementSupport from './integrations/table';
+import StyleElementSupport from './integrations/style';
+import DocumentListElementSupport from './integrations/documentlist';
 
 /**
  * The General HTML Support feature.
@@ -44,7 +48,10 @@ export default class GeneralHtmlSupport extends Plugin {
 			HeadingElementSupport,
 			ImageElementSupport,
 			MediaEmbedElementSupport,
-			TableElementSupport
+			ScriptElementSupport,
+			TableElementSupport,
+			StyleElementSupport,
+			DocumentListElementSupport
 		];
 	}
 
@@ -59,6 +66,231 @@ export default class GeneralHtmlSupport extends Plugin {
 		dataFilter.loadAllowedConfig( editor.config.get( 'htmlSupport.allow' ) || [] );
 		dataFilter.loadDisallowedConfig( editor.config.get( 'htmlSupport.disallow' ) || [] );
 	}
+
+	/**
+	 * Returns a GHS model attribute name related to a given view element name.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @returns {String}
+	 */
+	getGhsAttributeNameForElement( viewElementName ) {
+		const dataSchema = this.editor.plugins.get( 'DataSchema' );
+		const definitions = Array.from( dataSchema.getDefinitionsForView( viewElementName, false ) );
+
+		if ( definitions && definitions.length && definitions[ 0 ].isInline && !definitions[ 0 ].isObject ) {
+			return definitions[ 0 ].model;
+		}
+
+		return 'htmlAttributes';
+	}
+
+	/**
+	 * Updates GHS model attribute for a specified view element name, so it includes a given class name.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @param {String|Array.<String>} className The css class to add.
+	 * @param {module:engine/model/selection~Selectable} selectable The selection or element to update.
+	 */
+	addModelHtmlClass( viewElementName, className, selectable ) {
+		const model = this.editor.model;
+		const ghsAttributeName = this.getGhsAttributeNameForElement( viewElementName );
+
+		model.change( writer => {
+			for ( const item of getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) ) {
+				modifyGhsAttribute( writer, item, ghsAttributeName, 'classes', classes => {
+					for ( const value of toArray( className ) ) {
+						classes.add( value );
+					}
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Updates GHS model attribute for a specified view element name, so it does not include a given class name.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @param {String|Array.<String>} className The css class to remove.
+	 * @param {module:engine/model/selection~Selectable} selectable The selection or element to update.
+	 */
+	removeModelHtmlClass( viewElementName, className, selectable ) {
+		const model = this.editor.model;
+		const ghsAttributeName = this.getGhsAttributeNameForElement( viewElementName );
+
+		model.change( writer => {
+			for ( const item of getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) ) {
+				modifyGhsAttribute( writer, item, ghsAttributeName, 'classes', classes => {
+					for ( const value of toArray( className ) ) {
+						classes.delete( value );
+					}
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Updates GHS model attribute for a specified view element name, so it includes a given attribute.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @param {Object} attributes The object with attributes to set.
+	 * @param {module:engine/model/selection~Selectable} selectable The selection or element to update.
+	 */
+	setModelHtmlAttributes( viewElementName, attributes, selectable ) {
+		const model = this.editor.model;
+		const ghsAttributeName = this.getGhsAttributeNameForElement( viewElementName );
+
+		model.change( writer => {
+			for ( const item of getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) ) {
+				modifyGhsAttribute( writer, item, ghsAttributeName, 'attributes', attributesMap => {
+					for ( const [ key, value ] of Object.entries( attributes ) ) {
+						attributesMap.set( key, value );
+					}
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Updates GHS model attribute for a specified view element name, so it does not include a given attribute.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @param {String|Array.<String>} attributeName The attribute name (or names) to remove.
+	 * @param {module:engine/model/selection~Selectable} selectable The selection or element to update.
+	 */
+	removeModelHtmlAttributes( viewElementName, attributeName, selectable ) {
+		const model = this.editor.model;
+		const ghsAttributeName = this.getGhsAttributeNameForElement( viewElementName );
+
+		model.change( writer => {
+			for ( const item of getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) ) {
+				modifyGhsAttribute( writer, item, ghsAttributeName, 'attributes', attributesMap => {
+					for ( const key of toArray( attributeName ) ) {
+						attributesMap.delete( key );
+					}
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Updates GHS model attribute for a specified view element name, so it includes a given style.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @param {Object} styles The object with styles to set.
+	 * @param {module:engine/model/selection~Selectable} selectable The selection or element to update.
+	 */
+	setModelHtmlStyles( viewElementName, styles, selectable ) {
+		const model = this.editor.model;
+		const ghsAttributeName = this.getGhsAttributeNameForElement( viewElementName );
+
+		model.change( writer => {
+			for ( const item of getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) ) {
+				modifyGhsAttribute( writer, item, ghsAttributeName, 'styles', stylesMap => {
+					for ( const [ key, value ] of Object.entries( styles ) ) {
+						stylesMap.set( key, value );
+					}
+				} );
+			}
+		} );
+	}
+
+	/**
+	 * Updates GHS model attribute for a specified view element name, so it does not include a given style.
+	 *
+	 * @protected
+	 * @param {String} viewElementName A view element name.
+	 * @param {String|Array.<String>} properties The style (or styles list) to remove.
+	 * @param {module:engine/model/selection~Selectable} selectable The selection or element to update.
+	 */
+	removeModelHtmlStyles( viewElementName, properties, selectable ) {
+		const model = this.editor.model;
+		const ghsAttributeName = this.getGhsAttributeNameForElement( viewElementName );
+
+		model.change( writer => {
+			for ( const item of getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) ) {
+				modifyGhsAttribute( writer, item, ghsAttributeName, 'styles', stylesMap => {
+					for ( const key of toArray( properties ) ) {
+						stylesMap.delete( key );
+					}
+				} );
+			}
+		} );
+	}
+}
+
+// Returns an iterator over an items in the selectable that accept given GHS attribute.
+function* getItemsToUpdateGhsAttribute( model, selectable, ghsAttributeName ) {
+	if ( selectable.is( 'documentSelection' ) && selectable.isCollapsed ) {
+		if ( model.schema.checkAttributeInSelection( selectable, ghsAttributeName ) ) {
+			yield selectable;
+		}
+	} else {
+		for ( const range of getValidRangesForSelectable( model, selectable, ghsAttributeName ) ) {
+			yield* range.getItems( { shallow: true } );
+		}
+	}
+}
+
+// Translates a given selectable to an iterable of ranges.
+function getValidRangesForSelectable( model, selectable, ghsAttributeName ) {
+	if ( selectable.is( 'node' ) || selectable.is( '$text' ) || selectable.is( '$textProxy' ) ) {
+		if ( model.schema.checkAttribute( selectable, ghsAttributeName ) ) {
+			return [ model.createRangeOn( selectable ) ];
+		} else {
+			return [];
+		}
+	} else {
+		return model.schema.getValidRanges( model.createSelection( selectable ).getRanges(), ghsAttributeName );
+	}
+}
+
+// Updates a GHS attribute on a specified item.
+// @param {module:engine/model/writer~Writer} writer
+// @param {module:engine/model/item~Item|module:engine/model/documentselection~DocumentSelection} item
+// @param {String} ghsAttributeName
+// @param {'classes'|'attributes'|'styles'} subject
+// @param {Function} callback That receives a map or set as an argument and should modify it (add or remove entries).
+function modifyGhsAttribute( writer, item, ghsAttributeName, subject, callback ) {
+	const oldValue = item.getAttribute( ghsAttributeName );
+	const newValue = {};
+
+	for ( const kind of [ 'attributes', 'styles', 'classes' ] ) {
+		if ( kind != subject ) {
+			if ( oldValue && oldValue[ kind ] ) {
+				newValue[ kind ] = oldValue[ kind ];
+			}
+		} else {
+			const values = kind == 'classes' ?
+				new Set( oldValue && oldValue[ kind ] || [] ) :
+				new Map( Object.entries( oldValue && oldValue[ kind ] || {} ) );
+
+			callback( values );
+
+			if ( values.size ) {
+				newValue[ kind ] = kind == 'classes' ? Array.from( values ) : Object.fromEntries( values );
+			}
+		}
+	}
+
+	if ( Object.keys( newValue ).length ) {
+		if ( item.is( 'documentSelection' ) ) {
+			writer.setSelectionAttribute( ghsAttributeName, newValue );
+		} else {
+			writer.setAttribute( ghsAttributeName, newValue, item );
+		}
+	} else if ( oldValue ) {
+		if ( item.is( 'documentSelection' ) ) {
+			writer.removeSelectionAttribute( ghsAttributeName );
+		} else {
+			writer.removeAttribute( ghsAttributeName, item );
+		}
+	}
 }
 
 /**

package/src/htmlcomment.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/index.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/integrations/codeblock.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { setViewAttributes } from '../conversionutils.js';
+import { updateViewAttributes } from '../conversionutils.js';
 
 import DataFilter from '../datafilter';
 
@@ -101,10 +101,11 @@ function modelToViewCodeBlockAttributeConverter() {
 				return;
 			}
 
+			const { attributeOldValue, attributeNewValue } = data;
 			const viewCodeElement = conversionApi.mapper.toViewElement( data.item );
 			const viewPreElement = viewCodeElement.parent;
 
-			setViewAttributes( conversionApi.writer, data.attributeNewValue, viewPreElement );
+			updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewPreElement );
 		} );
 
 		dispatcher.on( 'attribute:htmlContentAttributes:codeBlock', ( evt, data, conversionApi ) => {
@@ -112,9 +113,10 @@ function modelToViewCodeBlockAttributeConverter() {
 				return;
 			}
 
+			const { attributeOldValue, attributeNewValue } = data;
 			const viewCodeElement = conversionApi.mapper.toViewElement( data.item );
 
-			setViewAttributes( conversionApi.writer, data.attributeNewValue, viewCodeElement );
+			updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewCodeElement );
 		} );
 	};
 }

package/src/integrations/documentlist.js

@@ -0,0 +1,200 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/integrations/documentlist
+ */
+
+import { isEqual } from 'lodash-es';
+import { Plugin } from 'ckeditor5/src/core';
+import { setViewAttributes } from '../conversionutils.js';
+
+import DataFilter from '../datafilter';
+
+/**
+ * Provides the General HTML Support integration with {@link module:list/documentlist~DocumentList Document List} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class DocumentListElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		if ( !editor.plugins.has( 'DocumentListEditing' ) ) {
+			return;
+		}
+
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+		const dataFilter = editor.plugins.get( DataFilter );
+		const documentListEditing = editor.plugins.get( 'DocumentListEditing' );
+
+		// Register downcast strategy.
+		// Note that this must be done before document list editing registers conversion in afterInit.
+		documentListEditing.registerDowncastStrategy( {
+			scope: 'item',
+			attributeName: 'htmlLiAttributes',
+
+			setAttributeOnDowncast( writer, attributeValue, viewElement ) {
+				setViewAttributes( writer, attributeValue, viewElement );
+			}
+		} );
+
+		documentListEditing.registerDowncastStrategy( {
+			scope: 'list',
+			attributeName: 'htmlListAttributes',
+
+			setAttributeOnDowncast( writer, viewAttributes, viewElement ) {
+				setViewAttributes( writer, viewAttributes, viewElement );
+			}
+		} );
+
+		dataFilter.on( 'register', ( evt, definition ) => {
+			if ( ![ 'ul', 'ol', 'li' ].includes( definition.view ) ) {
+				return;
+			}
+
+			evt.stop();
+
+			// Do not register same converters twice.
+			if ( schema.checkAttribute( '$block', 'htmlListAttributes' ) ) {
+				return;
+			}
+
+			schema.extend( '$block', { allowAttributes: [ 'htmlListAttributes', 'htmlLiAttributes' ] } );
+			schema.extend( '$blockObject', { allowAttributes: [ 'htmlListAttributes', 'htmlLiAttributes' ] } );
+			schema.extend( '$container', { allowAttributes: [ 'htmlListAttributes', 'htmlLiAttributes' ] } );
+
+			conversion.for( 'upcast' ).add( dispatcher => {
+				dispatcher.on( 'element:ul', viewToModelListAttributeConverter( 'htmlListAttributes', dataFilter ), { priority: 'low' } );
+				dispatcher.on( 'element:ol', viewToModelListAttributeConverter( 'htmlListAttributes', dataFilter ), { priority: 'low' } );
+				dispatcher.on( 'element:li', viewToModelListAttributeConverter( 'htmlLiAttributes', dataFilter ), { priority: 'low' } );
+			} );
+		} );
+
+		// Make sure that all items in a single list (items at the same level & listType) have the same properties.
+		// Note: This is almost exact copy from DocumentListPropertiesEditing.
+		documentListEditing.on( 'postFixer', ( evt, { listNodes, writer } ) => {
+			const previousNodesByIndent = []; // Last seen nodes of lower indented lists.
+
+			for ( const { node, previous } of listNodes ) {
+				// For the first list block there is nothing to compare with.
+				if ( !previous ) {
+					continue;
+				}
+
+				const nodeIndent = node.getAttribute( 'listIndent' );
+				const previousNodeIndent = previous.getAttribute( 'listIndent' );
+
+				let previousNodeInList = null; // It's like `previous` but has the same indent as current node.
+
+				// Let's find previous node for the same indent.
+				// We're going to need that when we get back to previous indent.
+				if ( nodeIndent > previousNodeIndent ) {
+					previousNodesByIndent[ previousNodeIndent ] = previous;
+				}
+				// Restore the one for given indent.
+				else if ( nodeIndent < previousNodeIndent ) {
+					previousNodeInList = previousNodesByIndent[ nodeIndent ];
+					previousNodesByIndent.length = nodeIndent;
+				}
+				// Same indent.
+				else {
+					previousNodeInList = previous;
+				}
+
+				// This is a first item of a nested list.
+				if ( !previousNodeInList ) {
+					continue;
+				}
+
+				if ( previousNodeInList.getAttribute( 'listType' ) == node.getAttribute( 'listType' ) ) {
+					const value = previousNodeInList.getAttribute( 'htmlListAttributes' );
+
+					if ( !isEqual( node.getAttribute( 'htmlListAttributes' ), value ) ) {
+						writer.setAttribute( 'htmlListAttributes', value, node );
+						evt.return = true;
+					}
+				}
+
+				if ( previousNodeInList.getAttribute( 'listItemId' ) == node.getAttribute( 'listItemId' ) ) {
+					const value = previousNodeInList.getAttribute( 'htmlLiAttributes' );
+
+					if ( !isEqual( node.getAttribute( 'htmlLiAttributes' ), value ) ) {
+						writer.setAttribute( 'htmlLiAttributes', value, node );
+						evt.return = true;
+					}
+				}
+			}
+		} );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const editor = this.editor;
+
+		if ( !editor.commands.get( 'indentList' ) ) {
+			return;
+		}
+
+		// Reset list attributes after indenting list items.
+		this.listenTo( editor.commands.get( 'indentList' ), 'afterExecute', ( evt, changedBlocks ) => {
+			editor.model.change( writer => {
+				for ( const node of changedBlocks ) {
+					// Just reset the attribute.
+					// If there is a previous indented list that this node should be merged into,
+					// the postfixer will unify all the attributes of both sub-lists.
+					writer.setAttribute( 'htmlListAttributes', {}, node );
+				}
+			} );
+		} );
+	}
+}
+
+// View-to-model conversion helper preserving allowed attributes on {@link TODO}
+// feature model element.
+//
+// @private
+// @param {String} attributeName
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelListAttributeConverter( attributeName, dataFilter ) {
+	return ( evt, data, conversionApi ) => {
+		const viewElement = data.viewItem;
+
+		if ( !data.modelRange ) {
+			Object.assign( data, conversionApi.convertChildren( data.viewItem, data.modelCursor ) );
+		}
+
+		const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+		for ( const item of data.modelRange.getItems( { shallow: true } ) ) {
+			// Apply only to list item blocks.
+			if ( !item.hasAttribute( 'listItemId' ) ) {
+				continue;
+			}
+
+			// Set list attributes only on same level items, those nested deeper are already handled
+			// by the recursive conversion.
+			if ( item.hasAttribute( attributeName ) ) {
+				continue;
+			}
+
+			conversionApi.writer.setAttribute( attributeName, viewAttributes || {}, item );
+		}
+	};
+}

package/src/integrations/dualcontent.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/integrations/heading.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 

package/src/integrations/image.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -10,7 +10,10 @@
 import { Plugin } from 'ckeditor5/src/core';
 
 import DataFilter from '../datafilter';
-import { setViewAttributes } from '../conversionutils.js';
+import {
+	setViewAttributes,
+	updateViewAttributes
+} from '../conversionutils.js';
 
 /**
  * Provides the General HTML Support integration with the {@link module:image/image~Image Image} feature.
@@ -84,6 +87,10 @@ export default class ImageElementSupport extends Plugin {
 function viewToModelImageAttributeConverter( dataFilter ) {
 	return dispatcher => {
 		dispatcher.on( 'element:img', ( evt, data, conversionApi ) => {
+			if ( !data.modelRange ) {
+				return;
+			}
+
 			const viewImageElement = data.viewItem;
 			const viewContainerElement = viewImageElement.parent;
 
@@ -130,7 +137,7 @@ function modelToViewImageAttributeConverter() {
 
 		addBlockAttributeConversion( 'img', 'htmlAttributes' );
 		addBlockAttributeConversion( 'figure', 'htmlFigureAttributes' );
-		addBlockImageLinkAttributeConversion();
+		addBlockAttributeConversion( 'a', 'htmlLinkAttributes' );
 
 		function addInlineAttributeConversion( attributeName ) {
 			dispatcher.on( `attribute:${ attributeName }:imageInline`, ( evt, data, conversionApi ) => {
@@ -138,38 +145,42 @@ function modelToViewImageAttributeConverter() {
 					return;
 				}
 
+				const { attributeOldValue, attributeNewValue } = data;
 				const viewElement = conversionApi.mapper.toViewElement( data.item );
 
-				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+				updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewElement );
 			}, { priority: 'low' } );
 		}
 
 		function addBlockAttributeConversion( elementName, attributeName ) {
 			dispatcher.on( `attribute:${ attributeName }:imageBlock`, ( evt, data, conversionApi ) => {
-				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+				if ( !conversionApi.consumable.test( data.item, evt.name ) ) {
 					return;
 				}
 
+				const { attributeOldValue, attributeNewValue } = data;
 				const containerElement = conversionApi.mapper.toViewElement( data.item );
 				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
 
-				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+				if ( viewElement ) {
+					updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewElement );
+					conversionApi.consumable.consume( data.item, evt.name );
+				}
 			}, { priority: 'low' } );
-		}
 
-		// To have a link element in the view, we need to attach a converter to the `linkHref` attribute.
-		// Doing this directly on `htmlLinkAttributes` will fail, as the link wrapper is not yet called at that moment.
-		function addBlockImageLinkAttributeConversion( ) {
-			dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
-				if ( !conversionApi.consumable.consume( data.item, 'attribute:htmlLinkAttributes:imageBlock' ) ) {
-					return;
-				}
+			if ( elementName === 'a' ) {
+				// To have a link element in the view, we need to attach a converter to the `linkHref` attribute as well.
+				dispatcher.on( 'attribute:linkHref:imageBlock', ( evt, data, conversionApi ) => {
+					if ( !conversionApi.consumable.consume( data.item, 'attribute:htmlLinkAttributes:imageBlock' ) ) {
+						return;
+					}
 
-				const containerElement = conversionApi.mapper.toViewElement( data.item );
-				const viewElement = getDescendantElement( conversionApi.writer, containerElement, 'a' );
+					const containerElement = conversionApi.mapper.toViewElement( data.item );
+					const viewElement = getDescendantElement( conversionApi.writer, containerElement, 'a' );
 
-				setViewAttributes( conversionApi.writer, data.item.getAttribute( 'htmlLinkAttributes' ), viewElement );
-			}, { priority: 'low' } );
+					setViewAttributes( conversionApi.writer, data.item.getAttribute( 'htmlLinkAttributes' ), viewElement );
+				}, { priority: 'low' } );
+			}
 		}
 	};
 }

package/src/integrations/mediaembed.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
@@ -9,9 +9,9 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 
-import { setViewAttributes } from '../conversionutils.js';
 import DataFilter from '../datafilter';
 import DataSchema from '../dataschema';
+import { updateViewAttributes } from '../conversionutils.js';
 
 /**
  * Provides the General HTML Support integration with {@link module:media-embed/mediaembed~MediaEmbed Media Embed} feature.
@@ -100,10 +100,11 @@ function modelToViewMediaAttributeConverter( mediaElementName ) {
 					return;
 				}
 
+				const { attributeOldValue, attributeNewValue } = data;
 				const containerElement = conversionApi.mapper.toViewElement( data.item );
 				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
 
-				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+				updateViewAttributes( conversionApi.writer, attributeOldValue, attributeNewValue, viewElement );
 			} );
 		}
 	};