From 37fd9eaad5d713df314e6fad5fd988e110fe4241 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Thu, 15 Aug 2024 16:37:04 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20additional=20white=20spa?=
 =?UTF-8?q?ce=20appearing=20at=20bottom=20of=20editor=20(#20757)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref ENG-1490

- Regression from the secondary lexical instance.
- Replaced the visibility and positioning styles with width, height, and
overflow to prevent layout space issues.
- Ensured the element takes up no space and is not visible, while
allowing proper initialisation.
---
 .../app/components/koenig-lexical-editor.js   |  2 +-
 .../test/e2e-browser/admin/publishing.spec.js | 22 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/ghost/admin/app/components/koenig-lexical-editor.js b/ghost/admin/app/components/koenig-lexical-editor.js
index 704aac7e6d..f2a471a463 100644
--- a/ghost/admin/app/components/koenig-lexical-editor.js
+++ b/ghost/admin/app/components/koenig-lexical-editor.js
@@ -680,7 +680,7 @@ export default class KoenigLexicalEditor extends Component {
 
         const KGEditorComponent = ({isInitInstance}) => {
             return (
-                <div style={isInitInstance ? {visibility: 'hidden', position: 'absolute'} : {}}>
+                <div data-secondary-instance={isInitInstance ? true : false} style={isInitInstance ? {width: 0, height: 0, overflow: 'hidden'} : {}}>
                     <KoenigComposer
                         editorResource={this.editorResource}
                         cardConfig={cardConfig}
diff --git a/ghost/core/test/e2e-browser/admin/publishing.spec.js b/ghost/core/test/e2e-browser/admin/publishing.spec.js
index fc32202c21..013f62ca17 100644
--- a/ghost/core/test/e2e-browser/admin/publishing.spec.js
+++ b/ghost/core/test/e2e-browser/admin/publishing.spec.js
@@ -284,6 +284,28 @@ test.describe('Publishing', () => {
         });
     });
 
+    test.describe('Lexical Rendering', () => {
+        test.describe.configure({retries: 1});
+
+        test('Renders Lexical editor', async ({sharedPage: adminPage}) => {
+            await adminPage.goto('/ghost');
+
+            await createPostDraft(adminPage, {title: 'Lexical editor test', body: 'This is my post body.'});
+
+            // Check if the lexical editor is present
+            expect(await adminPage.locator('[data-kg="editor"]').first()).toBeVisible();
+        });
+
+        test('Renders secondary hidden lexical editor', async ({sharedPage: adminPage}) => {
+            await adminPage.goto('/ghost');
+
+            await createPostDraft(adminPage, {title: 'Secondary lexical editor test', body: 'This is my post body.'});
+
+            // Check if the secondary lexical editor exists but is hidden.
+            expect(await adminPage.locator('[data-secondary-instance="true"]')).toBeHidden();
+        });
+    });
+
     test.describe('Update post', () => {
         test.describe.configure({retries: 1});