Custom component not pulling through style on first add.
Question
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.
Answers (3)
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
A couple of screenshots demonstrating the behaviour I'm seeing...
<img width="1021" alt="Screen Shot 2019-11-06 at 11 32 16" src="https://user-images.githubusercontent.com/19346508/68294968-394ba600-0089-11ea-941a-e441d3469c6f.png"> <img width="1003" alt="Screen Shot 2019-11-06 at 11 32 33" src="https://user-images.githubusercontent.com/19346508/68294986-3fda1d80-0089-11ea-8be3-323152923b73.png">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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4592
BUG: Textable Component becomes Noneditable when dropped in a Text Block
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 104.0.5112.102 Reproducible demo link http...
Issue #4015
BUG: Drag and drop not working well in case of RTL
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link https://...
Issue #3525
FEAT: In Style Manager, Allow Requiring the Default Setting
What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the def...
Issue #4754
BUG: Closing `</script>` tag not escaped for script properties
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 107.0.5304.122 (64-bit) Rep...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.