GrapesJS Issues

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

336 issues found

πŸ” style-manager
#3170Dec 7, 2020by ThetripGr3 answers
0 reactions

Add class name from traits

Hello, what i am trying to achieve is to have the text component extended by assigning an extra trait named Alignment and deciding through the trait the kind of alignment i wish to do, after that no css should be applied but the appropriate class name should be given to the component. Is there an example of how i coul...

ThetripGr

So i got it working after some more tries, i will try to explain how i got it to work. When you define the trait you can declare a name. When you select option A from the dropdown selection you can track this change on init(), as this.on('...

artf

sry for the formatting but i do not know how to paste formatted code yet :P https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown

GJSBlock

Thanks for reporting this, @ThetripGr. Great question about Add class name from traits. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look f...

#3168Dec 6, 2020by oleteacher3 answers
0 reactions

Download / Export images - Love to use in classroom project

What are you trying to add to GrapesJS? Ability to export images / images folder in zip download Describe your feature request detailed GrapeJS would be an excellent tool in which grade school children use to create their own about me page. Not sure how difficult it would be to add ability to include image folder in z...

artf

Hi @oleteacher doing something like that, is not entirely possible due to security restrictions in browsers (eg. when the image is downloaded from another domain). You would need a server process that generates images for you.

oleteacher

Yes, we have a local server for the classroom. We just do not have our own IT support to help with things like this, very small school Sorry to have bothered you.

GJSBlock

Thanks for reporting this, @oleteacher. Great suggestion about FEAT: Download / Export images - Love to use in classroom project! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Us...

#3161Nov 27, 2020by ssmanoj-grapes4 answers
0 reactions

Editor Undo is removing collection and unable to replace the component

The collection of the selected component before Undo The collection of the selected component after Undo Code to replace the component with new component Uncaught TypeError: n.getEl is not a function and Uncaught TypeError: t.getSelectors is not function are the errors reported on save. I’m unable to replace the selec...

artf

Sorry, but without a reproducible demo, this issue doesn't make sense to me

ssmanoj-grapes

Hi artf, Please find the demo video of the issue grapejs-issue.zip.

artf

Ok, as you're not able to create a reproducible demo, I have to close this...

#3155Nov 24, 2020by Abhisheknanda13444633 answers
0 reactions

Adding Animations

hi @artf I want to include animation on all the blocks Here is some snippet of code but it's not working Could you please help me here Thanks

artf

You forgot changeProp: 1 on the animation trait

Abhisheknanda1344463

@artf Without giving the animation name it's not working. Should i need to add css rule for this Any suggestion.Please?

GJSBlock

Thanks for reporting this, @Abhisheknanda1344463. Thanks for sharing your report about Adding Animations. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS...

#3152Nov 23, 2020by fq-selbach4 answers
2 reactions

The blue outline (gjs-hovered) is not following its parent during scrolling

Version: 16.27 Are you able to reproduce the bug from the demo? [x ] Yes [ ] No Describe the bug: I discovered an issue with gjs-hovered, the class that handles the mouse-hover outline for elements. Sometimes the blue outline will move relative to its parent during scrolling . Check out this JsFiddle (and scroll with...

lofcz

Would be nice to have this fixed, not the end of the world, but mildly annoying.

matteocollina

any news?

artf

I'm closing this one as it was actually already fixed, indeed the old demo is working now properly. You might still face the issue if your editor is placed in a scrollable container, in that case, use this option please: https://github.com...

#3151Nov 23, 2020by theSC0RP2 answers
2 reactions

Position of selector manager.

Hi, @artf. I was going through the getting started guide and the selector manager is placed below the style manager. How do I position the selector manager above the styles manager?

artf

As you can see from the example Both of them append the element inside the same container. You can simply create different containers

GJSBlock

Thanks for reporting this, @theSC0RP. Great question about Position of selector manager.. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look...

#3144Nov 17, 2020by antman33512 answers
0 reactions

Swap default factories

Hello, I'm using GrapesJs to template HTML for printing so I need the measurements in mm. Is there a way to swap the default factory in the StyleManager? maybe pass it in the options? Thanks, Antonio

artf

No, you can't, you just need to configure your properties in the StyleManager configuration (example configuration can be found here)

GJSBlock

Thanks for reporting this, @antman3351. Great question about [Question] Swap default factories. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific modul...

#3137Nov 12, 2020by Asha15973 answers
0 reactions

When I select an particular element I'm not getting its styles. This issue happens only with some elements.

Not getting styles of the selected element Here is my code, const model = editor.StyleManager.getModelToStyle(component); let styleObject = model.getStyle(); console.log("styles", styleObject) Version: 0.14.49 Are you able to reproduce the bug from the demo? [X] Yes [ ] No What is the expected behavior? When an elemen...

artf

First of all, you need to upgrade your grapesjs version (you're using a 2 years old one), then you have to provide a live demo of the issue.

no-response[bot]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...

GJSBlock

Thanks for reporting this, @Asha1597. The issue with When I select an particular element I'm not getting its styles. This issue happens only with some elements. appears to be a race condition or state management timing problem. This typica...

#3131Nov 11, 2020by Joshmamroud4 answers
0 reactions

Paste as plain text into Text component adds <font /> wrapper to pasted text

Version: 0.16.27 Are you able to reproduce the bug from the demo? [] Yes [X] No What is the expected behavior? Paste as plain text (text node) without Grapes JS wrapping pasted text in <font /> element. What is the current behavior? When I paste text as plain text into an empty Text element, the editor wraps it in a <...

Joshmamroud

@artf do you know if this is this happening in the component or the RTE or somewhere else? Could you please point me in the right direction? Any help on this would be greatly appreciated. Thanks!

artf

I can't reproduce it, but I see you're using a custom dm-text component, so that might be a reason?!

Joshmamroud

@artf I don't believe so. Here is the configuration of the dm-text component type Do you see anything here that might be causing it?

#3125Nov 9, 2020by fq-selbach3 answers
0 reactions

Linear-gradient CSS does weird things to background-image

Version: 0.16.27 Are you able to reproduce the bug from the demo? [x] Yes [ ] No What is the expected behavior? When adding background-image via Style Manager it show as background-image: url(...);. What is the current behavior? Instead of background-image:url(https://grapesjs.com/docs/logo.png); you will get backgrou...

johnkeel-thork

Was about to report the same problem. Added Image as background: <img width="847" alt="Screenshot 2021-12-23 at 12 06 51" src="https://user-images.githubusercontent.com/26764290/147238562-8df3ea2a-aca7-4b08-9d64-73fd1495d699.png"> Its bein...

artf

Closing as from the same jsfiddle the issue seems to be solved

GJSBlock

Thanks for reporting this, @fq-selbach. The issue with linear-gradient CSS does weird things to background-image appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and...

Browse all topics