feat(richtext-lexical): inline blocks (#7102)

packages/ui/src/fields/Blocks/BlockRow.tsx

@@ -79,6 +79,8 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
     .filter(Boolean)
     .join(' ')
 
+  const LabelComponent = block?.LabelComponent
+
   return (
     <div
       id={`${parentPath.split('.').join('-')}-row-${rowIndex}`}
@@ -119,19 +121,23 @@ export const BlockRow: React.FC<BlockFieldProps> = ({
             : undefined
         }
         header={
-          <div className={`${baseClass}__block-header`}>
-            <span className={`${baseClass}__block-number`}>
-              {String(rowIndex + 1).padStart(2, '0')}
-            </span>
-            <Pill
-              className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
-              pillStyle="white"
-            >
-              {getTranslation(block.labels.singular, i18n)}
-            </Pill>
-            <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
-            {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
-          </div>
+          LabelComponent ? (
+            <LabelComponent blockKind={'block'} formData={row} />
+          ) : (
+            <div className={`${baseClass}__block-header`}>
+              <span className={`${baseClass}__block-number`}>
+                {String(rowIndex + 1).padStart(2, '0')}
+              </span>
+              <Pill
+                className={`${baseClass}__block-pill ${baseClass}__block-pill-${row.blockType}`}
+                pillStyle="white"
+              >
+                {getTranslation(block.labels.singular, i18n)}
+              </Pill>
+              <SectionTitle path={`${path}.blockName`} readOnly={readOnly} />
+              {fieldHasErrors && <ErrorPill count={errorCount} i18n={i18n} withMessage />}
+            </div>
+          )
         }
         isCollapsed={row.collapsed}
         key={row.id}

packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx

@@ -315,6 +315,7 @@ export const mapFields = (args: {
 
               const reducedBlock: ReducedBlock = {
                 slug: block.slug,
+                LabelComponent: block.admin?.components?.Label,
                 custom: block.admin?.custom,
                 fieldMap: blockFieldMap,
                 imageAltText: block.imageAltText,

packages/ui/src/providers/ComponentMap/buildComponentMap/types.ts

@@ -1,4 +1,5 @@
 import type {
+  Block,
   BlockField,
   CellComponentProps,
   FieldTypes,
@@ -35,6 +36,7 @@ export type MappedTab = {
 }
 
 export type ReducedBlock = {
+  LabelComponent: Block['admin']['components']['Label']
   custom?: Record<any, string>
   fieldMap: FieldMap
   imageAltText?: string