fix(richtext-lexical): inline Block drawers opened when document mounts (#10480)

Fixes #10439

Author: GermanJablo

packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx

@@ -70,18 +70,20 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
   const [editor] = useLexicalComposerContext()
   const { i18n, t } = useTranslation<object, string>()
   const {
+    createdInlineBlock,
     fieldProps: {
       featureClientSchemaMap,
       initialLexicalFormState,
       permissions,
       readOnly,
       schemaPath,
     },
+    setCreatedInlineBlock,
     uuid: uuidFromContext,
   } = useEditorConfigContext()
   const { getFormState } = useServerFunctions()
   const editDepth = useEditDepth()
-  const hasMounted = useRef(false)
+  const firstTimeDrawer = useRef(false)
 
   const [initialState, setInitialState] = React.useState<false | FormState | undefined>(
     initialLexicalFormState?.[formData.id]?.formState,
@@ -117,14 +119,17 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
 
   const clientBlock = blocksField.blocks[0]
 
-  // Open drawer on mount
+  // Open drawer on "mount"
   useEffect(() => {
-    // > 2 because they always have "id" and "blockName" fields
-    if (!hasMounted.current && clientBlock.fields.length > 2) {
-      toggleDrawer()
-      hasMounted.current = true
+    if (!firstTimeDrawer.current && createdInlineBlock?.getKey() === nodeKey) {
+      // > 2 because they always have "id" and "blockName" fields
+      if (clientBlock.fields.length > 2) {
+        toggleDrawer()
+      }
+      setCreatedInlineBlock?.(undefined)
+      firstTimeDrawer.current = true
     }
-  }, [clientBlock, toggleDrawer])
+  }, [clientBlock.fields.length, createdInlineBlock, nodeKey, setCreatedInlineBlock, toggleDrawer])
 
   const removeInlineBlock = useCallback(() => {
     editor.update(() => {

packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx

@@ -32,7 +32,7 @@ export const BlocksPlugin: PluginComponent = () => {
 
   const [targetNodeKey, setTargetNodeKey] = useState<null | string>(null)
 
-  const { uuid } = useEditorConfigContext()
+  const { setCreatedInlineBlock, uuid } = useEditorConfigContext()
   const editDepth = useEditDepth()
 
   const drawerSlug = formatDrawerSlug({
@@ -98,6 +98,7 @@ export const BlocksPlugin: PluginComponent = () => {
           }
 
           const inlineBlockNode = $createInlineBlockNode(fields as BlockFields)
+          setCreatedInlineBlock?.(inlineBlockNode)
           $insertNodes([inlineBlockNode])
           if ($isRootOrShadowRoot(inlineBlockNode.getParentOrThrow())) {
             $wrapNodeInElement(inlineBlockNode, $createParagraphNode).selectEnd()
@@ -108,7 +109,7 @@ export const BlocksPlugin: PluginComponent = () => {
         COMMAND_PRIORITY_EDITOR,
       ),
     )
-  }, [editor, targetNodeKey, toggleDrawer])
+  }, [editor, setCreatedInlineBlock, targetNodeKey, toggleDrawer])
 
   return null
 }

packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx

@@ -7,6 +7,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import * as React from 'react'
 import { createContext, useContext, useMemo, useRef, useState } from 'react'
 
+import type { InlineBlockNode } from '../../../features/blocks/client/nodes/InlineBlocksNode.js'
 import type { LexicalRichTextFieldProps } from '../../../types.js'
 import type { SanitizedClientEditorConfig } from '../types.js'
 
@@ -19,16 +20,18 @@ export interface EditorConfigContextType {
   // Editor focus handling
   blurEditor: (editorContext: EditorConfigContextType) => void
   childrenEditors: React.RefObject<Map<string, EditorConfigContextType>>
+  createdInlineBlock?: InlineBlockNode
   editor: LexicalEditor
   editorConfig: SanitizedClientEditorConfig
-  editorContainerRef: React.RefObject<HTMLDivElement>
 
+  editorContainerRef: React.RefObject<HTMLDivElement>
   fieldProps: MarkRequired<LexicalRichTextFieldProps, 'path' | 'schemaPath'>
   focusedEditor: EditorConfigContextType | null
   // Editor focus handling
   focusEditor: (editorContext: EditorConfigContextType) => void
   parentEditor: EditorConfigContextType
   registerChild: (uuid: string, editorContext: EditorConfigContextType) => void
+  setCreatedInlineBlock?: React.Dispatch<React.SetStateAction<InlineBlockNode | undefined>>
   unregisterChild?: (uuid: string) => void
   uuid: string
 }
@@ -61,6 +64,7 @@ export const EditorConfigProvider = ({
   const childrenEditors = useRef<Map<string, EditorConfigContextType>>(new Map())
   const [focusedEditor, setFocusedEditor] = useState<EditorConfigContextType | null>(null)
   const focusHistory = useRef<Set<string>>(new Set())
+  const [createdInlineBlock, setCreatedInlineBlock] = useState<InlineBlockNode>()
 
   const editorContext = useMemo(
     () =>
@@ -70,6 +74,7 @@ export const EditorConfigProvider = ({
           focusHistory.current.clear() // Reset focus history when focus is lost
         },
         childrenEditors,
+        createdInlineBlock,
         editor,
         editorConfig,
         editorContainerRef,
@@ -105,6 +110,7 @@ export const EditorConfigProvider = ({
             childrenEditors.current = newMap
           }
         },
+        setCreatedInlineBlock,
         unregisterChild: (childUUID) => {
           if (childrenEditors.current.has(childUUID)) {
             const newMap = new Map(childrenEditors.current)
@@ -116,6 +122,8 @@ export const EditorConfigProvider = ({
         uuid,
       }) as EditorConfigContextType,
     [
+      createdInlineBlock,
+      setCreatedInlineBlock,
       editor,
       childrenEditors,
       editorConfig,