FEAT: Page Manager Plugin

Feature: The ability to create multiple pages in Grapesjs.

Functional design

Globally:

• Include a link to the right of ‘Device [dropdown list]’ in the top banner that says ‘Current Page: <page-name>’
• Include a new menu item to the right of ‘Blocks’ in the right column. The icon will be something like the FA pages icon.
• Clicking either the menu item or current page link, displays the ‘Page Manager’ tab; a full width list of links that switch between pages.

Page Manager Tab:

• The current page will be highlighted in the list.
• Clicking a new page refreshes the main view and associated editor details.
• The current device settings should be maintained.
• The export/preview/layout/attributes functionality should refer to the newly selected page.
• Each page in the list will have a bin icon to delete, after a confirm dialog, this will be removed.

Visual design

• Links & text will use existing sizes/colors/classes as other components
• Page manager tab items will look similar to a top level tree item in the Layer Manager, but with a bin icon rather than a re-order/eye icon.
• New icons will be from the existing set of font awesome icons and highlighted in the same way.

Technical details

• Will be added via a plugin.
• The pages data will be stored similar to how page data is currently saved using the existing storage manager, but under a different key.

Starter comments from @artf ;

From @artf’s comment on a forked repo :

You can start from an array of pages and the index of the current one.

{
	current: 1,
	pages: [
		{ components: [], style: [] },
		{ components: [], style: [] },
		...
	]
}

When you change the page, at first you store the current template:

const currentPage = pages[currentIndex];
currentPage.components = editor.getComponents();
currentPage.style = editor.getStyle();

and then you change the editor with the next one

const nextPage = pages[nextIndex];
editor.setComponents(nextPage.components);
editor.setStyle(nextPage.style);

Is there an alternative at the latest version? No

Related Issues

• https://github.com/artf/grapesjs/issues/247
• https://github.com/ronaldaug/gramateria/issues/2

[artf]

The Pages module is now merged https://github.com/artf/grapesjs/pull/3411 and the new version will be soon released. A simple demo using the Pages API: https://codepen.io/artf/pen/XWpJQoY

[artf]

Sounds great, I really like the idea of having this one as a plugin, so if you think we need something to add (eg. some event) to make it work better, let me know.