Grapesjs: Custom component not pulling through style on first add.

[smik3]

Fiddle replicating the issue: https://jsfiddle.net/gd8mo3e4/1/

I have a custom component for creating a gallery of pdf documents. There's a custom asset manager that opens when the block is dropped into the editor, to allow you to choose the pdf which then changes the thumbnail.

The issue that i'm having is that on a fresh page reload, the first time you drop in a new pdf block, it isn't importing the styles from the model. If you delete it and add in a new block, it does.

You can see this by creating columns, and dropping a pdf block into it.

[pouyamiralayi]

Hi @smik3 what do you mean by unloaded styles? i can not see that from the provided fiddle. it was working fine.

[smik3]

The thumbnail/image which it puts into the editor should be scaling to fit the container. I'm seeing it at original size on first-load, all subsequent block adds correctly fit whichever column they are dropped into. If you look at the export code, you can also see that the first time you drop a block in, it does not update the css. On subsequent blocks it's added

[smik3]

A couple of screenshots demonstrating the behaviour I'm seeing...

[pouyamiralayi]

i guess this is related to this one and probably this one @artf

[artf]

i guess this is related to this one and probably this one @artf

mmm not really

Changing modelThumbElement.setAttributes({"data-gallery":fileName}); to use addAttributes seems to fix it, but I'm not sure what is really happening (I'd expect the "wrong" behavior all the time, not only the first time). I'll investigate on this later

[smik3]

Hmm, yes I can confirm that fixes the issue - I'm guessing the setAttributes function is somehow (but not consistently?) resetting the styles as well, since there are no styles included in the object?

[artf]

I'm guessing the setAttributes function is somehow (but not consistently?) resetting the styles as well

Yes exactly, this is why I'd expect it to reset attributes every time