BUG: HTML elements ids are incremented on different pages loaded in projectData

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 109

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

Hello,

I noticed that when I load multiple pages in the projectData that have the same id used in the HTML, grapes will automatically increment the id on every page even though these are different pages.

To demonstrate this issue, you will find a piece of code below where I init grapesjs with a projectData containing two pages using identical ids on some HTML tags.

On the resulting HTML list, you can see the ids like body and main-title are incremented to body-2 and main-title-2 on the second page.

const editortest = grapesjs.init({
  headless: true,
  projectData: {
    pages: [
      {
        "frames": [
          {
            "component": {
              "type": "wrapper",
              "stylable": [
                "background",
                "background-color",
                "background-image",
                "background-repeat",
                "background-attachment",
                "background-position",
                "background-size"
              ],
              "attributes": {
                "id": "body"
              },
              "components": [
                {
                  "tagName": "section",
                  "components": [
                    {
                      "tagName": "h1",
                      "type": "text",
                      "attributes": {
                        "id": "main-title"
                      },
                      "components": [
                        {
                          "type": "textnode",
                          "content": "This is a simple title"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "components": [
                        {
                          "type": "textnode",
                          "content": "This is just a Lorem text: Lorem ipsum dolor sit amet"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        ],
        "id": "ljc0blhC1ZeiCYyY"
      },
      {
        "frames": [
          {
            "component": {
              "type": "wrapper",
              "stylable": [
                "background",
                "background-color",
                "background-image",
                "background-repeat",
                "background-attachment",
                "background-position",
                "background-size"
              ],
              "attributes": {
                "id": "body"
              },
              "components": [
                {
                  "tagName": "section",
                  "components": [
                    {
                      "tagName": "h1",
                      "type": "text",
                      "attributes": {
                        "id": "main-title"
                      },
                      "components": [
                        {
                          "type": "textnode",
                          "content": "This is another title"
                        }
                      ]
                    },
                    {
                      "type": "text",
                      "components": [
                        {
                          "type": "textnode",
                          "content": "Some other text"
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        ],
        "id": "1zKkQnGVzy8nKXKE"
      }
    ]
  }
})

let pages = editortest.Pages.getAll().map(page => {
  const component = page.getMainComponent();
  return editortest.getHtml({ component })
});

console.log(pages)

The pages result:

[
  "<body id=\"body\"><section><h1 id=\"main-title\">This is a simple title</h1><div>This is just a Lorem text: Lorem ipsum dolor sit amet</div></section></body>",
  "<body id=\"body-2\"><section><h1 id=\"main-title-2\">This is another title</h1><div>Some other text</div></section></body>"
]

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (3)

artf• January 27, 20252 reactions

hey @bgrand-ch I think one day all grapesjs entities will have a global uid, so in long-term, I'd expect this issue to be fixed 🤞

quentin-bettoum• January 27, 20231 reactions

At first, I wanted to generate all the pages together to have a single CSS output for all the pages. But now I'm trying another solution for the styles.

So for the id problem, generating each page separately could be a solution. Thanks for the idea.

bgrand-ch• September 26, 20231 reactions

Grapes to use some data attributes (something like data-grapes-id) as unique identifiers to leave the id free for some frontend scripts.

I like this idea 💯

BUG: HTML elements ids are incremented on different pages loaded in projectData

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (3)

Related Questions and Answers

BUG: Editor takes a long time to load (sometimes over 1 minute)

BUG: _undoexc status open

BUG: Style Manager doesn't display multiple rules for the same class

BUG: main.scss is missing in 0.21.6

Paid Plugins That Match This Issue

Browse Plugin Categories