@ckeditor/ckeditor5-engine 36.0.0 → 37.0.0-alpha.0

package/src/view/typecheckable.d.ts

@@ -0,0 +1,401 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import type AttributeElement from './attributeelement';
+import type ContainerElement from './containerelement';
+import type DocumentFragment from './documentfragment';
+import type DocumentSelection from './documentselection';
+import type EditableElement from './editableelement';
+import type Element from './element';
+import type EmptyElement from './emptyelement';
+import type Node from './node';
+import type Position from './position';
+import type Range from './range';
+import type RawElement from './rawelement';
+import type RootEditableElement from './rooteditableelement';
+import type Selection from './selection';
+import type Text from './text';
+import type TextProxy from './textproxy';
+import type UIElement from './uielement';
+/**
+ * @module engine/view/typecheckable
+ */
+export default abstract class TypeCheckable {
+    /**
+     * Checks whether this object is of type {@link module:engine/view/node~Node} or its subclass.
+     *
+     * This method is useful when processing view objects that are of unknown type. For example, a function
+     * may return a {@link module:engine/view/documentfragment~DocumentFragment} or a {@link module:engine/view/node~Node}
+     * that can be either a text node or an element. This method can be used to check what kind of object is returned.
+     *
+     * ```ts
+     * someObject.is( 'element' ); // -> true if this is an element
+     * someObject.is( 'node' ); // -> true if this is a node (a text node or an element)
+     * someObject.is( 'documentFragment' ); // -> true if this is a document fragment
+     * ```
+     *
+     * Since this method is also available on a range of model objects, you can prefix the type of the object with
+     * `model:` or `view:` to check, for example, if this is the model's or view's element:
+     *
+     * ```ts
+     * viewElement.is( 'view:element' ); // -> true
+     * viewElement.is( 'model:element' ); // -> false
+     * ```
+     *
+     * By using this method it is also possible to check a name of an element:
+     *
+     * ```ts
+     * imgElement.is( 'element', 'img' ); // -> true
+     * imgElement.is( 'view:element', 'img' ); // -> same as above, but more precise
+     * ```
+     */
+    is(type: 'node' | 'view:node'): this is (Node | Text | Element | AttributeElement | ContainerElement | EditableElement | EmptyElement | RawElement | RootEditableElement | UIElement);
+    /**
+     * Checks whether this object is of type {@link module:engine/view/element~Element} or its subclass.
+     *
+     * ```ts
+     * element.is( 'element' ); // -> true
+     * element.is( 'node' ); // -> true
+     * element.is( 'view:element' ); // -> true
+     * element.is( 'view:node' ); // -> true
+     *
+     * element.is( 'model:element' ); // -> false
+     * element.is( 'documentSelection' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is an element, you can also check its
+     * {@link module:engine/view/element~Element#name name}:
+     *
+     * ```ts
+     * element.is( 'element', 'img' ); // -> true if this is an <img> element
+     * text.is( 'element', 'img' ); -> false
+     * ```
+     */
+    is(type: 'element' | 'view:element'): this is (Element | AttributeElement | ContainerElement | EditableElement | EmptyElement | RawElement | RootEditableElement | UIElement);
+    /**
+     * Checks whether this object is of type {@link module:engine/view/attributeelement~AttributeElement}.
+     *
+     * ```ts
+     * attributeElement.is( 'attributeElement' ); // -> true
+     * attributeElement.is( 'element' ); // -> true
+     * attributeElement.is( 'node' ); // -> true
+     * attributeElement.is( 'view:attributeElement' ); // -> true
+     * attributeElement.is( 'view:element' ); // -> true
+     * attributeElement.is( 'view:node' ); // -> true
+     *
+     * attributeElement.is( 'model:element' ); // -> false
+     * attributeElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is an attribute element, you can also check its
+     * {@link module:engine/view/attributeelement~AttributeElement#name name}:
+     *
+     * ```ts
+     * attributeElement.is( 'element', 'b' ); // -> true if this is a bold element
+     * attributeElement.is( 'attributeElement', 'b' ); // -> same as above
+     * text.is( 'element', 'b' ); -> false
+     * ```
+     */
+    is(type: 'attributeElement' | 'view:attributeElement'): this is AttributeElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/containerelement~ContainerElement} or its subclass.
+     *
+     * ```ts
+     * containerElement.is( 'containerElement' ); // -> true
+     * containerElement.is( 'element' ); // -> true
+     * containerElement.is( 'node' ); // -> true
+     * containerElement.is( 'view:containerElement' ); // -> true
+     * containerElement.is( 'view:element' ); // -> true
+     * containerElement.is( 'view:node' ); // -> true
+     *
+     * containerElement.is( 'model:element' ); // -> false
+     * containerElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is a container element, you can also check its
+     * {@link module:engine/view/containerelement~ContainerElement#name name}:
+     *
+     * ```ts
+     * containerElement.is( 'element', 'div' ); // -> true if this is a div container element
+     * containerElement.is( 'contaienrElement', 'div' ); // -> same as above
+     * text.is( 'element', 'div' ); -> false
+     * ```
+     */
+    is(type: 'containerElement' | 'view:containerElement'): this is ContainerElement | EditableElement | RootEditableElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/editableelement~EditableElement} or its subclass.
+     *
+     * ```ts
+     * editableElement.is( 'editableElement' ); // -> true
+     * editableElement.is( 'element' ); // -> true
+     * editableElement.is( 'node' ); // -> true
+     * editableElement.is( 'view:editableElement' ); // -> true
+     * editableElement.is( 'view:element' ); // -> true
+     * editableElement.is( 'view:node' ); // -> true
+     *
+     * editableElement.is( 'model:element' ); // -> false
+     * editableElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is an editbale element, you can also check its
+     * {@link module:engine/view/editableelement~EditableElement#name name}:
+     *
+     * ```ts
+     * editableElement.is( 'element', 'div' ); // -> true if this is a div element
+     * editableElement.is( 'editableElement', 'div' ); // -> same as above
+     * text.is( 'element', 'div' ); -> false
+     * ```
+     */
+    is(type: 'editableElement' | 'view:editableElement'): this is EditableElement | RootEditableElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/emptyelement~EmptyElement}.
+     *
+     * ```ts
+     * emptyElement.is( 'emptyElement' ); // -> true
+     * emptyElement.is( 'element' ); // -> true
+     * emptyElement.is( 'node' ); // -> true
+     * emptyElement.is( 'view:emptyElement' ); // -> true
+     * emptyElement.is( 'view:element' ); // -> true
+     * emptyElement.is( 'view:node' ); // -> true
+     *
+     * emptyElement.is( 'model:element' ); // -> false
+     * emptyElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is an empty element, you can also check its
+     * {@link module:engine/view/emptyelement~EmptyElement#name name}:
+     *
+     * ```ts
+     * emptyElement.is( 'element', 'img' ); // -> true if this is a img element
+     * emptyElement.is( 'emptyElement', 'img' ); // -> same as above
+     * text.is( 'element', 'img' ); -> false
+     * ```
+     */
+    is(type: 'emptyElement' | 'view:emptyElement'): this is EmptyElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/rawelement~RawElement}.
+     *
+     * ```ts
+     * rawElement.is( 'rawElement' ); // -> true
+     * rawElement.is( 'element' ); // -> true
+     * rawElement.is( 'node' ); // -> true
+     * rawElement.is( 'view:rawElement' ); // -> true
+     * rawElement.is( 'view:element' ); // -> true
+     * rawElement.is( 'view:node' ); // -> true
+     *
+     * rawElement.is( 'model:element' ); // -> false
+     * rawElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is a raw element, you can also check its
+     * {@link module:engine/view/rawelement~RawElement#name name}:
+     *
+     * ```ts
+     * rawElement.is( 'img' ); // -> true if this is an img element
+     * rawElement.is( 'rawElement', 'img' ); // -> same as above
+     * text.is( 'img' ); -> false
+     * ```
+     */
+    is(type: 'rawElement' | 'view:rawElement'): this is RawElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/rooteditableelement~RootEditableElement}.
+     *
+     * ```ts
+     * rootEditableElement.is( 'rootElement' ); // -> true
+     * rootEditableElement.is( 'editableElement' ); // -> true
+     * rootEditableElement.is( 'element' ); // -> true
+     * rootEditableElement.is( 'node' ); // -> true
+     * rootEditableElement.is( 'view:editableElement' ); // -> true
+     * rootEditableElement.is( 'view:element' ); // -> true
+     * rootEditableElement.is( 'view:node' ); // -> true
+     *
+     * rootEditableElement.is( 'model:element' ); // -> false
+     * rootEditableElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is a root editable element, you can also check its
+     * {@link module:engine/view/rooteditableelement~RootEditableElement#name name}:
+     *
+     * ```ts
+     * rootEditableElement.is( 'element', 'div' ); // -> true if this is a div root editable element
+     * rootEditableElement.is( 'rootElement', 'div' ); // -> same as above
+     * text.is( 'element', 'div' ); -> false
+     * ```
+     */
+    is(type: 'rootElement' | 'view:rootElement'): this is RootEditableElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/uielement~UIElement}.
+     *
+     * ```ts
+     * uiElement.is( 'uiElement' ); // -> true
+     * uiElement.is( 'element' ); // -> true
+     * uiElement.is( 'node' ); // -> true
+     * uiElement.is( 'view:uiElement' ); // -> true
+     * uiElement.is( 'view:element' ); // -> true
+     * uiElement.is( 'view:node' ); // -> true
+     *
+     * uiElement.is( 'model:element' ); // -> false
+     * uiElement.is( 'documentFragment' ); // -> false
+     * ```
+     *
+     * Assuming that the object being checked is an ui element, you can also check its
+     * {@link module:engine/view/uielement~UIElement#name name}:
+     *
+     * ```ts
+     * uiElement.is( 'element', 'span' ); // -> true if this is a span ui element
+     * uiElement.is( 'uiElement', 'span' ); // -> same as above
+     * text.is( 'element', 'span' ); -> false
+     * ```
+     */
+    is(type: 'uiElement' | 'view:uiElement'): this is UIElement;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/text~Text}.
+     *
+     * ```ts
+     * text.is( '$text' ); // -> true
+     * text.is( 'node' ); // -> true
+     * text.is( 'view:$text' ); // -> true
+     * text.is( 'view:node' ); // -> true
+     *
+     * text.is( 'model:$text' ); // -> false
+     * text.is( 'element' ); // -> false
+     * text.is( 'range' ); // -> false
+     * ```
+     */
+    is(type: '$text' | 'view:$text'): this is Text;
+    /**
+     * hecks whether this object is of type {@link module:engine/view/documentfragment~DocumentFragment}.
+     *
+     * ```ts
+     * docFrag.is( 'documentFragment' ); // -> true
+     * docFrag.is( 'view:documentFragment' ); // -> true
+     *
+     * docFrag.is( 'model:documentFragment' ); // -> false
+     * docFrag.is( 'element' ); // -> false
+     * docFrag.is( 'node' ); // -> false
+     * ```
+     */
+    is(type: 'documentFragment' | 'view:documentFragment'): this is DocumentFragment;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/textproxy~TextProxy}.
+     *
+     * ```ts
+     * textProxy.is( '$textProxy' ); // -> true
+     * textProxy.is( 'view:$textProxy' ); // -> true
+     *
+     * textProxy.is( 'model:$textProxy' ); // -> false
+     * textProxy.is( 'element' ); // -> false
+     * textProxy.is( 'range' ); // -> false
+     * ```
+     *
+     * **Note:** Until version 20.0.0 this method wasn't accepting `'$textProxy'` type. The legacy `'textProxy'` type is still
+     * accepted for backward compatibility.
+     */
+    is(type: '$textProxy' | 'view:$textProxy'): this is TextProxy;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/position~Position}.
+     *
+     * ```ts
+     * position.is( 'position' ); // -> true
+     * position.is( 'view:position' ); // -> true
+     *
+     * position.is( 'model:position' ); // -> false
+     * position.is( 'element' ); // -> false
+     * position.is( 'range' ); // -> false
+     * ```
+     */
+    is(type: 'position' | 'view:position'): this is Position;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/range~Range}.
+     *
+     * ```ts
+     * range.is( 'range' ); // -> true
+     * range.is( 'view:range' ); // -> true
+     *
+     * range.is( 'model:range' ); // -> false
+     * range.is( 'element' ); // -> false
+     * range.is( 'selection' ); // -> false
+     * ```
+     */
+    is(type: 'range' | 'view:range'): this is Range;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/selection~Selection} or
+     * {@link module:engine/view/documentselection~DocumentSelection}.
+     *
+     * ```ts
+     * selection.is( 'selection' ); // -> true
+     * selection.is( 'view:selection' ); // -> true
+     *
+     * selection.is( 'model:selection' ); // -> false
+     * selection.is( 'element' ); // -> false
+     * selection.is( 'range' ); // -> false
+     * ```
+     */
+    is(type: 'selection' | 'view:selection'): this is Selection | DocumentSelection;
+    /**
+     * Checks whether this object is of type {@link module:engine/view/documentselection~DocumentSelection}.
+     *
+     * ```ts
+     * `docSelection.is( 'selection' ); // -> true
+     * docSelection.is( 'documentSelection' ); // -> true
+     * docSelection.is( 'view:selection' ); // -> true
+     * docSelection.is( 'view:documentSelection' ); // -> true
+     *
+     * docSelection.is( 'model:documentSelection' ); // -> false
+     * docSelection.is( 'element' ); // -> false
+     * docSelection.is( 'node' ); // -> false
+     * ```
+     */
+    is(type: 'documentSelection' | 'view:documentSelection'): this is DocumentSelection;
+    /**
+     * Checks whether the object is of type {@link module:engine/view/element~Element} or its subclass and has the specified `name`.
+     */
+    is<N extends string>(type: 'element' | 'view:element', name: N): this is (Element | AttributeElement | ContainerElement | EditableElement | EmptyElement | RawElement | RootEditableElement | UIElement) & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/attributeelement~AttributeElement} and has the specified `name`.
+     */
+    is<N extends string>(type: 'attributeElement' | 'view:attributeElement', name: N): this is AttributeElement & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/containerElement~ContainerElement}
+     * or its subclass and has the specified `name`.
+     */
+    is<N extends string>(type: 'containerElement' | 'view:containerElement', name: N): this is (ContainerElement | EditableElement | RootEditableElement) & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/editableElement~EditableElement}
+     * or its subclass and has the specified `name`.
+     */
+    is<N extends string>(type: 'editableElement' | 'view:editableElement', name: N): this is (EditableElement | RootEditableElement) & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/emptyelement~EmptyElement} has the specified `name`.
+     */
+    is<N extends string>(type: 'emptyElement' | 'view:emptyElement', name: N): this is EmptyElement & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/rawelement~RawElement} and has the specified `name`.
+     */
+    is<N extends string>(type: 'rawElement' | 'view:rawElement', name: N): this is RawElement & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/rooteditableelement~RootEditableElement} and has the specified `name`.
+     */
+    is<N extends string>(type: 'rootElement' | 'view:rootElement', name: N): this is RootEditableElement & {
+        name: N;
+    };
+    /**
+     * Checks whether the object is of type {@link module:engine/view/uielement~UIElement} and has the specified `name`.
+     */
+    is<N extends string>(type: 'uiElement' | 'view:uiElement', name: N): this is UIElement & {
+        name: N;
+    };
+}

package/src/view/uielement.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module engine/view/uielement
+ */
+import Element, { type ElementAttributes } from './element';
+import Node from './node';
+import type View from './view';
+import type Document from './document';
+import type DomConverter from './domconverter';
+import type Item from './item';
+type DomDocument = globalThis.Document;
+type DomElement = globalThis.HTMLElement;
+/**
+ * UI element class. It should be used to represent editing UI which needs to be injected into the editing view
+ * If possible, you should keep your UI outside the editing view. However, if that is not possible,
+ * UI elements can be used.
+ *
+ * How a UI element is rendered is in your control (you pass a callback to
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createUIElement `downcastWriter#createUIElement()`}).
+ * The editor will ignore your UI element – the selection cannot be placed in it, it is skipped (invisible) when
+ * the user modifies the selection by using arrow keys and the editor does not listen to any mutations which
+ * happen inside your UI elements.
+ *
+ * The limitation is that you cannot convert a model element to a UI element. UI elements need to be
+ * created for {@link module:engine/model/markercollection~Marker markers} or as additinal elements
+ * inside normal {@link module:engine/view/containerelement~ContainerElement container elements}.
+ *
+ * To create a new UI element use the
+ * {@link module:engine/view/downcastwriter~DowncastWriter#createUIElement `downcastWriter#createUIElement()`} method.
+ */
+export default class UIElement extends Element {
+    /**
+     * Creates new instance of UIElement.
+     *
+     * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-uielement-cannot-add` when third parameter is passed,
+     * to inform that usage of UIElement is incorrect (adding child nodes to UIElement is forbidden).
+     *
+     * @see module:engine/view/downcastwriter~DowncastWriter#createUIElement
+     * @internal
+     * @param document The document instance to which this element belongs.
+     * @param name Node name.
+     * @param attrs Collection of attributes.
+     * @param children A list of nodes to be inserted into created element.
+     */
+    constructor(document: Document, name: string, attrs?: ElementAttributes, children?: Node | Iterable<Node>);
+    /**
+     * Overrides {@link module:engine/view/element~Element#_insertChild} method.
+     * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-uielement-cannot-add` to prevent adding any child nodes
+     * to UIElement.
+     *
+     * @internal
+     */
+    _insertChild(index: number, items: Item | Iterable<Item>): number;
+    /**
+     * Renders this {@link module:engine/view/uielement~UIElement} to DOM. This method is called by
+     * {@link module:engine/view/domconverter~DomConverter}.
+     * Do not use inheritance to create custom rendering method, replace `render()` method instead:
+     *
+     * ```ts
+     * const myUIElement = downcastWriter.createUIElement( 'span' );
+     * myUIElement.render = function( domDocument, domConverter ) {
+     * 	const domElement = this.toDomElement( domDocument );
+     *
+     * 	domConverter.setContentOf( domElement, '<b>this is ui element</b>' );
+     *
+     * 	return domElement;
+     * };
+     * ```
+     *
+     * If changes in your UI element should trigger some editor UI update you should call
+     * the {@link module:core/editor/editorui~EditorUI#update `editor.ui.update()`} method
+     * after rendering your UI element.
+     *
+     * @param domConverter Instance of the DomConverter used to optimize the output.
+     */
+    render(domDocument: DomDocument, domConverter: DomConverter): DomElement;
+    /**
+     * Creates DOM element based on this view UIElement.
+     * Note that each time this method is called new DOM element is created.
+     */
+    toDomElement(domDocument: DomDocument): DomElement;
+}
+/**
+ * This function injects UI element handling to the given {@link module:engine/view/document~Document document}.
+ *
+ * A callback is added to {@link module:engine/view/document~Document#event:keydown document keydown event}.
+ * The callback handles the situation when right arrow key is pressed and selection is collapsed before a UI element.
+ * Without this handler, it would be impossible to "jump over" UI element using right arrow key.
+ *
+ * @param view View controller to which the quirks handling will be injected.
+ */
+export declare function injectUiElementHandling(view: View): void;
+export {};

package/src/view/uielement.js

@@ -25,8 +25,6 @@ import { CKEditorError, keyCodes } from '@ckeditor/ckeditor5-utils';
  *
  * To create a new UI element use the
  * {@link module:engine/view/downcastwriter~DowncastWriter#createUIElement `downcastWriter#createUIElement()`} method.
- *
- * @extends module:engine/view/element~Element
  */
 export default class UIElement extends Element {
     /**
@@ -36,21 +34,14 @@ export default class UIElement extends Element {
      * to inform that usage of UIElement is incorrect (adding child nodes to UIElement is forbidden).
      *
      * @see module:engine/view/downcastwriter~DowncastWriter#createUIElement
-     * @protected
-     * @param {module:engine/view/document~Document} document The document instance to which this element belongs.
-     * @param {String} name Node name.
-     * @param {Object|Iterable} [attributes] Collection of attributes.
-     * @param {module:engine/view/node~Node|Iterable.<module:engine/view/node~Node>} [children]
-     * A list of nodes to be inserted into created element.
+     * @internal
+     * @param document The document instance to which this element belongs.
+     * @param name Node name.
+     * @param attrs Collection of attributes.
+     * @param children A list of nodes to be inserted into created element.
      */
-    constructor(...args) {
-        super(...args);
-        /**
-         * Returns `null` because filler is not needed for UIElements.
-         *
-         * @method #getFillerOffset
-         * @returns {null} Always returns null.
-         */
+    constructor(document, name, attrs, children) {
+        super(document, name, attrs, children);
         this.getFillerOffset = getFillerOffset;
     }
     /**
@@ -58,7 +49,7 @@ export default class UIElement extends Element {
      * Throws {@link module:utils/ckeditorerror~CKEditorError CKEditorError} `view-uielement-cannot-add` to prevent adding any child nodes
      * to UIElement.
      *
-     * @protected
+     * @internal
      */
     _insertChild(index, items) {
         if (items && (items instanceof Node || Array.from(items).length > 0)) {
@@ -76,22 +67,22 @@ export default class UIElement extends Element {
      * {@link module:engine/view/domconverter~DomConverter}.
      * Do not use inheritance to create custom rendering method, replace `render()` method instead:
      *
-     *		const myUIElement = downcastWriter.createUIElement( 'span' );
-     *		myUIElement.render = function( domDocument, domConverter ) {
-     *			const domElement = this.toDomElement( domDocument );
+     * ```ts
+     * const myUIElement = downcastWriter.createUIElement( 'span' );
+     * myUIElement.render = function( domDocument, domConverter ) {
+     * 	const domElement = this.toDomElement( domDocument );
      *
-     *			domConverter.setContentOf( domElement, '<b>this is ui element</b>' );
+     * 	domConverter.setContentOf( domElement, '<b>this is ui element</b>' );
      *
-     *			return domElement;
-     *		};
+     * 	return domElement;
+     * };
+     * ```
      *
      * If changes in your UI element should trigger some editor UI update you should call
      * the {@link module:core/editor/editorui~EditorUI#update `editor.ui.update()`} method
      * after rendering your UI element.
      *
-     * @param {Document} domDocument
-     * @param {module:engine/view/domconverter~DomConverter} domConverter Instance of the DomConverter used to optimize the output.
-     * @returns {HTMLElement}
+     * @param domConverter Instance of the DomConverter used to optimize the output.
      */
     render(domDocument, domConverter) {
         // Provide basic, default output.
@@ -100,9 +91,6 @@ export default class UIElement extends Element {
     /**
      * Creates DOM element based on this view UIElement.
      * Note that each time this method is called new DOM element is created.
-     *
-     * @param {Document} domDocument
-     * @returns {HTMLElement}
      */
     toDomElement(domDocument) {
         const domElement = domDocument.createElement(this.name);
@@ -112,32 +100,8 @@ export default class UIElement extends Element {
         return domElement;
     }
 }
-/**
- * Checks whether this object is of the given.
- *
- *		uiElement.is( 'uiElement' ); // -> true
- *		uiElement.is( 'element' ); // -> true
- *		uiElement.is( 'node' ); // -> true
- *		uiElement.is( 'view:uiElement' ); // -> true
- *		uiElement.is( 'view:element' ); // -> true
- *		uiElement.is( 'view:node' ); // -> true
- *
- *		uiElement.is( 'model:element' ); // -> false
- *		uiElement.is( 'documentFragment' ); // -> false
- *
- * Assuming that the object being checked is an ui element, you can also check its
- * {@link module:engine/view/uielement~UIElement#name name}:
- *
- *		uiElement.is( 'element', 'span' ); // -> true if this is a span ui element
- *		uiElement.is( 'uiElement', 'span' ); // -> same as above
- *		text.is( 'element', 'span' ); -> false
- *
- * {@link module:engine/view/node~Node#is Check the entire list of view objects} which implement the `is()` method.
- *
- * @param {String} type Type to check.
- * @param {String} [name] Element name.
- * @returns {Boolean}
- */
+// The magic of type inference using `is` method is centralized in `TypeCheckable` class.
+// Proper overload would interfere with that.
 UIElement.prototype.is = function (type, name) {
     if (!name) {
         return type === 'uiElement' || type === 'view:uiElement' ||
@@ -157,20 +121,22 @@ UIElement.prototype.is = function (type, name) {
  * The callback handles the situation when right arrow key is pressed and selection is collapsed before a UI element.
  * Without this handler, it would be impossible to "jump over" UI element using right arrow key.
  *
- * @param {module:engine/view/view~View} view View controller to which the quirks handling will be injected.
+ * @param view View controller to which the quirks handling will be injected.
  */
 export function injectUiElementHandling(view) {
     view.document.on('arrowKey', (evt, data) => jumpOverUiElement(evt, data, view.domConverter), { priority: 'low' });
 }
-// Returns `null` because block filler is not needed for UIElements.
-//
-// @returns {null}
+/**
+ * Returns `null` because block filler is not needed for UIElements.
+ */
 function getFillerOffset() {
     return null;
 }
-// Selection cannot be placed in a `UIElement`. Whenever it is placed there, it is moved before it. This
-// causes a situation when it is impossible to jump over `UIElement` using right arrow key, because the selection
-// ends up in ui element (in DOM) and is moved back to the left. This handler fixes this situation.
+/**
+ * Selection cannot be placed in a `UIElement`. Whenever it is placed there, it is moved before it. This
+ * causes a situation when it is impossible to jump over `UIElement` using right arrow key, because the selection
+ * ends up in ui element (in DOM) and is moved back to the left. This handler fixes this situation.
+ */
 function jumpOverUiElement(evt, data, domConverter) {
     if (data.keyCode == keyCodes.arrowright) {
         const domSelection = data.domTarget.ownerDocument.defaultView.getSelection();