Add stylables to wrapper type

[antoinematyja]

Hello,

I'm basically trying to do what is asked in this issue: #3287
By default, when the wrapper (body tag) is selected, the styles manager allows to edit the background-color and background (which are defined somewhere in a stylable property).
I would like to add a few properties (for example the font-family, to allow the user to set a global font instead of setting the font on each component having text).

The first answer by the author is mentioning an option to provide to init(), however the API has changed since and I can't manage to get it to work. I tried to provide this to the init function without success:

        domComponents: {
          wrapper: {
            model: {
              defaults: {
                stylable: ['background-color', 'font-family']
              }
            }
          }
        }

I also tried to "recreate" the type with editor.Components.addType('wrapper', ...) (seems wrong but I saw this in another discussion...).
I also tried to update the wrapper type after the init.
I also tried to get the wrapper with getWrapper() and to push a value to its stylable.
None of these worked.

The only way I found is to set an initial value for projectData and to manually set the stylable value of the wrapper in the first frame of the first page.

I searched for examples in pretty much all of the issues of this repository and couldn't find one.

Thanks,

[artf]

Yes, you have to do editor.Components.addType('wrapper', ...) but be sure to do it inside a plugin as this is the right place to extend components.

[antoinematyja]

Thanks, it finally worked 🎉
It seemed quite right to do this in the domComponents attribute of the init argument, but ok let's use plugins 🙂

If anyone else is stuck, here is the working code:

const wrapperPlugin = editor => {
  editor.Components.addType('wrapper', {
    model: {
      defaults: {
        stylable: ['background', 'background-color', 'font-family']
      }
    }
  })
}

const editor = grapesjs.init({
  ...
  plugins: [
    ...
    editor => wrapperPlugin(editor)
  ]
})