Defining new markup language

Hi @artf,
I want to define a new markup language like mjml to make design more easy and readable. I started with `<error>`tag as a POC. Write code below;
model:
`import Component from 'grapesjs/src/dom_components/model/Component';


const ComponentError = Component.extend({
  defaults: {
    type: 'error',
    tagName: 'error',
    ...Component.prototype.defaults
  },

}, {

  /**
   * Detect if the passed element is a valid component.
   * In case the element is valid an object abstracted
   * from the element will be returned
   * @param {HTMLElement}
   * @return {Object}
   * @private
   */
  isComponent(el) {
    var result = '';
    if (el.tagName == 'ERROR') {
      result = {type: 'error'};
    }
    return result;
  },

});

export default ComponentError;`

view:

`import ComponentView from 'grapesjs/src/dom_components/view/ComponentView';


const ComponentErrorView = ComponentView.extend({

  tagName: 'div',

  getChildrenSelector() {
    return '[data-role="content"]';
  },

  render(p, c, opts, appendChildren) {
    this.renderAttributes();
    this.el.innerHTML = `<span style="color:red">Error:</span><span data-role="content"></span>`;
    this.renderChildren(appendChildren);
    this.childNodes = this.getChildrenContainer().childNodes;
    return this;
  }
});

export default ComponentErrorView;`

When I define block as `content:'<error/>'`, it works. But for `content: '<error> The message </error>'` does not work properly. And editor cannot parse from element.