🐛 Fixed additional white space appearing at bottom of editor (#20757)

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.
This commit is contained in:
Ronald Langeveld 2024-08-15 16:37:04 +07:00 committed by GitHub
parent 0eb569ad89
commit 37fd9eaad5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 1 deletions

View File

@ -680,7 +680,7 @@ export default class KoenigLexicalEditor extends Component {
const KGEditorComponent = ({isInitInstance}) => { const KGEditorComponent = ({isInitInstance}) => {
return ( return (
<div style={isInitInstance ? {visibility: 'hidden', position: 'absolute'} : {}}> <div data-secondary-instance={isInitInstance ? true : false} style={isInitInstance ? {width: 0, height: 0, overflow: 'hidden'} : {}}>
<KoenigComposer <KoenigComposer
editorResource={this.editorResource} editorResource={this.editorResource}
cardConfig={cardConfig} cardConfig={cardConfig}

View File

@ -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('Update post', () => {
test.describe.configure({retries: 1}); test.describe.configure({retries: 1});