Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widgets don't always render when using registerEditorComponent #3682

Closed
Lane opened this issue May 1, 2020 · 5 comments
Closed

Widgets don't always render when using registerEditorComponent #3682

Lane opened this issue May 1, 2020 · 5 comments
Labels
status: unconfirmed type: bug code to address defects in shipped code

Comments

@Lane
Copy link

Lane commented May 1, 2020

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
@erezrokah erezrokah added type: bug code to address defects in shipped code status: unconfirmed labels May 4, 2020
@lougroshek
Copy link

lougroshek commented May 7, 2020

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

@Lane
Copy link
Author

Lane commented May 10, 2020

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 %}}/,

@jeremyzilar
Copy link
Contributor

Thank you @Lane !

@awesomephant
Copy link

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

@pawelbrzezinski
Copy link

Thank you @Lane !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: unconfirmed type: bug code to address defects in shipped code
Projects
None yet
Development

No branches or pull requests

6 participants