GrapesJS Issues

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

644 issues found

πŸ” components
#3258February 2, 2021by stljeff14 answers
0 reactions

Prevent/Disable Custom Blocks from being dropped inside other Custom Blocks

Hello, I have a custom component, let's call it a Section Block. I want to prevent the user from dropping Section Blocks inside other Section Blocks. Is that possible? Ref: https://grapesjs.com/docs/modules/Components.html#define-custom-component-type I am aware of the draggable/droppable options that I can define on...

artf

You can use :not() selector, eg. :not(.except-this-class)

stljeff1

Thanks @artf . This solution works, mostly. Now I am encountering a new problem where some placeholder text is disappearing. On some elements inside my blocks, I'll have an HTML element with a text node, then some other nested html element...

artf

You're defining the component with the old API, which requires other stuff to work properly and that might be the cause of the issue (I've tried on my side and everything works as expected). Please check here for the correct API https://gr...

#3244January 21, 2021by nithinpillalamarri1233 answers
0 reactions

grapes js version v0.16.34 giving unexpected script code after loading saved html

attaching code: while saving the html: <div class="gjs-row"> <div class="gjs-cell"> <div class="gjs-row"> <div class="gjs-cell"> <div id="i6x6"> <div id="bsrne9exd5" style="height:300px" tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine"> </div> </div> </div> <div class="gjs-cell"> <div id="ibc4"> <div id="3drqn...

nithinpillalamarri123

kindly any one help me to get out of this issue editor.setComponents(html text ); not working the script as expected after loading from saved template html while drag and drop its working after saving and again loading that html with edito...

artf

You can't load the generated HTML code back to the editor, read the documentation on how to correctly store and load templates https://grapesjs.com/docs/modules/Storage.html

ClaudeCode

Thanks for reporting this, @nithinpillalamarri123. Thanks for sharing your report about grapes js version v0.16.34 giving unexpected script code after loading saved html. To help the team investigate and prioritize this: Please provide: A...

#3235January 15, 2021by AnnaSu1 answer
0 reactions

"component:update" does not trigger when components are moved

Taken from https://github.com/artf/grapesjs/blob/dev/src/editor/index.js#L33 component:update - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback reproduce the buguse move API to move componenthttps://grapesjs.com/docs/api/component.html#moveclick arrow up/...

ClaudeCode

Thanks for reporting this, @AnnaSu. The issue with "component:update" does not trigger when components are moved appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and...

#3233January 15, 2021by Abhisheknanda13444632 answers
0 reactions

Set Toolbar on every Component

Hi @artf Is there any standard way to add a new toolbar on every component I've tried this way When I run this code on the browser console it's working as expected but when I placed this code In the component file this is not working when we define a new trait for all the components it's working fine. For Toolbar it's...

artf

Follow the issue template (version, live demo, etc.)

ClaudeCode

Thanks for reporting this, @Abhisheknanda1344463. Great question about Set Toolbar on every Component. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

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

#3231January 13, 2021by vatte214 answers
2 reactions

how to change gjs-ckeditor-format component

hi guys, we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components. I wanna know , could we change this option? I want to make my own custom component with for example [data-gjs-type]="anyDiv" and have the same functionality like in [data-gjs-type]="text". maybe someone knows how to change th...

Abhisheknanda1344463

@vatte21 To make your component editable.You've to extend the text type in your component like this way

vatte21

@Abhisheknanda1344463 Thank you! Ill try

abulka

@Abhisheknanda1344463 your code fragment gives me an error Uncaught ReferenceError: type is not defined on the line where is type defined?

#3224January 8, 2021by marcepoblet3 answers
1 reactions

changesCount is not incremented, when changes are applied in any Text component

https://user-images.githubusercontent.com/64096863/104047608-af352b00-51c0-11eb-8261-1d7ae9277d25.mp4 The parameter "changesCount" is not incremented when you double click in any text component and write or changes are made inside of any text component. For button/images components, the parameter "changesCount" is inc...

artf

Thanks @marcepoblet the fix is ready for the next release

marcepoblet

Thanks @marcepoblet the fix is ready for the next release Thanks! @artf , do you have some estimation for the release date?

ClaudeCode

Thanks for reporting this, @marcepoblet. The issue with changesCount is not incremented, when changes are applied in any Text component appears to be a race condition or state management timing problem. This typically happens when componen...

#3223January 7, 2021by ianef3 answers
2 reactions

FEAT: Create the canvas from a URL

I've been playing with GrapesJS and trying to integrate it into a Symfony 5 project. In particular I want to be able to edit templates in the editor based on Bootstrap 4 and other components like FontAwesome Pro and custom blocks based on these. I use Symfony's Webpack-Encore bundle to generate the scripts and style f...

ianef

That's a real shame. I didn't say anything about fetching from another site, what I wanted to do was keep it consistent with the rest of the project. Oh well, I'll keep looking elsewhere for an editor that integrates better with the curren...

artf

Hi Ian, if you need to load HTML content from a URL I can only suggest fetching it server-side and initialize the editor with that content (loading external resources in the browser would mostly hit the cross-origin issue), so, for how bro...

ClaudeCode

Thanks for reporting this, @ianef. Great suggestion about FEAT: Create the canvas from a URL! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative ap...

#3213December 30, 2020by theSC0RP4 answers
5 reactions

How to save the dynamically added traits

Hi, @artf, I have a custom component that has a button trait. When the button is pressed, I am adding a custom trait dynamically using comp.addTrait(). When I load the saved template, I want the container to show the dynamically added traits too. (I am loading the template using components but the dynamically added tr...

artf

I made it work by having a count attribute on the component and then adding the trait count times in the init of the container. This is the correct way. Traits are intentionally skipped from the JSON, otherwise, you'd put on hold your comp...

theSC0RP

@artf, thanks for replying. That was a really valuable piece of information.

theSC0RP

I made it work by having a count attribute on the component and then adding the trait count times in the init of the container.

#3211December 29, 2020by alemenciones2 answers
3 reactions

how to move components

Hello dear: I want move a component to first/end in the wrapper programmatically, i think something like editor.getWrapper().add(editor.selectedComponent(), {at: 0});, but this's adding a new clone from selectedComponent, maybe with trigger "sorter:drag:end" at position?? can you help me? sorry for my poor english :')

artf

Probably it makes sense to add a new component.move(desComponent, opts) method to cover such a case, but for now you can achieve it in this way:

ClaudeCode

Thanks for reporting this, @alemenciones. Great question about how to move components. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for...