Auto save is working partially and stops working after inserting text
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.
Read full answer below ↓Question
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.
Answers (2)
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' }
});
Thanks for reporting this, @maxtsh.
The issue with Auto save is working partially and stops working after inserting text appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating an inconsistent state.
What to try:
- Add a setTimeout wrapper to ensure the DOM has settled:
setTimeout(() => {
// your operation here
}, 0);
-
Check initialization order — make sure components are fully loaded before you interact with them
-
Use the editor's event system — listen to completion events:
editor.on('component:mount', (component) => {
// safe to interact with component here
});
Recommended next steps:
- Test with the latest GrapesJS version if you haven't
- Provide a minimal reproducible example (CodeSandbox) — this helps the team identify the root cause faster
- Include GrapesJS version, browser, and console errors in your report
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3832
The css classes are removed and the autogenerated ids for each html tags gets changed ( Example : ivj5m-2) after each reload
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link Not there De...
Issue #4225
BUG : The facebook plugin is not working in the grapes js
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v9Reproducible demo link Not thereDes...
Issue #3231
how to change gjs-ckeditor-format component
hi guys, we all know that gjs-ckeditor-plugin working with [data-gjs-type]="text" components. I wanna know , could we change this option? I...
Issue #4371
All editors broken after last update that broke storage manager.
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://www....
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.