#176 - Block field updated to support default fields

src/panelWebView/components/DataBlock/DataBlockControls.tsx

@@ -11,7 +11,7 @@ export const DataBlockControls: React.FunctionComponent<IDataBlockControlsProps>
   const { formRef } = useForm();
   
   return (
-    <div className='data_block__buttons'>
+    <div className='json_data__buttons'>
       <SubmitField value={model ? `Update` : `Add`} />
       
       <button className='ml-4' onClick={() => {

src/panelWebView/components/DataBlock/DataBlockField.tsx

@@ -1,40 +1,54 @@
 import * as React from 'react';
-import { useState, useMemo, useCallback, useEffect } from 'react';
-import { Field, PanelSettings } from '../../../models';
+import { useState, useCallback } from 'react';
+import { Field, FieldGroup, PanelSettings } from '../../../models';
 import { PencilIcon } from '@heroicons/react/outline';
 import { VsLabel } from '../VscodeComponents';
-import { DataBlockRecords, DataBlockForm, DataBlockSelector } from '.';
+import { DataBlockRecords, DataBlockSelector } from '.';
 import { SortEnd } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
+import { IMetadata } from '../Metadata';
 
 export interface IDataBlockFieldProps {
   label: string;
   settings: PanelSettings;
   field: Field;
+  parentFields: string[];
   value: any;
+  fieldsRenderer: (ctFields: Field[], parent: IMetadata, parentFields?: string[], onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void) => (JSX.Element | null)[] | undefined
   onSubmit: (data: any) => void;
 }
 
-export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
+export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, settings, field, parentFields = [], value, fieldsRenderer, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
-  const [ selectedDataType, setSelectedDataType ] = useState<string | null>(null);
-  const [ selectedSchema, setSelectedSchema ] = useState<any | null>(null);
+  const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
+  const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
 
-  const onUpdate = useCallback((data: any) => {
+  const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any) => {
     const dataClone: any[] = Object.assign([], value);
+
+    if (!crntField) {
+      return;
+    }
+    
     if (selectedIndex !== null && selectedIndex !== undefined) {
+      const data = Object.assign({}, dataClone[selectedIndex]);
       dataClone[selectedIndex] = {
         ...data,
-        blockType: selectedSchema?.id
+        [crntField]: crntValue,
+        fieldGroup: selectedGroup?.id
       };
     } else {
       dataClone.push({
-        ...data,
-        blockType: selectedSchema?.id
+        [crntField]: crntValue,
+        fieldGroup: selectedGroup?.id
       });
+
+      const newIndex = dataClone.length - 1;
+      setSelectedIndex(newIndex);
     }
+
     onSubmit(dataClone);
-  }, [value, selectedIndex, onSubmit, selectedSchema]);
+  }, [selectedGroup?.id, selectedIndex, value, onSubmit]);
 
   const deleteItem = useCallback((index: number) => {
     const dataClone: any[] = Object.assign([], value);
@@ -47,15 +61,32 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     onSubmit(dataClone);
   }, [value, selectedIndex, onSubmit]);
 
-  const onSetDataType = (dataType: string | null) => {
-    setSelectedDataType(dataType);
+  const onGroupChange = (group: FieldGroup | null | undefined) => {
+    setSelectedGroup(group);
 
-    if (!dataType) {
+    if (!group) {
       setSelectedIndex(null);
-      setSelectedSchema(null);
     }
   }
 
+  const onAdd = useCallback(() => {
+    setSelectedIndex(null);
+    setSelectedGroup(null);
+    setSelectedBlockData({});
+  }, [setSelectedIndex, setSelectedGroup, setSelectedBlockData]); 
+  
+  const onEdit = useCallback((index: number) => {
+    setSelectedIndex(index);
+
+    const fieldData = value[index];
+    if (index !== null && settings?.fieldGroups) {
+      const fieldGroup = fieldData?.fieldGroup;
+      const group = settings?.fieldGroups.find(group => group.id === fieldGroup);
+      setSelectedGroup(group);
+      setSelectedBlockData(fieldData);
+    }
+  }, [setSelectedIndex, setSelectedBlockData, value]);
+
   const onSort = useCallback(({ oldIndex, newIndex }: SortEnd) => {
     if (!value || value.length === 0) {
       return null;
@@ -68,20 +99,9 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     const newEntries = arrayMoveImmutable(value, oldIndex, newIndex);
     onSubmit(newEntries);
   }, [value, selectedIndex]);
-
-  const model = useMemo(() => (value && selectedIndex !== null && selectedIndex !== undefined) ? value[selectedIndex] : null, [value, selectedIndex]);
-
-  useEffect(() => {
-    if (selectedIndex !== null && settings?.dataTypes) {
-      const blockType = model["blockType"];
-      const schema = settings?.dataTypes.find(dataType => dataType.id === blockType);
-      setSelectedSchema(schema);
-      setSelectedDataType(blockType);
-    }
-  }, [selectedIndex, model, settings?.dataTypes]);
   
   return (
-    <div className='data_block__field'>
+    <div className='json_data__field'>
 
       <VsLabel>
         <div className={`metadata_field__label`}>
@@ -91,24 +111,24 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
       <DataBlockSelector
         field={field}
-        selectedDataType={selectedDataType}
-        dataTypes={settings.dataTypes}
-        onSetDataType={onSetDataType}
-        onSchemaUpdate={setSelectedSchema} />
+        selectedGroup={selectedGroup?.id}
+        fieldGroups={settings.fieldGroups}
+        onGroupChange={onGroupChange} />
 
-      <DataBlockForm
-        label={(model && selectedIndex !== null) ? `Editing: Record ${selectedIndex + 1}` : `Create a new ${selectedSchema?.id}`}
-        model={model}
-        schema={selectedSchema?.schema}
-        onUpdate={onUpdate}
-        onClear={() => setSelectedIndex(null)} />
+      {
+        selectedGroup?.fields && (
+          <div className='block_field__form'>
+            { fieldsRenderer(selectedGroup?.fields, selectedBlockData || {}, [...parentFields, field.name], onFieldUpdate) }
+          </div>
+        )
+      }
 
       <DataBlockRecords
         records={value}
         selectedIndex={selectedIndex}
-        onAdd={() => setSelectedIndex(null)}
+        onAdd={onAdd}
         onSort={onSort}
-        onEdit={(index: number) => setSelectedIndex(index)}
+        onEdit={onEdit}
         onDelete={deleteItem} />
     </div>
   );

src/panelWebView/components/DataBlock/DataBlockForm.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import JSONSchemaBridge from 'uniforms-bridge-json-schema';
-import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
-import { DataBlockControls } from './DataBlockControls';
-import { DataBlockRecord } from './DataBlockRecord';
-import { CollectionIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
-import Ajv from 'ajv';
-
-export interface IDataBlockFormProps {
-  label: string;
-  schema: any | null;
-  model: any | null;
-  onUpdate: (data: any) => void;
-  onClear: () => void;
-}
-
-export const DataBlockForm: React.FunctionComponent<IDataBlockFormProps> = ({ label, schema, model, onUpdate, onClear }: React.PropsWithChildren<IDataBlockFormProps>) => {
-  const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
-
-  const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false });
-  ajv.addKeyword({
-    keyword: 'fieldType',
-    type: "string",
-    validate: (schema: any, data: any) => {
-      console.log(`ajv`);
-      return true;
-    }
-  });
-
-  const jsonValidator = (crntSchema: object) => {
-    const validator = ajv.compile(crntSchema);
-
-    return (crntModel: object) => {
-      validator(crntModel);
-      return validator.errors?.length ? { details: validator.errors } : null;
-    };
-  };
-
-  useEffect(() => {
-    if (schema) {
-      const schemaValidator = jsonValidator(schema);
-      const bridge = new JSONSchemaBridge(schema, schemaValidator);
-      setBridge(bridge);
-    }
-  }, [schema]);
-
-  if (!bridge || !schema) {
-    return null;
-  }
-  
-  return (
-    <div className='autoform'>
-      <AutoForm 
-        schema={bridge} 
-        model={model || {}}
-        onSubmit={onUpdate}
-        ref={form => form?.reset()}>
-
-        {  label && <h3>{label}</h3> }
-
-        <div className={`fields`}>
-          <AutoFields />
-        </div>
-        
-        <div className={`errors`}>
-          <ErrorsField />
-        </div>
-
-        <DataBlockControls model={model} onClear={onClear} />
-      </AutoForm>
-    </div>
-  );
-};

src/panelWebView/components/DataBlock/DataBlockRecord.tsx

@@ -14,7 +14,7 @@ const DragHandle = SortableHandle(() => <span className='drag_handler'><Selector
 
 export const DataBlockRecord = SortableElement(({ label, id, onEdit, onDelete, isSelected }: React.PropsWithChildren<IDataBlockRecordProps>) => {
   return (
-    <li className={`data_block__record ${isSelected ? `data_block__record_selected` : ``}`}>
+    <li className={`json_data__record ${isSelected ? `json_data__record_selected` : ``}`}>
       <div>
         <DragHandle />
 
@@ -22,12 +22,12 @@ export const DataBlockRecord = SortableElement(({ label, id, onEdit, onDelete, i
       </div>
 
       <div>
-        <button title='Edit record' className='data_block__list__button data_block__list__button_edit' onClick={() => onEdit(id)}>
-          <PencilIcon className='data_block__list__button_icon' />
+        <button title='Edit record' className='json_data__list__button json_data__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Edit</span>
         </button>
-        <button title='Delete record' className='data_block__list__button data_block__list__button_delete' onClick={() => onDelete(id)}>
-          <TrashIcon className='data_block__list__button_icon' />
+        <button title='Delete record' className='json_data__list__button json_data__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Delete</span>
         </button>
       </div>

src/panelWebView/components/DataBlock/DataBlockRecords.tsx

@@ -23,7 +23,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
   }
 
   return (
-    <div className='data_block__list'>
+    <div className='json_data__list'>
       <VsLabel>
         <div className={`metadata_field__label`} >
           <div>
@@ -31,7 +31,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             <span style={{ lineHeight: "16px"}}>Records</span>
           </div>
 
-          <button title='Add new record' className='data_block__list__button' onClick={onAdd}>
+          <button title='Add new record' className='json_data__list__button' onClick={onAdd}>
             <PlusIcon style={{ width: "16px", height: "16px" }} /> 
           </button>
         </div>
@@ -44,7 +44,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             key={idx} 
             id={idx}
             index={idx}
-            label={v?.blockType ?? 'Record'}
+            label={v?.fieldGroup ?? 'Block'}
             isSelected={idx === selectedIndex}
             onEdit={onEdit}
             onDelete={onDelete}  /> 

src/panelWebView/components/DataBlock/DataBlockSelector.tsx

@@ -1,63 +1,71 @@
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
-import { Field } from '../../../models';
-import { DataType } from '../../../models/DataType';
+import { Field, FieldGroup } from '../../../models';
 import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 
 export interface IDataBlockSelectorProps {
   field: Field;
-  dataTypes: DataType[] | undefined;
-  selectedDataType: string | null;
-  onSetDataType: (dataType: string | null) => void;
-  onSchemaUpdate: (schema: any) => void;
+  fieldGroups: FieldGroup[] | undefined;
+  selectedGroup: string | undefined;
+  onGroupChange: (group: FieldGroup | undefined | null) => void;
 }
 
 const EMPTY_OPTION = "EMPTY_OPTION";
 
-export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, dataTypes, selectedDataType, onSetDataType, onSchemaUpdate }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
+export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, fieldGroups, selectedGroup, onGroupChange }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
   const [ options, setOptions ] = useState<string[]>([]);
 
-  const onSchemaSet = useCallback((blockType: string) => {
-    if (dataTypes && blockType !== EMPTY_OPTION) {
-      const schema = dataTypes.find(dataType => dataType.id === blockType);
-      onSchemaUpdate(schema);
+  const onGroupSet = useCallback((fieldGroup: string) => {
+    if (fieldGroups && fieldGroup !== EMPTY_OPTION) {
+      const group = fieldGroups.find(group => group.id === fieldGroup);
+      onGroupChange(group);
     } else {
-      onSchemaUpdate(null);
+      onGroupChange(null);
     }
   }, []);
 
-  useEffect(() => {
-    if (field.blockType && dataTypes) {
-      if (typeof field.blockType === "string") {
-        onSchemaSet(field.blockType);
-      } else if (field.blockType instanceof Array && field.blockType.length === 1) {
-        onSchemaSet(field.blockType[0]);
-      } else {
-        setOptions([...field.blockType]);
-      }
+  const onGroupSelect = useCallback((event: any) => {
+    const group = event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value;
+
+    if (group) {
+      onGroupSet(group);
+    } else {
+      onGroupChange(null);
     }
-  }, [field.blockType, dataTypes, onSchemaUpdate]);
+  } , [onGroupSet]);
 
   useEffect(() => {
-    if (dataTypes && selectedDataType) {
-      if (selectedDataType !== EMPTY_OPTION) {
-        onSchemaSet(selectedDataType);
+    if (field.fieldGroup && fieldGroups) {
+      if (typeof field.fieldGroup === "string") {
+        onGroupSet(field.fieldGroup);
+      } else if (field.fieldGroup instanceof Array && field.fieldGroup.length === 1) {
+        onGroupSet(field.fieldGroup[0]);
       } else {
-        onSchemaUpdate(null);
+        setOptions([...field.fieldGroup]);
       }
     }
-  }, [selectedDataType, dataTypes, onSchemaUpdate])
+  }, [field.fieldGroup, fieldGroups, onGroupChange]);
+
+  useEffect(() => {
+    if (fieldGroups && selectedGroup) {
+      if (selectedGroup !== EMPTY_OPTION) {
+        onGroupSet(selectedGroup);
+      } else {
+        onGroupChange(null);
+      }
+    }
+  }, [selectedGroup, fieldGroups, onGroupChange])
 
   if (options.length === 0) {
     return null;
   }
 
   return (
-    <div className='data_block__selector'>
+    <div className='json_data__selector'>
       <h3>Block type</h3>
       <VSCodeDropdown
-        value={selectedDataType ?? EMPTY_OPTION}
-        onChange={(event: any) => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        value={selectedGroup ?? EMPTY_OPTION}
+        onChange={onGroupSelect}
         style={{
           width: "100%",
           marginBottom: "1rem"

src/panelWebView/components/DataBlock/index.ts

@@ -1,6 +1,5 @@
 export * from './DataBlockControls';
 export * from './DataBlockField';
-export * from './DataBlockForm';
 export * from './DataBlockRecord';
 export * from './DataBlockRecords';
 export * from './DataBlockSelector';

src/panelWebView/components/JsonField/JsonField.tsx

@@ -7,7 +7,7 @@ import { JsonFieldRecords, JsonFieldForm, JsonFieldSelector } from '.';
 import { SortEnd } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
-export interface IJsonFieldFieldProps {
+export interface IJsonFieldProps {
   label: string;
   settings: PanelSettings;
   field: Field;
@@ -15,7 +15,7 @@ export interface IJsonFieldFieldProps {
   onSubmit: (data: any) => void;
 }
 
-export const JsonFieldField: React.FunctionComponent<IJsonFieldFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IJsonFieldFieldProps>) => {
+export const JsonField: React.FunctionComponent<IJsonFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IJsonFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
   const [ selectedDataType, setSelectedDataType ] = useState<string | null>(null);
   const [ selectedSchema, setSelectedSchema ] = useState<any | null>(null);
@@ -81,7 +81,7 @@ export const JsonFieldField: React.FunctionComponent<IJsonFieldFieldProps> = ({
   }, [selectedIndex, model, settings?.dataTypes]);
   
   return (
-    <div className='data_block__field'>
+    <div className='json_data__field'>
 
       <VsLabel>
         <div className={`metadata_field__label`}>

src/panelWebView/components/JsonField/JsonFieldControls.tsx

@@ -11,7 +11,7 @@ export const JsonFieldControls: React.FunctionComponent<IJsonFieldControlsProps>
   const { formRef } = useForm();
   
   return (
-    <div className='data_block__buttons'>
+    <div className='json_data__buttons'>
       <SubmitField value={model ? `Update` : `Add`} />
       
       <button className='ml-4' onClick={() => {

src/panelWebView/components/JsonField/JsonFieldForm.tsx

@@ -19,14 +19,6 @@ export const JsonFieldForm: React.FunctionComponent<IJsonFieldFormProps> = ({ la
   const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
 
   const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false });
-  ajv.addKeyword({
-    keyword: 'fieldType',
-    type: "string",
-    validate: (schema: any, data: any) => {
-      console.log(`ajv`);
-      return true;
-    }
-  });
 
   const jsonValidator = (crntSchema: object) => {
     const validator = ajv.compile(crntSchema);

src/panelWebView/components/JsonField/JsonFieldRecord.tsx

@@ -14,7 +14,7 @@ const DragHandle = SortableHandle(() => <span className='drag_handler'><Selector
 
 export const JsonFieldRecord = SortableElement(({ label, id, onEdit, onDelete, isSelected }: React.PropsWithChildren<IJsonFieldRecordProps>) => {
   return (
-    <li className={`data_block__record ${isSelected ? `data_block__record_selected` : ``}`}>
+    <li className={`json_data__record ${isSelected ? `json_data__record_selected` : ``}`}>
       <div>
         <DragHandle />
 
@@ -22,12 +22,12 @@ export const JsonFieldRecord = SortableElement(({ label, id, onEdit, onDelete, i
       </div>
 
       <div>
-        <button title='Edit record' className='data_block__list__button data_block__list__button_edit' onClick={() => onEdit(id)}>
-          <PencilIcon className='data_block__list__button_icon' />
+        <button title='Edit record' className='json_data__list__button json_data__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Edit</span>
         </button>
-        <button title='Delete record' className='data_block__list__button data_block__list__button_delete' onClick={() => onDelete(id)}>
-          <TrashIcon className='data_block__list__button_icon' />
+        <button title='Delete record' className='json_data__list__button json_data__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Delete</span>
         </button>
       </div>

src/panelWebView/components/JsonField/JsonFieldRecords.tsx

@@ -23,7 +23,7 @@ export const JsonFieldRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
   }
 
   return (
-    <div className='data_block__list'>
+    <div className='json_data__list'>
       <VsLabel>
         <div className={`metadata_field__label`} >
           <div>
@@ -31,7 +31,7 @@ export const JsonFieldRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             <span style={{ lineHeight: "16px"}}>Records</span>
           </div>
 
-          <button title='Add new record' className='data_block__list__button' onClick={onAdd}>
+          <button title='Add new record' className='json_data__list__button' onClick={onAdd}>
             <PlusIcon style={{ width: "16px", height: "16px" }} /> 
           </button>
         </div>

src/panelWebView/components/JsonField/JsonFieldSelector.tsx

@@ -53,7 +53,7 @@ export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps>
   }
 
   return (
-    <div className='data_block__selector'>
+    <div className='json_data__selector'>
       <h3>Block type</h3>
       <VSCodeDropdown
         value={selectedDataType ?? EMPTY_OPTION}

src/panelWebView/components/JsonField/index.ts

@@ -1,5 +1,5 @@
+export * from './JsonField';
 export * from './JsonFieldControls';
-export * from './JsonFieldField';
 export * from './JsonFieldForm';
 export * from './JsonFieldRecord';
 export * from './JsonFieldRecords';

src/panelWebView/components/Metadata.tsx

@@ -21,7 +21,7 @@ import FieldBoundary from './ErrorBoundary/FieldBoundary';
 import { DraftField } from './Fields/DraftField';
 import { VsLabel } from './VscodeComponents';
 import { DataBlockField } from './DataBlock';
-import { JsonFieldField } from './JsonField';
+import { JsonField } from './JsonField';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -57,11 +57,19 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
     return null;
   }
 
-  const renderFields = (ctFields: Field[], parent: IMetadata, parentFields: string[] = []) => {
+  const renderFields = (ctFields: Field[], parent: IMetadata, parentFields: string[] = [], onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void) => {
     if (!ctFields) {
       return;
     }
 
+    const onSendUpdate = (field: string | undefined, value: any, parents: string[]) => {
+      if (onFieldUpdate) {
+        onFieldUpdate(field, value, parents);
+      } else {
+        sendUpdate(field, value, parents);
+      }
+    };
+
     return ctFields.map(field => {
       if (field.hidden) {
         return null;
@@ -76,7 +84,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               label={field.title || field.name}
               date={dateValue}
               format={settings?.date?.format}
-              onChange={(date => sendUpdate(field.name, date, parentFields))} />
+              onChange={(date => onSendUpdate(field.name, date, parentFields))} />
           </FieldBoundary>
         );
       } else if (field.type === 'boolean') {
@@ -86,7 +94,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               key={field.name}
               label={field.title || field.name}
               checked={!!parent[field.name] as any} 
-              onChanged={(checked) => sendUpdate(field.name, checked, parentFields)} />
+              onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'string') {
@@ -106,7 +114,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               singleLine={field.single}
               limit={limit}
               rows={3}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)}
+              onChange={(value) => onSendUpdate(field.name, value, parentFields)}
               value={textValue as string || null} />
           </FieldBoundary>
         );
@@ -122,7 +130,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
             <NumberField 
               key={field.name}
               label={field.title || field.name}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)}
+              onChange={(value) => onSendUpdate(field.name, value, parentFields)}
               value={nrValue} />
           </FieldBoundary>
         );
@@ -136,7 +144,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               parents={parentFields}
               value={parent[field.name] as PreviewImageValue | PreviewImageValue[] | null}
               multiple={field.multiple}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)} />
+              onChange={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'choice') {
@@ -150,7 +158,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               selected={choiceValue as string}
               choices={choices}
               multiSelect={field.multiple}
-              onChange={(value => sendUpdate(field.name, value, parentFields))} />
+              onChange={(value => onSendUpdate(field.name, value, parentFields))} />
           </FieldBoundary>
         );
       } else if (field.type === 'tags') {
@@ -214,7 +222,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               type={draftField?.type || "boolean"}
               choices={draftField?.choices || []}
               value={value as boolean | string | null | undefined}
-              onChanged={(value: boolean | string) => sendUpdate(field.name, value, parentFields)} />
+              onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'fields') { 
@@ -241,12 +249,27 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <JsonFieldField
+            <JsonField
               label={field.title || field.name}
               settings={settings}
               field={field}
               value={collectionData}
-              onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
+              onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
+          </FieldBoundary>
+        );
+      } else if (field.type === 'block') {
+        const blockData = parent[field.name];
+
+        return (
+          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+            <DataBlockField
+              label={field.title || field.name}
+              settings={settings}
+              field={field}
+              value={blockData}
+              fieldsRenderer={renderFields}
+              parentFields={parentFields}
+              onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else {

src/panelWebView/styles.css

@@ -1,5 +1,12 @@
 
-.data_block__field {
+.block_field__form {
+  background-color: transparent;
+  border: 1px dashed var(--vscode-button-background);
+  padding: 1rem;
+  filter: brightness(85%);
+}
+
+.json_data__field {
   border: 1px dashed var(--vscode-button-secondaryBackground);
   color: var(--vscode--settings-headerForeground);
   padding: .5rem 1rem;
@@ -22,7 +29,7 @@
     margin-bottom: .5rem;
 
     &:last-child {
-      .data_block__selector h3 {
+      .json_data__selector h3 {
         font-size: 1rem;
         font-weight: bold;
         text-align: center;
@@ -33,7 +40,7 @@
   }
 }
 
-.data_block__selector {
+.json_data__selector {
   h3 {
     font-size: var(--vscode-font-size);
     font-weight: bold;
@@ -45,7 +52,7 @@
   }
 }
 
-.data_block__buttons {
+.json_data__buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -79,7 +86,7 @@
   }
 }
 
-.data_block__list {
+.json_data__list {
   margin-top: 1rem;
 
   label {
@@ -125,7 +132,7 @@
   }
 }
 
-.data_block__list .metadata_field__label {
+.json_data__list .metadata_field__label {
   justify-content: space-between;
 
   > div {
@@ -138,14 +145,14 @@
   }
 }
 
-.data_block__record {
+.json_data__record {
   border-bottom: 1px solid var(--vscode-button-secondaryBackground);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .5rem 0;
 
-  &.data_block__record_selected {
+  &.json_data__record_selected {
     background-color: rgba(255, 255, 255, .1);
     filter: brightness(100%);
   }
@@ -188,7 +195,7 @@
 }
 
 .sortable_item button,
-.data_block__list__button {
+.json_data__list__button {
   width: auto;
   background: none;
   color: inherit;
@@ -203,7 +210,7 @@
   }
 }
 
-.data_block__list__button_icon {
+.json_data__list__button_icon {
   height: 1rem;
   width: 1rem;
 }