Implementing React component through CMS.registerEditorComponent

Sitename: ‘https://determined-keller-c42e49.netlify.app/

Hello wonderful people :slight_smile:

This is my second post here and before I state my issue I have to preface it by saying I am a total newbie with Netlify so this thread might seem somewhat trivial. Let’s move to actual issue.

What I am trying to do is to create a widget for my marketing team which enables them to put one particular banner across different posts. The posts are created through Gatsby/React setup. We have a template for the posts and marketing team uses NetlifyCMS to create those. The banner is on one of the LPs which we created manually, they are not connected to Gatsby blog templates.

I have a CMS.js file where such widgets are created. An example would be the one which lets to implement Youtube iframes:

CMS.registerEditorComponent({
  id: 'iframe',
  label: 'Youtube iframe',
  fields: [{ name: 'id', label: 'Youtube source id', widget: 'string' }],
  pattern:
    /<div class="w-container"><iframe src="https:\/\/www\.youtube\.com\/embed\/([A-Za-z-_]+)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen><\/iframe><\/div>/g,
  fromBlock(match) {
    return {
      id: match[1],
    };
  },
  toBlock({ id }) {
    return `<div className="w-container"><iframe src="https://www.youtube.com/embed/${id}" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe></div>`;
  },
  toPreview({ id }) {
    return `<div className="w-container"><iframe src="https://www.youtube.com/embed/${id}" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe></div>`;
  },
});

I’ve tried to create a similar soultion which instead of iframe would implement a react component, which already exists across the site. So I would import it into the CMS.js file and return it in toBlock function but this led to error __MANIFEST_PLUGIN_HAS_LOCALISATION__ and blocks access to the actual CMS, the code looked like this:

CMS.registerEditorComponent({
  id: 'golang-checklist',
  label: 'Golang checklist',
  fields: [],
  pattern: /<ChoiceOfGolang \/>/,
  fromBlock() {
    return {};
  },
  toBlock() {
    return <ChoiceOfGolang />;
  },
  toPreview() {
    return 'Choice of Golang';
  },
});

I know I am missing something here but not really sure what. If anyone could assist I would highly appreciate the help.

Hi there! Thanks for your interest in Netlify CMS-- not a trivial question at all!

Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution! Additionally, @tomrutgers has loads of CMS insights and may be able to weigh in here :slight_smile: