GrapesJS Issues

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

466 issues found

πŸ” components
#3175Dec 9, 2020by mcottret2 answers
0 reactions

Selection & active RTE not cleared when component is removed programatically

Version: 0.16.30 Are you able to reproduce the bug from the demo? [x] Yes [ ] No Steps to reproduce:Select a text component in the demo's canvasThe selection box & RTE appearOpen the consoleExecute editor.setComponents('');The component is removed, but the selection box & RTE are still present (see attached screenshot...

artf

Thanks @mcottret for the report. I've handled this on my side, so it should be fixed in the next release, but as always, thanks for your willingness to help :)

GJSBlock

Thanks for reporting this, @mcottret. The issue with Selection & active RTE not cleared when component is removed programatically appears to be a race condition or state management timing problem. This typically happens when component life...

#3174Dec 9, 2020by ThetripGr2 answers
1 reactions

Creating a new component type does not inherit the functions of it's parent type

Hello, I am trying to create a new common trait shared among all components by creating the following plugin on another plugin file I am also creating a new component type same way following the docs, called extendedText which uses the text type as it's basis. While the text type has the handleBgColorChange() as shown...

ThetripGr

nvm , I revisited the docs more carefully, I somehow missed this about extending parent functions

GJSBlock

Thanks for reporting this, @ThetripGr. Great question about Creating a new component type does not inherit the functions of it's parent type. The recommended approach with Components is to use the event-driven API. Start here: Check the Gr...

#3172Dec 8, 2020by theSC0RP2 answers
0 reactions

How to track the updates of components down the tree?

Hi, @artf. I have a few questions regarding component lifecycle hooks. In my application, I want to track the updates to all the children of a component and their children, and so on. How should I do it?Updates on immediate children are tracked by the model.updated() hook but I need to track the updates to a component...

artf

I'd create a specific listener on the parent then I'd trigger that event from the child

GJSBlock

Thanks for reporting this, @theSC0RP. Great question about How to track the updates of components down the tree?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for you...

#3171Dec 7, 2020by skbhagat404 answers
0 reactions

Adding / Updating href trait does not add `<a></a>` wrapper to image.

Expected Behavior - when I update href trait value, the image should be wrapped inside a with href value set. i.e. <a href="google.com"><img src="/></a> Current behavior = no change is reflected Here's code for adding trait The above function is triggered on double click, Please help me how do I add href to image dyna...

skbhagat40

It's not working, even if I do `selectedElement.getTrait('href').set({value: 'fb.com', target: '_blank'})

skbhagat40

I think the component view is not getting updated, if I repeat the action, it is rendering a tag with previous value.

skbhagat40

It works if I update href in the attributes

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

#3166Dec 1, 2020by nanaya14 answers
0 reactions

Problem with copy and paste a node

*Version:0.16.27 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? In the right panel and canvas, the pasted node should be after the copied node. What is the current behavior? I copy a node. In the views-container(right panel), the pasted node is after the copied node. But...

artf

I've tried locally but the node is placed correctly. Are you able to create a live demo, please?

nanaya1

Sorry, I did not elaborate on the scenario where this error occurred. The components that come with grapesjs do not produce this error, because they donβ€˜t have spaces,carriage returns or tabs. I found this problem while customizing compone...

nanaya1

@artf I accidentally closed the issue.

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

#3160Nov 27, 2020by congweibai2 answers
0 reactions

Add toggle-move label in custom setting panel in Vue

Version: ^0.16.18 This question is intended to extract layer moving function to custom one. I only want to given components could be seen in this components, and children components could be reorder in the panel. Assume these components are in same level. My code will be like this: I have seen reorder can be happened...

artf

No, in this case, you have to handle the sorting on your side

GJSBlock

Thanks for reporting this, @congweibai. Great question about [Question] Add toggle-move label in custom setting panel in Vue. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documenta...

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

#3153Nov 23, 2020by excitedbox2 answers
0 reactions

Adding Dynamic Data Blocks

I am considering doing this one myself and as this has been requested so often I wanted to ask if this is already being worked on and if not maybe people would like to give some input. The way I picture it working is kind of like a form with a container block where you define the data source, method (post/get) for get...

artf

This kind of things could be done via plugins but I can't reply to your questions, are totally off-topic and it's up to your knowledge find the right answer (maybe try to ask on StackOverflow)

GJSBlock

Thanks for reporting this, @excitedbox. Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date. For you right now: Run npm audit fix to see available patches Check for a newer Grap...

Browse all topics