FEAT: Page Manager Plugin

[jrkd]

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: '
• 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

• How to add multiple page  #247
• multipage manager [request] ronaldaug/gramateria#2

[jrkd]

Got the core of this functionality working this arvo.

@artf Let me know if this is still desired and I'll spend some more time on it in Jan.

Note to self,
TODO: add/remove page actions, visual tweaks, integrate with the storage manager & refactor code as a standalone plugin.

[cyberjoost]

I would love to try it out.

[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.

[lofcz]

Looking forward this, a much needed feature for this engine to be "complete".

[leijae]

this exists in Grapedrop... would be nice to get their plugins.

[lempax]

nice... looking forward for this one.

[artf]

this exists in Grapedrop... would be nice to get their plugins.

Unfortunately, I've made that feature more on the Grapedrop application-level, so there is no real plugin for that.

Now we're planning to add more features like symbols and data fetching components, and without an integrated page manager is quite hard and messy. Just an example, when you switch the page, you should change the UndoManager instance with another dedicated one (currently UndoManager's API doesn't even allow that).

So, @jrkd what I'm saying, I'll need to start a new module for pages but for sure it'll be only API centric thing, in order to allow switching page context easily (no UI-related stuff).

[artf]

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

[etamity]

@artf I found out after added styles to the canvas, when you switch between the pages, you can see the style only applied after the element rendered, wonder if you know how to fix this issue? Thanks

  canvas: {
    styles: ['https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css']
  },

https://codepen.io/etamity/pen/NWpKYPp