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

package/src/view/renderer.js

@@ -60,6 +60,7 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         this.selection = selection;
         this.set('isFocused', false);
         this.set('isSelecting', false);
+        this.set('isComposing', 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
         // (https://github.com/ckeditor/ckeditor5/issues/10562, https://github.com/ckeditor/ckeditor5/issues/10723).
@@ -71,12 +72,6 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
                 }
             });
         }
-        this.set('isComposing', false);
-        this.on('change:isComposing', () => {
-            if (!this.isComposing) {
-                this.render();
-            }
-        });
     }
     /**
      * Marks a view node to be updated in the DOM by {@link #render `render()`}.
@@ -138,15 +133,15 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         // 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 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 // 	console.info( '%c[Renderer]%c Rendering aborted while isComposing.',
+            // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic'
             // @if CK_DEBUG_TYPING // 	);
             // @if CK_DEBUG_TYPING // }
             return;
         }
         // @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 // 		'color: green; font-weight: bold', 'font-weight: bold'
         // @if CK_DEBUG_TYPING // 	);
         // @if CK_DEBUG_TYPING // }
         let inlineFillerPosition = null;
@@ -432,10 +427,10 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         }
         // @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 // 		'color: green; font-weight: bold', 'font-weight: normal'
         // @if CK_DEBUG_TYPING // 	);
         // @if CK_DEBUG_TYPING // }
-        updateTextNode(domText, expectedText);
+        this._updateTextNode(domText, expectedText);
         // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
         // @if CK_DEBUG_TYPING // 	console.groupEnd();
         // @if CK_DEBUG_TYPING // }
@@ -486,7 +481,7 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         }
         // @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 // 		'color: green; font-weight: bold', 'font-weight: normal'
         // @if CK_DEBUG_TYPING // 	);
         // @if CK_DEBUG_TYPING // }
         // IME on Android inserts a new text node while typing after a link
@@ -516,6 +511,11 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         // We need to make sure that we update the existing text node and not replace it with another one.
         // The composition and different "language" browser extensions are fragile to text node being completely replaced.
         const actions = this._findUpdateActions(diff, actualDomChildren, expectedDomChildren, areTextNodes);
+        // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping && actions.every( a => a == 'equal' ) ) {
+        // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Nothing to update.',
+        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic'
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
         let i = 0;
         const nodesToUnbind = new Set();
         // Handle deletions first.
@@ -527,9 +527,22 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         for (const action of actions) {
             if (action === 'delete') {
                 // @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 // 	);
+                // @if CK_DEBUG_TYPING //	const node = actualDomChildren[ i ];
+                // @if CK_DEBUG_TYPING // 	if ( isText( node ) ) {
+                // @if CK_DEBUG_TYPING // 		console.info( '%c[Renderer]%c Remove text node' +
+                // @if CK_DEBUG_TYPING // 			`${ this.isComposing ? ' while composing (may break composition)' : '' }: ` +
+                // @if CK_DEBUG_TYPING // 			`%c${ _escapeTextNodeData( node.data ) }%c (${ node.data.length })`,
+                // @if CK_DEBUG_TYPING // 			'color: green; font-weight: bold',
+                // @if CK_DEBUG_TYPING // 			this.isComposing ? 'color: red; font-weight: bold' : '', 'color: blue', ''
+                // @if CK_DEBUG_TYPING // 		);
+                // @if CK_DEBUG_TYPING // 	} else {
+                // @if CK_DEBUG_TYPING // 		console.info( '%c[Renderer]%c Remove element' +
+                // @if CK_DEBUG_TYPING // 			`${ this.isComposing ? ' while composing (may break composition)' : '' }: `,
+                // @if CK_DEBUG_TYPING // 			'color: green; font-weight: bold',
+                // @if CK_DEBUG_TYPING // 			this.isComposing ? 'color: red; font-weight: bold' : '',
+                // @if CK_DEBUG_TYPING // 			node
+                // @if CK_DEBUG_TYPING // 		);
+                // @if CK_DEBUG_TYPING // 	}
                 // @if CK_DEBUG_TYPING // }
                 nodesToUnbind.add(actualDomChildren[i]);
                 remove(actualDomChildren[i]);
@@ -542,25 +555,29 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         for (const action of actions) {
             if (action === 'insert') {
                 // @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 // 	);
+                // @if CK_DEBUG_TYPING //	const node = expectedDomChildren[ i ];
+                // @if CK_DEBUG_TYPING //	if ( isText( node ) ) {
+                // @if CK_DEBUG_TYPING //		console.info( '%c[Renderer]%c Insert text node' +
+                // @if CK_DEBUG_TYPING //			`${ this.isComposing ? ' while composing (may break composition)' : '' }: ` +
+                // @if CK_DEBUG_TYPING //			`%c${ _escapeTextNodeData( node.data ) }%c (${ node.data.length })`,
+                // @if CK_DEBUG_TYPING //			'color: green; font-weight: bold',
+                // @if CK_DEBUG_TYPING //			this.isComposing ? 'color: red; font-weight: bold' : '',
+                // @if CK_DEBUG_TYPING //			'color: blue', ''
+                // @if CK_DEBUG_TYPING //		);
+                // @if CK_DEBUG_TYPING //	} else {
+                // @if CK_DEBUG_TYPING //		console.info( '%c[Renderer]%c Insert element:',
+                // @if CK_DEBUG_TYPING //			'color: green; font-weight: bold', 'font-weight: normal',
+                // @if CK_DEBUG_TYPING //			node
+                // @if CK_DEBUG_TYPING //		);
+                // @if CK_DEBUG_TYPING //	}
                 // @if CK_DEBUG_TYPING // }
                 insertAt(domElement, i, expectedDomChildren[i]);
                 i++;
             }
-            // Update the existing text node data. Note that replace action is generated only for Android for now.
+            // Update the existing text node data.
             else if (action === 'update') {
-                // @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);
+                this._updateTextNode(actualDomChildren[i], expectedDomChildren[i].data);
                 i++;
-                // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
-                // @if CK_DEBUG_TYPING // 	console.groupEnd();
-                // @if CK_DEBUG_TYPING // }
             }
             else if (action === 'equal') {
                 // Force updating text nodes inside elements which did not change and do not need to be re-rendered (#1125).
@@ -639,6 +656,63 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         return newActions.concat(diff(actualSlice, expectedSlice, comparator)
             .map(action => action === 'equal' ? 'update' : action));
     }
+    /**
+     * 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.
+     */
+    _updateTextNode(domText, expectedText) {
+        const actualText = domText.data;
+        if (actualText == expectedText) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Text node does not need update:%c ' +
+            // @if CK_DEBUG_TYPING // 		`${ _escapeTextNodeData( actualText ) }%c (${ actualText.length })`,
+            // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic', 'color: blue', ''
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+            return;
+        }
+        // Our approach to interleaving space character with NBSP might differ with the one implemented by the browser.
+        // Avoid modifying the text node in the DOM if only NBSPs and spaces are interchanged.
+        // We should avoid DOM modifications while composing to avoid breakage of composition.
+        // See: https://github.com/ckeditor/ckeditor5/issues/13994.
+        if (env.isAndroid && this.isComposing && actualText.replace(/\u00A0/g, ' ') == expectedText.replace(/\u00A0/g, ' ')) {
+            // @if CK_DEBUG_TYPING // if ( ( window as any ).logCKETyping ) {
+            // @if CK_DEBUG_TYPING // 	console.info( '%c[Renderer]%c Text node ignore NBSP changes while composing: ' +
+            // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( actualText ) }%c (${ actualText.length }) ->` +
+            // @if CK_DEBUG_TYPING // 		` %c${ _escapeTextNodeData( expectedText ) }%c (${ expectedText.length })`,
+            // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', 'font-style: italic', 'color: blue', '', 'color: blue', ''
+            // @if CK_DEBUG_TYPING // 	);
+            // @if CK_DEBUG_TYPING // }
+            return;
+        }
+        // @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 // 		`${ this.isComposing ? ' while composing (may break composition)' : '' }: ` +
+        // @if CK_DEBUG_TYPING // 		`%c${ _escapeTextNodeData( actualText ) }%c (${ actualText.length }) ->` +
+        // @if CK_DEBUG_TYPING // 		` %c${ _escapeTextNodeData( expectedText ) }%c (${ expectedText.length })`,
+        // @if CK_DEBUG_TYPING // 		'color: green; font-weight: bold', this.isComposing ? 'color: red; font-weight: bold' : '',
+        // @if CK_DEBUG_TYPING // 		'color: blue', '', 'color: blue', ''
+        // @if CK_DEBUG_TYPING // 	);
+        // @if CK_DEBUG_TYPING // }
+        this._updateTextNodeInternal(domText, expectedText);
+    }
+    /**
+     * Part of the `_updateTextNode` method extracted for easier testing.
+     */
+    _updateTextNodeInternal(domText, expectedText) {
+        const actions = fastDiff(domText.data, expectedText);
+        for (const action of actions) {
+            if (action.type === 'insert') {
+                domText.insertData(action.index, action.values.join(''));
+            }
+            else { // 'delete'
+                domText.deleteData(action.index, action.howMany);
+            }
+        }
+    }
     /**
      * Marks text nodes to be synchronized.
      *
@@ -745,7 +819,7 @@ export default class Renderer extends /* #__PURE__ */ ObservableMixin() {
         const focus = this.domConverter.viewPositionToDom(this.selection.focus);
         // @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 // 		'color: green; font-weight: bold', '', anchor, focus
         // @if CK_DEBUG_TYPING // 	);
         // @if CK_DEBUG_TYPING // }
         domSelection.setBaseAndExtent(anchor.parent, anchor.offset, focus.parent, focus.offset);
@@ -969,37 +1043,11 @@ 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 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 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 })`
-        // @if CK_DEBUG_TYPING // 	);
-        // @if CK_DEBUG_TYPING // }
-        return;
-    }
-    // @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 })`
-    // @if CK_DEBUG_TYPING // 	);
-    // @if CK_DEBUG_TYPING // }
-    const actions = fastDiff(actualText, expectedText);
-    for (const action of actions) {
-        if (action.type === 'insert') {
-            domText.insertData(action.index, action.values.join(''));
-        }
-        else { // 'delete'
-            domText.deleteData(action.index, action.howMany);
-        }
-    }
-}
+// @if CK_DEBUG_TYPING // function _escapeTextNodeData( text ) {
+// @if CK_DEBUG_TYPING // 	const escapedText = text
+// @if CK_DEBUG_TYPING // 		.replace( /&/g, '&' )
+// @if CK_DEBUG_TYPING // 		.replace( /\u00A0/g, ' ' )
+// @if CK_DEBUG_TYPING // 		.replace( /\u2060/g, '⁠' );
+// @if CK_DEBUG_TYPING //
+// @if CK_DEBUG_TYPING // 	return `"${ escapedText }"`;
+// @if CK_DEBUG_TYPING // }

package/src/view/view.d.ts

@@ -7,7 +7,6 @@
  */
 import Document from './document.js';
 import DowncastWriter from './downcastwriter.js';
-import Renderer from './renderer.js';
 import DomConverter from './domconverter.js';
 import Position, { type PositionOffset } from './position.js';
 import Range from './range.js';
@@ -95,10 +94,8 @@ export default class View extends /* #__PURE__ */ View_base {
     hasDomSelection: boolean;
     /**
      * Instance of the {@link module:engine/view/renderer~Renderer renderer}.
-     *
-     * @internal
      */
-    readonly _renderer: Renderer;
+    private readonly _renderer;
     /**
      * A DOM root attributes cache. It saves the initial values of DOM root attributes before the DOM element
      * is {@link module:engine/view/view~View#attachDomRoot attached} to the view so later on, when

package/src/view/view.js

@@ -144,6 +144,15 @@ export default class View extends /* #__PURE__ */ ObservableMixin() {
                 }
             });
         }
+        // Listen to external content mutations (directly in the DOM) and mark them to get verified by the renderer.
+        this.listenTo(this.document, 'mutations', (evt, { mutations }) => {
+            mutations.forEach(mutation => this._renderer.markToSync(mutation.type, mutation.node));
+        }, { priority: 'low' });
+        // After all mutated nodes were marked to sync we can trigger view to DOM synchronization
+        // to make sure the DOM structure matches the view.
+        this.listenTo(this.document, 'mutations', () => {
+            this.forceRender();
+        }, { priority: 'lowest' });
     }
     /**
      * Attaches a DOM root element to the view element and enable all observers on that element.