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 8d91039ab9..648bbe0e0a 100644 --- 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) => { } = useEditorConfigContext() const { getFormState } = useServerFunctions() const editDepth = useEditDepth() + const hasMounted = useRef(false) const [initialState, setInitialState] = React.useState( initialLexicalFormState?.[formData.id]?.formState, @@ -116,6 +117,15 @@ export const InlineBlockComponent: React.FC = (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()