note highlights

src/langs/json/en.json

@@ -437,12 +437,14 @@
     "project": "Project",
     "totalMatchingPages": "{n} of {m} pages matching the query",
     "showAll": "Show all",
-    "matchingPages": "{n} pages matching the query",
+    "matchingPages": "{n, plural, one {# page} other {# pages}} matching the query",
+    "matchingNotes": "{n, plural, one {# note} other {# notes}} matching the query",
     "page": "Page",
     "pageAbbrev": "p.",
     "pageCount": "{n, plural, one {# page} other {# pages}}",
     "source": "Source",
-    "noteCount": "{n, plural, one {# note} other {# notes}}"
+    "noteCount": "{n, plural, one {# note} other {# notes}}",
+    "noteLink": "See note"
   },
   "documentThumbnail": {
     "pages": "pages",

src/lib/api/types.d.ts

@@ -19,6 +19,11 @@ export type Sizes = "thumbnail" | "small" | "normal" | "large" | "xlarge";
 
 export type Highlights = Record<string, string[]>;
 
+export interface NoteHighlight {
+  title: string[];
+  description: string[];
+}
+
 type AddOnCategory = "premium" | string;
 
 interface AddOnProperty {
@@ -123,7 +128,7 @@ export interface Document {
 
   // present in search results when query includes hl=true
   highlights?: Highlights;
-  note_highlights?: Record<string, Highlights[]>;
+  note_highlights?: Record<string, NoteHighlight>;
 }
 
 export interface DocumentResults extends Page<Document> {}

src/lib/components/documents/NoteHighlights.svelte

@@ -0,0 +1,70 @@
+<!--
+  @component
+  Highlights from annotations matching a search query, like this:
+
+  ```json
+  "197010": {
+    "title": [
+      "<em>Boston</em> police officer dies after medical emergency"
+    ],
+    "description": [
+      "<em>Boston</em> police officer dies after medical emergency. [<a href=\"http://www.bostonglobe.com/metro/2014"
+    ]
+  }
+  ```
+
+  Note that highlights may contain broken bits of HTML. Sanitize accordingly.
+-->
+
+<script lang="ts">
+  import type { Document } from "$lib/api/types";
+
+  import DOMPurify from "isomorphic-dompurify";
+  import { _ } from "svelte-i18n";
+  import { noteUrl } from "$lib/api/notes";
+
+  export let document: Document;
+  export let open = false;
+
+  $: note_highlights = document.note_highlights;
+  $: count = Object.keys(note_highlights).length;
+  $: notes = new Map(document.notes.map((n) => [n.id, n]));
+
+  function sanitize(s: string): string {
+    return DOMPurify.sanitize(s, { ALLOWED_TAGS: ["em"] });
+  }
+</script>
+
+{#if count > 0}
+  <details bind:open>
+    <summary>{$_("document.matchingNotes", { values: { n: count } })}</summary>
+
+    {#each Object.entries(note_highlights) as [note_id, highlight]}
+      {@const note = notes.get(note_id)}
+      <blockquote>
+        {#if highlight.title}
+          <h4>{@html sanitize(highlight.title.join("\n").trim())}</h4>
+        {/if}
+
+        {#if highlight.description}
+          {#each highlight.description as segment}
+            <p class="segment">{@html sanitize(segment)}</p>
+          {/each}
+        {/if}
+        <cite>
+          <a href={noteUrl(document, note).toString()}
+            >{$_("document.noteLink")}</a
+          >
+        </cite>
+      </blockquote>
+    {/each}
+  </details>
+{/if}
+
+<style>
+  h4 :global(em),
+  .segment :global(em) {
+    background-color: var(--yellow);
+    font-style: normal;
+  }
+</style>

src/lib/components/documents/ResultsList.svelte

@@ -20,6 +20,7 @@
   import DocumentListItem from "./DocumentListItem.svelte";
   import Empty from "../common/Empty.svelte";
   import Flex from "../common/Flex.svelte";
+  import NoteHighlights from "./NoteHighlights.svelte";
   import SearchHighlights from "./SearchHighlights.svelte";
 
   export let results: Document[] = [];
@@ -97,8 +98,13 @@
         />
       </label>
       <DocumentListItem {document} />
+      {#if document.highlights}
+        <SearchHighlights {document} />
+      {/if}
 
-      <SearchHighlights {document} highlights={document.highlights} />
+      {#if document.note_highlights}
+        <NoteHighlights {document} />
+      {/if}
     </Flex>
   {:else}
     <Empty icon={Search24}>

src/lib/components/documents/SearchHighlights.svelte

@@ -12,18 +12,19 @@
 -->
 
 <script lang="ts">
-  import type { Document, Highlights } from "$lib/api/types";
+  import type { Document } from "$lib/api/types";
 
+  import DOMPurify from "isomorphic-dompurify";
   import { _ } from "svelte-i18n";
 
   import { pageUrl } from "$lib/api/documents";
 
-  export let highlights: Highlights;
   export let document: Document;
   export let open = false;
 
   const PAGE_NO_RE = /^page_no_(\d+)$/;
 
+  $: highlights = document.highlights;
   $: count = Object.keys(highlights).length;
 
   function pageLink(page: string): [number, string] {
@@ -33,6 +34,10 @@
     const number = +match[1];
     return [number, pageUrl(document, number).toString()];
   }
+
+  function sanitize(s: string): string {
+    return DOMPurify.sanitize(s, { ALLOWED_TAGS: ["em"] });
+  }
 </script>
 
 {#if count}
@@ -44,7 +49,7 @@
       <h4><a {href}>{$_("document.page")} {number}</a></h4>
       <blockquote class="highlight">
         {#each segments as segment}
-          <p class="segment">{@html segment}</p>
+          <p class="segment">{@html sanitize(segment)}</p>
         {/each}
       </blockquote>
     {/each}

src/lib/components/documents/stories/NoteHighlights.stories.svelte

@@ -0,0 +1,24 @@
+<script context="module" lang="ts">
+  import type { Document } from "$lib/api/types";
+  import { Story } from "@storybook/addon-svelte-csf";
+  import NoteHighlights from "../NoteHighlights.svelte";
+
+  import search from "$lib/api/fixtures/documents/search-highlight.json";
+
+  const document = search.results.find((d) => d.id === "1501881") as Document;
+
+  export const meta = {
+    title: "Components / Documents / Note Highlights",
+    component: NoteHighlights,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Story name="closed">
+  <NoteHighlights {document} />
+</Story>
+
+<Story name="open">
+  <NoteHighlights {document} open />
+</Story>

src/lib/components/documents/stories/SearchHighlights.stories.svelte

@@ -12,16 +12,16 @@
 
   export const meta = {
     title: "Components / Documents / Search Highlights",
-    component: highlights,
+    component: SearchHighlights,
     tags: ["autodocs"],
     parameters: { layout: "centered" },
   };
 </script>
 
 <Story name="closed">
-  <SearchHighlights {document} {highlights} />
+  <SearchHighlights {document} />
 </Story>
 
 <Story name="open">
-  <SearchHighlights {document} {highlights} open />
+  <SearchHighlights {document} open />
 </Story>