How can we duplicate a whole page?

[damnslow]

Hi experts,

I'm trying to duplicate the current visible page to a new page using PageManager's api. I'm passing the components and the style while creating the new page from the current editor using getComponents and getStyle. But this doesn't seem to work.

I tried passing components using getHtml and getCss but the css gets weird (appends, and generates duplicate css) and this doesn't generate new element ids.

I tried to use editor.getComponents().models with copy-paste hack, but that seems to be copying it on the older page. It doesn't copy it to the new page.

What's the right way to duplicate a page? Please let me know any demo link is required.

[artf]

Try with something likes this:

// Get wrapper component of the selected page
const wrapper = editor.Pages.getSelected().getMainComponent();
// Add new page with a clone of the wrapper
editor.Pages.add({
 id: 'page-2',
 component: wrapper.clone(),
}, { select: true }); // select the new created page

Styles are stored in a shared instance so, for example, component-related styles are copied automatically and you can still use the same classes across all your pages.

[damnslow]

You are amazing @artf . This worked. Now the issue is, it doesn't generate the html element IDs again, unless I move the element(s). If I need to render the Page 2 in the same window as Page 1, it can create issues. Is there anyway to force regenerate HTML IDs?

And I can see that the getCss() is different for each page if the element ids are different. It's not shared. But that's okay, I can merge all page styles on the server side while rendering them on the client side.