Issue #2296Opened September 26, 2019by hellocaio3 reactions

[QUESTION] How to customize StyleManager input components?

Question

The demo version on GrapesJS site has some custom style input components (i.e. opacity slider, "undo" button by the property name...) How is this achieved? Is there anyway I can use them with my own plugin?

Also how do I get my custom sector properties to behave like the buildProps? In my case I have to translate all strings, so I can't use buildProps, but the custom props don't behave like the buildProps does. They are not taking the components attribute initial value on component:selected as the buildProps does, color picker doesn't show onClick and so on.

Answers (1)

artfSeptember 28, 20193 reactions

The demo version on GrapesJS site has some custom style input components (i.e. opacity slider, "undo" button by the property name...) How is this achieved? Is there anyway I can use them with my own plugin?

Those are part of the configuration.

For property clearing use this option

styleManager: { clearProperties: 1 },

The opacity is built using the slider type, here is the part from the source of the demo https://github.com/artf/grapesjs/blob/53cfe888a0ee5d49c43cd4e3fa5daf0b55f8277c/demo.html#L1101-L1108

Also how do I get my custom sector properties to behave like the buildProps? In my case I have to translate all strings, so I can't use buildProps, but the custom props don't behave like the buildProps does. They are not taking the components attribute initial value on component:selected as the buildProps does, color picker doesn't show onClick and so on.

You can translate the strings by extending buildProps Take a look at the demo source

https://github.com/artf/grapesjs/blob/53cfe888a0ee5d49c43cd4e3fa5daf0b55f8277c/demo.html#L1036-L1052

As you see I change the default labels of properties like margin/padding by extending them in properties (using property or id as an identifier). You can also see the flex-width which is totally custom and placed there just to make use of buildProps for other built-in properties

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.