-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Description
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
- 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>`
);
}
});
- Add the two components into an empty page:
{{< a >}}TEST{{< /a >}}
{{< b >}}TEST{{< /b >}}
- The first component will not be rendered correctly inside the Netlify CMS markdown editor, the second one will (s. Screenshot):
- 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!