prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #2546 from omnivore-app/fix/web-pdf-deep-links-from-library

Browse source 
Fix deep links to PDF highlights
This commit is contained in:
Jackson Harper 2023-07-26 12:56:50 +08:00 committed by GitHub
commit a94b5814ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
packages/web/components/templates/article/NotebookPresenter.tsx
View file

@ -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,
}
)
}}
/>

53
packages/web/components/templates/article/PdfArticleContainer.tsx
View file

@ -34,41 +34,12 @@ export default function PdfArticleContainer(
props: PdfArticleContainerProps
): JSX.Element {
const containerRef = useRef<HTMLDivElement | null>(null)
const [shareTarget, setShareTarget] =
useState<Highlight | undefined>(undefined)
const [notebookKey, setNotebookKey] = useState<string>(uuidv4())
const [noteTarget, setNoteTarget] = useState<Highlight | undefined>(undefined)
const [noteTargetPageIndex, setNoteTargetPageIndex] =
useState<number | undefined>(undefined)
const [noteTargetPageIndex, setNoteTargetPageIndex] = useState<
number | undefined
>(undefined)
const highlightsRef = useRef<Highlight[]>([])
const canShareNative = useCanShareNative()
// const getHighlightURL = useCallback(
// (highlightID: string): string =>
// `${webBaseURL}/${props.viewerUsername}/${props.article.slug}/highlights/${highlightID}`,
// [props.article.slug, props.viewerUsername]
// )
// const nativeShare = useCallback(
// async (highlightID: string, title: string) => {
// await navigator?.share({
// title: title,
// url: getHighlightURL(highlightID),
// })
// },
// [getHighlightURL]
// )
// const handleOpenShare = useCallback(
// (highlight: Highlight) => {
// if (canShareNative) {
// nativeShare(highlight.shortId, props.article.title)
// } else {
// setShareTarget(highlight)
// }
// },
// [nativeShare, canShareNative, props.article.title]
// )
const annotationOmnivoreId = (annotation: Annotation): string | undefined => {
if (
@ -207,6 +178,22 @@ export default function PdfArticleContainer(
blendMode: PSPDFKit.BlendMode.multiply,
}
const initialPage = () => {
const highlightHref = window.location.hash
? window.location.hash.split('#')[1]
: null
if (highlightHref) {
// find the page index if possible
const highlight = props.article.highlights.find(
(h) => h.id === highlightHref
)
if (highlight) {
return highlight.highlightPositionAnchorIndex
}
}
return props.article.readingProgressAnchorIndex
}
instance = await PSPDFKit.load({
container: container || '.pdf-container',
toolbarItems,
@ -219,7 +206,7 @@ export default function PdfArticleContainer(
annotationTooltipCallback: annotationTooltipCallback,
initialViewState: new PSPDFKit.ViewState({
zoom: PSPDFKit.ZoomMode.FIT_TO_WIDTH,
currentPageIndex: props.article.readingProgressAnchorIndex || 0,
currentPageIndex: initialPage() || 0,
}),
})