GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

569 issues found

๐Ÿ” canvas
#3549June 19, 2021by anlumo1 answer
0 reactions

createCustomEvent Doesn't Handle Mouse Events Correctly

Version: 0.17.4 / git master Describe the bug detailed FrameView repackages keyboard and mouse events here: https://github.com/artf/grapesjs/blob/07061ae1307fedf2a3b9bd585ce0cb30f653f112/src/canvas/view/FrameView.js#L389-L399 I think the reason is related to redirecting iframe events to parent frame events. This would...

ClaudeCode

Thanks for reporting this, @anlumo. The issue with createCustomEvent Doesn't Handle Mouse Events Correctly appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mo...

#3515June 4, 2021by anlumo4 answers
9 reactions

gjs-selected Style is Hardcoded

This definition: https://github.com/artf/grapesjs/blob/88249c38577852dc3c42047356a70a12066ee6ca/src/canvas/view/FrameView.js#L303-L306 is always appended to the frame. It contains the color definition for selected elements (that blue outline). This color cannot be changed, because there's an !important here. Since thi...

artf

Hi @anlumo you're right, unfortunately, component status styles are rendered inside iframes. I've tried to put them outside by introducing this option but that doesn't handle multiple selections yet. So, at the moment, the only way to hand...

filipecheverrya

Hi @mingxin-yang i belive that you have to follow the same rule that @artf said. But using the corresponding classes

GoodPHP

Posted Free plugin for set colors Borders: https://gjs.market/products/borders-color-around-selected-component

#3491May 27, 2021by TheDude702 answers
0 reactions

iframe does not save src / does not recognize iframes after load

Version: 0.17.4 Are you able to reproduce the bug from the demo?[ ] Yes[X] No What is the expected behavior?After inserting an iFrame that the src will be returned when using editor.getHTML()When loading a page that iframes will be recognized as iframe component and become editable again Describe the bug detailed Am a...

artf

I'll add iframe support in the next release

ClaudeCode

Thanks for reporting this, @TheDude70. The issue with iframe does not save src / does not recognize iframes after load appears to be a race condition or state management timing problem. This typically happens when component lifecycle event...

#3485May 26, 2021by ahmedderkaoui1 answer
0 reactions

Element injected as HTML to canvas doesn't behave as a component

Consider a simple block: When dragged to canvas, this component can be selected and it's possible to modify its settings. Now, i'm doing this, to add the same input in a card: $(someElement).find(".card").html('<input type="text"/>'); The input is added successfully but doesn't behave as it did before. It can't be sel...

ClaudeCode

Thanks for reporting this, @ahmedderkaoui. Great question about Element injected as HTML to canvas doesn't behave as a component. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS doc...

#3482May 25, 2021by Palash-Mandal4 answers
0 reactions

Runtime updated traits not EDIT mode.

Hello @artf I having issue with a traits. When I drag and drop the block to canvas it's traits showing fine in under settings section. but when I saved and edit the in 2nd time and selected that tag in canvas that traits is now populating in setting Section. Please Please Please HELP!. `// Custom Heading Component blo...

artf

Are you defining your custom component in a plugin?

Palash-Mandal

Are you defining your custom component in a plugin? No. Just Add in init function editor = grapesjs.init({ const dc = editor.DomComponents; // Custom Heading Component blockManager.add('header', { label: 'Headings', category: 'Components',...

artf

The first rule of defining new component types is to place the code inside a plugin. From docs

#3478May 25, 2021by eyroooon1 answer
0 reactions

Using GrapeJS on nextjs

Some of the css was not working properly for example the .gjs-cv-canvas was not working. This is the screenshot of my grapejs page in nextjs

ClaudeCode

Thanks for reporting this, @eyroooon. Thanks for sharing your report about Using GrapeJS on nextjs. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Your GrapesJS versi...

#3462May 18, 2021by ahmedderkaoui3 answers
0 reactions

Refresh/Re-render traits of all components in canvas

Is there a way to re-render or refresh traits (which are customs, not built-in traits) of all the components existing whithin the canvas?

iabhiyaan

`

artf

mmm what is the point? Your custom traits should already react to component changes (if you created them properly).

ClaudeCode

Thanks for reporting this, @ahmedderkaoui. Great question about Refresh/Re-render traits of all components in canvas. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for you...

#3449May 11, 2021by chiragkataria223 answers
0 reactions

Switching pages calls canvas styles and scripts again and again

Hi I am integrating page manager into my project. But the issue I am facing is that whenever I switch between pages it loads CSS and script files given in canvas object at the time of init, again and again. It makes the switching between pages slow. Implementation: grapesjs.init({ pageManager: { pages: [ { id: 'Page-1...

chiragkataria22

@artf Can you please help?

artf

Unfortunately, switching pages creates a new iframe so, the behavior is correct. I preferred to remove previous iframes in order to keep the memory usage as low as possible. One solution might be to find a way to reuse previous iframes but...

ClaudeCode

Thanks for reporting this, @chiragkataria22. Thanks for sharing your report about Switching pages calls canvas styles and scripts again and again. To help the team investigate and prioritize this: Please provide: A minimal reproducible exa...

#3413April 26, 2021by theSC0RP4 answers
0 reactions

Adding inline scripts and updating old events

In that case, I suggest you access the document of the iframe and to append manually the inline script (to get the document use editor.Canvas.getDocument()) Originally posted by @artf in https://github.com/artf/grapesjs/issues/2012#issuecomment-496304498 Hey, @artf, I was going through the issue, #2012 and I have a do...

theSC0RP

I tried to update the inline script using the following steps:Get the document of the iframe: iframeDoc = editor.Canvas.getDocument()Get the innerHTML of the body of the document: iframeDocBodyHtml = iframeDoc.body.innerHTMLReplace the inn...

theSC0RP

I tried to add the select and hover events by running component-select command by writing editor.trigger('core:component-select') but that didn't help either and doing editor.runCommand('core:component-select') gives an error. Am I missing...

artf

Well, I think it won't be bad to add an easy way to force the rerender of the iframe (not a common case but for sure might be useful in some cases). Unfortunately, right now, you should try to use private methods and check if everything wo...

#3406April 20, 2021by vatte212 answers
0 reactions

How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page

Hello everyone, i want to save data from canvas to redux store, and it works, but after reloading the page, storage load method , doesnt set my data to builder (canvas), i dont know whats wrong, let me know if someone has any solutions. Code example :

artf

Remove this one const resultKey = key.slice(4);. You're storing data with the prefix but then you're loading it without

ClaudeCode

Thanks for reporting this, @vatte21. Great question about How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page. The recommended approach with StyleManager is to use the event-driven API. St...