Cannot add spaces to extended button component based on text component.

Hello guys,

First of all i would like to express my gratitudes for this amazing tool. I have extended button component based on text component so as to can edit the content of button manually without using traits.
The code for the extended button component is this:

var comps = editor.DomComponents;
var defaultType4 = comps.getType('text');  
    
editor.DomComponents.addType('button', {
  
 model:{
      defaults: {
          tagName: 'button',
          classes: ['.pointer'], //Add click pointer on hover,
      },
 },
 
  extend: 'text',
  isComponent: function (el) {
      if (el.tagName === 'BUTTON')
          return {type: 'button'};
  },
  view: defaultType4.view.extend({

    events: {
      dblclick: 'onActive',
      input: 'onInput',
      dragstart: 'handleDragStart',
      click: function() {
         /*Click function */
      }
    },
  })  

})

At this point i am capable of edit content of button components manually. Now the problem that i am dealing with is that i can not add space characters inside content of buttons.Can anyone help me ?