@ckeditor/ckeditor5-html-support 33.0.0 → 34.0.0

package/build/translations/en-au.js

@@ -0,0 +1 @@
+!function(n){const i=n["en-au"]=n["en-au"]||{};i.dictionary=Object.assign(i.dictionary||{},{"HTML object":"HTML object"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/build/translations/hr.js

@@ -0,0 +1 @@
+!function(i){const n=i.hr=i.hr||{};n.dictionary=Object.assign(n.dictionary||{},{"HTML object":"HTML objekt"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/build/translations/jv.js

@@ -0,0 +1 @@
+!function(i){const n=i.jv=i.jv||{};n.dictionary=Object.assign(n.dictionary||{},{"HTML object":"Obyek HTML"})}(window.CKEDITOR_TRANSLATIONS||(window.CKEDITOR_TRANSLATIONS={}));

package/lang/translations/en-au.po

@@ -0,0 +1,21 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: English (Australia) (https://www.transifex.com/ckeditor/teams/11143/en_AU/)\n"
+"Language: en_AU\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+msgctxt "A label describing an HTML object widget."
+msgid "HTML object"
+msgstr "HTML object"

package/lang/translations/hr.po

@@ -0,0 +1,21 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Croatian (https://www.transifex.com/ckeditor/teams/11143/hr/)\n"
+"Language: hr\n"
+"Plural-Forms: nplurals=3; plural=n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2;\n"
+
+msgctxt "A label describing an HTML object widget."
+msgid "HTML object"
+msgstr "HTML objekt"

package/lang/translations/jv.po

@@ -0,0 +1,21 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Javanese (https://www.transifex.com/ckeditor/teams/11143/jv/)\n"
+"Language: jv\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+
+msgctxt "A label describing an HTML object widget."
+msgid "HTML object"
+msgstr "Obyek HTML"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-html-support",
-  "version": "33.0.0",
+  "version": "34.0.0",
   "description": "HTML Support feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -16,39 +16,39 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^33.0.0",
+    "ckeditor5": "^34.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^33.0.0",
-    "@ckeditor/ckeditor5-basic-styles": "^33.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^33.0.0",
-    "@ckeditor/ckeditor5-cloud-services": "^33.0.0",
-    "@ckeditor/ckeditor5-code-block": "^33.0.0",
-    "@ckeditor/ckeditor5-core": "^33.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^28.0.1",
-    "@ckeditor/ckeditor5-easy-image": "^33.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^33.0.0",
-    "@ckeditor/ckeditor5-engine": "^33.0.0",
-    "@ckeditor/ckeditor5-enter": "^33.0.0",
-    "@ckeditor/ckeditor5-essentials": "^33.0.0",
-    "@ckeditor/ckeditor5-font": "^33.0.0",
-    "@ckeditor/ckeditor5-heading": "^33.0.0",
-    "@ckeditor/ckeditor5-highlight": "^33.0.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^33.0.0",
-    "@ckeditor/ckeditor5-html-embed": "^33.0.0",
-    "@ckeditor/ckeditor5-image": "^33.0.0",
-    "@ckeditor/ckeditor5-indent": "^33.0.0",
-    "@ckeditor/ckeditor5-link": "^33.0.0",
-    "@ckeditor/ckeditor5-list": "^33.0.0",
-    "@ckeditor/ckeditor5-media-embed": "^33.0.0",
-    "@ckeditor/ckeditor5-page-break": "^33.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^33.0.0",
-    "@ckeditor/ckeditor5-paste-from-office": "^33.0.0",
-    "@ckeditor/ckeditor5-source-editing": "^33.0.0",
-    "@ckeditor/ckeditor5-table": "^33.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^33.0.0",
-    "@ckeditor/ckeditor5-utils": "^33.0.0",
+    "@ckeditor/ckeditor5-alignment": "^34.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^34.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^34.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^34.0.0",
+    "@ckeditor/ckeditor5-code-block": "^34.0.0",
+    "@ckeditor/ckeditor5-core": "^34.0.0",
+    "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
+    "@ckeditor/ckeditor5-easy-image": "^34.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^34.0.0",
+    "@ckeditor/ckeditor5-engine": "^34.0.0",
+    "@ckeditor/ckeditor5-enter": "^34.0.0",
+    "@ckeditor/ckeditor5-essentials": "^34.0.0",
+    "@ckeditor/ckeditor5-font": "^34.0.0",
+    "@ckeditor/ckeditor5-heading": "^34.0.0",
+    "@ckeditor/ckeditor5-highlight": "^34.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^34.0.0",
+    "@ckeditor/ckeditor5-html-embed": "^34.0.0",
+    "@ckeditor/ckeditor5-image": "^34.0.0",
+    "@ckeditor/ckeditor5-indent": "^34.0.0",
+    "@ckeditor/ckeditor5-link": "^34.0.0",
+    "@ckeditor/ckeditor5-list": "^34.0.0",
+    "@ckeditor/ckeditor5-media-embed": "^34.0.0",
+    "@ckeditor/ckeditor5-page-break": "^34.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^34.0.0",
+    "@ckeditor/ckeditor5-paste-from-office": "^34.0.0",
+    "@ckeditor/ckeditor5-source-editing": "^34.0.0",
+    "@ckeditor/ckeditor5-table": "^34.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^34.0.0",
+    "@ckeditor/ckeditor5-utils": "^34.0.0",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },

package/src/conversionutils.js

@@ -10,12 +10,30 @@
 import { cloneDeep } from 'lodash-es';
 
 /**
-* Helper function for downcast converter. Sets attributes on the given view element.
+* Helper function for the downcast converter. Updates attributes on the given view element.
 *
-* @param {module:engine/view/downcastwriter~DowncastWriter} writer
-* @param {Object} viewAttributes
-* @param {module:engine/view/element~Element} viewElement
+* @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer.
+* @param {Object} oldViewAttributes The previous GHS attribute value.
+* @param {Object} newViewAttributes The current GHS attribute value.
+* @param {module:engine/view/element~Element} viewElement The view element to update.
 */
+export function updateViewAttributes( writer, oldViewAttributes, newViewAttributes, viewElement ) {
+	if ( oldViewAttributes ) {
+		removeViewAttributes( writer, oldViewAttributes, viewElement );
+	}
+
+	if ( newViewAttributes ) {
+		setViewAttributes( writer, newViewAttributes, viewElement );
+	}
+}
+
+/**
+ * Helper function for the downcast converter. Sets attributes on the given view element.
+ *
+ * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer.
+ * @param {Object} viewAttributes The GHS attribute value.
+ * @param {module:engine/view/element~Element} viewElement The view element to update.
+ */
 export function setViewAttributes( writer, viewAttributes, viewElement ) {
 	if ( viewAttributes.attributes ) {
 		for ( const [ key, value ] of Object.entries( viewAttributes.attributes ) ) {
@@ -32,6 +50,31 @@ export function setViewAttributes( writer, viewAttributes, viewElement ) {
 	}
 }
 
+/**
+ * Helper function for the downcast converter. Removes attributes on the given view element.
+ *
+ * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer.
+ * @param {Object} viewAttributes The GHS attribute value.
+ * @param {module:engine/view/element~Element} viewElement The view element to update.
+ */
+export function removeViewAttributes( writer, viewAttributes, viewElement ) {
+	if ( viewAttributes.attributes ) {
+		for ( const [ key ] of Object.entries( viewAttributes.attributes ) ) {
+			writer.removeAttribute( key, viewElement );
+		}
+	}
+
+	if ( viewAttributes.styles ) {
+		for ( const style of Object.keys( viewAttributes.styles ) ) {
+			writer.removeStyle( style, viewElement );
+		}
+	}
+
+	if ( viewAttributes.classes ) {
+		writer.removeClass( viewAttributes.classes, viewElement );
+	}
+}
+
 /**
 * Merges view element attribute objects.
 *
@@ -45,7 +88,7 @@ export function mergeViewElementAttributes( target, source ) {
 	for ( const key in source ) {
 		// Merge classes.
 		if ( Array.isArray( source[ key ] ) ) {
-			result[ key ] = Array.from( new Set( [ ...target[ key ], ...source[ key ] ] ) );
+			result[ key ] = Array.from( new Set( [ ...( target[ key ] || [] ), ...source[ key ] ] ) );
 		}
 
 		// Merge attributes or styles.

package/src/converters.js

@@ -8,7 +8,11 @@
  */
 
 import { toWidget } from 'ckeditor5/src/widget';
-import { setViewAttributes, mergeViewElementAttributes } from './conversionutils';
+import {
+	setViewAttributes,
+	mergeViewElementAttributes,
+	updateViewAttributes
+} from './conversionutils';
 
 /**
  * View-to-model conversion helper for object elements.
@@ -28,7 +32,7 @@ export function viewToModelObjectConverter( { model: modelName } ) {
 }
 
 /**
- * Conversion helper converting object element to HTML object widget.
+ * Conversion helper converting an object element to an HTML object widget.
  *
  * @param {module:core/editor/editor~Editor} editor
  * @param {module:html-support/dataschema~DataSchemaInlineElementDefinition} definition
@@ -37,14 +41,15 @@ export function viewToModelObjectConverter( { model: modelName } ) {
 export function toObjectWidgetConverter( editor, { view: viewName, isInline } ) {
 	const t = editor.t;
 
-	return ( modelElement, { writer, consumable } ) => {
+	return ( modelElement, { writer } ) => {
 		const widgetLabel = t( 'HTML object' );
 
 		const viewElement = createObjectView( viewName, modelElement, writer );
+		const viewAttributes = modelElement.getAttribute( 'htmlAttributes' );
+
 		writer.addClass( 'html-object-embed__content', viewElement );
 
-		const viewAttributes = modelElement.getAttribute( 'htmlAttributes' );
-		if ( viewAttributes && consumable.consume( modelElement, `attribute:htmlAttributes:${ modelElement.name }` ) ) {
+		if ( viewAttributes ) {
 			setViewAttributes( writer, viewAttributes, viewElement );
 		}
 
@@ -55,10 +60,7 @@ export function toObjectWidgetConverter( editor, { view: viewName, isInline } )
 				class: 'html-object-embed',
 				'data-html-object-embed-label': widgetLabel
 			},
-			viewElement,
-			{
-				isAllowedInsideAttributeElement: isInline
-			}
+			viewElement
 		);
 
 		return toWidget( viewContainer, writer, { widgetLabel } );
@@ -91,6 +93,11 @@ export function viewToAttributeInlineConverter( { view: viewName, model: attribu
 		dispatcher.on( `element:${ viewName }`, ( evt, data, conversionApi ) => {
 			const viewAttributes = dataFilter._consumeAllowedAttributes( data.viewItem, conversionApi );
 
+			// Do not apply the attribute if the element itself is already consumed and there is no view attributes to store.
+			if ( !viewAttributes && !conversionApi.consumable.test( data.viewItem, { name: true } ) ) {
+				return;
+			}
+
 			// Since we are converting to attribute we need a range on which we will set the attribute.
 			// If the range is not created yet, we will create it.
 			if ( !data.modelRange ) {
@@ -168,16 +175,15 @@ export function viewToModelBlockAttributeConverter( { view: viewName }, dataFilt
 export function modelToViewBlockAttributeConverter( { model: modelName } ) {
 	return dispatcher => {
 		dispatcher.on( `attribute:htmlAttributes:${ modelName }`, ( evt, data, conversionApi ) => {
-			const viewAttributes = data.attributeNewValue;
-
 			if ( !conversionApi.consumable.consume( data.item, evt.name ) ) {
 				return;
 			}
 
+			const { attributeOldValue, attributeNewValue } = data;
 			const viewWriter = conversionApi.writer;
 			const viewElement = conversionApi.mapper.toViewElement( data.item );
 
-			setViewAttributes( viewWriter, viewAttributes, viewElement );
+			updateViewAttributes( viewWriter, attributeOldValue, attributeNewValue, viewElement );
 		} );
 	};
 }

package/src/datafilter.js

@@ -312,6 +312,7 @@ export default class DataFilter extends Plugin {
 
 		schema.register( modelName, definition.modelSchema );
 
+		/* istanbul ignore next: paranoid check */
 		if ( !viewName ) {
 			return;
 		}
@@ -336,7 +337,12 @@ export default class DataFilter extends Plugin {
 		conversion.for( 'upcast' ).add( viewToModelBlockAttributeConverter( definition, this ) );
 
 		conversion.for( 'editingDowncast' ).elementToStructure( {
-			model: modelName,
+			model: {
+				name: modelName,
+				attributes: [
+					'htmlAttributes'
+				]
+			},
 			view: toObjectWidgetConverter( editor, definition )
 		} );
 

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,7 @@ 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.
@@ -48,7 +50,8 @@ export default class GeneralHtmlSupport extends Plugin {
 			MediaEmbedElementSupport,
 			ScriptElementSupport,
 			TableElementSupport,
-			StyleElementSupport
+			StyleElementSupport,
+			DocumentListElementSupport
 		];
 	}
 
@@ -63,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/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';
 
@@ -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 );
 		} );
 	};
 }