Fix browser unsaved changes with custom guard

src-ui/src/app/guards/dirty-doc.guard.ts

@@ -0,0 +1,20 @@
+import { CanDeactivate } from '@angular/router'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+
+export interface ComponentCanDeactivate {
+  canDeactivate: () => boolean | Observable<boolean>
+}
+
+@Injectable()
+export class DirtyDocGuard implements CanDeactivate<ComponentCanDeactivate> {
+  canDeactivate(
+    component: ComponentCanDeactivate
+  ): boolean | Observable<boolean> {
+    return component.canDeactivate()
+      ? true
+      : confirm(
+          $localize`Warning: You have unsaved changes to your document(s).`
+        )
+  }
+}