Merge pull request #777 from MuckRock/allanlasser/viewer-refactor

Refactor Viewer

.storybook/decorators/ViewerContextDecorator.svelte

@@ -1,18 +1,8 @@
 <script lang="ts">
-  import type { Note, ViewerMode } from "../../src/lib/api/types";
-
-  import { setContext } from "svelte";
-  import { writable, type Writable } from "svelte/store";
-
-  export let mode: ViewerMode = "document";
-
-  const currentMode: Writable<ViewerMode> = writable(mode);
-  const currentPage: Writable<number> = writable(1);
-  const activeNote: Writable<Note> = writable(null);
-
-  setContext("currentMode", currentMode);
-  setContext("currentPage", currentPage);
-  setContext("activeNote", activeNote);
+  import ViewerContext from "../../src/lib/components/viewer/ViewerContext.svelte";
+  import { document } from "../../src/test/fixtures/documents";
 </script>
 
-<slot />
+<ViewerContext {document}>
+  <slot />
+</ViewerContext>

src/lib/api/documents.ts

@@ -20,6 +20,7 @@ import type {
   WriteMode,
   ViewerMode,
   ValidationError,
+  Nullable,
 } from "./types";
 
 import { writable, type Writable } from "svelte/store";
@@ -550,13 +551,13 @@ export function pageHashUrl(page: number): string {
  *
  * @param hash URL hash
  */
-export function pageFromHash(hash: string): number {
+export function pageFromHash(hash: string): Nullable<number> {
   const re = /^#document\/p(\d+)/; // match pages and notes
   const match = re.exec(hash);
 
-  if (!match) return 1;
+  if (!match) return null;
 
-  return +match[1] || 1;
+  return +match[1] || null;
 }
 
 /**

src/lib/api/notes.ts

@@ -159,10 +159,7 @@ export function canonicalNoteUrl(document: Document, note: Note): URL {
  * @example https://www.documentcloud.org/documents/2622-agreement-between-conservatives-and-liberal-democrats-to-form-a-coalition-government/#document/p3/a557
  */
 export function noteUrl(document: Document, note: Note): URL {
-  return new URL(
-    `#document/p${note.page_number + 1}/a${note.id}`,
-    canonicalUrl(document),
-  );
+  return new URL(noteHashUrl(note), canonicalUrl(document));
 }
 
 /**

src/lib/api/tests/documents.test.ts

@@ -714,7 +714,7 @@ describe("document helper methods", () => {
     expect(documents.pageFromHash(hash)).toStrictEqual(10);
 
     // invalid hash returns page 1
-    expect(documents.pageFromHash("#nopage")).toStrictEqual(1);
+    expect(documents.pageFromHash("#nopage")).toStrictEqual(null);
 
     // match a note hash
     expect(documents.pageFromHash("#document/p2/a2000002")).toStrictEqual(2);

src/lib/components/embeds/DocumentEmbed.svelte

@@ -1,21 +1,27 @@
+<!-- 
+  @component
+  An embedded document viewer.
+  Assumes it's a child of a ViewerContext
+-->
 <script lang="ts">
-  import type { Document, DocumentText } from "$lib/api/types";
-  import { type EmbedSettings, defaultSettings } from "$lib/utils/embed";
-
   import { setContext } from "svelte";
   import { _ } from "svelte-i18n";
   import { Alert16 } from "svelte-octicons";
 
   import Metadata from "../common/Metadata.svelte";
   import Viewer from "../viewer/Viewer.svelte";
 
+  import { defaultSettings, type EmbedSettings } from "$lib/utils/embed";
   import { getUserName, isOrg, isUser } from "$lib/api/accounts";
   import { canonicalUrl } from "$lib/api/documents";
+  import { getDocument } from "../viewer/ViewerContext.svelte";
 
-  export let document: Document;
-  export let text: DocumentText;
   export let settings: Partial<EmbedSettings> = defaultSettings;
 
+  const documentStore = getDocument();
+
+  $: document = $documentStore;
+
   // if we're using this layout, we're embedded
   setContext("embed", true);
 
@@ -43,7 +49,7 @@
     </header>
   {/if}
   <main>
-    <Viewer {document} {text} />
+    <Viewer />
   </main>
 </div>
 

src/lib/components/forms/ConfirmRedaction.svelte

@@ -20,7 +20,7 @@ This almost certainly lives in a modal.
   import {
     pending,
     redactions,
-  } from "$lib/components/viewer/RedactionPane.svelte";
+  } from "$lib/components/viewer/RedactionLayer.svelte";
   import { canonicalUrl } from "$lib/api/documents";
 
   export let document: Document;
@@ -29,7 +29,7 @@ This almost certainly lives in a modal.
 
   let error: string;
 
-  $: action = canonicalUrl(document).pathname + "?/redact";
+  $: action = new URL("?/redact", canonicalUrl(document)).href;
 
   function onSubmit({ formElement, submitter }) {
     formElement.disabled = true;

src/lib/components/forms/EditNote.svelte

@@ -8,7 +8,6 @@ Positioning and generating coordinates should happen outside of this form.
   import type { Bounds, Document, Note } from "$lib/api/types";
 
   import { enhance } from "$app/forms";
-  import { invalidate } from "$app/navigation";
 
   import { createEventDispatcher } from "svelte";
   import { _ } from "svelte-i18n";
@@ -39,7 +38,7 @@ Positioning and generating coordinates should happen outside of this form.
     submitter.disabled = true;
     return ({ result, update }) => {
       if (result.type === "success") {
-        // invalidate(`document:${document.id}`);
+        dispatch("success", result.data.note);
         update(result);
         dispatch("close");
       }

src/lib/components/layouts/ContentLayout.svelte

@@ -33,7 +33,7 @@
     width: 100%;
     position: sticky;
     top: 0;
-    z-index: 2;
+    z-index: var(--z-toolbar);
     padding: 0.625rem;
   }
   main {
@@ -48,7 +48,7 @@
     width: 100%;
     position: sticky;
     bottom: 0;
-    z-index: 2;
+    z-index: var(--z-toolbar);
     padding: 0.625rem;
   }
 

src/lib/components/layouts/DocumentLayout.svelte

@@ -1,8 +1,11 @@
+<!-- @component
+  Assumes it's a child of a ViewerContext
+ -->
+
 <script lang="ts">
   import type {
     AddOnListItem,
     APIResponse,
-    Document,
     DocumentText,
     Page,
     Project,
@@ -25,17 +28,16 @@
 
   import { getCurrentUser } from "$lib/utils/permissions";
   import { isOrg } from "@/api/types/orgAndUser";
-  import { pdfUrl } from "$lib/api/documents";
+  import { getDocument, getText } from "../viewer/ViewerContext.svelte";
 
   const me = getCurrentUser();
 
-  export let document: Document;
-  export let text: DocumentText;
-  export let asset_url: URL = pdfUrl(document);
-  export let query: string = "";
+  export let documentStore = getDocument();
+  export let text: DocumentText = getText();
   export let action: string = "";
   export let addons: Promise<APIResponse<Page<AddOnListItem>>>;
 
+  $: document = $documentStore;
   $: projects = (document.projects ?? []) as Project[];
 </script>
 
@@ -48,7 +50,7 @@
 
   <article slot="content">
     <header><DocumentHeader {document} /></header>
-    <main><Viewer {document} {asset_url} {text} {query} /></main>
+    <main><Viewer /></main>
   </article>
 
   <aside class="column between" slot="action">

src/lib/components/layouts/EmbedLayout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { EmbedSettings } from "@/lib/utils/embed";
+  import type { EmbedSettings } from "$lib/utils/embed";
 
   import { onMount } from "svelte";
   import { _ } from "svelte-i18n";

src/lib/components/layouts/stories/DocumentLayout.stories.svelte

@@ -7,6 +7,7 @@
   import doc from "@/test/fixtures/documents/document-expanded.json";
   import txt from "@/test/fixtures/documents/document.txt.json";
   import { activeAddons } from "@/test/fixtures/addons";
+  import { writable } from "svelte/store";
   const document = doc as Document;
 
   export const meta = {
@@ -25,7 +26,7 @@
   };
 
   let args = {
-    document,
+    document: writable(document),
     mode: "document",
     text: txt,
     query: "",

src/lib/components/layouts/stories/EmbedLayout.stories.svelte

@@ -8,6 +8,7 @@
   import txt from "@/test/fixtures/documents/document.txt.json";
   import DocumentEmbed from "../../embeds/DocumentEmbed.svelte";
   import { canonicalUrl, pdfUrl } from "$lib/api/documents";
+  import ViewerContext from "../../viewer/ViewerContext.svelte";
 
   const document = doc as Document;
 
@@ -31,13 +32,15 @@
 
 <Story name="With Document" {args} let:args>
   <div class="vh">
-    <EmbedLayout
-      settings={args.settings}
-      canonicalUrl={canonicalUrl(document).href}
-      downloadUrl={pdfUrl(document).href}
-    >
-      <DocumentEmbed settings={args.settings} {document} text={txt} />
-    </EmbedLayout>
+    <ViewerContext {document} text={txt} asset_url={pdfUrl(document)}>
+      <EmbedLayout
+        settings={args.settings}
+        canonicalUrl={canonicalUrl(document).href}
+        downloadUrl={pdfUrl(document).href}
+      >
+        <DocumentEmbed settings={args.settings} />
+      </EmbedLayout>
+    </ViewerContext>
   </div>
 </Story>