Issue #2360💬 AnsweredOpened October 30, 2019by MartinPutz1 reactions

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

快速解答by MartinPutz1

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

Read full answer below ↓

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, 2019

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

artfNovember 2, 2019

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.