How to provide scope and custom components to netlify-cms-widget-mdx

Question

I've set up a Gatsby blog using Netlify CMS and added netlify-cms-widget-mdx to support .mdx files. I have some custom components that I've passed to the MDXProvider to make them globally available to all of my .mdx files without the need to import them in each file. How do I use these same components with netlify-cms-widget-mdx so that the components are rendered properly in preview mode in Netlify CMS? There's a code block in the package's README that I presume answers this question, but it doesn't say anywhere where I should put this code, let alone how I need to configure it the way I need to...any guidance is appreciated!

score 0 · Answer 1 · answered Jan 18 '21 at 10:35

You only need to dig in the Netlify's documentation about creating a custom CMS widgets or in some Netlify's articles. You need to create an isolated file where you will create your widget, let's say at /src/cms/cms.js:

import Trend from 'react-trend';
import { MdxControl, setupPreview } from 'netlify-cms-widget-mdx';
import Trend from 'react-trend';
import remarkEmojiPlugin from 'remark-emoji';

CMS.registerWidget(
  'mdx',
  MdxControl,
  setupPreview({
    components: {
      h1: ({ children, ...props }) => (
        <h1 style={{ color: 'tomato' }} {...props}>
          {children}
        </h1>
      ),
    },
    scope: {
      Layout: (props) => (
        <div
          style={{
            padding: '10px',
            border: '1px solid green',
            borderRadius: '5px',
          }}
          {...props}
        />
      ),
    },
    allowedImports: {
      'react-trend': {
        ImportDefault: Trend,
      },
    },
    mdPlugins: [remarkEmojiPlugin],
  })
);

Then, in the /static/admin folder, create an index.html that points that file:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

  <link rel="stylesheet" href="./cms.css" />

</head>
<body>
  <script src="./cms.js"></script>
</body>
</html>

Netlify's will infer that HTML and will get your new widget to the CMS.

Other resources:

https://github.com/Benaiah/netlify-cms-presentations-example/ (author of the Netlify's article)

How to provide scope and custom components to netlify-cms-widget-mdx

1 Answers1