[FEATURE] add FormEngine-style unsaved changes dialog (#69)

Show a dedicated "Unsaved changes" modal before the visual editor
refreshes, changes the URL, or closes with pending edits.

The dialog mirrors the FormEngine flow with three actions so editors
can discard changes, stay on the page, or save before leaving.

Author: Kanti

Classes/Service/EditModeService.php

@@ -22,7 +22,6 @@
 use TYPO3\CMS\Core\Site\SiteFinder;
 use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;
 use TYPO3\CMS\Frontend\Page\PageInformation;
-use TYPO3\CMS\VisualEditor\Service\LocalizationService;
 
 use function method_exists;
 
@@ -146,7 +145,7 @@ public function init(ServerRequestInterface $request): void
                 ],
                 [
                     'useNonce' => true,
-                ]
+                ],
             );
         }
     }
@@ -227,15 +226,21 @@ private function isBeUser(): bool
 
     private function loadLanguageLabelsInline(): void
     {
-        $file = 'EXT:visual_editor/Resources/Private/Language/locallang.xlf';
-        $languageService = $this->languageServiceFactory->create($this->localizationService->getBackendUserLanguage() ?? 'en');
-        foreach ($languageService->getLabelsFromResource($file) as $key => $value) {
-            $this->pageRenderer->addInlineLanguageLabel($key, $value);
+        $files = [
+            'EXT:backend/Resources/Private/Language/locallang_alt_doc.xlf',
+            'EXT:visual_editor/Resources/Private/Language/locallang.xlf',
+        ];
+        foreach ($files as $file) {
+            $languageService = $this->languageServiceFactory->create($this->localizationService->getBackendUserLanguage() ?? 'en');
+            foreach ($languageService->getLabelsFromResource($file) as $key => $value) {
+                $this->pageRenderer->addInlineLanguageLabel($key, $value);
+            }
         }
     }
 
     /**
      * returns the origins of all configured sites and languages
+     *
      * @return list<string>
      */
     public function getAllowedOrigins(): array

Resources/Public/JavaScript/Frontend/initialize-save-handling.js

@@ -1,6 +1,7 @@
 import {onMessage, sendMessage} from '@typo3/visual-editor/Shared/iframe-messaging';
 import {useDataHandler} from '@typo3/visual-editor/Frontend/use-data-handler';
 import {dataHandlerStore} from '@typo3/visual-editor/Frontend/stores/data-handler-store';
+import {InterceptUserActionsGuard} from '@typo3/visual-editor/Frontend/intercept-user-actions-guard';
 
 let saving = false;
 
@@ -58,4 +59,6 @@ export function initializeSaveHandling() {
   onMessage('doSave', () => {
     trySave();
   });
+
+  new InterceptUserActionsGuard(dataHandlerStore);
 }

Resources/Public/JavaScript/Frontend/intercept-user-actions-guard.js

@@ -0,0 +1,77 @@
+import {lll} from "@typo3/core/lit-helper.js";
+import Modal from '@typo3/backend/modal.js';
+import Severity from '@typo3/backend/severity.js';
+import {trySave} from '@typo3/visual-editor/Frontend/initialize-save-handling';
+
+
+export class InterceptUserActionsGuard {
+  constructor(dataHandlerStore) {
+    this.dataHandlerStore = dataHandlerStore;
+
+    window.addEventListener('beforeunload', (event) => {
+      if (this.dataHandlerStore.changesCount) {
+        event.preventDefault();
+      }
+    });
+
+    top.TYPO3.Backend.consumerScope.attach(this);
+    window.addEventListener('pagehide', () => top.TYPO3.Backend.consumerScope.detach(this), {once: true});
+  }
+
+  /**
+   * @param interactionRequest  {{ concernsTypes(possible: string[]): any }}
+   * @return {Promise<void>}
+   */
+  async consume(interactionRequest) {
+    if (!interactionRequest.concernsTypes(['typo3.setUrl', 'typo3.beforeSetUrl', 'typo3.refresh'])) {
+      return;
+    }
+
+    const hasChanges = this.dataHandlerStore.changesCount > 0;
+    if (!hasChanges) {
+      return;
+    }
+
+    return new Promise((resolve, reject) => {
+      const buttons = [
+        {
+          text: lll('buttons.confirm.close_without_save.no'),
+          btnClass: 'btn-default',
+          trigger: (_e, modal) => {
+            modal.hideModal();
+            reject();
+          },
+        },
+        {
+          text: lll('buttons.confirm.close_without_save.yes'),
+          btnClass: 'btn-warning',
+          trigger: (_e, modal) => {
+            modal.hideModal();
+            this.dataHandlerStore.reset();
+            resolve();
+          },
+        },
+      ];
+
+      const noErrors = this.dataHandlerStore.invalidCount === 0;
+      if (noErrors) {
+        buttons.push({
+          text: lll('buttons.confirm.save_and_close'),
+          btnClass: 'btn-primary',
+          trigger: async (_e, modal) => {
+            modal.hideModal();
+            await trySave();
+            resolve();
+          },
+        });
+      }
+
+      Modal.confirm(
+        lll('label.confirm.close_without_save.title'),
+        lll('label.confirm.close_without_save.content'),
+        Severity.warning,
+        buttons,
+      );
+    });
+  }
+}

Resources/Public/JavaScript/Frontend/stores/data-handler-store.js

@@ -10,16 +10,6 @@ class DataHandlerStore extends EventTarget {
   #cmdArray = [];
   #invalidFields = {};
 
-  constructor() {
-    super();
-
-    window.addEventListener('beforeunload', (event) => {
-      if (this.changesCount) {
-        event.preventDefault();
-      }
-    });
-  }
-
   get data() {
     return structuredClone(this.#data);
   }
@@ -127,7 +117,10 @@ class DataHandlerStore extends EventTarget {
         }
       }
     }
+    this.reset();
+  }
 
+  reset() {
     this.#data = {};
     this.#cmdArray = [];
     this.#invalidFields = {};