Merge pull request #13851 from ckeditor/cf/4983

Other: `MultiRootEditor` will first fire all `detachRoot` events and then all `addRoot` events if there are detached and added roots in the same batch.

packages/ckeditor5-editor-multi-root/src/multirooteditor.ts

@@ -175,13 +175,22 @@ export default class MultiRootEditor extends DataApiMixin( Editor ) {
 		this.model.document.on( 'change:data', () => {
 			const changedRoots = this.model.document.differ.getChangedRoots();
 
+			// Fire detaches first. If there are multiple roots removed and added in one batch, it should be easier to handle if
+			// changes aren't mixed. Detaching will usually lead to just removing DOM elements. Detaching first will lead to a clean DOM
+			// when new editables are added in `addRoot` event.
+			for ( const changes of changedRoots ) {
+				const root = this.model.document.getRoot( changes.name )!;
+
+				if ( changes.state == 'detached' ) {
+					this.fire<DetachRootEvent>( 'detachRoot', root );
+				}
+			}
+
 			for ( const changes of changedRoots ) {
 				const root = this.model.document.getRoot( changes.name )!;
 
 				if ( changes.state == 'attached' ) {
 					this.fire<AddRootEvent>( 'addRoot', root );
-				} else if ( changes.state == 'detached' ) {
-					this.fire<DetachRootEvent>( 'detachRoot', root );
 				}
 			}
 		} );

packages/ckeditor5-editor-multi-root/tests/multirooteditor.js

@@ -645,6 +645,29 @@ describe( 'MultiRootEditor', () => {
 		} );
 	} );
 
+	it( 'should first fire `detachRoot` event then `addRoot` event', () => {
+		const events = [];
+
+		return MultiRootEditor.create( { foo: '' }, { plugins: [ Paragraph, Undo ] } ).then( editor => {
+			editor.on( 'addRoot', () => {
+				events.push( 'addRoot' );
+			} );
+
+			editor.on( 'detachRoot', () => {
+				events.push( 'detachRoot' );
+			} );
+
+			editor.model.change( writer => {
+				writer.addRoot( 'bar' );
+				writer.detachRoot( 'foo' );
+			} );
+
+			return editor.destroy();
+		} ).then( () => {
+			expect( events ).to.deep.equal( [ 'detachRoot', 'addRoot' ] );
+		} );
+	} );
+
 	describe( 'EditorConfig#rootsAttributes', () => {
 		it( 'should load attributes from editor configuration', async () => {
 			editor = await MultiRootEditor.create( { foo: '', bar: '' }, {