Fix deep links to PDF highlights from the library

packages/web/components/templates/article/NotebookPresenter.tsx

@@ -5,6 +5,8 @@ import 'react-sliding-pane/dist/react-sliding-pane.css'
 import { NotebookContent } from './Notebook'
 import { NotebookHeader } from './NotebookHeader'
 import useGetWindowDimensions from '../../../lib/hooks/useGetWindowDimensions'
+import { useRouter } from 'next/router'
+import { showErrorToast } from '../../../lib/toastHelpers'
 
 type NotebookPresenterProps = {
   viewer: UserBasicData
@@ -17,6 +19,7 @@ type NotebookPresenterProps = {
 
 export const NotebookPresenter = (props: NotebookPresenterProps) => {
   const windowDimensions = useGetWindowDimensions()
+  const router = useRouter()
 
   return (
     <SlidingPane
@@ -36,20 +39,23 @@ export const NotebookPresenter = (props: NotebookPresenterProps) => {
           viewer={props.viewer}
           item={props.item}
           viewInReader={(highlightId) => {
-            // The timeout here is a bit of a hack to work around rerendering
-            setTimeout(() => {
-              const target = document.querySelector(
-                `[omnivore-highlight-id="${highlightId}"]`
-              )
-              target?.scrollIntoView({
-                block: 'center',
-                behavior: 'auto',
-              })
-            }, 1)
-            history.replaceState(
-              undefined,
-              window.location.href,
-              `#${highlightId}`
+            if (!router || !router.isReady || !props.viewer) {
+              showErrorToast('Error navigating to highlight')
+              return
+            }
+            router.push(
+              {
+                pathname: '/[username]/[slug]',
+                query: {
+                  username: props.viewer.profile.username,
+                  slug: props.item.slug,
+                },
+                hash: highlightId,
+              },
+              `/${props.viewer.profile.username}/${props.item.slug}#${highlightId}`,
+              {
+                scroll: false,
+              }
             )
           }}
         />