BUG: Unselected custom component will also listen to event 'styleable:change'

Question

GrapesJS version

I confirm to use the latest version of GrapesJS

What browser are you using?

chrome 100

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

How to reproduce the bug?

Drop two or more custom component <img width="1230" alt="Screen Shot 2022-06-10 at 3 11 54 PM" src="https://user-images.githubusercontent.com/48402616/173286267-09325ccd-6475-4b81-84ca-790a3f1b168b.png">
Restyle either of the component
The other unselected component will also listen to 'styleable:change' event <img width="1438" alt="Screen Shot 2022-06-10 at 3 10 29 PM" src="https://user-images.githubusercontent.com/48402616/173286325-4bd75e2e-21ef-4e3b-9d83-a78aea0674b0.png">

What is the expected behavior? The unselected component shouldn't listen to 'styleable:change' event of selected component

What is the current behavior? The unselected component listen to 'styleable:change' event of selected component

If is necessary to execute some code in order to reproduce the bug, paste it here below:

view: {
    init() {
        this.listenTo(this.em, `styleable:change`, (args, property) => {
          console.log(args,property)
        })
      }
}

Code of Conduct

I agree to follow this project's Code of Conduct

Answers (1)

artf• June 17, 20220 reactions

Hi @iamqinglong this is the expected behavior as you're creating a listener on the editor model, but you can check the selected component in this way

init() {
    const component = this.model;
    this.listenTo(this.em, `styleable:change`, (args, property) => {
        if (editor.getSelected() === component) {
            console.log(args, property);
        }
    });
}

BUG: Unselected custom component will also listen to event 'styleable:change'

Question

GrapesJS version

What browser are you using?

Reproducible demo link

Describe the bug

Code of Conduct

Answers (1)

Related Questions and Answers

BUG: Deleting a component without deleting its corresponding style, will adding new components later cause style conflicts?

BUG: Modals close on mouseup event outside of modal rather than a full click

BUG: Deleting a component without deleting its corresponding style

BUG: autoplay for youtube or vimeo doesn't work

Paid Plugins That Match This Issue

Browse Plugin Categories