#916March 1, 2018by tommedema3 answers
I'm playing around with grapes' internals because I would like to contribute in the future. Most of my interest is in making it worth with generic HTML sites, regardless of the style/structure of CSS and HTML used (including doctype, body support etc). I expected the layers hierarchy to represent the DOM tree. While t...
maxtacco
Btw, it looks like Layer Manager uses Component's https://github.com/artf/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/dom_components/model/Component.js#L35 property when rendering tree node in https://github.com/artf/grapesj...
maxtacco
GrapesJS is component based. So, I think it displays component names instead of tag names in this case. I think adding tag names and/or customizing layers tree rendering would be a nice enhancement.
maxtacco
Actually, GrapesJS component may consist of multiple DOM elements, so it may not make sense to display tag names in this case because you style a component and not individual elements within it.
#915February 28, 2018by JulyanoF3 answers
Is there any option to activate a confirmation box before delete any block?
artf
Nope, but you can extend the default tlb-delete command
Iceweex
@artf this works only for toolbar button, but when I hit "delete" on my keyboard it doesn't. How can I override this event?
artf
Hi @Iceweex, unfortunately, at the moment, you can't. For the next release, I'll centralize those commands and will update also its event lifecycle, so in that case, you'll able to achieve the task in this way
#914February 28, 2018by nojacko3 answers
Calling init() on Grapes after changing HTML fails. This kinda situation happens on one page apps. I think a destory() function to gracefully reset Grapes is needed.https://jsfiddle.net/wdtrg1je/ (very bare bones simulation of a one page app)Click "Add Grapes" (loads Grapes with a some HTML)Click the "Link", change it...
nojacko
Looks like I'm not the only one who wants this 😉 . Single page apps are where this has value (the issue I raise but also freeing up some memory). I'll look to raise a PR when I got something.
artf
As already mentioned here, currently, I don't see any value in starting such a feature (creating a good destroy method) but would really happy to see some PR :)
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
#913February 28, 2018by richardabear3 answers
Hi, I've been taking a look inside of the dom_components, but cant seem to figure out how to manually override the styling aspect. I need a way for the component to be able to save all new styles into the style tag instead of the actual css class. (Try moving a component that was styled with force css) and it removes...
ryandeba
Hi @Owchzzz, It seems to be baked into the core of GrapesJS that components will not have a style tag - see this example where it is explicitly removed. I'm not sure if modifying this behavior would completely solve your use case, but you...
Amir2828
So did you mange to find any complete solution that leaves the style tags intact with no changes?
amenk
The solution by @ryandeba seems to influence only the use of inline style attributes like <div style="...">. (but for me those were also not filtered out without overwriting that prototype. We are having the problem that is filtered out, n...
#912February 28, 2018by nojacko3 answers
When double quotes are added to an attribute it breaks the HTML.https://jsfiddle.net/szLp8h4n/Drag in the link block.Click the link in the editorGo to "Component settings" panelEnter This is an "example" into title field.Click the view code icon.Invalid HTML is generated
artf
Thanks for the catch James PRs are welcome
artf
@nojacko I don't build files before the release so if you're using files from dist you're still using the old one
artf
Fixed by https://github.com/artf/grapesjs/pull/939
#911February 28, 2018by rajatkumcom3 answers
What I can use instead of followings- editor.setHtml( arrdata['html'] ), editor.setCss( arrdata['css'] ), In below code.
rajatkumcom
Below is my code:- What I can use insted of followings- editor.setHtml( arrdata['html'] ), editor.setCss( arrdata['css'] ), Thanks in Advance.
artf
Just don't use them for loading your template data is all what you need
#910February 28, 2018by tommedema3 answers
I have a large amount of static websites, some which have been developed quite a while ago (using Bootstrap etc.) and some which have been developed more recently (using CSS grid etc.). Some use inline styles, some use class based styling, some style based on component hierarchy (#id > div > ul > li for example), some...
tommedema
@artf thanks, I see. I actually like that you rely on the browser's CSS parser because I am already noticing performance issues with large templates. If you also rely on something like postcss I fear that performance may further degrade. I...
artf
I believe that Grapes works solely with BEM-like CSS styling. I.e. each component has its own class. Is this correct? Is the "selector/class viewer" which is only able to let you edit styles of class-based selectors, like .class1 .class1.c...
tommedema
@artf Thanks for the answer! I think I may need to explain my use case more. It's not always realistic to expect someone importing a template to define what CSS comes from external libraries. The reason for this is that typically CSS is co...
#909February 28, 2018by konstantin550003 answers
Hello to everybody. The issue is: Events, just are not fire, after dragging on (into) canvas. editor.on('canvas:dragover') editor.on('canvas:drop') editor.on('canvas:dragenter') editor.on('canvas:dragend') The code is just the demo code from repo, with adding this 4 events. Here is the code: var editor = grapesjs.init...
konstantin55000
Code is syntax. valid. Here is jsfiddle with code https://jsfiddle.net/s9b2k7vp/ Here is the demo: https://www.screencast.com/t/pWcpkM7QO
konstantin55000
Update. Events are firing, but just after block drops into canvas. I'm not sure if this an issue, because what about event canvas:dragend and canvas:dragover, if block does not drop into canvas, they just not fire at all. Here is the demo,...
konstantin55000
Much sorry. Event was not fire because of prvious version of grapes.js Thanks to everybody for attention.
#908February 28, 2018by sbarfurth2 answers
When using a UI framework that provides custom classes, it would be nice to be able to use these classes on things like panels, so you wouldn't have to rewrite the CSS. A possible syntax may be: It would also be useful to be able to do this after the fact for presets, using a setter for example. I could not find a way...
artf
You can set attributes in this way
lock[bot]
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
#907February 28, 2018by josefph3 answers
What do I do with gjs-assets, gjs-components, gjs-css, gjs-html, and gjs-style? and how do I load these things to my editor?
artf
gjs-html and gjs-css are your final results, so probably you would print them on some page for the end user. gjs-components and gjs-style contains the JSON data about your template so you have to use those if you need to edit the template...
josefph
@artf would there be problems if I would just insert the saved html and css to the editor to edit it? and not use the gjs-components and gjs-style?
artf
@pranzikkin if you use custom elements and you care about the consistency with editing your templates, well yeah, you'll get problems