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.js b/core/modules/ckeditor5/js/ckeditor5.js
index 0dfd4f1285..2de458a065 100644
--- a/core/modules/ckeditor5/js/ckeditor5.js
+++ b/core/modules/ckeditor5/js/ckeditor5.js
@@ -370,9 +370,29 @@
ClassicEditor.create(element, editorConfig)
.then((editor) => {
+ /**
+ * Injects a temporary
into the CKeditor and returns its height.
+ *
+ * @returns {number} - the height of a div in pixels.
+ */
+ 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;
+ };
+
// Save a reference to the initialized instance.
Drupal.CKEditor5Instances.set(id, editor);
+ // 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');
+
// CKEditor 4 had a feature to remove the required attribute
// see: https://www.drupal.org/project/drupal/issues/1954968
if (element.hasAttribute('required')) {