How to listen to notebook changes?

[stefaneidelloth]

Lets say I created an instance of StarboardEmbed with

const el = new StarboardEmbed({
        notebookContent: "# %% [javascript]\n3+5\n",
        src: "https://cdn.starboard.gg/npm/starboard-notebook@0.13.2/dist/index.html"
    });

How can I listen to changes made by users? Following code does not work:

el.onchange =() =>{
  console.log("Notebook content changed");
}

[gzuidhof]

Have a look here: https://github.com/gzuidhof/starboard-wrap/blob/master/src/embed.ts#L42-L78

You can pass in a bunch of additional options to the StarboardEmbed constructor - including onContentUpdateMessage, as well as a message when the user wants to save.

[stefaneidelloth]

Thank you. Following code works fine:

let starboardUrl = "https://cdn.starboard.gg/npm/starboard-notebook@0.14.2/dist/index.html";      
let element = new StarboardEmbed({
    notebookContent: "# %% [javascript]",
    src: starboardUrl,
    onContentUpdateMessage: (message) => {
        let notebookContent = message.content;
        console.log("Notebook content changed:");
        console.log(notebookContent);
    }
});

(In a future version you might want to extend the custom element StarboardEmbed with a classical onchange listener. That would better fit my workflow/parent interface because I add the listeners after construction of the element. In my opinion, the users of StarboardEmbed should not need to know that there is some iframe messaging going on inside it.)