Drupal.editors.ckeditor5.onChange event has outdated data when user types too fast.

Created on 25 April 2024, about 1 year ago

Problem/Motivation

The release of Drupal 10.2.5 has introduced a regression in (but not limited to) Site Studio's implantation of CKEditor5 that results in user input being lost if they type too fast.

  1. A user types into the Site Studio wysiwyg field
  2. Site Studio uses the Drupal.editors.ckeditor5.onChange event to pull the value of the editor using ckInstance.getData() and store that in a JSON blob.
  3. Since this change https://git.drupalcode.org/project/drupal/-/commit/5540b5f84a6ae7899df01... if a user types multiple characters in quick succession, only the first character they type is registered in the on change event and all subsequent inputs are lost.
  4. I think the issue is due to the use of the immediate variable on the debounce call.

Steps to reproduce

If you paste this snippet into the JS console on a node page with a CKEditor instance and then type into the editor quickly vs slowly, you can see the issue. When typing quickly the onChange event is fired after the first user input but not fired again after the user types their last input.

Drupal.editors.ckeditor5.onChange(document.getElementById('edit-body-0-value'), () => {
 const ckInstance = Drupal.CKEditor5Instances.values().next().value;
  console.log(ckInstance.getData())
});

I've attached a video showing the above steps to test demonstrating the issue.

🐛 Bug report
Status

Active

Version

10.2

Component
CKEditor 5 

Last updated 1 day ago

Created by

🇬🇧United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @jessebaker
  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    This is a regression introduced by 🐛 CKEditor5 doens't save updated value if form submitted right after the change Active 😭

    Let's get the (detailed, thank you!) steps to reproduce encoded in the core/modules/ckeditor5/tests/src/FunctionalJavascript/CKEditor5Test.php test coverage that #3396742 expanded. We should be able to reproduce the failure in there.

    Reproduced easily without Site Studio, just by using a Drupal core text field. Rephrased the issue summary for that. This does not negatively impact Drupal core today, but impacts potentially many contrib modules.

  • First commit to issue fork.
  • 🇮🇳India ankitv18

    if debounce method is called with callback and delay only then it works perfectly.

  • 🇷🇸Serbia rakun

    Hi @ankitv18
    Did you provide patch for this since this branch looks empty?

  • 🇮🇳India ankitv18

    MR!8284 opened agaisnt 10.2.x branch, if this fix resolve the issue then we can push the commit to the 11.x branch too.

  • Status changed to Needs review 11 months ago
  • Pipeline finished with Failed
    11 months ago
    Total: 163s
    #190776
  • Pipeline finished with Failed
    11 months ago
    Total: 170s
    #190777
  • Status changed to Needs work 11 months ago
  • 🇺🇸United States smustgrave

    11.x was correct target for the MR as a fix will have to land there first. I do see comment #8 but fix will have to pass 11.x too.

    Tagging for issue summary as proposed solution appears to be missing. This a UI issue? If so can we add before/after there.

    Also appears to be tagged for tests which may still be needed. Though with regressions (especially data loss) I'm a +1 for fixing and opening a follow up for expanding test coverage. But I can't make those calls.

  • 🇬🇧United Kingdom 8ballsteve

    Adding the change from the MR as a patch so we can kick off some tests against this.

  • 🇬🇧United Kingdom Ok4p1 Glasgow

    Hello, the patch mitigates the issue but I am still experiencing it

  • First commit to issue fork.
  • Pipeline finished with Success
    6 months ago
    Total: 528s
    #344310
  • I wonder if we could just get rid of debounce to fix this. (I pushed MR!10265 with that change)
    Before the 🐛 CKEditor5 doens't save updated value if form submitted right after the change Active it worked just like without debounce, but with a 400ms delay for each call as mentioned in the issue summary there.

    And IMO it just makes more sense, that onChange should be called on each change immediately, and if the user/contrib code needs to throttle that, it is their responsibility, and they will be able to decide how much they want to throttle it.

  • 🇺🇸United States smustgrave

    Issue summary still appears to need updating. Recommend using standard issue template.

    Was previously tagged for tests but not sure what those would look like

  • Pipeline finished with Failed
    5 days ago
    Total: 229s
    #489350
  • Status changed to Needs review 5 days ago
  • I expanded the \Drupal\Tests\ckeditor5\FunctionalJavascript\CKEditor5Test::testSave to check the behaviour of the onChange event. The test assumes there will be no debounce/throttling from this method.
    Updated the IS
    Back to "Needs review".

  • Pipeline finished with Success
    5 days ago
    Total: 476s
    #489377
  • 🇺🇸United States smustgrave
    1) Drupal\Tests\ckeditor5\FunctionalJavascript\CKEditor5Test::testSave
    Failed asserting that two arrays are identical.
    --- Expected
    +++ Actual
    @@ @@
     Array &0 [
         0 => '<p>c</p>',
    -    1 => '<p>ch</p>',
    -    2 => '<p>cha</p>',
    -    3 => '<p>chan</p>',
    -    4 => '<p>chang</p>',
    -    5 => '<p>change</p>',
     ]
    /builds/issu
    

    Test change looks good and summary is correct so removing those tags.

    Following the steps am seeing the issue and MR does appear to addressed.

Production build 0.71.5 2024