How to add a new property to the typography section ?

[alessandroprudencio]

I want to add a custom property to my typography section, but I don't know how I can render an html input inside it for that, any ideas?

already tried doing this:

 styleManager.addProperty('typography', {
    name: 'Filter Sources',
    property: 'my-custom-prop',
  }, { at: 0 }); but without success

  styleManager.addType('my-custom-prop', {
    create({ props, change }) {
      console.log('hello');
      const el = document.createElement('div');
      el.innerHTML = '<input type="range" class="my-input" min="10" max="50"/>';
      const inputEl = el.querySelector('.my-input');
      inputEl.addEventListener('change', (event) => change({ event })); // change will trigger the emit
      inputEl.addEventListener('input', (event) => change({ event, complete: false }));
      return el;
    },
    emit({ props, updateStyle }, { event, complete }) {
      const { value } = event.target;
      const valueRes = `${value}px`;
      // Pass a string value for the exact CSS property or an object containing multiple properties
      // eg. updateStyle({ [props.property]: valueRes, color: 'red' });
      updateStyle(valueRes, { complete });
    },
    update({ value, el }) {
      el.querySelector('.my-input').value = parseInt(value, 10);
    },
    destroy() {
    },
  });

[artf]

First, you add the type, then you can use it.

styleManager.addProperty('typography', {
    name: 'Filter Sources',
    type: 'my-custom-prop',
    // ...
  }, { at: 0 });