Netlify-cms: Widgets don't always render when using registerEditorComponent

Created on 1 May 2020  路  4Comments  路  Source: netlify/netlify-cms

Describe the bug

I have created some custom editor components for modifying content that is rendered in Hugo short codes. I am able to add the custom editor components using the markdown editor, however when I go back to edit the page only some of the editor components are rendered.

To Reproduce

  1. In index.html for the CMS, register a couple custom editor components. (Here is a gist of my index.html)
  2. Create a new content item in the CMS using the custom editor components that were added in step 1. You must add multiple of at least one of the components to trigger this bug. (Here is the content with 3 of the components in my content)
  3. Save the page
  4. Go to edit the page

Expected behavior
The 3 components should render with their editor component, but the second component shows only the code instead of the editor components.

Screenshots
image

Applicable Versions:

  • Netlify CMS version:

    • netlify-cms-app 2.12.11

    • netlify-cms-core 2.25.0

    • netlify-cms 2.10.47

  • Git provider: GitHub
  • OS: OSX Catalina
  • Browser version: Firefox 75

CMS configuration

Some things I've noticed trying to troubleshoot this:

  1. If I remove the last component so there are only two on the page, both render fine. It seems to happen when I have multiple of the same type on the page.
  2. If I change the order of calling registerEditorComponent so that component 2 is registered before component 1, then component 1 is the one that shows the code in the content instead of component 2.
  3. I am receiving some warnings in the console that say Sent invalid data to remark
    image
unconfirmed bug

Most helpful comment

I was able to fix this by ensuring the pattern for be editor component begins with ^.

Pattern where this problem occurs:

pattern: /{{% component_one %}}([\S\s]*?){{%\ component_one %}}/,

Pattern where this problem is fixed:

pattern: /^{{% component_one %}}([\S\s]*?){{%\ component_one %}}/,

All 4 comments

Also seeing this.

Applicable Versions:

Netlify CMS version:
netlify-cms-app 2.12.12
netlify-cms-core 2.26.0
netlify-cms 2.10.48
Git provider: GitHub
OS: OSX Mojave
Browser version: Chrome 81, Firefox 76

CMS Config:

Here

Component Inits:

Here

I was able to fix this by ensuring the pattern for be editor component begins with ^.

Pattern where this problem occurs:

pattern: /{{% component_one %}}([\S\s]*?){{%\ component_one %}}/,

Pattern where this problem is fixed:

pattern: /^{{% component_one %}}([\S\s]*?){{%\ component_one %}}/,

Thank you @Lane !

Had the same problem, can confirm @Lane's fix worked.

Was this page helpful?
0 / 5 - 0 ratings