Issue #916Opened March 1, 2018by tommedema1 reactions
outdated

[Question] why do layers not have element tag name?

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:

<img width="392" alt="screen shot 2018-03-01 at 11 27 28" src="https://user-images.githubusercontent.com/331833/36839889-902ba6da-1d43-11e8-8dd3-db4f832fc34a.png">

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

Is this desired behavior?

Answers (3)

maxtacco• March 2, 20181 reactions

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.

maxtacco• March 1, 20180 reactions

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• March 1, 20180 reactions

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...

3 answersUpdated February 17, 2020

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...

3 answersUpdated September 18, 2019

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...

3 answersUpdated June 25, 2020

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,...

3 answersUpdated May 6, 2020

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders