Skip to content

Use of custom editor component causes console warning "Invalid data sent to remark." #5766

@Healios

Description

@Healios

Describe the bug
I have made a custom editor component called "YouTube". It is possible to add multiple YouTube videos to this component.
Youtube editor component

The first time you add the component to a post it works fine, - you can add and remove YouTube videos to your hearts desire.

The issue arises when you want to modify the list of YouTube videos. When loading the editor component a warning is printed in the console, and then when using the Netlify CMS UI to add a new YouTube video, the preview disappears and the add button stops working completely.

I am able to manually add another YouTube video via markdown editing, but that isn't exactly user friendly.

To Reproduce
You can find the repository here: https://github.com/Healios/netlify-cms-add-issue

Steps to reproduce the behavior:

  1. Go to the "News" collection.
  2. Click on the news piece "11/08/21 Demo Title".
  3. See error:

Sent invalid data to remark.

Plugin: youtube. Value: `youtube https://www.youtube.com/watch?v=kpSwmLlMu9E title image /uploads/paid.png alt awdawdawdawdawdawdawd placement Center end youtube https://www.youtube.com/watch?v=kpSwmLlMu9E title undefinedimage /uploads/paid.png alt awdawdawdawdawdwadawdsgsesef placement Center end`.

Data: [{"youtube":"https://www.youtube.com/watch?v=kpSwmLlMu9E","title":"","image":"/uploads/paid.png","alt":"awdawdawdawdawdawdawd","placement":"Center"},{"youtube":"https://www.youtube.com/watch?v=kpSwmLlMu9E","title":"undefined","image":"/uploads/paid.png","alt":"awdawdawdawdawdwadawdsgsesef","placement":"Center"}]

  1. Scroll down to the "Content" field.
  2. Click the "Add youtube video" button.
  3. See YouTube video placeholders disappear from preview.

Expected behavior
I expected another YouTube video editor to be added to the editor component, and another YouTube video placeholder to be shown in the preview pane.

Screenshots
Example

Applicable Versions:

  • Netlify CMS version: 2.10.139
  • Git provider: GitHub
  • OS: Ubuntu Xenial 16.04
  • Browser version: Brave 1.28.106
  • Node.JS version: 12.18.0

CMS configuration
https://github.com/Healios/netlify-cms-add-issue/blob/master/static/admin/config.yml

Additional context
I am using Gridsome.

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