Contenteditable attribute on Layer's name span

If you double click on the layer name you can actually change its name :)

@artf , sorry I think I was misunderstood. I meant you can change the name but when you refresh the page the changes are not been saved... and I think that there isn't a mechanism implemented to achieve it.

When the user modifies the layer name, he expects that this modification be saved, but it's not the case.

Here a little video showing the case using the official GrapesJs demo: I changed theHeader layer's name toTest when refreshing the page Header stills the name of the layer. Is it the expected behaviour? If yes, why It has an contenteditable attribute?

Thanks a lot for your time.

https://user-images.githubusercontent.com/23215166/113898126-dacdae80-97cb-11eb-9224-1d57d2d53195.mov

No, the mechanism to store/load custom layer names is there, the only issue is that the change is not triggering the store... indeed, if you try to move some component right after the change, you will see them after page refresh. Anyway, this should be fixed with the upcoming page manager module.

Thanks for reporting this, @Franci5co5aoco.

Great question about contenteditable attribute on Layer's name span. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!