GrapesJS with visible Head

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>

CSS

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

Babel + JSX

const visibleHead = (editor) => {
  editor.Components.addType('head', {
    view: {
      onRender() {
        const { style } = this.el;
        style.display = 'block';
        style.padding = '20px';
        style.border = '2px solid red';
      }
    }
  });

  editor.Components.addType('title', {
    isComponent: el => el.tagName === 'TITLE',
    view: {
      onRender() {
        const { style } = this.el;
        style.display = 'block';
        style.border = '2px solid blue';
      }
    }
  });

  editor.Components.addType('meta', {
    isComponent: el => el.tagName === 'META',
    view: {
      onRender() {
        const { el } = this;
        el.style.display = 'block';
        el.style.border = '2px solid green';
        this.el.innerHTML = `[META] ${el.getAttribute('name')}: ${el.getAttribute('content')}`;
      }
    }
  });

  editor.onReady(() => {
    editor.setComponents(`
              <!DOCTYPE html>
              <html>
                <head>
                  <title>My title</title>
                  <meta name="description" content="My description"/>
                </head>
                <body>
                  <h1>Hello world!</h1>
                </body>
              </html>
            `, { asDocument: true })
  });
}
const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  storageManager: false,
  plugins: ['gjs-blocks-basic', visibleHead]
});