GrapesJS Issues

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

545 issues found

πŸ” typescript
#3142Nov 14, 2020by mohd74693 answers
0 reactions

AssetManager rendering issue

@artf this is the same issue #2760 that has already been addressed before, is this wrong or am i doing? i expected assets not to be shown but they are all visible this is my code and I am using version of "grapesjs": "^0.16.27",

artf

@awais786327 provide a live demo of the issue, please

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, @mohd7469. Great question about AssetManager rendering issue. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for...

#3140Nov 13, 2020by ZeroCoolHacker2 answers
0 reactions

Interactive component in canvas

I am building a quiz builder plugin using grapesjs. I was wondering if we can add a component which is interactive and adds new components when clicked. For example Something like this. When dropped, there are no inputs but when clicked add new field, the input appears. Is it possible? how?

artf

You have to extend the View of your custom component

GJSBlock

Thanks for reporting this, @ZeroCoolHacker. Great question about Interactive component in canvas. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific modul...

#3138Nov 13, 2020by adamwpe2 answers
0 reactions

Prevent <TABLE>from being modified during saving.

Hi All, I'm getting an issue, when saving a custom HTML component (just a table), grapes JS will modify it. before save after save. Is it possible to wrap something around it so it does not get modified? The reason for the problem is that I'm using twig (a templating language) to dynamically create the table, and afte...

adamwpe

Replace with #3139

GJSBlock

Thanks for reporting this, @adamwpe. Great question about Prevent <TABLE>from being modified during saving.. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...

#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...

#3136Nov 11, 2020by vijaycreatise4 answers
2 reactions

Create one more key in JSON

{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": false } In JSON I want add new key with object. Example data key this will have custom Traits. I want to add new object from where data can be fetch and populate the output. Can I do...

longdoan7421

Sorry I misunderstood your problem, so my previous comment was not relevant. To achieve your desire, you need create your own trait type (docs) and component type (docs). There is an easier way but it can not save all your custom data as a...

longdoan7421

I'm not sure if I get your problem. But if you set any custom attributes to component model (except some preserve keys like components, styles, ...) e.g: component.set('customTraits', yourCustomTraits);. It would be in JSON data.

vijaycreatise

I tried like this, but it is not working. I want to add data key and object in JSON, when user select form they can enter API url. Can you please check am I doing correctly?

#3132Nov 11, 2020by tranthanhhoa1 answer
0 reactions

Trait with [type ="number"] not working

Version: 0.16.27 Summary: Trait with [type ="number"] not working Steps to reproduce: Try to type something such as "abc" for a trait which type is "number" Expected: Don't accept the string Actual: Still accepts the string

GJSBlock

Thanks for reporting this, @tranthanhhoa. Thanks for sharing your report about Trait with [type ="number"] not working. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle)...

#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?

#3129Nov 10, 2020by lebonsavane2 answers
0 reactions

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3"

I tried to install new version but in my package.json nothing moves. It's on a plugin called "blocks avancΓ©es" of grapesJs but i have this issue on every folder when i try to run the code " ERROR in ../src/dom_components/view/ComponentFusionView.js Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded...

artf

ComponentFusionView? That is for sure not from the main grapesjs core, we don't have that component... Probably you're using some kind of modified version, so that might be the reason behind that error

GJSBlock

Thanks for reporting this, @lebonsavane. The error Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading t...

#3128Nov 10, 2020by sprklinginfo2 answers
0 reactions

Drop a component at the position of the mouse is clicked

What are you trying to add to GrapesJS? When a component is dropped, stay at the position of the mouse is clicked. Describe your feature request detailed I start playing with some basic blocks/components. If I drag and drop a component, e.g, a simple text input, it looks like they snap to the last active component by...

sprklinginfo

found out that is already implemented by using "dragMode: 'absolute'" . thanks.

GJSBlock

Thanks for reporting this, @sprklinginfo. Great suggestion about FEAT: Drop a component at the position of the mouse is clicked! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Usi...

#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