@ckeditor/ckeditor5-html-support 33.0.0 → 34.2.0

package/src/generalhtmlsupport.js

@@ -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';
@@ -18,6 +19,8 @@ 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';
+import CustomElementSupport from './integrations/customelement';
 
 /**
  * The General HTML Support feature.
@@ -48,7 +51,9 @@ export default class GeneralHtmlSupport extends Plugin {
 			MediaEmbedElementSupport,
 			ScriptElementSupport,
 			TableElementSupport,
-			StyleElementSupport
+			StyleElementSupport,
+			DocumentListElementSupport,
+			CustomElementSupport
 		];
 	}
 
@@ -63,6 +68,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 the 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 the 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 the 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 the 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/integrations/codeblock.js

@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
-import { setViewAttributes } from '../conversionutils.js';
+import { updateViewAttributes } from '../conversionutils.js';
 
 import DataFilter from '../datafilter';
 
@@ -25,6 +25,13 @@ export default class CodeBlockElementSupport extends Plugin {
 		return [ DataFilter ];
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'CodeBlockElementSupport';
+	}
+
 	/**
 	 * @inheritDoc
 	 */
@@ -79,7 +86,7 @@ function viewToModelCodeBlockAttributeConverter( dataFilter ) {
 			preserveElementAttributes( viewCodeElement, 'htmlContentAttributes' );
 
 			function preserveElementAttributes( viewElement, attributeName ) {
-				const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+				const viewAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
 
 				if ( viewAttributes ) {
 					conversionApi.writer.setAttribute( attributeName, viewAttributes, data.modelRange );
@@ -101,10 +108,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 +120,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/customelement.js

@@ -0,0 +1,162 @@
+/**
+ * @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/customelement
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import { UpcastWriter } from 'ckeditor5/src/engine';
+
+import DataSchema from '../dataschema';
+import DataFilter from '../datafilter';
+import { setViewAttributes } from '../conversionutils';
+
+/**
+ * Provides the General HTML Support for custom elements (not registered in the {@link module:html-support/dataschema~DataSchema}).
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class CustomElementSupport extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ DataFilter, DataSchema ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'CustomElementSupport';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const dataFilter = this.editor.plugins.get( DataFilter );
+		const dataSchema = this.editor.plugins.get( DataSchema );
+
+		dataFilter.on( 'register:$customElement', ( evt, definition ) => {
+			evt.stop();
+
+			const editor = this.editor;
+			const schema = editor.model.schema;
+			const conversion = editor.conversion;
+			const unsafeElements = editor.editing.view.domConverter.unsafeElements;
+			const preLikeElements = editor.data.htmlProcessor.domConverter.preElements;
+
+			schema.register( definition.model, definition.modelSchema );
+			schema.extend( definition.model, {
+				allowAttributes: [ 'htmlElementName', 'htmlAttributes', 'htmlContent' ],
+				isContent: true
+			} );
+
+			// Being executed on the low priority, it will catch all elements that were not caught by other converters.
+			conversion.for( 'upcast' ).elementToElement( {
+				view: /.*/,
+				model: ( viewElement, conversionApi ) => {
+					// Do not try to convert $comment fake element.
+					if ( viewElement.name == '$comment' ) {
+						return;
+					}
+
+					// Allow for fallback only if this element is not defined in data schema to make sure
+					// that this will handle only custom elements not registered in the data schema.
+					if ( dataSchema.getDefinitionsForView( viewElement.name ).size ) {
+						return;
+					}
+
+					// Make sure that this element will not render in the editing view.
+					if ( !unsafeElements.includes( viewElement.name ) ) {
+						unsafeElements.push( viewElement.name );
+					}
+
+					// Make sure that whitespaces will not be trimmed or replaced by nbsps while stringify content.
+					if ( !preLikeElements.includes( viewElement.name ) ) {
+						preLikeElements.push( viewElement.name );
+					}
+
+					const modelElement = conversionApi.writer.createElement( definition.model, {
+						htmlElementName: viewElement.name
+					} );
+
+					const htmlAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
+
+					if ( htmlAttributes ) {
+						conversionApi.writer.setAttribute( 'htmlAttributes', htmlAttributes, modelElement );
+					}
+
+					// Store the whole element in the attribute so that DomConverter will be able to use the pre like element context.
+					const viewWriter = new UpcastWriter( viewElement.document );
+					const documentFragment = viewWriter.createDocumentFragment( viewElement );
+					const htmlContent = editor.data.processor.toData( documentFragment );
+
+					conversionApi.writer.setAttribute( 'htmlContent', htmlContent, modelElement );
+
+					// Consume the content of the element.
+					for ( const { item } of editor.editing.view.createRangeIn( viewElement ) ) {
+						conversionApi.consumable.consume( item, { name: true } );
+					}
+
+					return modelElement;
+				},
+				converterPriority: 'low'
+			} );
+
+			// Because this element is unsafe (DomConverter#unsafeElements), it will render as a transparent <span> but it must
+			// be rendered anyway for the mapping between the model and the view to exist.
+			conversion.for( 'editingDowncast' ).elementToElement( {
+				model: {
+					name: definition.model,
+					attributes: [ 'htmlElementName', 'htmlAttributes', 'htmlContent' ]
+				},
+				view: ( modelElement, { writer } ) => {
+					const viewName = modelElement.getAttribute( 'htmlElementName' );
+					const viewElement = writer.createRawElement( viewName );
+
+					if ( modelElement.hasAttribute( 'htmlAttributes' ) ) {
+						setViewAttributes( writer, modelElement.getAttribute( 'htmlAttributes' ), viewElement );
+					}
+
+					return viewElement;
+				}
+			} );
+
+			conversion.for( 'dataDowncast' ).elementToElement( {
+				model: {
+					name: definition.model,
+					attributes: [ 'htmlElementName', 'htmlAttributes', 'htmlContent' ]
+				},
+				view: ( modelElement, { writer } ) => {
+					const viewName = modelElement.getAttribute( 'htmlElementName' );
+					const htmlContent = modelElement.getAttribute( 'htmlContent' );
+
+					const viewElement = writer.createRawElement( viewName, null, ( domElement, domConverter ) => {
+						domConverter.setContentOf( domElement, htmlContent );
+
+						// Unwrap the custom element content (it was stored in the attribute as the whole custom element).
+						// See the upcast conversion for the "htmlContent" attribute to learn more.
+						const customElement = domElement.firstChild;
+
+						customElement.remove();
+
+						while ( customElement.firstChild ) {
+							domElement.appendChild( customElement.firstChild );
+						}
+					} );
+
+					if ( modelElement.hasAttribute( 'htmlAttributes' ) ) {
+						setViewAttributes( writer, modelElement.getAttribute( 'htmlAttributes' ), viewElement );
+					}
+
+					return viewElement;
+				}
+			} );
+		} );
+	}
+}

package/src/integrations/documentlist.js

@@ -0,0 +1,207 @@
+/**
+ * @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 the {@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
+	 */
+	static get pluginName() {
+		return 'DocumentListElementSupport';
+	}
+
+	/**
+	 * @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 an 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.processViewAttributes( 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 );
+		}
+	};
+}