Style Manager: Custom Composite type : Give sample example for padding type.

[mkandanmk7]

Could someone give me a comprehensive example of implementing the 'addType' function in a style manager for a custom composite property like Padding, because documentation typically focuses on single properties? Clear documentation for composite types is crucial for effectively understanding and utilizing this feature. Any insights or sample code shared would be greatly appreciated. Thanks!

editor.StyleManager.addType('my-custom-prop', {
// Create UI
create({ props, change }) {
const el = document.createElement('div');
el.innerHTML = <input type="range" class="my-input" min="${props.min}" max="${props.max}"/>;
const inputEl = el.querySelector('.my-input');
inputEl.addEventListener('change', event => change({ event })); // change will trigger the emit
inputEl.addEventListener('input', event => change({ event, partial: true }));
return el;
},
// Propagate UI changes up to the targets
emit({ props, updateStyle }, { event, partial }) {
const { value } = event.target;
updateStyle(${value}px, { partial });
},
// Update UI (eg. when the target is changed)
update({ value, el }) {
el.querySelector('.my-input').value = parseInt(value, 10);
},
// Clean the memory from side effects if necessary (eg. global event listeners, etc.)
destroy() {
},
});
};
this code only in documentation. I expect composite type padding property style.

[artf]

It's up to you to manage how to update the style based on your UI, eg. you can pass the style object to updateStyle in emit if you have to update multiple CSS properties.

[mkandanmk7]

Ok let me try with style obj in updateStyle Method as you mentioned above, Thank you @artf 🔥