From c41f547af324d280c55cf56ae03b9c30bd494444 Mon Sep 17 00:00:00 2001
From: Manuel <30572287+manuel-rw@users.noreply.github.com>
Date: Sat, 18 Mar 2023 12:28:11 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20beforeunload=20hook=20(#762)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Actions/ToggleEditMode/ToggleEditMode.tsx | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
index 794d992be..365431379 100644
--- a/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
+++ b/src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx
@@ -1,18 +1,20 @@
+import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
+import { useHotkeys, useWindowEvent } from '@mantine/hooks';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import axios from 'axios';
 import Consola from 'consola';
-import { ActionIcon, Button, Group, Text, Title, Tooltip } from '@mantine/core';
-import { IconEditCircle, IconEditCircleOff } from '@tabler/icons';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
-import { useHotkeys } from '@mantine/hooks';
-import { hideNotification, showNotification } from '@mantine/notifications';
 import { useConfigContext } from '../../../../../config/provider';
 import { useScreenSmallerThan } from '../../../../../hooks/useScreenSmallerThan';
 
 import { useEditModeStore } from '../../../../Dashboard/Views/useEditModeStore';
-import { AddElementAction } from '../AddElementAction/AddElementAction';
 import { useNamedWrapperColumnCount } from '../../../../Dashboard/Wrappers/gridstack/store';
 import { useCardStyles } from '../../../useCardStyles';
+import { AddElementAction } from '../AddElementAction/AddElementAction';
+
+const beforeUnloadEventText = 'Exit the edit mode to save your changes';
 
 export const ToggleEditModeAction = () => {
   const { enabled, toggleEditMode } = useEditModeStore();
@@ -29,6 +31,16 @@ export const ToggleEditModeAction = () => {
 
   useHotkeys([['ctrl+E', toggleEditMode]]);
 
+  useWindowEvent('beforeunload', (event: BeforeUnloadEvent) => {
+    if (enabled) {
+      // eslint-disable-next-line no-param-reassign
+      event.returnValue = beforeUnloadEventText;
+      return beforeUnloadEventText;
+    }
+
+    return undefined;
+  });
+
   const toggleButtonClicked = () => {
     toggleEditMode();
     if (enabled || config === undefined || config?.schemaVersion === undefined) {