@ckeditor/ckeditor5-engine 31.0.0 → 33.0.0

package/src/model/writer.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 
@@ -27,7 +27,7 @@ import DocumentSelection from './documentselection';
 
 import toMap from '@ckeditor/ckeditor5-utils/src/tomap';
 
-import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import CKEditorError, { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
  * The model can only be modified by using the writer. It should be used whenever you want to create a node, modify
@@ -968,30 +968,8 @@ export default class Writer {
 	 * As the first parameter you can set marker name or instance. If none of them is provided, new marker, with a unique
 	 * name is created and returned.
 	 *
-	 * As the second parameter you can set the new marker data or leave this parameter as empty which will just refresh
-	 * the marker by triggering downcast conversion for it. Refreshing the marker is useful when you want to change
-	 * the marker {@link module:engine/view/element~Element view element} without changing any marker data.
-	 *
-	 * 		let isCommentActive = false;
-	 *
-	 * 		model.conversion.markerToHighlight( {
-	 * 			model: 'comment',
-	 *			view: data => {
-	 *				const classes = [ 'comment-marker' ];
-	 *
-	 *				if ( isCommentActive ) {
-	 *					classes.push( 'comment-marker--active' );
-	 *				}
-	 *
-	 *				return { classes };
-	 *			}
-	 * 		} );
-	 *
-	 * 		// Change the property that indicates if marker is displayed as active or not.
-	 * 		isCommentActive = true;
-	 *
-	 * 		// And refresh the marker to convert it with additional class.
-	 * 		model.change( writer => writer.updateMarker( 'comment' ) );
+	 * **Note**: If you want to change the {@link module:engine/view/element~Element view element} of the marker while its data in the model
+	 * remains the same, use the dedicated {@link module:engine/controller/editingcontroller~EditingController#reconvertMarker} method.
 	 *
 	 * The `options.usingOperation` parameter lets you change if the marker should be managed by operations or not. See
 	 * {@link module:engine/model/markercollection~Marker marker class description} to learn about the difference between
@@ -1037,7 +1015,7 @@ export default class Writer {
 
 		if ( !currentMarker ) {
 			/**
-			 * Marker with provided name does not exists.
+			 * Marker with provided name does not exist and will not be updated.
 			 *
 			 * @error writer-updatemarker-marker-not-exists
 			 */
@@ -1045,6 +1023,18 @@ export default class Writer {
 		}
 
 		if ( !options ) {
+			/**
+			 * The usage of `writer.updateMarker()` only to reconvert (refresh) a
+			 * {@link module:engine/model/markercollection~Marker model marker} was deprecated and may not work in the future.
+			 * Please update your code to use
+			 * {@link module:engine/controller/editingcontroller~EditingController#reconvertMarker `editor.editing.reconvertMarker()`}
+			 * instead.
+			 *
+			 * @error writer-updatemarker-reconvert-using-editingcontroller
+			 * @param {String} markerName The name of the updated marker.
+			 */
+			logWarning( 'writer-updatemarker-reconvert-using-editingcontroller', { markerName } );
+
 			this.model.markers._refresh( currentMarker );
 
 			return;

package/src/view/attributeelement.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 

package/src/view/containerelement.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 

package/src/view/document.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 
@@ -141,7 +141,8 @@ export default class Document {
 	 *
 	 * * adding or removing attribute from elements,
 	 * * changes inside of {@link module:engine/view/uielement~UIElement UI elements},
-	 * * {@link module:engine/model/differ~Differ#refreshItem marking some of the model elements to be re-converted}.
+	 * * {@link module:engine/controller/editingcontroller~EditingController#reconvertItem marking some of the model elements to be
+	 * re-converted}.
 	 *
 	 * Try to avoid changes which touch view structure:
 	 *

package/src/view/documentfragment.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 

package/src/view/documentselection.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 

package/src/view/domconverter.js

@@ -1,5 +1,5 @@
 /**
- * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * @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
  */
 
@@ -24,13 +24,18 @@ import {
 } from './filler';
 
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import indexOf from '@ckeditor/ckeditor5-utils/src/dom/indexof';
 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 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
@@ -72,14 +77,6 @@ export default class DomConverter {
 		 */
 		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.
 		 *
@@ -242,21 +239,47 @@ export default class DomConverter {
 	}
 
 	/**
-	 * Decides whether given pair of attribute key and value should be passed further down the pipeline.
+	 * Decides whether a given pair of attribute key and value should be passed further down the pipeline.
 	 *
 	 * @param {String} attributeKey
 	 * @param {String} attributeValue
+	 * @param {String} elementName Element name in lower case.
 	 * @returns {Boolean}
 	 */
-	shouldRenderAttribute( attributeKey, attributeValue ) {
-		if ( !this.experimentalRenderingMode || this.renderingMode === 'data' ) {
+	shouldRenderAttribute( attributeKey, attributeValue, elementName ) {
+		if ( 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 )
-		);
+		attributeKey = attributeKey.toLowerCase();
+
+		if ( attributeKey.startsWith( 'on' ) ) {
+			return false;
+		}
+
+		if (
+			attributeKey === 'srcdoc' &&
+			attributeValue.match( /\bon\S+\s*=|javascript:|<\s*\/*script/i )
+		) {
+			return false;
+		}
+
+		if (
+			elementName === 'img' &&
+			( attributeKey === 'src' || attributeKey === 'srcset' )
+		) {
+			return true;
+		}
+
+		if ( elementName === 'source' && attributeKey === 'srcset' ) {
+			return true;
+		}
+
+		if ( attributeValue.match( /^\s*(javascript:|data:(image\/svg|text\/x?html))/i ) ) {
+			return false;
+		}
+
+		return true;
 	}
 
 	/**
@@ -267,7 +290,7 @@ export default class DomConverter {
 	 */
 	setContentOf( domElement, html ) {
 		// For data pipeline we pass the HTML as-is.
-		if ( !this.experimentalRenderingMode || this.renderingMode === 'data' ) {
+		if ( this.renderingMode === 'data' ) {
 			domElement.innerHTML = html;
 
 			return;
@@ -294,17 +317,15 @@ export default class DomConverter {
 		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 );
-				}
+				this.setDomElementAttribute( currentNode, attributeName, currentNode.getAttribute( attributeName ) );
 			}
 
 			const elementName = currentNode.tagName.toLowerCase();
 
 			// There are certain nodes, that should be renamed to <span> in editing pipeline.
 			if ( this._shouldRenameElement( elementName ) ) {
+				_logUnsafeElement( elementName );
+
 				currentNode.replaceWith( this._createReplacementDomElement( elementName, currentNode ) );
 			}
 		}
@@ -364,6 +385,8 @@ export default class DomConverter {
 			} else {
 				// Create DOM element.
 				if ( this._shouldRenameElement( viewNode.name ) ) {
+					_logUnsafeElement( viewNode.name );
+
 					domElement = this._createReplacementDomElement( viewNode.name );
 				} else if ( viewNode.hasAttribute( 'xmlns' ) ) {
 					domElement = domDocument.createElementNS( viewNode.getAttribute( 'xmlns' ), viewNode.name );
@@ -383,13 +406,7 @@ export default class DomConverter {
 
 				// Copy element's attributes.
 				for ( const key of viewNode.getAttributeKeys() ) {
-					const value = viewNode.getAttribute( key );
-
-					if ( !this.shouldRenderAttribute( key, value ) ) {
-						continue;
-					}
-
-					domElement.setAttribute( key, value );
+					this.setDomElementAttribute( domElement, key, viewNode.getAttribute( key ), viewNode );
 				}
 			}
 
@@ -403,6 +420,60 @@ export default class DomConverter {
 		}
 	}
 
+	/**
+	 * Sets the attribute on a DOM element.
+	 *
+	 * **Note**: To remove the attribute, use {@link #removeDomElementAttribute}.
+	 *
+	 * @param {HTMLElement} domElement The DOM element the attribute should be set on.
+	 * @param {String} key The name of the attribute.
+	 * @param {String} value The value of the attribute.
+	 * @param {module:engine/view/element~Element} [relatedViewElement] The view element related to the `domElement` (if there is any).
+	 * It helps decide whether the attribute set is unsafe. For instance, view elements created via the
+	 * {@link module:engine/view/downcastwriter~DowncastWriter} methods can allow certain attributes that would normally be filtered out.
+	 */
+	setDomElementAttribute( domElement, key, value, relatedViewElement = null ) {
+		const shouldRenderAttribute = this.shouldRenderAttribute( key, value, domElement.tagName.toLowerCase() ) ||
+			relatedViewElement && relatedViewElement.shouldRenderUnsafeAttribute( key );
+
+		if ( !shouldRenderAttribute ) {
+			logWarning( 'domconverter-unsafe-attribute-detected', { domElement, key, value } );
+		}
+
+		// The old value was safe but the new value is unsafe.
+		if ( domElement.hasAttribute( key ) && !shouldRenderAttribute ) {
+			domElement.removeAttribute( key );
+		}
+		// The old value was unsafe (but prefixed) but the new value will be safe (will be unprefixed).
+		else if ( domElement.hasAttribute( UNSAFE_ATTRIBUTE_NAME_PREFIX + key ) && shouldRenderAttribute ) {
+			domElement.removeAttribute( UNSAFE_ATTRIBUTE_NAME_PREFIX + key );
+		}
+
+		// If the attribute should not be rendered, rename it (instead of removing) to give developers some idea of what
+		// is going on (https://github.com/ckeditor/ckeditor5/issues/10801).
+		domElement.setAttribute( shouldRenderAttribute ? key : UNSAFE_ATTRIBUTE_NAME_PREFIX + key, value );
+	}
+
+	/**
+	 * Removes an attribute from a DOM element.
+	 *
+	 * **Note**: To set the attribute, use {@link #setDomElementAttribute}.
+	 *
+	 * @param {HTMLElement} domElement The DOM element the attribute should be removed from.
+	 * @param {String} key The name of the attribute.
+	 */
+	removeDomElementAttribute( domElement, key ) {
+		// See #_createReplacementDomElement() to learn what this is.
+		if ( key == UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE ) {
+			return;
+		}
+
+		domElement.removeAttribute( key );
+
+		// See setDomElementAttribute() to learn what this is.
+		domElement.removeAttribute( UNSAFE_ATTRIBUTE_NAME_PREFIX + key );
+	}
+
 	/**
 	 * Converts children of the view element to DOM using the
 	 * {@link module:engine/view/domconverter~DomConverter#viewToDom} method.
@@ -548,7 +619,7 @@ export default class DomConverter {
 			return hostElement;
 		}
 
-		if ( this.isComment( domNode ) && options.skipComments ) {
+		if ( isComment( domNode ) && options.skipComments ) {
 			return null;
 		}
 
@@ -593,8 +664,8 @@ export default class DomConverter {
 
 				// Treat this element's content as a raw data if it was registered as such.
 				// Comment node is also treated as an element with raw data.
-				if ( this._isViewElementWithRawContent( viewElement, options ) || this.isComment( domNode ) ) {
-					const rawContent = this.isComment( domNode ) ? domNode.data : domNode.innerHTML;
+				if ( this._isViewElementWithRawContent( viewElement, options ) || isComment( domNode ) ) {
+					const rawContent = isComment( domNode ) ? domNode.data : domNode.innerHTML;
 
 					viewElement._setCustomProperty( '$rawContent', rawContent );
 
@@ -963,16 +1034,6 @@ export default class DomConverter {
 		return node && node.nodeType == Node.DOCUMENT_FRAGMENT_NODE;
 	}
 
-	/**
-	 * Returns `true` when `node.nodeType` equals `Node.COMMENT_NODE`.
-	 *
-	 * @param {Node} node Node to check.
-	 * @returns {Boolean}
-	 */
-	isComment( node ) {
-		return node && node.nodeType == Node.COMMENT_NODE;
-	}
-
 	/**
 	 * Checks if the node is an instance of the block filler for this DOM converter.
 	 *
@@ -1457,7 +1518,7 @@ export default class DomConverter {
 	 * @returns {Element}
 	 */
 	_createViewElement( node, options ) {
-		if ( this.isComment( node ) ) {
+		if ( isComment( node ) ) {
 			return new ViewUIElement( this.document, '$comment' );
 		}
 
@@ -1479,18 +1540,20 @@ export default class DomConverter {
 	}
 
 	/**
-	 * Checks whether given element name should be renamed in a current rendering mode.
+	 * Checks whether a 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';
+		const name = elementName.toLowerCase();
+
+		return this.renderingMode === 'editing' && UNSAFE_ELEMENTS.includes( name );
 	}
 
 	/**
-	 * Return a <span> element with special attribute holding the name of the original element.
+	 * Return a <span> element with a special attribute holding the name of the original element.
 	 * Optionally, copy all the attributes of the original element if that element is provided.
 	 *
 	 * @private
@@ -1502,7 +1565,7 @@ export default class DomConverter {
 		const newDomElement = document.createElement( 'span' );
 
 		// Mark the span replacing a script as hidden.
-		newDomElement.setAttribute( 'data-ck-hidden', elementName );
+		newDomElement.setAttribute( UNSAFE_ELEMENT_REPLACEMENT_ATTRIBUTE, elementName );
 
 		if ( originalDomElement ) {
 			while ( originalDomElement.firstChild ) {
@@ -1566,6 +1629,20 @@ function hasBlockParent( domNode, blockElements ) {
 	return parent && parent.tagName && blockElements.includes( parent.tagName.toLowerCase() );
 }
 
+// Log to console the information about element that was replaced.
+// Check UNSAFE_ELEMENTS for all recognized unsafe elements.
+//
+// @param {String} elementName The name of the view element
+function _logUnsafeElement( elementName ) {
+	if ( elementName === 'script' ) {
+		logWarning( 'domconverter-unsafe-script-element-detected' );
+	}
+
+	if ( elementName === 'style' ) {
+		logWarning( 'domconverter-unsafe-style-element-detected' );
+	}
+}
+
 /**
  * Enum representing the type of the block filler.
  *
@@ -1578,3 +1655,48 @@ function hasBlockParent( domNode, blockElements ) {
  *
  * @typedef {String} module:engine/view/filler~BlockFillerMode
  */
+
+/**
+ * While rendering the editor content, the {@link module:engine/view/domconverter~DomConverter} detected a `<script>` element that may
+ * disrupt the editing experience. To avoid this, the `<script>` element was replaced with `<span data-ck-unsafe-element="script"></span>`.
+ *
+ * @error domconverter-unsafe-script-element-detected
+ */
+
+/**
+ * While rendering the editor content, the {@link module:engine/view/domconverter~DomConverter} detected a `<style>` element that may affect
+ * the editing experience. To avoid this, the `<style>` element was replaced with `<span data-ck-unsafe-element="style"></span>`.
+ *
+ * @error domconverter-unsafe-style-element-detected
+ */
+
+/**
+ * The {@link module:engine/view/domconverter~DomConverter} detected an interactive attribute in the
+ * {@glink framework/guides/architecture/editing-engine#editing-pipeline editing pipeline}. For the best
+ * editing experience, the attribute was renamed to `data-ck-unsafe-attribute-[original attribute name]`.
+ *
+ * If you are the author of the plugin that generated this attribute and you want it to be preserved
+ * in the editing pipeline, you can configure this when creating the element
+ * using {@link module:engine/view/downcastwriter~DowncastWriter} during the
+ * {@glink framework/guides/architecture/editing-engine#conversion model–view conversion}. Methods such as
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createContainerElement},
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createAttributeElement}, or
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createEmptyElement}
+ * accept an option that will disable filtering of specific attributes:
+ *
+ *		const paragraph = writer.createContainerElement( 'p',
+ *			{
+ *				class: 'clickable-paragraph',
+ *				onclick: 'alert( "Paragraph clicked!" )'
+ *			},
+ *			{
+ *				// Make sure the "onclick" attribute will pass through.
+ *				renderUnsafeAttributes: [ 'onclick' ]
+ *			}
+ *		);
+ *
+ * @error domconverter-unsafe-attribute-detected
+ * @param {HTMLElement} domElement The DOM element the attribute was set on.
+ * @param {String} key The original name of the attribute
+ * @param {String} value The value of the original attribute
+ */