GrapesJS Placeholder components

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 class="my-plh">
    <h1>I'm a header placeholder</h1>
  </div>
  <div style="padding: 25px">
    <div>Content here</div>
  </div>
  <div class="my-plh">
    <h1>I'm a footer placeholder</h1>
  </div>
</div>

CSS

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

Babel + JSX

const plhPlugin = editor => {
	const { Components } = editor;
  
  // Create the placeholder component
  Components.addType('plh', {
      model: {
        defaults: {
        	style: {
	          border: '15px solid #d382dc', 
            'pointer-events': 'none',
          },
					highlightable: false,
          layerable: false,
        	propagate: ['highlightable']
        },
        toHTML() {
					return '';
				}
      },
      
      isComponent: (el) => el.classList && 
     		el.classList.contains('my-plh'),
    });
  	
    // Let's also avoid user dropping stuff inside the wrapper node
    Components.addType('wrapper', {
    	model: {
      	defaults: {
        	droppable: false,
          selectable: false,
          hoverable: false,
        }
      }
    });
};

const editor = grapesjs.init({
	container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  layerManager: { showWrapper: false },
  plugins: ['gjs-blocks-basic', plhPlugin],
});