From 9ca21102bed1c7f221061decf621ec0f3409788e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Germ=C3=A1n=20Jablo=C3=B1ski?=
 <43938777+GermanJablo@users.noreply.github.com>
Date: Thu, 9 Jan 2025 17:33:50 -0300
Subject: [PATCH] add context

---
 .../blocks/client/componentInline/index.tsx   | 19 ++++++++++++-------
 .../features/blocks/client/plugin/index.tsx   |  5 +++--
 .../config/client/EditorConfigProvider.tsx    | 10 +++++++++-
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx
index 648bbe0e0a2..9b924aff4e4 100644
--- a/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx
+++ b/packages/richtext-lexical/src/features/blocks/client/componentInline/index.tsx
@@ -70,6 +70,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
   const [editor] = useLexicalComposerContext()
   const { i18n, t } = useTranslation<object, string>()
   const {
+    createdInlineBlock,
     fieldProps: {
       featureClientSchemaMap,
       initialLexicalFormState,
@@ -77,11 +78,12 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
       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(() => {
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 829315c8e8b..ed8e0c1adf0 100644
--- a/packages/richtext-lexical/src/features/blocks/client/plugin/index.tsx
+++ b/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
 }
diff --git a/packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx b/packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx
index b7ea109de8c..8a25b17128d 100644
--- a/packages/richtext-lexical/src/lexical/config/client/EditorConfigProvider.tsx
+++ b/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,