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...
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
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...
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...
Hello, right now grapesjs provides built in properties like margin, padding that allow user to change each property one by one (margin-top, margin-bottom, etc). It would be nice to have ability to change all these properties together. To have some lock button, for example, when it's enabled it will change all properti...
artf
Yeah, that would be cool, but unfortunately, GrapesJS doesn't have yet the proper UI module which could allow easily to build new UI components by reusing others, so StyleManager.addType is the only way but in that case, it's up to you bui...
GJSBlock
Thanks for reporting this, @kuhelbeher. Great suggestion about FEAT: Ability to change all margin, padding etc properties together! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior....
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...
GJSBlock
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...
Hello @artf , Many Many Thanks for previous help. I am fresher in development. Please help me with below I need a modal where I will get user input Like Block Name, Category, HTML, CSS, JS then click on save to store that as new block manager. Mean how to pass those data and store them as dragabe component I have made...
artf
Please follow the issue template
GJSBlock
Thanks for reporting this, @Palash-Mandal. Great question about *. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the on() event lis...
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
GJSBlock
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...
By default, the editor is initiated with english language when the init does not contain: However, when I try to change the language using the i18n method: setMessages like below: editor.I18n.setMessages({ en: tr }); this happens:Opened tabs (like Style Manager which by default gets open at load) do not get updated by...
artf
Follow the issue template
GJSBlock
Thanks for reporting this, @ahmedderkaoui. Thanks for sharing your report about setMessages() does not update i18n. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) You...
<img width="1172" alt="Screenshot 2021-05-24 at 6 55 23 PM" src="https://user-images.githubusercontent.com/55732888/119354444-b8cbb500-bcc1-11eb-8e67-27e020c879aa.png"> I was getting this error while writing unit tests and I am testing editor instance to be defined. Randomly test case is passing but mostly I am gettin...
YyueeiWY
It seems like u are missing the class name or parent element ID. below is the example of using querySelector. <pre> var parentElement = document.getElementById('deviceready'); var listeningElement = parentElement.querySelector('.listening'...
artf
Sorry but this might depend on way too many factors (eg. your environment) and has nothing to do with the core itself.
GJSBlock
Thanks for reporting this, @krishnaeverestengineering. The issue with TypeError: Cannot read property 'querySelector' of null appears to be a race condition or state management timing problem. This typically happens when component lifecycl...