There is no display plugin...

[justin3737]

hi @artf thank you for doing everythings here but I try to use this plugin but I can't demo https://jsfiddle.net/e4pbsgm0/

[mmotov]

@justin3737 did you managed to solve this? I have the same issue

[ronaldohoch]

Same here!

[ronaldohoch]

I don't know why, but in the index.html from repo's root folder, it has this code:

      editor.StyleManager.addProperty('extra', [{
        name: 'Background',
        property: 'background',
        type: 'bg',
      }]);

Also, in the https://grapesjs.com/demo.html we have these config, inside

'gjs-preset-webpage': {
   ... some configs
   customStyleManager: [{
      ...A lot of other configs
      {
         name: 'Decorations'
         properties: [{...},{...},
            {
               id: 'background-bg',
               property: 'background',
               type: 'bg',
            }
        ]
    }]
}

So... I think we have to configure like it.

But, doing this... We get 2 background configurations in style panel, i'm looking to remove the other background from styles. If i got some updates, i'll put it here.

[ronaldohoch]

So, @artf can say if i'm wrong, but, we can do it:

editor.StyleManager.removeProperty("decorations","background-bg")
editor.StyleManager.addProperty('extra', [{
  name: 'Background',
  property: 'background',
  type: 'bg',
}]);

[mmotov]

@ronaldohoch thanks for sharing, that helped!

[bernhardmiller]

I also had this problem, and managed to make it work with a configuration like this:

styleManager: {
        // ...
        sectors: [{
            // ...
            buildProps: [
                "background-bg", // ...
            ],
            properties: [
                // ...
                {id: 'background-bg', name: 'Background', property: 'background', type: 'bg' },
            ],
        }],
    },

[artf]

The new version should be easier to use as it extends the built-in background property.