Why do layers not have element tag name?
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/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/navigator/view/ItemView.js#L...
Read full answer below ↓Question
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 this seems to be true so far, the naming of the elements seems off. For example with this HTML:
Would be displayed like so:
<img width="254" alt="screen shot 2018-03-01 at 11 23 44" src="https://user-images.githubusercontent.com/331833/36839899-94fea32e-1d43-11e8-81b3-03356ae572d9.png">Whereas I had expect this tree:
- body
- h1
- text node
- div
- p
- text node
- p
- h1
Is this desired behavior?
Answers (3)
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/grapesjs/blob/49100b2f63411fb08d438d21a5f7ff9131773a75/src/navigator/view/ItemView.js#L28. I would create a config option in https://github.com/artf/grapesjs/blob/dev/src/navigator/config/config.js that could be set to 'name' by default and then use that option when getting tree node value from component's model. Hope this helps.
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.
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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1787
[Question] Change HTML of Panel buttons from span to button
I have created some Panels and would like to change the element of panel buttons from span to button as its more appropriate and looks bett...
Issue #574
Using Grapes with Zeronet.
Is there a way to use grapesjs with zeronet? https://zeronet.io/ You can create sites on zeronet but to add headers, banners and other thin...
Issue #921
[QUESTION] Select and focus an html element from a panel button
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 sec...
Issue #843
[QUESTION] - CssComposer - removes unused classes
hi @artf , I import a html , using import from grapesjs-preset-newsletter, with some css classes inside the <style> tag. After the import,...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.