Having trouble with custom Netlify widgets

I’d like to make some custom widgets for Netlify CMS. I’m using webpack/eleventy.
The problem I’m having is, once I save the entry or switch from Rich Text/Markdown the widget UI stops working.

This is a dummy example. Let’s say I have two fields and I want to output some HTML from it.

CMS.registerEditorComponent({
  id: "header",
  label: "header",
  fields: [
    { name: 'heading', label: 'heading', widget: 'string' },
    { name: 'text', label: 'text', widget: 'string' }
  ],
  // This is a dummy regex pattern
  pattern: /^.*>$/,
  // I need to return the matching fields from the toBlock function.
  fromBlock: function (match) {
    return {
      heading: match[1],
      text: match[2]
    };
  },
  // What renders on the block editor
  toBlock: function (obj) {
    return `<h1>${obj.heading}</h1>\n<p>${obj.text}</p>`;
  },
  // What renders on the preview window
  toPreview: function (obj) {
    return `<h1>${obj.heading}</h1>\n<p>${obj.text}</p>`;
  }
});

The regex pattern is not always going to work for more complex widgets with 3-5 different elements, this could be text or images.

Is there a way to do something like this instead

  fromBlock: function (obj) {
    return {
      heading: obj.heading,
      text: obj.text
    };
  },

Am I just doing things the wrong way?. I’d appreciate your input a lot.

i couldn’t get this working either. it would be great if there were a couple more examples on github we could look at to figure out how this works.

Hi @brandonjhz and welcome to the community :slight_smile: Sorry for the late reply.

Since editor components are meant to be able to parse raw markdown files the pattern should be able to extract the fields from the raw content file.

There is a bit more complex example with 3 fields here:

@brandonjhz and @solomonpierce, can you share an example that isn’t working? e.g. share a content of a markdown file, the block that should be generated and parsed and the fields that you configure