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

package/src/view/renderer.js

@@ -27,72 +27,38 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Creates a renderer instance.
      *
-     * @param {module:engine/view/domconverter~DomConverter} domConverter Converter instance.
-     * @param {module:engine/view/documentselection~DocumentSelection} selection View selection.
+     * @param domConverter Converter instance.
+     * @param selection View selection.
      */
     constructor(domConverter, selection) {
         super();
         /**
          * Set of DOM Documents instances.
-         *
-         * @readonly
-         * @member {Set.<Document>}
          */
         this.domDocuments = new Set();
-        /**
-         * Converter instance.
-         *
-         * @readonly
-         * @member {module:engine/view/domconverter~DomConverter}
-         */
-        this.domConverter = domConverter;
         /**
          * Set of nodes which attributes changed and may need to be rendered.
-         *
-         * @readonly
-         * @member {Set.<module:engine/view/node~ViewNode>}
          */
         this.markedAttributes = new Set();
         /**
          * Set of elements which child lists changed and may need to be rendered.
-         *
-         * @readonly
-         * @member {Set.<module:engine/view/node~ViewNode>}
          */
         this.markedChildren = new Set();
         /**
          * Set of text nodes which text data changed and may need to be rendered.
-         *
-         * @readonly
-         * @member {Set.<module:engine/view/node~ViewNode>}
          */
         this.markedTexts = new Set();
         /**
-         * View selection. Renderer updates DOM selection based on the view selection.
-         *
-         * @readonly
-         * @member {module:engine/view/documentselection~DocumentSelection}
+         * The text node in which the inline filler was rendered.
          */
-        this.selection = selection;
+        this._inlineFiller = null;
         /**
-         * Indicates if the view document is focused and selection can be rendered. Selection will not be rendered if
-         * this is set to `false`.
-         *
-         * @member {Boolean}
-         * @observable
+         * DOM element containing fake selection.
          */
+        this._fakeSelectionContainer = null;
+        this.domConverter = domConverter;
+        this.selection = selection;
         this.set('isFocused', false);
-        /**
-         * Indicates whether the user is making a selection in the document (e.g. holding the mouse button and moving the cursor).
-         * When they stop selecting, the property goes back to `false`.
-         *
-         * Note: In some browsers, the renderer will stop rendering the selection and inline fillers while the user is making
-         * a selection to avoid glitches in DOM selection
-         * (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).
-         *
-         * @member {Boolean}
-         * @observable
-         */
         this.set('isSelecting', false);
         // Rendering the selection and inline filler manipulation should be postponed in (non-Android) Blink until the user finishes
         // creating the selection in DOM to avoid accidental selection collapsing
@@ -105,34 +71,12 @@ export default class Renderer extends ObservableMixin() {
                 }
             });
         }
-        /**
-         * True if composition is in progress inside the document.
-         *
-         * This property is bound to the {@link module:engine/view/document~Document#isComposing `Document#isComposing`} property.
-         *
-         * @member {Boolean}
-         * @observable
-         */
         this.set('isComposing', false);
         this.on('change:isComposing', () => {
             if (!this.isComposing) {
                 this.render();
             }
         });
-        /**
-         * The text node in which the inline filler was rendered.
-         *
-         * @private
-         * @member {Text}
-         */
-        this._inlineFiller = null;
-        /**
-         * DOM element containing fake selection.
-         *
-         * @private
-         * @type {null|HTMLElement}
-         */
-        this._fakeSelectionContainer = null;
     }
     /**
      * Marks a view node to be updated in the DOM by {@link #render `render()`}.
@@ -143,8 +87,8 @@ export default class Renderer extends ObservableMixin() {
      * @see #markedChildren
      * @see #markedTexts
      *
-     * @param {module:engine/view/document~ChangeType} type Type of the change.
-     * @param {module:engine/view/node~ViewNode} node ViewNode to be marked.
+     * @param type Type of the change.
+     * @param node ViewNode to be marked.
      */
     markToSync(type, node) {
         if (type === 'text') {
@@ -165,6 +109,8 @@ export default class Renderer extends ObservableMixin() {
                 this.markedChildren.add(node);
             }
             else {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                const unreachable = type;
                 /**
                  * Unknown type passed to Renderer.markToSync.
                  *
@@ -191,14 +137,14 @@ export default class Renderer extends ObservableMixin() {
         // On Android composition events are immediately applied to the model, so we don't need to skip rendering,
         // and we should not do it because the difference between view and DOM could lead to position mapping problems.
         if (this.isComposing && !env.isAndroid) {
-            // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
             // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Rendering aborted while isComposing',
             // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
             return;
         }
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Rendering',
         // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
         // @if CK_DEBUG_TYPING // 	);
@@ -287,7 +233,7 @@ export default class Renderer extends ObservableMixin() {
         this.markedTexts.clear();
         this.markedAttributes.clear();
         this.markedChildren.clear();
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.groupEnd();
         // @if CK_DEBUG_TYPING // }
     }
@@ -298,8 +244,7 @@ export default class Renderer extends ObservableMixin() {
      * This means that their mappings can be updated so the new view elements are mapped to the existing DOM elements.
      * Thanks to that these elements do not need to be re-rendered completely.
      *
-     * @private
-     * @param {module:engine/view/node~ViewNode} viewElement The view element whose children mappings will be updated.
+     * @param viewElement The view element whose children mappings will be updated.
      */
     _updateChildrenMappings(viewElement) {
         const domElement = this.domConverter.mapViewToDom(viewElement);
@@ -342,9 +287,8 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Updates mappings of a given view element.
      *
-     * @private
-     * @param {module:engine/view/node~ViewNode} viewElement The view element whose mappings will be updated.
-     * @param {ViewNode} domElement The DOM element representing the given view element.
+     * @param viewElement The view element whose mappings will be updated.
+     * @param domElement The DOM element representing the given view element.
      */
     _updateElementMappings(viewElement, domElement) {
         // Remap 'DomConverter' bindings.
@@ -372,9 +316,6 @@ export default class Renderer extends ObservableMixin() {
      * Note: The filler position cannot be restored based on the filler's DOM text node, because
      * when this method is called (before rendering), the bindings will often be broken. View-to-DOM
      * bindings are only dependable after rendering.
-     *
-     * @private
-     * @returns {module:engine/view/position~Position}
      */
     _getInlineFillerPosition() {
         const firstPos = this.selection.getFirstPosition();
@@ -390,8 +331,7 @@ export default class Renderer extends ObservableMixin() {
      * If it is `true`, it means that the filler had been added for a reason and the selection did not
      * leave the filler's text node. For example, the user can be in the middle of a composition so it should not be touched.
      *
-     * @private
-     * @returns {Boolean} `true` if the inline filler and selection are in the same place.
+     * @returns `true` if the inline filler and selection are in the same place.
      */
     _isSelectionInInlineFiller() {
         if (this.selection.rangeCount != 1 || !this.selection.isCollapsed) {
@@ -414,8 +354,6 @@ export default class Renderer extends ObservableMixin() {
     }
     /**
      * Removes the inline filler.
-     *
-     * @private
      */
     _removeInlineFiller() {
         const domFillerNode = this._inlineFiller;
@@ -440,8 +378,7 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Checks if the inline {@link module:engine/view/filler filler} should be added.
      *
-     * @private
-     * @returns {Boolean} `true` if the inline filler should be added.
+     * @returns `true` if the inline filler should be added.
      */
     _needsInlineFillerAtSelection() {
         if (this.selection.rangeCount != 1 || !this.selection.isCollapsed) {
@@ -481,11 +418,8 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Checks if text needs to be updated and possibly updates it.
      *
-     * @private
-     * @param {module:engine/view/text~Text} viewText View text to update.
-     * @param {Object} options
-     * @param {module:engine/view/position~Position} options.inlineFillerPosition The position where the inline
-     * filler should be rendered.
+     * @param viewText View text to update.
+     * @param options.inlineFillerPosition The position where the inline filler should be rendered.
      */
     _updateText(viewText, options) {
         const domText = this.domConverter.findCorrespondingDomText(viewText);
@@ -495,21 +429,20 @@ export default class Renderer extends ObservableMixin() {
         if (filler && filler.parent == viewText.parent && filler.offset == viewText.index) {
             expectedText = INLINE_FILLER + expectedText;
         }
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update text',
         // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
         // @if CK_DEBUG_TYPING // 	);
         // @if CK_DEBUG_TYPING // }
         updateTextNode(domText, expectedText);
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.groupEnd();
         // @if CK_DEBUG_TYPING // }
     }
     /**
      * Checks if attribute list needs to be updated and possibly updates it.
      *
-     * @private
-     * @param {module:engine/view/element~Element} viewElement The view element to update.
+     * @param viewElement The view element to update.
      */
     _updateAttrs(viewElement) {
         const domElement = this.domConverter.mapViewToDom(viewElement);
@@ -540,11 +473,8 @@ export default class Renderer extends ObservableMixin() {
      * Note that on Android, to reduce the risk of composition breaks, it tries to update data of an existing
      * child text nodes instead of replacing them completely.
      *
-     * @private
-     * @param {module:engine/view/element~Element} viewElement View element to update.
-     * @param {Object} options
-     * @param {module:engine/view/position~Position} options.inlineFillerPosition The position where the inline
-     * filler should be rendered.
+     * @param viewElement View element to update.
+     * @param options.inlineFillerPosition The position where the inline filler should be rendered.
      */
     _updateChildren(viewElement, options) {
         const domElement = this.domConverter.mapViewToDom(viewElement);
@@ -553,7 +483,7 @@ export default class Renderer extends ObservableMixin() {
             // There is no need to process it. It will be processed when re-inserted.
             return;
         }
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update children',
         // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
         // @if CK_DEBUG_TYPING // 	);
@@ -603,7 +533,7 @@ export default class Renderer extends ObservableMixin() {
         // It doesn't matter in what order we remove or add nodes, as long as we remove and add correct nodes at correct indexes.
         for (const action of actions) {
             if (action === 'delete') {
-                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Remove node',
                 // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', actualDomChildren[ i ]
                 // @if CK_DEBUG_TYPING // 	);
@@ -618,7 +548,7 @@ export default class Renderer extends ObservableMixin() {
         i = 0;
         for (const action of actions) {
             if (action === 'insert') {
-                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Insert node',
                 // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', expectedDomChildren[ i ]
                 // @if CK_DEBUG_TYPING // 	);
@@ -628,14 +558,14 @@ export default class Renderer extends ObservableMixin() {
             }
             // Update the existing text node data. Note that replace action is generated only for Android for now.
             else if (action === 'replace') {
-                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	console.group( '%c[Renderer]%c Update text node',
                 // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', ''
                 // @if CK_DEBUG_TYPING // 	);
                 // @if CK_DEBUG_TYPING // }
                 updateTextNode(actualDomChildren[i], expectedDomChildren[i].data);
                 i++;
-                // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
                 // @if CK_DEBUG_TYPING // 	console.groupEnd();
                 // @if CK_DEBUG_TYPING // }
             }
@@ -654,17 +584,16 @@ export default class Renderer extends ObservableMixin() {
                 this.domConverter.unbindDomElement(node);
             }
         }
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.groupEnd();
         // @if CK_DEBUG_TYPING // }
     }
     /**
      * Shorthand for diffing two arrays or node lists of DOM nodes.
      *
-     * @private
-     * @param {Array.<ViewNode>|NodeList} actualDomChildren Actual DOM children
-     * @param {Array.<ViewNode>|NodeList} expectedDomChildren Expected DOM children.
-     * @returns {Array.<String>} The list of actions based on the {@link module:utils/diff~diff} function.
+     * @param actualDomChildren Actual DOM children
+     * @param expectedDomChildren Expected DOM children.
+     * @returns The list of actions based on the {@link module:utils/diff~diff} function.
      */
     _diffNodeLists(actualDomChildren, expectedDomChildren) {
         actualDomChildren = filterOutFakeSelectionContainer(actualDomChildren, this._fakeSelectionContainer);
@@ -674,18 +603,19 @@ export default class Renderer extends ObservableMixin() {
      * Finds DOM nodes that were replaced with the similar nodes (same tag name) in the view. All nodes are compared
      * within one `insert`/`delete` action group, for example:
      *
-     * 		Actual DOM:		<p><b>Foo</b>Bar<i>Baz</i><b>Bax</b></p>
-     * 		Expected DOM:	<p>Bar<b>123</b><i>Baz</i><b>456</b></p>
-     * 		Input actions:	[ insert, insert, delete, delete, equal, insert, delete ]
-     * 		Output actions:	[ insert, replace, delete, equal, replace ]
+     * ```
+     * Actual DOM:		<p><b>Foo</b>Bar<i>Baz</i><b>Bax</b></p>
+     * Expected DOM:	<p>Bar<b>123</b><i>Baz</i><b>456</b></p>
+     * Input actions:	[ insert, insert, delete, delete, equal, insert, delete ]
+     * Output actions:	[ insert, replace, delete, equal, replace ]
+     * ```
      *
-     * @private
-     * @param {Array.<String>} actions Actions array which is a result of the {@link module:utils/diff~diff} function.
-     * @param {Array.<ViewNode>|NodeList} actualDom Actual DOM children
-     * @param {Array.<ViewNode>} expectedDom Expected DOM children.
-     * @param {Object} [options] Options
-     * @param {Boolean} [options.replaceText] Mark text nodes replacement.
-     * @returns {Array.<String>} Actions array modified with the `replace` actions.
+     * @param actions Actions array which is a result of the {@link module:utils/diff~diff} function.
+     * @param actualDom Actual DOM children
+     * @param expectedDom Expected DOM children.
+     * @param options Options
+     * @param options.replaceText Mark text nodes replacement.
+     * @returns Actions array modified with the `replace` actions.
      */
     _findReplaceActions(actions, actualDom, expectedDom, options = {}) {
         // If there is no both 'insert' and 'delete' actions, no need to check for replaced elements.
@@ -721,8 +651,7 @@ export default class Renderer extends ObservableMixin() {
      *
      * If a text node is passed, it will be marked. If an element is passed, all descendant text nodes inside it will be marked.
      *
-     * @private
-     * @param {module:engine/view/node~ViewNode} viewNode View node to sync.
+     * @param viewNode View node to sync.
      */
     _markDescendantTextToSync(viewNode) {
         if (!viewNode) {
@@ -739,8 +668,6 @@ export default class Renderer extends ObservableMixin() {
     }
     /**
      * Checks if the selection needs to be updated and possibly updates it.
-     *
-     * @private
      */
     _updateSelection() {
         // Block updating DOM selection in (non-Android) Blink while the user is selecting to prevent accidental selection collapsing.
@@ -782,8 +709,7 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Updates the fake selection.
      *
-     * @private
-     * @param {HTMLElement} domRoot A valid DOM root where the fake selection container should be added.
+     * @param domRoot A valid DOM root where the fake selection container should be added.
      */
     _updateFakeSelection(domRoot) {
         const domDocument = domRoot.ownerDocument;
@@ -809,8 +735,7 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Updates the DOM selection.
      *
-     * @private
-     * @param {HTMLElement} domRoot A valid DOM root where the DOM selection should be rendered.
+     * @param domRoot A valid DOM root where the DOM selection should be rendered.
      */
     _updateDomSelection(domRoot) {
         const domSelection = domRoot.ownerDocument.defaultView.getSelection();
@@ -825,7 +750,7 @@ export default class Renderer extends ObservableMixin() {
         // selected. If there is any editable selected, it is okay (editable is taken from selection anchor).
         const anchor = this.domConverter.viewPositionToDom(this.selection.anchor);
         const focus = this.domConverter.viewPositionToDom(this.selection.focus);
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Update DOM selection:',
         // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '', anchor, focus
         // @if CK_DEBUG_TYPING // 	);
@@ -840,9 +765,7 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Checks whether a given DOM selection needs to be updated.
      *
-     * @private
-     * @param {Selection} domSelection The DOM selection to check.
-     * @returns {Boolean}
+     * @param domSelection The DOM selection to check.
      */
     _domSelectionNeedsUpdate(domSelection) {
         if (!this.domConverter.isDomSelectionCorrect(domSelection)) {
@@ -864,9 +787,7 @@ export default class Renderer extends ObservableMixin() {
     /**
      * Checks whether the fake selection needs to be updated.
      *
-     * @private
-     * @param {HTMLElement} domRoot A valid DOM root where a new fake selection container should be added.
-     * @returns {Boolean}
+     * @param domRoot A valid DOM root where a new fake selection container should be added.
      */
     _fakeSelectionNeedsUpdate(domRoot) {
         const container = this._fakeSelectionContainer;
@@ -884,8 +805,6 @@ export default class Renderer extends ObservableMixin() {
     }
     /**
      * Removes the DOM selection.
-     *
-     * @private
      */
     _removeDomSelection() {
         for (const doc of this.domDocuments) {
@@ -901,8 +820,6 @@ export default class Renderer extends ObservableMixin() {
     }
     /**
      * Removes the fake selection.
-     *
-     * @private
      */
     _removeFakeSelection() {
         const container = this._fakeSelectionContainer;
@@ -912,8 +829,6 @@ export default class Renderer extends ObservableMixin() {
     }
     /**
      * Checks if focus needs to be updated and possibly updates it.
-     *
-     * @private
      */
     _updateFocus() {
         if (this.isFocused) {
@@ -924,11 +839,9 @@ export default class Renderer extends ObservableMixin() {
         }
     }
 }
-// Checks if provided element is editable.
-//
-// @private
-// @param {module:engine/view/element~Element} element
-// @returns {Boolean}
+/**
+ * Checks if provided element is editable.
+ */
 function isEditable(element) {
     if (element.getAttribute('contenteditable') == 'false') {
         return false;
@@ -936,16 +849,14 @@ function isEditable(element) {
     const parent = element.findAncestor(element => element.hasAttribute('contenteditable'));
     return !parent || parent.getAttribute('contenteditable') == 'true';
 }
-// Adds inline filler at a given position.
-//
-// The position can be given as an array of DOM nodes and an offset in that array,
-// or a DOM parent element and an offset in that element.
-//
-// @private
-// @param {Document} domDocument
-// @param {Element|Array.<ViewNode>} domParentOrArray
-// @param {Number} offset
-// @returns {Text} The DOM text node that contains an inline filler.
+/**
+ * Adds inline filler at a given position.
+ *
+ * The position can be given as an array of DOM nodes and an offset in that array,
+ * or a DOM parent element and an offset in that element.
+ *
+ * @returns The DOM text node that contains an inline filler.
+ */
 function addInlineFiller(domDocument, domParentOrArray, offset) {
     const childNodes = domParentOrArray instanceof Array ? domParentOrArray : domParentOrArray.childNodes;
     const nodeAfterFiller = childNodes[offset];
@@ -964,36 +875,33 @@ function addInlineFiller(domDocument, domParentOrArray, offset) {
         return fillerNode;
     }
 }
-// Whether two DOM nodes should be considered as similar.
-// Nodes are considered similar if they have the same tag name.
-//
-// @private
-// @param {ViewNode} node1
-// @param {ViewNode} node2
-// @returns {Boolean}
+/**
+ * Whether two DOM nodes should be considered as similar.
+ * Nodes are considered similar if they have the same tag name.
+ */
 function areSimilar(node1, node2) {
     return isNode(node1) && isNode(node2) &&
         !isText(node1) && !isText(node2) &&
         !isComment(node1) && !isComment(node2) &&
         node1.tagName.toLowerCase() === node2.tagName.toLowerCase();
 }
-// Whether two DOM nodes are text nodes.
+/**
+ * Whether two DOM nodes are text nodes.
+ */
 function areTextNodes(node1, node2) {
     return isNode(node1) && isNode(node2) &&
         isText(node1) && isText(node2);
 }
-// Whether two dom nodes should be considered as the same.
-// Two nodes which are considered the same are:
-//
-//		* Text nodes with the same text.
-//		* Element nodes represented by the same object.
-//		* Two block filler elements.
-//
-// @private
-// @param {String} blockFillerMode Block filler mode, see {@link module:engine/view/domconverter~DomConverter#blockFillerMode}.
-// @param {ViewNode} node1
-// @param {ViewNode} node2
-// @returns {Boolean}
+/**
+ * Whether two dom nodes should be considered as the same.
+ * Two nodes which are considered the same are:
+ *
+ * * Text nodes with the same text.
+ * * Element nodes represented by the same object.
+ * * Two block filler elements.
+ *
+ * @param blockFillerMode Block filler mode, see {@link module:engine/view/domconverter~DomConverter#blockFillerMode}.
+ */
 function sameNodes(domConverter, actualDomChild, expectedDomChild) {
     // Elements.
     if (actualDomChild === expectedDomChild) {
@@ -1011,13 +919,17 @@ function sameNodes(domConverter, actualDomChild, expectedDomChild) {
     // Not matching types.
     return false;
 }
-// The following is a Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).
-// When the native DOM selection is at the end of the block and preceded by <br /> e.g.
-//
-//		<p>foo<br/>[]</p>
-//
-// which happens a lot when using the soft line break, the browser fails to (visually) move the
-// caret to the new line. A quick fix is as simple as force–refreshing the selection with the same range.
+/**
+ * The following is a Firefox–specific hack (https://github.com/ckeditor/ckeditor5-engine/issues/1439).
+ * When the native DOM selection is at the end of the block and preceded by <br /> e.g.
+ *
+ * ```html
+ * <p>foo<br/>[]</p>
+ * ```
+ *
+ * which happens a lot when using the soft line break, the browser fails to (visually) move the
+ * caret to the new line. A quick fix is as simple as force–refreshing the selection with the same range.
+ */
 function fixGeckoSelectionAfterBr(focus, domSelection) {
     const parent = focus.parent;
     // This fix works only when the focus point is at the very end of an element.
@@ -1043,11 +955,9 @@ function filterOutFakeSelectionContainer(domChildList, fakeSelectionContainer) {
     }
     return childList;
 }
-// Creates a fake selection container for a given document.
-//
-// @private
-// @param {Document} domDocument
-// @returns {HTMLElement}
+/**
+ * Creates a fake selection container for a given document.
+ */
 function createFakeSelectionContainer(domDocument) {
     const container = domDocument.createElement('div');
     container.className = 'ck-fake-selection-container';
@@ -1062,15 +972,17 @@ function createFakeSelectionContainer(domDocument) {
     container.textContent = '\u00A0';
     return container;
 }
-// Checks if text needs to be updated and possibly updates it by removing and inserting only parts
-// of the data from the existing text node to reduce impact on the IME composition.
-//
-// @param {Text} domText DOM text node to update.
-// @param {String} expectedText The expected data of a text node.
+/**
+ * Checks if text needs to be updated and possibly updates it by removing and inserting only parts
+ * of the data from the existing text node to reduce impact on the IME composition.
+ *
+ * @param domText DOM text node to update.
+ * @param expectedText The expected data of a text node.
+ */
 function updateTextNode(domText, expectedText) {
     const actualText = domText.data;
     if (actualText == expectedText) {
-        // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Text node does not need update:',
         // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '',
         // @if CK_DEBUG_TYPING // 		`"${ domText.data }" (${ domText.data.length })`
@@ -1078,7 +990,7 @@ function updateTextNode(domText, expectedText) {
         // @if CK_DEBUG_TYPING // }
         return;
     }
-    // @if CK_DEBUG_TYPING // if ( window.logCKETyping ) {
+    // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
     // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Update text node:',
     // @if CK_DEBUG_TYPING // 		'color: green;font-weight: bold', '',
     // @if CK_DEBUG_TYPING // 		`"${ domText.data }" (${ domText.data.length }) -> "${ expectedText }" (${ expectedText.length })`