GrapesJS Issues

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

569 issues found

πŸ” canvas
#3295March 1, 2021by marcepoblet4 answers
0 reactions

BUG (v0.16.41): Button component with draggable property is not working properly

Version: v0.16.41 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No What is the expected behavior? When we have a button with the property data-gjs-draggable in false, this button not should be dragged in the canvas. Describe the bug detailed StepsSet a button component with draggable property in falseDr...

artf

I guess you're doing something wrong, how do you create those components and their properties?? You shouldn't even see those attributes in the inspector.

marcepoblet

@artf In our codes we have not changed anything. The only difference is that we update the GrapesJs version. Before I had version v0.16.18 and it worked correctly, but now we update GrapesJs to v0.16.41 and it doesn't work for buttons.

marcepoblet

we set the properties with this: editor.getSelected().attributes.attributes["data-gjs-editable"] = 'false' editor.getSelected().attributes.attributes["data-gjs-copyable"] = 'false' editor.getSelected().attributes.attributes["data-gjs-dropp...

#3285February 21, 2021by ashercoren4 answers
6 reactions

[Question]: Doctype in the canvas iframe

Hi. This question has already been asked twice (here and here) but has never got an answer. Is there a way to add <!DOCTYPE html> as the beginning of the canvas iframe so that the iframe will be in standards mode. I need this since I am trying to use tinyMce as the custom RTE, and tinyMce requires standards mode.

artf

In the next release, I'll add a new event helper that will allow editing iframe content before load:

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

artf

Not really, but I'm open to solutions on how to make it customizable.

#3280February 19, 2021by bgrand-ch1 answer
0 reactions

FEAT: Renderless

What are you trying to add to GrapesJS? I try to styling GrapesJS and positioning its elements (panels, buttons, canvas, etc.), it's annoying to override all style elements. Describe your feature request A renderless GrapesJS.Append a specific GrapesJS element (panels, buttons, canvas, etc.) into any container in the...

ClaudeCode

Thanks for reporting this, @bgrand-ch. Great suggestion about FEAT: Renderless! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: List...

#3279February 19, 2021by abulka2 answers
0 reactions

how to make textnode editing update component content?

I'm building a custom textarea component and want it to behave like the built in text component such that editing the textnode on the grapesjs canvas updates the textnode found in .components. And I want the component exported as HTML correctly e.g. <textarea>MY user edited TEXTNODE CONTENT</textarea>. At the moment,...

artf

Hi @abulka, as the editing is happening in the view, you should update the component model once the view is updated. So it should work with something like this

ClaudeCode

Thanks for reporting this, @abulka. The issue with how to make textnode editing update component content? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mod...

#3278February 18, 2021by Dmurl51 answer
0 reactions

Custom component view onRender is called early

Version: Reproduced in codepen below using 0.16.34 (returned from https://unpkg.com/grapesjs) and 0.16.22 in a Preact project Describe the bug detailed A custom GrapesJS component calls its view's "onRender" function when the component is rendered to the canvas. Per the documentation: I would expect this to be called...

ClaudeCode

Thanks for reporting this, @Dmurl5. The issue with Custom component view onRender is called early appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificatio...

#3268February 12, 2021by theSC0RP4 answers
0 reactions

How to add javascript in the html without sanitization?

Hey @artf, I am taking javascript input from the user. I need to add this javascript inside the template HTML but it gets sanitized. Is there a way that I can turn off the sanitization? (I don't have an issue with the problems you mentioned in #3245 ) or can you add a property in the editor like allowSanitization: fal...

theSC0RP

I tried adding the script to the iframe in which the canvas renders by adding a <script> tag at the end of the body of the iframe. This works to some extent. The problem here is that when I need to update the js inside the script I will ne...

artf

Can you provide a reproducible demo of your issue, please?

theSC0RP

Thanks for the reply @artf. I was doing a mistake while updating the iframe so now my problem is solved! Just another question, is there any built-in method to refresh the iframe?

#3253January 29, 2021by luziye92 answers
0 reactions

How does the property color changes to blue when value changed?

Hi, We are encountering an issue - color of property name such as "Width" is blue when dragging a new component to canvas, but we don't modify its value. Grapesjs is powerful, and very helpful to us. However, we are new to grapesjs, and have spent much time on this issue with no progress. Would you please tell us the...

artf

Hi @luziye9 for sure you're using a block/component with a custom style property on it... Anyway, if you're opening a BUG issue, you have to follow the template (grapesjs version, reproducible demo, etc.). So, for now, I'm closing this as...

ClaudeCode

Thanks for reporting this, @luziye9. Great question about How does the property color changes to blue when value changed?. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation fo...

#3252January 28, 2021by ThetripGr4 answers
0 reactions

Does getHtml() remove the inline style property?

I was fiddling with ways that you could change the style of elements inside the canvas and i noticed that by using the color-picker trait to set the inline style color property of the element (not the inline style tag that you get through the getCS() ), that style property was completely gone when getHtml() was used.I...

artf

Hi @DodoTrip the reason is that with inline CSS you can't define styles with states (eg. :hover) and media queries, so I've always seen it as a useless limitation instead of a feature. Despite that, you can still use that option if you don...

ThetripGr

Hi @artf and thank you, for your reply. Mind giving me an example on how it is done right now or should avoidInlineStyle make it work easily?

artf

Honestly, I've stopped using avoidInlineStyle a long time ago, but I guess it should work 😁

#3238January 18, 2021by sizhousama3 answers
1 reactions

[Question]: How to load external javascript,i tried all methods,Useless

I write html strings as blocks, and need to introduce a lot of external scripts and styles, but I tried all the methods, when I drag the block to the canvas, the script does not take effect, but styles can be loaded,I hope to get help。Load by appendchildinit load by canvas:{scripts:[...]} who can help me?

harsh201

@sizhousama I am loading scripts/stylesheets via canvas while initializing grapesjs editor and it works for me. More details can be found here. Hope it helps!

sizhousama

The console shows loaded

ClaudeCode

Thanks for reporting this, @sizhousama. Great question about [Question]: How to load external javascript,i tried all methods,Useless. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...

#3232January 15, 2021by matiasmasciotta2 answers
0 reactions

DRAG AND DROP COMPONENTS:

Hi, I have the following issue: I need an event type editor.on ("sorter: drag: end") which is thrown in all these cases: (detect what element and where I'm dropping it) 1- let it hear when you drag and drop an element from the blockManager and drop it on the canvas. 2- let it hear when you drag an already componentize...

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

ClaudeCode

Thanks for reporting this, @matiasmasciotta. Great question about DRAG AND DROP COMPONENTS:. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Lo...