Merge pull request #862 from MuckRock/846-viewer-search

Fix viewer search and consolidate search routing, too

src/lib/components/forms/Search.svelte

@@ -1,24 +1,57 @@
 <script lang="ts">
+  import type { Maybe } from "$lib/api/types";
+
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores";
+
   import { Search16, XCircleFill24 } from "svelte-octicons";
   import { _ } from "svelte-i18n";
-  import type { Maybe, Nullable } from "$lib/api/types";
 
-  export let name: Nullable<string> = null;
+  export let name: string = "q";
   export let query: string = "";
   export let placeholder: string = $_("common.search");
   export let action: Maybe<string> = undefined;
 
   let input: HTMLInputElement;
   let form: HTMLFormElement;
 
-  function clear() {
+  function clear(): Promise<void> {
     query = "";
     input.focus();
+
+    const url = new URL($page.url);
+    url.searchParams.delete(name);
+    return goto(url);
+  }
+
+  function search(e: Event): Promise<void> {
+    e.preventDefault();
+    const form = e.target as HTMLFormElement;
+    const fd = new FormData(form);
+    const q = fd.get(name) as string;
+    const url = new URL($page.url);
+
+    if (q) {
+      url.searchParams.set(name, q);
+    } else {
+      url.searchParams.delete(name);
+    }
+
+    return goto(url);
   }
 </script>
 
-<form class="container" {action} on:submit on:reset bind:this={form}>
-  <label for="query" title="Search"><Search16 /></label>
+<form
+  class="container"
+  {action}
+  on:submit={search}
+  on:reset={clear}
+  bind:this={form}
+>
+  <label for="query" title="Search">
+    <Search16 />
+    <span class="sr-only">{$_("common.search")}</span>
+  </label>
   <input
     type="search"
     id="query"
@@ -29,7 +62,6 @@
     bind:this={input}
     on:change
     on:input
-    on:reset
   />
   <button
     title="Clear Search"

src/lib/components/viewer/PDFPage.svelte

@@ -12,6 +12,8 @@ Selectable text can be rendered in one of two ways:
 <script lang="ts">
   import type { TextPosition } from "$lib/api/types";
 
+  import { page as pageStore } from "$app/stores";
+
   import * as pdfjs from "pdfjs-dist/legacy/build/pdf.mjs";
   import { _ } from "svelte-i18n";
 
@@ -28,21 +30,21 @@ Selectable text can be rendered in one of two ways:
     getDocument,
     getCurrentMode,
     getPDF,
-    getQuery,
   } from "$lib/components/viewer/ViewerContext.svelte";
-  import { fitPage, getNotes } from "@/lib/utils/viewer";
+  import { getQuery } from "$lib/utils/search";
+  import { fitPage, getNotes } from "$lib/utils/viewer";
 
   export let page_number: number; // 1-indexed
 
   export let scale: number | "width" | "height";
   export let width: number;
   export let height: number;
   export let text: TextPosition[] = [];
+  export let query: string = getQuery($pageStore.url, "q");
 
   const documentStore = getDocument();
   const mode = getCurrentMode();
   const pdf = getPDF();
-  const query = getQuery();
 
   // make hidden things visible, for debugging
   export let debug = false;
@@ -60,6 +62,7 @@ Selectable text can be rendered in one of two ways:
   // visibility, for loading optimization
   let visible: boolean = false;
 
+  $: query = getQuery($pageStore.url, "q");
   $: document = $documentStore;
   $: aspect = height / width;
   $: orientation = height > width ? "vertical" : "horizontal";

src/lib/components/viewer/ReadingToolbar.svelte

@@ -5,6 +5,8 @@ Assumes it's a child of a ViewerContext
 <script lang="ts">
   import type { ReadMode, WriteMode } from "$lib/api/types";
 
+  import { page } from "$app/stores";
+
   import { _ } from "svelte-i18n";
   import {
     Comment16,
@@ -29,18 +31,18 @@ Assumes it's a child of a ViewerContext
 
   import { remToPx } from "$lib/utils/layout";
   import { getViewerHref } from "$lib/utils/viewer";
+  import { getQuery } from "$lib/utils/search";
   import {
     getCurrentMode,
     getDocument,
-    getPDFProgress,
-    getQuery,
     isEmbedded,
   } from "$lib/components/viewer/ViewerContext.svelte";
 
+  export let query = getQuery($page.url, "q");
+
   let width: number;
 
   const documentStore = getDocument();
-  const query = getQuery();
   const mode = getCurrentMode();
   const embed = isEmbedded();
 

src/lib/components/viewer/Text.svelte

@@ -5,21 +5,19 @@
   Assumes it's a child of a ViewerContext
 -->
 <script lang="ts">
+  import { page } from "$app/stores";
   import { onMount } from "svelte";
 
   import Page from "./Page.svelte";
-  import {
-    getText,
-    getCurrentPage,
-    getQuery,
-    getZoom,
-  } from "./ViewerContext.svelte";
+  import { getText, getCurrentPage, getZoom } from "./ViewerContext.svelte";
   import { scrollToPage } from "$lib/utils/scroll";
   import { highlight } from "$lib/utils/search";
+  import { getQuery } from "$lib/utils/search";
+
+  export let query = getQuery($page.url, "q");
 
-  const text = getText();
-  const query = getQuery();
   const currentPage = getCurrentPage();
+  const text = getText();
   const zoom = getZoom();
 
   onMount(async () => {

src/lib/components/viewer/ViewerContext.svelte

@@ -46,10 +46,6 @@ layouts, stories, and tests.
     return getContext("asset_url");
   }
 
-  export function getQuery(): string {
-    return getContext("query") ?? "";
-  }
-
   export function isEmbedded(): boolean {
     // are we embedded?
     return getContext("embed") ?? false;
@@ -99,7 +95,6 @@ layouts, stories, and tests.
   export let embed: boolean = false;
   export let page: number = 1;
   export let mode: ViewerMode = "document";
-  export let query: string = "";
   export let zoom: Zoom = 1;
   export let errors: Error[] = [];
 
@@ -123,7 +118,6 @@ layouts, stories, and tests.
   setContext("text", text);
   setContext("asset_url", asset_url);
   setContext("embed", embed);
-  setContext("query", query);
   setContext("newNote", writable(null));
   setContext("currentNote", writable(note));
   setContext("currentPage", writable(page));

src/lib/components/viewer/stories/PDFPage.stories.svelte

@@ -1,5 +1,9 @@
 <script context="module" lang="ts">
-  import type { Document, Section } from "$lib/api/types";
+  import type { Document } from "$lib/api/types";
+
+  import { page } from "$app/stores";
+
+  import { writable } from "svelte/store";
   import { Story } from "@storybook/addon-svelte-csf";
   import PdfPage from "../PDFPage.svelte";
 
@@ -14,7 +18,6 @@
   import textPositions from "@/test/fixtures/documents/examples/the-santa-anas-p1.position.json";
   import pdfFile from "@/test/fixtures/documents/examples/the-santa-anas.pdf";
   import ViewerContext from "../ViewerContext.svelte";
-  import { writable } from "svelte/store";
 
   const document = { ...doc, edit_access: true } as Document;
 
@@ -58,8 +61,23 @@
   </ViewerContext>
 </Story>
 
-<Story name="search results">
+<Story
+  name="search results"
+  parameters={{
+    sveltekit_experimental: {
+      stores: {
+        page: {
+          url: new URL(
+            `https://www.dev.documentcloud.org/documents/20000040-the-santa-anas/?q=${query}`,
+          ),
+        },
+      },
+    },
+  }}
+>
   <ViewerContext {document} pdf={writable(load(url))}>
+    <p>Query: {query}</p>
+    <p>URL: {$page.url}</p>
     <PdfPage page_number={1} scale={1.5} {width} {height} />
   </ViewerContext>
 </Story>

src/lib/utils/search.ts

@@ -72,6 +72,9 @@ export function pageNumber(page: string): number {
   return number;
 }
 
-export function getQuery(url: URL, param: string = "q"): string {
-  return url.searchParams.get(param) ?? "";
+export function getQuery(url?: Nullable<URL>, param: string = "q"): string {
+  if (!url) {
+    console.error("Missing URL");
+  }
+  return url?.searchParams?.get(param) ?? "";
 }

src/routes/(app)/documents/[id]-[slug]/+page.svelte

@@ -27,6 +27,7 @@
   $: action = data.action;
   $: addons = data.pinnedAddons;
   $: hasDescription = Boolean(document.description?.trim().length);
+  $: query = data.query || "";
 </script>
 
 <svelte:head>

src/routes/(app)/projects/+page.svelte

@@ -49,28 +49,6 @@
     if (cursor) target.searchParams.set("cursor", cursor);
     goto(target);
   }
-
-  function search(e: Event) {
-    e.preventDefault();
-    const form = e.target as HTMLFormElement;
-    const fd = new FormData(form);
-    const q = fd.get("query") as string;
-    const url = new URL($page.url);
-
-    if (q) {
-      url.searchParams.set("query", q);
-    } else {
-      url.searchParams.delete("query");
-    }
-
-    return goto(url);
-  }
-
-  function reset() {
-    const url = new URL($page.url);
-    url.searchParams.delete("query");
-    return goto(url);
-  }
 </script>
 
 <svelte:head>
@@ -104,8 +82,6 @@
         name="query"
         placeholder={$_("projects.placeholder.projects")}
         {query}
-        on:submit={search}
-        on:reset={reset}
       />
     </PageToolbar>
 

src/routes/embed/documents/[id]-[slug]/+page.ts

@@ -25,7 +25,7 @@ export async function load({ fetch, url, params, depends }) {
 
   let settings: Partial<EmbedSettings> = getEmbedSettings(url.searchParams);
 
-  const query = getQuery(url);
+  const query = getQuery(url, "q");
 
   return {
     document,