DescriptionThe bug is reproduced on the current demo Expected behavior When a tooltip is removed its css is removed What happens instead ? When a tooltip is removed its css is not removed Steps to reproduce on the demo Clear the canvas Drag a tooltip Remove the tooltipClick on Import button on top toolbar , the toolti...
artf
Yeah, I think you're right, probably replacing with might fix the issue, would you like to check and create a PR? :)
meyerco
@artf Maybe this code to keep the code generic ?
artf
@meyerco 😅 yeah sure, sorry, it was a copy-paste from my try
I am currently working on a web application for which we integrate this project as GUI editor to customize the environments. Our GUI components are loaded and parsed from the database. We can identify e.g. a button, data grid, etc. by an ID (e.g. 17190fbd-13d6-430f-bb32-1a09d2151a77). These components are then built f...
dintifla
a short update: I managed to get the the selectors in the right order when using selectors.unshift(idSelector) instead of selectors.add(idSelector) in above sample. Now i still have the issue with the missing space between the id- and the...
artf
Hi @dintifla SelectorManager is not meant to work like that (you can only have a mix of classes .class1.class2 but not with IDs), but honestly I don't understand what is your goal of using the SelectorManager at all. If you need to query a...
dintifla
Hi @artf Thanks for your reply. In the end it is not just about querying a component, but generate the CSS for it. I don't need the HTML since my application is designed in a rich client application, stored in an abstract representation in...
Hi, I'm trying to import utility classes into grapes js. My issue is that grapes remove them if they are not use by an element in the canvas. I'm building a custom panel to link to my CSS variables (CSS custom properties) to manage this classes in grapes. How can I import my CSS and keep all the classes? I have create...
Ju99ernaut
grapesJS does not deal with css directly it first parses it into a CSSOM and uses that in the editor so a class will not show up in the code preview unless there is a component in the editor canvas using it. Your classes will be imported d...
Ju99ernaut
You could load the stylesheet externally during init and remove it from the index.html altogether You can also check the SelectorManager and CssComposer api reference
vinceumo
Thanks @Ju99ernaut, do you know if there is anyway to add some css and make it available in the canvas and as well have it in the export?
@artf When I click on the devices(tablet, mobile), the size of the canvas is not updated But it Worked in Version 0.15.x and lower.
cdespinosaagmx
I have the same issue
kuhelbeher
I had the same issue after grapejs update. In my case it turned out that I was using old version of css file: https://unpkg.com/[email protected]/dist/css/grapes.min.css I updated it to use version as grapesjs and it solved my problem. Try...
Hi I was trying to use grapesjs on visualsource pages. Following is the init function - initEditor: function(){ var self = this; this.editor = grapesjs.init({ container: '#gjs', fromElement: true, height: '500px', width: 'auto', storageManager: false, panels: { defaults: [] }, blockManager: { appendTo: '#blocks', bloc...
artf
Create a reproducible demo please
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...
Hi, I'm having some issue with mobile first approach. The canvas render the wrong style when setting different styles at multiple breakpoints. But the code generated is good, this issue only happen in the canvas. https://codesandbox.io/s/xenodochial-shockley-s02lp?file=/index.js:496-524Are you using the latest release...
artf
We should apply the same logic from https://github.com/artf/grapesjs/blob/201e1f9a61783080f7be885e9e0be9a40ecc16cc/src/codemanager/model/CssGenerator.js#L151-L162 here https://github.com/artf/grapesjs/blob/201e1f9a61783080f7be885e9e0be9a40...
Minor bug: When switching video type component to html5 provider it always takes the src of the previous provider. Instead I would expect it to be cleared. This also has another side effect since it seems (without checking code) that you set the provider depending of the src. This is especially annoying when you save...
artf
It should be fixed in the next release, thanks for the report
hey there. first of all thanks for this sweet lovely tool. what I need is to load js or css files to the canvas depending on traits. let's say I have a button with an option for making it triggering a lightbox. now what I need is to only load the lightbox plugin's files only when this checkbox is checked. I couldn't m...
artf
When you use canvas: { scripts: [], styles: [] } it appends only those files to the canvas of the editor, so you won't see them in your final code (editor.getHtml()). There is no kind of global list but you still can tell the component to...
Hello, GrapesJS has bunch of events which could be listened with editor.on. One of them is canvas:drop. But it triggers only when I drop element which hasn't been on canvas yet. But I want to listen when user drops some component which already existed on canvas. Can I achiive this?
cartifon
Hi @kuhelbeher, in the version 16.2 they added that option, you can take a look here: https://github.com/artf/grapesjs/releases/tag/v0.16.2
I have a component and a block defined inside my plugin. The block relies on fetching some data via AJAX and then re-rendering itself. When I d&d block to the editor canvas all works nice. But once I load the stored data, script is not executed. It can be seen in the image that component type is saved and loaded corre...