Added ability to preselect page on project load. Closes #5463

GrapesJS · Mar 19, 2024 · b9fe69f · b9fe69f
1 parent 0752502
commit b9fe69f
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 7 deletions.
diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts
@@ -42,7 +42,7 @@ export default class Canvas extends ModuleModel<CanvasModule> {
 
   init() {
     const { em } = this;
-    const mainPage = em.Pages.getMain();
+    const mainPage = em.Pages._initPage();
     this.set('frames', mainPage.getFrames());
     this.updateDevice({ frame: mainPage.getMainFrame() });
   }

diff --git a/src/pages/index.ts b/src/pages/index.ts
@@ -93,7 +93,7 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
     const opt = { silent: true };
     const configPages = config.pages?.map(page => new Page(page, { em, config })) || [];
     pages.add(configPages, opt);
-    const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this.getMain();
+    const mainPage = !pages.length ? this.add({ type: typeMain }, opt) : this._initPage();
     mainPage && this.select(mainPage, opt);
   }
 
@@ -242,6 +242,10 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
     return result;
   }
 
+  _initPage() {
+    return this.get(this.config.selected!) || this.getMain();
+  }
+
   _createId() {
     const pages = this.getAll();
     const len = pages.length + 16;

diff --git a/src/pages/types.ts b/src/pages/types.ts
@@ -1,7 +1,16 @@
 import { ModuleConfig } from '../abstract/Module';
+import { PageProperties } from './model/Page';
 
 export interface PageManagerConfig extends ModuleConfig {
-  pages?: any[];
+  /**
+   * Default pages.
+   */
+  pages?: PageProperties[];
+
+  /**
+   * ID of the page to select on editor load.
+   */
+  selected?: string;
 }
 
 export interface SelectableOption {

diff --git a/test/specs/pages/index.ts b/test/specs/pages/index.ts
@@ -1,6 +1,7 @@
 import { ComponentDefinition } from '../../../src/dom_components/model/types';
 import Editor from '../../../src/editor';
 import EditorModel from '../../../src/editor/model/Editor';
+import { PageProperties } from '../../../src/pages/model/Page';
 
 describe('Pages', () => {
   let editor: Editor;
@@ -70,7 +71,7 @@ describe('Pages', () => {
     let idComp2 = 'comp2';
     let comp1: ComponentDefinition;
     let comp2: ComponentDefinition;
-    let initPages;
+    let initPages: PageProperties[];
     let allbyId: ReturnType<Editor['Components']['allById']>;
 
     const createCompDef = (id: string): ComponentDefinition => ({
@@ -116,8 +117,8 @@ describe('Pages', () => {
         },
       });
       em = editor.getModel();
-      domc = em.get('DomComponents');
-      pm = em.get('PageManager');
+      domc = em.Components;
+      pm = em.Pages;
       pm.onLoad();
       allbyId = domc.allById();
       initCmpLen = Object.keys(allbyId).length;
@@ -145,7 +146,21 @@ describe('Pages', () => {
       // Number of wrappers (eg. 3) where each one containes 1 component and 1 textnode (3 * 3)
       expect(initCmpLen).toBe(initPages.length * 3);
       // Each page contains 1 rule per component
-      expect(em.get('CssComposer').getAll().length).toBe(initPages.length);
+      expect(em.Css.getAll().length).toBe(initPages.length);
+    });
+
+    test('Change initial selected page', () => {
+      const selected = 'page-3';
+      editor = new Editor({
+        pageManager: {
+          pages: initPages,
+          selected,
+        },
+      });
+      pm = editor.getModel().Pages;
+      pm.onLoad();
+      pm.getSelected();
+      expect(pm.getSelected()?.id).toBe(selected);
     });
   });
 });