BUG: option resizable:true will change all the same components in canvas.

[imouou]

WARNING

READ and FOLLOW next 3 steps, then REMOVE them before posting the issue

1. Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
2. Do a quick SEARCH first, to see if someone else didn't open the same issue
3. All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED
4. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
5. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl

Version: grapesjs-0.17.22

Are you able to reproduce the bug from the demo?

• [*] Yes
• [ ] No

What is the expected behavior? When changing the size of an element, it should not cause other same components to change at the same time.

Describe the bug detailed

I saw that the resizable of image video is correct. This is the case with my customization. The reason for this is that the style name is used when the change is made.

What is the current behavior?

Describe the bug detailed

Are you able to attach screenshots, screencasts or a live demo?

      editor.DomComponents.addType('section', {
        isComponent: el => el.className === 'bui-section',
        // Model definition
        model: {
          // Default properties
          defaults: {
            tagName: 'div',
            name: "section",
            droppable: false, // Can't drop other elements inside
            resizable: true,
            attributes: { // Default attributes
              className: 'bui-section',
            },
            traits: [
              'name',
            ],
            components: `Text`,
          }
        }
      });
      editor.addComponents(`<div class="bui-section">BUI</div>`)

• [*] Yes (attach)
• [ ] No

[artf]

Use component first styling

grapesjs.init({
    ...
    selectorManager: {
          componentFirst: true,
          ...
        },
})