How to extend netlifyCMS with CMS.registerWidget?

[preetamslot]

Hi,
Where is the place to add custom widgets for netlify CMS to extend the cms?
thanks

[delucis]

Hi @preetamslot!

It's currently not supported. My plan is to offer config options that the integration would read and then call registerWidget for you, but haven't had a chance to do that yet.

So the config would look something like:

NetlifyCMS({
  config: { ... },
  widgets: [
    {
      name: 'my-widget',
      control: <PATH TO REACT COMPONENT>,
    }
  ],
})

[delucis]

Reopening this to keep as a reminder that we do want to support this!

[codelastnight]

It would also be cool to support CMS.registerMediaLibrary(), probably with the same pattern as widget

[tomashco]

Hi there,
regarding the mdx support, I did some testing and made somehow to register the mdx widget inside the editor editing these files:
vite-plugin-admin-dashboard.ts:

return `${imports.join('\n')}
    import * as NCMS from 'netlify-cms-app';
    import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';
    NCMS.registerWidget('mdx', MdxControl, MdxPreview);

    ${identityWidget}
    export default {
      cms: NCMS,
      config: JSON.parse('${JSON.stringify(config)}'),
      previewStyles: [${styles.join(',')}],
    }`

and inside the collection of the posts in the NetlifyCMS config I added:
`extension: 'mdx',
format: 'frontmatter',
fields:

• name: body
  label: Body
  widget: mdx`
  as described in netlify-cms-widget-mdx

This setup allows you to edit a mdx file, but I've found two problems:

• the preview panel displays an error when I try to add mdx content:
  Invalid MDX:
  ReferenceError: process is not defined

• I'm not able to visualize the mdx content created into astro (i.e. trying to view the blog post created)

Hope this can help to further understand and implement mdx in netlify cms!