Adding trait makes element uneditable

Hi,

I wanted to add a trait that enables me to edit the heading tag of a component.

I was able to achieve that by following below code

editor.DomComponents.addType('heading', {
    isComponent: el => el.tagName == 'H1' || el.tagName == 'H2' || el.tagName == 'H3' || el.tagName == 'H4' || el.tagName == 'H5' || el.tagName == 'H6',
    model: {
      defaults: {
        traits: [
        {			
          type: 'select',
          options: [
              { value: 'h1', name: 'Heading 1' },
              { value: 'h2', name: 'Heading 2' },
              { value: 'h3', name: 'Heading 3' },
              { value: 'h4', name: 'Heading 4' },
              { value: 'h5', name: 'Heading 5' },
              { value: 'h6', name: 'Heading 6' },
          ],
          label: 'Size',
          name: 'tagName',
          changeProp: true,
         }
        ]
      }
    }
  });
};

I found the solution on this issue

But it does not allow the component to be edited when it is double-clicked.

How to enable the editing of the heading component like the text component keeping the tag name feature in place.

-Thanks