Support for using the fieldCollection field in a block field

CHANGELOG.md

@@ -18,6 +18,7 @@
 - [#741](https://github.com/estruyf/vscode-front-matter/issues/741): Added message on the content dashboard when content is processed
 - [#747](https://github.com/estruyf/vscode-front-matter/issues/747): The `@frontmatter/extensibility` dependency now supports scripts for placeholders
 - [#752](https://github.com/estruyf/vscode-front-matter/issues/752): Placeholder support in default `list` field values
+- Support for using the `fieldCollection` field in a `block` field
 
 ### 🐞 Fixes
 

src/panelWebView/components/DataBlock/DataBlockField.tsx

@@ -95,6 +95,13 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       // Delete the field group to have it added at the end
       delete data['fieldGroup'];
 
+      // Remove the empty fields
+      Object.keys(data).forEach((key) => {
+        if (data[key] === undefined || data[key] === null || Object.keys(data[key]).length === 0) {
+          delete data[key];
+        }
+      });
+
       if (selectedIndex !== null && selectedIndex !== undefined && dataClone.length > 0) {
         dataClone[selectedIndex] = {
           ...data,
@@ -306,7 +313,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
           {selectedGroup?.fields &&
             fieldsRenderer(
               selectedGroup?.fields,
-              selectedBlockData || {},
+              Object.assign({}, selectedBlockData) || {},
               [...parentFields, field.name],
               {
                 parentFields: [...parentFields, field.name],

src/panelWebView/components/Fields/FieldCollection.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { BlockFieldData, Field, PanelSettings } from '../../../models';
+import { IMetadata } from '../Metadata';
+import { FieldTitle } from './FieldTitle';
+
+export interface IFieldCollectionProps {
+  field: Field;
+  parent: IMetadata;
+  parentFields: string[];
+  blockData: BlockFieldData | undefined;
+  settings: PanelSettings;
+  renderFields: (
+    ctFields: Field[],
+    parent: IMetadata,
+    parentFields: string[],
+    blockData?: BlockFieldData,
+    onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void,
+    parentBlock?: string | null
+  ) => (JSX.Element | null)[] | undefined;
+  onChange: (field: string | undefined, value: any, parents: string[]) => void;
+}
+
+export const FieldCollection: React.FunctionComponent<IFieldCollectionProps> = ({
+  field,
+  parent,
+  parentFields,
+  blockData,
+  settings,
+  renderFields,
+  onChange
+}: React.PropsWithChildren<IFieldCollectionProps>) => {
+  const [fields, setFields] = React.useState<Field[]>([]);
+
+  React.useEffect(() => {
+    if (!settings.fieldGroups) {
+      return
+    }
+
+    const group = settings.fieldGroups.find((group) => group.id === field.fieldGroup);
+    if (group) {
+      setFields(group.fields);
+    }
+  }, [field, settings?.fieldGroups]);
+
+  if (!fields || fields.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className={`metadata_field__box`}>
+      <FieldTitle
+        className={`metadata_field__label_parent`}
+        label={field.title || field.name}
+        icon={undefined}
+        required={field.required}
+      />
+
+      {field.description && (
+        <p className={`metadata_field__description`}>{field.description}</p>
+      )}
+
+      {renderFields(
+        fields,
+        parent,
+        [...parentFields, field.name],
+        blockData,
+        onChange
+      )}
+    </div>
+  );
+};

src/panelWebView/components/Fields/WrapperField.tsx

@@ -26,7 +26,8 @@ import {
   PreviewImageField,
   PreviewImageValue,
   NumberField,
-  CustomField
+  CustomField,
+  FieldCollection
 } from '.';
 import { fieldWhenClause } from '../../../utils/fieldWhenClause';
 import { ContentTypeRelationshipField } from './ContentTypeRelationshipField';
@@ -521,6 +522,27 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
     } else {
       return null;
     }
+  } else if (field.type === "fieldCollection") {
+    if (!parent[field.name]) {
+      parent[field.name] = {};
+    }
+
+    const subMetadata = parent[field.name] as IMetadata;
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <FieldCollection
+          key={field.name}
+          field={field}
+          parent={subMetadata}
+          parentFields={parentFields}
+          renderFields={renderFields}
+          settings={settings}
+          blockData={blockData}
+          onChange={onSendUpdate}
+        />
+      </FieldBoundary>
+    );
   } else {
     console.warn(l10n.t(LocalizationKey.panelFieldsWrapperFieldUnknown, field.type));
     return null;

src/panelWebView/components/Fields/index.ts

@@ -1,9 +1,11 @@
 export * from './ChoiceButton';
 export * from './ChoiceField';
+export * from './ContentTypeRelationshipField';
 export * from './CustomField';
 export * from './DataFileField';
 export * from './DateTimeField';
 export * from './DraftField';
+export * from './FieldCollection';
 export * from './FieldMessage';
 export * from './FieldTitle';
 export * from './FileField';