Script execution in different contexts loses .this

[devjam1n]

function script() {
    this.addEventListener("click", function () {
        console.log("component clicked");
    });
}

export default function testComponent(editor) {
    editor.Components.addType("testComponent", {
        model: {
            defaults: {
                tagName: "section",
                attributes: {
                    class: "productCarousel",
                },
                components: `<h1>Test component</h1>`,
                script: script,
            },
        },
    });

Hi GrapesJS community
This scripts works as intented when I add the component in the editor and when i export the HTML. But whenever I try to edit an existing blogpost (in my case) it doesnt work.

const editor = grapesjs.init({
components: "HTML CONTAINING THE SCRIPT",

It console logs the .this but it loses it's reference right after. Am I missing something here?

[artf]

Sorry, but I'm not sure where is the issue, can you post a live demo with the steps to reproduce your issue

[devjam1n]

Hi, thanks for the quick reply!

My question can maybe be simplified.

Is it possible to do something async inside the basic script attached to a component? And also when I do getHtml() and later want to return to editing and init editor with this exported HTML, would the basic script behave in the same way?

Because I tried doing a get request inside basic script, but when it is done it no longer has the "this" reference.

Hope this clarifies my point.