BUG: Auto save is working partially and stops working after inserting text

[maxtsh]

hello guys. I am using this awesome project for a production app written with React.js, So I integrated it inside my app. everything works fine but I have a problem with auto saving the editor data on each change to editor.

OS: Windows 10 Browser: Chrome 90 GrapesJS version: 0.17.03 latest on 26/04/2021

EDITOR INSTANCE:

    const GE = Grapes.init({
      container: '#editor',
      fromElement: false,
      plugins: [GsPresetEmail],
      pluginOpts: {
        GsPresetEmail: {},
      },
      colorPicker: { appendTo: 'parent', offset: { top: 26, left: -166 } },
      storageManager: {
        id: 'gjs-',
        type: 'simple-storage',
        autosave: true,
        stepsBeforeSave: 1,
        storeComponents: true,
        storeStyles: true,
        storeHtml: true,
        storeCss: true,
      },
    });

EDITOR CUSTOM STORAGE:

    editor.StorageManager.add('simple-storage', {
        load(keys, clb, clbErr) {
          try {
            const result = {};
            keys.forEach(key => {
              const value = SimpleStorage[key];
              if (value) {
                result[key] = value;
              }
            });
            clb(result);
          } catch (e) {
            console.log('Load Error ===>', e.message);
            clbErr(`Error while parsing JSON : ${e.message}`);
          }
        },
        store(data, clb, clbErr) {
          try {
            Object.keys(data).forEach(d => {
              SimpleStorage[d] = data[d];
            });
            const html = editor.runCommand('gjs-get-inlined-html');
            const template = InjectHtml(html);
            setCacheHTML({
              json: SimpleStorage,
              html: template,
            });
            clb();
          } catch (e) {
            console.log('Store Error ===>', e.message);
            clbErr(`Error while parsing JSON : ${e.message}`);
          }
        },

I uses the docs to setup a custom storage which should update my state on change.

The issue is that it works when I drag and drop some components like sections, divider, button but as soon as I add a text or image it stops auto saving.

I use a button to call editor.store(); each time but I want to have auto saving feature fully working and not using any extra stuff.

[artf]

Thanks @maxtsh for the report, there is actually an issue with those old blocks from the basic plugin which breaks the storage counter. I'll push the fix soon. For now, as a hotfix, update those blocks in this way.

editor.Blocks.get('text').set({
      activate: true,
      select: true,
      content: {
        type: 'text',
        content: 'Insert your text here',
        style: { padding: '10px' },
      }
    });
editor.Blocks.get('image').set({
      activate: true,
      select: true,
      content: { type: 'image' }
    });