[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)
You were right, it works now. Thanks a lot. Great project!
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.
Issue #1781
add a font-size type prop
I'm trying to create a font-size type of property that I would like to add to the dimensions sector. Doing this: Getting the value and all,...
Issue #2514
[Question]: How to change device from dropdown to icon
I'm trying to replace the dropdown with icon for the devices following the example in the newsletter template yet it doesn't work.
Issue #3136
Create one more key in JSON
{ "type": "text", "status": "hovered", "content": "Insert your text here", "attributes": { "id": "ixx2" }, "activeOnRender": 0, "open": fal...
Issue #1144
[Question]: Custom property to change multiple settings
Is there a way to extend a current property or create a new one to change multiple properties? I have a component in which I would like to...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.