Vincula rasgos personalizados a mis bloques personalizados

Hola, he creado un rasgo y bloques personalizados, pero intento vincular mis bloques en rasgos, no aparece en la opción de configuración

Mis bloques personalizados

 editor. BlockManager.add('ion-segment', {
      id: 'segmento iónico',
      etiqueta: '<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-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.004c27.638,0,0,0,50.123-22.489,50.123-50.131 C114.161,36.358,91.674,13.871,671,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.126C10.161,89.434,89.471,110.128,64.038.110.128"/></g></g>
        <div>Segmento iónico</div>
',</svg>
      categoría: 'Formas',
      contenido: '<div style="padding-top:10px;padding-bottom:10px;padding-left:10px;padding-right:10px">
      <ion-segment data-gjs-type="segmento-type" color="blue" class="segment segment-md segment-md-blue ng-valid ng-touched ng-dirty" ng-reflect-color="blue" ng-reflect-model="regular">
    <ion-segment-button class="segment-button" role="button" tappable="" value="regular" ng-reflect-value="regular" aria-pressed="true" style="transition: none 0s ease 0s;">
      <span>Regular</span>
      <div class="button-effect" style="transform: translate3d(242px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 488ms ease 0s, opacidad 342ms ease 146ms;"></div>
    </ion-segment-button>
    <ion-segmento-button, clase="segmento-botón" rol="botón" tappable="" valor="pinerest" ng-reflect-valor="pinerest" aria-pressed="false">
      <span>Pinterest</span>
      <div class="button-effect" style="transform: translate3d(196px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 488ms ease 0s, opacidad 342ms ease 146ms;"></div>
    </ion-segment-button>
  </ion-segment>',</div>
      activeOnRender: 1,
      clases: ['segmentLabel'],

Arrastrable: Cierto,
      Desmontable: Verdadero
    })

Mis rasgos personalizados

comps.addType('segment-type', {
model: defaultModel.extend({
        Extender propiedades predeterminadas
        defaults: Object.assign({}, defaultModel.prototype.defaults, {
          Solo puede ser eliminado dentro de elementos de 'forma'
          arrastrable: '*',
          No puedes meter otros elementos dentro
          Droppable: Cierto,
          script: función () {
            var segmentButton = document.getElementsByTagName('ion-segment-button');
            btn1 = segmentButton[segmentButton.length - 2];
            btn2 = segmentButton[segmentButton.length - 1];
            btn1.onclick = función () {
              btn1.classList.add("activado por segmento");
              btn2.classList.remove("activado por segmento");
            }
            btn2.onclick = función () {
              btn2.classList.add ("activado por segmento");
              btn1.classList.remove("activado por segmento");
            }
          },
          Rasgos (Escenarios)
          rasgos: [{
            Tipo: 'texto',
            etiqueta: 'segmentButton1',
            marcador de posición: 'Regular',
            nombre: 'segmentButton1',
            cambioprop: 1
          }, {
            Tipo: 'texto',
            etiqueta: 'segmentButton2',
            marcador de posición: 'Urgente',
            nombre: 'segmentButton2',
            cambioprop: 1
          }],
        }),
        toHTML: función () {},
        init() {
          this.listenTo(this, 'change:segmentButton1', this.firstButton);
          this.listenTo(this, 'change:segmentButton2', this.secondButton);
        },
        firstButton() {
          console.log('editor por defecto get component area --------- ', editor.getSelected())
          Haz algo 
          var segmentButton = document.getElementsByTagName('ion-segment-button');
          btn1 = segmentButton[segmentButton.length - 2];
        },
        secondButton() {
          var segmentButton = document.getElementsByTagName('ion-segment-button');
          btn2 = segmentButton[segmentButton.length - 1];
        },

}, {
        isComponent: function (el) {
          if (el.tagName == 'ION-SEGMENT-BUTTON') {
            return {
              Tipo: 'Tipo de segmento'
            };
          }
        },
      }),

Definir la vista
      vista: defaultType.view,
    });

¿Alguien puede ayudarme, por favor?

Gracias