BUG: Auto save is working partially and stops working after inserting text
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 (1)
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' }
});
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1092
[BUG]traits and storage trigger
Hey, maybe it's not bug, i'm not sure. I have traits with changeProp: true field. When I change the value of trait by UI, model is changed...
Issue #873
[Need help]: After using urlLoad from storage manager impossible to change component with Traits
Hello, I am save template to db and after loading from db impossible to change component with Traits. Video example on countdown: https://y...
Issue #1865
[Bug]: Grapes change page position
Hello, I found the following problem using grapes inside an html page: when you click on some elements of the editor, such as the arrow to...
Issue #2771
[BUG] component with textable:1 not working since version 0.16.12
Hello, I've just updated to the lasted version 0.16.12 and have a bug when trying to move a component that has the property textable:1 into...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.