Preview Pane Support for List Widget: Variable Types

[c7hudson]

Is your feature request related to a problem? Please describe.
Not a problem, just a beta feature that has not yet been fully developed.

ref: https://www.netlifycms.org/docs/beta-features/#list-widget-variable-types

Note: this feature does not yet support previews, and will not output anything in the preview pane.

I searched for an existing issue or article that is tracking the development of this beta feature but could not find one - please forgive me if this is a duplicate :)

Describe the solution you'd like
Simply put I'm wondering if this feature has been roadmapped for development. If not, I'm looking to open a discussion regarding implementing a preview pane through a custom widget (not entirely sure this is possible, as I haven't had a chance to test out custom widgets yet).

Describe alternatives you've considered
See custom widget comment above.

Additional context
Working on a template system that relies fairly heavily on this beta feature, so any insight into the development of the Variable Types for the List Widget would be greatly appreciated!

I'll be testing more with custom widgets in the coming week and will post any updates or alternative solutions I find here.

[c7hudson]

To expand upon my custom widget comment, I want to try following this documentation in order to build a preview pane for the variable types list widget: https://www.netlifycms.org/docs/customization/

[erquhart]

No issue tracking this that I'm aware of, but I could be wrong. Would definitely like to see previews working, just haven't heard a lot of feedback from folks using this functionality to determine if we got the control side right.

cc/ @smnh

[smnh]

Hey,

Yes originally we had more advanced previews for typed list widget. But eventually we dropped it as, if I understood correctly, the preview itself might be customized per case.

But if preview of typed lists is still desired we can bring it back, I think one of the commits of the original PR still has it -
#1857
The discussion of the PR also has some screenshots of how previews of typed lists work

[erquhart]

One problem is that we've passed more power to widget control components over time, but did not do the same for the widget preview components. The preview component core needs to catch up to the control component core to address this.

[c7hudson]

@erquhart @smnh Thank you for the feedback. I'll checkout the above PR - that should be helpful if I get around to testing a custom solution!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[laurenskling]

For me the preview pane has been working perfectly for my very extensive Variable Type setup. I don't know why the documentation says it doesn't work :)

[chrfritsch]

@laurenskling Do you have some example or docs how to implement it? Maybe we could extend the netlify cms docs?

[laurenskling]

Preview pane has been working for me out of the box for Variable Types. I haven't done anything special (I think...) isn't it working for you? If that's the case, I'm willing to try to setup a MVP for you....

[c7hudson]

@laurenskling - I haven't actually tested it, but maybe I will now. I figured based off the docs it just wasn't supported.

To confirm you're using widget: "list" with set of types containing various nested fields of widget: "object" or something similar?

Did you do anything to customize your preview pane setup or are you just using it out of the box?

[laurenskling]

Just as the docs say. Note: types in list must always be object.

export default {
  label: 'collection',
  name: 'collection',
  create: true,
  folder: `collection`,
  slug: '{{slug}}',
  fields: [
    {
      label: 'Title',
      name: 'title',
      widget: 'string',
    },
    {
      label: 'Blocks',
      name: 'blocks',
      widget: 'list',
      types: [
        {
          label: 'Todo',
          name: 'todo',
          widget: 'object',
          fields: [
            {
              label: 'Content',
              name: 'content',
              widget: 'markdown',
              required: true,
            },
          ],
        },
      ],
    },
  ],
};

CMS.registerPreviewTemplate('collection', PagePreview);

const PagePreview = ({ entry }) => {
  const data = entry.getIn(['data']).toJS();
  if (data) {
    return (
....

This is just as normal, right? It just works for me

[erezrokah]

The docs might mean having default previews is not supported. Will check and update here.

[erezrokah]

FYI, rephrased the docs to mention custom preview support #3376

[c7hudson]

Thank you both @erezrokah & @laurenskling!

[chrfritsch]

Whooo, didn't know that it works. This is insane 👍 🥇 🎉

[garrettboatman]

Use case for passing widgets down to objects contained in a list.

config.yml

...
collections:
  - name: "pages"
    label: "Pages"
    create: true
    fields:
      - label: "Sections"
        name: "sections"
        widget: "list"
        types:
          - label: "Content Block"
            name: "block_body"
            widget: "object"
            fields:
              - label: "Image"
                name: "image"
                widget: "image"
              - label: "Markdown"
                name: "markdown"
                widget: "markdown"

admin.html

widgetsFor('sections').map(function(section, index) {
   console.log(section);
});

outputs (with Immutable formatting)

{"data" => 
    {"image" => "/assets/brett-jordan-1329359-unsplash.jpg"}
    {"markdown" => "# Title"}
    {"type" => "block_body"}
}
{"widgets" => undefined} 🚫 

But, when I use a standard list:

   - label: "Sections"
        name: "sections"
        widget: "list"
        fields:
          - label: "Markdown"
            name: "markdown"
            widget: "markdown"
          - label: "Image"
            name: "image"
            widget: "image"

admin.html outputs

{"data" => 
    {"image" => "/assets/brett-jordan-1329359-unsplash.jpg"}
    {"markdown" => "# Title"}
    {"type" => "block_body"} 
}
{"widgets" => 
    {"image" =>  Object} ✅
    {"markdown" => Object} ✅
}

Current workaround to render markdown with https://www.npmjs.com/package/marked and dangerouslySetInnerHTML:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

const sections = widgetsFor('sections').map(function(section, index) {
   const markdown = section.getIn(['data', 'markdown']);
   const markup = markdown ? window.marked(markdown) : '';
   return html`<div dangerouslySetInnerHTML=${{ __html: markup }}></div>`;
});

[domcleal]

I've hit the same issue when creating a custom preview component, as the widgetsFor helper isn't returning the widgets structure alongside data for variable type lists, so have opened #7296 to address it.

Thanks for the precise issue description @garrettboatman, that was helpful!