Skip to content

Commit 8f5232c

Browse files
f1amesf1ames
authored
Merge pull request #535 from ckeditor/ck/534
Fix: Update roots with modified content only.
2 parents 4e64322 + f09915b commit 8f5232c

File tree

2 files changed

+85
-24
lines changed

2 files changed

+85
-24
lines changed

‎src/useMultiRootEditor.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -505,7 +505,7 @@ const useMultiRootEditor = ( props: MultiRootHookProps ): MultiRootHookReturns =
505505
data || /* istanbul ignore next -- @preserve: It should never happen, data should be always filled. */ {}
506506
);
507507

508-
const hasModifiedData = dataKeys.some( rootName =>
508+
const modifiedRoots = dataKeys.filter( rootName =>
509509
editorData[ rootName ] !== undefined &&
510510
JSON.stringify( editorData[ rootName ] ) !== JSON.stringify( data[ rootName ] )
511511
);
@@ -530,12 +530,12 @@ const useMultiRootEditor = ( props: MultiRootHookProps ): MultiRootHookReturns =
530530
} );
531531
};
532532

533-
const _updateEditorData = () => {
534-
// If any of the roots content has changed, set the editor data.
535-
// Unfortunately, we cannot set the editor data just for one root,
536-
// so we need to overwrite all roots (`nextProps.data` is an
537-
// object with data for each root).
538-
instance.data.set( data, { suppressErrorInCollaboration: true } as any );
533+
const _updateEditorData = ( roots: Array<string> ) => {
534+
const dataToUpdate = roots.reduce(
535+
( result, rootName ) => ( { ...result, [ rootName ]: data[ rootName ] } ),
536+
Object.create( null )
537+
);
538+
instance.data.set( dataToUpdate, { suppressErrorInCollaboration: true } as any );
539539
};
540540

541541
const _updateEditorAttributes = ( writer: Writer, roots: Array<string> ) => {
@@ -555,8 +555,8 @@ const useMultiRootEditor = ( props: MultiRootHookProps ): MultiRootHookReturns =
555555
_handleNewRoots( newRoots );
556556
_handleRemovedRoots( removedRoots );
557557

558-
if ( hasModifiedData ) {
559-
_updateEditorData();
558+
if ( modifiedRoots.length ) {
559+
_updateEditorData( modifiedRoots );
560560
}
561561

562562
if ( rootsWithChangedAttributes.length ) {

‎tests/useMultiRootEditor.test.tsx

+76-15
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ import turnOffDefaultErrorCatching from './_utils/turnoffdefaulterrorcatching.js
1919
describe( 'useMultiRootEditor', () => {
2020
const rootsContent = {
2121
intro: '<h2>Sample</h2><p>This is an instance of the.</p>',
22-
content: '<p>It is the custom content</p>'
22+
content: '<p>It is the custom content</p>',
23+
footer: '<p>Footer content</p>'
2324
};
2425

2526
const rootsAttributes = {
@@ -30,6 +31,10 @@ describe( 'useMultiRootEditor', () => {
3031
content: {
3132
row: '1',
3233
order: 20
34+
},
35+
footer: {
36+
row: '2',
37+
order: 30
3338
}
3439
};
3540

@@ -232,7 +237,7 @@ describe( 'useMultiRootEditor', () => {
232237
const { data, editableElements } = result.current;
233238

234239
expect( data ).to.deep.equal( rootsContent );
235-
expect( editableElements.length ).to.equal( 2 );
240+
expect( editableElements.length ).to.equal( 3 );
236241
} );
237242

238243
it( 'should update the editor data when the state has been changed', async () => {
@@ -254,8 +259,64 @@ describe( 'useMultiRootEditor', () => {
254259

255260
expect( spy ).toHaveBeenCalledOnce();
256261
expect( data.intro ).to.equal( '<p>New data</p>' );
257-
expect( editableElements.length ).to.equal( 2 );
262+
expect( data.content ).to.equal( rootsContent.content );
263+
expect( data.footer ).to.equal( rootsContent.footer );
264+
expect( spy.mock.calls[ 0 ][ 0 ] ).to.deep.equal( { 'intro': 'New data' } );
265+
expect( editableElements.length ).to.equal( 3 );
258266
expect( editor!.getFullData().intro ).to.equal( '<p>New data</p>' );
267+
expect( editor!.getFullData().content ).to.equal( rootsContent.content );
268+
expect( editor!.getFullData().footer ).to.equal( rootsContent.footer );
269+
} );
270+
} );
271+
272+
it( 'should update only editor roots which content have been changed', async () => {
273+
const { result } = renderHook( () => useMultiRootEditor( editorProps ) );
274+
275+
await waitFor( () => {
276+
expect( result.current.editor ).to.be.instanceof( TestMultiRootEditor );
277+
} );
278+
279+
const { editor, setData } = result.current;
280+
const spy = vi.spyOn( editor!.data, 'set' );
281+
282+
act( () => {
283+
setData( { ...rootsContent, 'intro': '<h2>Sample</h2>', 'footer': 'Text...' } );
284+
} );
285+
286+
await waitFor( () => {
287+
const { data, editableElements } = result.current;
288+
289+
expect( spy ).toHaveBeenCalledOnce();
290+
expect( data.intro ).to.equal( '<h2>Sample</h2>' );
291+
expect( data.footer ).to.equal( '<p>Text...</p>' );
292+
expect( spy.mock.calls[ 0 ][ 0 ] ).to.deep.equal( { 'intro': '<h2>Sample</h2>', 'footer': 'Text...' } );
293+
expect( editableElements.length ).to.equal( 3 );
294+
expect( editor!.getFullData().intro ).to.equal( '<h2>Sample</h2>' );
295+
expect( editor!.getFullData().footer ).to.equal( '<p>Text...</p>' );
296+
} );
297+
} );
298+
299+
it( 'should not update editor roots when no content have been changed', async () => {
300+
const { result } = renderHook( () => useMultiRootEditor( editorProps ) );
301+
302+
await waitFor( () => {
303+
expect( result.current.editor ).to.be.instanceof( TestMultiRootEditor );
304+
} );
305+
306+
const { editor, setData } = result.current;
307+
const spy = vi.spyOn( editor!.data, 'set' );
308+
309+
act( () => {
310+
setData( { ...rootsContent, 'intro': '<h2>Sample</h2><p>This is an instance of the.</p>' } );
311+
} );
312+
313+
await waitFor( () => {
314+
const { data, editableElements } = result.current;
315+
316+
expect( spy.mock.calls.length ).to.equal( 0 );
317+
expect( data ).to.deep.equal( rootsContent );
318+
expect( editableElements.length ).to.equal( 3 );
319+
expect( editor!.getFullData() ).to.deep.equal( rootsContent );
259320
} );
260321
} );
261322

@@ -281,7 +342,7 @@ describe( 'useMultiRootEditor', () => {
281342

282343
expect( spy ).toHaveBeenCalledOnce();
283344
expect( data.intro ).to.be.undefined;
284-
expect( editableElements.length ).to.equal( 1 );
345+
expect( editableElements.length ).to.equal( 2 );
285346
expect( editor!.getFullData().intro ).to.be.undefined;
286347
} );
287348
} );
@@ -306,7 +367,7 @@ describe( 'useMultiRootEditor', () => {
306367

307368
expect( spy ).toHaveBeenCalledOnce();
308369
expect( data.outro ).to.be.equal( '<p>New data</p>' );
309-
expect( editableElements.length ).to.equal( 3 );
370+
expect( editableElements.length ).to.equal( 4 );
310371
expect( editor!.getFullData().outro ).to.be.equal( '<p>New data</p>' );
311372
} );
312373
} );
@@ -328,7 +389,7 @@ describe( 'useMultiRootEditor', () => {
328389
const { data, editableElements } = result.current;
329390

330391
expect( data.intro ).to.equal( '<p>New data</p>' );
331-
expect( editableElements.length ).to.equal( 2 );
392+
expect( editableElements.length ).to.equal( 3 );
332393
expect( editor!.getFullData().intro ).to.equal( '<p>New data</p>' );
333394
} );
334395
} );
@@ -354,7 +415,7 @@ describe( 'useMultiRootEditor', () => {
354415
expect( spy.mock.calls.length ).to.equal( editableElements.length );
355416
expect( data.outro ).to.equal( '' );
356417
expect( attributes.outro ).to.deep.equal( { order: null, row: null } );
357-
expect( editableElements.length ).to.equal( 3 );
418+
expect( editableElements.length ).to.equal( 4 );
358419
expect( editor!.getFullData().outro ).to.equal( '' );
359420
} );
360421

@@ -396,7 +457,7 @@ describe( 'useMultiRootEditor', () => {
396457

397458
const { editor } = result.current;
398459

399-
expect( result.current.editableElements.length ).to.equal( 2 );
460+
expect( result.current.editableElements.length ).to.equal( 3 );
400461

401462
act( () => {
402463
editor!.detachRoot( 'intro' );
@@ -406,7 +467,7 @@ describe( 'useMultiRootEditor', () => {
406467
const { data, editableElements } = result.current;
407468

408469
expect( data.intro ).to.be.undefined;
409-
expect( editableElements.length ).to.equal( 1 );
470+
expect( editableElements.length ).to.equal( 2 );
410471
expect( editor!.getFullData().intro ).to.be.undefined;
411472
} );
412473
} );
@@ -718,7 +779,7 @@ describe( 'useMultiRootEditor', () => {
718779
const { data, editableElements } = result.current;
719780

720781
expect( data.intro ).to.equal( rootsContent.intro );
721-
expect( editableElements.length ).to.equal( 2 );
782+
expect( editableElements.length ).to.equal( 3 );
722783
expect( editor!.getFullData().intro ).to.equal( '<p>New data</p>' );
723784
expect( getDataSpy ).not.toHaveBeenCalled();
724785
} );
@@ -747,7 +808,7 @@ describe( 'useMultiRootEditor', () => {
747808
expect( spy.mock.calls.length ).to.equal( editableElements.length );
748809
expect( data.outro ).to.be.undefined;
749810
expect( attributes.outro ).to.be.undefined;
750-
expect( editableElements.length ).to.equal( 3 );
811+
expect( editableElements.length ).to.equal( 4 );
751812
expect( editor!.getFullData().outro ).to.equal( '' );
752813
} );
753814

@@ -763,7 +824,7 @@ describe( 'useMultiRootEditor', () => {
763824

764825
const { editor } = result.current;
765826

766-
expect( result.current.editableElements.length ).to.equal( 2 );
827+
expect( result.current.editableElements.length ).to.equal( 3 );
767828

768829
act( () => {
769830
editor!.detachRoot( 'intro' );
@@ -773,7 +834,7 @@ describe( 'useMultiRootEditor', () => {
773834
const { data, editableElements } = result.current;
774835

775836
expect( data.intro ).to.be.equal( rootsContent.intro );
776-
expect( editableElements.length ).to.equal( 1 );
837+
expect( editableElements.length ).to.equal( 2 );
777838
expect( editor!.getFullData().intro ).to.be.undefined;
778839
} );
779840
} );
@@ -1029,7 +1090,7 @@ describe( 'useMultiRootEditor', () => {
10291090

10301091
await waitFor( () => {
10311092
expect( renderedEditor.current ).not.to.be.null;
1032-
expect( container.getElementsByClassName( 'ck-editor__editable' ).length ).to.equal( 2 );
1093+
expect( container.getElementsByClassName( 'ck-editor__editable' ).length ).to.equal( 3 );
10331094
} );
10341095

10351096
renderedEditor.current!.model.document.roots.remove( 'intro' );
@@ -1104,7 +1165,7 @@ describe( 'useMultiRootEditor', () => {
11041165
const { container } = render( <Component /> );
11051166

11061167
await waitFor( () => {
1107-
expect( container.getElementsByClassName( 'ck-editor__editable' ).length ).to.equal( 2 );
1168+
expect( container.getElementsByClassName( 'ck-editor__editable' ).length ).to.equal( 3 );
11081169
} );
11091170
} );
11101171

0 commit comments

Comments
 (0)