Handle links from JAM search (#236)

* Fix version switching #197

* Scroll to section and highlight search from URL.

* Fix build.

* Rename processed params. Fix issue with section.

* Switch to search tab when search is in URL.

* Add placeholder.

Author: tomusdrw

src/components/LocationProvider/LocationProvider.tsx

@@ -11,6 +11,8 @@ export interface ILocationContext {
 
 interface ILocationParams extends Partial<ISelectionParams> {
   version: string;
+  search?: string;
+  section?: string;
 }
 
 interface ILocationProviderProps {
@@ -43,10 +45,11 @@ export function LocationProvider({ children }: ILocationProviderProps) {
 
   const handleSetLocationParams = useCallback(
     (newParams?: ILocationParams) => {
-      const version =
-        newParams?.version.substring(0, SHORT_COMMIT_HASH_LENGTH) ||
-        metadata.versions[metadata.latest]?.hash.substring(0, SHORT_COMMIT_HASH_LENGTH);
-      const versionName = newParams ? metadata.versions[newParams.version]?.name : undefined;
+      const fullVersion = newParams?.version;
+      const version = fullVersion
+        ? fullVersion.substring(0, SHORT_COMMIT_HASH_LENGTH)
+        : metadata.versions[metadata.latest]?.hash.substring(0, SHORT_COMMIT_HASH_LENGTH);
+      const versionName = fullVersion ? metadata.versions[fullVersion]?.name : metadata.versions[metadata.latest]?.name;
 
       const stringifiedParams = [];
 
@@ -59,54 +62,83 @@ export function LocationProvider({ children }: ILocationProviderProps) {
         ].join("");
       }
 
-      const newHash = `${SEGMENT_SEPARATOR}${stringifiedParams.join(SEGMENT_SEPARATOR)}`;
-      window.location.hash = versionName ? `${newHash}?v=${versionName}` : newHash;
+      // we never put search/section to the URL,
+      // yet we keep them in `locationParams`.
+      const params: SearchParams = {
+        v: versionName,
+        rest: `${SEGMENT_SEPARATOR}${stringifiedParams.join(SEGMENT_SEPARATOR)}`,
+      };
+      window.location.hash = serializeSearchParams(params);
     },
     [metadata],
   );
 
   const handleHashChange = useCallback(() => {
-    const newHash = window.location.hash.substring(1);
-
-    if (!newHash || !newHash.startsWith(SEGMENT_SEPARATOR)) {
-      handleSetLocationParams();
+    const { rest: newHash, search, section } = extractSearchParams(window.location.hash);
+
+    if (!newHash.startsWith(SEGMENT_SEPARATOR)) {
+      const version = metadata.latest;
+      setLocationParams((params) => ({
+        ...params,
+        version,
+        search,
+        section,
+      }));
+      handleSetLocationParams({ version, search, section });
       return;
     }
 
     const rawParams = newHash.split(SEGMENT_SEPARATOR).slice(1);
+    const selectedVersion = rawParams[VERSION_SEGMENT_INDEX];
 
-    const fullVersion = Object.keys(metadata.versions).find((version) =>
-      version.startsWith(rawParams[VERSION_SEGMENT_INDEX]),
-    );
+    const fullVersion =
+      selectedVersion.length > 0
+        ? Object.keys(metadata.versions).find((version) => version.startsWith(rawParams[VERSION_SEGMENT_INDEX]))
+        : null;
 
     if (!fullVersion) {
-      handleSetLocationParams();
+      const version = metadata.latest;
+      setLocationParams((params) => ({
+        ...params,
+        version,
+        search,
+        section,
+      }));
+      handleSetLocationParams({ version, search, section });
       return;
     }
 
-    const processedParams: ILocationParams = {
+    const newLocationParams: ILocationParams = {
       version: fullVersion,
+      search,
+      section,
     };
 
     if (rawParams[SELECTION_SEGMENT_INDEX]) {
       const matchedHexSegments = [...rawParams[SELECTION_SEGMENT_INDEX].matchAll(SELECTION_DECOMPOSE_PATTERN)];
 
       if (matchedHexSegments.length === 2) {
-        processedParams.selectionStart = decodePageNumberAndIndex(matchedHexSegments[0][0]);
-        processedParams.selectionEnd = decodePageNumberAndIndex(matchedHexSegments[1][0]);
+        newLocationParams.selectionStart = decodePageNumberAndIndex(matchedHexSegments[0][0]);
+        newLocationParams.selectionEnd = decodePageNumberAndIndex(matchedHexSegments[1][0]);
       }
     }
 
     // Update location but only if it has REALLY changed.
     setLocationParams((params) => {
-      if (!isSameBlock(params?.selectionStart, processedParams.selectionStart)) {
-        return processedParams;
+      if (!isSameBlock(params?.selectionStart, newLocationParams.selectionStart)) {
+        return newLocationParams;
+      }
+      if (!isSameBlock(params?.selectionEnd, newLocationParams.selectionEnd)) {
+        return newLocationParams;
       }
-      if (!isSameBlock(params?.selectionEnd, processedParams.selectionEnd)) {
-        return processedParams;
+      if (params?.version !== newLocationParams.version) {
+        return newLocationParams;
       }
-      if (params?.version !== processedParams.version) {
-        return processedParams;
+      if (params?.search !== newLocationParams.search) {
+        return newLocationParams;
+      }
+      if (params?.section !== newLocationParams.section) {
+        return newLocationParams;
       }
       return params;
     });
@@ -174,3 +206,45 @@ function decodePageNumberAndIndex(s: string) {
   index += fromHex(s.substring(4, 6)) << 8;
   return { pageNumber, index };
 }
+
+type SearchParams = {
+  rest: string;
+  v?: string;
+  search?: string;
+  section?: string;
+};
+
+function extractSearchParams(hash: string): SearchParams {
+  // skip the leading '/'
+  const [rest, searchParams] = hash.substring(1).split("?");
+
+  const result = {
+    rest,
+    v: undefined,
+    search: undefined,
+    section: undefined,
+  };
+
+  if (!searchParams) {
+    return result;
+  }
+
+  for (const v of searchParams.split("&")) {
+    const [key, val] = v.split("=");
+    if (key in result) {
+      (result as { [key: string]: string | undefined })[key] = decodeURIComponent(val);
+    }
+  }
+
+  return result;
+}
+function serializeSearchParams({ rest, ...searchParams }: SearchParams) {
+  const search = [];
+  for (const key of Object.keys(searchParams)) {
+    const val = searchParams[key as keyof typeof searchParams];
+    if (val) {
+      search.push(`${key}=${encodeURIComponent(val)}`);
+    }
+  }
+  return `${rest}${search.length > 0 ? `?${search.join("&")}` : ""}`;
+}

src/components/Outline/Outline.tsx

@@ -1,20 +1,47 @@
 import "./Outline.css";
 import type { PDFDocumentProxy } from "pdfjs-dist";
 import { type ReactNode, useCallback, useContext, useEffect, useState } from "react";
+import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
 import { PdfContext } from "../PdfProvider/PdfProvider";
 import type { IPdfContext } from "../PdfProvider/PdfProvider";
 
 export type TOutline = Awaited<ReturnType<PDFDocumentProxy["getOutline"]>>;
 
-export function Outline() {
+export function Outline({ searchIsDone }: { searchIsDone: boolean }) {
+  const { locationParams } = useContext(LocationContext) as ILocationContext;
+  const { pdfDocument, linkService } = useContext(PdfContext) as IPdfContext;
   const [outline, setOutline] = useState<TOutline>([]);
-  const { pdfDocument } = useContext(PdfContext) as IPdfContext;
 
-  // perform one-time operations.
+  // Load the outline
   useEffect(() => {
     pdfDocument?.getOutline().then((outline) => setOutline(outline));
   }, [pdfDocument]);
 
+  // scroll to section
+  const section = locationParams.section?.toLowerCase();
+  useEffect(() => {
+    if (section === undefined || searchIsDone === false) {
+      return;
+    }
+    const findItem = (outline: TOutline): TOutline[0] | undefined => {
+      for (const item of outline) {
+        if (item.title.toLowerCase().includes(section)) {
+          return item;
+        }
+        const res = findItem(item.items);
+        if (res !== undefined) {
+          return res;
+        }
+      }
+      return undefined;
+    };
+
+    const itemToScrollTo = findItem(outline);
+    if (itemToScrollTo?.dest) {
+      linkService?.goToDestination(itemToScrollTo.dest);
+    }
+  }, [searchIsDone, section, outline, linkService]);
+
   const renderOutline = (outline: TOutline) => {
     return (
       <ul>

src/components/Search/Search.tsx

@@ -1,19 +1,33 @@
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import { type ILocationContext, LocationContext } from "../LocationProvider/LocationProvider";
 import { type IPdfContext, PdfContext } from "../PdfProvider/PdfProvider";
 
 import "./Search.css";
 
-export function Search({ query, setQuery }: { query: string; setQuery: (x: string) => void }) {
+export function Search({ onSearchFinished }: { onSearchFinished: () => void }) {
+  const { locationParams } = useContext(LocationContext) as ILocationContext;
+  const [query, setQuery] = useState("");
+  // search query is persistent between tab switches
+  // and we also handle search input from URL.
+  const search = locationParams.search;
+  useEffect(() => {
+    if (search) {
+      setQuery(search);
+    } else {
+      onSearchFinished();
+    }
+  }, [search, onSearchFinished]);
+
   return (
     <div className="search-wrapper">
       <input
         autoFocus
         type="text"
         value={query}
         onChange={(e) => setQuery(e.target.value)}
-        placeholder="🔍 search the Gray Paper"
+        placeholder="🔍 press 's' to search the Gray Paper"
       />
-      <SearchResults query={query} />
+      <SearchResults query={query} onSearchFinished={onSearchFinished} />
     </div>
   );
 }
@@ -31,16 +45,18 @@ type PageResults = {
 
 type SearchResultsProps = {
   query: string;
+  onSearchFinished: () => void;
 };
 
-function SearchResults({ query }: SearchResultsProps) {
+function SearchResults({ query, onSearchFinished }: SearchResultsProps) {
   const { eventBus, findController, viewer, linkService } = useContext(PdfContext) as IPdfContext;
   const [isLoading, setIsLoading] = useState(false);
   const resetTimeout = useRef(0);
   const [matches, setMatches] = useState<Match>({
     count: 0,
     pagesAndCount: [],
   });
+
   const resetMatchesLater = useCallback(() => {
     setIsLoading(true);
     clearTimeout(resetTimeout.current);
@@ -84,7 +100,7 @@ function SearchResults({ query }: SearchResultsProps) {
     const updateMatches = () => {
       const count = pageMatches.reduce((sum, x) => sum + x.length, 0);
       const pagesAndCount = Array.from(pageMatches.entries())
-        .filter((x) => x[1].length > 0)
+        .filter((x) => x.length > 0 && x[1].length > 0)
         .map(
           (x) =>
             ({
@@ -96,13 +112,14 @@ function SearchResults({ query }: SearchResultsProps) {
       clearTimeout(resetTimeout.current);
       setIsLoading(false);
       setMatches({ count, pagesAndCount });
+      onSearchFinished();
     };
 
     eventBus.on("updatefindmatchescount", updateMatches);
     return () => {
       eventBus.off("updatefindmatchescount", updateMatches);
     };
-  }, [eventBus, findController, viewer]);
+  }, [eventBus, findController, viewer, onSearchFinished]);
 
   const jumpToPage = useCallback(
     (res: PageResults) => {

src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import "./Sidebar.css";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { NoteManager } from "../NoteManager/NoteManager";
 import { Outline } from "../Outline/Outline";
 import { Search } from "../Search/Search";
@@ -10,8 +10,6 @@ import { Version } from "../Version/Version";
 
 export function Sidebar() {
   const [tab, setTab] = useState(loadActiveTab());
-  // search query is persistent between tab switches
-  const [query, setQuery] = useState("");
 
   // store seletected tab in LS
   useEffect(() => {
@@ -22,7 +20,7 @@ export function Sidebar() {
     const handleKeyDown = (event: KeyboardEvent) => {
       const isTyping = document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA";
 
-      if (event.key === "s" && !event.ctrlKey && !event.metaKey && !event.altKey && !isTyping) {
+      if (event.key.toLowerCase() === "s" && !event.ctrlKey && !event.metaKey && !event.altKey && !isTyping) {
         event.preventDefault();
         setTab("search");
       }
@@ -32,26 +30,34 @@ export function Sidebar() {
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, []);
 
+  // if we have both search & section, we need to wait
+  // for the search to be done, before scrolling to section.
+  const [searchIsDone, setSearchIsDone] = useState(false);
+  const onSearchFinished = useCallback(() => {
+    setSearchIsDone(true);
+    setTab("search");
+  }, []);
+
   const tabs = [
     {
       name: "outline",
-      render: () => <Outline />,
+      render: () => <Outline searchIsDone={searchIsDone} />,
     },
     {
       name: "notes",
       render: () => <NoteManager />,
     },
     {
       name: "search",
-      render: () => <Search {...{ query, setQuery }} />,
+      render: () => <Search onSearchFinished={onSearchFinished} />,
     },
   ];
 
   return (
     <div className="sidebar">
       <div className="content">
         <Selection activeTab={tab} switchTab={setTab} />
-        <Tabs tabs={tabs} activeTab={tab} switchTab={setTab} />
+        <Tabs tabs={tabs} activeTab={tab} switchTab={setTab} alwaysRender />
         <Version />
       </div>
     </div>

src/components/Tabs/Tabs.css

@@ -36,3 +36,6 @@
   padding: 1rem;
   border-radius: 1rem 1rem 1rem 0;
 }
+.tabs .hidden {
+  display: none;
+}