fix(widgetsFor): return widgets for variable type lists #7296

domcleal · 2024-10-01T10:28:29Z

Summary

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.

Fixes #2307 (specifically #2307 (comment) which explains it neatly).

Test plan

Using the test backend, add the following custom preview helper:

var KitchenSinkPreview = createClass({
  render: function() {
    return h('div', {},
      h('h1', {}, 'Typed list'),
      this.props.widgetsFor('typed_list').map(function(item, index) {
        return h('div', {key: index},
          h('hr', {}),
          h('strong', {}, item.getIn(['data', 'string']) || "Untitled"),

          h('dl', {},
            h('dt', {}, 'Data'),
            h('dd', {}, item.getIn(['data', 'markdown'])),

            h('dt', {}, 'Widgets'),
            h('dd', {}, item.getIn(['widgets', 'markdown'])),
          ),
        );
      })
    );
  }
});

CMS.registerPreviewTemplate("kitchenSink", KitchenSinkPreview);

Before:

Only the data value is populated, so only the raw Markdown is available. The widgets return value is empty.

After:

In the preview pane, the Markdown widget is now able to be used to render the field.

Checklist

Please add a x inside each checkbox:

I have read the contribution guidelines.

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 decaporg#2307 (comment)

demshy

This is great, thanks!

If maybe someone could figure out if this could work with what @fgnass did here #7374 it would be even better

domcleal · 2025-01-29T11:41:56Z

Thanks for reviewing!

If maybe someone could figure out if this could work with what @fgnass did here #7374 it would be even better

I can't really think of any way that they'd interact. This only fixes the existing helper for custom previews, but visual editing and the default preview are separate concerns.

It might be that the visual editing could be extended to work in custom previews (if it doesn't already, I'm unclear) or that default previews should extend to variable type lists, but I believe that's separate to this change to widgetsFor.

demshy · 2025-01-29T12:53:06Z

This only fixes the existing helper for custom previews, but visual editing and the default preview are separate concerns.

Yep, I think this PR is a prerequisite for us to even start thinking about extending visual editing triggers to the variable types. Since that feature will start as Beta anyway I don't have a problem releasing both.

* feat(nested collections): allow non-index files (decaporg#7359) * feat(nested collections): allow non-index files This commit fixes decaporg#4972 to allow nested folders with additional content beyond an index file. Side effect: To keep the feature simple, this will now show index files as pages within a folder in NetlifyCMS. This enables creating additional files alongside the given index, but is a change in behavior from the current implementation. Co-authored-by: Eric Gade <105373963+eric-gade@users.noreply.github.com> * test(e2e): adapt to new way nested collections work We use regexps as otherwise .contains("Sub Directory") would also match "Another Sub Directory" --------- Co-authored-by: Andrew Dunkman <adunkman@gmail.com> Co-authored-by: Eric Gade <105373963+eric-gade@users.noreply.github.com> Co-authored-by: Anze Demsar <anze.demsar@p-m.si> * fix(markdown): convert inline CSS from Google Docs to Markdown (decaporg#7351) Extends the HTML to Markdown conversion to better support bold and italic formatting from Google Docs, which generates inline styles on a `span` element instead of strong/b/em/i type elements. Co-authored-by: Anze Demsar <anze.demsar@p-m.si> * feat: visual editing (click-to-edit) (decaporg#7374) * refactor: clean up controlRef handling * feat: add click-to-edit * test: update snapshots --------- Co-authored-by: Anze Demsar <anze.demsar@p-m.si> * fix(widgetsFor): return widgets for variable type lists (decaporg#7296) 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 decaporg#2307 (comment) Co-authored-by: Anze Demsar <anze.demsar@p-m.si> * chore(release): publish - decap-cms@3.6.0 - decap-cms-app@3.6.0 - decap-cms-core@3.6.0 - decap-cms-lib-util@3.2.0 - decap-cms-widget-list@3.3.0 - decap-cms-widget-markdown@3.3.0 - decap-cms-widget-object@3.3.0 - decap-server@3.2.0 * fix(ObjectControl): hotfix nested object validation (decaporg#7385) * chore(release): publish - decap-cms@3.6.1 - decap-cms-app@3.6.1 - decap-cms-widget-object@3.3.1 * chore: update to upload-artifact@v4 (decaporg#7388) * feat(nested collections) legacy mode (decaporg#7387) * feat(nested-collections): opt-in to legacy nested folder behaviour * style: lint * feat(nested-collection): default subfolders to true * test(nested-collections): keep the tests in the subfolders: false scenario * chore(release): publish - decap-cms@3.6.2 - decap-cms-app@3.6.2 - decap-cms-core@3.6.1 * fix(nested-i18n): pass newPath only when customPath differs from current path (decaporg#7418) * fix(decaporg#7371): Duplicate Localized Content When Duplicating Entries with i18n Enabled (decaporg#7372) * chore: add i18n to EntryObject type * fix: draftDuplicateEntry function duplicate i18n data --------- Co-authored-by: Anze Demsar <anze.demsar@p-m.si> * chore(release): publish - decap-cms@3.6.3 - decap-cms-app@3.6.3 - decap-cms-core@3.6.2 * Update README.md, fix spelling error (decaporg#7472) * PNW-2564 - duplicate workflow (#21) * Merge with feature/PNW-2564_duplicate--wip * feat: duplicate workflow wip * feat: duplicate workflow wip * feat: added local empty draft * feat: added isCustomEntry to edit state with data * feat: added function to retrieve current unpublished entries * feat: added enty and avoid problems if empty is missing * feat: refactor context structure and error name with integration --------- Co-authored-by: Felix Gnass <fgnass@gmail.com> Co-authored-by: Andrew Dunkman <adunkman@gmail.com> Co-authored-by: Eric Gade <105373963+eric-gade@users.noreply.github.com> Co-authored-by: Anze Demsar <anze.demsar@p-m.si> Co-authored-by: Dominic Cleal <dominic.cleal@freeagent.com> Co-authored-by: Anze Demsar <demshy@gmail.com> Co-authored-by: starkovio <deniss@n3xtcoder.org> Co-authored-by: kare-rentelligent <128468921+kare-rentelligent@users.noreply.github.com>

domcleal marked this pull request as ready for review October 1, 2024 10:54

domcleal requested a review from a team as a code owner October 1, 2024 10:54

domcleal mentioned this pull request Oct 1, 2024

Preview Pane Support for List Widget: Variable Types #2307

Closed

Merge branch 'main' into preview-variable-widgets

c2f2806

demshy mentioned this pull request Jan 17, 2025

feat: visual editing (click-to-edit) #7374

Merged

1 task

demshy approved these changes Jan 28, 2025

View reviewed changes

Merge branch 'main' into preview-variable-widgets

7ea11aa

demshy merged commit 9be2693 into decaporg:main Jan 29, 2025
7 checks passed

This was referenced May 16, 2025

PNW-2564 - duplicate workflow Feverup/decap-cms#21

Merged

feature/processing and duplicate Feverup/decap-cms#22

Closed

PNW-2564 - merge with master Feverup/decap-cms#23

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(widgetsFor): return widgets for variable type lists #7296

fix(widgetsFor): return widgets for variable type lists #7296

Uh oh!

domcleal commented Oct 1, 2024

Uh oh!

demshy left a comment

Uh oh!

domcleal commented Jan 29, 2025

Uh oh!

demshy commented Jan 29, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fix(widgetsFor): return widgets for variable type lists #7296

fix(widgetsFor): return widgets for variable type lists #7296

Uh oh!

Conversation

domcleal commented Oct 1, 2024

Uh oh!

demshy left a comment

Choose a reason for hiding this comment

Uh oh!

domcleal commented Jan 29, 2025

Uh oh!

demshy commented Jan 29, 2025

Uh oh!

Uh oh!

Uh oh!