fix(richtext-lexical): prevent extra paragraph when inserting blocks or uploadNodes. Add preemptive selection normalization #12077
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -56,22 +56,15 @@ export const BlocksPlugin: PluginComponent = () => { | |
|
|
||
| if ($isRangeSelection(selection)) { | ||
| const blockNode = $createBlockNode(payload) | ||
|
|
||
| // we need to get the focus node before inserting the block node, as $insertNodeToNearestRoot can change the focus node | ||
| const { focus } = selection | ||
| const focusNode = focus.getNode() | ||
| // Insert blocks node BEFORE potentially removing focusNode, as $insertNodeToNearestRoot errors if the focusNode doesn't exist | ||
| $insertNodeToNearestRoot(blockNode) | ||
|
|
||
| // Delete the node it it's an empty paragraph | ||
| if ($isParagraphNode(focusNode) && !focusNode.__first) { | ||
| focusNode.remove() | ||
|
Comment on lines
-65
to
68
There was a problem hiding this comment. Since PR #10530 this is no longer necessary |
||
| } | ||
| } | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext' | ||
| import { $getSelection, $isRangeSelection, RootNode } from 'lexical' | ||
| import { useEffect } from 'react' | ||
|
|
||
| /** | ||
| * By default, Lexical throws an error if the selection ends in deleted nodes. | ||
| * This is very aggressive considering there are reasons why this can happen | ||
| * outside of Payload's control (custom features or conflicting features, for example). | ||
| * In the case of selections on nonexistent nodes, this plugin moves the selection to | ||
| * the end of the editor and displays a warning instead of an error. | ||
| */ | ||
| export function NormalizeSelectionPlugin() { | ||
| const [editor] = useLexicalComposerContext() | ||
|
|
||
| useEffect(() => { | ||
| return editor.registerNodeTransform(RootNode, (root) => { | ||
| const selection = $getSelection() | ||
| if ($isRangeSelection(selection)) { | ||
| const anchorNode = selection.anchor.getNode() | ||
| const focusNode = selection.focus.getNode() | ||
| if (!anchorNode.isAttached() || !focusNode.isAttached()) { | ||
| root.selectEnd() | ||
| // eslint-disable-next-line no-console | ||
| console.warn( | ||
| 'updateEditor: selection has been moved to the end of the editor because the previously selected nodes have been removed and ' + | ||
| "selection wasn't moved to another node. Ensure selection changes after removing/replacing a selected node.", | ||
| ) | ||
| } | ||
| } | ||
| return false | ||
| }) | ||
| }, [editor]) | ||
|
|
||
| return null | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { expect, test } from '@playwright/test' | ||
| import { AdminUrlUtil } from 'helpers/adminUrlUtil.js' | ||
| import { reInitializeDB } from 'helpers/reInitializeDB.js' | ||
| import { lexicalFullyFeaturedSlug } from 'lexical/slugs.js' | ||
| import path from 'path' | ||
| import { fileURLToPath } from 'url' | ||
|
|
||
| import { ensureCompilationIsDone } from '../../../helpers.js' | ||
| import { initPayloadE2ENoConfig } from '../../../helpers/initPayloadE2ENoConfig.js' | ||
| import { TEST_TIMEOUT_LONG } from '../../../playwright.config.js' | ||
| import { LexicalHelpers } from './utils.js' | ||
| const filename = fileURLToPath(import.meta.url) | ||
| const currentFolder = path.dirname(filename) | ||
| const dirname = path.resolve(currentFolder, '../../') | ||
|
|
||
| const { beforeAll, beforeEach, describe } = test | ||
|
|
||
| // Unlike the other suites, this one runs in parallel, as they run on the `lexical-fully-featured/create` URL and are "pure" tests | ||
| test.describe.configure({ mode: 'parallel' }) | ||
|
|
||
| const { serverURL } = await initPayloadE2ENoConfig({ | ||
| dirname, | ||
| }) | ||
|
|
||
| describe('Lexical Fully Featured', () => { | ||
| beforeAll(async ({ browser }, testInfo) => { | ||
| testInfo.setTimeout(TEST_TIMEOUT_LONG) | ||
| process.env.SEED_IN_CONFIG_ONINIT = 'false' // Makes it so the payload config onInit seed is not run. Otherwise, the seed would be run unnecessarily twice for the initial test run - once for beforeEach and once for onInit | ||
| const page = await browser.newPage() | ||
| await ensureCompilationIsDone({ page, serverURL }) | ||
| await page.close() | ||
| }) | ||
| beforeEach(async ({ page }) => { | ||
| await reInitializeDB({ | ||
| serverURL, | ||
| snapshotKey: 'fieldsTest', | ||
| uploadsDir: [ | ||
| path.resolve(dirname, './collections/Upload/uploads'), | ||
| path.resolve(dirname, './collections/Upload2/uploads2'), | ||
| ], | ||
| }) | ||
| const url = new AdminUrlUtil(serverURL, lexicalFullyFeaturedSlug) | ||
| const lexical = new LexicalHelpers(page) | ||
| await page.goto(url.create) | ||
| await lexical.editor.first().focus() | ||
| }) | ||
| test('prevent extra paragraph when inserting decorator blocks like blocks or upload node', async ({ | ||
| page, | ||
| }) => { | ||
| const lexical = new LexicalHelpers(page) | ||
| await lexical.slashCommand('block') | ||
| await lexical.slashCommand('relationship') | ||
| await lexical.drawer.locator('.list-drawer__header').getByText('Create New').click() | ||
| await lexical.save('drawer') | ||
| await expect(lexical.decorator).toHaveCount(2) | ||
| await lexical.slashCommand('upload') | ||
| await lexical.drawer.locator('.list-drawer__header').getByText('Create New').click() | ||
| await lexical.drawer.getByText('Paste URL').click() | ||
| await lexical.drawer | ||
| .locator('.file-field__remote-file') | ||
| .fill('https://payloadcms.com/images/universal-truth.jpg') | ||
| await lexical.drawer.getByText('Add file').click() | ||
| await lexical.save('drawer') | ||
| await expect(lexical.decorator).toHaveCount(3) | ||
| const paragraph = lexical.editor.locator('> p') | ||
| await expect(paragraph).toHaveText('') | ||
| }) | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import type { CollectionConfig } from 'payload' | ||
|
|
||
| import { | ||
| BlocksFeature, | ||
| EXPERIMENTAL_TableFeature, | ||
| FixedToolbarFeature, | ||
| lexicalEditor, | ||
| TreeViewFeature, | ||
| } from '@payloadcms/richtext-lexical' | ||
|
|
||
| import { lexicalFullyFeaturedSlug } from '../../slugs.js' | ||
|
|
||
| export const LexicalFullyFeatured: CollectionConfig = { | ||
| slug: lexicalFullyFeaturedSlug, | ||
| labels: { | ||
| singular: 'Lexical Fully Featured', | ||
| plural: 'Lexical Fully Featured', | ||
| }, | ||
| fields: [ | ||
| { | ||
| name: 'richText', | ||
| type: 'richText', | ||
| editor: lexicalEditor({ | ||
| features: ({ defaultFeatures }) => [ | ||
| ...defaultFeatures, | ||
| TreeViewFeature(), | ||
| FixedToolbarFeature(), | ||
| EXPERIMENTAL_TableFeature(), | ||
| BlocksFeature({ | ||
| blocks: [ | ||
| { | ||
| slug: 'myBlock', | ||
| fields: [ | ||
| { | ||
| name: 'someText', | ||
| type: 'text', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| inlineBlocks: [ | ||
| { | ||
| slug: 'myInlineBlock', | ||
| fields: [ | ||
| { | ||
| name: 'someText', | ||
| type: 'text', | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }), | ||
| ], | ||
| }), | ||
| }, | ||
| ], | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the key point of the fix. We still insert before removing focusNode, but after getting focusNode, since
$insertNodeToNearestRootcan change the selection.