BUG: Clone page prompt 'Converting circular structure to JSON'

[maxming2333]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 129.0.6668.101

Reproducible demo link

https://grapesjs.com/demo

Describe the bug

How to reproduce the bug?

open https://grapesjs.com/demo

run this script in DevTools:

const page = editor.Pages.getSelected();
const component = page?.getMainComponent()?.clone();
editor.Pages.add({
  name: '11111',
  component,
}, {
  select: true,
});

What is the expected behavior?

Successfully copied without error

What is the current behavior?

Successfully copied with error:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'o'
    |     property 'opts' -> object with constructor 'Object'
    |     property 'el' -> object with constructor 'HTMLHeadElement'
    --- property '__gjsv' closes the circle
    at JSON.stringify (<anonymous>)
    at o.storeData (grapesjs@0.22.1:2:1015087)
    at o.<anonymous> (grapesjs@0.22.1:2:1014457)
    at grapesjs@0.22.1:2:999571
    at Object.next (grapesjs@0.22.1:2:999676)
    at grapesjs@0.22.1:2:998551
    at new Promise (<anonymous>)
    at Pv (grapesjs@0.22.1:2:998293)
    at o.store (grapesjs@0.22.1:2:1014352)
    at o.updateChanges (grapesjs@0.22.1:2:1008885)

---

Deep cloning can use lodash: https://lodash.com/docs/4.17.15#cloneDeep

Please do not use JSON.parse(JSON.stringify(t))

---

In addition, my page actually has a lot of elements, and it is not just a few simple pages like the demo.

I found that it was very stuck when copying. After successfully page?.getMainComponent()?.clone(), the page got stuck directly.

Code of Conduct

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

[maxming2333]

In addition to the above method, is there any other way to copy the page?