GrapesJS Issues

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

545 issues found

πŸ” typescript
#3529Jun 10, 2021by tmrowe1231 answer
0 reactions

Trying to add onClick attribute to component

Hello, Fairly new to this great project but I am trying to change the display of a component onClick of another component after the component id is selected from the dropMenu. I'm having trouble trying to add an onClick attribute to the component after selection from a dropMenu trait. I can't seem to access the value...

GJSBlock

Thanks for reporting this, @tmrowe123. Thanks for sharing your report about Trying to add onClick attribute to component. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddl...

#3528Jun 10, 2021by krishnaeverestengineering2 answers
0 reactions

I wasn't able to unit test grapesjs components

Not sure exactly whats happening but this is what I am getting. Sometimes tests are passing and randomly tests are failing due to this. Any help please @artf <img width="1474" alt="Screenshot 2021-06-10 at 7 08 14 PM" src="https://user-images.githubusercontent.com/55732888/121535085-71faf080-ca1f-11eb-8e07-aeedf9ab746...

artf

Same as here https://github.com/artf/grapesjs/issues/3476#issuecomment-848074298

GJSBlock

Thanks for reporting this, @krishnaeverestengineering. Thanks for sharing your report about I wasn't able to unit test grapesjs components. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (C...

#3527Jun 10, 2021by alpha2k-io4 answers
0 reactions

Post the full complete demo code

Is it possible to post the full demo code from the getting started? There are many small snippets that depend on each other. It would be good to have these in a repo as separate branches so developers can see the expected final result. In many cases there were some simple things skipped or location of the snippet in t...

anlumo

Yes, the problem is that the demo defines its own plugin that then imports all other plugins. This makes trying to find out how to do stuff really hard, because you have to follow a lot of redirects across different repositories. It's also...

artf

The final code of the getting started tutorial is actually here (and its grapesjs config).Yes, the problem is that the demo defines its own plugin that then imports all other plugins @anlumo Yeah actually current presets plugins were struc...

erpardeepjain

@artf but How to run that file or config file as main file is in vue and base project is in React, can you point out how to make it run as shown in demo?

#3525Jun 9, 2021by anlumo3 answers
0 reactions

In Style Manager, Allow Requiring the Default Setting

What are you trying to add to GrapesJS? The CSS property float only makes sense for position: static; elements, which happens to be the default. I only want to display the float radio selector if the position is not set to anything else. However, if I add require: ['static']; to the property definition, the setting is...

artf

Hi @anlumo, did you try to extend float definition with something like this requires: { position: ['static'] }?

anlumo

Yes. It seems to work fine after reloading the page, but when you toggle the position it stops working and looks like in the screenshot. The definition is as follows:

GJSBlock

Thanks for reporting this, @anlumo. Great suggestion about FEAT: In Style Manager, Allow Requiring the Default Setting! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the ev...

#3524Jun 8, 2021by iteniel3 answers
0 reactions

Integrate select2 UI element into traits

I'm new to grapesJS ... Great tool.I have a few questions about traits. I followed this tutorial https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type because I have to overwrite how href is generated. The example is great for me with few modifications. I I want to replace .... <select multiple="multiple...

artf

You can do this:

iteniel

@artf thanks Can you help with first part of the question I need something like onPostRender/afterRender to initialize the select2 component when the DOM is present somthing after createInput method

GJSBlock

Thanks for reporting this, @iteniel. Great question about [QUESTION]: Integrate select2 UI element into traits. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your...

#3515Jun 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

#3512Jun 2, 2021by Palash-Mandal3 answers
1 reactions

Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin

Hello @artf , I am trying to develop a simple banner plugin which will be include a heading , subheading and link. and every element can be draggable ,droppable highlightable, but based on below code some portion of code not working. Please Help only banner class CSS pushed but another all not go in the CSS section --...

artf

In your model component definition, you're using content: config.template but it should be components: config.template

Palash-Mandal

Hello @artf , I have made the solution but there are some issue arise the component. the child component h2,h3 and link pushed for all other component. If I drop one column component those child element also pushed inside there. How Do I r...

GJSBlock

Thanks for reporting this, @Palash-Mandal. Great question about Child elements not draggable ,droppable highlightable. also the CSS of all child elements not pushed in style section while develop a banner component in as plugin. The recomm...

#3511Jun 2, 2021by moises-flowize2 answers
0 reactions

Command core:component-enter not working in all the cases

WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.mdDo a quick SEARCH first, to see if someone else didn't open the same issueAll relative statements/questions have to be filled/answered, otherwise, th...

artf

Thanks @moises-flowize that will be fixed in the next release https://github.com/artf/grapesjs/commit/ac96298add119c4f4e000967ab3332f9ad711613

GJSBlock

Thanks for reporting this, @moises-flowize. The issue with Command core:component-enter not working in all the cases appears to be a race condition or state management timing problem. This typically happens when component lifecycle events...

#3510Jun 2, 2021by iabhiyaan2 answers
0 reactions

Re render traits after certain events (e.g click)

How to re render traits after clicking on buttons ? Note : Re-rendering should not be dom modification. I have created a function that would render trait by calling the render() inside createInput() Is there any way to re-render the traits with the newer and updated dom string which was first created on createInput() ?

artf

createInput is called once, if you want to update the UI of your trait, rely on onUpdate which is called every time the selection is changed. ps. please avoid using Issues for questions, check the Discussions tab

GJSBlock

Thanks for reporting this, @iabhiyaan. Great question about Re render traits after certain events (e.g click). The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...

#3508Jun 1, 2021by tranthanhhoa2 answers
0 reactions

Layer visibility does not work properly

Version: 0.17.4 How to reproduceSwitch to tablet or mobile modeHide the selected component by toggling the visibility icon of LayerSwitch to desktop mode. ResultThe visibility icon is still disabled while the hidden components is showing. ExpectedAfter switch to desktop the visibility icon is enabled.

artf

Thanks for the report @tranthanhhoa I'll fix it in the next release, but I think I'll keep the visibility change more like a global condition, so the hidden component won't be visible on all devices.

GJSBlock

Thanks for reporting this, @tranthanhhoa. Great question about Layer visibility does not work properly. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

Browse all topics