@ckeditor/ckeditor5-engine 38.2.0-alpha.0 → 39.0.0

package/src/view/domconverter.js

@@ -67,9 +67,9 @@ export default class DomConverter {
          */
         this._rawContentElementMatcher = new Matcher();
         /**
-         * A set of encountered raw content DOM nodes. It is used for preventing left trimming of the following text node.
+         * Matcher for inline object view elements. This is an extension of a simple {@link #inlineObjectElements} array of element names.
          */
-        this._encounteredRawContentDomNodes = new WeakSet();
+        this._inlineObjectElementMatcher = new Matcher();
         this.document = document;
         this.renderingMode = renderingMode;
         this.blockFillerMode = blockFillerMode || (renderingMode === 'editing' ? 'br' : 'nbsp');
@@ -472,68 +472,22 @@ export default class DomConverter {
      * or the given node is an empty text node.
      */
     domToView(domNode, options = {}) {
-        if (this.isBlockFiller(domNode)) {
+        const inlineNodes = [];
+        const generator = this._domToView(domNode, options, inlineNodes);
+        // Get the first yielded value or a returned value.
+        const node = generator.next().value;
+        if (!node) {
             return null;
         }
-        // When node is inside a UIElement or a RawElement return that parent as it's view representation.
-        const hostElement = this.getHostViewElement(domNode);
-        if (hostElement) {
-            return hostElement;
-        }
-        if (isComment(domNode) && options.skipComments) {
+        // Trigger children handling.
+        generator.next();
+        // Whitespace cleaning.
+        this._processDomInlineNodes(null, inlineNodes, options);
+        // Text not got trimmed to an empty string so there is no result node.
+        if (node.is('$text') && node.data.length == 0) {
             return null;
         }
-        if (isText(domNode)) {
-            if (isInlineFiller(domNode)) {
-                return null;
-            }
-            else {
-                const textData = this._processDataFromDomText(domNode);
-                return textData === '' ? null : new ViewText(this.document, textData);
-            }
-        }
-        else {
-            if (this.mapDomToView(domNode)) {
-                return this.mapDomToView(domNode);
-            }
-            let viewElement;
-            if (this.isDocumentFragment(domNode)) {
-                // Create view document fragment.
-                viewElement = new ViewDocumentFragment(this.document);
-                if (options.bind) {
-                    this.bindDocumentFragments(domNode, viewElement);
-                }
-            }
-            else {
-                // Create view element.
-                viewElement = this._createViewElement(domNode, options);
-                if (options.bind) {
-                    this.bindElements(domNode, viewElement);
-                }
-                // Copy element's attributes.
-                const attrs = domNode.attributes;
-                if (attrs) {
-                    for (let l = attrs.length, i = 0; i < l; i++) {
-                        viewElement._setAttribute(attrs[i].name, attrs[i].value);
-                    }
-                }
-                // 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) || isComment(domNode)) {
-                    const rawContent = isComment(domNode) ? domNode.data : domNode.innerHTML;
-                    viewElement._setCustomProperty('$rawContent', rawContent);
-                    // Store a DOM node to prevent left trimming of the following text node.
-                    this._encounteredRawContentDomNodes.add(domNode);
-                    return viewElement;
-                }
-            }
-            if (options.withChildren !== false) {
-                for (const child of this.domChildrenToView(domNode, options)) {
-                    viewElement._appendChild(child);
-                }
-            }
-            return viewElement;
-        }
+        return node;
     }
     /**
      * Converts children of the DOM element to view nodes using
@@ -542,16 +496,27 @@ export default class DomConverter {
      *
      * @param domElement Parent DOM element.
      * @param options See {@link module:engine/view/domconverter~DomConverter#domToView} options parameter.
+     * @param inlineNodes An array that will be populated with inline nodes. It's used internally for whitespace processing.
      * @returns View nodes.
      */
-    *domChildrenToView(domElement, options) {
+    *domChildrenToView(domElement, options = {}, inlineNodes = []) {
         for (let i = 0; i < domElement.childNodes.length; i++) {
             const domChild = domElement.childNodes[i];
-            const viewChild = this.domToView(domChild, options);
+            const generator = this._domToView(domChild, options, inlineNodes);
+            // Get the first yielded value or a returned value.
+            const viewChild = generator.next().value;
             if (viewChild !== null) {
+                // Whitespace cleaning before entering a block element (between block elements).
+                if (this._isBlockViewElement(viewChild)) {
+                    this._processDomInlineNodes(domElement, inlineNodes, options);
+                }
                 yield viewChild;
+                // Trigger children handling.
+                generator.next();
             }
         }
+        // Whitespace cleaning before leaving a block element (content of block element).
+        this._processDomInlineNodes(domElement, inlineNodes, options);
     }
     /**
      * Converts DOM selection to view {@link module:engine/view/selection~Selection}.
@@ -805,6 +770,24 @@ export default class DomConverter {
             global.window.scrollTo(scrollX, scrollY);
         }
     }
+    /**
+     * Remove DOM selection from blurred editable, so it won't interfere with clicking on dropdowns (especially on iOS).
+     *
+     * @internal
+     */
+    _clearDomSelection() {
+        const domEditable = this.mapViewToDom(this.document.selection.editableElement);
+        if (!domEditable) {
+            return;
+        }
+        // Check if DOM selection is inside editor editable element.
+        const domSelection = domEditable.ownerDocument.defaultView.getSelection();
+        const newViewSelection = this.domSelectionToView(domSelection);
+        const selectionInEditable = newViewSelection && newViewSelection.rangeCount > 0;
+        if (selectionInEditable) {
+            domSelection.removeAllRanges();
+        }
+    }
     /**
      * Returns `true` when `node.nodeType` equals `Node.ELEMENT_NODE`.
      *
@@ -925,6 +908,19 @@ export default class DomConverter {
     registerRawContentMatcher(pattern) {
         this._rawContentElementMatcher.add(pattern);
     }
+    /**
+     * Registers a {@link module:engine/view/matcher~MatcherPattern} for inline object view elements.
+     *
+     * This is affecting how {@link module:engine/view/domconverter~DomConverter#domToView} and
+     * {@link module:engine/view/domconverter~DomConverter#domChildrenToView} process DOM nodes.
+     *
+     * This is an extension of a simple {@link #inlineObjectElements} array of element names.
+     *
+     * @param pattern Pattern matching a view element which should be treated as an inline object.
+     */
+    registerInlineObjectMatcher(pattern) {
+        this._inlineObjectElementMatcher.add(pattern);
+    }
     /**
      * Returns the block {@link module:engine/view/filler filler} node based on the current {@link #blockFillerMode} setting.
      */
@@ -964,6 +960,194 @@ export default class DomConverter {
         }
         return true;
     }
+    /**
+     * Internal generator for {@link #domToView}. Also used by {@link #domChildrenToView}.
+     * Separates DOM nodes conversion from whitespaces processing.
+     *
+     * @param domNode DOM node or document fragment to transform.
+     * @param inlineNodes An array of recently encountered inline nodes truncated to the block element boundaries.
+     * Used later to process whitespaces.
+     */
+    *_domToView(domNode, options, inlineNodes) {
+        if (this.isBlockFiller(domNode)) {
+            return null;
+        }
+        // When node is inside a UIElement or a RawElement return that parent as it's view representation.
+        const hostElement = this.getHostViewElement(domNode);
+        if (hostElement) {
+            return hostElement;
+        }
+        if (isComment(domNode) && options.skipComments) {
+            return null;
+        }
+        if (isText(domNode)) {
+            if (isInlineFiller(domNode)) {
+                return null;
+            }
+            else {
+                const textData = domNode.data;
+                if (textData === '') {
+                    return null;
+                }
+                const textNode = new ViewText(this.document, textData);
+                inlineNodes.push(textNode);
+                return textNode;
+            }
+        }
+        else {
+            let viewElement = this.mapDomToView(domNode);
+            if (viewElement) {
+                if (this._isInlineObjectElement(viewElement)) {
+                    inlineNodes.push(viewElement);
+                }
+                return viewElement;
+            }
+            if (this.isDocumentFragment(domNode)) {
+                // Create view document fragment.
+                viewElement = new ViewDocumentFragment(this.document);
+                if (options.bind) {
+                    this.bindDocumentFragments(domNode, viewElement);
+                }
+            }
+            else {
+                // Create view element.
+                viewElement = this._createViewElement(domNode, options);
+                if (options.bind) {
+                    this.bindElements(domNode, viewElement);
+                }
+                // Copy element's attributes.
+                const attrs = domNode.attributes;
+                if (attrs) {
+                    for (let l = attrs.length, i = 0; i < l; i++) {
+                        viewElement._setAttribute(attrs[i].name, attrs[i].value);
+                    }
+                }
+                // Treat this element's content as a raw data if it was registered as such.
+                if (this._isViewElementWithRawContent(viewElement, options)) {
+                    viewElement._setCustomProperty('$rawContent', domNode.innerHTML);
+                    if (!this._isBlockViewElement(viewElement)) {
+                        inlineNodes.push(viewElement);
+                    }
+                    return viewElement;
+                }
+                // Comment node is also treated as an element with raw data.
+                if (isComment(domNode)) {
+                    viewElement._setCustomProperty('$rawContent', domNode.data);
+                    return viewElement;
+                }
+            }
+            // Yield the element first so the flow of nested inline nodes is not reversed inside elements.
+            yield viewElement;
+            const nestedInlineNodes = [];
+            if (options.withChildren !== false) {
+                for (const child of this.domChildrenToView(domNode, options, nestedInlineNodes)) {
+                    viewElement._appendChild(child);
+                }
+            }
+            // Check if this is an inline object after processing child nodes so matcher
+            // for inline objects can verify if the element is empty.
+            if (this._isInlineObjectElement(viewElement)) {
+                inlineNodes.push(viewElement);
+            }
+            else {
+                // It's an inline element that is not an object (like <b>, <i>) or a block element.
+                for (const inlineNode of nestedInlineNodes) {
+                    inlineNodes.push(inlineNode);
+                }
+            }
+        }
+    }
+    /**
+     * Internal helper that walks the list of inline view nodes already generated from DOM nodes
+     * and handles whitespaces and NBSPs.
+     *
+     * @param domParent The DOM parent of the given inline nodes. This should be a document fragment or
+     * a block element to whitespace processing start cleaning.
+     * @param inlineNodes An array of recently encountered inline nodes truncated to the block element boundaries.
+     */
+    _processDomInlineNodes(domParent, inlineNodes, options) {
+        if (!inlineNodes.length) {
+            return;
+        }
+        // Process text nodes only after reaching a block or document fragment,
+        // do not alter whitespaces while processing an inline element like <b> or <i>.
+        if (domParent && !this.isDocumentFragment(domParent) && !this._isBlockDomElement(domParent)) {
+            return;
+        }
+        let prevNodeEndsWithSpace = false;
+        for (let i = 0; i < inlineNodes.length; i++) {
+            const node = inlineNodes[i];
+            if (!node.is('$text')) {
+                prevNodeEndsWithSpace = false;
+                continue;
+            }
+            let data;
+            let nodeEndsWithSpace = false;
+            if (_hasViewParentOfType(node, this.preElements)) {
+                data = getDataWithoutFiller(node.data);
+            }
+            else {
+                // Change all consecutive whitespace characters (from the [ \n\t\r] set –
+                // see https://github.com/ckeditor/ckeditor5-engine/issues/822#issuecomment-311670249) to a single space character.
+                // That's how multiple whitespaces are treated when rendered, so we normalize those whitespaces.
+                // We're replacing 1+ (and not 2+) to also normalize singular \n\t\r characters (#822).
+                data = node.data.replace(/[ \n\t\r]{1,}/g, ' ');
+                nodeEndsWithSpace = /[^\S\u00A0]/.test(data.charAt(data.length - 1));
+                const prevNode = i > 0 ? inlineNodes[i - 1] : null;
+                const nextNode = i + 1 < inlineNodes.length ? inlineNodes[i + 1] : null;
+                const shouldLeftTrim = !prevNode || prevNode.is('element') && prevNode.name == 'br' || prevNodeEndsWithSpace;
+                const shouldRightTrim = nextNode ? false : !startsWithFiller(node.data);
+                // Do not try to clear whitespaces if this is flat mapping for the purpose of mutation observer and differ in rendering.
+                if (options.withChildren !== false) {
+                    // If the previous dom text node does not exist or it ends by whitespace character, remove space character from the
+                    // beginning of this text node. Such space character is treated as a whitespace.
+                    if (shouldLeftTrim) {
+                        data = data.replace(/^ /, '');
+                    }
+                    // If the next text node does not exist remove space character from the end of this text node.
+                    if (shouldRightTrim) {
+                        data = data.replace(/ $/, '');
+                    }
+                }
+                // At the beginning and end of a block element, Firefox inserts normal space + <br> instead of non-breaking space.
+                // This means that the text node starts/end with normal space instead of non-breaking space.
+                // This causes a problem because the normal space would be removed in `.replace` calls above. To prevent that,
+                // the inline filler is removed only after the data is initially processed (by the `.replace` above). See ckeditor5#692.
+                data = getDataWithoutFiller(data);
+                // At this point we should have removed all whitespaces from DOM text data.
+                //
+                // Now, We will reverse the process that happens in `_processDataFromViewText`.
+                //
+                // We have to change &nbsp; chars, that were in DOM text data because of rendering reasons, to spaces.
+                // First, change all ` \u00A0` pairs (space + &nbsp;) to two spaces. DOM converter changes two spaces from model/view to
+                // ` \u00A0` to ensure proper rendering. Since here we convert back, we recognize those pairs and change them back to `  `.
+                data = data.replace(/ \u00A0/g, '  ');
+                const isNextNodeInlineObjectElement = nextNode && nextNode.is('element') && nextNode.name != 'br';
+                const isNextNodeStartingWithSpace = nextNode && nextNode.is('$text') && nextNode.data.charAt(0) == ' ';
+                // Then, let's change the last nbsp to a space.
+                if (/[ \u00A0]\u00A0$/.test(data) || !nextNode || isNextNodeInlineObjectElement || isNextNodeStartingWithSpace) {
+                    data = data.replace(/\u00A0$/, ' ');
+                }
+                // Then, change &nbsp; character that is at the beginning of the text node to space character.
+                // We do that replacement only if this is the first node or the previous node ends on whitespace character.
+                if (shouldLeftTrim || prevNode && prevNode.is('element') && prevNode.name != 'br') {
+                    data = data.replace(/^\u00A0/, ' ');
+                }
+            }
+            // At this point, all whitespaces should be removed and all &nbsp; created for rendering reasons should be
+            // changed to normal space. All left &nbsp; are &nbsp; inserted intentionally.
+            if (data.length == 0 && node.parent) {
+                node._remove();
+                inlineNodes.splice(i, 1);
+                i--;
+            }
+            else {
+                node._data = data;
+                prevNodeEndsWithSpace = nodeEndsWithSpace;
+            }
+        }
+        inlineNodes.length = 0;
+    }
     /**
      * Takes text data from a given {@link module:engine/view/text~Text#data} and processes it so
      * it is correctly displayed in the DOM.
@@ -1029,103 +1213,6 @@ export default class DomConverter {
         const data = this._processDataFromViewText(node);
         return data.charAt(data.length - 1) == ' ';
     }
-    /**
-     * Takes text data from native `Text` node and processes it to a correct {@link module:engine/view/text~Text view text node} data.
-     *
-     * Following changes are done:
-     *
-     * * multiple whitespaces are replaced to a single space,
-     * * space at the beginning of a text node is removed if it is the first text node in its container
-     * element or if the previous text node ends with a space character,
-     * * space at the end of the text node is removed if there are two spaces at the end of a node or if next node
-     * starts with a space or if it is the last text node in its container
-     * * nbsps are converted to spaces.
-     *
-     * @param node DOM text node to process.
-     * @returns Processed data.
-     */
-    _processDataFromDomText(node) {
-        let data = node.data;
-        if (_hasDomParentOfType(node, this.preElements)) {
-            return getDataWithoutFiller(node);
-        }
-        // Change all consecutive whitespace characters (from the [ \n\t\r] set –
-        // see https://github.com/ckeditor/ckeditor5-engine/issues/822#issuecomment-311670249) to a single space character.
-        // That's how multiple whitespaces are treated when rendered, so we normalize those whitespaces.
-        // We're replacing 1+ (and not 2+) to also normalize singular \n\t\r characters (#822).
-        data = data.replace(/[ \n\t\r]{1,}/g, ' ');
-        const prevNode = this._getTouchingInlineDomNode(node, false);
-        const nextNode = this._getTouchingInlineDomNode(node, true);
-        const shouldLeftTrim = this._checkShouldLeftTrimDomText(node, prevNode);
-        const shouldRightTrim = this._checkShouldRightTrimDomText(node, nextNode);
-        // If the previous dom text node does not exist or it ends by whitespace character, remove space character from the beginning
-        // of this text node. Such space character is treated as a whitespace.
-        if (shouldLeftTrim) {
-            data = data.replace(/^ /, '');
-        }
-        // If the next text node does not exist remove space character from the end of this text node.
-        if (shouldRightTrim) {
-            data = data.replace(/ $/, '');
-        }
-        // At the beginning and end of a block element, Firefox inserts normal space + <br> instead of non-breaking space.
-        // This means that the text node starts/end with normal space instead of non-breaking space.
-        // This causes a problem because the normal space would be removed in `.replace` calls above. To prevent that,
-        // the inline filler is removed only after the data is initially processed (by the `.replace` above). See ckeditor5#692.
-        data = getDataWithoutFiller(new Text(data));
-        // At this point we should have removed all whitespaces from DOM text data.
-        //
-        // Now, We will reverse the process that happens in `_processDataFromViewText`.
-        //
-        // We have to change &nbsp; chars, that were in DOM text data because of rendering reasons, to spaces.
-        // First, change all ` \u00A0` pairs (space + &nbsp;) to two spaces. DOM converter changes two spaces from model/view to
-        // ` \u00A0` to ensure proper rendering. Since here we convert back, we recognize those pairs and change them back to `  `.
-        data = data.replace(/ \u00A0/g, '  ');
-        const isNextNodeInlineObjectElement = nextNode && this.isElement(nextNode) && nextNode.tagName != 'BR';
-        const isNextNodeStartingWithSpace = nextNode && isText(nextNode) && nextNode.data.charAt(0) == ' ';
-        // Then, let's change the last nbsp to a space.
-        if (/( |\u00A0)\u00A0$/.test(data) || !nextNode || isNextNodeInlineObjectElement || isNextNodeStartingWithSpace) {
-            data = data.replace(/\u00A0$/, ' ');
-        }
-        // Then, change &nbsp; character that is at the beginning of the text node to space character.
-        // We do that replacement only if this is the first node or the previous node ends on whitespace character.
-        if (shouldLeftTrim || prevNode && this.isElement(prevNode) && prevNode.tagName != 'BR') {
-            data = data.replace(/^\u00A0/, ' ');
-        }
-        // At this point, all whitespaces should be removed and all &nbsp; created for rendering reasons should be
-        // changed to normal space. All left &nbsp; are &nbsp; inserted intentionally.
-        return data;
-    }
-    /**
-     * Helper function which checks if a DOM text node, preceded by the given `prevNode` should
-     * be trimmed from the left side.
-     *
-     * @param prevNode Either DOM text or `<br>` or one of `#inlineObjectElements`.
-     */
-    _checkShouldLeftTrimDomText(node, prevNode) {
-        if (!prevNode) {
-            return true;
-        }
-        if (this.isElement(prevNode)) {
-            return prevNode.tagName === 'BR';
-        }
-        // Shouldn't left trim if previous node is a node that was encountered as a raw content node.
-        if (this._encounteredRawContentDomNodes.has(node.previousSibling)) {
-            return false;
-        }
-        return /[^\S\u00A0]/.test(prevNode.data.charAt(prevNode.data.length - 1));
-    }
-    /**
-     * Helper function which checks if a DOM text node, succeeded by the given `nextNode` should
-     * be trimmed from the right side.
-     *
-     * @param nextNode Either DOM text or `<br>` or one of `#inlineObjectElements`.
-     */
-    _checkShouldRightTrimDomText(node, nextNode) {
-        if (nextNode) {
-            return false;
-        }
-        return !startsWithFiller(node);
-    }
     /**
      * Helper function. For given {@link module:engine/view/text~Text view text node}, it finds previous or next sibling
      * that is contained in the same container element. If there is no such sibling, `null` is returned.
@@ -1140,8 +1227,12 @@ export default class DomConverter {
             direction: getNext ? 'forward' : 'backward'
         });
         for (const value of treeWalker) {
+            // <br> found – it works like a block boundary, so do not scan further.
+            if (value.item.is('element', 'br')) {
+                return null;
+            }
             // Found an inline object (for example an image).
-            if (value.item.is('element') && this.inlineObjectElements.includes(value.item.name)) {
+            else if (this._isInlineObjectElement(value.item)) {
                 return value.item;
             }
             // ViewContainerElement is found on a way to next ViewText node, so given `node` was first/last
@@ -1149,10 +1240,6 @@ export default class DomConverter {
             else if (value.item.is('containerElement')) {
                 return null;
             }
-            // <br> found – it works like a block boundary, so do not scan further.
-            else if (value.item.is('element', 'br')) {
-                return null;
-            }
             // Found a text node in the same container element.
             else if (value.item.is('$textProxy')) {
                 return value.item;
@@ -1161,61 +1248,27 @@ export default class DomConverter {
         return null;
     }
     /**
-     * Helper function. For the given text node, it finds the closest touching node which is either
-     * a text, `<br>` or an {@link #inlineObjectElements inline object}.
-     *
-     * If no such node is found, `null` is returned.
-     *
-     * For instance, in the following DOM structure:
-     *
-     * ```html
-     * <p>foo<b>bar</b><br>bom</p>
-     * ```
-     *
-     * * `foo` doesn't have its previous touching inline node (`null` is returned),
-     * * `foo`'s next touching inline node is `bar`
-     * * `bar`'s next touching inline node is `<br>`
-     *
-     * This method returns text nodes and `<br>` elements because these types of nodes affect how
-     * spaces in the given text node need to be converted.
+     * Returns `true` if a DOM node belongs to {@link #blockElements}. `false` otherwise.
      */
-    _getTouchingInlineDomNode(node, getNext) {
-        if (!node.parentNode) {
-            return null;
-        }
-        const stepInto = getNext ? 'firstChild' : 'lastChild';
-        const stepOver = getNext ? 'nextSibling' : 'previousSibling';
-        let skipChildren = true;
-        let returnNode = node;
-        do {
-            if (!skipChildren && returnNode[stepInto]) {
-                returnNode = returnNode[stepInto];
-            }
-            else if (returnNode[stepOver]) {
-                returnNode = returnNode[stepOver];
-                skipChildren = false;
-            }
-            else {
-                returnNode = returnNode.parentNode;
-                skipChildren = true;
-            }
-            if (!returnNode || this._isBlockElement(returnNode)) {
-                return null;
-            }
-        } while (!(isText(returnNode) || returnNode.tagName == 'BR' || this._isInlineObjectElement(returnNode)));
-        return returnNode;
+    _isBlockDomElement(node) {
+        return this.isElement(node) && this.blockElements.includes(node.tagName.toLowerCase());
     }
     /**
-     * Returns `true` if a DOM node belongs to {@link #blockElements}. `false` otherwise.
+     * Returns `true` if a view node belongs to {@link #blockElements}. `false` otherwise.
      */
-    _isBlockElement(node) {
-        return this.isElement(node) && this.blockElements.includes(node.tagName.toLowerCase());
+    _isBlockViewElement(node) {
+        return node.is('element') && this.blockElements.includes(node.name);
     }
     /**
      * Returns `true` if a DOM node belongs to {@link #inlineObjectElements}. `false` otherwise.
      */
     _isInlineObjectElement(node) {
-        return this.isElement(node) && this.inlineObjectElements.includes(node.tagName.toLowerCase());
+        if (!node.is('element')) {
+            return false;
+        }
+        return node.name == 'br' ||
+            this.inlineObjectElements.includes(node.name) ||
+            !!this._inlineObjectElementMatcher.match(node);
     }
     /**
      * Creates view element basing on the node type.
@@ -1237,7 +1290,7 @@ export default class DomConverter {
      * @param options Conversion options. See {@link module:engine/view/domconverter~DomConverter#domToView} options parameter.
      */
     _isViewElementWithRawContent(viewElement, options) {
-        return options.withChildren !== false && !!this._rawContentElementMatcher.match(viewElement);
+        return options.withChildren !== false && viewElement.is('element') && !!this._rawContentElementMatcher.match(viewElement);
     }
     /**
      * Checks whether a given element name should be renamed in a current rendering mode.
@@ -1276,9 +1329,8 @@ export default class DomConverter {
  *
  * @returns`true` if such parent exists or `false` if it does not.
  */
-function _hasDomParentOfType(node, types) {
-    const parents = getAncestors(node);
-    return parents.some(parent => parent.tagName && types.includes(parent.tagName.toLowerCase()));
+function _hasViewParentOfType(node, types) {
+    return node.getAncestors().some(parent => parent.is('element') && types.includes(parent.name));
 }
 /**
  * A helper that executes given callback for each DOM node's ancestor, starting from the given node

package/src/view/editableelement.d.ts

@@ -36,6 +36,16 @@ export default class EditableElement extends EditableElement_base {
      * @observable
      */
     isFocused: boolean;
+    /**
+     * Placeholder of editable element.
+     *
+     * ```ts
+     * editor.editing.view.document.getRoot( 'main' ).placeholder = 'New placeholder';
+     * ```
+     *
+     * @observable
+     */
+    placeholder?: string;
     /**
      * Creates an editable element.
      *

package/src/view/editableelement.js

@@ -31,6 +31,7 @@ export default class EditableElement extends ObservableMixin(ContainerElement) {
         super(document, name, attributes, children);
         this.set('isReadOnly', false);
         this.set('isFocused', false);
+        this.set('placeholder', undefined);
         this.bind('isReadOnly').to(document);
         this.bind('isFocused').to(document, 'isFocused', isFocused => isFocused && document.selection.editableElement == this);
         // Update focus state based on selection changes.

package/src/view/filler.d.ts

@@ -76,7 +76,7 @@ export declare const INLINE_FILLER: string;
  * @param domNode DOM node.
  * @returns True if the text node starts with the {@link module:engine/view/filler~INLINE_FILLER inline filler}.
  */
-export declare function startsWithFiller(domNode: Node): boolean;
+export declare function startsWithFiller(domNode: Node | string): boolean;
 /**
  * Checks if the text node contains only the {@link module:engine/view/filler~INLINE_FILLER inline filler}.
  *
@@ -101,7 +101,7 @@ export declare function isInlineFiller(domText: Text): boolean;
  * @param domText DOM text node, possible with inline filler.
  * @returns Data without filler.
  */
-export declare function getDataWithoutFiller(domText: Text): string;
+export declare function getDataWithoutFiller(domText: Text | string): string;
 /**
  * Assign key observer which move cursor from the end of the inline filler to the beginning of it when
  * the left arrow is pressed, so the filler does not break navigation.

package/src/view/filler.js

@@ -86,6 +86,9 @@ export const INLINE_FILLER = '\u2060'.repeat(INLINE_FILLER_LENGTH);
  * @returns True if the text node starts with the {@link module:engine/view/filler~INLINE_FILLER inline filler}.
  */
 export function startsWithFiller(domNode) {
+    if (typeof domNode == 'string') {
+        return domNode.substr(0, INLINE_FILLER_LENGTH) === INLINE_FILLER;
+    }
     return isText(domNode) && (domNode.data.substr(0, INLINE_FILLER_LENGTH) === INLINE_FILLER);
 }
 /**
@@ -115,12 +118,11 @@ export function isInlineFiller(domText) {
  * @returns Data without filler.
  */
 export function getDataWithoutFiller(domText) {
+    const data = typeof domText == 'string' ? domText : domText.data;
     if (startsWithFiller(domText)) {
-        return domText.data.slice(INLINE_FILLER_LENGTH);
-    }
-    else {
-        return domText.data;
+        return data.slice(INLINE_FILLER_LENGTH);
     }
+    return data;
 }
 /**
  * Assign key observer which move cursor from the end of the inline filler to the beginning of it when