Collaboration - How to show "unsaved changes" warning when unloading page

[julianpoy]

Using collaboration (Hocuspocus) --

In the event of a network/connection issue, if the user reloads the page prior to the connection failing, how do I present them with an unsaved changes warning so they don't lose their changes?

[hmaesta]

For React:

const [editorHasContent, setEditorHasContent] = useState<boolean>(false);

const editor = useEditor({
   // ...
   onTransaction: (event) => {
      // Adapt if you need to check for different stuff (like Thumbnails)
      const hasTextContent = event.editor.state.doc.textContent.trim().length > 0;
      setEditorHasContent(hasContent);
   }
});

useEffect(() => {
   const handler = (event: BeforeUnloadEvent) => {
      if (!editorHasContent || confirm('Are u sure?')) {
         return;
      }
      event.preventDefault();
   };

   window.addEventListener('beforeunload', handler);
   return () => {
      window.removeEventListener('beforeunload', handler);
   }
}, [hasUnsavedChanges])

[julianpoy]

Unfortunately this doesn't answer the question, since I'm using Hocuspocus (YJS).

[hmaesta]

Oops, sorry! Wasn't aware of what Hocuspocus is until now 😅