GrapesJS Issues

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

466 issues found

πŸ” components
#3143Nov 15, 2020by sprklinginfo2 answers
0 reactions

Hide toolbar for inner components

By default, when a component is selected, the toolbar is displayed with 'move, copy, delete' etc actions, it is set with ' showToolbar: 1' option. When I define a custom component which may have several inner components, I want to hide the toolbar for those inner components. I don't want to hide it globally in grapesj...

artf

When you define the component, you can customize the toolbar array

GJSBlock

Thanks for reporting this, @sprklinginfo. Thanks for sharing your report about Hide toolbar for inner components. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your...

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

#3139Nov 13, 2020by adamwpe3 answers
0 reactions

Disable <table> being auto amended during save

I'm getting an issue, when saving a custom HTML component (just a table), grapes JS will modify it. before save after save. So I want to be able to insert a table like because I would like to intergate it with twig (a templating language) : I believe it is linked to #606, but I can't see if that helps this problem I'm...

adamwpe

Ah, If I use this https://github.com/artf/grapesjs-custom-code, it does not amend the html during saving. This will not work when using 'gjs-preset-newsletter'. Since if you run command 'gjs-get-inlined-html' then it amends the code. E.g....

artf

You can't insert invalid HTML. If you need to handle stuff like that, you have to create a custom component which then will output the custom code.

GJSBlock

Thanks for reporting this, @adamwpe. Great suggestion about FEAT: Disable <table> being auto amended during save! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event sy...

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

#3135Nov 11, 2020by archerbj4 answers
3 reactions

How to easily override existing component ?

For example, I want to add a double click event handler on the default video component to open the assets manager. My basic idea was to get the view definition of the video component and add events + handler. At last, set it back to the video component. Unfortunately, this idea failed in the first step. v.View() gives...

Joshmamroud

@archerbj here's a demo of what you're looking for: https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js You want to attach the functionality to the component type itself rather than trying to find all instances of that component and...

archerbj

@archerbj here's a demo of what you're looking for: https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.jsYou want to attach the functionality to the component type itself rather than trying to find all instances of that component and...

abulka

@Joshmamroud Thanks for that running example. Yours is the only example I can find of using the extend feature mentioned in the documentation. Your example is very simple and zen - however it merely shows adding a dblclick handler to the v...

#3134Nov 11, 2020by josfh20054 answers
0 reactions

Canvas scroll to top of the page when I try to drag an element from the last sections

Version: 0.16.27 Are you able to reproduce the bug from the demo? [ X] Yes [ ] No What is the expected behavior? When a try to drag a component the canvas should not scroll to the top of the page. Describe the bug detailed Whenever I try to drag a component that is in the last sections of the page, the canvas scroll t...

artf

Hi JosΓ©, are you able to provide a screencast of your issue? I've tried to drag the last section of the template but seems all good to me

josfh2005

Hi @artf , You can check it out here https://recordit.co/vn1ZVN6J1N, is not with the sections, it happens with any element but only the first time I try to drag something.

artf

Ah ok, only the first time, I've got it now on my side too πŸ‘

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

Browse all topics