Hi everyone, Is it possible to set focus in a section html with Grapes, like as an anchor? I have a panel button and it just select the section that I want but not focus to element. Here is the code: panel.addButton('options', [{ id: 'link', className: 'fa fa-th-list', command: function linkChap(e) { editor.DomCompone...
artf
If for focus you mean scrolling the view to the component, unfortunately, there is no such a method, but you can actually implement it by relying on editor.Canvas.getBody().scrollTop
Amir2828
Did you manage to make it work?
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.
Hi all, I'm writing an application that include grapesjs fron an ajax call in a specific div. Obviusly I'd use an external menu to navigate in the application. If I reopen the page that init the grapesjs firefox give me an error: "TypeError: this.frame.el.contentDocument is null". I hope I've explained myself. Is ther...
artf
Subscribe to #914 probably this will be fixed in the next release
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.
After searching for a while, I couldn't find how to change only the trait label without overwriting everything. This is my attempt that didn't work out I saw people overwriting the entire module, is that the way it should be done?
artf
Currently, to change the trait's label you have to do it on the component level
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.
Is it possible to have custom style property UI per element. For example, consider that I want the font-size to be shown as textbox for text components and as a radio for a custom component of mine. The font-size property can be in the same sector. How can this be achieved?
artf
Yes, I've used the same trick for the flex grid. In your Style Manager configuration create a property in this way then in your custom component model require the property
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.
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.
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
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...
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...
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.
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