Skip to content

Custom editor component sometimes not rendered correctly #4976

@p-goetz

Description

@p-goetz

Describe the bug
I have created two custom editor components and defined them inside my admin/index.html. When I use them in an empty page they are getting parsed correctly and don't throw any errors in the Javascript console.
But when I have an empty page and add one of each components sometimes one component won't be rendered correctly and the second component in the page throws a Javascript error.

To Reproduce

  1. Create two components in your ´admin/index.html´:
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>`
    );
  }
});
  1. Add the two components into an empty page:
{{< a >}}TEST{{< /a >}}

{{< b >}}TEST{{< /b >}}
  1. The first component will not be rendered correctly inside the Netlify CMS markdown editor, the second one will (s. Screenshot):
    image
  2. The second component added to the page will create a Javascript error:
remarkShortcodes.js:53 Sent invalid data to remark. Plugin: b. Value: {{< b >}}TEST{{< /b >}}. Data: {"content":"TEST"}
(anonymous) @ remarkShortcodes.js:53

Expected behavior
Both components should render correctly in the markdown editor and no error should be thrown.

Screenshots
See above.

Applicable Versions:

  • Netlify CMS version: 2.10.93
  • Git provider: GitLab
  • OS: Ubuntu 20.04
  • Browser version chrome 88.0.4324.150

CMS configuration

backend:
  name: git-gateway
  branch: master

publish_mode: editorial_workflow
media_folder: "static/img"
public_folder: "/img"

collections:
  - name: "pages"
    label: "Page"
    folder: "content"
    create: true
    fields:
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}

Additional context
One thing that might be interesting is that it depends on both the sequence the editor components are defined in admin/index.html and the sequence in which they are added to the page:

Declaration Sequence Content Sequence Throws JS error correctly rendered
A-B A-B no-yes yes-yes
A-B B-A no-yes no-yes
B-A B-A no-yes yes-yes
B-A A-B no-yes no-yes

So it seems as if the sequence of declaration in admin/index.html and the sequence in the page is the same, both will be rendered correctly by the markdown editor. If this sequence is different, only the second will be rendered correctly.
No matter the sequences it is always the second component in the page that causes the Javascript error.

I am at a loss but would like to know what I can do to avoid this error. At first it seemed to me that this was a random glitch, until I had it tracked down to the above minimal example.

If you need any more information, please don't hesitate to reach out to me. Thank you very much for your support!

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions