Custom editor component not parsed correctly (Sent invalid data to remark. remarkShortcodes.js:53)

Netlify CMS
1

Hi,

I am hunting a very weird (in my opinion) behavior with custom editor components in Netlify CMS. To make things simpler to understand I have reduced my problem to the bare minimum, so the names I will be using won’t make sense in themselves.
I have created two very simple editor components for Netlify CMS:

CMS.registerEditorComponent({
  id: "b",
  label: "B",
  fields: [
    {name: 'content', label: 'Content', widget: 'string'}],
  pattern: /{{< b >}}([\s\S]*?){{< \/b >}}/,
  fromBlock: function(match) {
    return {
      content: match[1] ? match[1].trim() : ''
    };
  },
  toBlock: function(obj) {
    return `{{< b >}}\n${obj.content}\n{{< /b >}}`;
  },
  toPreview: function(obj) {
    return (
      `<section class="b">
        ${obj.content}
      </section>`
    );
  }
});
CMS.registerEditorComponent({
  id: "a",
  label: "A",
  fields: [
    {name: 'content', label: 'Content', widget: 'string'}],
  pattern: /{{< a >}}([\s\S]*?){{< \/a >}}/,
  fromBlock: function(match) {
    return {
      content: match[1] ? match[1].trim() : ''
    };
  },
  toBlock: function(obj) {
    return `{{< a >}}\n${obj.content}\n{{< /a >}}`;
  },
  toPreview: function(obj) {
    return (
      `<section class="a">
        ${obj.content}
      </section>`
    );
  }
});

They are basically just parsing two Hugo shortcodes ‘a’ and ‘b’ that can contain text (type string for now, Markdown later).
When I create a simple page in Netlify CMS that contains those two shortcodes I sometimes get Javascript errors and the shortcodes seemingly can’t get parsed (s. example picture).

image
image806×386 10.9 KB

The behavior is weird because it depends on the sequence in which I define the shortcodes in my admin/index.html and the sequence in which they are added to the page.
The behavior is as follows:

  1. Define as A then B, add to page as A then B: both shortcodes get parsed correctly and shown visually in Markdown editor
  2. Define as A then B, add to page as B then A: only second added shortcode (A) is correctly parsed as in image above
  3. Define as B then A, add to page as A then B: similar to 2. with A not parsed, but B is
  4. Define as B then A, add to page as B then A: similar to 1. with bth shortcodes correctly parsed and shown

When I monitor the Javascript console in my browser I always get an error message:

Sent invalid data to remark. Plugin: b. Value: {{< b >}}TEST{{< /b >}}. Data: {“content”:“TEST”} remarkShortcodes.js:53

This error will always be shown for the editor component that is defined later in admin/index.html. In my code example above it will be shown for A.

So the interesting thing is that the editor component that seemingly creates an error will correctly be parsed and shown, but the other one will not, depending on the sequence of definition in Javascript and adding to the page.

Who can help me and tell me what I need to do to get this fixed. I have spent the whole day reducing my examples to that I can pinpoint this behavior and have no clue as to what I can do to make it stop.

Thanks in advance for your support!

2

After a good night’s sleep I have decided to create a bug issue in GitHub for this: Custom editor component sometimes not rendered correctly · Issue #4976 · netlify/netlify-cms · GitHub
So if anyone can contribute I think the right place to do so is there. But I will make sure that any wisdom that comes from here will be added there as well. Thanks for your support!

2 Likes