diff --git a/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx b/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx index 78a31d12d8..a220694efb 100644 --- a/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx +++ b/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx @@ -5,7 +5,13 @@ import type { BlockFieldClient } from 'payload' import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js' import { $insertNodeToNearestRoot, $wrapNodeInElement, mergeRegister } from '@lexical/utils' import { getTranslation } from '@payloadcms/translations' -import { useFieldProps, useModal, useTranslation } from '@payloadcms/ui' +import { + formatDrawerSlug, + useEditDepth, + useFieldProps, + useModal, + useTranslation, +} from '@payloadcms/ui' import { $createParagraphNode, $getNodeByKey, @@ -37,8 +43,6 @@ import { export type InsertBlockPayload = Exclude -const drawerSlug = 'lexical-inlineBlocks-create' - export const BlocksPlugin: PluginComponent = () => { const [editor] = useLexicalComposerContext() const { closeModal, toggleModal } = useModal() @@ -47,22 +51,18 @@ export const BlocksPlugin: PluginComponent = () => { const [targetNodeKey, setTargetNodeKey] = useState(null) const { i18n, t } = useTranslation() const { schemaPath } = useFieldProps() + const { uuid } = useEditorConfigContext() + const editDepth = useEditDepth() + + const drawerSlug = formatDrawerSlug({ + slug: `lexical-inlineBlocks-create-` + uuid, + depth: editDepth, + }) const { field: { richTextComponentMap }, } = useEditorConfigContext() - const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.lexical_inline_blocks.${blockFields?.blockType}` - - const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_inline_blocks` - const blocksField: BlockFieldClient = richTextComponentMap.has(componentMapRenderedBlockPath) - ? richTextComponentMap.get(componentMapRenderedBlockPath)[0] - : null - - const clientBlock = blocksField - ? blocksField.blocks.find((block) => block.slug === blockFields?.blockType) - : null - useEffect(() => { if (!editor.hasNodes([BlockNode])) { throw new Error('BlocksPlugin: BlocksNode not registered on editor') @@ -158,7 +158,22 @@ export const BlocksPlugin: PluginComponent = () => { COMMAND_PRIORITY_EDITOR, ), ) - }, [editor, targetNodeKey, toggleModal]) + }, [editor, targetNodeKey, toggleModal, drawerSlug]) + + if (!blockFields) { + return null + } + + const schemaFieldsPath = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks.lexical_inline_blocks.${blockFields?.blockType}` + + const componentMapRenderedBlockPath = `lexical_internal_feature.blocks.fields.lexical_inline_blocks` + const blocksField: BlockFieldClient = richTextComponentMap.has(componentMapRenderedBlockPath) + ? richTextComponentMap.get(componentMapRenderedBlockPath)[0] + : null + + const clientBlock = blocksField + ? blocksField.blocks.find((block) => block.slug === blockFields?.blockType) + : null if (!blocksField) { return null diff --git a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx index fbd7c00743..d41eb1406f 100644 --- a/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx +++ b/packages/richtext-lexical/src/features/experimental_table/client/plugins/TablePlugin/index.tsx @@ -14,13 +14,14 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext import { TablePlugin as LexicalReactTablePlugin } from '@lexical/react/LexicalTablePlugin' import { INSERT_TABLE_COMMAND, TableNode } from '@lexical/table' import { mergeRegister } from '@lexical/utils' -import { useModal } from '@payloadcms/ui' +import { formatDrawerSlug, useEditDepth, useModal } from '@payloadcms/ui' import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from 'lexical' import { createContext, useContext, useEffect, useMemo, useState } from 'react' import * as React from 'react' import type { PluginComponent } from '../../../../typesClient.js' +import { useEditorConfigContext } from '../../../../../lexical/config/client/EditorConfigProvider.js' import { FieldsDrawer } from '../../../../../utilities/fieldsDrawer/Drawer.js' import './index.scss' @@ -52,7 +53,6 @@ export const CellContext = createContext({ // Empty }, }) -const drawerSlug = 'lexical-table-create' export function TableContext({ children }: { children: JSX.Element }) { const [contextValue, setContextValue] = useState<{ @@ -84,6 +84,13 @@ export const TablePlugin: PluginComponent = () => { const [editor] = useLexicalComposerContext() const cellContext = useContext(CellContext) const { closeModal, toggleModal } = useModal() + const editDepth = useEditDepth() + const { uuid } = useEditorConfigContext() + + const drawerSlug = formatDrawerSlug({ + slug: 'lexical-table-create-' + uuid, + depth: editDepth, + }) useEffect(() => { if (!editor.hasNodes([TableNode])) { diff --git a/packages/richtext-lexical/src/features/upload/client/component/index.tsx b/packages/richtext-lexical/src/features/upload/client/component/index.tsx index d64611b92c..0593a2037c 100644 --- a/packages/richtext-lexical/src/features/upload/client/component/index.tsx +++ b/packages/richtext-lexical/src/features/upload/client/component/index.tsx @@ -9,9 +9,10 @@ import { Button, DrawerToggler, File, + formatDrawerSlug, useConfig, useDocumentDrawer, - useDrawerSlug, + useEditDepth, useModal, usePayloadAPI, useTranslation, @@ -25,7 +26,7 @@ import { KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical' -import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react' +import React, { useCallback, useEffect, useId, useReducer, useRef, useState } from 'react' import type { ClientComponentProps } from '../../../typesClient.js' import type { UploadData } from '../../server/nodes/UploadNode.js' @@ -65,7 +66,8 @@ const Component: React.FC = (props) => { } = useConfig() const uploadRef = useRef(null) const { closeModal } = useModal() - + const { uuid } = useEditorConfigContext() + const editDepth = useEditDepth() const [editor] = useLexicalComposerContext() const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey) @@ -77,7 +79,12 @@ const Component: React.FC = (props) => { collections.find((coll) => coll.slug === relationTo), ) - const drawerSlug = useDrawerSlug('upload-drawer') + const componentID = useId() + + const drawerSlug = formatDrawerSlug({ + slug: `lexical-upload-drawer-` + uuid + componentID, // There can be multiple upload components, each with their own drawer, in one single editor => separate them by componentID + depth: editDepth, + }) const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer }] = useDocumentDrawer({ id: value, diff --git a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts index 63018010b2..16a56b959d 100644 --- a/test/fields/collections/Lexical/e2e/main/e2e.spec.ts +++ b/test/fields/collections/Lexical/e2e/main/e2e.spec.ts @@ -482,7 +482,9 @@ describe('lexicalMain', () => { // Click on button with class lexical-upload__upload-drawer-toggler await newUploadNode.locator('.lexical-upload__upload-drawer-toggler').first().click() - const uploadExtraFieldsDrawer = page.locator('dialog[id^=drawer_1_upload-drawer-]').first() + const uploadExtraFieldsDrawer = page + .locator('dialog[id^=drawer_1_lexical-upload-drawer-]') + .first() await expect(uploadExtraFieldsDrawer).toBeVisible() await wait(500) @@ -508,7 +510,7 @@ describe('lexicalMain', () => { await expect(reloadedUploadNode).toBeVisible() await reloadedUploadNode.locator('.lexical-upload__upload-drawer-toggler').first().click() const reloadedUploadExtraFieldsDrawer = page - .locator('dialog[id^=drawer_1_upload-drawer-]') + .locator('dialog[id^=drawer_1_lexical-upload-drawer-]') .first() await expect(reloadedUploadExtraFieldsDrawer).toBeVisible() await wait(500)