BUG: HTML elements ids are incremented on different pages loaded in projectData
- Dominant language
- TypeScript
- Stars
- 26.2k
- Forks
- 4.6k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 6
Description
### GrapesJS version
- [X] 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.
```js
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:
```json
[
"
This is a simple title
"
This is another title
]
```
### Code of Conduct
- [X] I agree to follow this project's Code of Conduct
Contributor guide
Assessment
This issue has not been assessed yet.