@ckeditor/ckeditor5-engine 30.0.0 → 31.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "30.0.0",
+  "version": "31.0.0",
   "description": "The editing engine of CKEditor 5 – the best browser-based rich text editor.",
   "keywords": [
     "wysiwyg",
@@ -23,28 +23,30 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^30.0.0",
+    "@ckeditor/ckeditor5-utils": "^31.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^30.0.0",
-    "@ckeditor/ckeditor5-block-quote": "^30.0.0",
-    "@ckeditor/ckeditor5-clipboard": "^30.0.0",
-    "@ckeditor/ckeditor5-core": "^30.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^30.0.0",
-    "@ckeditor/ckeditor5-enter": "^30.0.0",
-    "@ckeditor/ckeditor5-essentials": "^30.0.0",
-    "@ckeditor/ckeditor5-heading": "^30.0.0",
-    "@ckeditor/ckeditor5-image": "^30.0.0",
-    "@ckeditor/ckeditor5-link": "^30.0.0",
-    "@ckeditor/ckeditor5-list": "^30.0.0",
-    "@ckeditor/ckeditor5-paragraph": "^30.0.0",
-    "@ckeditor/ckeditor5-table": "^30.0.0",
-    "@ckeditor/ckeditor5-theme-lark": "^30.0.0",
-    "@ckeditor/ckeditor5-typing": "^30.0.0",
-    "@ckeditor/ckeditor5-ui": "^30.0.0",
-    "@ckeditor/ckeditor5-undo": "^30.0.0",
-    "@ckeditor/ckeditor5-widget": "^30.0.0",
+    "@ckeditor/ckeditor5-basic-styles": "^31.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^31.0.0",
+    "@ckeditor/ckeditor5-clipboard": "^31.0.0",
+    "@ckeditor/ckeditor5-cloud-services": "^31.0.0",
+    "@ckeditor/ckeditor5-core": "^31.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^31.0.0",
+    "@ckeditor/ckeditor5-enter": "^31.0.0",
+    "@ckeditor/ckeditor5-essentials": "^31.0.0",
+    "@ckeditor/ckeditor5-heading": "^31.0.0",
+    "@ckeditor/ckeditor5-image": "^31.0.0",
+    "@ckeditor/ckeditor5-link": "^31.0.0",
+    "@ckeditor/ckeditor5-list": "^31.0.0",
+    "@ckeditor/ckeditor5-mention": "^31.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^31.0.0",
+    "@ckeditor/ckeditor5-table": "^31.0.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.0.0",
+    "@ckeditor/ckeditor5-typing": "^31.0.0",
+    "@ckeditor/ckeditor5-ui": "^31.0.0",
+    "@ckeditor/ckeditor5-undo": "^31.0.0",
+    "@ckeditor/ckeditor5-widget": "^31.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
   },

package/src/controller/datacontroller.js

@@ -145,6 +145,7 @@ export default class DataController {
 
 		this.decorate( 'init' );
 		this.decorate( 'set' );
+		this.decorate( 'get' );
 
 		// Fire the `ready` event when the initialization has completed. Such low-level listener gives possibility
 		// to plug into the initialization pipeline without interrupting the initialization flow.
@@ -163,6 +164,7 @@ export default class DataController {
 	 * Returns the model's data converted by downcast dispatchers attached to {@link #downcastDispatcher} and
 	 * formatted by the {@link #processor data processor}.
 	 *
+	 * @fires get
 	 * @param {Object} [options] Additional configuration for the retrieved data. `DataController` provides two optional
 	 * properties: `rootName` and `trim`. Other properties of this object are specified by various editor features.
 	 * @param {String} [options.rootName='main'] Root name.
@@ -523,6 +525,15 @@ export default class DataController {
 	 *
 	 * @event set
 	 */
+
+	/**
+	 * Event fired after {@link #get get() method} has been run.
+	 *
+	 * The `get` event is fired by decorated {@link #get} method.
+	 * See {@link module:utils/observablemixin~ObservableMixin#decorate} for more information and samples.
+	 *
+	 * @event get
+	 */
 }
 
 mix( DataController, ObservableMixin );
@@ -559,5 +570,43 @@ function _getMarkersRelativeToElement( element ) {
 		}
 	}
 
-	return result;
+	// Sort the markers in a stable fashion to ensure that the order that they are
+	// added to the model's marker collection does not affect how they are
+	// downcast. One particular use case that we're targeting here is one where
+	// two markers are adjacent but not overlapping, such as an insertion/deletion
+	// suggestion pair represting the replacement of a range of text. In this
+	// case, putting the markers in DOM order causes the first marker's end to be
+	// serialized right after the second marker's start, while putting the markers
+	// in reverse DOM order causes it to be right before the second marker's
+	// start. So, we sort in a way that ensures non-intersecting ranges are in
+	// reverse DOM order, and intersecting ranges are in something approximating
+	// reverse DOM order (since reverse DOM order doesn't have a precise meaning
+	// when working with intersectng ranges).
+	return result.sort( ( [ n1, r1 ], [ n2, r2 ] ) => {
+		if ( r1.end.compareWith( r2.start ) !== 'after' ) {
+			// m1.end <= m2.start -- m1 is entirely <= m2
+			return 1;
+		} else if ( r1.start.compareWith( r2.end ) !== 'before' ) {
+			// m1.start >= m2.end -- m1 is entirely >= m2
+			return -1;
+		} else {
+			// they overlap, so use their start positions as the primary sort key and
+			// end positions as the secondary sort key
+			switch ( r1.start.compareWith( r2.start ) ) {
+				case 'before':
+					return 1;
+				case 'after':
+					return -1;
+				default:
+					switch ( r1.end.compareWith( r2.end ) ) {
+						case 'before':
+							return 1;
+						case 'after':
+							return -1;
+						default:
+							return n2.localeCompare( n1 );
+					}
+			}
+		}
+	} );
 }

package/src/dataprocessor/htmldataprocessor.js

@@ -28,26 +28,23 @@ export default class HtmlDataProcessor {
 		/**
 		 * A DOM parser instance used to parse an HTML string to an HTML document.
 		 *
-		 * @private
 		 * @member {DOMParser}
 		 */
-		this._domParser = new DOMParser();
+		this.domParser = new DOMParser();
 
 		/**
 		 * A DOM converter used to convert DOM elements to view elements.
 		 *
-		 * @private
 		 * @member {module:engine/view/domconverter~DomConverter}
 		 */
-		this._domConverter = new DomConverter( document, { blockFillerMode: 'nbsp' } );
+		this.domConverter = new DomConverter( document, { renderingMode: 'data' } );
 
 		/**
 		 * A basic HTML writer instance used to convert DOM elements to an HTML string.
 		 *
-		 * @private
-		 * @member {module:engine/dataprocessor/basichtmlwriter~BasicHtmlWriter}
+		 * @member {module:engine/dataprocessor/htmlwriter~HtmlWriter}
 		 */
-		this._htmlWriter = new BasicHtmlWriter();
+		this.htmlWriter = new BasicHtmlWriter();
 	}
 
 	/**
@@ -59,10 +56,10 @@ export default class HtmlDataProcessor {
 	 */
 	toData( viewFragment ) {
 		// Convert view DocumentFragment to DOM DocumentFragment.
-		const domFragment = this._domConverter.viewToDom( viewFragment, document );
+		const domFragment = this.domConverter.viewToDom( viewFragment, document );
 
 		// Convert DOM DocumentFragment to HTML output.
-		return this._htmlWriter.getHtml( domFragment );
+		return this.htmlWriter.getHtml( domFragment );
 	}
 
 	/**
@@ -76,7 +73,7 @@ export default class HtmlDataProcessor {
 		const domFragment = this._toDom( data );
 
 		// Convert DOM DocumentFragment to view DocumentFragment.
-		return this._domConverter.domToView( domFragment );
+		return this.domConverter.domToView( domFragment );
 	}
 
 	/**
@@ -90,7 +87,7 @@ export default class HtmlDataProcessor {
 	 * be treated as raw data.
 	 */
 	registerRawContentMatcher( pattern ) {
-		this._domConverter.registerRawContentMatcher( pattern );
+		this.domConverter.registerRawContentMatcher( pattern );
 	}
 
 	/**
@@ -105,7 +102,7 @@ export default class HtmlDataProcessor {
 	 * @param {'default'|'marked'} type Whether to use the default or the marked ` ` block fillers.
 	 */
 	useFillerType( type ) {
-		this._domConverter.blockFillerMode = type == 'marked' ? 'markedNbsp' : 'nbsp';
+		this.domConverter.blockFillerMode = type == 'marked' ? 'markedNbsp' : 'nbsp';
 	}
 
 	/**
@@ -117,7 +114,7 @@ export default class HtmlDataProcessor {
 	 * @returns {DocumentFragment}
 	 */
 	_toDom( data ) {
-		const document = this._domParser.parseFromString( data, 'text/html' );
+		const document = this.domParser.parseFromString( data, 'text/html' );
 		const fragment = document.createDocumentFragment();
 
 		// The rules for parsing an HTML string can be read on https://html.spec.whatwg.org/multipage/parsing.html#parsing-main-inhtml.

package/src/dataprocessor/xmldataprocessor.js

@@ -26,7 +26,7 @@ export default class XmlDataProcessor {
 	 *
 	 * @param {module:engine/view/document~Document} document The view document instance.
 	 * @param {Object} options Configuration options.
-	 * @param {Array<String>} [options.namespaces=[]] A list of namespaces allowed to use in the XML input.
+	 * @param {Array.<String>} [options.namespaces=[]] A list of namespaces allowed to use in the XML input.
 	 */
 	constructor( document, options = {} ) {
 		/**
@@ -35,35 +35,31 @@ export default class XmlDataProcessor {
 		 * For example, registering namespaces [ 'attribute', 'container' ] allows to use `<attirbute:tagName></attribute:tagName>`
 		 * and `<container:tagName></container:tagName>` input. It is mainly for debugging.
 		 *
-		 * @public
-		 * @member {DOMParser}
+		 * @member {Array.<String>}
 		 */
 		this.namespaces = options.namespaces || [];
 
 		/**
 		 * DOM parser instance used to parse an XML string to an XML document.
 		 *
-		 * @private
 		 * @member {DOMParser}
 		 */
-		this._domParser = new DOMParser();
+		this.domParser = new DOMParser();
 
 		/**
 		 * DOM converter used to convert DOM elements to view elements.
 		 *
-		 * @private
 		 * @member {module:engine/view/domconverter~DomConverter}
 		 */
-		this._domConverter = new DomConverter( document, { blockFillerMode: 'nbsp' } );
+		this.domConverter = new DomConverter( document, { renderingMode: 'data' } );
 
 		/**
 		 * A basic HTML writer instance used to convert DOM elements to an XML string.
 		 * There is no need to use a dedicated XML writer because the basic HTML writer works well in this case.
 		 *
-		 * @private
-		 * @member {module:engine/dataprocessor/basichtmlwriter~BasicHtmlWriter}
+		 * @member {module:engine/dataprocessor/htmlwriter~HtmlWriter}
 		 */
-		this._htmlWriter = new BasicHtmlWriter();
+		this.htmlWriter = new BasicHtmlWriter();
 	}
 
 	/**
@@ -75,11 +71,11 @@ export default class XmlDataProcessor {
 	 */
 	toData( viewFragment ) {
 		// Convert view DocumentFragment to DOM DocumentFragment.
-		const domFragment = this._domConverter.viewToDom( viewFragment, document );
+		const domFragment = this.domConverter.viewToDom( viewFragment, document );
 
 		// Convert DOM DocumentFragment to XML output.
 		// There is no need to use dedicated for XML serializing method because BasicHtmlWriter works well in this case.
-		return this._htmlWriter.getHtml( domFragment );
+		return this.htmlWriter.getHtml( domFragment );
 	}
 
 	/**
@@ -93,7 +89,7 @@ export default class XmlDataProcessor {
 		const domFragment = this._toDom( data );
 
 		// Convert DOM DocumentFragment to view DocumentFragment.
-		return this._domConverter.domToView( domFragment, { keepOriginalCase: true } );
+		return this.domConverter.domToView( domFragment, { keepOriginalCase: true } );
 	}
 
 	/**
@@ -107,7 +103,7 @@ export default class XmlDataProcessor {
 	 * be treated as raw data.
 	 */
 	registerRawContentMatcher( pattern ) {
-		this._domConverter.registerRawContentMatcher( pattern );
+		this.domConverter.registerRawContentMatcher( pattern );
 	}
 
 	/**
@@ -122,7 +118,7 @@ export default class XmlDataProcessor {
 	 * @param {'default'|'marked'} type Whether to use the default or the marked `&nbsp;` block fillers.
 	 */
 	useFillerType( type ) {
-		this._domConverter.blockFillerMode = type == 'marked' ? 'markedNbsp' : 'nbsp';
+		this.domConverter.blockFillerMode = type == 'marked' ? 'markedNbsp' : 'nbsp';
 	}
 
 	/**
@@ -140,7 +136,7 @@ export default class XmlDataProcessor {
 		// Wrap data into root element with optional namespace definitions.
 		data = `<xml ${ namespaces }>${ data }</xml>`;
 
-		const parsedDocument = this._domParser.parseFromString( data, 'text/xml' );
+		const parsedDocument = this.domParser.parseFromString( data, 'text/xml' );
 
 		// Parse validation.
 		const parserError = parsedDocument.querySelector( 'parsererror' );

package/src/dev-utils/view.js

@@ -39,6 +39,13 @@ const allowedTypes = {
 	'ui': UIElement,
 	'raw': RawElement
 };
+// Returns simplified implementation of {@link module:engine/view/domconverter~DomConverter#setContentOf DomConverter.setContentOf} method.
+// Used to render UIElement and RawElement.
+const domConverterStub = {
+	setContentOf: ( node, html ) => {
+		node.innerHTML = html;
+	}
+};
 
 /**
  * Writes the content of the {@link module:engine/view/document~Document document} to an HTML-like string.
@@ -59,6 +66,9 @@ const allowedTypes = {
  * {@link module:engine/view/uielement~UIElement} will be printed.
  * @param {Boolean} [options.renderRawElements=false] When set to `true`, the inner content of each
  * {@link module:engine/view/rawelement~RawElement} will be printed.
+ * @param {Object} [options.domConverter=null] When set to an actual {@link module:engine/view/domconverter~DomConverter DomConverter}
+ * instance it lets the conversion go through exactly the same flow the editing view is going, i.e. with view data
+ * filtering. Otherwise the simple stub is used.
  * @returns {String} The stringified data.
  */
 export function getData( view, options = {} ) {
@@ -75,7 +85,8 @@ export function getData( view, options = {} ) {
 		showPriority: options.showPriority,
 		renderUIElements: options.renderUIElements,
 		renderRawElements: options.renderRawElements,
-		ignoreRoot: true
+		ignoreRoot: true,
+		domConverter: options.domConverter
 	};
 
 	return withoutSelection ?
@@ -241,6 +252,9 @@ setData._parse = parse;
  * {@link module:engine/view/uielement~UIElement} will be printed.
  * @param {Boolean} [options.renderRawElements=false] When set to `true`, the inner content of each
  * {@link module:engine/view/rawelement~RawElement} will be printed.
+ * @param {Object} [options.domConverter={}] When set to an actual {@link module:engine/view/domconverter~DomConverter DomConverter}
+ * instance it lets the conversion go through exactly the same flow the editing view is going, i.e. with view data
+ * filtering. Otherwise the simple stub is used.
  * @returns {String} An HTML-like string representing the view.
  */
 export function stringify( node, selectionOrPositionOrRange = null, options = {} ) {
@@ -630,6 +644,9 @@ class ViewStringify {
 	 * @param {Boolean} [options.renderUIElements=false] When set to `true`, the inner content of each
 	 * {@link module:engine/view/uielement~UIElement} will be printed.
 	 * @param {Boolean} [options.renderRawElements=false] When set to `true`, the inner content of each
+	 * @param {Object} [options.domConverter={}] When set to an actual {@link module:engine/view/domconverter~DomConverter DomConverter}
+	 * instance it lets the conversion go through exactly the same flow the editing view is going, i.e. with view data
+	 * filtering. Otherwise the simple stub is used.
 	 * {@link module:engine/view/rawelement~RawElement} will be printed.
 	 */
 	constructor( root, selection, options ) {
@@ -648,6 +665,7 @@ class ViewStringify {
 		this.sameSelectionCharacters = !!options.sameSelectionCharacters;
 		this.renderUIElements = !!options.renderUIElements;
 		this.renderRawElements = !!options.renderRawElements;
+		this.domConverter = options.domConverter || domConverterStub;
 	}
 
 	/**
@@ -681,12 +699,12 @@ class ViewStringify {
 			}
 
 			if ( ( this.renderUIElements && root.is( 'uiElement' ) ) ) {
-				callback( root.render( document ).innerHTML );
+				callback( root.render( document, this.domConverter ).innerHTML );
 			} else if ( this.renderRawElements && root.is( 'rawElement' ) ) {
 				// There's no DOM element for "root" to pass to render(). Creating
 				// a surrogate container to render the children instead.
 				const rawContentContainer = document.createElement( 'div' );
-				root.render( rawContentContainer );
+				root.render( rawContentContainer, this.domConverter );
 
 				callback( rawContentContainer.innerHTML );
 			} else {

package/src/model/utils/selection-post-fixer.js

@@ -128,9 +128,17 @@ function tryFixingCollapsedRange( range, schema ) {
 
 	const nearestSelectionRange = schema.getNearestSelectionRange( originalPosition );
 
-	// This might be null ie when editor data is empty.
-	// In such cases there is no need to fix the selection range.
+	// This might be null ie when editor data is empty or the selection is inside limit element
+	// that doesn't allow text inside.
+	// In the first case there is no need to fix the selection range.
+	// In the second let's go up to the outer selectable element
 	if ( !nearestSelectionRange ) {
+		const ancestorObject = originalPosition.getAncestors().reverse().find( item => schema.isObject( item ) );
+
+		if ( ancestorObject ) {
+			return Range._createOn( ancestorObject );
+		}
+
 		return null;
 	}
 

package/src/view/document.js

@@ -80,6 +80,18 @@ export default class Document {
 		 */
 		this.set( 'isFocused', false );
 
+		/**
+		 * `true` while the user is making a selection in the document (e.g. holding the mouse button and moving the cursor).
+		 * When they stop selecting, the property goes back to `false`.
+		 *
+		 * This property is updated by the {@link module:engine/view/observer/selectionobserver~SelectionObserver}.
+		 *
+		 * @readonly
+		 * @observable
+		 * @member {Boolean} module:engine/view/document~Document#isSelecting
+		 */
+		this.set( 'isSelecting', false );
+
 		/**
 		 * True if composition is in progress inside the document.
 		 *

package/src/view/domconverter.js

@@ -7,7 +7,7 @@
  * @module engine/view/domconverter
  */
 
-/* globals document, Node, Text */
+/* globals document, Node, NodeFilter, DOMParser, Text */
 
 import ViewText from './text';
 import ViewElement from './element';
@@ -51,7 +51,12 @@ export default class DomConverter {
 	 *
 	 * @param {module:engine/view/document~Document} document The view document instance.
 	 * @param {Object} options An object with configuration options.
-	 * @param {module:engine/view/filler~BlockFillerMode} [options.blockFillerMode='br'] The type of the block filler to use.
+	 * @param {module:engine/view/filler~BlockFillerMode} [options.blockFillerMode] The type of the block filler to use.
+	 * Default value depends on the options.renderingMode:
+	 *  'nbsp' when options.renderingMode == 'data',
+	 *  'br' when options.renderingMode == 'editing'.
+	 * @param {'data'|'editing'} [options.renderingMode='editing'] Whether to leave the View-to-DOM conversion result unchanged
+	 * or improve editing experience by filtering out interactive data.
 	 */
 	constructor( document, options = {} ) {
 		/**
@@ -60,12 +65,27 @@ export default class DomConverter {
 		 */
 		this.document = document;
 
+		/**
+		 * Whether to leave the View-to-DOM conversion result unchanged or improve editing experience by filtering out interactive data.
+		 *
+		 * @member {'data'|'editing'} module:engine/view/domconverter~DomConverter#renderingMode
+		 */
+		this.renderingMode = options.renderingMode || 'editing';
+
+		/**
+		 * Main switch for new rendering approach in the editing view.
+		 *
+		 * @protected
+		 * @member {Boolean}
+		 */
+		this.experimentalRenderingMode = false;
+
 		/**
 		 * The mode of a block filler used by the DOM converter.
 		 *
 		 * @member {'br'|'nbsp'|'markedNbsp'} module:engine/view/domconverter~DomConverter#blockFillerMode
 		 */
-		this.blockFillerMode = options.blockFillerMode || 'br';
+		this.blockFillerMode = options.blockFillerMode || ( this.renderingMode === 'editing' ? 'br' : 'nbsp' );
 
 		/**
 		 * Elements which are considered pre-formatted elements.
@@ -221,6 +241,82 @@ export default class DomConverter {
 		this._viewToDomMapping.set( viewFragment, domFragment );
 	}
 
+	/**
+	 * Decides whether given pair of attribute key and value should be passed further down the pipeline.
+	 *
+	 * @param {String} attributeKey
+	 * @param {String} attributeValue
+	 * @returns {Boolean}
+	 */
+	shouldRenderAttribute( attributeKey, attributeValue ) {
+		if ( !this.experimentalRenderingMode || this.renderingMode === 'data' ) {
+			return true;
+		}
+
+		return !( attributeKey.toLowerCase().startsWith( 'on' ) ||
+			attributeValue.match( /(\b)(on\S+)(\s*)=|javascript:|(<\s*)(\/*)script/i ) ||
+			attributeValue.match( /data:(?!image\/(png|jpeg|gif|webp))/i )
+		);
+	}
+
+	/**
+	 * Set `domElement`'s content using provided `html` argument. Apply necessary filtering for the editing pipeline.
+	 *
+	 * @param {Element} domElement DOM element that should have `html` set as its content.
+	 * @param {String} html Textual representation of the HTML that will be set on `domElement`.
+	 */
+	setContentOf( domElement, html ) {
+		// For data pipeline we pass the HTML as-is.
+		if ( !this.experimentalRenderingMode || this.renderingMode === 'data' ) {
+			domElement.innerHTML = html;
+
+			return;
+		}
+
+		const document = new DOMParser().parseFromString( html, 'text/html' );
+		const fragment = document.createDocumentFragment();
+		const bodyChildNodes = document.body.childNodes;
+
+		while ( bodyChildNodes.length > 0 ) {
+			fragment.appendChild( bodyChildNodes[ 0 ] );
+		}
+
+		const treeWalker = document.createTreeWalker( fragment, NodeFilter.SHOW_ELEMENT );
+		const nodes = [];
+
+		let currentNode;
+
+		// eslint-disable-next-line no-cond-assign
+		while ( currentNode = treeWalker.nextNode() ) {
+			nodes.push( currentNode );
+		}
+
+		for ( const currentNode of nodes ) {
+			// Go through nodes to remove those that are prohibited in editing pipeline.
+			for ( const attributeName of currentNode.getAttributeNames() ) {
+				const attributeValue = currentNode.getAttribute( attributeName );
+
+				if ( !this.shouldRenderAttribute( attributeName, attributeValue ) ) {
+					currentNode.removeAttribute( attributeName );
+				}
+			}
+
+			const elementName = currentNode.tagName.toLowerCase();
+
+			// There are certain nodes, that should be renamed to <span> in editing pipeline.
+			if ( this._shouldRenameElement( elementName ) ) {
+				currentNode.replaceWith( this._createReplacementDomElement( elementName, currentNode ) );
+			}
+		}
+
+		// Empty the target element.
+		while ( domElement.firstChild ) {
+			domElement.firstChild.remove();
+		}
+
+		domElement.append( fragment );
+	}
+
 	/**
 	 * Converts the view to the DOM. For all text nodes, not bound elements and document fragments new items will
 	 * be created. For bound elements and document fragments the method will return corresponding items.
@@ -257,7 +353,7 @@ export default class DomConverter {
 					domElement = domDocument.createComment( viewNode.getCustomProperty( '$rawContent' ) );
 				} else {
 					// UIElement has its own render() method (see #799).
-					domElement = viewNode.render( domDocument );
+					domElement = viewNode.render( domDocument, this );
 				}
 
 				if ( options.bind ) {
@@ -267,7 +363,9 @@ export default class DomConverter {
 				return domElement;
 			} else {
 				// Create DOM element.
-				if ( viewNode.hasAttribute( 'xmlns' ) ) {
+				if ( this._shouldRenameElement( viewNode.name ) ) {
+					domElement = this._createReplacementDomElement( viewNode.name );
+				} else if ( viewNode.hasAttribute( 'xmlns' ) ) {
 					domElement = domDocument.createElementNS( viewNode.getAttribute( 'xmlns' ), viewNode.name );
 				} else {
 					domElement = domDocument.createElement( viewNode.name );
@@ -276,7 +374,7 @@ export default class DomConverter {
 				// RawElement take care of their children in RawElement#render() method which can be customized
 				// (see https://github.com/ckeditor/ckeditor5/issues/4469).
 				if ( viewNode.is( 'rawElement' ) ) {
-					viewNode.render( domElement );
+					viewNode.render( domElement, this );
 				}
 
 				if ( options.bind ) {
@@ -285,7 +383,13 @@ export default class DomConverter {
 
 				// Copy element's attributes.
 				for ( const key of viewNode.getAttributeKeys() ) {
-					domElement.setAttribute( key, viewNode.getAttribute( key ) );
+					const value = viewNode.getAttribute( key );
+
+					if ( !this.shouldRenderAttribute( key, value ) ) {
+						continue;
+					}
+
+					domElement.setAttribute( key, value );
 				}
 			}
 
@@ -603,10 +707,10 @@ export default class DomConverter {
 	 * If structures are too different and it is not possible to find corresponding position then `null` will be returned.
 	 *
 	 * @param {Node} domParent DOM position parent.
-	 * @param {Number} domOffset DOM position offset.
+	 * @param {Number} [domOffset=0] DOM position offset. You can skip it when converting the inline filler node.
 	 * @returns {module:engine/view/position~Position} viewPosition View position.
 	 */
-	domPositionToView( domParent, domOffset ) {
+	domPositionToView( domParent, domOffset = 0 ) {
 		if ( this.isBlockFiller( domParent ) ) {
 			return this.domPositionToView( domParent.parentNode, indexOf( domParent ) );
 		}
@@ -1373,6 +1477,45 @@ export default class DomConverter {
 	_isViewElementWithRawContent( viewElement, options ) {
 		return options.withChildren !== false && this._rawContentElementMatcher.match( viewElement );
 	}
+
+	/**
+	 * Checks whether given element name should be renamed in a current rendering mode.
+	 *
+	 * @private
+	 * @param {String} elementName The name of view element.
+	 * @returns {Boolean}
+	 */
+	_shouldRenameElement( elementName ) {
+		return this.experimentalRenderingMode && this.renderingMode == 'editing' && elementName == 'script';
+	}
+
+	/**
+	 * Return a <span> element with special attribute holding the name of the original element.
+	 * Optionally, copy all the attributes of the original element if that element is provided.
+	 *
+	 * @private
+	 * @param {String} elementName The name of view element.
+	 * @param {Element} [originalDomElement] The original DOM element to copy attributes and content from.
+	 * @returns {Element}
+	 */
+	_createReplacementDomElement( elementName, originalDomElement = null ) {
+		const newDomElement = document.createElement( 'span' );
+
+		// Mark the span replacing a script as hidden.
+		newDomElement.setAttribute( 'data-ck-hidden', elementName );
+
+		if ( originalDomElement ) {
+			while ( originalDomElement.firstChild ) {
+				newDomElement.appendChild( originalDomElement.firstChild );
+			}
+
+			for ( const attributeName of originalDomElement.getAttributeNames() ) {
+				newDomElement.setAttribute( attributeName, originalDomElement.getAttribute( attributeName ) );
+			}
+		}
+
+		return newDomElement;
+	}
 }
 
 // Helper function.

package/src/view/observer/selectionobserver.js

@@ -20,6 +20,8 @@ import { debounce } from 'lodash-es';
  * {@link module:engine/view/document~Document#event:selectionChange} event only if a selection change was the only change in the document
  * and the DOM selection is different then the view selection.
  *
+ * This observer also manages the {@link module:engine/view/document~Document#isSelecting} property of the view document.
+ *
  * Note that this observer is attached by the {@link module:engine/view/view~View} and is available by default.
  *
  * @see module:engine/view/observer/mutationobserver~MutationObserver
@@ -78,8 +80,26 @@ export default class SelectionObserver extends Observer {
 		 */
 		this._fireSelectionChangeDoneDebounced = debounce( data => this.document.fire( 'selectionChangeDone', data ), 200 );
 
+		/**
+		 * When called, starts clearing the {@link #_loopbackCounter} counter in intervals of time. When the number of selection
+		 * changes exceeds a certain limit within the interval of time, the observer will not fire `selectionChange` but warn about
+		 * possible infinite selection loop.
+		 *
+		 * @private
+		 * @member {Number} #_clearInfiniteLoopInterval
+		 */
 		this._clearInfiniteLoopInterval = setInterval( () => this._clearInfiniteLoop(), 1000 );
 
+		/**
+		 * Unlocks the `isSelecting` state of the view document in case the selection observer did not record this fact
+		 * correctly (for whatever the reason). It is a safeguard (paranoid check) that returns document to the normal state
+		 * after a certain period of time (debounced, postponed by each selectionchange event).
+		 *
+		 * @private
+		 * @method #_documentIsSelectingInactivityTimeoutDebounced
+		 */
+		this._documentIsSelectingInactivityTimeoutDebounced = debounce( () => ( this.document.isSelecting = false ), 5000 );
+
 		/**
 		 * Private property to check if the code does not enter infinite loop.
 		 *
@@ -95,13 +115,39 @@ export default class SelectionObserver extends Observer {
 	observe( domElement ) {
 		const domDocument = domElement.ownerDocument;
 
-		// Add listener once per each document.
+		const startDocumentIsSelecting = () => {
+			this.document.isSelecting = true;
+
+			// Let's activate the safety timeout each time the document enters the "is selecting" state.
+			this._documentIsSelectingInactivityTimeoutDebounced();
+		};
+
+		const endDocumentIsSelecting = () => {
+			this.document.isSelecting = false;
+
+			// The safety timeout can be canceled when the document leaves the "is selecting" state.
+			this._documentIsSelectingInactivityTimeoutDebounced.cancel();
+		};
+
+		// The document has the "is selecting" state while the user keeps making (extending) the selection
+		// (e.g. by holding the mouse button and moving the cursor). The state resets when they either released
+		// the mouse button or interrupted the process by pressing or releasing any key.
+		this.listenTo( domElement, 'selectstart', startDocumentIsSelecting, { priority: 'highest' } );
+		this.listenTo( domElement, 'keydown', endDocumentIsSelecting, { priority: 'highest' } );
+		this.listenTo( domElement, 'keyup', endDocumentIsSelecting, { priority: 'highest' } );
+
+		// Add document-wide listeners only once. This method could be called for multiple editing roots.
 		if ( this._documents.has( domDocument ) ) {
 			return;
 		}
 
+		this.listenTo( domDocument, 'mouseup', endDocumentIsSelecting, { priority: 'highest' } );
 		this.listenTo( domDocument, 'selectionchange', ( evt, domEvent ) => {
 			this._handleSelectionChange( domEvent, domDocument );
+
+			// Defer the safety timeout when the selection changes (e.g. the user keeps extending the selection
+			// using their mouse).
+			this._documentIsSelectingInactivityTimeoutDebounced();
 		} );
 
 		this._documents.add( domDocument );
@@ -115,6 +161,7 @@ export default class SelectionObserver extends Observer {
 
 		clearInterval( this._clearInfiniteLoopInterval );
 		this._fireSelectionChangeDoneDebounced.cancel();
+		this._documentIsSelectingInactivityTimeoutDebounced.cancel();
 	}
 
 	/**

package/src/view/rawelement.js

@@ -131,12 +131,13 @@ export default class RawElement extends Element {
 	 *
 	 *		const myRawElement = downcastWriter.createRawElement( 'div' );
 	 *
-	 *		myRawElement.render = function( domElement ) {
-	 *			domElement.innerHTML = '<b>This is the raw content of myRawElement.</b>';
+	 *		myRawElement.render = function( domElement, domConverter ) {
+	 *			domConverter.setContentOf( domElement, '<b>This is the raw content of myRawElement.</b>' );
 	 *		};
 	 *
 	 * @method #render
 	 * @param {HTMLElement} domElement The native DOM element representing the raw view element.
+	 * @param {module:engine/view/domconverter~DomConverter} domConverter Instance of the DomConverter used to optimize the output.
 	 */
 }
 

package/src/view/renderer.js

@@ -24,6 +24,8 @@ import isNode from '@ckeditor/ckeditor5-utils/src/dom/isnode';
 import fastDiff from '@ckeditor/ckeditor5-utils/src/fastdiff';
 import env from '@ckeditor/ckeditor5-utils/src/env';
 
+import '../../theme/renderer.css';
+
 /**
  * Renderer is responsible for updating the DOM structure and the DOM selection based on
  * the {@link module:engine/view/renderer~Renderer#markToSync information about updated view nodes}.
@@ -98,8 +100,34 @@ export default class Renderer {
 		 * this is set to `false`.
 		 *
 		 * @member {Boolean}
+		 * @observable
+		 */
+		this.set( 'isFocused', false );
+
+		/**
+		 * Indicates whether the user is making a selection in the document (e.g. holding the mouse button and moving the cursor).
+		 * When they stop selecting, the property goes back to `false`.
+		 *
+		 * Note: In some browsers, the renderer will stop rendering the selection and inline fillers while the user is making
+		 * a selection to avoid glitches in DOM selection
+		 * (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).
+		 *
+		 * @member {Boolean}
+		 * @observable
 		 */
-		this.isFocused = false;
+		this.set( 'isSelecting', false );
+
+		// Rendering the selection and inline filler manipulation should be postponed in (non-Android) Blink until the user finishes
+		// creating the selection in DOM to avoid accidental selection collapsing
+		// (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).
+		// When the user stops, selecting, all pending changes should be rendered ASAP, though.
+		if ( env.isBlink && !env.isAndroid ) {
+			this.on( 'change:isSelecting', () => {
+				if ( !this.isSelecting ) {
+					this.render();
+				}
+			} );
+		}
 
 		/**
 		 * The text node in which the inline filler was rendered.
@@ -170,29 +198,41 @@ export default class Renderer {
 	 */
 	render() {
 		let inlineFillerPosition;
+		const isInlineFillerRenderingPossible = env.isBlink && !env.isAndroid ? !this.isSelecting : true;
 
 		// Refresh mappings.
 		for ( const element of this.markedChildren ) {
 			this._updateChildrenMappings( element );
 		}
 
-		// There was inline filler rendered in the DOM but it's not
-		// at the selection position any more, so we can remove it
-		// (cause even if it's needed, it must be placed in another location).
-		if ( this._inlineFiller && !this._isSelectionInInlineFiller() ) {
-			this._removeInlineFiller();
-		}
+		// Don't manipulate inline fillers while the selection is being made in (non-Android) Blink to prevent accidental
+		// DOM selection collapsing
+		// (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).
+		if ( isInlineFillerRenderingPossible ) {
+			// There was inline filler rendered in the DOM but it's not
+			// at the selection position any more, so we can remove it
+			// (cause even if it's needed, it must be placed in another location).
+			if ( this._inlineFiller && !this._isSelectionInInlineFiller() ) {
+				this._removeInlineFiller();
+			}
 
-		// If we've got the filler, let's try to guess its position in the view.
-		if ( this._inlineFiller ) {
-			inlineFillerPosition = this._getInlineFillerPosition();
-		}
-		// Otherwise, if it's needed, create it at the selection position.
-		else if ( this._needsInlineFillerAtSelection() ) {
-			inlineFillerPosition = this.selection.getFirstPosition();
+			// If we've got the filler, let's try to guess its position in the view.
+			if ( this._inlineFiller ) {
+				inlineFillerPosition = this._getInlineFillerPosition();
+			}
+			// Otherwise, if it's needed, create it at the selection position.
+			else if ( this._needsInlineFillerAtSelection() ) {
+				inlineFillerPosition = this.selection.getFirstPosition();
 
-			// Do not use `markToSync` so it will be added even if the parent is already added.
-			this.markedChildren.add( inlineFillerPosition.parent );
+				// Do not use `markToSync` so it will be added even if the parent is already added.
+				this.markedChildren.add( inlineFillerPosition.parent );
+			}
+		}
+		// Paranoid check: we make sure the inline filler has any parent so it can be mapped to view position
+		// by DomConverter.
+		else if ( this._inlineFiller && this._inlineFiller.parentNode ) {
+			// While the user is making selection, preserve the inline filler at its original position.
+			inlineFillerPosition = this.domConverter.domPositionToView( this._inlineFiller );
 		}
 
 		for ( const element of this.markedAttributes ) {
@@ -209,26 +249,30 @@ export default class Renderer {
 			}
 		}
 
-		// Check whether the inline filler is required and where it really is in the DOM.
-		// At this point in most cases it will be in the DOM, but there are exceptions.
-		// For example, if the inline filler was deep in the created DOM structure, it will not be created.
-		// Similarly, if it was removed at the beginning of this function and then neither text nor children were updated,
-		// it will not be present.
-		// Fix those and similar scenarios.
-		if ( inlineFillerPosition ) {
-			const fillerDomPosition = this.domConverter.viewPositionToDom( inlineFillerPosition );
-			const domDocument = fillerDomPosition.parent.ownerDocument;
-
-			if ( !startsWithFiller( fillerDomPosition.parent ) ) {
-				// Filler has not been created at filler position. Create it now.
-				this._inlineFiller = addInlineFiller( domDocument, fillerDomPosition.parent, fillerDomPosition.offset );
+		// * Check whether the inline filler is required and where it really is in the DOM.
+		//   At this point in most cases it will be in the DOM, but there are exceptions.
+		//   For example, if the inline filler was deep in the created DOM structure, it will not be created.
+		//   Similarly, if it was removed at the beginning of this function and then neither text nor children were updated,
+		//   it will not be present. Fix those and similar scenarios.
+		// * Don't manipulate inline fillers while the selection is being made in (non-Android) Blink to prevent accidental
+		//   DOM selection collapsing
+		//   (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).
+		if ( isInlineFillerRenderingPossible ) {
+			if ( inlineFillerPosition ) {
+				const fillerDomPosition = this.domConverter.viewPositionToDom( inlineFillerPosition );
+				const domDocument = fillerDomPosition.parent.ownerDocument;
+
+				if ( !startsWithFiller( fillerDomPosition.parent ) ) {
+					// Filler has not been created at filler position. Create it now.
+					this._inlineFiller = addInlineFiller( domDocument, fillerDomPosition.parent, fillerDomPosition.offset );
+				} else {
+					// Filler has been found, save it.
+					this._inlineFiller = fillerDomPosition.parent;
+				}
 			} else {
-				// Filler has been found, save it.
-				this._inlineFiller = fillerDomPosition.parent;
+				// There is no filler needed.
+				this._inlineFiller = null;
 			}
-		} else {
-			// There is no filler needed.
-			this._inlineFiller = null;
 		}
 
 		// First focus the new editing host, then update the selection.
@@ -401,7 +445,7 @@ export default class Renderer {
 		}
 
 		if ( isInlineFiller( domFillerNode ) ) {
-			domFillerNode.parentNode.removeChild( domFillerNode );
+			domFillerNode.remove();
 		} else {
 			domFillerNode.data = domFillerNode.data.substr( INLINE_FILLER_LENGTH );
 		}
@@ -511,11 +555,23 @@ export default class Renderer {
 
 		// Add or overwrite attributes.
 		for ( const key of viewAttrKeys ) {
-			domElement.setAttribute( key, viewElement.getAttribute( key ) );
+			const value = viewElement.getAttribute( key );
+
+			if ( !this.domConverter.shouldRenderAttribute( key, value ) ) {
+				domElement.removeAttribute( key );
+			} else {
+				domElement.setAttribute( key, value );
+			}
 		}
 
 		// Remove from DOM attributes which do not exists in the view.
 		for ( const key of domAttrKeys ) {
+			// Do not remove attributes on `script` elements with special data attributes `data-ck-hidden`.
+			if ( viewElement.name === 'script' && key === 'data-ck-hidden' ) {
+				continue;
+			}
+
+			// All other attributes not present in the DOM should be removed.
 			if ( !viewElement.hasAttribute( key ) ) {
 				domElement.removeAttribute( key );
 			}
@@ -543,7 +599,7 @@ export default class Renderer {
 		const inlineFillerPosition = options.inlineFillerPosition;
 		const actualDomChildren = this.domConverter.mapViewToDom( viewElement ).childNodes;
 		const expectedDomChildren = Array.from(
-			this.domConverter.viewChildrenToDom( viewElement, domElement.ownerDocument, { bind: true, inlineFillerPosition } )
+			this.domConverter.viewChildrenToDom( viewElement, domElement.ownerDocument, { bind: true } )
 		);
 
 		// Inline filler element has to be created as it is present in the DOM, but not in the view. It is required
@@ -684,6 +740,14 @@ export default class Renderer {
 	 * @private
 	 */
 	_updateSelection() {
+		// Block updating DOM selection in (non-Android) Blink while the user is selecting to prevent accidental selection collapsing.
+		// Note: Structural changes in DOM must trigger selection rendering, though. Nodes the selection was anchored
+		// to may disappear in DOM which would break the selection (e.g. in real-time collaboration scenarios).
+		// https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723
+		if ( env.isBlink && !env.isAndroid && this.isSelecting && !this.markedChildren.size ) {
+			return;
+		}
+
 		// If there is no selection - remove DOM and fake selections.
 		if ( this.selection.rangeCount === 0 ) {
 			this._removeDomSelection();

package/src/view/uielement.js

@@ -126,9 +126,10 @@ export default class UIElement extends Element {
 	 * Do not use inheritance to create custom rendering method, replace `render()` method instead:
 	 *
 	 *		const myUIElement = downcastWriter.createUIElement( 'span' );
-	 *		myUIElement.render = function( domDocument ) {
+	 *		myUIElement.render = function( domDocument, domConverter ) {
 	 *			const domElement = this.toDomElement( domDocument );
-	 *			domElement.innerHTML = '<b>this is ui element</b>';
+	 *
+	 *			domConverter.setContentOf( domElement, '<b>this is ui element</b>' );
 	 *
 	 *			return domElement;
 	 *		};
@@ -138,9 +139,11 @@ export default class UIElement extends Element {
 	 * after rendering your UI element.
 	 *
 	 * @param {Document} domDocument
+	 * @param {module:engine/view/domconverter~DomConverter} domConverter Instance of the DomConverter used to optimize the output.
 	 * @returns {HTMLElement}
 	 */
 	render( domDocument ) {
+		// Provide basic, default output.
 		return this.toDomElement( domDocument );
 	}
 

package/src/view/view.js

@@ -116,7 +116,7 @@ export default class View {
 		 * @type {module:engine/view/renderer~Renderer}
 		 */
 		this._renderer = new Renderer( this.domConverter, this.document.selection );
-		this._renderer.bind( 'isFocused' ).to( this.document );
+		this._renderer.bind( 'isFocused', 'isSelecting' ).to( this.document );
 
 		/**
 		 * A DOM root attributes cache. It saves the initial values of DOM root attributes before the DOM element

package/theme/renderer.css

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* Elements marked by the Renderer as hidden should be invisible in the editor. */
+.ck.ck-editor__editable span[data-ck-hidden] {
+	display: none;
+}