@ckeditor/ckeditor5-html-support 29.2.0 → 32.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-html-support",
-  "version": "29.2.0",
+  "version": "32.0.0",
   "description": "HTML Support feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -16,44 +16,44 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^29.2.0",
+    "ckeditor5": "^32.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^29.2.0",
-    "@ckeditor/ckeditor5-basic-styles": "^29.2.0",
-    "@ckeditor/ckeditor5-block-quote": "^29.2.0",
-    "@ckeditor/ckeditor5-cloud-services": "^29.2.0",
-    "@ckeditor/ckeditor5-code-block": "^29.2.0",
-    "@ckeditor/ckeditor5-core": "^29.2.0",
-    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
-    "@ckeditor/ckeditor5-easy-image": "^29.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.2.0",
-    "@ckeditor/ckeditor5-engine": "^29.2.0",
-    "@ckeditor/ckeditor5-enter": "^29.2.0",
-    "@ckeditor/ckeditor5-essentials": "^29.2.0",
-    "@ckeditor/ckeditor5-font": "^29.2.0",
-    "@ckeditor/ckeditor5-heading": "^29.2.0",
-    "@ckeditor/ckeditor5-highlight": "^29.2.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^29.2.0",
-    "@ckeditor/ckeditor5-html-embed": "^29.2.0",
-    "@ckeditor/ckeditor5-image": "^29.2.0",
-    "@ckeditor/ckeditor5-indent": "^29.2.0",
-    "@ckeditor/ckeditor5-link": "^29.2.0",
-    "@ckeditor/ckeditor5-list": "^29.2.0",
-    "@ckeditor/ckeditor5-media-embed": "^29.2.0",
-    "@ckeditor/ckeditor5-page-break": "^29.2.0",
-    "@ckeditor/ckeditor5-paragraph": "^29.2.0",
-    "@ckeditor/ckeditor5-paste-from-office": "^29.2.0",
-    "@ckeditor/ckeditor5-source-editing": "^29.2.0",
-    "@ckeditor/ckeditor5-table": "^29.2.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.2.0",
-    "@ckeditor/ckeditor5-utils": "^29.2.0",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.11"
+    "@ckeditor/ckeditor5-alignment": "^32.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^32.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^32.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^32.0.0",
+    "@ckeditor/ckeditor5-code-block": "^32.0.0",
+    "@ckeditor/ckeditor5-core": "^32.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^27.1.0",
+    "@ckeditor/ckeditor5-easy-image": "^32.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^32.0.0",
+    "@ckeditor/ckeditor5-engine": "^32.0.0",
+    "@ckeditor/ckeditor5-enter": "^32.0.0",
+    "@ckeditor/ckeditor5-essentials": "^32.0.0",
+    "@ckeditor/ckeditor5-font": "^32.0.0",
+    "@ckeditor/ckeditor5-heading": "^32.0.0",
+    "@ckeditor/ckeditor5-highlight": "^32.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^32.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^32.0.0",
+    "@ckeditor/ckeditor5-image": "^32.0.0",
+    "@ckeditor/ckeditor5-indent": "^32.0.0",
+    "@ckeditor/ckeditor5-link": "^32.0.0",
+    "@ckeditor/ckeditor5-list": "^32.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^32.0.0",
+    "@ckeditor/ckeditor5-page-break": "^32.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^32.0.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^32.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^32.0.0",
+    "@ckeditor/ckeditor5-table": "^32.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^32.0.0",
+    "@ckeditor/ckeditor5-utils": "^32.0.0",
+    "webpack": "^5.58.1",
+    "webpack-cli": "^4.9.0"
   },
   "engines": {
-    "node": ">=12.0.0",
+    "node": ">=14.0.0",
     "npm": ">=5.7.1"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/conversionutils.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/converters.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,24 +10,6 @@
 import { toWidget } from 'ckeditor5/src/widget';
 import { setViewAttributes, mergeViewElementAttributes } from './conversionutils';
 
-/**
- * Conversion helper consuming all disallowed attributes from the definition view element.
- *
- * This converter listenes on `high` priority to ensure that all attributes are consumed
- * before standard priority converters.
- *
- * @param {module:html-support/dataschema~DataSchemaDefinition} definition
- * @param {module:html-support/datafilter~DataFilter} dataFilter
- * @returns {Function} Returns a conversion callback.
-*/
-export function disallowedAttributesConverter( { view: viewName }, dataFilter ) {
-	return dispatcher => {
-		dispatcher.on( `element:${ viewName }`, ( evt, data, conversionApi ) => {
-			dataFilter._consumeDisallowedAttributes( data.viewItem, conversionApi );
-		}, { priority: 'high' } );
-	};
-}
-
 /**
  * View-to-model conversion helper for object elements.
  *
@@ -90,8 +72,8 @@ export function toObjectWidgetConverter( editor, { view: viewName, isInline } )
 * @returns {module:engine/view/element~Element}
 */
 export function createObjectView( viewName, modelElement, writer ) {
-	return writer.createRawElement( viewName, null, function( domElement ) {
-		domElement.innerHTML = modelElement.getAttribute( 'htmlContent' );
+	return writer.createRawElement( viewName, null, ( domElement, domConverter ) => {
+		domConverter.setContentOf( domElement, modelElement.getAttribute( 'htmlContent' ) );
 	} );
 }
 

package/src/datafilter.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
  */
 
@@ -14,8 +14,6 @@ import { Matcher } from 'ckeditor5/src/engine';
 import { priorities, CKEditorError } from 'ckeditor5/src/utils';
 import { Widget } from 'ckeditor5/src/widget';
 import {
-	disallowedAttributesConverter,
-
 	viewToModelObjectConverter,
 	toObjectWidgetConverter,
 	createObjectView,
@@ -210,7 +208,7 @@ export default class DataFilter extends Plugin {
 	}
 
 	/**
-	 * Matches and consumes allowed view attributes.
+	 * Matches and consumes allowed and disallowed view attributes and returns the allowed ones.
 	 *
 	 * @protected
 	 * @param {module:engine/view/element~Element} viewElement
@@ -221,22 +219,11 @@ export default class DataFilter extends Plugin {
 	 * @returns {Array.<String>} result.classes Set with matched class names.
 	 */
 	_consumeAllowedAttributes( viewElement, conversionApi ) {
-		return consumeAttributes( viewElement, conversionApi, this._allowedAttributes );
-	}
+		// Make sure that the disabled attributes are handled before the allowed attributes are called.
+		// For example, for block images the <figure> converter triggers conversion for <img> first and then for other elements, i.e. <a>.
+		consumeAttributes( viewElement, conversionApi, this._disallowedAttributes );
 
-	/**
-	 * Matches and consumes disallowed view attributes.
-	 *
-	 * @protected
-	 * @param {module:engine/view/element~Element} viewElement
-	 * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
-	 * @returns {Object} [result]
-	 * @returns {Object} result.attributes Set with matched attribute names.
-	 * @returns {Object} result.styles Set with matched style names.
-	 * @returns {Array.<String>} result.classes Set with matched class names.
-	 */
-	_consumeDisallowedAttributes( viewElement, conversionApi ) {
-		return consumeAttributes( viewElement, conversionApi, this._disallowedAttributes );
+		return consumeAttributes( viewElement, conversionApi, this._allowedAttributes );
 	}
 
 	/**
@@ -335,7 +322,6 @@ export default class DataFilter extends Plugin {
 			name: viewName
 		} );
 
-		conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, this ) );
 		conversion.for( 'upcast' ).elementToElement( {
 			view: viewName,
 			model: viewToModelObjectConverter( definition ),
@@ -400,7 +386,6 @@ export default class DataFilter extends Plugin {
 			allowAttributes: 'htmlAttributes'
 		} );
 
-		conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, this ) );
 		conversion.for( 'upcast' ).add( viewToModelBlockAttributeConverter( definition, this ) );
 		conversion.for( 'downcast' ).add( modelToViewBlockAttributeConverter( definition ) );
 	}
@@ -427,7 +412,6 @@ export default class DataFilter extends Plugin {
 			schema.setAttributeProperties( attributeKey, definition.attributeProperties );
 		}
 
-		conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, this ) );
 		conversion.for( 'upcast' ).add( viewToAttributeInlineConverter( definition, this ) );
 
 		conversion.for( 'downcast' ).attributeToElement( {

package/src/dataschema.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,6 +10,7 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { toArray } from 'ckeditor5/src/utils';
 import defaultConfig from './schemadefinitions';
+import { mergeWith } from 'lodash-es';
 
 /**
  * Holds representation of the extended HTML document type definitions to be used by the
@@ -93,6 +94,30 @@ export default class DataSchema extends Plugin {
 		this._definitions.set( definition.model, { ...definition, isInline: true } );
 	}
 
+	/**
+	 * Updates schema definition describing block element with new properties.
+	 *
+	 * Creates new scheme if it doesn't exist.
+	 * Array properties are concatenated with original values.
+	 *
+	 * @param {module:html-support/dataschema~DataSchemaBlockElementDefinition} definition Definition update.
+	 */
+	extendBlockElement( definition ) {
+		this._extendDefinition( { ...definition, isBlock: true } );
+	}
+
+	/**
+	 * Updates schema definition describing inline element with new properties.
+	 *
+	 * Creates new scheme if it doesn't exist.
+	 * Array properties are concatenated with original values.
+	 *
+	 * @param {module:html-support/dataschema~DataSchemaInlineElementDefinition} definition Definition update.
+	 */
+	extendInlineElement( definition ) {
+		this._extendDefinition( { ...definition, isInline: true } );
+	}
+
 	/**
 	 * Returns all definitions matching the given view name.
 	 *
@@ -155,6 +180,25 @@ export default class DataSchema extends Plugin {
 			}
 		}
 	}
+
+	/**
+	 * Updates schema definition with new properties.
+	 *
+	 * Creates new scheme if it doesn't exist.
+	 * Array properties are concatenated with original values.
+	 *
+	 * @private
+	 * @param {module:html-support/dataschema~DataSchemaDefinition} definition Definition update.
+	 */
+	_extendDefinition( definition ) {
+		const currentDefinition = this._definitions.get( definition.model );
+
+		const mergedDefinition = mergeWith( {}, currentDefinition, definition, ( target, source ) => {
+			return Array.isArray( target ) ? target.concat( source ) : undefined;
+		} );
+
+		this._definitions.set( definition.model, mergedDefinition );
+	}
 }
 
 // Test view name against the given pattern.
@@ -203,7 +247,7 @@ function testViewName( pattern, viewName ) {
  *
  * @typedef {Object} module:html-support/dataschema~DataSchemaInlineElementDefinition
  * @property {module:engine/model/schema~AttributeProperties} [attributeProperties] Additional metadata describing the model attribute.
- * @property {Boolean} isInline Indicates that the definition descibes inline element.
+ * @property {Boolean} isInline Indicates that the definition describes inline element.
  * @property {Number} [priority] Element priority. Decides in what order elements are wrapped by
  * {@link module:engine/view/downcastwriter~DowncastWriter}.
  * Set by {@link module:html-support/dataschema~DataSchema#registerInlineElement} method.

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
  */
 
@@ -10,10 +10,13 @@
 import { Plugin } from 'ckeditor5/src/core';
 
 import DataFilter from './datafilter';
-import MediaEmbedElementSupport from './integrations/mediaembed';
-import TableElementSupport from './integrations/table';
 import CodeBlockElementSupport from './integrations/codeblock';
 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';
 
 /**
  * The General HTML Support feature.
@@ -37,10 +40,13 @@ export default class GeneralHtmlSupport extends Plugin {
 	static get requires() {
 		return [
 			DataFilter,
-			TableElementSupport,
 			CodeBlockElementSupport,
 			DualContentModelElementSupport,
-			MediaEmbedElementSupport
+			HeadingElementSupport,
+			ImageElementSupport,
+			MediaEmbedElementSupport,
+			ScriptElementSupport,
+			TableElementSupport
 		];
 	}
 

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,6 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { disallowedAttributesConverter } from '../converters';
 import { setViewAttributes } from '../conversionutils.js';
 
 import DataFilter from '../datafilter';
@@ -50,7 +49,6 @@ export default class CodeBlockElementSupport extends Plugin {
 				allowAttributes: [ 'htmlAttributes', 'htmlContentAttributes' ]
 			} );
 
-			conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, dataFilter ) );
 			conversion.for( 'upcast' ).add( viewToModelCodeBlockAttributeConverter( dataFilter ) );
 			conversion.for( 'downcast' ).add( modelToViewCodeBlockAttributeConverter() );
 

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
  */
 
@@ -10,7 +10,6 @@
 import { Plugin } from 'ckeditor5/src/core';
 import { priorities } from 'ckeditor5/src/utils';
 import {
-	disallowedAttributesConverter,
 	modelToViewBlockAttributeConverter,
 	viewToModelBlockAttributeConverter
 } from '../converters';
@@ -133,7 +132,6 @@ export default class DualContentModelElementSupport extends Plugin {
 			allowAttributes: 'htmlAttributes'
 		} );
 
-		conversion.for( 'upcast' ).add( disallowedAttributesConverter( definition, dataFilter ) );
 		conversion.for( 'upcast' ).add( viewToModelBlockAttributeConverter( definition, dataFilter ) );
 		conversion.for( 'downcast' ).add( modelToViewBlockAttributeConverter( definition ) );
 	}

package/src/integrations/heading.js

@@ -0,0 +1,61 @@
+/**
+ * @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/heading
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import DataSchema from '../dataschema';
+
+/**
+ * Provides the General HTML Support integration with {@link module:heading/heading~Heading Heading} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HeadingElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataSchema ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		if ( !editor.plugins.has( 'HeadingEditing' ) ) {
+			return;
+		}
+
+		const dataSchema = editor.plugins.get( DataSchema );
+		const options = editor.config.get( 'heading.options' );
+		const headerModels = [];
+
+		// We are registering all elements supported by HeadingEditing
+		// to enable custom attributes for those elements.
+		for ( const option of options ) {
+			if ( 'model' in option && 'view' in option ) {
+				dataSchema.registerBlockElement( {
+					view: option.view,
+					model: option.model
+				} );
+
+				headerModels.push( option.model );
+			}
+		}
+
+		dataSchema.extendBlockElement( {
+			model: 'htmlHgroup',
+			modelSchema: {
+				allowChildren: headerModels
+			}
+		} );
+	}
+}

package/src/integrations/image.js

@@ -0,0 +1,193 @@
+/**
+ * @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/image
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+
+import DataFilter from '../datafilter';
+import { setViewAttributes } from '../conversionutils.js';
+
+/**
+ * Provides the General HTML Support integration with the {@link module:image/image~Image Image} feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// At least one image plugin should be loaded for the integration to work properly.
+		if ( !editor.plugins.has( 'ImageInlineEditing' ) && !editor.plugins.has( 'ImageBlockEditing' ) ) {
+			return;
+		}
+
+		const schema = editor.model.schema;
+		const conversion = editor.conversion;
+		const dataFilter = editor.plugins.get( DataFilter );
+
+		dataFilter.on( 'register:img', ( evt, definition ) => {
+			if ( definition.model !== 'imageBlock' && definition.model !== 'imageInline' ) {
+				return;
+			}
+
+			if ( schema.isRegistered( 'imageBlock' ) ) {
+				schema.extend( 'imageBlock', {
+					allowAttributes: [
+						'htmlAttributes',
+						// Figure and Link don't have model counterpart.
+						// We will preserve attributes on image model element using these attribute keys.
+						'htmlFigureAttributes',
+						'htmlLinkAttributes'
+					]
+				} );
+			}
+
+			if ( schema.isRegistered( 'imageInline' ) ) {
+				schema.extend( 'imageInline', {
+					allowAttributes: [
+						// `htmlA` is needed for standard GHS link integration.
+						'htmlA',
+						'htmlAttributes'
+					]
+				} );
+			}
+
+			conversion.for( 'upcast' ).add( viewToModelImageAttributeConverter( dataFilter ) );
+			conversion.for( 'downcast' ).add( modelToViewImageAttributeConverter() );
+
+			evt.stop();
+		} );
+	}
+}
+
+// View-to-model conversion helper preserving allowed attributes on the {@link module:image/image~Image Image}
+// feature model element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelImageAttributeConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:img', ( evt, data, conversionApi ) => {
+			const viewImageElement = data.viewItem;
+			const viewContainerElement = viewImageElement.parent;
+
+			preserveElementAttributes( viewImageElement, 'htmlAttributes' );
+
+			if ( viewContainerElement.is( 'element', 'figure' ) ) {
+				preserveElementAttributes( viewContainerElement, 'htmlFigureAttributes' );
+			} else if ( viewContainerElement.is( 'element', 'a' ) ) {
+				preserveLinkAttributes( viewContainerElement );
+			}
+
+			function preserveElementAttributes( viewElement, attributeName ) {
+				const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+
+				if ( viewAttributes ) {
+					conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
+				}
+			}
+
+			// For a block image, we want to preserve the attributes on our own.
+			// The inline image attributes will be handled by the GHS automatically.
+			function preserveLinkAttributes( viewContainerElement ) {
+				if ( data.modelRange && data.modelRange.getContainedElement().is( 'element', 'imageBlock' ) ) {
+					preserveElementAttributes( viewContainerElement, 'htmlLinkAttributes' );
+				}
+
+				// If we're in a link, then the `<figure>` element should be one level higher.
+				if ( viewContainerElement.parent.is( 'element', 'figure' ) ) {
+					preserveElementAttributes( viewContainerElement.parent, 'htmlFigureAttributes' );
+				}
+			}
+		}, { priority: 'low' } );
+	};
+}
+
+// A model-to-view conversion helper applying attributes from the {@link module:image/image~Image Image}
+// feature.
+//
+// @private
+// @returns {Function} Returns a conversion callback.
+function modelToViewImageAttributeConverter() {
+	return dispatcher => {
+		addInlineAttributeConversion( 'htmlAttributes' );
+
+		addBlockAttributeConversion( 'img', 'htmlAttributes' );
+		addBlockAttributeConversion( 'figure', 'htmlFigureAttributes' );
+		addBlockImageLinkAttributeConversion();
+
+		function addInlineAttributeConversion( attributeName ) {
+			dispatcher.on( `attribute:${ attributeName }:imageInline`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const viewElement = conversionApi.mapper.toViewElement( data.item );
+
+				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+			}, { priority: 'low' } );
+		}
+
+		function addBlockAttributeConversion( elementName, attributeName ) {
+			dispatcher.on( `attribute:${ attributeName }:imageBlock`, ( evt, data, conversionApi ) => {
+				if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
+					return;
+				}
+
+				const containerElement = conversionApi.mapper.toViewElement( data.item );
+				const viewElement = getDescendantElement( conversionApi.writer, containerElement, elementName );
+
+				setViewAttributes( conversionApi.writer, data.attributeNewValue, viewElement );
+			}, { 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;
+				}
+
+				const containerElement = conversionApi.mapper.toViewElement( data.item );
+				const viewElement = getDescendantElement( conversionApi.writer, containerElement, 'a' );
+
+				setViewAttributes( conversionApi.writer, data.item.getAttribute( 'htmlLinkAttributes' ), viewElement );
+			}, { priority: 'low' } );
+		}
+	};
+}
+
+// Returns the first view element descendant matching the given view name.
+// Includes view element itself.
+//
+// @private
+// @param {module:engine/view/downcastwriter~DowncastWriter} writer
+// @param {module:engine/view/element~Element} containerElement
+// @param {String} elementName
+// @returns {module:engine/view/element~Element|null}
+function getDescendantElement( writer, containerElement, elementName ) {
+	const range = writer.createRangeOn( containerElement );
+
+	for ( const { item } of range.getWalker() ) {
+		if ( item.is( 'element', elementName ) ) {
+			return item;
+		}
+	}
+}