ckeditor5 `getData` can be very slow depending on content

getData can be very slow depending on content

📝 Provide detailed reproduction steps (if any)

run the following code in the demo

var htmlData = "<p>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP</p><p>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP<br>Ho<strong>w do</strong> we <span style=\"font-family:'Courier New', Courier, monospace;\">get the<s> cont</s>ra</span>c<span style=\"font-size:18px;\"><strong>ts transferr</strong></span>ed over<span style=\"background-color:hsl(0,75%,60%);\"> from Tens</span>or to CQP</p>";
var ckEditorInstance = document.querySelector('.ck-content.ck-editor__editable').ckeditorInstance;
ckEditorInstance.setData(htmlData);
var sampleSize = 5;
var time = 0;
for (var i = 0; i < sampleSize; i++) {
	var start = new Date().getTime();
	ckEditorInstance.getData();
    var elapsed = (new Date().getTime() - start);
    console.log('sample ' + i + ' took ' + elapsed + 'ms');
    time += elapsed;
}
console.log('averaged ' + time/sampleSize + 'ms with a sample size of ' + sampleSize);

✔️ Expected result

getData returns in reasonable time and is possibly even cached until the model is changed so subsequent calls return in less time

❌ Actual result

Browser	CPU	time
Chrome 113	-	~560ms
Chrome 113	4x slower	2633ms
Safari 16.4	-	920ms

❓ Possible solution

It appears this problem was explored some time ago and this issue was predicted. https://github.com/ckeditor/ckeditor5/issues/5812

📃 Other details

attribute	value
model	MacBook Pro 2019
processor	2.3 Ghz 8-core i9
memory	32 GB
macOS	Ventura 13.3.1

This issue is happening in our production environment with customer data. The html used in the script above was generated to demonstrate the performance issue.

In our implementation we use @ckeditor/ckeditor5-react. This issue is compounded by the fact that it uses Watchdog which has a _save method that calls getData. This is throttled, but effectively pauses interaction for the duration of the call every 5 seconds.

We also use the react CKEditor as a controlled component, storing the content and passing it as the data prop, then updating it when the onChange callback is invoked. In addition to us calling getData in the onchange callback, it is again called in _shouldUpdateEditor when the react CKEditor component receives the new props.

I considered submitting this issue to the ckeditor/ckeditor5-react repo, but I think the issue from four years ago highlights that the root cause is in getData and that any framework that uses two way binding will suffer the same issue.

May 24 '23 19:05 agradl

Thanks for the report. @scofalik I know you were looking into watchdog performance.

May 25 '23 09:05 Witoso

Recently, I have also been bothered by this similar issue. https://github.com/ckeditor/ckeditor5/issues/14188 I am also paying attention to: how to use editor.getData() gracefully when as a controlled editor component.

May 26 '23 07:05 gfu7

Regarding the watchdog performance please follow the #13098.

May 26 '23 07:05 Witoso

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

May 26 '24 03:05 CKEditorBot

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

Jun 26 '24 03:06 CKEditorBot