@ckeditor/ckeditor5-engine 33.0.0 → 34.0.0

package/src/model/model.js

@@ -21,6 +21,7 @@ import ModelSelection from './selection';
 import OperationFactory from './operation/operationfactory';
 
 import insertContent from './utils/insertcontent';
+import insertObject from './utils/insertobject';
 import deleteContent from './utils/deletecontent';
 import modifySelection from './utils/modifyselection';
 import getSelectedContent from './utils/getselectedcontent';
@@ -80,7 +81,7 @@ export default class Model {
 		 */
 		this._currentWriter = null;
 
-		[ 'insertContent', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation' ]
+		[ 'insertContent', 'insertObject', 'deleteContent', 'modifySelection', 'getSelectedContent', 'applyOperation' ]
 			.forEach( methodName => this.decorate( methodName ) );
 
 		// Adding operation validation with `highest` priority, so it is called before any other feature would like
@@ -96,11 +97,28 @@ export default class Model {
 			isLimit: true
 		} );
 
+		this.schema.register( '$container', {
+			allowIn: [ '$root', '$container' ]
+		} );
+
 		this.schema.register( '$block', {
-			allowIn: '$root',
+			allowIn: [ '$root', '$container' ],
 			isBlock: true
 		} );
 
+		this.schema.register( '$blockObject', {
+			allowWhere: '$block',
+			isBlock: true,
+			isObject: true
+		} );
+
+		this.schema.register( '$inlineObject', {
+			allowWhere: '$text',
+			allowAttributesOf: '$text',
+			isInline: true,
+			isObject: true
+		} );
+
 		this.schema.register( '$text', {
 			allowIn: '$block',
 			isInline: true,
@@ -304,6 +322,9 @@ export default class Model {
 	 * Inserts content at the position in the editor specified by the selection, as one would expect the paste
 	 * functionality to work.
 	 *
+	 * **Note**: If you want to insert an {@glink framework/guides/deep-dive/schema#object-elements object element}
+	 * (e.g. a {@link module:widget/utils~toWidget widget}), see {@link #insertObject} instead.
+	 *
 	 * This is a high-level method. It takes the {@link #schema schema} into consideration when inserting
 	 * the content, clears the given selection's content before inserting nodes and moves the selection
 	 * to its target position at the end of the process.
@@ -435,6 +456,89 @@ export default class Model {
 		return insertContent( this, content, selectable, placeOrOffset );
 	}
 
+	/**
+	 * Inserts an {@glink framework/guides/deep-dive/schema#object-elements object element} at a specific position in the editor content.
+	 *
+	 * This is a high-level API:
+	 * * It takes the {@link #schema schema} into consideration,
+	 * * It clears the content of passed `selectable` before inserting,
+	 * * It can move the selection at the end of the process,
+	 * * It will copy the selected block's attributes to preserve them upon insertion,
+	 * * It can split elements or wrap inline objects with paragraphs if they are not allowed in target position,
+	 * * etc.
+	 *
+	 * # Notes
+	 *
+	 * * If you want to insert a non-object content, see {@link #insertContent} instead.
+	 * * For lower-level API, see {@link module:engine/model/writer~Writer `Writer`}.
+	 * * Unlike {@link module:engine/model/writer~Writer `Writer`}, this method does not have to be used inside
+	 * a {@link #change `change()` block}.
+	 * * Inserting object into the model is not enough to make CKEditor 5 render that content to the user.
+	 * CKEditor 5 implements a model-view-controller architecture and what `model.insertObject()` does
+	 * is only adding nodes to the model. Additionally, you need to define
+	 * {@glink framework/guides/architecture/editing-engine#conversion converters} between the model and view
+	 * and define those nodes in the {@glink framework/guides/architecture/editing-engine#schema schema}.
+	 *
+	 * # Examples
+	 *
+	 * Use the following code to insert an object at the current selection and keep the selection on the inserted element:
+	 *
+	 *		const rawHtmlEmbedElement = writer.createElement( 'rawHtml' );
+	 *
+	 *		model.insertObject( rawHtmlEmbedElement, null, null, {
+	 *			setSelection: 'on'
+	 *		} );
+	 *
+	 * Use the following code to insert an object at the current selection and nudge the selection after the inserted object:
+	 *
+	 *		const pageBreakElement = writer.createElement( 'pageBreak' );
+ 	 *
+	 *		model.insertObject( pageBreakElement, null, null, {
+	 *			setSelection: 'after'
+	 *		} );
+	 *
+	 * Use the following code to insert an object at the current selection and avoid splitting the content (non-destructive insertion):
+	 *
+	 *		const tableElement = writer.createElement( 'table' );
+ 	 *
+	 *		model.insertObject( tableElement, null, null, {
+	 *			findOptimalPosition: 'auto'
+	 *		} );
+	 *
+	 * Use the following code to insert an object at the specific range (also: replace the content of the range):
+	 *
+	 *		const tableElement = writer.createElement( 'table' );
+	 *		const range = model.createRangeOn( model.document.getRoot().getChild( 1 ) );
+ 	 *
+	 *		model.insertObject( tableElement, range );
+	 *
+	 * @param {module:engine/model/element~Element} object An object to be inserted into the model document.
+	 * @param {module:engine/model/selection~Selectable} [selectable=model.document.selection]
+	 * A selectable where the content should be inserted. If not specified, the current
+	 * {@link module:engine/model/document~Document#selection document selection} will be used instead.
+	 * @param {Number|'before'|'end'|'after'|'on'|'in'} placeOrOffset Specifies the exact place or offset for the insertion to take place,
+	 * relative to `selectable`.
+	 * @param {Object} [options] Additional options.
+	 * @param {'auto'|'before'|'after'} [options.findOptimalPosition] An option that, when set, adjusts the insertion position (relative to
+	 * `selectable` and `placeOrOffset`) so that the content of `selectable` is not split upon insertion (a.k.a. non-destructive insertion).
+	 * * When `'auto'`, the algorithm will decide whether to insert the object before or after `selectable` to avoid content splitting.
+	 * * When `'before'`, the closest position before `selectable` will be used that will not result in content splitting.
+	 * * When `'after'`, the closest position after `selectable` will be used that will not result in content splitting.
+	 *
+	 * Note that this option works only for block objects. Inline objects are inserted into text and do not split blocks.
+	 * @param {'on'|'after'} [options.setSelection] An option that, when set, moves the
+	 * {@link module:engine/model/document~Document#selection document selection} after inserting the object.
+	 * * When `'on'`, the document selection will be set on the inserted object.
+	 * * When `'after'`, the document selection will move to the closest text node after the inserted object. If there is no
+	 * such text node, a paragraph will be created and the document selection will be moved inside it.
+	 * @returns {module:engine/model/range~Range} A range which contains all the performed changes. This is a range that, if removed,
+	 * would return the model to the state before the insertion. If no changes were preformed by `insertObject()`, returns a range collapsed
+	 * at the insertion position.
+	 */
+	insertObject( object, selectable, placeOrOffset, options ) {
+		return insertObject( this, object, selectable, placeOrOffset, options );
+	}
+
 	/**
 	 * Deletes content of the selection and merge siblings. The resulting selection is always collapsed.
 	 *
@@ -903,12 +1007,25 @@ export default class Model {
 	 * listener to this event so it can be fully customized by the features.
 	 *
 	 * **Note** The `selectable` parameter for the {@link #insertContent} is optional. When `undefined` value is passed the method uses
-	 * `model.document.selection`.
+	 * {@link module:engine/model/document~Document#selection document selection}.
 	 *
 	 * @event insertContent
 	 * @param {Array} args The arguments passed to the original method.
 	 */
 
+	/**
+	 * Event fired when {@link #insertObject} method is called.
+	 *
+	 * The {@link #insertObject default action of that method} is implemented as a
+	 * listener to this event so it can be fully customized by the features.
+	 *
+	 * **Note** The `selectable` parameter for the {@link #insertObject} is optional. When `undefined` value is passed the method uses
+	 * {@link module:engine/model/document~Document#selection document selection}.
+	 *
+	 * @event insertObject
+	 * @param {Array} args The arguments passed to the original method.
+	 */
+
 	/**
 	 * Event fired when {@link #deleteContent} method is called.
 	 *

package/src/model/schema.js

@@ -834,6 +834,23 @@ export default class Schema {
 		return null;
 	}
 
+	/**
+	 * Sets attributes allowed by the schema on given node.
+	 *
+	 * @param {module:engine/model/node~Node} node A node to set attributes on.
+	 * @param {Object} attributes Attributes keys and values.
+	 * @param {module:engine/model/writer~Writer} writer An instance of the model writer.
+	 */
+	setAllowedAttributes( node, attributes, writer ) {
+		const model = writer.model;
+
+		for ( const [ attributeName, attributeValue ] of Object.entries( attributes ) ) {
+			if ( model.schema.checkAttribute( node, attributeName ) ) {
+				writer.setAttribute( attributeName, attributeValue, node );
+			}
+		}
+	}
+
 	/**
 	 * Removes attributes disallowed by the schema.
 	 *
@@ -863,6 +880,34 @@ export default class Schema {
 		}
 	}
 
+	/**
+	 * Gets attributes of a node that have given property.
+	 *
+	 * @param {module:engine/model/node~Node} node Node to get attributes from.
+	 * @param {String} propertyName Name of the property that attribute must have to return it.
+	 * @param {Boolean|Symbol|String|Number|Object|null|undefined} propertyValue Desired value of the property that we want to check.
+	 * When `undefined` attributes will be returned if they have set a given property no matter what the value is. If specified it will
+	 * return attributes which given property's value is equal to this parameter.
+	 * @returns {Object} Object with attributes' names as key and attributes' values as value.
+	 */
+	getAttributesWithProperty( node, propertyName, propertyValue ) {
+		const attributes = {};
+
+		for ( const [ attributeName, attributeValue ] of node.getAttributes() ) {
+			const attributeProperties = this.getAttributeProperties( attributeName );
+
+			if ( attributeProperties[ propertyName ] === undefined ) {
+				continue;
+			}
+
+			if ( propertyValue === undefined || propertyValue === attributeProperties[ propertyName ] ) {
+				attributes[ attributeName ] = attributeValue;
+			}
+		}
+
+		return attributes;
+	}
+
 	/**
 	 * Creates an instance of the schema context.
 	 *
@@ -1135,19 +1180,39 @@ mix( Schema, ObservableMixin );
  *
  * # Generic items
  *
- * There are three basic generic items: `$root`, `$block` and `$text`.
- * They are defined as follows:
+ * There are several generic items (classes of elements) available: `$root`, `$container`, `$block`, `$blockObject`,
+ * `$inlineObject`, and `$text`. They are defined as follows:
  *
- *		this.schema.register( '$root', {
+ *		schema.register( '$root', {
  *			isLimit: true
  *		} );
- *		this.schema.register( '$block', {
- *			allowIn: '$root',
+ *
+ *		schema.register( '$container', {
+ *			allowIn: [ '$root', '$container' ]
+ *		} );
+ *
+ *		schema.register( '$block', {
+ *			allowIn: [ '$root', '$container' ],
  *			isBlock: true
  *		} );
- *		this.schema.register( '$text', {
+ *
+ *		schema.register( '$blockObject', {
+ *			allowWhere: '$block',
+ *			isBlock: true,
+ *			isObject: true
+ *		} );
+ *
+ *		schema.register( '$inlineObject', {
+ *			allowWhere: '$text',
+ *			allowAttributesOf: '$text',
+ *			isInline: true,
+ *			isObject: true
+ *		} );
+ *
+ *		schema.register( '$text', {
  *			allowIn: '$block',
- *			isInline: true
+ *			isInline: true,
+ *			isContent: true
  *		} );
  *
  * They reflect typical editor content that is contained within one root, consists of several blocks
@@ -1180,14 +1245,18 @@ mix( Schema, ObservableMixin );
  *			isBlock: true
  *		} );
  *
+ * The previous rule can be written in a shorter form using inheritance:
+ *
+ *		schema.register( 'paragraph', {
+ *			inheritAllFrom: '$block'
+ *		} );
+ *
  * Make `imageBlock` a block object, which is allowed everywhere where `$block` is.
  * Also, allow `src` and `alt` attributes in it:
  *
  *		schema.register( 'imageBlock', {
- *			allowWhere: '$block',
+ *			inheritAllFrom: '$blockObject',
  *			allowAttributes: [ 'src', 'alt' ],
- *			isBlock: true,
- *			isObject: true
  *		} );
  *
  * Make `caption` allowed in `imageBlock` and make it allow all the content of `$block`s (usually, `$text`).

package/src/model/treewalker.js

@@ -233,9 +233,8 @@ export default class TreeWalker {
 
 		// Get node just after the current position.
 		// Use a highly optimized version instead of checking the text node first and then getting the node after. See #6582.
-		const positionParent = position.parent;
-		const textNodeAtPosition = getTextNodeAtPosition( position, positionParent );
-		const node = textNodeAtPosition ? textNodeAtPosition : getNodeAfterPosition( position, positionParent, textNodeAtPosition );
+		const textNodeAtPosition = getTextNodeAtPosition( position, parent );
+		const node = textNodeAtPosition ? textNodeAtPosition : getNodeAfterPosition( position, parent, textNodeAtPosition );
 
 		if ( node instanceof Element ) {
 			if ( !this.shallow ) {

package/src/model/utils/deletecontent.js

@@ -80,6 +80,17 @@ export default function deleteContent( model, selection, options = {} ) {
 			return;
 		}
 
+		// Collect attributes to copy in case of autoparagraphing.
+		const attributesForAutoparagraph = {};
+
+		if ( !options.doNotAutoparagraph ) {
+			const selectedElement = selection.getSelectedElement();
+
+			if ( selectedElement ) {
+				Object.assign( attributesForAutoparagraph, schema.getAttributesWithProperty( selectedElement, 'copyOnReplace', true ) );
+			}
+		}
+
 		// Get the live positions for the range adjusted to span only blocks selected from the user perspective.
 		const [ startPosition, endPosition ] = getLivePositionsForSelectedBlocks( selRange );
 
@@ -114,7 +125,7 @@ export default function deleteContent( model, selection, options = {} ) {
 		// Check if a text is allowed in the new container. If not, try to create a new paragraph (if it's allowed here).
 		// If autoparagraphing is off, we assume that you know what you do so we leave the selection wherever it was.
 		if ( !options.doNotAutoparagraph && shouldAutoparagraph( schema, startPosition ) ) {
-			insertParagraph( writer, startPosition, selection );
+			insertParagraph( writer, startPosition, selection, attributesForAutoparagraph );
 		}
 
 		startPosition.detach();
@@ -482,9 +493,11 @@ function isCrossingLimitElement( leftPos, rightPos, schema ) {
 	return true;
 }
 
-function insertParagraph( writer, position, selection ) {
+function insertParagraph( writer, position, selection, attributes = {} ) {
 	const paragraph = writer.createElement( 'paragraph' );
 
+	writer.model.schema.setAllowedAttributes( paragraph, attributes, writer );
+
 	writer.insert( paragraph, position );
 
 	collapseSelectionAt( writer, selection, writer.createPositionAt( paragraph, 0 ) );

package/src/model/utils/findoptimalinsertionrange.js

@@ -0,0 +1,68 @@
+/**
+ * @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 engine/model/utils/findoptimalinsertionrange
+ */
+
+import first from '@ckeditor/ckeditor5-utils/src/first';
+
+// Returns a model range which is optimal (in terms of UX) for inserting a widget block.
+//
+// For instance, if a selection is in the middle of a paragraph, the collapsed range before this paragraph
+// will be returned so that it is not split. If the selection is at the end of a paragraph,
+// the collapsed range after this paragraph will be returned.
+//
+// Note: If the selection is placed in an empty block, the range in that block will be returned. If that range
+// is then passed to {@link module:engine/model/model~Model#insertContent}, the block will be fully replaced
+// by the inserted widget block.
+//
+// **Note:** Use {@link module:widget/utils#findOptimalInsertionRange} instead of this function outside engine.
+// This function is only exposed to be used by {@link module:widget/utils#findOptimalInsertionRange findOptimalInsertionRange()}
+// in `widget` package and inside `engine` package.
+//
+// @private
+// @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
+// The selection based on which the insertion position should be calculated.
+// @param {module:engine/model/model~Model} model Model instance.
+// @param {'auto'|'before'|'after'} [place='auto'] Place where to look for optimal insertion range.
+// Default value `auto` will determine itself the best position for insertion.
+// Value `before` will try to find a position before selection.
+// Value `after` will try to find a position after selection.
+// @returns {module:engine/model/range~Range} The optimal range.
+export function findOptimalInsertionRange( selection, model, place = 'auto' ) {
+	const selectedElement = selection.getSelectedElement();
+
+	if ( selectedElement && model.schema.isObject( selectedElement ) && !model.schema.isInline( selectedElement ) ) {
+		if ( [ 'before', 'after' ].includes( place ) ) {
+			return model.createRange( model.createPositionAt( selectedElement, place ) );
+		}
+
+		return model.createRangeOn( selectedElement );
+	}
+
+	const firstBlock = first( selection.getSelectedBlocks() );
+
+	// There are no block elements within ancestors (in the current limit element).
+	if ( !firstBlock ) {
+		return model.createRange( selection.focus );
+	}
+
+	// If inserting into an empty block – return position in that block. It will get
+	// replaced with the image by insertContent(). #42.
+	if ( firstBlock.isEmpty ) {
+		return model.createRange( model.createPositionAt( firstBlock, 0 ) );
+	}
+
+	const positionAfter = model.createPositionAfter( firstBlock );
+
+	// If selection is at the end of the block - return position after the block.
+	if ( selection.focus.isTouching( positionAfter ) ) {
+		return model.createRange( positionAfter );
+	}
+
+	// Otherwise, return position before the block.
+	return model.createRange( model.createPositionBefore( firstBlock ) );
+}

package/src/model/utils/insertobject.js

@@ -0,0 +1,173 @@
+/**
+ * @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 engine/model/utils/insertobject
+ */
+
+import first from '@ckeditor/ckeditor5-utils/src/first';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+
+import { findOptimalInsertionRange } from './findoptimalinsertionrange';
+
+/**
+ * Inserts an {@glink framework/guides/deep-dive/schema#object-elements object element} at a specific position in the editor content.
+ *
+ * **Note:** Use {@link module:engine/model/model~Model#insertObject} instead of this function.
+ * This function is only exposed to be reusable in algorithms which change the {@link module:engine/model/model~Model#insertObject}
+ * method's behavior.
+ *
+ * **Note**: For more documentation and examples, see {@link module:engine/model/model~Model#insertObject}.
+ *
+ * @param {module:engine/model/model~Model} model The model in context of which the insertion
+ * should be performed.
+ * @param {module:engine/model/element~Element} object An object to be inserted into the model document.
+ * @param {module:engine/model/selection~Selectable} [selectable=model.document.selection]
+ * A selectable where the content should be inserted. If not specified, the current
+ * {@link module:engine/model/document~Document#selection document selection} will be used instead.
+ * @param {Number|'before'|'end'|'after'|'on'|'in'} placeOrOffset Specifies the exact place or offset for the insertion to take place,
+ * relative to `selectable`.
+ * @param {Object} [options] Additional options.
+ * @param {'auto'|'before'|'after'} [options.findOptimalPosition] An option that, when set, adjusts the insertion position (relative to
+ * `selectable` and `placeOrOffset`) so that the content of `selectable` is not split upon insertion (a.k.a. non-destructive insertion).
+ * * When `'auto'`, the algorithm will decide whether to insert the object before or after `selectable` to avoid content splitting.
+ * * When `'before'`, the closest position before `selectable` will be used that will not result in content splitting.
+ * * When `'after'`, the closest position after `selectable` will be used that will not result in content splitting.
+ *
+ * Note that this option works only for block objects. Inline objects are inserted into text and do not split blocks.
+ * @param {'on'|'after'} [options.setSelection] An option that, when set, moves the
+ * {@link module:engine/model/document~Document#selection document selection} after inserting the object.
+ * * When `'on'`, the document selection will be set on the inserted object.
+ * * When `'after'`, the document selection will move to the closest text node after the inserted object. If there is no
+ * such text node, a paragraph will be created and the document selection will be moved inside it.
+ * @returns {module:engine/model/range~Range} A range which contains all the performed changes. This is a range that, if removed,
+ * would return the model to the state before the insertion. If no changes were preformed by `insertObject()`, returns a range collapsed
+ * at the insertion position.
+ */
+export default function insertObject( model, object, selectable, placeOrOffset, options = {} ) {
+	if ( !model.schema.isObject( object ) ) {
+		/**
+		 * Tried to insert an element with {@link module:engine/model/utils/insertobject insertObject()} function
+		 * that is not defined as an object in schema.
+		 * See {@link module:engine/model/schema~SchemaItemDefinition#isObject `SchemaItemDefinition`}.
+		 * If you want to insert content that is not an object you might want to use
+		 * {@link module:engine/model/utils/insertcontent insertContent()} function.
+		 * @error insertobject-element-not-an-object
+		 */
+		throw new CKEditorError( 'insertobject-element-not-an-object', model, { object } );
+	}
+
+	// Normalize selectable to a selection instance.
+	let originalSelection;
+
+	if ( !selectable ) {
+		originalSelection = model.document.selection;
+	} else if ( selectable.is( 'selection' ) ) {
+		originalSelection = selectable;
+	} else {
+		originalSelection = model.createSelection( selectable, placeOrOffset );
+	}
+
+	// Adjust the insertion selection.
+	let insertionSelection = originalSelection;
+
+	if ( options.findOptimalPosition && model.schema.isBlock( object ) ) {
+		insertionSelection = model.createSelection( findOptimalInsertionRange( originalSelection, model, options.findOptimalPosition ) );
+	}
+
+	// Collect attributes to be copied on the inserted object.
+	const firstSelectedBlock = first( originalSelection.getSelectedBlocks() );
+	const attributesToCopy = {};
+
+	if ( firstSelectedBlock ) {
+		Object.assign( attributesToCopy, model.schema.getAttributesWithProperty( firstSelectedBlock, 'copyOnReplace', true ) );
+	}
+
+	return model.change( writer => {
+		// Remove the selected content to find out what the parent of the inserted object would be.
+		// It would be removed inside model.insertContent() anyway.
+		if ( !insertionSelection.isCollapsed ) {
+			model.deleteContent( insertionSelection, { doNotAutoparagraph: true } );
+		}
+
+		let elementToInsert = object;
+		const insertionPositionParent = insertionSelection.anchor.parent;
+
+		// Autoparagraphing of an inline objects.
+		if (
+			!model.schema.checkChild( insertionPositionParent, object ) &&
+			model.schema.checkChild( insertionPositionParent, 'paragraph' ) &&
+			model.schema.checkChild( 'paragraph', object )
+		) {
+			elementToInsert = writer.createElement( 'paragraph' );
+
+			writer.insert( object, elementToInsert );
+		}
+
+		// Apply attributes that are allowed on the inserted object (or paragraph if autoparagraphed).
+		model.schema.setAllowedAttributes( elementToInsert, attributesToCopy, writer );
+
+		// Insert the prepared content at the optionally adjusted selection.
+		const affectedRange = model.insertContent( elementToInsert, insertionSelection );
+
+		// Nothing got inserted.
+		if ( affectedRange.isCollapsed ) {
+			return affectedRange;
+		}
+
+		if ( options.setSelection ) {
+			updateSelection( writer, object, options.setSelection, attributesToCopy );
+		}
+
+		return affectedRange;
+	} );
+}
+
+// Updates document selection based on given `place` parameter in relation to `contextElement` element.
+//
+// @private
+// @param {module:engine/model/writer~Writer} writer An instance of the model writer.
+// @param {module:engine/model/element~Element} contextElement An element to set attributes on.
+// @param {'on'|'after'} place Place where selection should be set in relation to `contextElement` element.
+// Value `on` will set selection on passed `contextElement`. Value `after` will set selection after `contextElement`.
+// @param {Object} attributes Attributes keys and values to set on a paragraph that this function can create when
+// `place` parameter is equal to `after` but there is no element with `$text` node to set selection in.
+function updateSelection( writer, contextElement, place, paragraphAttributes ) {
+	const model = writer.model;
+
+	if ( place == 'after' ) {
+		let nextElement = contextElement.nextSibling;
+
+		// Check whether an element next to the inserted element is defined and can contain a text.
+		const canSetSelection = nextElement && model.schema.checkChild( nextElement, '$text' );
+
+		// If the element is missing, but a paragraph could be inserted next to the element, let's add it.
+		if ( !canSetSelection && model.schema.checkChild( contextElement.parent, 'paragraph' ) ) {
+			nextElement = writer.createElement( 'paragraph' );
+
+			model.schema.setAllowedAttributes( nextElement, paragraphAttributes, writer );
+			model.insertContent( nextElement, writer.createPositionAfter( contextElement ) );
+		}
+
+		// Put the selection inside the element, at the beginning.
+		if ( nextElement ) {
+			writer.setSelection( nextElement, 0 );
+		}
+	}
+	else if ( place == 'on' ) {
+		writer.setSelection( contextElement, 'on' );
+	}
+	else {
+		/**
+		 * Unsupported `options.setSelection` parameter was passed
+		 * to the {@link module:engine/model/utils/insertobject insertObject()} function.
+		 * Check {@link module:engine/model/utils/insertobject insertObject()} API documentation for allowed
+		 * `options.setSelection` parameter values.
+		 *
+		 * @error insertobject-invalid-place-parameter-value
+		 */
+		throw new CKEditorError( 'insertobject-invalid-place-parameter-value', model );
+	}
+}

package/src/view/attributeelement.js

@@ -24,16 +24,6 @@ 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 {

package/src/view/domconverter.js

@@ -493,7 +493,22 @@ export default class DomConverter {
 				yield this._getBlockFiller( domDocument );
 			}
 
-			yield this.viewToDom( childView, domDocument, options );
+			const transparentRendering = childView.is( 'element' ) && childView.getCustomProperty( 'dataPipeline:transparentRendering' );
+
+			if ( transparentRendering && this.renderingMode == 'data' ) {
+				yield* this.viewChildrenToDom( childView, domDocument, options );
+			} else {
+				if ( transparentRendering ) {
+					/**
+					 * The `dataPipeline:transparentRendering` flag is supported only in the data pipeline.
+					 *
+					 * @error domconverter-transparent-rendering-unsupported-in-editing-pipeline
+					 */
+					logWarning( 'domconverter-transparent-rendering-unsupported-in-editing-pipeline', { viewElement: childView } );
+				}
+
+				yield this.viewToDom( childView, domDocument, options );
+			}
 
 			offset++;
 		}