@ckeditor/ckeditor5-engine 42.0.2-alpha.2 → 43.0.0-alpha.0

package/src/model/schema.js

@@ -35,6 +35,24 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
          * A dictionary containing attribute properties.
          */
         this._attributeProperties = {};
+        /**
+         * Stores additional callbacks registered for schema items, which are evaluated when {@link ~Schema#checkChild} is called.
+         *
+         * Keys are schema item names for which the callbacks are registered. Values are arrays with the callbacks.
+         *
+         * Some checks are added under {@link ~Schema#_genericCheckSymbol} key, these are evaluated for every {@link ~Schema#checkChild} call.
+         */
+        this._customChildChecks = new Map();
+        /**
+         * Stores additional callbacks registered for attribute names, which are evaluated when {@link ~Schema#checkAttribute} is called.
+         *
+         * Keys are schema attribute names for which the callbacks are registered. Values are arrays with the callbacks.
+         *
+         * Some checks are added under {@link ~Schema#_genericCheckSymbol} key, these are evaluated for every
+         * {@link ~Schema#checkAttribute} call.
+         */
+        this._customAttributeChecks = new Map();
+        this._genericCheckSymbol = Symbol('$generic');
         this.decorate('checkChild');
         this.decorate('checkAttribute');
         this.on('checkAttribute', (evt, args) => {
@@ -314,7 +332,7 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
         return !!(def.isContent || def.isObject);
     }
     /**
-     * Checks whether the given node (`child`) can be a child of the given context.
+     * Checks whether the given node can be a child of the given context.
      *
      * ```ts
      * schema.checkChild( model.document.getRoot(), paragraph ); // -> false
@@ -322,28 +340,34 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
      * schema.register( 'paragraph', {
      * 	allowIn: '$root'
      * } );
+     *
      * schema.checkChild( model.document.getRoot(), paragraph ); // -> true
      * ```
      *
-     * Note: When verifying whether the given node can be a child of the given context, the
-     * schema also verifies the entire context – from its root to its last element. Therefore, it is possible
-     * for `checkChild()` to return `false` even though the context's last element can contain the checked child.
-     * It happens if one of the context's elements does not allow its child.
+     * Both {@link module:engine/model/schema~Schema#addChildCheck callback checks} and declarative rules (added when
+     * {@link module:engine/model/schema~Schema#register registering} and {@link module:engine/model/schema~Schema#extend extending} items)
+     * are evaluated when this method is called.
+     *
+     * Note that callback checks have bigger priority than declarative rules checks and may overwrite them.
+     *
+     * Note that when verifying whether the given node can be a child of the given context, the schema also verifies the entire
+     * context – from its root to its last element. Therefore, it is possible for `checkChild()` to return `false` even though
+     * the `context` last element can contain the checked child. It happens if one of the `context` elements does not allow its child.
+     * When `context` is verified, {@link module:engine/model/schema~Schema#addChildCheck custom checks} are considered as well.
      *
      * @fires checkChild
      * @param context The context in which the child will be checked.
      * @param def The child to check.
      */
     checkChild(context, def) {
-        // Note: context and child are already normalized here to a SchemaContext and SchemaCompiledItemDefinition.
+        // Note: `context` and `def` are already normalized here to `SchemaContext` and `SchemaCompiledItemDefinition`.
         if (!def) {
             return false;
         }
-        return this._checkContextMatch(def, context);
+        return this._checkContextMatch(context, def);
     }
     /**
-     * Checks whether the given attribute can be applied in the given context (on the last
-     * item of the context).
+     * Checks whether the given attribute can be applied in the given context (on the last item of the context).
      *
      * ```ts
      * schema.checkAttribute( textNode, 'bold' ); // -> false
@@ -351,23 +375,37 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
      * schema.extend( '$text', {
      * 	allowAttributes: 'bold'
      * } );
+     *
      * schema.checkAttribute( textNode, 'bold' ); // -> true
      * ```
      *
+     * Both {@link module:engine/model/schema~Schema#addAttributeCheck callback checks} and declarative rules (added when
+     * {@link module:engine/model/schema~Schema#register registering} and {@link module:engine/model/schema~Schema#extend extending} items)
+     * are evaluated when this method is called.
+     *
+     * Note that callback checks have bigger priority than declarative rules checks and may overwrite them.
+     *
      * @fires checkAttribute
      * @param context The context in which the attribute will be checked.
+     * @param attributeName Name of attribute to check in the given context.
      */
     checkAttribute(context, attributeName) {
+        // Note: `context` is already normalized here to `SchemaContext`.
         const def = this.getDefinition(context.last);
         if (!def) {
             return false;
         }
-        return def.allowAttributes.includes(attributeName);
+        // First, check all attribute checks declared as callbacks.
+        // Note that `_evaluateAttributeChecks()` will return `undefined` if neither child check was applicable (no decision was made).
+        const isAllowed = this._evaluateAttributeChecks(context, attributeName);
+        // If the decision was not made inside attribute check callbacks, then use declarative rules.
+        return isAllowed !== undefined ? isAllowed : def.allowAttributes.includes(attributeName);
     }
     /**
      * Checks whether the given element (`elementToMerge`) can be merged with the specified base element (`positionOrBaseElement`).
      *
-     * In other words – whether `elementToMerge`'s children {@link #checkChild are allowed} in the `positionOrBaseElement`.
+     * In other words – both elements are not a limit elements and whether `elementToMerge`'s children
+     * {@link #checkChild are allowed} in the `positionOrBaseElement`.
      *
      * This check ensures that elements merged with {@link module:engine/model/writer~Writer#merge `Writer#merge()`}
      * will be valid.
@@ -400,6 +438,9 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
             }
             return this.checkMerge(nodeBefore, nodeAfter);
         }
+        if (this.isLimit(positionOrBaseElement) || this.isLimit(elementToMerge)) {
+            return false;
+        }
         for (const child of elementToMerge.getChildren()) {
             if (!this.checkChild(positionOrBaseElement, child)) {
                 return false;
@@ -412,110 +453,139 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
      *
      * Callbacks allow you to implement rules which are not otherwise possible to achieve
      * by using the declarative API of {@link module:engine/model/schema~SchemaItemDefinition}.
-     * For example, by using this method you can disallow elements in specific contexts.
      *
-     * This method is a shorthand for using the {@link #event:checkChild} event. For even better control,
-     * you can use that event instead.
+     * Note that callback checks have bigger priority than declarative rules checks and may overwrite them.
      *
-     * Example:
+     * For example, by using this method you can disallow elements in specific contexts:
      *
      * ```ts
-     * // Disallow heading1 directly inside a blockQuote.
+     * // Disallow `heading1` inside a `blockQuote` that is inside a table.
      * schema.addChildCheck( ( context, childDefinition ) => {
-     * 	if ( context.endsWith( 'blockQuote' ) && childDefinition.name == 'heading1' ) {
+     * 	if ( context.endsWith( 'tableCell blockQuote' ) ) {
      * 		return false;
      * 	}
+     * }, 'heading1' );
+     * ```
+     *
+     * You can skip the optional `itemName` parameter to evaluate the callback for every `checkChild()` call.
+     *
+     * ```ts
+     * // Inside specific custom element, allow only children, which allows for a specific attribute.
+     * schema.addChildCheck( ( context, childDefinition ) => {
+     * 	if ( context.endsWith( 'myElement' ) ) {
+     * 		return childDefinition.allowAttributes.includes( 'myAttribute' );
+     * 	}
      * } );
      * ```
      *
-     * Which translates to:
+     * Please note that the generic callbacks may affect the editor performance and should be avoided if possible.
+     *
+     * When one of the callbacks makes a decision (returns `true` or `false`) the processing is finished and other callbacks are not fired.
+     * Callbacks are fired in the order they were added, however generic callbacks are fired before callbacks added for a specified item.
+     *
+     * You can also use `checkChild` event, if you need even better control. The result from the example above could also be
+     * achieved with following event callback:
      *
      * ```ts
      * schema.on( 'checkChild', ( evt, args ) => {
      * 	const context = args[ 0 ];
      * 	const childDefinition = args[ 1 ];
      *
-     * 	if ( context.endsWith( 'blockQuote' ) && childDefinition && childDefinition.name == 'heading1' ) {
+     * 	if ( context.endsWith( 'myElement' ) ) {
      * 		// Prevent next listeners from being called.
      * 		evt.stop();
-     * 		// Set the checkChild()'s return value.
-     * 		evt.return = false;
+     * 		// Set the `checkChild()` return value.
+     * 		evt.return = childDefinition.allowAttributes.includes( 'myAttribute' );
      * 	}
      * }, { priority: 'high' } );
      * ```
      *
+     * Note that the callback checks and declarative rules checks are processed on `normal` priority.
+     *
+     * Adding callbacks this way can also negatively impact editor performance.
+     *
      * @param callback The callback to be called. It is called with two parameters:
      * {@link module:engine/model/schema~SchemaContext} (context) instance and
-     * {@link module:engine/model/schema~SchemaCompiledItemDefinition} (child-to-check definition).
-     * The callback may return `true/false` to override `checkChild()`'s return value. If it does not return
-     * a boolean value, the default algorithm (or other callbacks) will define `checkChild()`'s return value.
+     * {@link module:engine/model/schema~SchemaCompiledItemDefinition} (definition). The callback may return `true/false` to override
+     * `checkChild()`'s return value. If it does not return a boolean value, the default algorithm (or other callbacks) will define
+     * `checkChild()`'s return value.
+     * @param itemName Name of the schema item for which the callback is registered. If specified, the callback will be run only for
+     * `checkChild()` calls which `def` parameter matches the `itemName`. Otherwise, the callback will run for every `checkChild` call.
      */
-    addChildCheck(callback) {
-        this.on('checkChild', (evt, [ctx, childDef]) => {
-            // checkChild() was called with a non-registered child.
-            // In 99% cases such check should return false, so not to overcomplicate all callbacks
-            // don't even execute them.
-            if (!childDef) {
-                return;
-            }
-            const retValue = callback(ctx, childDef);
-            if (typeof retValue == 'boolean') {
-                evt.stop();
-                evt.return = retValue;
-            }
-        }, { priority: 'high' });
+    addChildCheck(callback, itemName) {
+        const key = itemName !== undefined ? itemName : this._genericCheckSymbol;
+        const checks = this._customChildChecks.get(key) || [];
+        checks.push(callback);
+        this._customChildChecks.set(key, checks);
     }
     /**
      * Allows registering a callback to the {@link #checkAttribute} method calls.
      *
      * Callbacks allow you to implement rules which are not otherwise possible to achieve
      * by using the declarative API of {@link module:engine/model/schema~SchemaItemDefinition}.
-     * For example, by using this method you can disallow attribute if node to which it is applied
-     * is contained within some other element (e.g. you want to disallow `bold` on `$text` within `heading1`).
      *
-     * This method is a shorthand for using the {@link #event:checkAttribute} event. For even better control,
-     * you can use that event instead.
+     * Note that callback checks have bigger priority than declarative rules checks and may overwrite them.
+     *
+     * For example, by using this method you can disallow setting attributes on nodes in specific contexts:
+     *
+     * ```ts
+     * // Disallow setting `bold` on text inside `heading1` element:
+     * schema.addAttributeCheck( context => {
+     * 	if ( context.endsWith( 'heading1 $text' ) ) {
+     * 		return false;
+     * 	}
+     * }, 'bold' );
+     * ```
      *
-     * Example:
+     * You can skip the optional `attributeName` parameter to evaluate the callback for every `checkAttribute()` call.
      *
      * ```ts
-     * // Disallow bold on $text inside heading1.
+     * // Disallow formatting attributes on text inside custom `myTitle` element:
      * schema.addAttributeCheck( ( context, attributeName ) => {
-     * 	if ( context.endsWith( 'heading1 $text' ) && attributeName == 'bold' ) {
+     * 	if ( context.endsWith( 'myTitle $text' ) && schema.getAttributeProperties( attributeName ).isFormatting ) {
      * 		return false;
      * 	}
      * } );
      * ```
      *
-     * Which translates to:
+     * Please note that the generic callbacks may affect the editor performance and should be avoided if possible.
+     *
+     * When one of the callbacks makes a decision (returns `true` or `false`) the processing is finished and other callbacks are not fired.
+     * Callbacks are fired in the order they were added, however generic callbacks are fired before callbacks added for a specified item.
+     *
+     * You can also use {@link #event:checkAttribute} event, if you need even better control. The result from the example above could also
+     * be achieved with following event callback:
      *
      * ```ts
      * schema.on( 'checkAttribute', ( evt, args ) => {
      * 	const context = args[ 0 ];
      * 	const attributeName = args[ 1 ];
      *
-     * 	if ( context.endsWith( 'heading1 $text' ) && attributeName == 'bold' ) {
+     * 	if ( context.endsWith( 'myTitle $text' ) && schema.getAttributeProperties( attributeName ).isFormatting ) {
      * 		// Prevent next listeners from being called.
      * 		evt.stop();
-     * 		// Set the checkAttribute()'s return value.
+     * 		// Set the `checkAttribute()` return value.
      * 		evt.return = false;
      * 	}
      * }, { priority: 'high' } );
      * ```
      *
+     * Note that the callback checks and declarative rules checks are processed on `normal` priority.
+     *
+     * Adding callbacks this way can also negatively impact editor performance.
+     *
      * @param callback The callback to be called. It is called with two parameters:
-     * {@link module:engine/model/schema~SchemaContext} (context) instance and attribute name.
-     * The callback may return `true/false` to override `checkAttribute()`'s return value. If it does not return
-     * a boolean value, the default algorithm (or other callbacks) will define `checkAttribute()`'s return value.
+     * {@link module:engine/model/schema~SchemaContext `context`} and attribute name. The callback may return `true` or `false`, to
+     * override `checkAttribute()`'s return value. If it does not return a boolean value, the default algorithm (or other callbacks)
+     * will define `checkAttribute()`'s return value.
+     * @param attributeName Name of the attribute for which the callback is registered. If specified, the callback will be run only for
+     * `checkAttribute()` calls with matching `attributeName`. Otherwise, the callback will run for every `checkAttribute()` call.
      */
-    addAttributeCheck(callback) {
-        this.on('checkAttribute', (evt, [ctx, attributeName]) => {
-            const retValue = callback(ctx, attributeName);
-            if (typeof retValue == 'boolean') {
-                evt.stop();
-                evt.return = retValue;
-            }
-        }, { priority: 'high' });
+    addAttributeCheck(callback, attributeName) {
+        const key = attributeName !== undefined ? attributeName : this._genericCheckSymbol;
+        const checks = this._customAttributeChecks.get(key) || [];
+        checks.push(callback);
+        this._customAttributeChecks.set(key, checks);
     }
     /**
      * This method allows assigning additional metadata to the model attributes. For example,
@@ -861,20 +931,64 @@ export default class Schema extends /* #__PURE__ */ ObservableMixin() {
         // Compile final definitions. Unnecessary properties are removed and some additional cleaning is applied.
         this._compiledDefinitions = compileDefinitions(definitions);
     }
-    _checkContextMatch(def, context, contextItemIndex = context.length - 1) {
-        const contextItem = context.getItem(contextItemIndex);
-        if (def.allowIn.includes(contextItem.name)) {
-            if (contextItemIndex == 0) {
-                return true;
-            }
-            else {
-                const parentRule = this.getDefinition(contextItem);
-                return this._checkContextMatch(parentRule, context, contextItemIndex - 1);
-            }
+    _checkContextMatch(context, def) {
+        const parentItem = context.last;
+        // First, check all child checks declared as callbacks.
+        // Note that `_evaluateChildChecks()` will return `undefined` if neither child check was applicable (no decision was made).
+        let isAllowed = this._evaluateChildChecks(context, def);
+        // If the decision was not made inside child check callbacks, then use declarative rules.
+        isAllowed = isAllowed !== undefined ? isAllowed : def.allowIn.includes(parentItem.name);
+        // If the item is not allowed in the `context`, return `false`.
+        if (!isAllowed) {
+            return false;
         }
-        else {
+        // If the item is allowed, recursively verify the rest of the `context`.
+        const parentItemDefinition = this.getDefinition(parentItem);
+        const parentContext = context.trimLast();
+        // One of the items in the original `context` did not have a definition specified. In this case, the whole context is disallowed.
+        if (!parentItemDefinition) {
             return false;
         }
+        // Whole `context` was verified and passed checks.
+        if (parentContext.length == 0) {
+            return true;
+        }
+        // Verify "truncated" parent context. The last item of the original context is now the definition to check.
+        return this._checkContextMatch(parentContext, parentItemDefinition);
+    }
+    /**
+     * Calls child check callbacks to decide whether `def` is allowed in `context`. It uses both generic and specific (defined for `def`
+     * item) callbacks. If neither callback makes a decision, `undefined` is returned.
+     *
+     * Note that the first callback that makes a decision "wins", i.e., if any callback returns `true` or `false`, then the processing
+     * is over and that result is returned.
+     */
+    _evaluateChildChecks(context, def) {
+        const genericChecks = this._customChildChecks.get(this._genericCheckSymbol) || [];
+        const childChecks = this._customChildChecks.get(def.name) || [];
+        for (const check of [...genericChecks, ...childChecks]) {
+            const result = check(context, def);
+            if (result !== undefined) {
+                return result;
+            }
+        }
+    }
+    /**
+     * Calls attribute check callbacks to decide whether `attributeName` can be set on the last element of `context`. It uses both
+     * generic and specific (defined for `attributeName`) callbacks. If neither callback makes a decision, `undefined` is returned.
+     *
+     * Note that the first callback that makes a decision "wins", i.e., if any callback returns `true` or `false`, then the processing
+     * is over and that result is returned.
+     */
+    _evaluateAttributeChecks(context, attributeName) {
+        const genericChecks = this._customAttributeChecks.get(this._genericCheckSymbol) || [];
+        const childChecks = this._customAttributeChecks.get(attributeName) || [];
+        for (const check of [...genericChecks, ...childChecks]) {
+            const result = check(context, attributeName);
+            if (result !== undefined) {
+                return result;
+            }
+        }
     }
     /**
      * Takes a flat range and an attribute name. Traverses the range recursively and deeply to find and return all ranges
@@ -1050,6 +1164,22 @@ export class SchemaContext {
         ctx._items = [...this._items, ...ctx._items];
         return ctx;
     }
+    /**
+     * Returns a new schema context that is based on this context but has the last item removed.
+     *
+     * ```ts
+     * const ctxParagraph = new SchemaContext( [ '$root', 'blockQuote', 'paragraph' ] );
+     * const ctxBlockQuote = ctxParagraph.trimLast(); // Items in `ctxBlockQuote` are: `$root` an `blockQuote`.
+     * const ctxRoot = ctxBlockQuote.trimLast(); // Items in `ctxRoot` are: `$root`.
+     * ```
+     *
+     * @returns A new reduced schema context instance.
+     */
+    trimLast() {
+        const ctx = new SchemaContext([]);
+        ctx._items = this._items.slice(0, -1);
+        return ctx;
+    }
     /**
      * Gets an item on the given index.
      */

package/src/model/utils/insertcontent.js

@@ -299,25 +299,14 @@ class Insertion {
      * Handles insertion of a single node.
      */
     _handleNode(node) {
-        // Let's handle object in a special way.
-        // * They should never be merged with other elements.
-        // * If they are not allowed in any of the selection ancestors, they could be either autoparagraphed or totally removed.
-        if (this.schema.isObject(node)) {
-            this._handleObject(node);
-            return;
-        }
-        // Try to find a place for the given node.
-        // Check if a node can be inserted in the given position or it would be accepted if a paragraph would be inserted.
-        // Inserts the auto paragraph if it would allow for insertion.
-        let isAllowed = this._checkAndAutoParagraphToAllowedPosition(node);
-        if (!isAllowed) {
-            // Split the position.parent's branch up to a point where the node can be inserted.
-            // If it isn't allowed in the whole branch, then of course don't split anything.
-            isAllowed = this._checkAndSplitToAllowedPosition(node);
-            if (!isAllowed) {
+        // Split the position.parent's branch up to a point where the node can be inserted.
+        // If it isn't allowed in the whole branch, then of course don't split anything.
+        if (!this._checkAndSplitToAllowedPosition(node)) {
+            // Handle element children if it's not an object (strip container).
+            if (!this.schema.isObject(node)) {
                 this._handleDisallowedNode(node);
-                return;
             }
+            return;
         }
         // Add node to the current temporary DocumentFragment.
         this._appendToFragment(node);
@@ -354,19 +343,6 @@ class Insertion {
         this.position = livePosition.toPosition();
         livePosition.detach();
     }
-    /**
-     * @param node The object element.
-     */
-    _handleObject(node) {
-        // Try finding it a place in the tree.
-        if (this._checkAndSplitToAllowedPosition(node)) {
-            this._appendToFragment(node);
-        }
-        // Try autoparagraphing.
-        else {
-            this._tryAutoparagraphing(node);
-        }
-    }
     /**
      * @param node The disallowed node which needs to be handled.
      */
@@ -375,10 +351,6 @@ class Insertion {
         if (node.is('element')) {
             this.handleNodes(node.getChildren());
         }
-        // If text is not allowed, try autoparagraphing it.
-        else {
-            this._tryAutoparagraphing(node);
-        }
     }
     /**
      * Append a node to the temporary DocumentFragment.
@@ -594,37 +566,9 @@ class Insertion {
             this.model.schema.checkMerge(node, nextSibling);
     }
     /**
-     * Tries wrapping the node in a new paragraph and inserting it this way.
-     *
-     * @param node The node which needs to be autoparagraphed.
-     */
-    _tryAutoparagraphing(node) {
-        const paragraph = this.writer.createElement('paragraph');
-        // Do not autoparagraph if the paragraph won't be allowed there,
-        // cause that would lead to an infinite loop. The paragraph would be rejected in
-        // the next _handleNode() call and we'd be here again.
-        if (this._getAllowedIn(this.position.parent, paragraph) && this.schema.checkChild(paragraph, node)) {
-            paragraph._appendChild(node);
-            this._handleNode(paragraph);
-        }
-    }
-    /**
-     * Checks if a node can be inserted in the given position or it would be accepted if a paragraph would be inserted.
-     * It also handles inserting the paragraph.
-     *
-     * @returns Whether an allowed position was found.
-     * `false` is returned if the node isn't allowed at the current position or in auto paragraph, `true` if was.
+     * Inserts a paragraph and moves the insertion position into it.
      */
-    _checkAndAutoParagraphToAllowedPosition(node) {
-        if (this.schema.checkChild(this.position.parent, node)) {
-            return true;
-        }
-        // Do not auto paragraph if the paragraph won't be allowed there,
-        // cause that would lead to an infinite loop. The paragraph would be rejected in
-        // the next _handleNode() call and we'd be here again.
-        if (!this.schema.checkChild(this.position.parent, 'paragraph') || !this.schema.checkChild('paragraph', node)) {
-            return false;
-        }
+    _insertAutoParagraph() {
         // Insert nodes collected in temporary DocumentFragment if the position parent needs change to process further nodes.
         this._insertPartialFragment();
         // Insert a paragraph and move insertion position to it.
@@ -633,7 +577,6 @@ class Insertion {
         this._setAffectedBoundaries(this.position);
         this._lastAutoParagraph = paragraph;
         this.position = this.writer.createPositionAt(paragraph, 0);
-        return true;
     }
     /**
      * @returns Whether an allowed position was found.
@@ -680,18 +623,31 @@ class Insertion {
                 this.canMergeWith.add(this.position.nodeAfter);
             }
         }
+        // At this point, we split elements up to the parent in which `node` is allowed.
+        // Note that `_getAllowedIn()` checks if the `node` is allowed either directly, or when auto-paragraphed.
+        // So, let's check if the `node` is allowed directly. If not, we need to auto-paragraph it.
+        if (!this.schema.checkChild(this.position.parent, node)) {
+            this._insertAutoParagraph();
+        }
         return true;
     }
     /**
      * Gets the element in which the given node is allowed. It checks the passed element and all its ancestors.
      *
+     * It also verifies if auto-paragraphing could help.
+     *
      * @param contextElement The element in which context the node should be checked.
      * @param childNode The node to check.
      */
     _getAllowedIn(contextElement, childNode) {
+        // Check if a node can be inserted in the given context...
         if (this.schema.checkChild(contextElement, childNode)) {
             return contextElement;
         }
+        // ...or it would be accepted if a paragraph would be inserted.
+        if (this.schema.checkChild(contextElement, 'paragraph') && this.schema.checkChild('paragraph', childNode)) {
+            return contextElement;
+        }
         // If the child wasn't allowed in the context element and the element is a limit there's no point in
         // checking any further towards the root. This is it: the limit is unsplittable and there's nothing
         // we can do about it. Without this check, the algorithm will analyze parent of the limit and may create

package/src/view/domconverter.js

@@ -1288,24 +1288,28 @@ export default class DomConverter {
             startPosition: getNext ? ViewPosition._createAfter(node) : ViewPosition._createBefore(node),
             direction: getNext ? 'forward' : 'backward'
         });
-        for (const value of treeWalker) {
+        for (const { item } of treeWalker) {
+            // Found a text node in the same container element.
+            if (item.is('$textProxy')) {
+                return item;
+            }
+            // Found a transparent element, skip it and continue inside it.
+            else if (item.is('element') && item.getCustomProperty('dataPipeline:transparentRendering')) {
+                continue;
+            }
             // <br> found – it works like a block boundary, so do not scan further.
-            if (value.item.is('element', 'br')) {
+            else if (item.is('element', 'br')) {
                 return null;
             }
             // Found an inline object (for example an image).
-            else if (this._isInlineObjectElement(value.item)) {
-                return value.item;
+            else if (this._isInlineObjectElement(item)) {
+                return item;
             }
             // ViewContainerElement is found on a way to next ViewText node, so given `node` was first/last
             // text node in its container element.
-            else if (value.item.is('containerElement')) {
+            else if (item.is('containerElement')) {
                 return null;
             }
-            // Found a text node in the same container element.
-            else if (value.item.is('$textProxy')) {
-                return value.item;
-            }
         }
         return null;
     }

package/src/view/observer/compositionobserver.js

@@ -6,6 +6,7 @@
  * @module engine/view/observer/compositionobserver
  */
 import DomEventObserver from './domeventobserver.js';
+// @if CK_DEBUG_TYPING // const { _debouncedLine } = require( '../../dev-utils/utils.js' );
 /**
  * {@link module:engine/view/document~Document#event:compositionstart Compositionstart},
  * {@link module:engine/view/document~Document#event:compositionupdate compositionupdate} and
@@ -48,6 +49,7 @@ export default class CompositionObserver extends DomEventObserver {
      */
     onDomEvent(domEvent) {
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+        // @if CK_DEBUG_TYPING // 	_debouncedLine();
         // @if CK_DEBUG_TYPING // 	console.group( `%c[CompositionObserver]%c ${ domEvent.type }`, 'color: green', '' );
         // @if CK_DEBUG_TYPING // }
         this.fire(domEvent.type, domEvent, {

package/src/view/observer/focusobserver.d.ts

@@ -47,6 +47,18 @@ export default class FocusObserver extends DomEventObserver<'focus' | 'blur'> {
      * @inheritDoc
      */
     destroy(): void;
+    /**
+     * The `focus` event handler.
+     */
+    private _handleFocus;
+    /**
+     * The `blur` event handler.
+     */
+    private _handleBlur;
+    /**
+     * Clears timeout.
+     */
+    private _clearTimeout;
 }
 /**
  * Fired when one of the editables gets focus.