BUG: parseStyle is not a function

[ahmafi]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 104.0.1

Reproducible demo link

https://codesandbox.io/s/grapesjs-parsestyle-bug-13h771

Describe the bug

How to reproduce the bug?

1. Create a custom component with style property in it's model.
2. Use this.addAttributes in the component model init function.
3. Add that component to the editor.

Basically, using this.addAttributes when I have a style property in my component model definition, I get this problem.

I had the same issue on v0.19.4 too.

You can see the following error in browser.

TypeError: this.parseStyle is not a function
    value Component.js:499
    value Component.js:407
    Backbone 5
    value Component.js:425
    value Component.js:437
    init tabs-content.jsx:20
    value Component.js:174
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    r Backbone
    value Components.js:151
    Backbone 3
    value Components.js:197
    value Component.js:909
    value Component.js:169
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    r Backbone
    value Components.js:151
    Backbone 3
    value Components.js:197
    value Component.js:909
    value Component.js:169
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    r Backbone
    value Components.js:151
    Backbone 3
    value Components.js:197
    value Component.js:909
    value Component.js:169
    Model Backbone
    v bundle.js:27066
    n StyleableModel.js:7
    E bundle.js:24773
    n bundle.js:24799
    he bundle.js:45517
    n bundle.js:45529
    e Frame.ts:55
    s Page.ts:29
    e Page.ts:26
    model Pages.ts:13
    Backbone 4
    loadProjectData Module.ts:164
    load index.ts:285
    O Editor.ts:721
    loadData Editor.ts:720
    O Editor.ts:703
    s bundle.js:50594
    s bundle.js:50606
    a bundle.js:50495
    promise callback*l bundle.js:50513
    v bundle.js:50516
    v bundle.js:50492
    load bundle.js:51037
    loadOnStart Editor.ts:209
    s bundle.js:50594
    s bundle.js:50606
    v bundle.js:50516
    v bundle.js:50492
    loadOnStart Editor.ts:204
    setTimeout handler*./node_modules/grapesjs/dist/grapes.min.js/</n.prototype.loadOnStart Editor.ts:199
    init index.js:76
    FormBuilder FormBuilder.jsx:27
    React 8
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    factory react refresh:6
    Webpack 18

Object { level: "error" }
backbone.js:370

If is necessary to execute some code in order to reproduce the bug, paste it here below:

import grapesjs from "grapesjs";
import "grapesjs-blocks-basic";

const customPlugin = (editor) => {
  editor.DomComponents.addType("custom", {
    model: {
      defaults: {
        tagName: "div",
        name: "Custom",
        style: {
          "min-height": "64px"
        }
      },
      init() {
        this.addAttributes({
          role: "tabpanel"
        });
      }
    }
  });
};

const editor = grapesjs.init({
  container: "#gjs",
  fromElement: 1,
  storageManager: { type: 0 },
  plugins: [customPlugin]
});

editor.addComponents({ type: "custom" });

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[Singwai]

This is behaving as expected. There are two similar keys that can alter the style of the component. (styles and style)

styles takes a CSS string and is attached to the final payload once. I usually define the default CSS or default CSS with a specific state for the component.

style takes a CSS hash and will attach to that specific component directly with the id.

You can export the HTML and see how they behave.

Here is the related document:

https://grapesjs.com/docs/api/component.html#component

[artf]

I guess parseStyle is not a function refers to this one already fixed: https://github.com/artf/grapesjs/pull/4520