When the component's view modifies the HTML, text components are no longer editable

I tried the above, as follows:

  var textType = comps.getType('text');
  comps.addType('section-test', {
    // Define the Model
    model: defaultModel.extend({
      // Extend default properties
      defaults: Object.assign({}, defaultModel.prototype.defaults, {
        draggable: 'body, body div'
      }),
    },
    {
      isComponent: function(el) {
        if(el.tagName == "SECTION"){
          return {type: 'section-test'};
        }
      },
    }),

    // Define the View
    view: textType.view.extend({
      // The render() should return 'this'
      render: function () {
        // Extend the original render method
        defaultType.view.prototype.render.apply(this, arguments);
        //this.el.placeholder = 'Text here'; // <- Doesn't affect the final HTML code
        var html = this.el.innerHTML;
        html = "<h1>ABC</h1>" + html;
        this.el.innerHTML = html;

        return this;
      },
    })
  });
  blockManager.add('section-typography', {
    label: 'Text section',
    category: 'Sections',
    content: `<section class="bdg-sect">
      <h1 class="heading">Click here to edit title</h1>
      <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
      </section>`,
    attributes: {class:'gjs-fonts gjs-f-h1p'}
  });    

But I'm still unable to edit the text in the h1 and p elements after dropping the component on the canvas. :(

Sorry I didn't notice this

var html = this.el.innerHTML;
html = "<h1>ABC</h1>" + html;
this.el.innerHTML = html;

you basically remove elements with models and attach a new string as HTML (the editor can't access their models anymore). If you want to add a new component you should do it via models (eg. view.model.append('<div>stuff</div>'))

You can extend the Text Component instead of the base one

const defaultType = comps.getType('default');
const textType = comps.getType('text');
...
view: textType.view.extend({ ...