@ckeditor/ckeditor5-engine 34.0.0 → 35.0.0

package/src/view/domconverter.js

@@ -7,7 +7,7 @@
  * @module engine/view/domconverter
  */
 
-/* globals document, Node, NodeFilter, DOMParser, Text */
+/* globals Node, NodeFilter, DOMParser, Text */
 
 import ViewText from './text';
 import ViewElement from './element';
@@ -30,12 +30,11 @@ import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
 import isText from '@ckeditor/ckeditor5-utils/src/dom/istext';
 import isComment from '@ckeditor/ckeditor5-utils/src/dom/iscomment';
 
-const BR_FILLER_REF = BR_FILLER( document ); // eslint-disable-line new-cap
-const NBSP_FILLER_REF = NBSP_FILLER( document ); // eslint-disable-line new-cap
-const MARKED_NBSP_FILLER_REF = MARKED_NBSP_FILLER( document ); // eslint-disable-line new-cap
+const BR_FILLER_REF = BR_FILLER( global.document ); // eslint-disable-line new-cap
+const NBSP_FILLER_REF = NBSP_FILLER( global.document ); // eslint-disable-line new-cap
+const MARKED_NBSP_FILLER_REF = MARKED_NBSP_FILLER( global.document ); // eslint-disable-line new-cap
 const UNSAFE_ATTRIBUTE_NAME_PREFIX = 'data-ck-unsafe-attribute-';
 const UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE = 'data-ck-unsafe-element';
-const UNSAFE_ELEMENTS = [ 'script', 'style' ];
 
 /**
  * `DomConverter` is a set of tools to do transformations between DOM nodes and view nodes. It also handles
@@ -127,6 +126,23 @@ export default class DomConverter {
 			'object', 'iframe', 'input', 'button', 'textarea', 'select', 'option', 'video', 'embed', 'audio', 'img', 'canvas'
 		];
 
+		/**
+		 * A list of elements which may affect the editing experience. To avoid this, those elements are replaced with
+		 * `<span data-ck-unsafe-element="[element name]"></span>` while rendering in the editing mode.
+		 *
+		 * @readonly
+		 * @member {Array.<String>} module:engine/view/domconverter~DomConverter#unsafeElements
+		 */
+		this.unsafeElements = [ 'script', 'style' ];
+
+		/**
+		 * The DOM Document used to create DOM nodes.
+		 *
+		 * @type {Document}
+		 * @private
+		 */
+		this._domDocument = this.renderingMode === 'editing' ? global.document : global.document.implementation.createHTMLDocument( '' );
+
 		/**
 		 * The DOM-to-view mapping.
 		 *
@@ -344,17 +360,16 @@ export default class DomConverter {
 	 *
 	 * @param {module:engine/view/node~Node|module:engine/view/documentfragment~DocumentFragment} viewNode
 	 * View node or document fragment to transform.
-	 * @param {Document} domDocument Document which will be used to create DOM nodes.
 	 * @param {Object} [options] Conversion options.
 	 * @param {Boolean} [options.bind=false] Determines whether new elements will be bound.
 	 * @param {Boolean} [options.withChildren=true] If `true`, node's and document fragment's children will be converted too.
 	 * @returns {Node|DocumentFragment} Converted node or DocumentFragment.
 	 */
-	viewToDom( viewNode, domDocument, options = {} ) {
+	viewToDom( viewNode, options = {} ) {
 		if ( viewNode.is( '$text' ) ) {
 			const textData = this._processDataFromViewText( viewNode );
 
-			return domDocument.createTextNode( textData );
+			return this._domDocument.createTextNode( textData );
 		} else {
 			if ( this.mapViewToDom( viewNode ) ) {
 				return this.mapViewToDom( viewNode );
@@ -364,17 +379,17 @@ export default class DomConverter {
 
 			if ( viewNode.is( 'documentFragment' ) ) {
 				// Create DOM document fragment.
-				domElement = domDocument.createDocumentFragment();
+				domElement = this._domDocument.createDocumentFragment();
 
 				if ( options.bind ) {
 					this.bindDocumentFragments( domElement, viewNode );
 				}
 			} else if ( viewNode.is( 'uiElement' ) ) {
 				if ( viewNode.name === '$comment' ) {
-					domElement = domDocument.createComment( viewNode.getCustomProperty( '$rawContent' ) );
+					domElement = this._domDocument.createComment( viewNode.getCustomProperty( '$rawContent' ) );
 				} else {
 					// UIElement has its own render() method (see #799).
-					domElement = viewNode.render( domDocument, this );
+					domElement = viewNode.render( this._domDocument, this );
 				}
 
 				if ( options.bind ) {
@@ -389,9 +404,9 @@ export default class DomConverter {
 
 					domElement = this._createReplacementDomElement( viewNode.name );
 				} else if ( viewNode.hasAttribute( 'xmlns' ) ) {
-					domElement = domDocument.createElementNS( viewNode.getAttribute( 'xmlns' ), viewNode.name );
+					domElement = this._domDocument.createElementNS( viewNode.getAttribute( 'xmlns' ), viewNode.name );
 				} else {
-					domElement = domDocument.createElement( viewNode.name );
+					domElement = this._domDocument.createElement( viewNode.name );
 				}
 
 				// RawElement take care of their children in RawElement#render() method which can be customized
@@ -411,7 +426,7 @@ export default class DomConverter {
 			}
 
 			if ( options.withChildren !== false ) {
-				for ( const child of this.viewChildrenToDom( viewNode, domDocument, options ) ) {
+				for ( const child of this.viewChildrenToDom( viewNode, options ) ) {
 					domElement.appendChild( child );
 				}
 			}
@@ -480,23 +495,22 @@ export default class DomConverter {
 	 * Additionally, this method adds block {@link module:engine/view/filler filler} to the list of children, if needed.
 	 *
 	 * @param {module:engine/view/element~Element|module:engine/view/documentfragment~DocumentFragment} viewElement Parent view element.
-	 * @param {Document} domDocument Document which will be used to create DOM nodes.
 	 * @param {Object} options See {@link module:engine/view/domconverter~DomConverter#viewToDom} options parameter.
 	 * @returns {Iterable.<Node>} DOM nodes.
 	 */
-	* viewChildrenToDom( viewElement, domDocument, options = {} ) {
+	* viewChildrenToDom( viewElement, options = {} ) {
 		const fillerPositionOffset = viewElement.getFillerOffset && viewElement.getFillerOffset();
 		let offset = 0;
 
 		for ( const childView of viewElement.getChildren() ) {
 			if ( fillerPositionOffset === offset ) {
-				yield this._getBlockFiller( domDocument );
+				yield this._getBlockFiller();
 			}
 
 			const transparentRendering = childView.is( 'element' ) && childView.getCustomProperty( 'dataPipeline:transparentRendering' );
 
 			if ( transparentRendering && this.renderingMode == 'data' ) {
-				yield* this.viewChildrenToDom( childView, domDocument, options );
+				yield* this.viewChildrenToDom( childView, options );
 			} else {
 				if ( transparentRendering ) {
 					/**
@@ -507,14 +521,14 @@ export default class DomConverter {
 					logWarning( 'domconverter-transparent-rendering-unsupported-in-editing-pipeline', { viewElement: childView } );
 				}
 
-				yield this.viewToDom( childView, domDocument, options );
+				yield this.viewToDom( childView, options );
 			}
 
 			offset++;
 		}
 
 		if ( fillerPositionOffset === offset ) {
-			yield this._getBlockFiller( domDocument );
+			yield this._getBlockFiller();
 		}
 	}
 
@@ -529,7 +543,7 @@ export default class DomConverter {
 		const domStart = this.viewPositionToDom( viewRange.start );
 		const domEnd = this.viewPositionToDom( viewRange.end );
 
-		const domRange = document.createRange();
+		const domRange = this._domDocument.createRange();
 		domRange.setStart( domStart.parent, domStart.offset );
 		domRange.setEnd( domEnd.parent, domEnd.offset );
 
@@ -672,7 +686,7 @@ export default class DomConverter {
 				const attrs = domNode.attributes;
 
 				if ( attrs ) {
-					for ( let i = attrs.length - 1; i >= 0; i-- ) {
+					for ( let l = attrs.length, i = 0; i < l; i++ ) {
 						viewElement._setAttribute( attrs[ i ].name, attrs[ i ].value );
 					}
 				}
@@ -1091,7 +1105,7 @@ export default class DomConverter {
 
 		// Since it takes multiple lines of code to check whether a "DOM Position" is before/after another "DOM Position",
 		// we will use the fact that range will collapse if it's end is before it's start.
-		const range = document.createRange();
+		const range = this._domDocument.createRange();
 
 		range.setStart( selection.anchorNode, selection.anchorOffset );
 		range.setEnd( selection.focusNode, selection.focusOffset );
@@ -1166,17 +1180,16 @@ export default class DomConverter {
 	 * Returns the block {@link module:engine/view/filler filler} node based on the current {@link #blockFillerMode} setting.
 	 *
 	 * @private
-	 * @params {Document} domDocument
 	 * @returns {Node} filler
 	 */
-	_getBlockFiller( domDocument ) {
+	_getBlockFiller() {
 		switch ( this.blockFillerMode ) {
 			case 'nbsp':
-				return NBSP_FILLER( domDocument ); // eslint-disable-line new-cap
+				return NBSP_FILLER( this._domDocument ); // eslint-disable-line new-cap
 			case 'markedNbsp':
-				return MARKED_NBSP_FILLER( domDocument ); // eslint-disable-line new-cap
+				return MARKED_NBSP_FILLER( this._domDocument ); // eslint-disable-line new-cap
 			case 'br':
-				return BR_FILLER( domDocument ); // eslint-disable-line new-cap
+				return BR_FILLER( this._domDocument ); // eslint-disable-line new-cap
 		}
 	}
 
@@ -1564,7 +1577,7 @@ export default class DomConverter {
 	_shouldRenameElement( elementName ) {
 		const name = elementName.toLowerCase();
 
-		return this.renderingMode === 'editing' && UNSAFE_ELEMENTS.includes( name );
+		return this.renderingMode === 'editing' && this.unsafeElements.includes( name );
 	}
 
 	/**
@@ -1577,7 +1590,7 @@ export default class DomConverter {
 	 * @returns {Element}
 	 */
 	_createReplacementDomElement( elementName, originalDomElement = null ) {
-		const newDomElement = document.createElement( 'span' );
+		const newDomElement = this._domDocument.createElement( 'span' );
 
 		// Mark the span replacing a script as hidden.
 		newDomElement.setAttribute( UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE, elementName );

package/src/view/element.js

@@ -608,6 +608,9 @@ export default class Element extends Node {
 		// is changed by e.g. toWidget() function from ckeditor5-widget. Perhaps this should be one of custom props.
 		cloned.getFillerOffset = this.getFillerOffset;
 
+		// Clone unsafe attributes list.
+		cloned._unsafeAttributesToRender = this._unsafeAttributesToRender;
+
 		return cloned;
 	}
 

package/src/view/filler.js

@@ -56,7 +56,7 @@ export const NBSP_FILLER = domDocument => domDocument.createTextNode( '\u00A0' )
 export const MARKED_NBSP_FILLER = domDocument => {
 	const span = domDocument.createElement( 'span' );
 	span.dataset.ckeFiller = true;
-	span.innerHTML = '\u00A0';
+	span.innerText = '\u00A0';
 
 	return span;
 };

package/src/view/observer/tabobserver.js

@@ -16,7 +16,7 @@ import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
  * Tab observer introduces the {@link module:engine/view/document~Document#event:tab `Document#tab`} event.
  *
  * Note that because {@link module:engine/view/observer/tabobserver~TabObserver} is attached by the
- * {@link module:engine/view/view~View} this event is available by default.
+ * {@link module:engine/view/view~View}, this event is available by default.
  *
  * @extends module:engine/view/observer/observer~Observer
  */
@@ -60,7 +60,7 @@ export default class TabObserver extends Observer {
  * Introduced by {@link module:engine/view/observer/tabobserver~TabObserver}.
  *
  * Note that because {@link module:engine/view/observer/tabobserver~TabObserver} is attached by the
- * {@link module:engine/view/view~View} this event is available by default.
+ * {@link module:engine/view/view~View}, this event is available by default.
  *
  * @event module:engine/view/document~Document#event:tab
  *

package/src/view/renderer.js

@@ -229,11 +229,19 @@ export default class Renderer {
 				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.
+		// 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 );
+
+			// While down-casting the document selection attributes, all existing empty
+			// attribute elements (for selection position) are removed from the view and DOM,
+			// so make sure that we were able to map filler position.
+			// https://github.com/ckeditor/ckeditor5/issues/12026
+			if ( inlineFillerPosition && inlineFillerPosition.parent.is( '$text' ) ) {
+				// The inline filler position is expected to be before the text node.
+				inlineFillerPosition = ViewPosition._createBefore( inlineFillerPosition.parent );
+			}
 		}
 
 		for ( const element of this.markedAttributes ) {
@@ -314,7 +322,7 @@ export default class Renderer {
 			this.domConverter.mapViewToDom( viewElement ).childNodes
 		);
 		const expectedDomChildren = Array.from(
-			this.domConverter.viewChildrenToDom( viewElement, domElement.ownerDocument, { withChildren: false } )
+			this.domConverter.viewChildrenToDom( viewElement, { withChildren: false } )
 		);
 		const diff = this._diffNodeLists( actualDomChildren, expectedDomChildren );
 		const actions = this._findReplaceActions( diff, actualDomChildren, expectedDomChildren );
@@ -510,7 +518,7 @@ export default class Renderer {
 	 */
 	_updateText( viewText, options ) {
 		const domText = this.domConverter.findCorrespondingDomText( viewText );
-		const newDomText = this.domConverter.viewToDom( viewText, domText.ownerDocument );
+		const newDomText = this.domConverter.viewToDom( viewText );
 
 		const actualText = domText.data;
 		let expectedText = newDomText.data;
@@ -589,7 +597,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 } )
+			this.domConverter.viewChildrenToDom( viewElement, { bind: true } )
 		);
 
 		// Inline filler element has to be created as it is present in the DOM, but not in the view. It is required