fix(richtext-lexical): richtext fields in drawers aren't editable, inline toolbar artifacts are shown for readOnly editors (#8774)

Fixes this:


https://github.com/user-attachments/assets/cf78082d-9054-4324-90cd-c81219a4f26d

Author: AlessioGr

packages/richtext-lexical/src/features/toolbars/inline/client/Toolbar/index.tsx

@@ -295,22 +295,18 @@ function InlineToolbar({
   return (
     <div className="inline-toolbar-popup" ref={floatingToolbarRef}>
       <div className="caret" ref={caretRef} />
-      {editor.isEditable() && (
-        <React.Fragment>
-          {editorConfig?.features &&
-            editorConfig.features?.toolbarInline?.groups.map((group, i) => {
-              return (
-                <ToolbarGroupComponent
-                  anchorElem={anchorElem}
-                  editor={editor}
-                  group={group}
-                  index={i}
-                  key={group.key}
-                />
-              )
-            })}
-        </React.Fragment>
-      )}
+      {editorConfig?.features &&
+        editorConfig.features?.toolbarInline?.groups.map((group, i) => {
+          return (
+            <ToolbarGroupComponent
+              anchorElem={anchorElem}
+              editor={editor}
+              group={group}
+              index={i}
+              key={group.key}
+            />
+          )
+        })}
     </div>
   )
 }
@@ -392,7 +388,7 @@ function useInlineToolbar(
     )
   }, [editor, updatePopup])
 
-  if (!isText) {
+  if (!isText || !editor.isEditable()) {
     return null
   }
 

packages/richtext-lexical/src/field/Field.tsx

@@ -5,6 +5,7 @@ import {
   FieldDescription,
   FieldError,
   FieldLabel,
+  useEditDepth,
   useField,
   useFieldProps,
   withCondition,
@@ -47,6 +48,8 @@ const RichTextComponent: React.FC<
   const Label = components?.Label
   const readOnlyFromProps = readOnlyFromTopLevelProps || readOnlyFromAdmin
 
+  const editDepth = useEditDepth()
+
   const memoizedValidate = useCallback(
     (value, validationOptions) => {
       if (typeof validate === 'function') {
@@ -82,10 +85,12 @@ const RichTextComponent: React.FC<
     .filter(Boolean)
     .join(' ')
 
+  const pathWithEditDepth = `${path}.${editDepth}`
+
   return (
     <div
       className={classes}
-      key={path}
+      key={pathWithEditDepth}
       style={{
         ...style,
         width,
@@ -102,6 +107,7 @@ const RichTextComponent: React.FC<
       <div className={`${baseClass}__wrap`}>
         <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
           <LexicalProvider
+            composerKey={pathWithEditDepth}
             editorConfig={editorConfig}
             field={field}
             key={JSON.stringify({ initialValue, path })} // makes sure lexical is completely re-rendered when initialValue changes, bypassing the lexical-internal value memoization. That way, external changes to the form will update the editor. More infos in PR description (https://github.com/payloadcms/payload/pull/5010)
@@ -117,7 +123,6 @@ const RichTextComponent: React.FC<
 
               setValue(serializedEditorState)
             }}
-            path={path}
             readOnly={disabled}
             value={value}
           />

packages/richtext-lexical/src/lexical/LexicalProvider.tsx

@@ -17,10 +17,10 @@ import { LexicalEditor as LexicalEditorComponent } from './LexicalEditor.js'
 import { getEnabledNodes } from './nodes/index.js'
 
 export type LexicalProviderProps = {
+  composerKey: string
   editorConfig: SanitizedClientEditorConfig
   field: LexicalRichTextFieldProps['field']
   onChange: (editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void
-  path: string
   readOnly: boolean
   value: SerializedEditorState
 }
@@ -41,7 +41,7 @@ const NestProviders = ({ children, providers }) => {
 }
 
 export const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {
-  const { editorConfig, field, onChange, path, readOnly, value } = props
+  const { composerKey, editorConfig, field, onChange, readOnly, value } = props
 
   const parentContext = useEditorConfigContext()
 
@@ -82,7 +82,7 @@ export const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {
       editable: readOnly !== true,
       editorState: processedValue != null ? JSON.stringify(processedValue) : undefined,
       namespace: editorConfig.lexical.namespace,
-      nodes: [...getEnabledNodes({ editorConfig })],
+      nodes: getEnabledNodes({ editorConfig }),
       onError: (error: Error) => {
         throw error
       },
@@ -94,8 +94,10 @@ export const LexicalProvider: React.FC<LexicalProviderProps> = (props) => {
     return <p>Loading...</p>
   }
 
+  // We need to add initialConfig.editable to the key to force a re-render when the readOnly prop changes.
+  // Without it, there were cases where lexical editors inside drawers turn readOnly initially - a few miliseconds later they turn editable, but the editor does not re-render and stays readOnly.
   return (
-    <LexicalComposer initialConfig={initialConfig} key={path}>
+    <LexicalComposer initialConfig={initialConfig} key={composerKey + initialConfig.editable}>
       <EditorConfigProvider
         editorConfig={editorConfig}
         editorContainerRef={editorContainerRef}

test/buildConfigWithDefaults.ts

@@ -9,6 +9,7 @@ import {
   HeadingFeature,
   IndentFeature,
   InlineCodeFeature,
+  InlineToolbarFeature,
   ItalicFeature,
   lexicalEditor,
   LinkFeature,
@@ -84,6 +85,7 @@ export async function buildConfigWithDefaults(
         SubscriptFeature(),
         SuperscriptFeature(),
         InlineCodeFeature(),
+        InlineToolbarFeature(),
         TreeViewFeature(),
         HeadingFeature(),
         IndentFeature(),

test/fields/collections/Lexical/e2e/blocks/e2e.spec.ts

@@ -101,7 +101,7 @@ describe('lexicalBlocks', () => {
   describe('nested lexical editor in block', () => {
     test('should type and save typed text', async () => {
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -157,7 +157,7 @@ describe('lexicalBlocks', () => {
     test('should be able to bold text using floating select toolbar', async () => {
       // Reproduces https://github.com/payloadcms/payload/issues/4025
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -239,7 +239,7 @@ describe('lexicalBlocks', () => {
     test('should be able to select text, make it an external link and receive the updated link value', async () => {
       // Reproduces https://github.com/payloadcms/payload/issues/4025
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -323,7 +323,7 @@ describe('lexicalBlocks', () => {
     test('ensure slash menu is not hidden behind other blocks', async () => {
       // This test makes sure there are no z-index issues here
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -396,7 +396,7 @@ describe('lexicalBlocks', () => {
     })
     test('should allow adding new blocks to a sub-blocks field, part of a parent lexical blocks field', async () => {
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -471,7 +471,7 @@ describe('lexicalBlocks', () => {
     // Big test which tests a bunch of things: Creation of blocks via slash commands, creation of deeply nested sub-lexical-block fields via slash commands, properly populated deeply nested fields within those
     test('ensure creation of a lexical, lexical-field-block, which contains another lexical, lexical-and-upload-field-block, works and that the sub-upload field is properly populated', async () => {
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -690,7 +690,7 @@ describe('lexicalBlocks', () => {
       // This test ensures that https://github.com/payloadcms/payload/issues/3911 does not happen again
 
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -762,7 +762,7 @@ describe('lexicalBlocks', () => {
       // 3. In the issue, after writing one character, the cursor focuses back into the parent editor
 
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -802,7 +802,7 @@ describe('lexicalBlocks', () => {
     })
 
     const shouldRespectRowRemovalTest = async () => {
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -859,7 +859,7 @@ describe('lexicalBlocks', () => {
       await navigateToLexicalFields()
 
       // Wait for lexical to be loaded up fully
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -882,7 +882,7 @@ describe('lexicalBlocks', () => {
     test('ensure pre-seeded uploads node is visible', async () => {
       // Due to issues with the relationships condition, we had issues with that not being visible. Checking for visibility ensures there is no breakage there again
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
 
@@ -897,7 +897,7 @@ describe('lexicalBlocks', () => {
 
     test('should respect required error state in deeply nested text field', async () => {
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
 
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()
@@ -946,7 +946,7 @@ describe('lexicalBlocks', () => {
     // Reproduces https://github.com/payloadcms/payload/issues/6631
     test('ensure tabs field within lexical block correctly loads and saves data', async () => {
       await navigateToLexicalFields()
-      const richTextField = page.locator('.rich-text-lexical').nth(1) // second
+      const richTextField = page.locator('.rich-text-lexical').nth(2) // second
 
       await richTextField.scrollIntoViewIfNeeded()
       await expect(richTextField).toBeVisible()