fix(richtext-lexical): properly handle error if blocks or inline blocks are not found (#10497)

Fixes #10445

Previously, if a block or inline block was part of the editor data that
did not exist in the config, an error would be thrown that rendered the
entire editor unusable.

Now, the error is handled gracefully and displayed within the block,
allowing users to remove the block in order to fix the issue.

![CleanShot 2025-01-10 at 10 17
14@2x](https://github.com/user-attachments/assets/7d1c97bc-8c7b-451d-a6dc-e46d39dfb0f5)

Author: AlessioGr

packages/richtext-lexical/src/features/blocks/client/component/index.scss

@@ -6,6 +6,11 @@
     z-index: 1;
   }
 
+  .lexical-block-not-found {
+    color: var(--theme-error-500);
+    font-size: 1.1rem;
+  }
+
   .lexical-block {
     display: flex;
     flex-direction: column;

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

@@ -174,11 +174,11 @@ export const BlockComponent: React.FC<Props> = (props) => {
 
   const clientSchemaMap = featureClientSchemaMap['blocks']
 
-  const blocksField: BlocksFieldClient = clientSchemaMap[
+  const blocksField: BlocksFieldClient | undefined = clientSchemaMap[
     componentMapRenderedBlockPath
-  ][0] as BlocksFieldClient
+  ]?.[0] as BlocksFieldClient
 
-  const clientBlock = blocksField.blocks[0]
+  const clientBlock = blocksField?.blocks?.[0]
 
   const { i18n, t } = useTranslation<object, string>()
 
@@ -352,13 +352,15 @@ export const BlockComponent: React.FC<Props> = (props) => {
     () =>
       ({
         children,
+        disableBlockName,
         editButton,
         errorCount,
         fieldHasErrors,
         Label,
         removeButton,
       }: {
         children?: React.ReactNode
+        disableBlockName?: boolean
         editButton?: boolean
         errorCount?: number
         fieldHasErrors?: boolean
@@ -385,12 +387,15 @@ export const BlockComponent: React.FC<Props> = (props) => {
                       className={`${baseClass}__block-pill ${baseClass}__block-pill-${formData?.blockType}`}
                       pillStyle="white"
                     >
-                      {blockDisplayName}
+                      {blockDisplayName ?? formData?.blockType}
                     </Pill>
-                    <SectionTitle
-                      path="blockName"
-                      readOnly={parentLexicalRichTextField?.admin?.readOnly || false}
-                    />
+                    {!disableBlockName && (
+                      <SectionTitle
+                        path="blockName"
+                        readOnly={parentLexicalRichTextField?.admin?.readOnly || false}
+                      />
+                    )}
+
                     {fieldHasErrors && (
                       <ErrorPill count={errorCount ?? 0} i18n={i18n} withMessage />
                     )}
@@ -444,7 +449,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
           {initialState ? (
             <>
               <RenderFields
-                fields={clientBlock.fields}
+                fields={clientBlock?.fields}
                 forceRender
                 parentIndexPath=""
                 parentPath="" // See Blocks feature path for details as for why this is empty
@@ -463,7 +468,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
       drawerSlug,
       blockDisplayName,
       t,
-      clientBlock.fields,
+      clientBlock?.fields,
       schemaFieldsPath,
       permissions,
       // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
@@ -483,7 +488,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
             return await onChange({ formState, submit: true })
           },
         ]}
-        fields={clientBlock.fields}
+        fields={clientBlock?.fields}
         initialState={initialState}
         onChange={[onChange]}
         onSubmit={(formState) => {
@@ -508,7 +513,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
           CustomBlock={CustomBlock}
           EditButton={EditButton}
           errorCount={errorCount}
-          formSchema={clientBlock.fields}
+          formSchema={clientBlock?.fields}
           initialState={initialState}
           nodeKey={nodeKey}
           RemoveButton={RemoveButton}
@@ -524,13 +529,23 @@ export const BlockComponent: React.FC<Props> = (props) => {
     editor,
     errorCount,
     toggleDrawer,
-    clientBlock.fields,
+    clientBlock?.fields,
     // DO NOT ADD FORMDATA HERE! Adding formData will kick you out of sub block editors while writing.
     initialState,
     nodeKey,
     onChange,
     submitted,
   ])
 
+  if (!clientBlock) {
+    return (
+      <BlockCollapsible disableBlockName={true} fieldHasErrors={true}>
+        <div className="lexical-block-not-found">
+          Error: Block '{formData.blockType}' not found in the config but exists in the lexical data
+        </div>
+      </BlockCollapsible>
+    )
+  }
+
   return Block
 }

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

@@ -5,6 +5,11 @@
     display: inline-block;
   }
 
+  .inline-block.inline-block-not-found {
+    max-width: calc(var(--base) * 20);
+    color: var(--theme-error-500);
+  }
+
   .inline-block {
     @extend %body;
     @include shadow-sm;

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

@@ -126,21 +126,27 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
 
   const blocksField: BlocksFieldClient = clientSchemaMap[
     componentMapRenderedBlockPath
-  ][0] as BlocksFieldClient
+  ]?.[0] as BlocksFieldClient
 
-  const clientBlock = blocksField.blocks[0]
+  const clientBlock = blocksField?.blocks?.[0]
 
   // Open drawer on "mount"
   useEffect(() => {
     if (!firstTimeDrawer.current && createdInlineBlock?.getKey() === nodeKey) {
       // > 2 because they always have "id" and "blockName" fields
-      if (clientBlock.fields.length > 2) {
+      if (clientBlock?.fields?.length > 2) {
         toggleDrawer()
       }
       setCreatedInlineBlock?.(undefined)
       firstTimeDrawer.current = true
     }
-  }, [clientBlock.fields.length, createdInlineBlock, nodeKey, setCreatedInlineBlock, toggleDrawer])
+  }, [
+    clientBlock?.fields?.length,
+    createdInlineBlock,
+    nodeKey,
+    setCreatedInlineBlock,
+    toggleDrawer,
+  ])
 
   const removeInlineBlock = useCallback(() => {
     editor.update(() => {
@@ -199,7 +205,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
   }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected, onClick])
 
   const blockDisplayName = clientBlock?.labels?.singular
-    ? getTranslation(clientBlock.labels.singular, i18n)
+    ? getTranslation(clientBlock?.labels.singular, i18n)
     : clientBlock?.slug
 
   const onChangeAbortControllerRef = useRef(new AbortController())
@@ -355,12 +361,13 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
 
   const InlineBlockContainer = useMemo(
     () =>
-      ({ children }: { children: React.ReactNode }) => (
+      ({ children, className }: { children: React.ReactNode; className?: string }) => (
         <div
           className={[
             baseClass,
             baseClass + '-' + formData.blockType,
             isSelected && `${baseClass}--selected`,
+            className,
           ]
             .filter(Boolean)
             .join(' ')}
@@ -376,9 +383,24 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
     if (CustomLabel) {
       return () => CustomLabel
     } else {
-      return () => <div>{getTranslation(clientBlock.labels!.singular, i18n)}</div>
+      return () => (
+        <div>{clientBlock?.labels ? getTranslation(clientBlock?.labels.singular, i18n) : ''}</div>
+      )
     }
-  }, [CustomLabel, clientBlock.labels, i18n])
+  }, [CustomLabel, clientBlock?.labels, i18n])
+
+  if (!clientBlock) {
+    return (
+      <InlineBlockContainer className={`${baseClass}-not-found`}>
+        <span>Error: Block '{formData.blockType}' not found</span>
+        {editor.isEditable() ? (
+          <div className={`${baseClass}__actions`}>
+            <RemoveButton />
+          </div>
+        ) : null}
+      </InlineBlockContainer>
+    )
+  }
 
   return (
     <Form
@@ -389,7 +411,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
         },
       ]}
       disableValidationOnSubmit
-      fields={clientBlock.fields}
+      fields={clientBlock?.fields}
       initialState={initialState || {}}
       onChange={[onChange]}
       onSubmit={(formState) => {
@@ -409,7 +431,7 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
           {initialState ? (
             <>
               <RenderFields
-                fields={clientBlock.fields}
+                fields={clientBlock?.fields}
                 forceRender
                 parentIndexPath=""
                 parentPath="" // See Blocks feature path for details as for why this is empty