BUG: Device width is invalid by default

[imouou]

Thanks for #3673

I have a new bug feedback.

Version:. 0.17.22

Are you able to reproduce the bug from the demo?

• [* ] Yes
• [ ] No

What is the expected behavior? I want the default to be the width of the mobile device, so I configured min-width priority, but only the mobile width is displayed by default on the select box, and the page width has not changed. I use editor.setDevice('Mobile'); Yes, but in the new page management, the new page is also the same, I continue to use this method is invalid, so I think there should be a better way to deal with it.

Describe the bug detailed

What is the current behavior?

Describe the bug detailed

Are you able to attach screenshots, screencasts or a live demo?

• [* ] Yes (attach)
• [ ] No

var editor = grapesjs.init({
       ...
       mediaCondition: 'min-width',

        deviceManager: {
          devices: [{
              name: 'Mobile',
              width: '375px', // this value will be used on canvas width
              widthMedia: '', // this value will be used in CSS @media
          },{
            name: 'Desktop',
            width: '', // default size
            widthMedia: '', // this value will be used in CSS @media
          }]
        },
...
})

[artf]

Yeah, you're right, actually, there is no option to select the default device... For now, as a workaround, do it manually after init:

const editor = grapesjs.init({...});
editor.setDevice('Mobile');

And as you're using the mobile-first approach, you would need to fix your Desktop device:

{
  name: 'Desktop',
  width: '', // default size
  widthMedia: '376px', // Tells the editor which media to apply for bigger screens
}

In the next release, I'll add the default option in the device manager configuration

deviceManager: {
          // The device `id` to select on start, if not indicated, the first available from `devices` will be used.
          default: 'Mobile',
          devices: [...],
},