Failure in support for CKEditor5 when the form is too large or takes too long to load.

Here is a short patch that solves the problem.

Here is a short patch that solves the problem.

Hey, thanks for creating this issue - I've run into the same problem. I tried the patch you've provided and it works for fields that are visible when the form loads, but it doesn't work for dynamically added fields (e.g. from paragraphs). I changed the "window load event listener" part to a 100ms setTimeout which seems to sort it out, but I know that's hacky and race condition-y so I haven't created a patch for it.

I might look for a better fix later but just thought I'd provide my 2 cents!

I was running into this problem a few weeks ago, but I was puzzled as maxlength was activated for three fields and only working for two of them. Only if I disabled maxlength for the two working ones, it started to work for the third field. Through this issue I figured, that my specific form's size might be very close and above to the threshold to trigger that error.

Implementing the patch from #4, it now works for all three fields
(using Maxlength 2.1.1 on Drupal 9.5.9).

cedewey → credited hipp2bsquare → .

Hi all,

Thanks for reporting this and contributing a patch. hipp2bsquare and I have reviewed this. We've confirmed that the patch does fix the issue of the countdown message not working properly, when a form has many fields with MaxLength enabled on it. The code also generally looks good.

Assigning this to joevagyok for a final code review. Also, Joe, we're not sure that test coverage is doable/relevant for this specific scenario of a form with many fields, but defer to you.

Thank you the work on this!

Reopening the issue after having a major regression on CKEditor4 fields.
The once function is used in combination with the window.load event listener. once is a Drupal function that ensures a behavior is attached only once to a set of elements, and it's very useful in the Drupal AJAX context where behaviors could be attached multiple times. However, it's used inside the window.load event listener, which could potentially lead to certain timing issues.

The window.load event fires when the complete page is fully loaded, including all frames, objects and images. If the window.load event triggers before Drupal attaches its behaviors, the once function may apply the behavior only to the first field, since it's the only one existing in the DOM at that moment.

We can't rely on window.load event because CKEditor4-5 has different initialization timing. We need to find a different solution. For now I revert the changes.

Also this solution does not work when we work with layout builder when we add a block on that. this function is not getting called

In my case In node with paragraph - if I press the Collapse button - MaxLength message will disappear

TL;DR: @mahtab_alam's change fixes this for me, but I noticed it a bit late. The CKEditor5 library dependency declaration was indeed missing.

Longer explanation: I had the similar problem when using Maxlength on Webform's text_format fields. First of all, there is no UI that I know of for adding Maxlength to the fields, but you can achieve it in YAML by issuing something like this:

field_name:
  '#type': text_format
  '#title': 'Field title'
  '#allowed_formats':
    simple_text: simple_text
  '#hide_help': true
  '#maxlength_js': true
  '#attributes':
    class:
      - maxlength
    data-maxlength: 200
  '#attached':
    library:
      - maxlength/maxlength

Now the maxlength text appeared, but the calculation didn't work at all, and I found this issue after having realized that CKEditor is not initialized by the time the calculation functionality is attached. After reading @joevagyok's comment I developed a solution with slightly different approach, using MutationObserver. I didn't want to create a patch as I believe there's a solution already, but saving the code here anyway just in case.

  Drupal.behaviors.maxlength = {
    attach: function(context) {
      ...

      // Create a function to handle the CKEditor 5 integration.
      function integrateWithCKEditor5(element, options) {
        const eid = element.dataset.ckeditor5Id;
        const ckeditorInstance = Drupal.CKEditor5Instances.get(eid);

        if (eid && ckeditorInstance) {
          ml.ckeditor5(ckeditorInstance, options);
        }
      }

      // Select the elements with the class 'maxlength' and filter them to input elements.
      const maxlengthInputs = $context.find('.maxlength').filter(':input');

      // Function to monitor changes in dataset.
      function observeDatasetChanges(element, callback) {
        const observer = new MutationObserver(() => {
          callback(element);
        });

        observer.observe(element, { attributes: true });
      }

      // Iterate over the input elements.
      $(once('maxlength', maxlengthInputs)).each(function () {
        const options = {};
        const $this = $(this);
        options['counterText'] = $this.attr('maxlength_js_label');
        if ($this.hasClass('maxlength_js_enforce')) {
          options['enforce'] = true;
        }

        $this.charCount(options);

        // Observe changes in dataset.
        observeDatasetChanges(this, (element) => {
          if (element.dataset.ckeditor5Id) {
            integrateWithCKEditor5(element, options);
          }
        });

        // Use setInterval to periodically check for CKEditor 5 instance in Drupal.CKEditor5Instances.
        const checkInterval = setInterval(() => {
          integrateWithCKEditor5(this, options);

          // If CKEditor 5 instance and data-ckeditor5-id are found, clear the interval.
          if (Drupal.CKEditor5Instances.has(this.dataset.ckeditor5Id)) {
            clearInterval(checkInterval);
          }
        }, 100); // Check every 100 milliseconds.
      });

    },

Thanks, I will have a look at the approach.

This issue should be resolved by the removal of CKEditor 4 support where we introduce the missing dependency for CKEditor5 library.

Please re-check this if it can be reproduced on 3.x-dev!

Thanks everyone for your work on this. We need someone to test this with a long, complicated form using MaxLength 3.x to determine if this is still an issue.

Issue still exists in 3.0
The problem is, in maxlength.js a setTimeout is called, but no delay argument is passed along.
The default value is 0, so this timeout is not triggered at all.

Attached is a quick fix which gives a 500ms seconds delay.

However, using setTimout is bad practice, a better solution would be to listen to actual events firing when ckeditors are loaded, and trigger after those.

joevagyok → changed the visibility of the branch 2.1.x to hidden.

joevagyok → changed the visibility of the branch 3.x to hidden.

joevagyok → changed the visibility of the branch 3366798-ckeditor-fix to hidden.

joevagyok → changed the visibility of the branch 3366798-failure-in-support to hidden.

the merge request is still using the hacky setTimeout, which might still cause this issue on slow responding forms.
A better way would be to use an event.

Related: ✨ Trigger event when Text Editor is attached Needs work

Indeed @StryKaizer, I am looking into a robust solution as we speak. Thank you for your support on this issue!

Fix works good. setTimeout can be replaced later when related issue will be merged.

Temp fix applied for the issue, I will still leave it active until we get the related issue fixed.