Fix crashing differ on large paragraphs

[Mati365]

Suggested merge commit message (convention)

Fix (engine): No longer crash editor when trying to style a very long paragraph. Closes #16819

---

Additional information

It looks like 200k arguments, passed to .push method of the Array, causes Google Chrome crashing. I switched it to plain for loop and it works fine.

[niegowski]

Maybe a helper like our spliceArray could be a better solution?

ckeditor5/packages/ckeditor5-utils/src/splicearray.ts

Lines 12 to 33 in 08270aa

	/**
	* Splices one array into another. To be used instead of `Array.prototype.splice` as the latter may
	* throw "Maximum call stack size exceeded" when passed huge number of items to insert.
	*
	* Note: in contrary to Array.splice, this function does not modify the original `target`.
	*
	* ```ts
	* spliceArray( [ 1, 2 ], [ 3, 4 ], 0, 0 ); // [ 3, 4, 1, 2 ]
	* spliceArray( [ 1, 2 ], [ 3, 4 ], 1, 1 ); // [ 1, 3, 4 ]
	* spliceArray( [ 1, 2 ], [ 3, 4 ], 1, 0 ); // [ 1, 3, 4, 2 ]
	* spliceArray( [ 1, 2 ], [ 3, 4 ], 2, 0 ); // [ 1, 2, 3, 4 ]
	* spliceArray( [ 1, 2 ], [], 0, 1 ); // [ 2 ]
	* ```
	*
	* @param target Array to be spliced.
	* @param source Array of elements to be inserted to target.
	* @param start Index at which nodes should be inserted/removed.
	* @param count Number of items.
	*
	* @returns New spliced array.
	*/
	export default function spliceArray<T>( target: ReadonlyArray<T>, source: ReadonlyArray<T>, start: number, count: number ): Array<T> {

[pszczesniak]

Maybe extend the diff array size by change.howMany and use fill ??

[Mati365]

@pszczesniak / @niegowski I'd recommend sticking with a for loop to maintain consistency with other parts of _generateDiffInstructionsFromChanges. I don’t believe there will be any noticeable performance gains from optimizing this specific region, as it’s highly likely that it’s already JIT compiled to machine code.

edit: I checked .fill. Performance is identical.

diff.length = diff.length + change.howMany;
diff.fill( 'a', offset, diff.length );

[niegowski]

Please add an automatic test so we do not have a regression in the future.

[Mati365]

@niegowski Added

[pszczesniak]

Could you write (here and/or in the issue) why we choose 1500?

It's based on some tests or it's some kind of random value?

[Mati365]

Limitation of args stack depends on OS / Browser etc. I chose some kind of random value.