Custom Preview: Object fields in List field, widgets undefined

Am I doing something wrong? Looking to use widgetFor to render a Markdown field inside of an object field contained in a list.

config.yml

...
collections:
  - name: "pages"
    label: "Pages"
    label_singular: "Page"
    folder: "content/blog"
    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}
}

Got preview working for now with https://www.npmjs.com/package/marked and dangerouslySetInnerHTML.

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
const markdown = section.getIn(['data', 'markdown']);
const markup = markdown? window.marked(markdown) : '';
return html`<div dangerouslySetInnerHTML=${{ __html: markup }}></div>`;

Still curious how I can do this the proper way.

Hi @garrettboatman and welcome :wave:
This functionality is not supported yet for lists with variable types (as with preview pane support https://www.netlifycms.org/docs/beta-features/#list-widget-variable-types), so you’re not doing anything wrong.

Can you add your use case to this issue https://github.com/netlify/netlify-cms/issues/2307 so we can track it?

1 Like

Hi @erez, thank you! Posted to that issue.

Thanks @garrettboatman!

I was able to do this with React-Markdown from npm. Here are the instructions I used.

1 Like