Issue #2360Opened October 30, 2019by MartinPutz1 reactions

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

Question

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.

Answers (2)

MartinPutzNovember 3, 20191 reactions

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

artfNovember 2, 20190 reactions

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);
},

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.