How to append custom data to the projectData with storage manager?

[rainerregan]

Hi, I am developing a custom plugin for installing a custom font. Here are what I did:

1. I created a custom modal
2. I created a command to show the custom modal.
3. I created a custom command to save the font to the local storage.
4. I created a custom storage manager (local)

When I call the custom command to save the data, it logs successful, but when I check the project data using browser tools, the data did not added to the project data saved on the session storage.

This is my custom storage plugin

import { Editor, Plugin } from "grapesjs";

export const storagePlugin: Plugin = (editor: Editor) => {
  editor.Storage.add('wpStorage', {
    async load(options = {}) {
      const key: string = options.key || 'wpProjectSessionStorage';
      return JSON.parse(sessionStorage.getItem(key) ?? '{}');
    },

    async store(data, options = {}) {
      console.log('Storing data to sessionStorage:', data);
      sessionStorage.setItem(options.key, JSON.stringify(data));
    }
  });
}

This is editor options

{
  showOffsets: true,
  showOffsetsSelected: true,
  storageManager: {
    type: 'wpStorage',
    options: {
      wpStorage: { key: 'myKey' }
    }
  },
  modal: {
    custom: true,
  },
  canvas: {
    customSpots: {
      hover: true,
      select: true,
      target: true,
      // spacing: true,
      // resize: true,
    }
  }
};

And this is my font custom command where I save the data:

  editor.Commands.add('save-fonts', {
    run: async (editor, sender, options) => {
      if (!options?.fonts || !Array.isArray(options.fonts)) {
        console.error('No fonts provided to save.');
        return;
      }

      // Method 1: Set in editor model
      const model = editor.getModel();
      model.set('fonts', options.fonts);

      // Save to storage
      model.set('changesCount', editor.getDirtyCount() + 1)
      editor.store();
    }
  });

At the end, when the command save-fonts is called, the project data always looks like this:

There is no fonts key appended to the project data saved on the sesion storage.

I got inspiration from this plugin's code: https://github.com/silexlabs/grapesjs-fonts/blob/main/src/fonts.js

Any help would be appreciated. Thank you

[lexoyo]

I think what you do is correct

Here is how it's done in the fonts plugin:

• load
• store

It may be due to the async call or just commands. Did you try to make a simple function call ?