Skip to content

Custom editor components with pattern field crash when calling setInactiveStyle #4892

@Pearce-Ropion

Description

@Pearce-Ropion

Describe the bug

Markdown editor components whose field's have a pattern option will crash the UI when calling setInactiveStyle due to a call to this.props.onValidate within the this.validate function on the Widget component.
https://github.com/netlify/netlify-cms/blob/30c11954d586c43a00c8c61fa467873bfe1ed1fc/packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js#L129

The error that occurs is this.props.onValidate is not a function

The prop onValidate is not a required prop. It should either have a default value or be wrapped in an if statement:

if (this.props.onValidate) {
  this.props.onValidate(errors);
}

The issue occurs because the markdown editor component's component (Shortcode) does not pass an onValidate function to the EditorControl.
https://github.com/netlify/netlify-cms/blob/89848e034451baed52fb8911d3778a2f469462f8/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js#L37

To Reproduce

  1. Add a custom editor component with a field that has a pattern.
  2. Add the custom editor component to the editor component list of a markdown field.
  3. From the editor component dropdown, select your custom editor component
  4. Insert some data into the field with the pattern
  5. De-focus the input
  6. Should crash (for some reason this takes a second or 2)

Expected behavior

Using a custom editor component with a pattern option on a field should not crash the UI. Ideally, the onValidate function should not be called if it doesn't exist.

Applicable Versions:

  • Netlify CMS version: 2.14.3 (netlify-cms-app)
  • Git provider: Gitlab
  • OS: Linux Debian 10
  • Browser version: Chrome 87
  • Node.JS version: 10

CMS configuration

The full config.yml is too large to efficiently show/link to. Ive included a custom editor component that is causing errors
https://gist.github.com/Pearce-Ropion/6d806e98c30206639e43e7ceb7a28e05

Additional context

My guess is this error is caused by other dynamic widgets too. But I only followed the code for editor components.

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