Merge pull request #971 from MuckRock/allanlasser/issue968

Clean up redaction layer between routes

src/langs/json/en.json

@@ -457,7 +457,8 @@
     "instructions": "Click and drag to draw a black rectangle over each portion of the document you’d like to redact. Associated text will be removed when you save your redactions.",
     "undo": "Undo",
     "cancel": "Discard",
-    "cancelWarning": "You will lose unsaved redactions. Are you sure you want to cancel?",
+    "cancelWarning": "You will lose unsaved redactions. Are you sure you want to discard?",
+    "leaveWarning": "You have unsaved redactions. Are you sure you want to leave?",
     "success": "Redactions saved",
     "error": "Error"
   },

src/lib/components/forms/ConfirmRedaction.svelte

@@ -44,6 +44,7 @@ This almost certainly lives in a modal.
       if (result.type === "success") {
         // need to invalidate before navigating
         await invalidate(`document:${document.id}`);
+        $redactions = [];
         $pending = result.data.redactions;
         goto("?mode=document");
         dispatch("close");

src/lib/components/viewer/RedactionLayer.svelte

@@ -1,6 +1,8 @@
 <!-- @component
 This is a box to draw redactions on.
 It's layered over a PDF page and allows us to render redactions and draw new ones.
+When saved, redactions are burned into the PDF.
+So this layer is only showing unsaved redactions.
 -->
 <script context="module" lang="ts">
   import type { Redaction, Nullable } from "$lib/api/types";
@@ -26,10 +28,15 @@ It's layered over a PDF page and allows us to render redactions and draw new one
 
   export function clear() {
     redactions.set([]);
+    pending.set([]);
   }
 </script>
 
 <script lang="ts">
+  import { onMount } from "svelte";
+  import { _ } from "svelte-i18n";
+  import { beforeNavigate } from "$app/navigation";
+
   export let active = false;
   export let page_number: number; // 0-indexed
 
@@ -103,6 +110,23 @@ It's layered over a PDF page and allows us to render redactions and draw new one
     drawStart = null;
     drawing = false;
   }
+
+  beforeNavigate(({ cancel }) => {
+    if ($redactions.length > 0) {
+      if (!confirm($_("redact.leaveWarning"))) {
+        cancel();
+        return;
+      }
+      clear();
+    }
+  });
+
+  onMount(() => {
+    // before unmounting the component, clear the current redactions
+    return () => {
+      clear();
+    };
+  });
 </script>
 
 <div