GrapesJS Issues

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

644 issues found

🔍 components
#3399April 9, 2021by AdamTorma4 answers
2 reactions

Convert JSON to HTML server-side

So first of all, thank you @artf for this amazing project. I have a question: Is it possible to easily convert the components-JSON to HTML on the server-side (in a Node.js environment)? If it is possible, can you give me a hint how to achieve this? On the client-side it's quite straightforward: I can get the component...

bgrand-ch

Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...

anlumo

Yes, if you have any kind of interactive content, that probably wouldn't work. Fortunately that's not the case for my application.

Ju99ernaut

Maybe you could install grapesjs server-side(similar to client-side) and use it for rendering, otherwise you'll have to reverse engineer the renderer. Another alternative would be to store the generated HTML in the database as well.

#3392April 7, 2021by rywilson283 answers
0 reactions

FEAT: Allow dynamic droppable configuration using a function

I have a requirement where I cannot use selectors to determine if an element is droppable. For example: The "child" component must be within a "parent" component, however if the child component contains a ref attribute it can only be dragged into other parent containers that match the same ref value as the current par...

rywilson28

Associated PR: https://github.com/artf/grapesjs/pull/3393

rywilson28

@artf do have any questions regarding this feature or the approach taken in the PR?

ClaudeCode

Thanks for reporting this, @rywilson28. Great suggestion about FEAT: Allow dynamic droppable configuration using a function! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using t...

#3381April 2, 2021by pranay22103 answers
1 reactions

Switching between components gives maximum call stack size error

Hey artf, I would like to thank you for building such a powerful tool for building customized CMS. I'm implementing a new page feature in my project so I'm using your reference to switch between components but It gives me an error, Please can you guide me on how to build a new page on click add new button from the pan...

Ju99ernaut

I think arrays aren't the best method of storing page objects, so running array operations to get the page plus loading the page is probably too much for your call stack. You should consider loading the pages into memory only when you need...

artf

I'm not sure what is happening on your side but I'd suggest keeping an eye on #3206 as the built-in page manager is almost ready (I'll update that issue)

ClaudeCode

Thanks for reporting this, @pranay2210. Great suggestion about Switching between components gives maximum call stack size error! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Usi...

#3378April 1, 2021by dluague2 answers
0 reactions

null text after saving.

Version: 0.16.45 Are you able to reproduce the bug from the demo?[ ] Yes[x] No What is the expected behavior? There shouldn't have null text. What is the current behavior? After saving the data to the database and retrieving it (see attached components object) the null will appear. This is how I assign the components...

artf

Seems to be an issue on your side as I can't reproduce it (maybe you're doing something wrong on your back-end?!). Try to create a reproducible demo first (by using the localStorage)

ClaudeCode

Thanks for reporting this, @dluague. The issue with null text after saving. appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating a...

#3375March 31, 2021by christosapos2 answers
0 reactions

Cannot add spaces to extended button component based on text component.

Hello guys, First of all i would like to express my gratitudes for this amazing tool. I have extended button component based on text component so as to can edit the content of button manually without using traits. The code for the extended button component is this: var comps = editor.DomComponents; var defaultType4 =...

artf

Seems like space triggers the click event in Chrome. The solution seems to be to add the preventDefault on keypress https://stackoverflow.com/questions/22104860/chrome-firing-onclick-when-space-typed-in-contenteditable-button ps. avoid ext...

ClaudeCode

Thanks for reporting this, @christosapos. Great question about Cannot add spaces to extended button component based on text component.. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS...

#3352March 19, 2021by harsh2014 answers
1 reactions

Default Content is getting Inserted while using setComponents if Tag Body is empty

Version: Latest You can get the version by typing grapesjs.version into the console Are you able to reproduce the bug from the demo?[X] Yes[ ] No What is the expected behavior? Component with empty body should not be populated with default content. What is the current behavior? When we create an empty node and pass it...

artf

You have defined the default content in the component definition, so, an empty one will use that as default. Just move that content from component definition to the paragraph block.

harsh201

@artf Any help here?

harsh201

Thanks @artf! Completely forgot about adding at block level.

#3347March 18, 2021by xinnai4 answers
0 reactions

How can I get Uncompressed JS code for me to edit?

Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit html、css and js. 1、First, I use getHtml, getCss, getJs to display the code in my JSEditor. And I found that the JS code is compressed. How can I get an Uncompressed code? I use editor.CodeManager.getCode(model, 'js') and it's also a compress...

artf

The script used by components with JS relies on the same code from your source. For example, if you create a plugin and then build it with webpack/babel, then the component will print the result from build. I guess you could create separat...

xinnai

@artf Hi, I'm not sure if you understand my question. I want to edit the js code in my own js editor, first I set the js code from your editor using getJs(), but it looks like this in your demo.html: These code are all compressed. I want a...

artf

autoBeautify is an option passed to CodeMirror but in any case, it might beautify the code but it won't uncompress it as the code itself is stored like that in the component

#3334March 11, 2021by KernelDeimos2 answers
0 reactions

Attempts to load scripts to canvas maybe breaks javascript??

Version: 0.16.44 Are you able to reproduce the bug from the demo? [ ] Yes [x] No What is the expected behavior? Legit anything else Describe the bug detailed I was attempting to load scripts into the canvas. My first attempt was scripts: [] and then I ran into the synchronization issue mentioned in this PR's thread: h...

KernelDeimos

I haven't used inline <script> tags in a while and forgot about this caveat of the HTML parser. Closing this.

ClaudeCode

Thanks for reporting this, @KernelDeimos. The issue with Attempts to load scripts to canvas maybe breaks javascript?? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events...

#3329March 10, 2021by imouou4 answers
0 reactions

How should I receive custom trait modifications in the script?

Hi, @artf, this is a great framework, thank you very much. I am now using it to create components of the mobile BUI framework, and I ran into a problem, I added a custom trait textarea, how can I make this When the data changes, it is triggered in the output script.

Ju99ernaut

You'll need to add the trait to script-props, you can read more here https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts

imouou

Thanks @Ju99ernaut, If it is some built-in features, when modifying the script can receive the value of the parameter, I am currently experiencing problems: custom feature textarea, can trigger changes such as dom, but the exported script...

Ju99ernaut

You can try forcing the script to update:

#3328March 9, 2021by D-Rosa994 answers
2 reactions

How can I update the nodeValue (text value) of components by inputs forms

Hello. Grapesjs is a great tool. Thanks for it. I want to update the text value of a component by inputs, how can I do that?? if a user filled the input box with something like: TEA SITE, the title should change to it

artf

Just find the component and update it as you wish

millord

I'm also want something similar with my grapes app, but using react to update a text component via a control input. Somebody can help with that?

D-Rosa99

it works, thanks