Mark Component as Dirty
I worked around this by completely disabling the onbeforeunload handling and rolling my own.
Read full answer below ↓Question
What are you trying to add to GrapesJS? Component should be able to mark themselves as dirty, triggering the onbeforeunload warning message. Describe your feature request detailed I have a (custom) text component where the user can enter arbitrary text. I'm storing the data on my server, and I want autosave. However, I don't want the server to be contacted for every single character added to the text component, since that would be a huge flood with the amount of users we have. I also don't want to change the stepsBeforeSave, because large changes like dragging around components should be save...
Answers (4)
I worked around this by completely disabling the onbeforeunload handling and rolling my own.
The editor has editing property which changes any time RTE is enabled/disabled, so I guess, in your case, this should work
editor.on('change:editing', (em, editing) => {
window.onbeforeunload = editing || editor.getDirtyCount() ? e => 1 : null;
});
Wouldn't this onbeforeunload handler be overwritten afterwards by the snippet I referenced above?
Thanks for reporting this, @anlumo. Great suggestion about FEAT: Mark Component as Dirty! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: Listen to selector:add for CSS selector changes Use se...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3128
FEAT: Drop a component at the position of the mouse is clicked
What are you trying to add to GrapesJS? When a component is dropped, stay at the position of the mouse is clicked. Describe your feature re...
Issue #4654
Custom component for text node including special characters
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v105 Reproducible demo link https:/...
Issue #3608
FEAT: Disable Dragging
What are you trying to add to GrapesJS? I have implemented an alternative text editing component (not based on RTE). I want people to be ab...
Issue #3731
Text element not able to be selected twice after extended with events
Version: 0.17.25 Are you able to reproduce the bug from the demo?[ ] Yes[x] No What is the expected behavior? Update a existing component o...
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 →Related tutorials
In-depth guides on the same topic.
Tutorial
Super Tooltip for GrapesJS — Version 0.1.5 Released 🎉
We’re excited to announce the v 0.1.5 update of Super Tooltip, our floating‑menu and tooltip plugin for GrapesJS
Tutorial
GrapesJS in 2026: The Complete Guide to the Open-Source Web Builder Framework
Master GrapesJS in 2026. Architecture, code examples, React integration, plugin development, Studio SDK, and how it compares to other projects
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.