@ckeditor/ckeditor5-html-support 34.0.0 → 34.1.0

package/src/datafilter.js

@@ -53,6 +53,9 @@ import '../theme/datafilter.css';
  *			}
  *		} );
  *
+ * To apply the information about allowed and disallowed attributes in custom integration plugin,
+ * use the {@link module:html-support/datafilter~DataFilter#processViewAttributes `processViewAttributes()`} method.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class DataFilter extends Plugin {
@@ -106,8 +109,18 @@ export default class DataFilter extends Plugin {
 		*/
 		this._dataInitialized = false;
 
+		/**
+		 * Cached map of coupled attributes. Keys are the feature attributes names
+		 * and values are arrays with coupled GHS attributes names.
+		 *
+		 * @private
+		 * @member {Map.<String,Array>}
+		 */
+		this._coupledAttributes = null;
+
 		this._registerElementsAfterInit();
 		this._registerElementHandlers();
+		this._registerModelPostFixer();
 	}
 
 	/**
@@ -167,6 +180,9 @@ export default class DataFilter extends Plugin {
 			if ( this._dataInitialized ) {
 				this._fireRegisterEvent( definition );
 			}
+
+			// Reset cached map to recalculate it on the next usage.
+			this._coupledAttributes = null;
 		}
 	}
 
@@ -208,17 +224,30 @@ export default class DataFilter extends Plugin {
 	}
 
 	/**
-	 * Matches and consumes allowed and disallowed view attributes and returns the allowed ones.
+	 * Processes all allowed and disallowed attributes on the view element by consuming them and returning the allowed ones.
+	 *
+	 * This method applies the configuration set up by {@link #allowAttributes `allowAttributes()`}
+	 * and {@link #disallowAttributes `disallowAttributes()`} over the given view element by consuming relevant attributes.
+	 * It returns the allowed attributes that were found on the given view element for further processing by integration code.
+	 *
+	 *		dispatcher.on( 'element:myElement', ( evt, data, conversionApi ) => {
+	 *			// Get rid of disallowed and extract all allowed attributes from a viewElement.
+	 *			const viewAttributes = dataFilter.processViewAttributes( data.viewItem, conversionApi );
+	 *			// Do something with them, i.e. store inside a model as a dictionary.
+	 *			if ( viewAttributes ) {
+	 *				conversionApi.writer.setAttribute( 'htmlAttributesOfMyElement', viewAttributes, data.modelRange );
+	 *			}
+	 *		} );
 	 *
-	 * @protected
+	 * @see module:engine/conversion/viewconsumable~ViewConsumable#consume
 	 * @param {module:engine/view/element~Element} viewElement
-	 * @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
+	 * @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} 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.
 	 */
-	_consumeAllowedAttributes( viewElement, conversionApi ) {
+	processViewAttributes( viewElement, conversionApi ) {
 		// 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 );
@@ -288,6 +317,91 @@ export default class DataFilter extends Plugin {
 		}, { priority: 'lowest' } );
 	}
 
+	/**
+	 * Registers a model post-fixer that is removing coupled GHS attributes of inline elements. Those attributes
+	 * are removed if a coupled feature attribute is removed.
+	 *
+	 * For example, consider following HTML:
+	 *
+	 *		<a href="foo.html" id="myId">bar</a>
+	 *
+	 * Which would be upcasted to following text node in the model:
+	 *
+	 *		<$text linkHref="foo.html" htmlA="{ attributes: { id: 'myId' } }">bar</$text>
+	 *
+	 * When the user removes the link from that text (using UI), only `linkHref` attribute would be removed:
+	 *
+	 *		<$text htmlA="{ attributes: { id: 'myId' } }">bar</$text>
+	 *
+	 * The `htmlA` attribute would stay in the model and would cause GHS to generate an `<a>` element.
+	 * This is incorrect from UX point of view, as the user wanted to remove the whole link (not only `href`).
+	 *
+	 * @private
+	 */
+	_registerModelPostFixer() {
+		const model = this.editor.model;
+
+		model.document.registerPostFixer( writer => {
+			const changes = model.document.differ.getChanges();
+			let changed = false;
+
+			const coupledAttributes = this._getCoupledAttributesMap();
+
+			for ( const change of changes ) {
+				// Handle only attribute removals.
+				if ( change.type != 'attribute' || change.attributeNewValue !== null ) {
+					continue;
+				}
+
+				// Find a list of coupled GHS attributes.
+				const attributeKeys = coupledAttributes.get( change.attributeKey );
+
+				if ( !attributeKeys ) {
+					continue;
+				}
+
+				// Remove the coupled GHS attributes on the same range as the feature attribute was removed.
+				for ( const { item } of change.range.getWalker( { shallow: true } ) ) {
+					for ( const attributeKey of attributeKeys ) {
+						if ( item.hasAttribute( attributeKey ) ) {
+							writer.removeAttribute( attributeKey, item );
+							changed = true;
+						}
+					}
+				}
+			}
+
+			return changed;
+		} );
+	}
+
+	/**
+	 * Collects the map of coupled attributes. The returned map is keyed by the feature attribute name
+	 * and coupled GHS attribute names are stored in the value array .
+	 *
+	 * @private
+	 * @returns {Map.<String,Array>}
+	 */
+	_getCoupledAttributesMap() {
+		if ( this._coupledAttributes ) {
+			return this._coupledAttributes;
+		}
+
+		this._coupledAttributes = new Map();
+
+		for ( const definition of this._allowedElements ) {
+			if ( definition.coupledAttribute && definition.model ) {
+				const attributeNames = this._coupledAttributes.get( definition.coupledAttribute );
+
+				if ( attributeNames ) {
+					attributeNames.push( definition.model );
+				} else {
+					this._coupledAttributes.set( definition.coupledAttribute, [ definition.model ] );
+				}
+			}
+		}
+	}
+
 	/**
 	 * Fires `register` event for the given element definition.
 	 *
@@ -462,7 +576,7 @@ export default class DataFilter extends Plugin {
 //
 // @private
 // @param {module:engine/view/element~Element} viewElement
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
+// @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} conversionApi
 // @param {module:engine/view/matcher~Matcher Matcher} matcher
 // @returns {Object} [result]
 // @returns {Object} result.attributes
@@ -496,7 +610,7 @@ function consumeAttributes( viewElement, conversionApi, matcher ) {
 //
 // @private
 // @param {module:engine/view/element~Element} viewElement
-// @param {module:engine/conversion/downcastdispatcher~DowncastConversionApi} conversionApi
+// @param {module:engine/conversion/upcastdispatcher~UpcastConversionApi} conversionApi
 // @param {module:engine/view/matcher~Matcher Matcher} matcher
 // @returns {Array.<Object>} Array with match information about found attributes.
 function consumeAttributeMatches( viewElement, { consumable }, matcher ) {
@@ -509,9 +623,8 @@ function consumeAttributeMatches( viewElement, { consumable }, matcher ) {
 		// We only want to consume attributes, so element can be still processed by other converters.
 		delete match.match.name;
 
-		if ( consumable.consume( viewElement, match.match ) ) {
-			consumedMatches.push( match );
-		}
+		consumable.consume( viewElement, match.match );
+		consumedMatches.push( match );
 	}
 
 	return consumedMatches;
@@ -521,7 +634,7 @@ function consumeAttributeMatches( viewElement, { consumable }, matcher ) {
 //
 // @private
 // @param {module:engine/view/element~Element} viewElement
-// @param {module:engine/conversion/modelconsumable~ModelConsumable} consumable
+// @param {module:engine/conversion/viewconsumable~ViewConsumable} consumable
 // @param {Object} match
 function removeConsumedAttributes( consumable, viewElement, match ) {
 	for ( const key of [ 'attributes', 'classes', 'styles' ] ) {
@@ -531,7 +644,8 @@ function removeConsumedAttributes( consumable, viewElement, match ) {
 			continue;
 		}
 
-		for ( const value of attributes ) {
+		// Iterating over a copy of an array so removing items doesn't influence iteration.
+		for ( const value of Array.from( attributes ) ) {
 			if ( !consumable.test( viewElement, ( { [ key ]: [ value ] } ) ) ) {
 				removeItemFromArray( attributes, value );
 			}

package/src/dataschema.js

@@ -251,5 +251,8 @@ function testViewName( pattern, viewName ) {
  * @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.
+ * @property {String} [coupledAttribute] The name of the model attribute that generates the same view element. GHS inline attribute
+ * will be removed from the model tree as soon as the coupled attribute is removed. See
+ * {@link module:html-support/datafilter~DataFilter#_registerModelPostFixer GHS post-fixer} for more details.
  * @extends module:html-support/dataschema~DataSchemaDefinition
  */

package/src/generalhtmlsupport.js

@@ -86,7 +86,7 @@ export default class GeneralHtmlSupport extends Plugin {
 	}
 
 	/**
-	 * Updates GHS model attribute for a specified view element name, so it includes a given class name.
+	 * 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.
@@ -109,7 +109,7 @@ export default class GeneralHtmlSupport extends Plugin {
 	}
 
 	/**
-	 * Updates GHS model attribute for a specified view element name, so it does not include a given class name.
+	 * 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.
@@ -132,7 +132,7 @@ export default class GeneralHtmlSupport extends Plugin {
 	}
 
 	/**
-	 * Updates GHS model attribute for a specified view element name, so it includes a given attribute.
+	 * Updates GHS model attribute for a specified view element name, so it includes the given attribute.
 	 *
 	 * @protected
 	 * @param {String} viewElementName A view element name.
@@ -155,7 +155,7 @@ export default class GeneralHtmlSupport extends Plugin {
 	}
 
 	/**
-	 * Updates GHS model attribute for a specified view element name, so it does not include a given attribute.
+	 * 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.

package/src/integrations/codeblock.js

@@ -79,7 +79,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 );

package/src/integrations/documentlist.js

@@ -14,7 +14,7 @@ import { setViewAttributes } from '../conversionutils.js';
 import DataFilter from '../datafilter';
 
 /**
- * Provides the General HTML Support integration with {@link module:list/documentlist~DocumentList Document List} feature.
+ * Provides the General HTML Support integration with the {@link module:list/documentlist~DocumentList Document List} feature.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -85,7 +85,7 @@ export default class DocumentListElementSupport extends Plugin {
 		} );
 
 		// Make sure that all items in a single list (items at the same level & listType) have the same properties.
-		// Note: This is almost exact copy from DocumentListPropertiesEditing.
+		// Note: This is almost an exact copy from DocumentListPropertiesEditing.
 		documentListEditing.on( 'postFixer', ( evt, { listNodes, writer } ) => {
 			const previousNodesByIndent = []; // Last seen nodes of lower indented lists.
 
@@ -180,7 +180,7 @@ function viewToModelListAttributeConverter( attributeName, dataFilter ) {
 			Object.assign( data, conversionApi.convertChildren( data.viewItem, data.modelCursor ) );
 		}
 
-		const viewAttributes = dataFilter._consumeAllowedAttributes( viewElement, conversionApi );
+		const viewAttributes = dataFilter.processViewAttributes( viewElement, conversionApi );
 
 		for ( const item of data.modelRange.getItems( { shallow: true } ) ) {
 			// Apply only to list item blocks.

package/src/integrations/dualcontent.js

@@ -111,10 +111,19 @@ export default class DualContentModelElementSupport extends Plugin {
 	 * @returns {Boolean}
 	 */
 	_hasBlockContent( viewElement ) {
-		const blockElements = this.editor.editing.view.domConverter.blockElements;
+		const view = this.editor.editing.view;
+		const blockElements = view.domConverter.blockElements;
+
+		// Traversing the viewElement subtree looking for block elements.
+		// Especially for the cases like <div><a href="#"><p>foo</p></a></div>.
+		// https://github.com/ckeditor/ckeditor5/issues/11513
+		for ( const viewItem of view.createRangeIn( viewElement ).getItems() ) {
+			if ( viewItem.is( 'element' ) && blockElements.includes( viewItem.name ) ) {
+				return true;
+			}
+		}
 
-		return Array.from( viewElement.getChildren() )
-			.some( node => blockElements.includes( node.name ) );
+		return false;
 	}
 
 	/**

package/src/integrations/image.js

@@ -43,6 +43,10 @@ export default class ImageElementSupport extends Plugin {
 		const conversion = editor.conversion;
 		const dataFilter = editor.plugins.get( DataFilter );
 
+		dataFilter.on( 'register:figure', () => {
+			conversion.for( 'upcast' ).add( viewToModelFigureAttributeConverter( dataFilter ) );
+		} );
+
 		dataFilter.on( 'register:img', ( evt, definition ) => {
 			if ( definition.model !== 'imageBlock' && definition.model !== 'imageInline' ) {
 				return;
@@ -96,31 +100,46 @@ function viewToModelImageAttributeConverter( dataFilter ) {
 
 			preserveElementAttributes( viewImageElement, 'htmlAttributes' );
 
-			if ( viewContainerElement.is( 'element', 'figure' ) ) {
-				preserveElementAttributes( viewContainerElement, 'htmlFigureAttributes' );
-			} else if ( viewContainerElement.is( 'element', 'a' ) ) {
+			if ( viewContainerElement.is( 'element', 'a' ) ) {
 				preserveLinkAttributes( viewContainerElement );
 			}
 
 			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 );
 				}
 			}
 
-			// 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' );
 				}
+			}
+		}, { priority: 'low' } );
+	};
+}
 
-				// 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' );
-				}
+// View-to-model conversion helper preserving allowed attributes on {@link module:image/image~Image Image}
+// feature model element from figure view element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelFigureAttributeConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:figure', ( evt, data, conversionApi ) => {
+			const viewFigureElement = data.viewItem;
+
+			if ( !data.modelRange || !viewFigureElement.hasClass( 'image' ) ) {
+				return;
+			}
+
+			const viewAttributes = dataFilter.processViewAttributes( viewFigureElement, conversionApi );
+
+			if ( viewAttributes ) {
+				conversionApi.writer.setAttribute( 'htmlFigureAttributes', viewAttributes, data.modelRange );
 			}
 		}, { priority: 'low' } );
 	};

package/src/integrations/mediaembed.js

@@ -44,6 +44,10 @@ export default class MediaEmbedElementSupport extends Plugin {
 			view: mediaElementName
 		} );
 
+		dataFilter.on( 'register:figure', ( ) => {
+			conversion.for( 'upcast' ).add( viewToModelFigureAttributesConverter( dataFilter ) );
+		} );
+
 		dataFilter.on( `register:${ mediaElementName }`, ( evt, definition ) => {
 			if ( definition.model !== 'media' ) {
 				return;
@@ -71,16 +75,11 @@ function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) {
 
 	function upcastMedia( evt, data, conversionApi ) {
 		const viewMediaElement = data.viewItem;
-		const viewParent = viewMediaElement.parent;
 
 		preserveElementAttributes( viewMediaElement, 'htmlAttributes' );
 
-		if ( viewParent.is( 'element', 'figure' ) && viewParent.hasClass( 'media' ) ) {
-			preserveElementAttributes( viewParent, 'htmlFigureAttributes' );
-		}
-
 		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 );
@@ -89,6 +88,30 @@ function viewToModelMediaAttributesConverter( dataFilter, mediaElementName ) {
 	}
 }
 
+// View-to-model conversion helper preserving allowed attributes on {@link module:media-embed/mediaembed~MediaEmbed MediaEmbed}
+// feature model element from figure view element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelFigureAttributesConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:figure', ( evt, data, conversionApi ) => {
+			const viewFigureElement = data.viewItem;
+
+			if ( !data.modelRange || !viewFigureElement.hasClass( 'media' ) ) {
+				return;
+			}
+
+			const viewAttributes = dataFilter.processViewAttributes( viewFigureElement, conversionApi );
+
+			if ( viewAttributes ) {
+				conversionApi.writer.setAttribute( 'htmlFigureAttributes', viewAttributes, data.modelRange );
+			}
+		}, { priority: 'low' } );
+	};
+}
+
 function modelToViewMediaAttributeConverter( mediaElementName ) {
 	return dispatcher => {
 		addAttributeConversionDispatcherHandler( mediaElementName, 'htmlAttributes' );

package/src/integrations/table.js

@@ -9,7 +9,6 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import { setViewAttributes } from '../conversionutils.js';
-
 import DataFilter from '../datafilter';
 
 /**
@@ -39,6 +38,10 @@ export default class TableElementSupport extends Plugin {
 		const conversion = editor.conversion;
 		const dataFilter = editor.plugins.get( DataFilter );
 
+		dataFilter.on( 'register:figure', ( ) => {
+			conversion.for( 'upcast' ).add( viewToModelFigureAttributeConverter( dataFilter ) );
+		} );
+
 		dataFilter.on( 'register:table', ( evt, definition ) => {
 			if ( definition.model !== 'table' ) {
 				return;
@@ -74,11 +77,6 @@ function viewToModelTableAttributeConverter( dataFilter ) {
 
 			preserveElementAttributes( viewTableElement, 'htmlAttributes' );
 
-			const viewFigureElement = viewTableElement.parent;
-			if ( viewFigureElement.is( 'element', 'figure' ) ) {
-				preserveElementAttributes( viewFigureElement, 'htmlFigureAttributes' );
-			}
-
 			for ( const childNode of viewTableElement.getChildren() ) {
 				if ( childNode.is( 'element', 'thead' ) ) {
 					preserveElementAttributes( childNode, 'htmlTheadAttributes' );
@@ -90,12 +88,36 @@ function viewToModelTableAttributeConverter( dataFilter ) {
 			}
 
 			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 );
 				}
 			}
+		} );
+	};
+}
+
+// View-to-model conversion helper preserving allowed attributes on {@link module:table/table~Table Table}
+// feature model element from figure view element.
+//
+// @private
+// @param {module:html-support/datafilter~DataFilter} dataFilter
+// @returns {Function} Returns a conversion callback.
+function viewToModelFigureAttributeConverter( dataFilter ) {
+	return dispatcher => {
+		dispatcher.on( 'element:figure', ( evt, data, conversionApi ) => {
+			const viewFigureElement = data.viewItem;
+
+			if ( !data.modelRange || !viewFigureElement.hasClass( 'table' ) ) {
+				return;
+			}
+
+			const viewAttributes = dataFilter.processViewAttributes( viewFigureElement, conversionApi );
+
+			if ( viewAttributes ) {
+				conversionApi.writer.setAttribute( 'htmlFigureAttributes', viewAttributes, data.modelRange );
+			}
 		}, { priority: 'low' } );
 	};
 }

package/src/schemadefinitions.js

@@ -577,6 +577,7 @@ export default {
 			model: 'htmlA',
 			view: 'a',
 			priority: 5,
+			coupledAttribute: 'linkHref',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -584,6 +585,7 @@ export default {
 		{
 			model: 'htmlStrong',
 			view: 'strong',
+			coupledAttribute: 'bold',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -591,6 +593,7 @@ export default {
 		{
 			model: 'htmlB',
 			view: 'b',
+			coupledAttribute: 'bold',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -598,6 +601,7 @@ export default {
 		{
 			model: 'htmlI',
 			view: 'i',
+			coupledAttribute: 'italic',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -605,6 +609,7 @@ export default {
 		{
 			model: 'htmlEm',
 			view: 'em',
+			coupledAttribute: 'italic',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -612,6 +617,7 @@ export default {
 		{
 			model: 'htmlS',
 			view: 's',
+			coupledAttribute: 'strikethrough',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -620,6 +626,7 @@ export default {
 		{
 			model: 'htmlDel',
 			view: 'del',
+			coupledAttribute: 'strikethrough',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -635,6 +642,7 @@ export default {
 		{
 			model: 'htmlU',
 			view: 'u',
+			coupledAttribute: 'underline',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -642,6 +650,7 @@ export default {
 		{
 			model: 'htmlSub',
 			view: 'sub',
+			coupledAttribute: 'subscript',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -649,6 +658,7 @@ export default {
 		{
 			model: 'htmlSup',
 			view: 'sup',
+			coupledAttribute: 'superscript',
 			attributeProperties: {
 				copyOnEnter: true
 			}
@@ -656,6 +666,7 @@ export default {
 		{
 			model: 'htmlCode',
 			view: 'code',
+			coupledAttribute: 'code',
 			attributeProperties: {
 				copyOnEnter: true
 			}