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?
This throws an error Maximum call stack size exceeded
GJSBlock
Thanks for reporting this, @iabhiyaan. The issue with Question: How to properly initialize grapesjs inside vuex store ? appears to be a race condition or state management timing problem. This typically happens when component lifecycle even...
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...
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...
How to make a custom block always be at the bottom of the pageοΌ
YyueeiWY
u need display flex for ur case align every block at end, use ( align-content: flex-end; ) in body or parents element <pre> <body class="flex-container flex-end"> <div class="flex-item">1</div> <div class="flex-item">...
artf
Hi @sizhousama the easiest way probably could be some kind of CSS trick or you can define, by using custom components, a structure with fixed containers (eg. one for the header, for the body and the footer)
GJSBlock
Thanks for reporting this, @sizhousama. Great question about [QUESTION]:How to make a custom block always be at the bottom of the page. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS d...
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...
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...
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...
Hey @artf, I was trying toggle between using ids and classes for styling so I need to change the componentFirst attribute programmatically. But when I try to change the config, the behaviour doesn't change. This isn't working even in the demo. Steps to reproduce:Add two text blocksGive them the same class name.In the...
artf
You have to retrigger the selection after changing that option editor.trigger('component:toggled')
GJSBlock
Thanks for reporting this, @theSC0RP. Great question about How to programmatically change componentFirst?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your speci...
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...