Debounce Feature For GrapesJS Remote storage

[SamuelVirgo]

Hi, I'm building quite a custom implementation on top of grapejs and in a position where I need to be able debounce calls to my backend when running the store & load methods. I tried to build a custom storage manager on top of the grapesjs default remote storage manager but am struggling and can't find enough documentation to help. This is my current implementation:

`const debouncedStoragePlugin = (editor) => {
const { Storage } = editor;
Storage.add('remote-debounced', {
debounceDelay: 500,
debounceTimer: null,
pendingChanges: {},

	store(data) {
		clearTimeout(this.debounceTimer);
		this.pendingChanges = { ...this.pendingChanges, ...data };

		this.debounceTimer = setTimeout(async () => {
			const remoteStorage = Storage.get('remote');
			try {
				await remoteStorage.store(this.pendingChanges);
				this.pendingChanges = {};
			} catch (err) {
				console.error('Error storing data remotely:', err);
			}
		}, this.debounceDelay);
	},

	async load(keys, callback) {
		console.log(keys)
		console.log(callback)
		const remoteStorage = Storage.get('remote');
		try {
			const data = await remoteStorage.load(keys);
			console.log(data)
			callback(data);
		} catch (err) {
			console.error('Error loading data remotely:', err);
			callback(null);
		}
	}
});

}`

-> For some reason "data" is always returning as undefined even though I can clearly see it loading correctly in the network tab. Is anyone able to advice why that maybe?
-> I'm not sure how to handle errors in such a way that they trigger the storage:error:load, storage:error:store events. Can anyone advice there?
-> In general is this implementation correct? I tried to base it on the docs although I can't find an example there of implementing the load method or correctly throwing errors. Maybe there is a simpler way of debouncing these changes rather than extending the storage manager like this?

As a general feature request it would be nice to be able to add a debounce rather than a change count to be responsible for triggering the store function.

[artf]

store is an asynchronous function so to handle something like that properly you could use a Promise

store(data, options = {}) {
  return new Promise((res, rej) => {
    clearTimeout(this.debounceTimer);
    this.debounceTimer = setTimeout(async () => {
      try {
        // store logic...
        res();
      } catch (error) {
        rej(error);
      }
    }, this.debounceDelay);
  });
},

• There is no need to use pendingChanges, just save the latest passed data.
• async load(keys, callback) { this is the old API signature, try to avoid blindly copy pasting around