#590 - Fix for image fields inside a sub-block

estruyf · Jun 20, 2023 · b799b46 · b799b46
1 parent 91d6d35
commit b799b46
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@
 - [#567](https://github.com/estruyf/vscode-front-matter/issues/567): Fix taxonomy filters that are incorrectly positioned
 - [#572](https://github.com/estruyf/vscode-front-matter/issues/572): Fix the media snippet placeholder link
 - [#577](https://github.com/estruyf/vscode-front-matter/issues/577): Fix in the `dataFile` field where data entries get overwritten
+- [#590](https://github.com/estruyf/vscode-front-matter/issues/590): Fix for image fields inside a sub-block
 
 ## [8.4.0] - 2023-04-03 - [Release notes](https://beta.frontmatter.codes/updates/v8.4.0)
 

diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts
@@ -254,6 +254,11 @@ export class DataListener extends BaseListener {
     let parentObj = data;
     let allParents = Object.assign([], parents);
     const contentType = ArticleHelper.getContentType(article.data);
+    const selectedIndexes =
+      typeof blockData?.selectedIndex === 'string'
+        ? blockData?.selectedIndex.split('.').map((v) => parseInt(v))
+        : [blockData?.selectedIndex];
+    let lastSelectedIndex: number | undefined;
 
     // Add support for block fields
     if (blockData?.parentFields) {
@@ -272,13 +277,19 @@ export class DataListener extends BaseListener {
 
         parentObj = parentObj[parent];
         crntField = contentType.fields.find((f) => f.name === parent);
+
+        // Check if current field is an array
+        if (parentObj instanceof Array) {
+          lastSelectedIndex = selectedIndexes.shift();
+          if (typeof lastSelectedIndex !== 'undefined') {
+            parentObj = parentObj[lastSelectedIndex];
+          }
+        }
       }
 
       // Fetches the current block
       if (blockData && crntField && crntField.type === 'block') {
-        if (typeof blockData.selectedIndex !== 'undefined') {
-          parentObj = parentObj[blockData.selectedIndex];
-        } else {
+        if (typeof lastSelectedIndex === 'undefined') {
           parentObj.push({
             fieldGroup: blockData.blockType
           });

diff --git a/src/models/BlockFieldData.ts b/src/models/BlockFieldData.ts
@@ -1,5 +1,5 @@
 export interface BlockFieldData {
   parentFields: string[] | undefined;
   blockType: string | undefined;
-  selectedIndex: number | undefined;
+  selectedIndex: number | string | undefined;
 }
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -15,6 +15,7 @@ export interface IDataBlockFieldProps {
   field: Field;
   parentFields: string[];
   value: any;
+  blockData: BlockFieldData | undefined;
   filePath: string;
   fieldsRenderer: (
     ctFields: Field[],
@@ -37,6 +38,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
   field,
   parentFields = [],
   value,
+  blockData,
   fieldsRenderer,
   onSubmit,
   parentBlock,
@@ -58,6 +60,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
   const onFieldUpdate = useCallback(
     (crntField: string | undefined, crntValue: any, parents: string[]) => {
+      debugger;
       const dataClone: any[] = Object.assign([], value);
 
       if (!crntField) {
@@ -91,7 +94,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       // Delete the field group to have it added at the end
       delete data['fieldGroup'];
 
-      if (selectedIndex !== null && selectedIndex !== undefined) {
+      if (selectedIndex !== null && selectedIndex !== undefined && dataClone.length > 0) {
         dataClone[selectedIndex] = {
           ...data,
           fieldGroup: selectedGroup?.id
@@ -238,6 +241,21 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     [SELECTION_STATE_KEY]
   );
 
+  const getSelectedIndex = useCallback(() => {
+    console.log(blockData)
+    let crntValue = [];
+
+    if (blockData?.selectedIndex !== null && blockData?.selectedIndex !== undefined) {
+      crntValue.push(blockData.selectedIndex);
+    }
+
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      crntValue.push(selectedIndex);
+    }
+
+    return crntValue.join('.');
+  }, [blockData, selectedIndex]);
+
   useEffect(() => {
     if (selectedIndex !== null) {
       const fieldData = value[selectedIndex];
@@ -293,7 +311,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
               {
                 parentFields: [...parentFields, field.name],
                 blockType: selectedGroup?.id || undefined,
-                selectedIndex: selectedIndex === null ? undefined : selectedIndex
+                selectedIndex: getSelectedIndex()
               },
               onFieldUpdate,
               `${field.name}-${selectedGroup?.id}-${selectedIndex || 0}`

diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx
@@ -70,11 +70,10 @@ export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps>
       <FieldTitle label={label} icon={<PhotographIcon />} required={required} />
 
       <div
-        className={`metadata_field__preview_image ${
-          multiple && value && (value as PreviewImageValue[]).length > 0
-            ? `metadata_field__multiple_images`
-            : ''
-        } ${showRequiredState ? 'required' : ''}`}
+        className={`metadata_field__preview_image ${multiple && value && (value as PreviewImageValue[]).length > 0
+          ? `metadata_field__multiple_images`
+          : ''
+          } ${showRequiredState ? 'required' : ''}`}
       >
         {(!value || isFaultyImage || multiple) && (
           <button

diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
@@ -428,7 +428,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       </FieldBoundary>
     );
   } else if (field.type === 'block') {
-    const blockData = Object.assign([], parent[field.name]);
+    const fieldData = Object.assign([], parent[field.name]);
 
     return (
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -437,7 +437,8 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           description={field.description}
           settings={settings}
           field={field}
-          value={blockData}
+          value={fieldData}
+          blockData={blockData}
           fieldsRenderer={renderFields}
           parentFields={parentFields}
           filePath={metadata.filePath as string}