@ckeditor/ckeditor5-html-support 29.0.0 → 31.0.0

package/src/datafilter.js

@@ -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

@@ -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.
@@ -191,6 +235,10 @@ function testViewName( pattern, viewName ) {
  * @typedef {Object} module:html-support/dataschema~DataSchemaBlockElementDefinition
  * @property {Boolean} isBlock Indicates that the definition describes block element.
  * Set by {@link module:html-support/dataschema~DataSchema#registerBlockElement} method.
+ * @property {String} [paragraphLikeModel] Should be used when an element can behave both as a sectioning element (e.g. article) and
+ * element accepting only inline content (e.g. paragraph).
+ * If an element contains only inline content, this option will be used as a model
+ * name.
  * @extends module:html-support/dataschema~DataSchemaDefinition
  */
 
@@ -199,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

@@ -8,8 +8,14 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
+
 import DataFilter from './datafilter';
-import CodeBlockHtmlSupport from './integrations/codeblock';
+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 TableElementSupport from './integrations/table';
 
 /**
  * The General HTML Support feature.
@@ -27,24 +33,32 @@ export default class GeneralHtmlSupport extends Plugin {
 		return 'GeneralHtmlSupport';
 	}
 
-	init() {
-		const editor = this.editor;
-		const dataFilter = editor.plugins.get( DataFilter );
-
-		// Load the filtering configuration.
-		dataFilter.loadAllowedConfig( editor.config.get( 'htmlSupport.allow' ) || [] );
-		dataFilter.loadDisallowedConfig( editor.config.get( 'htmlSupport.disallow' ) || [] );
-	}
-
 	/**
 	 * @inheritDoc
 	 */
 	static get requires() {
 		return [
 			DataFilter,
-			CodeBlockHtmlSupport
+			CodeBlockElementSupport,
+			DualContentModelElementSupport,
+			HeadingElementSupport,
+			ImageElementSupport,
+			MediaEmbedElementSupport,
+			TableElementSupport
 		];
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const dataFilter = editor.plugins.get( DataFilter );
+
+		// Load the filtering configuration.
+		dataFilter.loadAllowedConfig( editor.config.get( 'htmlSupport.allow' ) || [] );
+		dataFilter.loadDisallowedConfig( editor.config.get( 'htmlSupport.disallow' ) || [] );
+	}
 }
 
 /**

package/src/htmlcomment.js

@@ -0,0 +1,250 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/htmlcomment
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { uid } from 'ckeditor5/src/utils';
+
+/**
+ * The HTML comment feature. It preserves the HTML comments (`<!-- -->`) in the editor data.
+ *
+ * For a detailed overview, check the {@glink features/general-html-support#html-comments HTML comment feature documentation}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class HtmlComment extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'HtmlComment';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Allow storing comment's content as the $root attribute with the name `$comment:<unique id>`.
+		editor.model.schema.addAttributeCheck( ( context, attributeName ) => {
+			if ( context.endsWith( '$root' ) && attributeName.startsWith( '$comment' ) ) {
+				return true;
+			}
+		} );
+
+		// Convert the `$comment` view element to `$comment:<unique id>` marker and store its content (the comment itself) as a $root
+		// attribute. The comment content is needed in the `dataDowncast` pipeline to re-create the comment node.
+		editor.conversion.for( 'upcast' ).elementToMarker( {
+			view: '$comment',
+			model: ( viewElement, { writer } ) => {
+				const root = this.editor.model.document.getRoot();
+				const commentContent = viewElement.getCustomProperty( '$rawContent' );
+				const markerName = `$comment:${ uid() }`;
+
+				writer.setAttribute( markerName, commentContent, root );
+
+				return markerName;
+			}
+		} );
+
+		// Convert the `$comment` marker to `$comment` UI element with `$rawContent` custom property containing the comment content.
+		editor.conversion.for( 'dataDowncast' ).markerToElement( {
+			model: '$comment',
+			view: ( modelElement, { writer } ) => {
+				const root = this.editor.model.document.getRoot();
+				const markerName = modelElement.markerName;
+				const commentContent = root.getAttribute( markerName );
+				const comment = writer.createUIElement( '$comment' );
+
+				writer.setCustomProperty( '$rawContent', commentContent, comment );
+
+				return comment;
+			}
+		} );
+
+		// Remove comments' markers and their corresponding $root attributes, which are no longer present.
+		editor.model.document.registerPostFixer( writer => {
+			const root = editor.model.document.getRoot();
+
+			const changedMarkers = editor.model.document.differ.getChangedMarkers();
+
+			const changedCommentMarkers = changedMarkers.filter( marker => {
+				return marker.name.startsWith( '$comment' );
+			} );
+
+			const removedCommentMarkers = changedCommentMarkers.filter( marker => {
+				const newRange = marker.data.newRange;
+
+				return newRange && newRange.root.rootName === '$graveyard';
+			} );
+
+			if ( removedCommentMarkers.length === 0 ) {
+				return false;
+			}
+
+			for ( const marker of removedCommentMarkers ) {
+				writer.removeMarker( marker.name );
+				writer.removeAttribute( marker.name, root );
+			}
+
+			return true;
+		} );
+
+		// Delete all comment markers from the document before setting new data.
+		editor.data.on( 'set', () => {
+			for ( const commentMarker of editor.model.markers.getMarkersGroup( '$comment' ) ) {
+				this.removeHtmlComment( commentMarker.name );
+			}
+		}, { priority: 'high' } );
+
+		// Delete all comment markers that are within a removed range.
+		// Delete all comment markers at the limit element boundaries if the whole content of the limit element is removed.
+		editor.model.on( 'deleteContent', ( evt, [ selection ] ) => {
+			for ( const range of selection.getRanges() ) {
+				const limitElement = editor.model.schema.getLimitElement( range );
+				const firstPosition = editor.model.createPositionAt( limitElement, 0 );
+				const lastPosition = editor.model.createPositionAt( limitElement, 'end' );
+
+				let affectedCommentIDs;
+
+				if ( firstPosition.isTouching( range.start ) && lastPosition.isTouching( range.end ) ) {
+					affectedCommentIDs = this.getHtmlCommentsInRange( editor.model.createRange( firstPosition, lastPosition ) );
+				} else {
+					affectedCommentIDs = this.getHtmlCommentsInRange( range, { skipBoundaries: true } );
+				}
+
+				for ( const commentMarkerID of affectedCommentIDs ) {
+					this.removeHtmlComment( commentMarkerID );
+				}
+			}
+		}, { priority: 'high' } );
+	}
+
+	/**
+	 * Creates an HTML comment on the specified position and returns its ID.
+	 *
+	 * *Note*: If two comments are created at the same position, the second comment will be inserted before the first one.
+	 *
+	 * @param {module:engine/model/position~Position} position
+	 * @param {String} content
+	 * @returns {String} Comment ID. This ID can be later used to e.g. remove the comment from the content.
+	 */
+	createHtmlComment( position, content ) {
+		const id = uid();
+		const editor = this.editor;
+		const model = editor.model;
+		const root = model.document.getRoot();
+		const markerName = `$comment:${ id }`;
+
+		return model.change( writer => {
+			const range = writer.createRange( position );
+
+			writer.addMarker( markerName, {
+				usingOperation: true,
+				affectsData: true,
+				range
+			} );
+
+			writer.setAttribute( markerName, content, root );
+
+			return markerName;
+		} );
+	}
+
+	/**
+	 * Removes an HTML comment with the given comment ID.
+	 *
+	 * It does nothing and returns `false` if the comment with the given ID does not exist.
+	 * Otherwise it removes the comment and returns `true`.
+	 *
+	 * Note that a comment can be removed also by removing the content around the comment.
+	 *
+	 * @param {String} commentID The ID of the comment to be removed.
+	 * @returns {Boolean} `true` when the comment with the given ID was removed, `false` otherwise.
+	 */
+	removeHtmlComment( commentID ) {
+		const editor = this.editor;
+		const root = editor.model.document.getRoot();
+
+		const marker = editor.model.markers.get( commentID );
+
+		if ( !marker ) {
+			return false;
+		}
+
+		editor.model.change( writer => {
+			writer.removeMarker( marker );
+			writer.removeAttribute( commentID, root );
+		} );
+
+		return true;
+	}
+
+	/**
+	 * Gets the HTML comment data for the comment with a given ID.
+	 *
+	 * Returns `null` if the comment does not exist.
+	 *
+	 * @param {String} commentID
+	 * @returns {module:html-support/htmlcomment~HtmlCommentData}
+	 */
+	getHtmlCommentData( commentID ) {
+		const editor = this.editor;
+		const marker = editor.model.markers.get( commentID );
+		const root = editor.model.document.getRoot();
+
+		if ( !marker ) {
+			return null;
+		}
+
+		return {
+			content: root.getAttribute( commentID ),
+			position: marker.getStart()
+		};
+	}
+
+	/**
+	 * Gets all HTML comments in the given range.
+	 *
+	 * By default it includes comments at the range boundaries.
+	 *
+	 * @param {module:engine/model/range~Range} range
+	 * @param {Object} [options]
+	 * @param {Boolean} [options.skipBoundaries=false] When set to `true` the range boundaries will be skipped.
+	 * @returns {Array.<String>} HTML comment IDs
+	 */
+	getHtmlCommentsInRange( range, { skipBoundaries = false } = {} ) {
+		const includeBoundaries = !skipBoundaries;
+
+		// Unfortunately, MarkerCollection#getMarkersAtPosition() filters out collapsed markers.
+		return Array.from( this.editor.model.markers.getMarkersGroup( '$comment' ) )
+			.filter( marker => isCommentMarkerInRange( marker, range ) )
+			.map( marker => marker.name );
+
+		function isCommentMarkerInRange( commentMarker, range ) {
+			const position = commentMarker.getRange().start;
+
+			return (
+				( position.isAfter( range.start ) || ( includeBoundaries && position.isEqual( range.start ) ) ) &&
+				( position.isBefore( range.end ) || ( includeBoundaries && position.isEqual( range.end ) ) )
+			);
+		}
+	}
+}
+
+/**
+ * An interface for the HTML comments data.
+ *
+ * It consists of the {@link module:engine/model/position~Position `position`} and `content`.
+ *
+ * @typedef {Object} module:html-support/htmlcomment~HtmlCommentData
+ *
+ * @property {module:engine/model/position~Position} position
+ * @property {String} content
+ */

package/src/index.js

@@ -10,3 +10,4 @@
 export { default as GeneralHtmlSupport } from './generalhtmlsupport';
 export { default as DataFilter } from './datafilter';
 export { default as DataSchema } from './dataschema';
+export { default as HtmlComment } from './htmlcomment';

package/src/integrations/codeblock.js

@@ -8,7 +8,6 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { disallowedAttributesConverter } from '../converters';
 import { setViewAttributes } from '../conversionutils.js';
 
 import DataFilter from '../datafilter';
@@ -18,11 +17,17 @@ import DataFilter from '../datafilter';
  *
  * @extends module:core/plugin~Plugin
  */
-export default class CodeBlockHtmlSupport extends Plugin {
+export default class CodeBlockElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
 	static get requires() {
 		return [ DataFilter ];
 	}
 
+	/**
+	 * @inheritDoc
+	 */
 	init() {
 		if ( !this.editor.plugins.has( 'CodeBlockEditing' ) ) {
 			return;
@@ -44,7 +49,6 @@ export default class CodeBlockHtmlSupport 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

@@ -0,0 +1,138 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module html-support/integrations/dualcontent
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { priorities } from 'ckeditor5/src/utils';
+import {
+	modelToViewBlockAttributeConverter,
+	viewToModelBlockAttributeConverter
+} from '../converters';
+
+import DataFilter from '../datafilter';
+
+/**
+ * Provides the General HTML Support integration for elements which can behave like sectioning element (e.g. article) or
+ * element accepting only inline content (e.g. paragraph).
+ *
+ * The distinction between this two content models is important for choosing correct schema model and proper content conversion.
+ * As an example, it ensures that:
+ *
+ * * children elements paragraphing is enabled for sectioning elements only,
+ * * element and its content can be correctly handled by editing view (splitting and merging elements),
+ * * model element HTML is semantically correct and easier to work with.
+ *
+ * If element contains any block element, it will be treated as a sectioning element and registered using
+ * {@link module:html-support/dataschema~DataSchemaDefinition#model} and
+ * {@link module:html-support/dataschema~DataSchemaDefinition#modelSchema} in editor schema.
+ * Otherwise, it will be registered under {@link module:html-support/dataschema~DataSchemaBlockElementDefinition#paragraphLikeModel} model
+ * name with model schema accepting only inline content (inheriting from `$block`).
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class DualContentModelElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const dataFilter = this.editor.plugins.get( DataFilter );
+
+		dataFilter.on( 'register', ( evt, definition ) => {
+			const editor = this.editor;
+			const schema = editor.model.schema;
+			const conversion = editor.conversion;
+
+			if ( !definition.paragraphLikeModel ) {
+				return;
+			}
+
+			// Can only apply to newly registered features.
+			if ( schema.isRegistered( definition.model ) || schema.isRegistered( definition.paragraphLikeModel ) ) {
+				return;
+			}
+
+			const paragraphLikeModelDefinition = {
+				model: definition.paragraphLikeModel,
+				view: definition.view
+			};
+
+			schema.register( definition.model, definition.modelSchema );
+			schema.register( paragraphLikeModelDefinition.model, {
+				inheritAllFrom: '$block'
+			} );
+
+			conversion.for( 'upcast' ).elementToElement( {
+				view: definition.view,
+				model: ( viewElement, { writer } ) => {
+					if ( this._hasBlockContent( viewElement ) ) {
+						return writer.createElement( definition.model );
+					}
+
+					return writer.createElement( paragraphLikeModelDefinition.model );
+				},
+				// With a `low` priority, `paragraph` plugin auto-paragraphing mechanism is executed. Make sure
+				// this listener is called before it. If not, some elements will be transformed into a paragraph.
+				converterPriority: priorities.get( 'low' ) + 1
+			} );
+
+			conversion.for( 'downcast' ).elementToElement( {
+				view: definition.view,
+				model: definition.model
+			} );
+			this._addAttributeConversion( definition );
+
+			conversion.for( 'downcast' ).elementToElement( {
+				view: paragraphLikeModelDefinition.view,
+				model: paragraphLikeModelDefinition.model
+			} );
+			this._addAttributeConversion( paragraphLikeModelDefinition );
+
+			evt.stop();
+		} );
+	}
+
+	/**
+	 * Checks whether the given view element includes any other block element.
+	 *
+	 * @private
+	 * @param {module:engine/view/element~Element} viewElement
+	 * @returns {Boolean}
+	 */
+	_hasBlockContent( viewElement ) {
+		const blockElements = this.editor.editing.view.domConverter.blockElements;
+
+		return Array.from( viewElement.getChildren() )
+			.some( node => blockElements.includes( node.name ) );
+	}
+
+	/**
+	 * Adds attribute filtering conversion for the given data schema.
+	 *
+	 * @private
+	 * @param {module:html-support/dataschema~DataSchemaBlockElementDefinition} definition
+	 */
+	_addAttributeConversion( definition ) {
+		const editor = this.editor;
+		const conversion = editor.conversion;
+		const dataFilter = editor.plugins.get( DataFilter );
+
+		editor.model.schema.extend( definition.model, {
+			allowAttributes: 'htmlAttributes'
+		} );
+
+		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-2021, CKSource - Frederico Knabben. 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
+			}
+		} );
+	}
+}