MDX: Adding "hidden" import to top of markdown field

Netlify CMS
,
#1

Hi everyone.

Is there any way to add something like this to the .md files created in Netlify CMS?

import Button from 'react-bootstrap/Button';

The goal is to let editors create MDX files that will be used later in a NextJS static site generator.

I’ll add Editor components—e.g. a button component that outputs something like <Button variant="primary">Hello world</Button>{' '}.

To make things easier for the site generator, I was hoping to import Bootstrap into the MDX files themselves.

But I would like the import statement to be hidden so editors don’t get confused by it or accidentally delete it in the Rich text view. (Obviously they can do so in markdown view.)

Is there any way to inject the statement by default and in a way that keeps it hidden within the editor?

Open to other approaches if this one doesn’t make sense. :slightly_smiling_face:

#3

Hi @hangrynorwegian and welcome!
We don’t have official MDX support yet, but there is plenty of information here:

However, if you just want to inject data, you could use the preSave event:
https://www.netlifycms.org/docs/beta-features/#registering-to-cms-events

Then have a custom editor component that hides that data in the rich text editor.

#4

Thanks for the great tip. :slight_smile:

What I’m working on right now:

  1. Forget the import statement, and handle it through NextJS and next-mdx-remote
  2. Add a component that
  • inserts the <Tags /> in plain text through toBlock
  • parses the tag through fromBlock
  • previews the React component through toPreview

Looks promising so far. :slight_smile:

1 Like
#5

great. keep us posted.