BUG: Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome 104.0.5112.79

Reproducible demo link

https://jsfiddle.net/gvrnw2c3/4/

Describe the bug

How to reproduce the bug?

I’m currently unable to reproduce the bug using jsfiddle, which leads me to believe it’s a problem with Chrome, but I’ll continue trying to reproduce this.

Within my project as shown in the video:

1. Click on a ‘conditional-text’ component (custom component type I’ve added)
2. Click on ‘Open Conditionals’ button then within the dialog that appears on the screen, click ‘Apply’
3. Hover the cursor over the ‘conditional-text’ component

In JSFiddle (currently doesn’t crash but I will continue to test):

1. Click on the ‘Hello World’ text component
2. Click on the ‘Convert to Conditional’ button at the bottom of the page
3. Click on the newly created ‘conditional-text’ component (with the text “Open conditionals to choose text”)
4. Click on the ‘Change Conditional’ button at the bottom of the page
5. Move the cursor over the ‘conditional-text’ component (currently doesn’t crash but I will continue to test)

What is the expected behavior?

The app should continue running as normal (works fine in GrapesJS v18.4)

What is the current behavior?

The whole screen crashes as soon as the cursor is over the ‘conditional-text’ component and after around 5 seconds the following appears:

Here is the screen capture of the issue:

https://user-images.githubusercontent.com/67364267/182598233-29209c1b-b99e-438c-9d9a-3e46dd750a31.mov

After some (unsuccessful) debugging, I also found the following:

The commented out lines in the following methods (which are triggered upon clicking the ‘Apply’ button as seen in the video) seemed to be responsible for the crash. It’s worth mentioning that all of these lines, when not commented out, affect the appearance of the component in the canvas (i.e. they change the visible text), so perhaps it’s something to do with the view of the component being rendered. The other lines below do not result in the crash :

applyIfCondition(conditionCode, conditionObjects) {
      const selectedComponent = this.editor.getSelected()
      if (selectedComponent.isInstanceOf("conditional-text")) {
        console.log(conditionCode, ...conditionObjects)
        selectedComponent.addAttributes({ liquidtag: "if" })
        // selectedComponent.components(conditionCode)
        selectedComponent.set("conditionObjects", conditionObjects)
        selectedComponent.set("isNew", false)
        // selectedComponent.getView().render()
      }
    },
    selectIfCondition(displayText, selectedIndex) {
      const selectedComponent = this.editor.getSelected()
      if (selectedComponent.isInstanceOf("conditional-text")) {
        console.log(displayText, selectedIndex)
        // selectedComponent.set("displayedText", displayText)
        selectedComponent.set("selectedConditionIndex", selectedIndex)
        // selectedComponent.getView().render()
      }
    },

So it’s the following lines that seem to cause the crash, from what I can tell so far - if I uncomment any of these lines from the methods, the text inside the component changes upon clicking apply and the crash happens when hovering over the component :

selectedComponent.components(conditionCode) selectedComponent.getView().render() selectedComponent.set("displayedText", displayText) selectedComponent.getView().render()

N.B. The custom ‘conditional-text’ component in my project is the same as in the jsfiddle - I have tried to reproduce the error by simplifying the rest of the code (I didn’t want to copy over all of the logic from my project), but the code that matters is still being executed.

Please let me know if you require any further information.

Code of Conduct

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

[benryanwilliams]

Thanks @artf, all working perfectly now upon declaring the editor outside of the Vue instance.

[artf]

Thanks guys, I was actually able to reproduce it by wrapping the example inside Vue but I’m not sure exactly why is stuck in the loop here. At first look, it seems to be related to Vue’s Proxy observers. By comparing the demo with the previous grapesjs version it looks like not all parts are transformed in Proxies and that prevents it from being stuck. As a quick workaround here would be to put the editor outside of Vue to prevent transforming all objects into proxies.

let editor;
Vue.createApp({
 mounted() {
   editor = grapesjs.init({ ... });
    // ...
  },
 // ..
}).mount('#app')