I need help with box-model custom propertyType con the styleManager

[glaprida]

Hi there, I want to create a custom propertyType with https://grapesjs.com/docs/api/style_manager.html#addtype

this would be a collection of inputs to control both margin and padding in the four directions; and visually I want it to be something like this:

 ________________________________
|     _________ MT _________     |
|    |     ____ PT ____     |    |
| ML | PL |____________| PR | MR |
|    |_________ PB ________ |    |
|______________ MB ______________|

I want to be able to type in each field, but also be able to drag to increase/decrease the value.
I want to only be able to type numbers, but margins should accept the 'auto' value that should be set via click on an 'auto' button.

I kinda know how to do all of this outside of grapes (the html + css using css grid; increasing the value by dragging with js; etc) but I cant't quite figure out how to get it into grapes.

Thanks !!

[glaprida]

I have made some progress but now I'm stuck

I have defined my custom type

const customType = (editor) => {
  editor.StyleManager.addType('box-model', {
    // Create UI
    create({ props, change }) {
      const el = document.createElement('div');
      el.innerHTML = `
        <div  style="display: grid; padding: 0; grid-template-columns: repeat(5,1fr); grid-template-rows: repeat(5,35px); background-image: url(/admin/assets/img/box_model.svg); background-repeat: no-repeat; background-position: center center; background-size: 102% 102%; border: 1px solid #000; position: relative;">
          <div style="grid-row: 1; grid-column: 2 / span 3;">
            <label>MT</label>
            <input type="text" id="box-marginTop" placeholder="0" />
          </div>

          <div style="grid-row: 2 / span 3; grid-column: 5;">
            <label>MR</label>
            <input type="text" id="box-marginRight" placeholder="0" />
          </div>

          <div style="grid-row: 5; grid-column: 2 / span 3;">
            <label>MB</label>
            <input type="text" id="box-marginBottom" placeholder="0" />
          </div>

          <div style="grid-row: 2 / span 3; grid-column: 1;">
            <label>ML</label>
            <input type="text" id="box-marginLeft" placeholder="0" />
          </div>

          <div style="grid-row: 2; grid-column: 3;">
            <label>PT</label>
            <input type="text" id="box-paddingTop" placeholder="0" min="0" />
          </div>

          <div style="grid-row: 3; grid-column: 4;">
            <label>PR</label>
            <input type="text" id="box-paddingRight" placeholder="0" min="0" />
          </div>

          <div style="grid-row: 4; grid-column: 3;">
            <label>PB</label>
            <input type="text" id="box-paddingBottom" placeholder="0" min="0" />
          </div>

          <div style="grid-row: 3; grid-column: 2;">
            <label>PL</label>
            <input type="text" id="box-paddingLeft" placeholder="0" min="0" />
          </div>
        </div>
      `;
      const inputEls = el.querySelectorAll('input');
      inputEls.forEach((inputEl) => {
        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 { target } = event;
      const value = target.value;
      const propertyName = target.id.replace('box-', '');
      //console.log(`emit: ${propertyName}:${value}px`);
      updateStyle(`${propertyName}:${value}px`, { partial });
    },
    // Update UI (eg. when the target is changed)
    update({ value, el }) {
      // not sure if I need this
    },
    // Clean the memory from side effects if necessary (eg. global event listeners, etc.)
    destroy() {},
  });
};

I load it via the plugins array and add it to the style manager

const editor = grapesjs.init({
// editor settings
plugins: [
    customType,
    // other plugins
},

styleManager: {
    appendTo: '#properties-styles',
    sectors: [
      {name: 'Dimensions',
        open: true,
        properties: [
          {
            type: 'box-model',
            property: 'box-model',
            label: 'Box Model'
          },
        ]
      }]
},

});

and also my custom blocks have the 'box-model' property as stylable, so when I select them the box model editor it actually shows.

this kinda works, but when I update any of the inputs inside the box model editor, the css it produces for the target element is:

box-model: marginTop:10px;

which is obviously not a valid css property,
and when what I need is:

margin-top: 10px;

As far as I can see there's something wrong with my emit function, but I don't know how to make it right.

Any help would be greatly appreciated!!

[artf]

You can pass your style object to updateStyle instead of the string updateStyle({ 'margin-top': '...' }) so it won't rely on the property name