Invalid Id attribute on mjml image tag

When utilizing the asset manager to upload a new image, the asset manager attaches an id attribute to the mjml image tag. This id attribute causes an mjml validation error preventing the use of mjml strict validation in down stream applications.

Steps to reproduce:

• Navigate to https://grapesjs.com/demo-mjml.html

• Double click on the sciolino-paris-bw.jpg image opeing the asset manager

• choose an image of your choice replacing the Parisian photo

• View code via the </> icon and be alerted to a warning

• infringing line of code

<mj-column>
        <mj-image width="200px" src="//placehold.it/350x250/78c5d6/fff/image1.jpg" id="is2ee"/>
 </mj-column>

Open questions: I have yet to dig into the asset manager code to identify a fix. is the id a critical part of the asset manager functionality?

[ThomasPof]

Dirty fix : add regex to all editor.getHtml() function like that

editor.getHtml().replaceAll(new RegExp(/ id="([^"]+)"/g),'')

it will remove all ids. Not clean, but works!

[vinhnxv]

Dirty fix : add regex to all editor.getHtml() function like that

editor.getHtml().replaceAll(new RegExp(/ id="([^"]+)"/g),'')

it will remove all ids. Not clean, but works!

Thank you so much! I have reprocessed it:

editor.on('component:update:src', component => {
                    if (component.is('mj-image')) {
                        let code = editor.getHtml();
                        let componentId = component.getId()
                        let replace = ` id="${componentId}"`;
                        let re = new RegExp(replace, 'g');
                        code = code.replaceAll(re, '')
                        editor.setComponents(code);
                    }

                    return component;
                });

I try to use component.removeAttributes('id') or

const attr = component.getAttributes();
delete attr.id;
component.setAttributes(attr);

but still can not remove component ID.