GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

3,464 issues found

#3509Jun 1, 2021by theSC0RP2 answers
1 reactions

How to programmatically change componentFirst?

Hey @artf, I was trying toggle between using ids and classes for styling so I need to change the componentFirst attribute programmatically. But when I try to change the config, the behaviour doesn't change. This isn't working even in the demo. Steps to reproduce:Add two text blocksGive them the same class name.In the...

artf

You have to retrigger the selection after changing that option editor.trigger('component:toggled')

GJSBlock

Thanks for reporting this, @theSC0RP. Great question about How to programmatically change componentFirst?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your speci...

#3508Jun 1, 2021by tranthanhhoa2 answers
0 reactions

Layer visibility does not work properly

Version: 0.17.4 How to reproduceSwitch to tablet or mobile modeHide the selected component by toggling the visibility icon of LayerSwitch to desktop mode. ResultThe visibility icon is still disabled while the hidden components is showing. ExpectedAfter switch to desktop the visibility icon is enabled.

artf

Thanks for the report @tranthanhhoa I'll fix it in the next release, but I think I'll keep the visibility change more like a global condition, so the hidden component won't be visible on all devices.

GJSBlock

Thanks for reporting this, @tranthanhhoa. Great question about Layer visibility does not work properly. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

#3507Jun 1, 2021by cedriclajato2 answers
0 reactions

No Generated ID and No auto select ID

Hi Guys, I am using grapesjs-blocks-bootstrap4 and I check how they component it's looks fine. But when you select block like container it targets the class instead of Unique ID. I was able to setup random ID using this model.set('attributes', { id: randomID() }); but still when you select the block it targets the cla...

artf

https://github.com/artf/grapesjs/issues/2936#issuecomment-680322089

GJSBlock

Thanks for reporting this, @cedriclajato. Thanks for sharing your report about No Generated ID and No auto select ID. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Y...

#3506May 31, 2021by iabhiyaan3 answers
5 reactions

Add click event on blocks

Or Is there any way to listen for click event in block ?

artf

Well you can actually make use of custom render from blocks to apply custom DOM events.

YyueeiWY

<pre> editor.on('component:selected', (some, argument) => { console.log(some, argument); }) </pre> https://grapesjs.com/docs/api/editor.html#available-events

GJSBlock

Thanks for reporting this, @iabhiyaan. Great question about FEAT: add click event on blocks. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look...

#3504May 31, 2021by snowballrandom2 answers
0 reactions

I noticed that an earlier version of font awesome version 4.7 is being used.

I noticed that an earlier version of font awesome version 4.7 is being used. I use version 5.2 of fontawesome and it seems to cause issues when loaded alongside the version used with Grapes JS some of the fonts are not loading or class names have changed in the new fontawesome character set. How can I use the newer ve...

artf

You can change this option on init: https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/editor/config/config.js#L165-L168

GJSBlock

Thanks for reporting this, @snowballrandom. Great question about *. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event listen...

#3500May 28, 2021by vijayshukla302 answers
0 reactions

Remove custom trait by its type.

I have created a custom trait but the name of that trait will be dynamic which is unknown. The problem is that the current removeTrait() only works with name/id. But what if I want to remove all traits from the component with custom-trait. Ex: I create a trait 'my-custom-trait' and bind it to the component. component....

artf

You can use of the ID

GJSBlock

Thanks for reporting this, @vijayshukla30. Thanks for sharing your report about Remove custom trait by its type.. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your...

#3497May 28, 2021by mosh-tudor2 answers
1 reactions

Button trait command doesn't work

Version: LatestDescribe the bug detailed https://jsfiddle.net/cleaver/wgz2jsvq/2/ Nothing happens on: --- On version 0.16.45 the same code worked fine: https://jsfiddle.net/cleaver/kenvpt50/1/

artf

Thanks for the report @tudor-ooo will be fixed in the next release

GJSBlock

Thanks for reporting this, @mosh-tudor. The issue with Button trait command doesn't work appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overla...

#3496May 28, 2021by anlumo4 answers
1 reactions

Mark Component as Dirty

What are you trying to add to GrapesJS? Component should be able to mark themselves as dirty, triggering the onbeforeunload warning message. Describe your feature request detailed I have a (custom) text component where the user can enter arbitrary text. I'm storing the data on my server, and I want autosave. However,...

anlumo

I worked around this by completely disabling the onbeforeunload handling and rolling my own.

artf

The editor has editing property which changes any time RTE is enabled/disabled, so I guess, in your case, this should work

anlumo

Wouldn't this onbeforeunload handler be overwritten afterwards by the snippet I referenced above?

#3492May 27, 2021by iabhiyaan2 answers
0 reactions

InsertAdjacentHTML('afterend', '<section></section>') . Is there any api like this in grapesjs ?

Is there any way to add new section after the selected component using grapesjs ?

artf

You can do it in this way:

GJSBlock

Thanks for reporting this, @iabhiyaan. Great question about FEAT: insertAdjacentHTML('afterend', '<section></section>') . Is there any api like this in grapesjs ?. The recommended approach with Components is to use the event-driven API. St...

#3491May 27, 2021by TheDude702 answers
0 reactions

Iframe does not save src / does not recognize iframes after load

Version: 0.17.4 Are you able to reproduce the bug from the demo?[ ] Yes[X] No What is the expected behavior?After inserting an iFrame that the src will be returned when using editor.getHTML()When loading a page that iframes will be recognized as iframe component and become editable again Describe the bug detailed Am a...

artf

I'll add iframe support in the next release

GJSBlock

Thanks for reporting this, @TheDude70. The issue with iframe does not save src / does not recognize iframes after load appears to be a race condition or state management timing problem. This typically happens when component lifecycle event...

Browse all topics