HAZAÑA: Plugin para el Gestor de Páginas

Característica: La capacidad de crear varias páginas en Grapesjs.

Diseño funcional

A nivel global:

• Incluye un enlace a la derecha de 'Dispositivo [lista desplegable]' en el banner superior que diga 'Página actual: <page-name>'
• Incluye un nuevo elemento del menú a la derecha de 'Bloques' en la columna derecha. El icono será algo así como el de icono de páginas FA.
• Al hacer clic en el elemento del menú o en el enlace de la página actual, se muestra la pestaña 'Administrador de páginas'; Una lista de ancho completo de enlaces que cambian entre páginas.

Pestaña de Gestor de Páginas:

• La página actual se resaltará en la lista.
• Al hacer clic en una nueva página, se actualiza la vista principal y los detalles asociados del editor.
• Se deben mantener los ajustes actuales del dispositivo.
• La funcionalidad de exportación/vista previa/diseño/atributos debe referirse a la página recién seleccionada.
• Cada página de la lista tendrá un icono de papelera para eliminar, tras un cuadro de confirmación, este se eliminará.

Diseño visual

• Los enlaces y el texto usarán tamaños/colores/clases existentes como otros componentes
• Los elementos de la pestaña del administrador de páginas se parecerán a un elemento de árbol de nivel superior en el Administrador de Capas, pero con un icono de bandeja en lugar de un icono de reordenación/ojo.
• Los nuevos iconos serán del conjunto existente de iconos de fuente impresionante y se resaltarán de la misma manera.

Detalles técnicos

• Se añadirá mediante un plugin.
• Los datos de las páginas se almacenarán de forma similar a cómo se guardan actualmente usando el gestor de almacenamiento existente, pero bajo una clave diferente.

Comentarios iniciales de @artf ;

Del comentario de @artf sobre un repositorio bifurcado:

Puedes empezar desde un array de páginas y el índice de la actual.

{
actual: 1,
páginas: [
{ componentes: [], estilo: [] },
{ componentes: [], estilo: [] },
		...
	]
}

Cuando cambias la página, al principio guardas la plantilla actual:

const currentPage = páginas[currentIndex];
currentPage.components = editor.getComponents();
actualPage.style = editor.getStyle();

y luego cambias el editor con el siguiente

const nextPage = páginas[nextIndex];
editor.setComponents(nextPage.components);
editor.setStyle(nextPage.style);

¿Hay alguna alternativa en la última versión? No

Problemas relacionados

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