Contrib.social

CKEditor5: Infinite loop created for change listener when content enter in Source only

Open on Drupal.org →
Created on 21 August 2023, over 1 year ago
Updated 13 June 2024, 6 months ago

Problem/Motivation

An infinite loop occurs when attempting to save a node where only content has been entered in the Source mode of a CKEditor enabled for maxlength processing.

Steps to reproduce

  1. Configure a CKEditor text input with the Source plugin button
  2. Create a formatted text field that is configured to use the CKEditor5 text input and maxlength.
  3. Add a new node for the content type that has the text field
  4. Do no enter anything in the editor for the formatted text field
  5. Click the “Source” button in the editor’s toolbar.
  6. Enter some text.
  7. Save the node
  8. BUG: The page will eventually crash because the JavaScript is stuck in an infinite loop.

Cause

Calling the editor.getData() can trigger a "change:data" event. This can be seen by adding a console.log to the change listener while commenting out everything else except a single call to editor.getData().

ml.ckeditor5 = function (editor, options) {
  $(once('maxlengthbinding', editor.sourceElement)).each(function() {
    editor.model.document.on('change', function() {
// 2nd Change event Call: The following line starts the infinite loop for the "change" event.
// The "editor.getData()" triggers a change since there is no data in the
// editor at this point, only in the "Source" mode.
// No subsequent Change event call will get passed this line.
      if (editor.getData() !== editor.sourceElement.textContent) {
        // Trim if limit is reached and enforcing is activated.
        if (options['enforce']) {
          ...
        }
// 1st Change event Call: This runs once and starts the infinite loop for the "change" event.
        editor.updateSourceElement();
        $(editor.sourceElement).trigger('change', [true]);
      }
    });
  });
}

Proposed resolution

Add recursion protection to ml.ckeditor5.

Remaining tasks

  • ✅ Get maintainer approval for the proposed resolution
  • ✅ Implement resolution
  • ✅ Write test coverage (contact a maintainer if you need help)
  • ✅ Maintainer review via the UI
  • ❌ Maintainer Code Review #1
  • ❌ Maintainer code review #2
  • ❌ Merge into dev branch, with credit to author and participants
🐛 Bug report
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States recrit

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024