chore(richtext-lexical): fix unchecked indexed acess in lexical blocks feature (#11013)

This PR is part of the process of fixing `noUncheckedIndexedAccess` in
richtext-lexical.

Author: GermanJablo

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

@@ -174,7 +174,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
 
   const clientSchemaMap = featureClientSchemaMap['blocks']
 
-  const blocksField: BlocksFieldClient | undefined = clientSchemaMap[
+  const blocksField: BlocksFieldClient | undefined = clientSchemaMap?.[
     componentMapRenderedBlockPath
   ]?.[0] as BlocksFieldClient
 
@@ -208,7 +208,9 @@ export const BlockComponent: React.FC<Props> = (props) => {
         return prevFormState
       }
 
-      newFormState.blockName = prevFormState.blockName
+      if (prevFormState.blockName) {
+        newFormState.blockName = prevFormState.blockName
+      }
 
       const newFormStateData: BlockFields = reduceFieldsToValues(
         removeEmptyArrayValues({
@@ -436,6 +438,8 @@ export const BlockComponent: React.FC<Props> = (props) => {
     ],
   )
 
+  const clientBlockFields = clientBlock?.fields ?? []
+
   const BlockDrawer = useMemo(
     () => () => (
       <EditDepthProvider>
@@ -449,7 +453,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
           {initialState ? (
             <>
               <RenderFields
-                fields={clientBlock?.fields}
+                fields={clientBlockFields}
                 forceRender
                 parentIndexPath=""
                 parentPath="" // See Blocks feature path for details as for why this is empty
@@ -488,7 +492,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
             return await onChange({ formState, submit: true })
           },
         ]}
-        fields={clientBlock?.fields}
+        fields={clientBlockFields}
         initialState={initialState}
         onChange={[onChange]}
         onSubmit={(formState, newData) => {
@@ -512,7 +516,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
           CustomBlock={CustomBlock}
           EditButton={EditButton}
           errorCount={errorCount}
-          formSchema={clientBlock?.fields}
+          formSchema={clientBlockFields}
           initialState={initialState}
           nodeKey={nodeKey}
           RemoveButton={RemoveButton}
@@ -523,6 +527,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
     BlockCollapsible,
     BlockDrawer,
     CustomBlock,
+    clientBlockFields,
     RemoveButton,
     EditButton,
     editor,

packages/richtext-lexical/src/features/blocks/client/component/removeEmptyArrayValues.ts

@@ -10,7 +10,7 @@ import type { FormState } from 'payload'
 export function removeEmptyArrayValues({ fields }: { fields: FormState }): FormState {
   for (const key in fields) {
     const field = fields[key]
-    if (Array.isArray(field.rows) && 'value' in field) {
+    if (Array.isArray(field?.rows) && 'value' in field) {
       field.disableFormData = true
     }
   }

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

@@ -112,29 +112,25 @@ export const InlineBlockComponent: React.FC<Props> = (props) => {
 
   const clientSchemaMap = featureClientSchemaMap['blocks']
 
-  const blocksField: BlocksFieldClient = clientSchemaMap[
+  const blocksField: BlocksFieldClient = clientSchemaMap?.[
     componentMapRenderedBlockPath
   ]?.[0] as BlocksFieldClient
 
   const clientBlock = blocksField?.blocks?.[0]
 
+  const clientBlockFields = clientBlock?.fields ?? []
+
   // 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 (clientBlockFields.length > 2) {
         toggleDrawer()
       }
       setCreatedInlineBlock?.(undefined)
       firstTimeDrawer.current = true
     }
-  }, [
-    clientBlock?.fields?.length,
-    createdInlineBlock,
-    nodeKey,
-    setCreatedInlineBlock,
-    toggleDrawer,
-  ])
+  }, [clientBlockFields.length, createdInlineBlock, nodeKey, setCreatedInlineBlock, toggleDrawer])
 
   const removeInlineBlock = useCallback(() => {
     editor.update(() => {

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

@@ -25,29 +25,37 @@ export const BlocksFeatureClient = createClientFeature(
     const schemaMapRenderedInlineBlockPathPrefix = `${schemaPath}.lexical_internal_feature.blocks.lexical_inline_blocks`
     const clientSchema = featureClientSchemaMap['blocks']
 
+    if (!clientSchema) {
+      return {}
+    }
+
     const blocksFields: BlocksFieldClient[] = Object.entries(clientSchema)
       .filter(
         ([key]) =>
           key.startsWith(schemaMapRenderedBlockPathPrefix + '.') &&
           !key.replace(schemaMapRenderedBlockPathPrefix + '.', '').includes('.'),
       )
-      .map(([key, value]) => value[0] as BlocksFieldClient)
+      .map(([, value]) => value[0] as BlocksFieldClient)
 
     const inlineBlocksFields: BlocksFieldClient[] = Object.entries(clientSchema)
       .filter(
         ([key]) =>
           key.startsWith(schemaMapRenderedInlineBlockPathPrefix + '.') &&
           !key.replace(schemaMapRenderedInlineBlockPathPrefix + '.', '').includes('.'),
       )
-      .map(([key, value]) => value[0] as BlocksFieldClient)
+      .map(([, value]) => value[0] as BlocksFieldClient)
 
-    const clientBlocks: ClientBlock[] = blocksFields.map((field) => {
-      return field.blocks[0]
-    })
+    const clientBlocks: ClientBlock[] = blocksFields
+      .map((field) => {
+        return field.blocks[0]
+      })
+      .filter((block) => block !== undefined)
 
-    const clientInlineBlocks: ClientBlock[] = inlineBlocksFields.map((field) => {
-      return field.blocks[0]
-    })
+    const clientInlineBlocks: ClientBlock[] = inlineBlocksFields
+      .map((field) => {
+        return field.blocks[0]
+      })
+      .filter((block) => block !== undefined)
 
     return {
       nodes: [BlockNode, InlineBlockNode],