GrapesJS / GrapesJS/grapesjs

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

Open
#4,837 10 comments 2 reactions 0 assignees View on GitHub
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 just a Lorem text: Lorem ipsum dolor sit amet
",
"

This is another title

Some other text
"
]
```

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.