[QUESTION] Custom component default children

Hi,

I am trying to understand how I can achieve the following.

• Create a component with a default content as children.
• Create a block to add that component to the canvas.
• Edit the component children to anything else and save the HTML result.
• Reload the component in the editor later on and continue editing.

My issue is the following:

• I have tried using components and content in defaults.
• I have tried defining some custom logic in init function of the view of my component, to only append the default value is no components exists.

Both these methods, do not work, they work at first, but if I edit the text, save the values, grab the HTML and re-import it or reload it in the canvas using the components option of the editor, the default value gets inserted with the edited content (as children).

I don't understand why. I also noticed that this logic, only works for actual components and not text nodes, as comps.length does not detect text nodes as children.

      view: {
        init() {
          const comps = this.model.components();
          
          if (!comps.length) {
            comps.add('default value');
          }
       }
     }

I was only able to fix my issue by doing the following:

      view: {
        onRender() {
          if (!this.el.childNodes.length) this.el.innerHTML = 'Article Title';
        }
      }

The component looks like this:

<div my-attribute="" data-gjs-type="article-title">Article Title</div>

But I do not think it might be the best way to do this. I was wondering if anyone had suggestions or can let me know how they did this?

Thanks!