BUG: When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 104.0.5112.101 (Official Build) (arm64)

Video demo link

https://d.pr/i/27EgH2

Describe the bug

• When we resize an image with a class 'xyz', all the elements on the page with the same class also get resized because the editor adds height width CSS to those classes.
• But when I remove all the classes from the image, the editor uses the id to set height width CSS.
• I am loading a bootstrap template in the editor. Recording link: https://d.pr/i/27EgH2

Steps to reproduce:

• Load bootstrap template for editing.
• Add multiple divs with shadow class ex.(<div class='shadow'></div>)
• Place an image in one of the div which has shadow class and then try to resize the image.
• Notice all the divs moving/resized along with the image.
• Expected behavior only image should be resized.
• Using grapesjs-parser-postcss as well and added it in initialization code.
• Passing the CSS & javascript URLs using canvas option.

init method:

grapesjs.init({
            container: "#gjs",
             .....,
            canvas: {
                scripts: scriptUrls,
                styles: styleUrls,
            },
            parser: {
                parserPostCSS,
            },
        });

Code of Conduct

• I agree to follow this project's Code of Conduct