Преглед изворни кода

Added RawElement support in the MutationObserver.

Aleksander Nowodzinski пре 5 година
родитељ
комит
e694001462

+ 4 - 4
packages/ckeditor5-engine/src/view/observer/mutationobserver.js

@@ -150,8 +150,8 @@ export default class MutationObserver extends Observer {
 			if ( mutation.type === 'childList' ) {
 				const element = domConverter.mapDomToView( mutation.target );
 
-				// Do not collect mutations from UIElements.
-				if ( element && element.is( 'uiElement' ) ) {
+				// Do not collect mutations from UIElements and RawElements.
+				if ( element && ( element.is( 'uiElement' ) || element.is( 'rawElement' ) ) ) {
 					continue;
 				}
 
@@ -165,8 +165,8 @@ export default class MutationObserver extends Observer {
 		for ( const mutation of domMutations ) {
 			const element = domConverter.mapDomToView( mutation.target );
 
-			// Do not collect mutations from UIElements.
-			if ( element && element.is( 'uiElement' ) ) {
+			// Do not collect mutations from UIElements and RawElements.
+			if ( element && ( element.is( 'uiElement' ) || element.is( 'rawElement' ) ) ) {
 				continue;
 			}
 

+ 60 - 0
packages/ckeditor5-engine/tests/view/observer/mutationobserver.js

@@ -8,6 +8,7 @@
 import View from '../../../src/view/view';
 import MutationObserver from '../../../src/view/observer/mutationobserver';
 import UIElement from '../../../src/view/uielement';
+import RawElement from '../../../src/view/rawelement';
 import createViewRoot from '../_utils/createroot';
 import { parse } from '../../../src/dev-utils/view';
 import { StylesProcessor } from '../../../src/view/stylesmap';
@@ -591,6 +592,65 @@ describe( 'MutationObserver', () => {
 		} );
 	} );
 
+	describe( 'RawElement integration', () => {
+		const renderStub = sinon.stub();
+		function createRawElement( name ) {
+			const element = new RawElement( name );
+
+			element.render = function( domDocument ) {
+				const root = this.toDomElement( domDocument );
+				root.innerHTML = 'foo bar';
+
+				return root;
+			};
+
+			return element;
+		}
+
+		beforeEach( () => {
+			const rawElement = createRawElement( 'div' );
+			viewRoot._appendChild( rawElement );
+
+			view.forceRender();
+			renderStub.reset();
+			view.on( 'render', renderStub );
+		} );
+
+		it( 'should not collect text mutations from RawElement', () => {
+			domEditor.childNodes[ 2 ].childNodes[ 0 ].data = 'foom';
+
+			mutationObserver.flush();
+
+			expect( lastMutations ).to.be.null;
+		} );
+
+		it( 'should not cause a render from RawElement', () => {
+			domEditor.childNodes[ 2 ].childNodes[ 0 ].data = 'foom';
+
+			mutationObserver.flush();
+
+			expect( renderStub.callCount ).to.equal( 0 );
+		} );
+
+		it( 'should not collect child mutations from RawElement', () => {
+			const span = document.createElement( 'span' );
+			domEditor.childNodes[ 2 ].appendChild( span );
+
+			mutationObserver.flush();
+
+			expect( lastMutations ).to.be.null;
+		} );
+
+		it( 'should not cause a render when RawElement gets a child', () => {
+			const span = document.createElement( 'span' );
+			domEditor.childNodes[ 2 ].appendChild( span );
+
+			mutationObserver.flush();
+
+			expect( renderStub.callCount ).to.equal( 0 );
+		} );
+	} );
+
 	function expectDomEditorNotToChange() {
 		expect( domEditor.childNodes.length ).to.equal( 2 );
 		expect( domEditor.childNodes[ 0 ].tagName ).to.equal( 'P' );