@ckeditor/ckeditor5-engine 32.0.0 → 33.0.0

package/src/view/domconverter.js

@@ -35,6 +35,7 @@ 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
@@ -323,7 +324,7 @@ export default class DomConverter {
 
 			// There are certain nodes, that should be renamed to <span> in editing pipeline.
 			if ( this._shouldRenameElement( elementName ) ) {
-				logWarning( 'domconverter-unsafe-element-detected', { unsafeElement: currentNode } );
+				_logUnsafeElement( elementName );
 
 				currentNode.replaceWith( this._createReplacementDomElement( elementName, currentNode ) );
 			}
@@ -384,7 +385,7 @@ export default class DomConverter {
 			} else {
 				// Create DOM element.
 				if ( this._shouldRenameElement( viewNode.name ) ) {
-					logWarning( 'domconverter-unsafe-element-detected', { unsafeElement: viewNode } );
+					_logUnsafeElement( viewNode.name );
 
 					domElement = this._createReplacementDomElement( viewNode.name );
 				} else if ( viewNode.hasAttribute( 'xmlns' ) ) {
@@ -428,7 +429,7 @@ export default class DomConverter {
 	 * @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
+	 * 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 ) {
@@ -1546,7 +1547,9 @@ export default class DomConverter {
 	 * @returns {Boolean}
 	 */
 	_shouldRenameElement( elementName ) {
-		return this.renderingMode == 'editing' && elementName.toLowerCase() == 'script';
+		const name = elementName.toLowerCase();
+
+		return this.renderingMode === 'editing' && UNSAFE_ELEMENTS.includes( name );
 	}
 
 	/**
@@ -1626,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.
  *
@@ -1640,13 +1657,17 @@ function hasBlockParent( domNode, blockElements ) {
  */
 
 /**
- * The {@link module:engine/view/domconverter~DomConverter} detected a `<script>` element that may disrupt the
- * {@glink framework/guides/architecture/editing-engine#editing-pipeline editing pipeline} of the editor. To avoid this,
- * the `<script>` element was renamed to `<span data-ck-unsafe-element="script"></span>`.
+ * 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-element-detected
- * @param {module:engine/model/element~Element|HTMLElement} unsafeElement The editing view or DOM element
- * that was renamed.
+ * @error domconverter-unsafe-style-element-detected
  */
 
 /**

package/src/view/downcastwriter.js

@@ -58,6 +58,14 @@ export default class DowncastWriter {
 		 * @type {Map.<String,Set>}
 		 */
 		this._cloneGroups = new Map();
+
+		/**
+		 * The slot factory used by the `elementToStructure` downcast helper.
+		 *
+		 * @private
+		 * @type {Function|null}
+		 */
+		this._slotFactory = null;
 	}
 
 	/**
@@ -222,8 +230,20 @@ export default class DowncastWriter {
 	 *		// Create element with custom classes.
 	 *		writer.createContainerElement( 'p', { class: 'foo bar baz' } );
 	 *
+	 *		// Create element with children.
+	 *		writer.createContainerElement( 'figure', { class: 'image' }, [
+	 *			writer.createEmptyElement( 'img' ),
+	 *			writer.createContainerElement( 'figcaption' )
+	 *		] );
+	 *
+	 *		// Create element with specific options.
+	 *		writer.createContainerElement( 'span', { class: 'placeholder' }, { isAllowedInsideAttributeElement: true } );
+	 *
 	 * @param {String} name Name of the element.
 	 * @param {Object} [attributes] Elements attributes.
+	 * @param {module:engine/view/node~Node|Iterable.<module:engine/view/node~Node>|Object} [childrenOrOptions]
+	 * A node or a list of nodes to be inserted into the created element. If no children were specified, element's `options`
+	 * can be passed in this argument.
 	 * @param {Object} [options] Element's options.
 	 * @param {Boolean} [options.isAllowedInsideAttributeElement=false] Whether an element is
 	 * {@link module:engine/view/element~Element#isAllowedInsideAttributeElement allowed inside an AttributeElement} and can be wrapped
@@ -232,8 +252,16 @@ export default class DowncastWriter {
 	 * pipeline even though they would normally be filtered out by unsafe attribute detection mechanisms.
 	 * @returns {module:engine/view/containerelement~ContainerElement} Created element.
 	 */
-	createContainerElement( name, attributes, options = {} ) {
-		const containerElement = new ContainerElement( this.document, name, attributes );
+	createContainerElement( name, attributes, childrenOrOptions = {}, options = {} ) {
+		let children = null;
+
+		if ( isPlainObject( childrenOrOptions ) ) {
+			options = childrenOrOptions;
+		} else {
+			children = childrenOrOptions;
+		}
+
+		const containerElement = new ContainerElement( this.document, name, attributes, children );
 
 		if ( options.isAllowedInsideAttributeElement !== undefined ) {
 			containerElement._isAllowedInsideAttributeElement = options.isAllowedInsideAttributeElement;
@@ -1167,7 +1195,7 @@ export default class DowncastWriter {
 	}
 
 	/**
-	 Creates new {@link module:engine/view/selection~Selection} instance.
+	 * Creates new {@link module:engine/view/selection~Selection} instance.
 	 *
 	 * 		// Creates empty selection without ranges.
 	 *		const selection = writer.createSelection();
@@ -1230,6 +1258,63 @@ export default class DowncastWriter {
 		return new Selection( selectable, placeOrOffset, options );
 	}
 
+	/**
+	 * Creates placeholders for child elements of the {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToStructure
+	 * `elementToStructure()`} conversion helper.
+	 *
+	 *		const viewSlot = conversionApi.writer.createSlot();
+	 *		const viewPosition = conversionApi.writer.createPositionAt( viewElement, 0 );
+	 *
+	 *		conversionApi.writer.insert( viewPosition, viewSlot );
+	 *
+	 * It could be filtered down to a specific subset of children (only `<foo>` model elements in this case):
+	 *
+	 *		const viewSlot = conversionApi.writer.createSlot( node => node.is( 'element', 'foo' ) );
+	 *		const viewPosition = conversionApi.writer.createPositionAt( viewElement, 0 );
+	 *
+	 *		conversionApi.writer.insert( viewPosition, viewSlot );
+	 *
+	 * While providing a filtered slot, make sure to provide slots for all child nodes. A single node can not be downcasted into
+	 * multiple slots.
+	 *
+	 * **Note**: You should not change the order of nodes. View elements should be in the same order as model nodes.
+	 *
+	 * @param {'children'|module:engine/conversion/downcasthelpers~SlotFilter} [modeOrFilter='children'] The filter for child nodes.
+	 * @returns {module:engine/view/element~Element} The slot element to be placed in to the view structure while processing
+	 * {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToStructure `elementToStructure()`}.
+	 */
+	createSlot( modeOrFilter ) {
+		if ( !this._slotFactory ) {
+			/**
+			 * The `createSlot()` method is only allowed inside the `elementToStructure` downcast helper callback.
+			 *
+			 * @error view-writer-invalid-create-slot-context
+			 */
+			throw new CKEditorError( 'view-writer-invalid-create-slot-context', this.document );
+		}
+
+		return this._slotFactory( this, modeOrFilter );
+	}
+
+	/**
+	 * Registers a slot factory.
+	 *
+	 * @protected
+	 * @param {Function} slotFactory The slot factory.
+	 */
+	_registerSlotFactory( slotFactory ) {
+		this._slotFactory = slotFactory;
+	}
+
+	/**
+	 * Clears the registered slot factory.
+	 *
+	 * @protected
+	 */
+	_clearSlotFactory() {
+		this._slotFactory = null;
+	}
+
 	/**
 	 * Inserts a node or nodes at the specified position. Takes care of breaking attributes before insertion
 	 * and merging them afterwards if requested by the breakAttributes param.

package/theme/placeholder.css

@@ -25,3 +25,12 @@
 		display: none;
 	}
 }
+
+/*
+ * Rules for the `ck-placeholder` are loaded before the rules for `ck-reset_all` in the base CKEditor 5 DLL build.
+ * This fix overwrites the incorrectly set `position: static` from `ck-reset_all`.
+ * See https://github.com/ckeditor/ckeditor5/issues/11418.
+ */
+.ck.ck-reset_all .ck-placeholder {
+	position: relative;
+}