Custom StorageManager using GrapesJs API Storage Manager

Question

I am new in GrapesJs & Trying to achieve the following:

I'm trying to implement a custom Storage Manager using Storage API of GrapesJs

I'm trying to get/set the data from/to localStorage (i.e. ResponseFromLocalStorage).

Below is my code:

const editor = grapesjs.init({
    container: '#gjs',
    fromElement: true,
    height: '500px',
    width: 'auto',
    storageManager: { 
        type: 'jekyllLocalStore'
    }
});

//Custom Storage
var storeMan=editor.StorageManager;
//set Config
storeMan.setAutosave=true;
storeMan.setStepsBeforeSave=1;

//Now Add Custom Storage Manager
storeMan.add('jekyllLocalStore', {
    load: function(ResponseFromLocalStorage, clb1) {
          var res = {};
          $.each(ResponseFromLocalStorage,function(key,val){
            console.log(key+'--->'+val);
            if(val) res[key] = val;
          });
          clb1(res); // might be called inside some async method
    },
    store: function(ResponseFromLocalStorage, clb2) {
           localStorage.setItem("wholeRes123",JSON.stringify(ResponseFromLocalStorage));
           clb2(); // might be called inside some async method
    }
});

While the code executes, the localStorage item named wholeRes123 is created successfully, with the data from ResponseFromLocalStorage, but at the time of storing the changes are not getting updated in wholeRes123.

My understanding is, if autoSave is set true, then the storing should begin when the editing is done, and then the store: should execute the code.

What am I doing wrong? Please help me out on this.

Thank you.

Answer 1

Your code may be saving, but it isnt loading. Try adding autoload to true, or try calling it after you save