#8959 DowncastWriter should handle UIElements consistently while wrapping and inserting

docs/_snippets/framework/tutorials/inline-widget.js

@@ -24,10 +24,14 @@ import Model from '@ckeditor/ckeditor5-ui/src/model';
 class PlaceholderCommand extends Command {
 	execute( { value } ) {
 		const editor = this.editor;
+		const selection = editor.model.document.selection;
 
 		editor.model.change( writer => {
-			// Create a <placeholder> elment with the "name" attribute...
-			const placeholder = writer.createElement( 'placeholder', { name: value } );
+			// Create a <placeholder> element with the "name" attribute (and all the selection attributes)...
+			const placeholder = writer.createElement( 'placeholder', {
+				...Object.fromEntries( selection.getAttributes() ),
+				name: value
+			} );
 
 			// ... and insert it into the document.
 			editor.model.insertContent( placeholder );
@@ -145,6 +149,9 @@ class PlaceholderEditing extends Plugin {
 			// The inline widget is self-contained so it cannot be split by the caret and it can be selected:
 			isObject: true,
 
+			// The inline widget can have the same attributes as text (for example linkHref, bold).
+			allowAttributesOf: '$text',
+
 			// The placeholder can have many types, like date, name, surname, etc:
 			allowAttributes: [ 'name' ]
 		} );
@@ -187,6 +194,8 @@ class PlaceholderEditing extends Plugin {
 
 			const placeholderView = viewWriter.createContainerElement( 'span', {
 				class: 'placeholder'
+			}, {
+				isAllowedInsideAttributeElement: true
 			} );
 
 			// Insert the placeholder name (as a text).

docs/framework/guides/tutorials/implementing-an-inline-widget.md

@@ -272,6 +272,9 @@ export default class PlaceholderEditing extends Plugin {
 			// The inline widget is self-contained so it cannot be split by the caret and can be selected:
 			isObject: true,
 
+			// The inline widget can have the same attributes as text (for example linkHref, bold).
+			allowAttributesOf: '$text',
+
 			// The placeholder can have many types, like date, name, surname, etc:
 			allowAttributes: [ 'name' ]
 		} );
@@ -354,6 +357,8 @@ export default class PlaceholderEditing extends Plugin {
 
 			const placeholderView = viewWriter.createContainerElement( 'span', {
 				class: 'placeholder'
+			}, {
+				isAllowedInsideAttributeElement: true
 			} );
 
 			// Insert the placeholder name (as a text).
@@ -398,10 +403,14 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 export default class PlaceholderCommand extends Command {
 	execute( { value } ) {
 		const editor = this.editor;
+		const selection = editor.model.document.selection;
 
 		editor.model.change( writer => {
-			// Create a <placeholder> elment with the "name" attribute...
-			const placeholder = writer.createElement( 'placeholder', { name: value } );
+			// Create a <placeholder> elment with the "name" attribute (and all the selection attributes)...
+			const placeholder = writer.createElement( 'placeholder', {
+				...Object.fromEntries( selection.getAttributes() ),
+                name: value
+			} );
 
 			// ... and insert it into the document.
 			editor.model.insertContent( placeholder );
@@ -769,8 +778,11 @@ class PlaceholderCommand extends Command {
 		const editor = this.editor;
 
 		editor.model.change( writer => {
-			// Create a <placeholder> elment with the "name" attribute...
-			const placeholder = writer.createElement( 'placeholder', { name: value } );
+			// Create a <placeholder> elment with the "name" attribute (and all the selection attributes)...
+			const placeholder = writer.createElement( 'placeholder', {
+				...Object.fromEntries( selection.getAttributes() ),
+				name: value
+			} );
 
 			// ... and insert it into the document.
 			editor.model.insertContent( placeholder );
@@ -882,6 +894,9 @@ class PlaceholderEditing extends Plugin {
 			// The inline widget is self-contained so it cannot be split by the caret and it can be selected:
 			isObject: true,
 
+			// The inline widget can have the same attributes as text (for example linkHref, bold).
+			allowAttributesOf: '$text',
+
 			// The placeholder can have many types, like date, name, surname, etc:
 			allowAttributes: [ 'name' ]
 		} );
@@ -924,6 +939,8 @@ class PlaceholderEditing extends Plugin {
 
 			const placeholderView = viewWriter.createContainerElement( 'span', {
 				class: 'placeholder'
+			}, {
+				isInline: true
 			} );
 
 			// Insert the placeholder name (as a text).

packages/ckeditor5-engine/src/view/attributeelement.js

@@ -24,6 +24,16 @@ const DEFAULT_PRIORITY = 10;
  * To create a new attribute element instance use the
  * {@link module:engine/view/downcastwriter~DowncastWriter#createAttributeElement `DowncastWriter#createAttributeElement()`} method.
  *
+ * **Note:** Attribute elements by default can wrap {@link module:engine/view/text~Text},
+ * {@link module:engine/view/emptyelement~EmptyElement}, {@link module:engine/view/uielement~UIElement},
+ * {@link module:engine/view/rawelement~RawElement} and other attribute elements with higher priority. Other elements while placed inside
+ * an attribute element will split it (or nest in case of an `AttributeElement`). This behavior can be modified by changing
+ * the `isAllowedInsideAttributeElement` option while creating
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createContainerElement},
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createEmptyElement},
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createUIElement} or
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createRawElement}.
+ *
  * @extends module:engine/view/element~Element
  */
 export default class AttributeElement extends Element {