BUG: Page update event doesn't fire

[stljeff1]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

chrome

Reproducible demo link

https://jsfiddle.net/1hza4t9n/

Describe the bug

How to reproduce the bug?

1. init grapes
2. create event handler for when a page is updated.
3. Update the page
4. observe the event handler not firing

What is the expected behavior? event handler for page:update fires

What is the current behavior? nothing

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

const editor = grapesjs.init({
    container: '#gjs',
  fromElement: 0,

    pageManager: {
      pages: [
        {
          id: 'index',
          styles: 'body { color: red; }',
          component: ''
        }
      ]
    }, 
  height: '100%',

  storageManager: { type: 0},
  plugins: ['gjs-blocks-basic']
});
editor.on('page:update', (page, changes) => {
console.log('page update', page, changes)
})

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[artf]

Update the page

How do you update the page? Worth nothing, page:* events are only triggered for page models, not the content of the page, eg.

editor.Pages.getSelected().setName('My page');

[stljeff1]

any update, dragging a block, changing text color. changing text content. In the JS Fiddle, I drag a Text block, change content, and change color. I do not see an event triggering when i make these updates, so I am questioning my expectations

I am trying to understand the best way to build a custom Storage Manager. I have been using grapess for a long time, and have lots of "middleware" between grapes and my server/database. I am in the process of upgrading Grapes, so I am trying to understand the best EVENT to tap into to keep track of changes made.

Ultimately, I am learning more about the Store Manager, and I have confidence that will get me to where I need to go.

Nonetheless, I would like to understand Page Manager.... I will have to think about what you say about page model.

[artf]

Ok so page:update event is not what you need as it doesn't trigger on content change (so I'm closing the issue as the event is working as expected). Can you explain what kind of custom Storage manager you're trying to build? The Storage manager itself is already triggering on content change so I don't understand why you're trying to rebuild that functionality.

[stljeff1]

@artf -

I start with an object containing an array of pages, which have content and styles properties.

const window.myDataBucket = {
    pages: {
          id: string;
          content: string; // empty on initial page load
          styles: string; // empty on initial page load
    }[]
}

This bucket holds my page data temporarily, sort of like local storage, except that i'm only saving the raw HTML and styles, not the JSON representation of the canvas.

So anyway, this is my current datastore.

          editor.Storage.add('sf-storage', {
            async load(opts) {
              console.log('loading', opts);
              return {};
            },
            async store(data, changes):Promise<void> {
              const component = editor.Pages.getSelected().getMainComponent();

              const html = component.getInnerHTML(); 
              const css = editor.getCss();

              console.log(component, html, css);

              // Logic to handle html and css

            }
          })

Ultimately, I only care about the HTML and the Styles of the canvas. I want to know when it changes so I can handle it.

My understanding of Storage Manager is that it will give you everything in PageManager AND all the styles on all the pages. I'm not really interested in all that - just the updated styles and HTML of the current page. Furthermore, I am concerned about the about of data that will be returned to my store function if I have more than a few pages in PageManager. Ideally it would be great to know what page changed, and easily grab that page's html and styles to do what i need.

As for now, I'm still learning about the storage manager. I can do what I need with the code I posted above. Still, I would think some type of Page update event would be useful. Currently I do not understand the advantage of using multiple pages in PageManager if i can't be notified of changes to html and styles of ONLY the page that changed,.