CKEditor 5 doesn't save updated value if form submitted right after the change

Created on 25 October 2023, over 1 year ago
Updated 25 April 2024, 12 months ago

Problem/Motivation

Discovered in https://www.drupal.org/project/drupal/issues/3382780#comment-15289366 ๐Ÿ› [drupalImage] When ckeditor5_arbitraryHtmlSupport is on, fails to update Postponed

In web/core/modules/ckeditor5/js/ckeditor5.js:443 callback that marks field as changed called with debounce(callback, 400)();

debounce() returns a function that should be called instead of callback itself, but in this case, on every change new debounce function is created, that way it is basically the same as using 400ms timeout.

Because of that if a form is submitted in 400ms after the first change, the field is saved without it. Can be reproduced manually, but mainly it is a problem for tests, where it is very likely to submit a form in this time window.

CKeditor updates the hidden textarea anyway, even before onChange is executed, but the Drupal.editorDetach function resets it to its original value.
It happens only when more than 2 text formats are present because web/core/modules/editor/src/Element.php:118 is the only place when data-editor-value-is-changed is set to false (otherwise before onChange fired this attribute is not set at all and the condition in Drupal.editorDetach is false)

So a bunch of small mistakes leads to this issue.

Steps to reproduce

1. Open the node edit page with the CKEditor widget.
2. Make the first change and submit in 400ms after it.
3. Field saved without changes.
or
1. Edit the web/core/modules/editor/js/editor.js:306 function to print something console.log()
2. Make changes to the CKEditor field.
3. Console.log called for every change with 400ms timeout, but it was supposed to be called not more often than once in 400ms.

Proposed resolution

Change Drupal.editors.ckeditor5.onChange to store debounce function instead of callback.

Remaining tasks

User interface changes

None

API changes

None

Data model changes

None

Release notes snippet

None?

๐Ÿ› Bug report
Status

Fixed

Version

10.2 โœจ

Component
CKEditor 5ย  โ†’

Last updated about 14 hours ago

Created by

Live updates comments and jobs are added and updated live.
  • JavaScript

    Affects the content, performance, or handling of Javascript.

Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024