Add default device option. Closes GrapesJS#3679

src/canvas/model/Canvas.js

@@ -28,13 +28,10 @@ export default class Canvas extends Model {
 
   init() {
     const { em } = this;
-    this.set(
-      'frames',
-      em
-        .get('PageManager')
-        .getMain()
-        .getFrames()
-    );
+    const mainPage = em.get('PageManager').getMain();
+    const frame = mainPage.getMainFrame();
+    this.set('frames', mainPage.getFrames());
+    this.updateDevice({ frame });
   }
 
   _pageUpdated(page, prev) {
@@ -45,10 +42,10 @@ export default class Canvas extends Model {
     this.set('frames', page.getFrames());
   }
 
-  updateDevice() {
+  updateDevice(opts = {}) {
     const { em } = this;
     const device = em.getDeviceModel();
-    const model = em.getCurrentFrameModel();
+    const model = opts.frame || em.getCurrentFrameModel();
 
     if (model && device) {
       const { width, height } = device.attributes;

src/device_manager/config/config.js

@@ -1,4 +1,8 @@
 export default {
+  // The device `id` to select on start, if not indicated, the first available from `devices` will be used.
+  default: null,
+
+  // Default devices
   devices: [
     {
       id: 'desktop',

src/device_manager/index.js

@@ -80,9 +80,10 @@ export default () => {
       const { em } = c;
 
       devices = new Devices();
-      (c.devices || []).forEach(dv => this.add(dv.id || dv.name, dv.width, dv));
+      c.devices.forEach(dv => this.add(dv));
       this.em = em;
       this.all = devices;
+      this.select(c.default || devices.at(0));
       this.__initListen();
       em.on(chnSel, this._onSelect, this);