BUG: When add a similar page just components ids will be changed

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

117

Reproducible demo link

https://jsfiddle.net/mirjavad/ctsx7zer/5/

Describe the bug

I wanted to create a clone action for a page and noticed this bug.

How to reproduce the bug?

1. Create several pages with the same component ID and CSS

pages: [{ id: 'page-1', name: 'Page 1', component: '<div id="comp1">Page 1</div>', styles: '#comp1 { color: red }', }, { id: 'page-2', name: 'Page 2', component: '<div id="comp1">Page 2</div>', styles: '#comp1 { color: green }', }, { id: 'page-3', name: 'Page 3', component: '<div id="comp1">Page 3</div>', styles: '#comp1 { color: blue }', }]

What is the expected behavior?

For components we should have "comp1", "comp1-2", "comp1-3" For CSS we should have "#comp1", "#comp1-2", "#comp1-3"

What is the current behavior?

For components the new IDs are correct but all new CSS have "#comp1"

<img width="476" alt="image" src="https://github.com/GrapesJS/grapesjs/assets/65819265/d732b0c5-4be8-40eb-8aeb-249514a483f0">

Code of Conduct

• I agree to follow this project's Code of Conduct