GrapesJS Component Traits per Device

by artur_arseniev

HTML

<script src="https://unpkg.com/grapesjs"></script>
<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs-blocks-basic"></script>
<div id="gjs">
  <div style="padding: 25px">Hello World!!!</div>
</div>

CSS

body, html {
  margin: 0;
  height: 100%;
}

Babel + JSX

const plugin = editor => {
	editor.DomComponents.addType('test-block', {
  	model: {
    	defaults: {
      	traits: ['trait-default'],
        components: 'Test block content',
      },
      init() {
        this.changeTraits = this.changeTraits.bind(this);
        editor.on('change:device', this.changeTraits);
      },
      removed() {
      	editor.off('change:device', this.changeTraits);
      },
      changeTraits() {
        let traits = [];
        
        switch (editor.getDevice()) {
        	case 'Tablet':
	          traits = ['trait-tablet-1', 'trait-tablet-2'];
          	break;
          default:
          	traits = ['trait-default'];
          	break;
        }
        
				this.set('traits', traits)
      }
    }
  })
};

const editor = grapesjs.init({
	container: '#gjs',
  fromElement: 1,
  height: '100%',
  storageManager: { type: 0 },
  plugins: [ plugin ]
});

editor.BlockManager.add('testBlock', {
	label: 'Box',
	content: { type: 'test-block' },
});