@ckeditor/ckeditor5-engine 29.1.0 → 31.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-engine",
-  "version": "29.1.0",
+  "version": "31.1.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": "^29.1.0",
+    "@ckeditor/ckeditor5-utils": "^31.1.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^29.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^29.1.0",
-    "@ckeditor/ckeditor5-clipboard": "^29.1.0",
-    "@ckeditor/ckeditor5-core": "^29.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^29.1.0",
-    "@ckeditor/ckeditor5-enter": "^29.1.0",
-    "@ckeditor/ckeditor5-essentials": "^29.1.0",
-    "@ckeditor/ckeditor5-heading": "^29.1.0",
-    "@ckeditor/ckeditor5-image": "^29.1.0",
-    "@ckeditor/ckeditor5-link": "^29.1.0",
-    "@ckeditor/ckeditor5-list": "^29.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^29.1.0",
-    "@ckeditor/ckeditor5-table": "^29.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^29.1.0",
-    "@ckeditor/ckeditor5-typing": "^29.1.0",
-    "@ckeditor/ckeditor5-ui": "^29.1.0",
-    "@ckeditor/ckeditor5-undo": "^29.1.0",
-    "@ckeditor/ckeditor5-widget": "^29.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^31.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^31.1.0",
+    "@ckeditor/ckeditor5-clipboard": "^31.1.0",
+    "@ckeditor/ckeditor5-cloud-services": "^31.1.0",
+    "@ckeditor/ckeditor5-core": "^31.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^31.1.0",
+    "@ckeditor/ckeditor5-enter": "^31.1.0",
+    "@ckeditor/ckeditor5-essentials": "^31.1.0",
+    "@ckeditor/ckeditor5-heading": "^31.1.0",
+    "@ckeditor/ckeditor5-image": "^31.1.0",
+    "@ckeditor/ckeditor5-link": "^31.1.0",
+    "@ckeditor/ckeditor5-list": "^31.1.0",
+    "@ckeditor/ckeditor5-mention": "^31.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^31.1.0",
+    "@ckeditor/ckeditor5-table": "^31.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^31.1.0",
+    "@ckeditor/ckeditor5-typing": "^31.1.0",
+    "@ckeditor/ckeditor5-ui": "^31.1.0",
+    "@ckeditor/ckeditor5-undo": "^31.1.0",
+    "@ckeditor/ckeditor5-widget": "^31.1.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 the {@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 in which they are
+	// added to the model's marker collection does not affect how they are
+	// downcast. One particular use case that we are targeting here, is one where
+	// two markers are adjacent but not overlapping, such as an insertion/deletion
+	// suggestion pair representing 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 these 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 intersecting 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 through,
+ * 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 through,
+ * 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 through,
+	 * 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/markercollection.js

@@ -52,12 +52,13 @@ export default class MarkerCollection {
 	}
 
 	/**
-	 * Checks if marker with given `markerName` is in the collection.
+	 * Checks if given {@link ~Marker marker} or marker name is in the collection.
 	 *
-	 * @param {String} markerName Marker name.
-	 * @returns {Boolean} `true` if marker with given `markerName` is in the collection, `false` otherwise.
+	 * @param {String|module:engine/model/markercollection~Marker} markerOrName Name of marker or marker instance to check.
+	 * @returns {Boolean} `true` if marker is in the collection, `false` otherwise.
 	 */
-	has( markerName ) {
+	has( markerOrName ) {
+		const markerName = markerOrName instanceof Marker ? markerOrName.name : markerOrName;
 		return this._markers.has( markerName );
 	}
 

package/src/model/range.js

@@ -446,7 +446,7 @@ export default class Range {
 	 * You may specify additional options for the tree walker. See {@link module:engine/model/treewalker~TreeWalker} for
 	 * a full list of available options.
 	 *
-	 * @param {Object} options Object with configuration options. See {@link module:engine/model/treewalker~TreeWalker}.
+	 * @param {Object} [options] Object with configuration options. See {@link module:engine/model/treewalker~TreeWalker}.
 	 * @returns {Iterable.<module:engine/model/item~Item>}
 	 */
 	* getItems( options = {} ) {

package/src/model/selection.js

@@ -71,7 +71,7 @@ export default class Selection {
 	 *		// Creates backward selection.
 	 *		const selection = writer.createSelection( range, { backward: true } );
 	 *
-	 * @param {module:engine/model/selection~Selectable} selectable
+	 * @param {module:engine/model/selection~Selectable} [selectable]
 	 * @param {Number|'before'|'end'|'after'|'on'|'in'} [placeOrOffset] Sets place or offset of the selection.
 	 * @param {Object} [options]
 	 * @param {Boolean} [options.backward] Sets this selection instance to be backward.

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, i.e. when the editor data is empty or the selection is inside a 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;
 	}
 
@@ -255,35 +263,42 @@ function checkSelectionOnNonLimitElements( start, end, schema ) {
 	return startIsOnBlock || endIsOnBlock;
 }
 
-// Returns a minimal non-intersecting array of ranges.
-//
-// @param {Array.<module:engine/model/range~Range>} ranges
-// @returns {Array.<module:engine/model/range~Range>}
-function mergeIntersectingRanges( ranges ) {
-	const nonIntersectingRanges = [];
-
-	// First range will always be fine.
-	nonIntersectingRanges.push( ranges.shift() );
-
-	for ( const range of ranges ) {
-		const previousRange = nonIntersectingRanges.pop();
-
-		if ( range.isEqual( previousRange ) ) {
-			// Use only one of two identical ranges.
-			nonIntersectingRanges.push( previousRange );
-		} else if ( range.isIntersecting( previousRange ) ) {
-			// Get the sum of two ranges.
-			const start = previousRange.start.isAfter( range.start ) ? range.start : previousRange.start;
-			const end = previousRange.end.isAfter( range.end ) ? previousRange.end : range.end;
-
-			const merged = new Range( start, end );
-			nonIntersectingRanges.push( merged );
-		} else {
-			nonIntersectingRanges.push( previousRange );
-			nonIntersectingRanges.push( range );
+/**
+ * Returns a minimal non-intersecting array of ranges without duplicates.
+ *
+ * @param {Array.<module:engine/model/range~Range>} Ranges to merge.
+ * @returns {Array.<module:engine/model/range~Range>} Array of unique and nonIntersecting ranges.
+ */
+export function mergeIntersectingRanges( ranges ) {
+	const rangesToMerge = [ ...ranges ];
+	const rangeIndexesToRemove = new Set();
+	let currentRangeIndex = 1;
+
+	while ( currentRangeIndex < rangesToMerge.length ) {
+		const currentRange = rangesToMerge[ currentRangeIndex ];
+		const previousRanges = rangesToMerge.slice( 0, currentRangeIndex );
+
+		for ( const [ previousRangeIndex, previousRange ] of previousRanges.entries() ) {
+			if ( rangeIndexesToRemove.has( previousRangeIndex ) ) {
+				continue;
+			}
+
+			if ( currentRange.isEqual( previousRange ) ) {
+				rangeIndexesToRemove.add( previousRangeIndex );
+			} else if ( currentRange.isIntersecting( previousRange ) ) {
+				rangeIndexesToRemove.add( previousRangeIndex );
+				rangeIndexesToRemove.add( currentRangeIndex );
+
+				const mergedRange = currentRange.getJoined( previousRange );
+				rangesToMerge.push( mergedRange );
+			}
 		}
+
+		currentRangeIndex++;
 	}
 
+	const nonIntersectingRanges = rangesToMerge.filter( ( _, index ) => !rangeIndexesToRemove.has( index ) );
+
 	return nonIntersectingRanges;
 }
 

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.
 		 *