Image size does not respect specified units

[shmsula]

Description: When changing the image size units to percent, the image and the table cell do not adjust accordingly and remain in pixels.

Steps to reproduce:

Open https://grapesjs.com/demo-mjml.html
Select the image with car sciolino-paris-bw.jpg
Change the units to percent, and the value to 50
Observe that the td size will be set to 50px and the image to 50 without any units, instead of 50% of the parent element.

[pepoteloko]

Reading the MJML documentation I understand that it only supports pixels. If this is correct, the problem is the dropdown, which should only allow pixels.

https://documentation.mjml.io/#mj-image

Is there an easy way to be able to hide the other units in the selector?

[pepoteloko]

editor.on('component:selected', (model) => {
  if (model.get('type') === 'mj-image') {
    const styleManager = editor.StyleManager;
    const sectors = styleManager.getSectors();

    let redraw = false;
    sectors.forEach(sector => {
      sector.properties.forEach(property => {
        if (property.attributes.id === 'width' || property.attributes.id === 'height') {
          redraw = true;
          property.attributes.units = ['px'];
        }
      });
    });

    if (redraw) {
      styleManager.render();
    }
  }
});

With this piece of code I have hidden all the non-pixel units of the mj-image components.