Set component's empty state

I've done something similar in this way using only CSS

const doc = editor.Canvas.getDocument();

...addType('cc', {
 model: {...},
 view: {
  init() {
   ...
   const stl = doc.querySelector('style#cc-id');

   if (!stl) {
    doc.body.insertAdjacentHTML('beforeend', `
     <style id="cc-id">
      .cc-class:empty:after {
         content: "Empty block";
         text-align: center;
         display: block;
       }
      </style>
     `);
    } 
  }
 }
})

Hi Josh, I like your idea.

No expert here, but here are couple thoughts:

Basically I would add some kind of flag to the component itself.

idea 1) If the component is some kind of container (i.e. div), add a <p class="empty-message">Drag an element here</p> to it, then when a new component is added, you could use the editor event component:addand check for any siblings with the empty-message class and remove it.

idea 2) Add a empty-message class to the component itself, then use CSS :before/:after to add content to it. Then remove the componentś parent empty-message class using JS, similarly to idea 1.

Hope it helps.