fix(richtext-lexical): Blocks: field schemas for sub-fields were not handled

packages/richtext-lexical/src/field/features/blocks/component/BlockContent.tsx

@@ -106,7 +106,6 @@ export const BlockContent: React.FC<Props> = (props) => {
       newFormData = {
         ...newFormData,
         id: formData.id,
-        blockName: newFormData.blockName2, // TODO: Find a better solution for this. We have to wrap it in blockName2 when using it here, as blockName does not accept or provide any updated values for some reason.
         blockType: formData.blockType,
       }
 
@@ -210,7 +209,7 @@ export const BlockContent: React.FC<Props> = (props) => {
                   ? getTranslation(labels.singular, i18n)
                   : '[Singular Label]'}
               </Pill>
-              <SectionTitle path="blockName2" readOnly={field?.readOnly} />
+              <SectionTitle path="blockName" readOnly={field?.readOnly} />
               {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
             </div>
             {editor.isEditable() && (
@@ -240,9 +239,9 @@ export const BlockContent: React.FC<Props> = (props) => {
           fieldMap={Array.isArray(formSchema) ? formSchema : []}
           forceRender
           margins="small"
-          path={path}
+          path="" // Leaving path empty makes it so field values are not prefixed / scoped by the entire schemaPath. e.g. we can access "myField" instead of "someLexicalField.feature.blocks.someArrayB" // TODO: Could there be any implications leaving path different than schemaPath?
           readOnly={false}
-          schemaPath={schemaPath}
+          schemaPath={schemaPath} // Having the correct schemaPath here allows sub-fields (like array > addRow) to run correct form-state calls and retrieve their needed form state from the server
         />
       </Collapsible>
 

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

@@ -76,7 +76,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
       if (state) {
         setInitialState({
           ...state,
-          blockName2: {
+          blockName: {
             initialValue: '',
             passesCondition: true,
             valid: true,
@@ -106,7 +106,7 @@ export const BlockComponent: React.FC<Props> = (props) => {
 
       return {
         ...formState,
-        blockName2: {
+        blockName: {
           initialValue: '',
           passesCondition: true,
           valid: true,

packages/richtext-lexical/src/field/features/blocks/feature.server.ts

@@ -55,13 +55,43 @@ export const BlocksFeature: FeatureProviderProviderServer<
       return {
         ClientComponent: BlocksFeatureClientComponent,
         clientFeatureProps: clientProps,
-        generateSchemaMap: ({ props }) => {
+        generateSchemaMap: ({ config, props, schemaMap: schemaMapFromProps, schemaPath }) => {
           const schemaMap: {
             [key: string]: Field[]
           } = {}
 
+          /**
+           * Add sub-fields to the schemaMap. E.g. if you have an array field as part of the block and it runs addRow, it will request these
+           * sub-fields from the component map. Thus we need to put them in the component map here.
+           */
+          const handleFields = (parentPath: string, fields: Field[]) => {
+            for (const field of fields) {
+              if ('name' in field && 'fields' in field) {
+                schemaMap[parentPath + '.' + field.name] = field.fields
+                handleFields(parentPath + '.' + field.name, field.fields)
+              }
+              if ('blocks' in field) {
+                for (const block of field.blocks) {
+                  schemaMap[parentPath + '.' + field.name + '.' + block.slug] = block.fields || []
+                  handleFields(parentPath + '.' + field.name + '.' + block.slug, block.fields)
+                }
+              }
+              if ('tabs' in field) {
+                for (const tab of field.tabs) {
+                  if ('name' in tab) {
+                    schemaMap[parentPath + '.' + tab.name] = tab.fields || []
+                    handleFields(parentPath + '.' + tab.name, tab.fields)
+                  } else {
+                    handleFields(parentPath, tab.fields)
+                  }
+                }
+              }
+            }
+          }
+
           for (const block of props.blocks) {
             schemaMap[block.slug] = block.fields || []
+            handleFields(block.slug, block.fields)
           }
 
           return schemaMap