diff --git a/core/modules/ckeditor5/css/editor.css b/core/modules/ckeditor5/css/editor.css index 5c28250f97..a93a53e0f9 100644 --- a/core/modules/ckeditor5/css/editor.css +++ b/core/modules/ckeditor5/css/editor.css @@ -8,3 +8,8 @@ opacity: 1 !important; fill-opacity: 1 !important; } + +.ck-editor__editable { + min-height: var(--ck-min-height); + max-height: calc(100vh - var(--drupal-displace-offset-top, 0px) - 20px); +} diff --git a/core/modules/ckeditor5/js/ckeditor5.es6.js b/core/modules/ckeditor5/js/ckeditor5.es6.js index 61e7e12854..3cced0ac9d 100644 --- a/core/modules/ckeditor5/js/ckeditor5.es6.js +++ b/core/modules/ckeditor5/js/ckeditor5.es6.js @@ -420,11 +420,25 @@ ClassicEditor.create(element, editorConfig) .then((editor) => { - // Save a reference to the initialized instance. + function calculateHeight() { + const element = document.createElement('div'); + element.setAttribute('style', 'visibility: hidden;'); + element.innerHTML = ' '; + editor.ui.view.editable.element.append(element); + const height = element.clientHeight; + element.remove(); + return height; + } Drupal.CKEditor5Instances.set(id, editor); - - // CKEditor 4 had a feature to remove the required attribute - // see: https://www.drupal.org/project/drupal/issues/1954968 + // Set the minimum height of the editable area to correspond with the + // user inputted value of number of rows. + const rows = editor.sourceElement.getAttribute('rows'); + editor.ui.view.editable.element + .closest('.ck-editor') + .style.setProperty( + '--ck-min-height', + `${rows * calculateHeight()} px`, + ); if (element.hasAttribute('required')) { required.add(id); element.removeAttribute('required'); diff --git a/core/modules/ckeditor5/js/ckeditor5.js b/core/modules/ckeditor5/js/ckeditor5.js index 06f4970fd6..78fd8c8f8e 100644 --- a/core/modules/ckeditor5/js/ckeditor5.js +++ b/core/modules/ckeditor5/js/ckeditor5.js @@ -172,7 +172,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len var id = setElementId(element); var ClassicEditor = editorClassic.ClassicEditor; ClassicEditor.create(element, editorConfig).then(function (editor) { + function calculateHeight() { + var element = document.createElement('div'); + element.setAttribute('style', 'visibility: hidden;'); + element.innerHTML = ' '; + editor.ui.view.editable.element.append(element); + var height = element.clientHeight; + element.remove(); + return height; + } Drupal.CKEditor5Instances.set(id, editor); + var rows = editor.sourceElement.getAttribute('rows'); + editor.ui.view.editable.element.closest('.ck-editor').style.setProperty('--ck-min-height', "".concat(rows * calculateHeight(), " px")); if (element.hasAttribute('required')) { required.add(id); element.removeAttribute('required');