How to make my custom tag as selectable and editable inside of canvas ?

Hi, I try to change my custom tag of ion-item has div in view properties but It doesn't work for me as I expected.

my custom Blocks is

editor.BlockManager.add('ion-form', {
      id: 'ion-form',
      label: `<svg  width="443px" height="70px" viewBox="0 0 150 100" enable-background="new 0 0 128 128"  id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><g><path d="M85.263,46.49L54.485,77.267L42.804,65.584c-0.781-0.782-2.047-0.782-2.828-0.002c-0.781,0.782-0.781,2.048,0,2.829    l14.51,14.513l33.605-33.607c0.781-0.779,0.781-2.046,0-2.827C87.31,45.708,86.044,45.708,85.263,46.49z M64.032,13.871    c-27.642,0-50.129,22.488-50.129,50.126c0.002,27.642,22.49,50.131,50.131,50.131h0.004c27.638,0,50.123-22.489,50.123-50.131    C114.161,36.358,91.674,13.871,64.032,13.871z M64.038,110.128h-0.004c-25.435,0-46.129-20.694-46.131-46.131    c0-25.434,20.693-46.126,46.129-46.126s46.129,20.693,46.129,46.126C110.161,89.434,89.471,110.128,64.038,110.128z"/></g></g>
        <div>ion-form</div>
</svg>`,
      category: 'Forms',
      content: {
        content: `<ion-list class="list list-md">
    <div  style="padding-top:10px; padding-right:10px; padding-left: 10px; padding-bottom: 10px">
      <ion-item class="item item-block item-md item-input">
        <div class="item-inner">
          <div class="input-wrapper">
            <ion-label class="label label-md" id="lbl-6">Username</ion-label>
            <ion-input type="text" class="input input-md" ng-reflect-type="text">
              <input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md"
                type="text" aria-labelledby="lbl-6" autocomplete="off" autocorrect="off" placeholder="" ng-reflect-type="text">
            </ion-input>
          </div>
        </div>
        <div class="button-effect"></div>
      </ion-item>
    </div>
    <div style="padding-top:10px; padding-right:10px; padding-left: 10px; padding-bottom: 10px">
      <ion-item class="item item-block item-md item-input">
        <div class="item-inner">
          <div class="input-wrapper">
            <ion-label class="label label-md" id="lbl-7">Password</ion-label>
            <ion-input type="password" class="input input-md" ng-reflect-type="password">
              <input class="text-input text-input-md" dir="auto" ng-reflect-klass="text-input" ng-reflect-ng-class="text-input-md"
                type="password" aria-labelledby="lbl-7" autocomplete="off" autocorrect="off" placeholder=""
                ng-reflect-type="password">
            </ion-input>
          </div>
        </div>
        <div class="button-effect"></div>
      </ion-item>
    </div>
  </ion-list>`,
        type: 'form-type',
        // activeOnRender: 1,
        classes: ['formLabel'],
        script: function () {},
        style: {
          'padding-top': '10px',
          'padding-right': '10px',
          'padding-left': '10px',
          'padding-bottom': '10px',
          'background-color': '#ffffff'
        },
        attributes: {
          title: 'My title'
        }
      },
      draggable: true,
      removable: true
    })

my custom view is

comps.addType('form-type', {

model: defaultType.model.extend({ tagName: ion-item }, { isComponent(el) { if(el.tagName == 'ion-item') return {type: 'form-type'} }, }),

view: defaultType.view.extend({ tagName: 'div' //<-- in canvas div will be used }) });

my screenshot is

in the above screenshot. u can see that I can't able to select the inner input box and label My expectations

1. need to select the inner input box for changing its type and placeholder name
2. make the inner label name has editable