GrapesJS force type in HTML

Force Component type in HTML

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-custom-code"></script>
<div id="gjs"></div>

CSS

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

Babel + JSX

const extendCustomCode = editor => {
	const dc = editor.DomComponents;
  const ccM = dc.getType('custom-code').model;
  
  dc.addType('custom-code', {
    model: {
      getAttrToHTML() {
        const attrs = ccM.prototype.getAttrToHTML.apply(this, arguments);
        // Force the type in HTML
        attrs['data-gjs-type'] = 'custom-code';
        return attrs;
      }
    }
  });
}

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: [
  	'grapesjs-custom-code', 
    extendCustomCode
  ],
});