Module conflicts with MaxLength

Created on 16 November 2023, 12 months ago
Updated 3 January 2024, 11 months ago

Problem/Motivation

It seems that CKEditor5 Fullscreen doesn't work when MaxLength ( https://www.drupal.org/project/maxlength ) is enabled in the same edit form

Steps to reproduce

  1. Install and enable https://www.drupal.org/project/maxlength
  2. Install and enable CKEditor 5 Fullscreen
  3. Add fullscreen button to your text format
  4. Enable maxlength for the text field
  5. Create new node (fullscreen works)
  6. Save node
  7. Edit node again and try fullscreen (id doesn't work, but it blocks edit of the article

Proposed resolution

It looks in the DOM like div dedicated for counter:
<div class="counter">Used chars: 23</div>
that is immediately preceding the CKEditor DIV, after the fullscreen button click is being changed to:
<div id="fullscreeneditor" class="counter">Used chars: 23</div>

It looks like "fullscreeneditor" id is added to the wrong div

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

🇵🇱Poland besek

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

Comments & Activities

  • Issue created by @besek
  • 🇨🇦Canada occupant Canada

    Thanks for the report - I'm trying to replicate the issue and am seeing things inconsistent with the issue you've described. It seems like the <div class="counter">Used chars: 23</div> node is in a different place in your document. Immediately following the textarea, I have a div with the ck ck-reset ck-editor ck-rounded-corners classes. That's the one that should be targeted and changed.

    I'm using:

    • Core v10.1.6
    • Gin admin theme v8.x-3.0-rc7
    • maxlength v2.1.2
    • CKEditor5 Fullscreen v1.0.0-beta5

    I wonder if the id is inadvertently getting clobbered somehow? Which points to an issue - the module should use data attributes instead of ids (and the Dom traversal may have to be addressed). I think the move to data-attributes is a change that should be made regardless.

    Happy to look into this further if you can provide more details

  • 🇵🇱Poland besek

    Thanks for the answer. I was testing on:

    • Drupal 9.5.11
    • Gin 8.x-1.0-rc4
    • maxlength v2.1.2
    • CKEditor5 Fullscreen v1.0.0-beta5

    I've noticed some time ago, weird behaviour of maxlength. The counter is, as you described, right below the textarea when I'm creating new node. And fullscreen button works fine. However, when I save node and edit it again, the counter from maxlength is above the textarea and at this moment, fullscreen button is not working anymore.

    I'm not sure why maxlength div is displayed in two different places, but I hope this description would help you to verify if this conflict should be resolved in CKEditor5 Fullscreen module?

    Thanks!

  • 🇨🇦Canada occupant Canada

    @besek, I've made a new release of the module that uses data attributes instead of ids (so it should be less fragile). Are you able to try this and see if that changes things? I can test as well, but I'd like to make sure I'm not missing anything present in your use case.

  • Assigned to occupant
  • 🇵🇱Poland besek

    @occupant, thanks, I've tested it and it really looks like it if working well now. Thank you!

  • Status changed to Fixed 11 months ago
Production build 0.71.5 2024