Problem/Motivation

In Drupal 10, CKEditor 4 will be replaced with CKEditor 5. It can be tested following the steps on https://www.drupal.org/docs/core-modules-and-themes/core-modules/ckedito...

The CKEditorheight configuration has no effect on the height of text areas and their autogrow.

Steps to reproduce

  • Enable CKEditorHeight module
  • Enable CKEditor 5 module.
  • Configure CKEditorHeight by ticking "Disabled autgrow" and save on /admin/config/ckeditorheight/settings
  • Configure the Basic HTML by selecting "CKEditor 5" instead of "CKEditor".
  • Create a Page on /node/add/page: The Body field is only one row, and it auto-grows.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#5 ckeditor5.js_.txt901 bytesmark_fullmer
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ifrik created an issue. See original summary.

geek-merlin’s picture

Thx ifrik for pointing this out early. MRs appreciated!

mark_fullmer made their first commit to this issue’s fork.

mark_fullmer’s picture

Title: CKEditor 5 compatability » CKEditor 5 compatibility
mark_fullmer’s picture

StatusFileSize
new901 bytes

The issue in the CKEditor 5 queue regarding manipulating height is https://github.com/ckeditor/ckeditor5/issues/636 .

It doesn't appear that they're providing a API-based solution as of right now, like a configuration option. A workaround is referenced in https://github.com/ckeditor/ckeditor5/issues/636#issuecomment-405952805 , specifically https://stackoverflow.com/a/46559355 , specifying that the CKEditor editable area can be targeted via .ck-editor__editable_inline

If we port the ability to disable the auto_grow plugin to this module, the attached JS would effectively solve this issue. (With auto_grow enabled, the min-height will keep getting reset).

For those who are looking for a low-tech solution for this and don't need the dynamic line-height adjustments provided by the ckeditorheight module, it should be sufficient to add a compendium of CSS that reacts to the the various row heights populated by Drupal textareas. I've tested the below approach and it works well:

textarea[data-ckeditor5-id][rows="4"]+.ck-editor .ck-editor__editable_inline {
  min-height: calc(1.5em * 4);
}
textarea[data-ckeditor5-id][rows="5"]+.ck-editor .ck-editor__editable_inline {
  min-height: calc(1.5em * 5);
}
textarea[data-ckeditor5-id][rows="6"]+.ck-editor .ck-editor__editable_inline {
  min-height: calc(1.5em * 6);
}
geek-merlin’s picture

Thx for sharing your research! Disabling the autogrow plugin should not be too hard, and if someone (tm) puts the peaces together, we are ready to release a 2.x version for ckeditor5. THat said, i won't do it soon-ish, but someone picks this up, a MR is appreciated!

geek-merlin’s picture

Title: CKEditor 5 compatibility » Create a D10 / CKEditor 5 version
geek-merlin’s picture

Title: Create a D10 / CKEditor 5 version » Create a D10 / CKEditor 5 version of ckeditorheight, OR go CORE
Status: Active » Postponed (maintainer needs more info)
Related issues: -#3273755: CKEditor 5 should not grow to infinite height +#3241295: CKEditor 5 isn't respecting field widgets row settings
geek-merlin’s picture

Title: Create a D10 / CKEditor 5 version of ckeditorheight, OR go CORE » Create a D10 / CKEditor 5 version of ckeditorheight, OR better go CORE
Status: Postponed (maintainer needs more info) » Postponed
geek-merlin’s picture

Status: Postponed » Closed (works as designed)

We're core.