[BUG] Wrong stylemanager options first time a component/block is selected

Question

Hello,

I have noticed the following buggy behaviour on the style manager:

Using a local copy of GrapesJS (ver 0.14.5) . Tested in Chrome and Firefox both in Win10 and OSX
GrapesJS is initialized and components are loaded through the loadComponents. (for example here's the JSON I used in the demo, where I load an image component [{"tagName":"img","type":"image","name":"","removable":true,"draggable":true,"droppable":true,"badgable":true,"stylable":["width","height","align","padding","padding-top","padding-left","padding-right","padding-bottom"],"stylable-require":"","unstylable":"","highlightable":0,"copyable":true,"resizable":false,"editable":true,"layerable":true,"selectable":true,"hoverable":true,"void":true,"state":"","status":"selected","content":"","icon":"","style":{},"attributes":{},"classes":[{"name":"mc-component","label":"mc-component","type":1,"active":true,"private":false,"protected":false},{"name":"mc-image","label":"mc-image","type":1,"active":true,"private":false,"protected":false},{"name":"mc-image-ofdstkjfe","label":"mc-image-ofdstkjfe","type":1,"active":true,"private":false,"protected":false}],"script":"","traits":[{"type":"imagesrc","label":"Image","name":"src","min":"","max":"","unit":"","step":1,"value":"http://cmsguide.info/application/files/7515/0342/6820/grapesjs.jpg","default":"","placeholder":"Fill in an image URL","changeProp":0,"options":[]}],"propagate":"","file":"","components":[]}]
When I click on the image component the style manager shows "General", "Dimensions","Typography","Decorations","Extra" style categories should not be presented.
After that I just click on another component (for example the "Body" - wrapper) component
I re-click on the image component and the style manager shows only "Dimension" which is the expected behaviour.

You can see for yourself in the attached animated gif (please ignore the animation for the style manager, this is made only using CSS)

Answers (3)

artf• February 18, 20180 reactions

Hi @chthomos and thanks for the issue, but are you able to provide a live demo of this bug (eg. via jsfiddel)? I've just tried this on the public demo and it worked as expected

editor.addComponents(`
	<div style="color:red; padding: 50px 100px" data-gjs-stylable='["width"]'>
        Text
     </div>`, 
{at: 0});

chthomos• February 26, 20180 reactions

Sorry for the late reply. I am working on a fiddle for this so you can replicate.

artf• March 1, 20180 reactions

@chthomos good, I close this then for now and reopen when the fiddle is available

[BUG] Wrong stylemanager options first time a component/block is selected

Question

Answers (3)

Related Questions and Answers

[QUESTION] Is it possible to affect child component's styling through parent component's style manager?

[Bug]: Body -> Decorations -> Background-image

Apply changes in style mager to one class

[QUESTIONS] addcomponent after the selected component

Paid Plugins That Match This Issue

Browse Plugin Categories