From 5df770cc795644d5f5d7644b35ce412eff3163a7 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Thu, 21 Nov 2024 17:24:50 -0700 Subject: [PATCH 1/3] add failing e2e test --- .../collections/Lexical/e2e/main/e2e.spec.ts | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts index a5a96a29c32..181c898d7b9 100644 --- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts @@ -1068,6 +1068,70 @@ describe('lexicalMain', () => { await expect(page.locator('#blocks-row-1 .section-title__input')).toHaveValue('1') // block name }) + test('ensure blocks can be created from plus button', async () => { + await navigateToLexicalFields() + const richTextField = page.locator('.rich-text-lexical').first() + await richTextField.scrollIntoViewIfNeeded() + await expect(richTextField).toBeVisible() + // Wait until there at least 10 blocks visible in that richtext field - thus wait for it to be fully loaded + await expect(page.locator('.rich-text-lexical').nth(2).locator('.lexical-block')).toHaveCount( + 10, + ) + await expect(page.locator('.shimmer-effect')).toHaveCount(0) + + // click contenteditable + await richTextField.locator('.ContentEditable__root').first().click() + + const lastParagraph = richTextField.locator('p').first() + await lastParagraph.scrollIntoViewIfNeeded() + await expect(lastParagraph).toBeVisible() + + /** + * Create new upload node + */ + // type / to open the slash menu + await lastParagraph.click() + // hover over the last paragraph to make the plus button visible + await lastParagraph.hover() + await wait(600) + //await richTextField.locator('.add-block-menu').first().click() + const plusButton = richTextField.locator('.add-block-menu').first() + + // hover over plusButton + await plusButton.hover() + await wait(100) + // click the plus button + await plusButton.click() + + await expect(richTextField.locator('.slash-menu-popup')).toBeVisible() + // click button with text "Text" + await richTextField.locator('.slash-menu-popup button').getByText('My Block').click() + + await expect(richTextField.locator('.lexical-block')).toHaveCount(1) + await richTextField.locator('#field-someTextRequired').first().fill('test') + + await saveDocAndAssert(page) + + await expect(async () => { + const lexicalDoc: LexicalField = ( + await payload.find({ + collection: lexicalFieldsSlug, + depth: 0, + overrideAccess: true, + where: { + title: { + equals: lexicalDocData.title, + }, + }, + }) + ).docs[0] as never + + const lexicalField: SerializedEditorState = lexicalDoc.lexicalWithBlocks + }).toPass({ + timeout: POLL_TOPASS_TIMEOUT, + }) + }) + describe('localization', () => { test.skip('ensure simple localized lexical field works', async () => { await navigateToLexicalFields(true, true) From bcbe0791e0d422f898ff3cc8aa3d3fd986bc99f0 Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Thu, 21 Nov 2024 17:30:01 -0700 Subject: [PATCH 2/3] fix: move item selection call out of onUpdate(), as onUpdate() is no call when no update was performed (e.g. when the + button is used, thus there is no text node to remove => no update operation) --- .../LexicalMenu.tsx | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx index 728fb4c51a6..2095c5aa3db 100644 --- a/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx +++ b/packages/richtext-lexical/src/lexical/plugins/SlashMenu/LexicalTypeaheadMenuPlugin/LexicalMenu.tsx @@ -254,26 +254,23 @@ export function LexicalMenu({ (selectedItem: SlashMenuItem) => { close() - editor.update( - () => { - const textNodeContainingQuery = - resolution.match != null && shouldSplitNodeWithQuery - ? $splitNodeContainingQuery(resolution.match) - : null - - if (textNodeContainingQuery) { - textNodeContainingQuery.remove() - } - }, - { - onUpdate() { - selectedItem.onSelect({ - editor, - queryString: resolution.match ? resolution.match.matchingString : '', - }) - }, - }, - ) + editor.update(() => { + const textNodeContainingQuery = + resolution.match != null && shouldSplitNodeWithQuery + ? $splitNodeContainingQuery(resolution.match) + : null + + if (textNodeContainingQuery) { + textNodeContainingQuery.remove() + } + }) + + setTimeout(() => { + selectedItem.onSelect({ + editor, + queryString: resolution.match ? resolution.match.matchingString : '', + }) + }, 0) }, [editor, shouldSplitNodeWithQuery, resolution.match, close], ) From 97f01c255f7f2b7c89becd3e798075d2738955ab Mon Sep 17 00:00:00 2001 From: Alessio Gravili Date: Thu, 21 Nov 2024 17:34:48 -0700 Subject: [PATCH 3/3] add missing assertion --- test/fields/collections/Lexical/e2e/main/e2e.spec.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts index 181c898d7b9..7d98c382b51 100644 --- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts @@ -1126,7 +1126,10 @@ describe('lexicalMain', () => { }) ).docs[0] as never - const lexicalField: SerializedEditorState = lexicalDoc.lexicalWithBlocks + const lexicalField: SerializedEditorState = lexicalDoc.lexicalRootEditor + + // @ts-expect-error no need to type this + await expect(lexicalField?.root?.children[1].fields.someTextRequired).toEqual('test') }).toPass({ timeout: POLL_TOPASS_TIMEOUT, })