fix(richtext-lexical): open inline block drawer on mount (#10318)

fix #9816
payloadcms · Jan 3, 2025 · 5997aa1 · 5997aa1
1 parent f2fab39
commit 5997aa1
Showing 1 changed file with 10 additions and 0 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
@@ -81,6 +81,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
   } = useEditorConfigContext()
   const { getFormState } = useServerFunctions()
   const editDepth = useEditDepth()
+  const hasMounted = useRef(false)
 
   const [initialState, setInitialState] = React.useState<false | FormState | undefined>(
     initialLexicalFormState?.[formData.id]?.formState,
@@ -116,6 +117,15 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
 
   const clientBlock = blocksField.blocks[0]
 
+  // 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
+    }
+  }, [clientBlock, toggleDrawer])
+
   const removeInlineBlock = useCallback(() => {
     editor.update(() => {
       $getNodeByKey(nodeKey)?.remove()