[Question] How to add a new property type(integer) to StyleManager?

[MartinPutz]

Hi,
I am trying to create a custom StyleManager property with 'integer' type.

My ultimate goal is to 're-define' how certain units are displayed. For example, the user use unit 'X' and then the actual value would be different in pixels.(One of the reasons is the new dragmode since it is using pixels, so I want to keep all values in pixels but would allow the user to use other units).

I've checked the available functions and by extending the 'integer' number input I should be able to achieve that. But I get an error when I try to extend the 'integer' type.

The code I tried:

    const sm = editor.StyleManager;
    const propModel = sm.getType('integer').model;
    sm.addType('converted_integer', {
      model: propModel.extend({
        defaults: {
          ...propModel.prototype.defaults,
          units: [],
          unit: '',
          step: 1,
          min: '',
          max: ''
        },
        init() {
          this.listenTo(this, 'change', this.valueChanged);

        },
        valueChanged(value) {
          console.log("value changed",this);
        },
      }),
      view: sm.getType('integer').view.extend({

      }), 
      isType: (value) => {
        if (value && value.type == 'converted_integer') {
          return value;
        }
      },
     });

This gives an error: "Cannot set property 'ppfx' of undefined"

If I don't extend the view property it falls back to the default type without any issues. If I extend the 'stack' input type there are no issues at all.

What is required for a custom integer property like that?(GrapesJs version:0.15.8)

Thanks for your help.

[artf]

Actually, the integer property has a wrong implementation of init (I'll fix it in the next release).
For now, update your init method with the code below and try if it works

init() {
	propModel.prototype.init.apply(this, arguments);
	this.listenTo(this, 'change', this.valueChanged);
},

[MartinPutz]

You were right, it works now.
Thanks a lot. Great project!