From 734403b38589ef8bb71517ff430bfa04dd3fde7e Mon Sep 17 00:00:00 2001
From: Dominic Cleal <dominic.cleal@freeagent.com>
Date: Tue, 1 Oct 2024 11:16:37 +0100
Subject: [PATCH] fix(widgetsFor): return widgets for variable type lists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When using a Variable Type list widget and a custom preview component,
the `widgetsFor` helper would only return a `data` list with each of the
items in the list, not a `widgets` list, e.g.

    {"data" =>
        {"markdown" => "# Title"}
        {"type" => "block_body"}
    }
    {"widgets" => undefined} 🚫

The `widgets` list should also be supplied, particularly for nested
Markdown widgets, so a fully formatted preview can be rendered:

    {"data" =>
        {"markdown" => "# Title"}
        {"type" => "block_body"}
    }
    {"widgets" =>
        {"markdown" => Object} ✅
    }

This extends support in `widgetsFor` to detect variable type list
widgets and correctly construct the `widgets` return value.

As reported at https://github.com/decaporg/decap-cms/issues/2307#issuecomment-638326225
---
 .../EditorPreviewPane/EditorPreviewPane.js    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js b/packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
index b9feb9887238..db7fa036595a 100644
--- a/packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
+++ b/packages/decap-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js
@@ -167,9 +167,28 @@ export class PreviewPane extends React.Component {
     const { fields, entry, fieldsMetaData } = this.props;
     const field = fields.find(f => f.get('name') === name);
     const nestedFields = field && field.get('fields');
+    const variableTypes = field && field.get('types');
     const value = entry.getIn(['data', field.get('name')]);
     const metadata = fieldsMetaData.get(field.get('name'), Map());
 
+    // Variable Type lists
+    if (List.isList(value) && variableTypes) {
+      return value.map(val => {
+        const valueType = variableTypes.find(t => t.get('name') === val.get('type'));
+        const typeFields = valueType && valueType.get('fields');
+        const widgets =
+          typeFields &&
+          Map(
+            typeFields.map((f, i) => [
+              f.get('name'),
+              <div key={i}>{this.getWidget(f, val, metadata.get(f.get('name')), this.props)}</div>,
+            ]),
+          );
+        return Map({ data: val, widgets });
+      });
+    }
+
+    // List widgets
     if (List.isList(value)) {
       return value.map(val => {
         const widgets =