From 3ec3a37603a7b6eddf6632dcf2285245fd519fd9 Mon Sep 17 00:00:00 2001 From: asrient <44570278+asrient@users.noreply.github.com> Date: Sat, 27 Aug 2022 18:02:20 +0530 Subject: [PATCH] Desktop: PDF scroll persistence (#6747) --- .eslintignore | 9 + .gitignore | 9 + .../NoteBody/CodeMirror/CodeMirror.tsx | 2 + .../app-desktop/gui/NoteEditor/NoteEditor.tsx | 3 + .../app-desktop/gui/NoteEditor/utils/types.ts | 1 + .../gui/NoteEditor/utils/useMarkupToHtml.ts | 2 + packages/pdf-viewer/Page.tsx | 62 +++++-- packages/pdf-viewer/VerticalPages.tsx | 108 ++++++++--- packages/pdf-viewer/hooks/useIsVisible.ts | 7 +- packages/pdf-viewer/hooks/usePdfData.ts | 19 ++ packages/pdf-viewer/hooks/useScaledSize.ts | 52 ++++++ packages/pdf-viewer/main.tsx | 31 ++++ packages/pdf-viewer/miniViewer.tsx | 45 ++--- packages/pdf-viewer/package.json | 6 +- packages/pdf-viewer/pages.css | 76 -------- packages/pdf-viewer/viewer.css | 175 ++++++++++++------ packages/pdf-viewer/webpack.config.js | 2 +- packages/renderer/MdToHtml.ts | 4 + packages/renderer/MdToHtml/renderMedia.ts | 25 ++- .../renderer/MdToHtml/rules/link_close.ts | 9 +- yarn.lock | 81 ++++++-- 21 files changed, 494 insertions(+), 234 deletions(-) create mode 100644 packages/pdf-viewer/hooks/usePdfData.ts create mode 100644 packages/pdf-viewer/hooks/useScaledSize.ts create mode 100644 packages/pdf-viewer/main.tsx delete mode 100644 packages/pdf-viewer/pages.css diff --git a/.eslintignore b/.eslintignore index d581bd779..1981ec6de 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1973,6 +1973,15 @@ packages/pdf-viewer/hooks/useIsFocused.js.map packages/pdf-viewer/hooks/useIsVisible.d.ts packages/pdf-viewer/hooks/useIsVisible.js packages/pdf-viewer/hooks/useIsVisible.js.map +packages/pdf-viewer/hooks/usePdfData.d.ts +packages/pdf-viewer/hooks/usePdfData.js +packages/pdf-viewer/hooks/usePdfData.js.map +packages/pdf-viewer/hooks/useScaledSize.d.ts +packages/pdf-viewer/hooks/useScaledSize.js +packages/pdf-viewer/hooks/useScaledSize.js.map +packages/pdf-viewer/main.d.ts +packages/pdf-viewer/main.js +packages/pdf-viewer/main.js.map packages/pdf-viewer/miniViewer.d.ts packages/pdf-viewer/miniViewer.js packages/pdf-viewer/miniViewer.js.map diff --git a/.gitignore b/.gitignore index d1f4bac22..8140c475f 100644 --- a/.gitignore +++ b/.gitignore @@ -1962,6 +1962,15 @@ packages/pdf-viewer/hooks/useIsFocused.js.map packages/pdf-viewer/hooks/useIsVisible.d.ts packages/pdf-viewer/hooks/useIsVisible.js packages/pdf-viewer/hooks/useIsVisible.js.map +packages/pdf-viewer/hooks/usePdfData.d.ts +packages/pdf-viewer/hooks/usePdfData.js +packages/pdf-viewer/hooks/usePdfData.js.map +packages/pdf-viewer/hooks/useScaledSize.d.ts +packages/pdf-viewer/hooks/useScaledSize.js +packages/pdf-viewer/hooks/useScaledSize.js.map +packages/pdf-viewer/main.d.ts +packages/pdf-viewer/main.js +packages/pdf-viewer/main.js.map packages/pdf-viewer/miniViewer.d.ts packages/pdf-viewer/miniViewer.js packages/pdf-viewer/miniViewer.js.map diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index 726e0bdbd..bdda90e25 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -619,6 +619,8 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { mapsToLine: true, // Always using useCustomPdfViewer for now, we can add a new setting for it in future if we need to. useCustomPdfViewer: true, + noteId: props.noteId, + vendorDir: bridge().vendorDir(), })); if (cancelled) return; diff --git a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx index 965db00af..3e318af72 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx @@ -421,6 +421,9 @@ function NoteEditor(props: NoteEditorProps) { fontSize: Setting.value('style.editor.fontSize'), contentMaxWidth: props.contentMaxWidth, isSafeMode: props.isSafeMode, + // We need it to identify the context for which media is rendered. + // It is currently used to remember pdf scroll position for each attacments of each note uniquely. + noteId: props.noteId, }; let editor = null; diff --git a/packages/app-desktop/gui/NoteEditor/utils/types.ts b/packages/app-desktop/gui/NoteEditor/utils/types.ts index edd587ad5..3682029a9 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/types.ts +++ b/packages/app-desktop/gui/NoteEditor/utils/types.ts @@ -75,6 +75,7 @@ export interface NoteBodyEditorProps { fontSize: number; contentMaxWidth: number; isSafeMode: boolean; + noteId: string; } export interface FormNote { diff --git a/packages/app-desktop/gui/NoteEditor/utils/useMarkupToHtml.ts b/packages/app-desktop/gui/NoteEditor/utils/useMarkupToHtml.ts index 573bfd160..506387623 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/useMarkupToHtml.ts +++ b/packages/app-desktop/gui/NoteEditor/utils/useMarkupToHtml.ts @@ -21,6 +21,8 @@ export interface MarkupToHtmlOptions { bodyOnly?: boolean; mapsToLine?: boolean; useCustomPdfViewer?: boolean; + noteId?: string; + vendorDir?: string; } export default function useMarkupToHtml(deps: HookDependencies) { diff --git a/packages/pdf-viewer/Page.tsx b/packages/pdf-viewer/Page.tsx index 56c1d914f..2687c1770 100644 --- a/packages/pdf-viewer/Page.tsx +++ b/packages/pdf-viewer/Page.tsx @@ -1,9 +1,38 @@ -import React, { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState, MutableRefObject } from 'react'; +import * as React from 'react'; import useIsVisible from './hooks/useIsVisible'; import { PdfData, ScaledSize } from './pdfSource'; import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect'; +import styled from 'styled-components'; -require('./pages.css'); +const PageWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow: hidden; + border: solid thin rgba(120, 120, 120, 0.498); + background: rgb(233, 233, 233); + position: relative; + border-radius: 0px; +`; + +const PageInfo = styled.div` + position: absolute; + top: 0.5rem; + left: 0.5rem; + padding: 0.3rem; + background: rgba(203, 203, 203, 0.509); + border-radius: 0.3rem; + font-size: 0.8rem; + color: rgba(91, 91, 91, 0.829); + backdrop-filter: blur(0.5rem); + cursor: default; + user-select: none; + &:hover{ + opacity: 0.3; + } +`; export interface PageProps { pdf: PdfData; @@ -12,21 +41,22 @@ export interface PageProps { isAnchored: boolean; scaledSize: ScaledSize; isDarkTheme: boolean; - container: React.MutableRefObject; + container: MutableRefObject; + showPageNumbers?: boolean; } export default function Page(props: PageProps) { const [error, setError] = useState(null); const [page, setPage] = useState(null); - const [scale, setScale] = useState(null); - const [timestamp, setTimestamp] = useState(null); + const scaleRef = useRef(null); + const timestampRef = useRef(null); const canvasRef = useRef(null); const wrapperRef = useRef(null); const isVisible = useIsVisible(canvasRef, props.container); useEffect(() => { - if (!isVisible || !page || !props.scaledSize || (scale && props.scaledSize.scale === scale)) return; + if (!isVisible || !page || !props.scaledSize || (scaleRef.current && props.scaledSize.scale === scaleRef.current)) return; try { const viewport = page.getViewport({ scale: props.scaledSize.scale || 1.0 }); const canvas = canvasRef.current; @@ -34,28 +64,27 @@ export default function Page(props: PageProps) { canvas.height = viewport.height; const ctx = canvas.getContext('2d'); const pageTimestamp = new Date().getTime(); - setTimestamp(pageTimestamp); + timestampRef.current = pageTimestamp; page.render({ canvasContext: ctx, viewport, // Used so that the page rendering is throttled to some extent. // https://stackoverflow.com/questions/18069448/halting-pdf-js-page-rendering continueCallback: function(cont: any) { - if (timestamp !== pageTimestamp) { + if (timestampRef.current !== pageTimestamp) { return; } cont(); }, }); - setScale(props.scaledSize.scale); + scaleRef.current = props.scaledSize.scale; } catch (error) { error.message = `Error rendering page no. ${props.pageNo}: ${error.message}`; setError(error); throw error; } - // eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied - }, [page, props.scaledSize, isVisible]); + }, [page, props.scaledSize, isVisible, props.pageNo]); useAsyncEffect(async (event: AsyncEffectEvent) => { if (page || !isVisible || !props.pdf) return; @@ -74,8 +103,7 @@ export default function Page(props: PageProps) { props.container.current.scrollTop = wrapperRef.current.offsetTop; // console.warn('setting focus on page', props.pageNo, wrapperRef.current.offsetTop); } - // eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied - }, [props.focusOnLoad]); + }, [props.container, props.focusOnLoad]); let style: any = {}; if (props.scaledSize) { @@ -87,16 +115,14 @@ export default function Page(props: PageProps) { } return ( -
+
{error ? 'ERROR' : 'Loading..'}
Page {props.pageNo} -
- {props.isAnchored ? '📌' : ''} Page {props.pageNo} -
-
+ {props.showPageNumbers && {props.isAnchored ? '📌' : ''} Page {props.pageNo}} + ); } diff --git a/packages/pdf-viewer/VerticalPages.tsx b/packages/pdf-viewer/VerticalPages.tsx index 53c211a47..3ce54ec7f 100644 --- a/packages/pdf-viewer/VerticalPages.tsx +++ b/packages/pdf-viewer/VerticalPages.tsx @@ -1,42 +1,67 @@ -import React, { useLayoutEffect, useRef, useState } from 'react'; -import { PdfData, ScaledSize } from './pdfSource'; +import { useEffect, useRef, useState, MutableRefObject } from 'react'; +import * as React from 'react'; +import { PdfData } from './pdfSource'; import Page from './Page'; +import styled from 'styled-components'; +import useScaledSize, { ScaledSizeParams } from './hooks/useScaledSize'; -require('./pages.css'); +const PagesHolder = styled.div<{ pageGap: number }>` + display: flex; + justify-content: center; + align-items: center; + flex-flow: column; + width: 100%; + min-height: 100%; + row-gap: ${(props)=> props.pageGap || 2}px; +`; export interface VerticalPagesProps { pdf: PdfData; isDarkTheme: boolean; - anchorPage: number; - container: React.MutableRefObject; + anchorPage?: number; + rememberScroll?: boolean; + pdfId?: string; + container: MutableRefObject; + pageGap?: number; + showPageNumbers?: boolean; } export default function VerticalPages(props: VerticalPagesProps) { - const [scaledSize, setScaledSize] = useState(null); + const [containerWidth, setContainerWidth] = useState(null); const innerContainerEl = useRef(null); - useLayoutEffect(() => { + const scaledSize = useScaledSize({ + pdf: props.pdf, + pdfId: props.pdfId, + containerWidth, + rememberScroll: props.rememberScroll, + anchorPage: props.anchorPage, + container: props.container, + innerContainerEl, + pageGap: props.pageGap, + } as ScaledSizeParams); + + useEffect(() => { let resizeTimer: number = null; let cancelled = false; - const updateSize = async () => { - if (props.pdf) { - const innerWidth = innerContainerEl.current.clientWidth; - const scaledSize = await props.pdf.getScaledSize(null, innerWidth - 10); - if (cancelled) return; - setScaledSize(scaledSize); - } + + const updateWidth = () => { + if (cancelled) return; + setContainerWidth(innerContainerEl.current.clientWidth); }; + const onResize = () => { if (resizeTimer) { clearTimeout(resizeTimer); resizeTimer = null; } - resizeTimer = window.setTimeout(updateSize, 200); + resizeTimer = window.setTimeout(updateWidth, 200); }; + + updateWidth(); window.addEventListener('resize', onResize); - updateSize() - .catch(console.error); + return () => { cancelled = true; window.removeEventListener('resize', onResize); @@ -47,13 +72,46 @@ export default function VerticalPages(props: VerticalPagesProps) { }; }, [props.pdf]); - return (
- {Array.from(Array(props.pdf.pageCount).keys()).map((i: number) => { - // setting focusOnLoad only after scaledSize is set so that the container height is set correctly - return ; + useEffect(() => { + let scrollTimer: number = null; + + const saveScroll = () => { + const scrollTop = props.container.current.scrollTop; + if (props.rememberScroll && props.pdfId) { + sessionStorage.setItem(`pdf.${props.pdfId}.scrollTop`, `${scrollTop}`); + } + }; + + const onScroll = () => { + if (scrollTimer) { + clearTimeout(scrollTimer); + scrollTimer = null; + } + scrollTimer = window.setTimeout(saveScroll, 200); + }; + + props.container.current.addEventListener('scroll', onScroll); + + return () => { + props.container.current.removeEventListener('scroll', onScroll); + if (scrollTimer) { + clearTimeout(scrollTimer); + scrollTimer = null; + } + }; + + }, [props.container, props.pdfId, props.rememberScroll]); + + return ( + {scaledSize ? + Array.from(Array(props.pdf.pageCount).keys()).map((i: number) => { + // setting focusOnLoad only after scaledSize is set so that the container height is set correctly + return ; + } + ) : 'Calculating size...' } - )} -
); + ); } diff --git a/packages/pdf-viewer/hooks/useIsVisible.ts b/packages/pdf-viewer/hooks/useIsVisible.ts index 1e9037dd8..33b42caa9 100644 --- a/packages/pdf-viewer/hooks/useIsVisible.ts +++ b/packages/pdf-viewer/hooks/useIsVisible.ts @@ -1,7 +1,7 @@ -import React, { useEffect, useState } from 'react'; +import { useEffect, useState, MutableRefObject } from 'react'; -const useIsVisible = (elementRef: React.MutableRefObject, rootRef: React.MutableRefObject) => { +const useIsVisible = (elementRef: MutableRefObject, rootRef: MutableRefObject) => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { let observer: IntersectionObserver = null; @@ -29,8 +29,7 @@ const useIsVisible = (elementRef: React.MutableRefObject, rootRef: observer.disconnect(); } }; - // eslint-disable-next-line @seiyab/react-hooks/exhaustive-deps -- Old code before rule was applied - }, []); + }, [elementRef, rootRef]); return isVisible; }; diff --git a/packages/pdf-viewer/hooks/usePdfData.ts b/packages/pdf-viewer/hooks/usePdfData.ts new file mode 100644 index 000000000..29d4aad18 --- /dev/null +++ b/packages/pdf-viewer/hooks/usePdfData.ts @@ -0,0 +1,19 @@ +import { useState } from 'react'; +import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect'; +import { PdfData } from '../pdfSource'; + + +const usePdfData = (pdfPath: string) => { + const [pdf, setPdf] = useState(null); + + useAsyncEffect(async (event: AsyncEffectEvent) => { + const pdfData = new PdfData(); + await pdfData.loadDoc(pdfPath); + if (event.cancelled) return; + setPdf(pdfData); + }, [pdfPath]); + + return pdf; +}; + +export default usePdfData; diff --git a/packages/pdf-viewer/hooks/useScaledSize.ts b/packages/pdf-viewer/hooks/useScaledSize.ts new file mode 100644 index 000000000..2b1f61e4c --- /dev/null +++ b/packages/pdf-viewer/hooks/useScaledSize.ts @@ -0,0 +1,52 @@ +import { useRef, useState, MutableRefObject } from 'react'; +import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect'; +import { ScaledSize, PdfData } from '../pdfSource'; + +export interface ScaledSizeParams { + pdf: PdfData; + pdfId: string; + containerWidth: number; + rememberScroll: boolean; + anchorPage: number; + container: MutableRefObject; + innerContainerEl: MutableRefObject; + pageGap: number; +} + +const useScaledSize = ({ pdf, pdfId, containerWidth, rememberScroll, anchorPage, container, innerContainerEl, pageGap }: ScaledSizeParams) => { + const [scaledSize, setScaledSize] = useState(null); + const currentScaleSize = useRef(scaledSize); + + useAsyncEffect(async (event: AsyncEffectEvent) => { + if (!pdf || !containerWidth) return; + // console.log('scaledSize calculation triggered'); + const scaledSize_ = await pdf.getScaledSize(null, containerWidth - 10); + if (event.cancelled) return; + + const oldScaleSize = currentScaleSize.current; + const oldScrollTop = container.current.scrollTop; + + innerContainerEl.current.style.height = `${(scaledSize_.height + (pageGap || 2)) * pdf.pageCount}px`; + + // Adjust scroll position after window resize to keep the same page visible + if (oldScaleSize && container.current) { + container.current.scrollTop = oldScrollTop * (scaledSize_.scale / oldScaleSize.scale); + } + + currentScaleSize.current = scaledSize_; + setScaledSize(scaledSize_); + + // If loading after note rerender, try to retirive the old scroll position + if (rememberScroll && pdfId && !oldScaleSize && !anchorPage) { + const scrollOffset = parseInt(sessionStorage.getItem(`pdf.${pdfId}.scrollTop`), 10) || null; + if (scrollOffset) { + container.current.scrollTop = scrollOffset; + // console.log('scroll set',container.current.scrollTop); + } + } + }, [pdf, pdfId, rememberScroll, anchorPage, containerWidth]); + + return scaledSize; +}; + +export default useScaledSize; diff --git a/packages/pdf-viewer/main.tsx b/packages/pdf-viewer/main.tsx new file mode 100644 index 000000000..86ca08374 --- /dev/null +++ b/packages/pdf-viewer/main.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import shim from '@joplin/lib/shim'; +shim.setReact(React); +import { render } from 'react-dom'; +import * as pdfjsLib from 'pdfjs-dist'; +import MiniViewerApp from './miniViewer'; + +require('./viewer.css'); + +// Setting worker path to worker bundle. +pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js'; + +const url = window.frameElement.getAttribute('x-url'); +const type = window.frameElement.getAttribute('x-type'); +const appearance = window.frameElement.getAttribute('x-appearance'); +const anchorPage = window.frameElement.getAttribute('x-anchorPage'); +const pdfId = window.frameElement.getAttribute('id'); + +document.documentElement.setAttribute('data-theme', appearance); + +function App() { + if (type === 'mini') { + return ; + } + return
Error: Unknown app type "{type}"
; +} + +render( + , + document.getElementById('pdf-root') +); diff --git a/packages/pdf-viewer/miniViewer.tsx b/packages/pdf-viewer/miniViewer.tsx index f5e31c33d..12cfe972c 100644 --- a/packages/pdf-viewer/miniViewer.tsx +++ b/packages/pdf-viewer/miniViewer.tsx @@ -1,31 +1,20 @@ -import React, { useRef, useState } from 'react'; -import shim from '@joplin/lib/shim'; -shim.setReact(React); -import { render } from 'react-dom'; -import * as pdfjsLib from 'pdfjs-dist'; +import React, { useRef } from 'react'; import useIsFocused from './hooks/useIsFocused'; -import { PdfData } from './pdfSource'; +import usePdfData from './hooks/usePdfData'; import VerticalPages from './VerticalPages'; -import useAsyncEffect, { AsyncEffectEvent } from '@joplin/lib/hooks/useAsyncEffect'; -require('./viewer.css'); +export interface MiniViewerAppProps { + pdfPath: string; + isDarkTheme: boolean; + anchorPage: number; + pdfId: string; +} -// Setting worker path to worker bundle. -pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js'; - - -function MiniViewerApp(props: { pdfPath: string; isDarkTheme: boolean; anchorPage: number }) { - const [pdf, setPdf] = useState(null); +export default function MiniViewerApp(props: MiniViewerAppProps) { + const pdf = usePdfData(props.pdfPath); const isFocused = useIsFocused(); const containerEl = useRef(null); - useAsyncEffect(async (event: AsyncEffectEvent) => { - const pdfData = new PdfData(); - await pdfData.loadDoc(props.pdfPath); - if (event.cancelled) return; - setPdf(pdfData); - }, []); - if (!pdf) { return (
@@ -36,7 +25,8 @@ function MiniViewerApp(props: { pdfPath: string; isDarkTheme: boolean; anchorPag return (
- +
@@ -47,14 +37,3 @@ function MiniViewerApp(props: { pdfPath: string; isDarkTheme: boolean; anchorPag
); } - -const url = window.frameElement.getAttribute('url'); -const appearance = window.frameElement.getAttribute('appearance'); -const anchorPage = window.frameElement.getAttribute('anchorPage'); - -document.documentElement.setAttribute('data-theme', appearance); - -render( - , - document.getElementById('pdf-root') -); diff --git a/packages/pdf-viewer/package.json b/packages/pdf-viewer/package.json index 5ba7bb3fb..06c82bcd3 100644 --- a/packages/pdf-viewer/package.json +++ b/packages/pdf-viewer/package.json @@ -21,8 +21,9 @@ "devDependencies": { "@types/jest": "^28.1.6", "@types/pdfjs-dist": "^2.10.378", - "@types/react": "^18.0.14", + "@types/react": "16.9.55", "@types/react-dom": "^16.9.0", + "@types/styled-components": "^5.1.25", "babel-jest": "^28.1.3", "css-loader": "^6.7.1", "jest": "^28.1.3", @@ -38,6 +39,7 @@ "@joplin/lib": "workspace:^", "pdfjs-dist": "^2.14.305", "react": "16.13.1", - "react-dom": "16.9.0" + "react-dom": "16.9.0", + "styled-components": "^5.3.5" } } diff --git a/packages/pdf-viewer/pages.css b/packages/pdf-viewer/pages.css deleted file mode 100644 index ba262c730..000000000 --- a/packages/pdf-viewer/pages.css +++ /dev/null @@ -1,76 +0,0 @@ -::-webkit-scrollbar { - width: 7px; - height: 7px; -} - -::-webkit-scrollbar-corner { - background: none; -} - -::-webkit-scrollbar-track { - border: none; -} - -::-webkit-scrollbar-thumb { - background: var(--grey); - border-radius: 5px; -} - -.app-pages { - display: flex; - justify-content: center; - align-items: start; - overflow-x: hidden; - width: 100%; - height: 100%; - padding: 0.5rem; - padding-top: 0px; - overflow-y: hidden; - padding-right: 0.25rem; - position: relative; -} - -.app-pages.focused { - padding-right: 0px; - overflow-y: auto; -} - -.pages-holder { - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - flex-flow: column; - width: 100%; - min-height: 100%; - height: auto; - row-gap: 2px; -} - -.page-wrapper { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - overflow: hidden; - border: solid thin rgba(120, 120, 120, 0.498); - background: rgb(233, 233, 233); - position: relative; -} - -.page-info { - position: absolute; - top: 0.5rem; - left: 0.5rem; - padding: 0.3rem; - background: rgba(203, 203, 203, 0.509); - border-radius: 0.3rem; - font-size: 0.8rem; - color: rgba(91, 91, 91, 0.829); - backdrop-filter: blur(0.5rem); - cursor: default; -} - -.page-info:hover { - opacity: 0.3; -} \ No newline at end of file diff --git a/packages/pdf-viewer/viewer.css b/packages/pdf-viewer/viewer.css index 41d055139..95913b1e4 100644 --- a/packages/pdf-viewer/viewer.css +++ b/packages/pdf-viewer/viewer.css @@ -1,98 +1,157 @@ *, *::before, *::after { - box-sizing: border-box; - outline: none; + box-sizing: border-box; + outline: none; +} + +::-webkit-scrollbar { + width: 7px; + height: 7px; +} + +::-webkit-scrollbar-corner { + background: none; +} + +::-webkit-scrollbar-track { + border: none; +} + +::-webkit-scrollbar-thumb { + background: var(--grey); + border-radius: 5px; } :root { - --white: rgb(255, 255, 255); - --light: rgb(219, 219, 219); - --grey: rgb(128, 128, 128); - --dark: rgb(1, 0, 34); - --black: rgb(24, 24, 24); + --white: rgb(255, 255, 255); + --light: rgb(219, 219, 219); + --grey: rgb(128, 128, 128); + --dark: rgb(1, 0, 34); + --black: rgb(24, 24, 24); - --red: #ff000d; - --blue: #00A8FF; - --green: rgb(0, 167, 28); - --purple: rgb(132, 0, 255); - --orange: rgb(255, 164, 27); + --red: #ff000d; + --blue: #00A8FF; + --green: rgb(0, 167, 28); + --purple: rgb(132, 0, 255); + --orange: rgb(255, 164, 27); - --primary: var(--black); - --secondary: var(--dark); - --tertiary: var(--light); - --bg: var(--white); + --primary: var(--black); + --secondary: var(--dark); + --tertiary: var(--light); + --bg: var(--white); } [data-theme="dark"] { - --primary: var(--white); - --secondary: var(--light); - --tertiary: var(--dark); - --bg: var(--black); + --primary: var(--white); + --secondary: var(--light); + --tertiary: var(--dark); + --bg: var(--black); } html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - -ms-overflow-style: scrollbar; - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + -ms-overflow-style: scrollbar; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { - margin: 0px; - padding: 0px; - -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; + margin: 0px; + padding: 0px; + -webkit-overflow-scrolling: touch; + scroll-behavior: smooth; } html, body { - font-family: 'Segoe UI', sans-serif; - font-size: var(--s); - font-weight: 300; - color: var(--secondary); + font-family: 'Segoe UI', sans-serif; + font-size: var(--s); + font-weight: 300; + color: var(--secondary); } hr { - box-sizing: content-box; - height: 0; - overflow: visible; + box-sizing: content-box; + height: 0; + overflow: visible; } .mini-app { - display: grid; - grid-template-rows: auto 2rem; - height: 100vh; - width: 100vw; - background-color: var(--bg); - overflow: hidden; - border-radius: 0.4rem; - border: solid thin var(--tertiary); - padding-top: 0.6rem; - padding-right: 0.25rem; - background-color: rgb(240, 241, 245); + display: grid; + grid-template-rows: auto 2rem; + height: 100vh; + width: 100vw; + background-color: var(--bg); + overflow: hidden; + border-radius: 0.4rem; + border: solid thin var(--tertiary); + padding-top: 0.6rem; + padding-right: 0.25rem; + background-color: rgb(240, 241, 245); } .mini-app.focused { - border: solid thin var(--grey); + border: solid thin var(--grey); } .mini-app.loading { - display: flex; - justify-content: center; - align-items: center; + display: flex; + justify-content: center; + align-items: center; } [data-theme="dark"] .mini-app { - background-color: rgb(54, 54, 54); + background-color: rgb(54, 54, 54); } .app-bottom-bar { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 0.2rem 0.5rem; - font-size: 0.8rem; - color: var(--grey); + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0.2rem 0.5rem; + font-size: 0.8rem; + color: var(--grey); +} + +.pdf-info>a { + padding: 0rem 0.4rem; + color: var(--blue); + cursor: pointer; + border: solid thin transparent; + border-radius: 5px; + user-select: none; +} + +.pdf-info>a:hover { + border-color: var(--grey); +} + +.app-pages { + display: flex; + justify-content: center; + align-items: start; + overflow-x: hidden; + width: 100%; + height: 100%; + padding: 0.5rem; + padding-top: 0px; + padding-bottom: 0px; + overflow-y: hidden; + padding-right: 0.25rem; + position: relative; +} + +.app-pages.focused { + padding-right: 0px; + overflow-y: auto; + overflow-x: auto; +} + +.pdf-info { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; } \ No newline at end of file diff --git a/packages/pdf-viewer/webpack.config.js b/packages/pdf-viewer/webpack.config.js index 8f19cc38e..4a8da32b4 100644 --- a/packages/pdf-viewer/webpack.config.js +++ b/packages/pdf-viewer/webpack.config.js @@ -2,7 +2,7 @@ const path = require('path'); module.exports = { entry: { - main: './miniViewer.tsx', + main: './main.tsx', 'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry', }, module: { diff --git a/packages/renderer/MdToHtml.ts b/packages/renderer/MdToHtml.ts index ecaa898a5..333c0e7cd 100644 --- a/packages/renderer/MdToHtml.ts +++ b/packages/renderer/MdToHtml.ts @@ -28,6 +28,8 @@ export interface RenderOptions { plainResourceRendering?: boolean; mapsToLine?: boolean; useCustomPdfViewer?: boolean; + noteId?: string; + vendorDir?: string; } interface RendererRule { @@ -172,6 +174,8 @@ export interface RuleOptions { videoPlayerEnabled: boolean; pdfViewerEnabled: boolean; useCustomPdfViewer: boolean; + noteId?: string; + vendorDir?: string; itemIdToUrl?: ItemIdToUrlHandler; } diff --git a/packages/renderer/MdToHtml/renderMedia.ts b/packages/renderer/MdToHtml/renderMedia.ts index 9d03f0f52..6ef7ace7f 100644 --- a/packages/renderer/MdToHtml/renderMedia.ts +++ b/packages/renderer/MdToHtml/renderMedia.ts @@ -1,5 +1,6 @@ import { Link } from '../MdToHtml'; import { toForwardSlashes } from '../pathUtils'; +import { LinkIndexes } from './rules/link_close'; const Entities = require('html-entities').AllHtmlEntities; const htmlentities = new Entities().encode; @@ -8,6 +9,8 @@ export interface Options { videoPlayerEnabled: boolean; pdfViewerEnabled: boolean; useCustomPdfViewer: boolean; + noteId: string; + vendorDir: string; theme: any; } @@ -16,7 +19,7 @@ function resourceUrl(resourceFullPath: string): string { return `file://${toForwardSlashes(resourceFullPath)}`; } -export default function(link: Link, options: Options) { +export default function(link: Link, options: Options, linkIndexes: LinkIndexes) { const resource = link.resource; if (!link.resourceReady || !resource || !resource.mime) return ''; @@ -44,16 +47,32 @@ export default function(link: Link, options: Options) { } if (options.pdfViewerEnabled && resource.mime === 'application/pdf') { + if (options.useCustomPdfViewer) { + const resourceId = resource.id; let anchorPageNo = null; + + let id = `${options.noteId}.${resourceId}`; + if (linkIndexes && linkIndexes[resourceId]) { + linkIndexes[resourceId]++; + } else { + linkIndexes[resourceId] = 1; + } + id += `.${linkIndexes[resourceId]}`; + if (link.href.indexOf('#') > 0) { anchorPageNo = Number(link.href.split('#').pop()); if (anchorPageNo < 1) anchorPageNo = null; } - return ``; } + return ``; } diff --git a/packages/renderer/MdToHtml/rules/link_close.ts b/packages/renderer/MdToHtml/rules/link_close.ts index f64e3a608..ab214ad55 100644 --- a/packages/renderer/MdToHtml/rules/link_close.ts +++ b/packages/renderer/MdToHtml/rules/link_close.ts @@ -4,18 +4,25 @@ import { RuleOptions } from '../../MdToHtml'; import renderMedia, { Options as RenderMediaOptions } from '../renderMedia'; + +export interface LinkIndexes { + [key: string]: number; +} + function plugin(markdownIt: any, ruleOptions: RuleOptions) { const defaultRender = markdownIt.renderer.rules.link_close || function(tokens: any, idx: any, options: any, _env: any, self: any) { return self.renderToken(tokens, idx, options); }; + const linkIndexes: LinkIndexes = {}; + markdownIt.renderer.rules.link_close = function(tokens: any[], idx: number, options: any, env: any, self: any) { const defaultOutput = defaultRender(tokens, idx, options, env, self); const link = ruleOptions.context.currentLinks.pop(); if (!link || ruleOptions.linkRenderingType === 2 || ruleOptions.plainResourceRendering) return defaultOutput; - return [defaultOutput, renderMedia(link, ruleOptions as RenderMediaOptions)].join(''); + return [defaultOutput, renderMedia(link, ruleOptions as RenderMediaOptions, linkIndexes)].join(''); }; } diff --git a/yarn.lock b/yarn.lock index 6f513bc21..6aa0f49a2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2985,6 +2985,15 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.1.0": + version: 1.2.0 + resolution: "@emotion/is-prop-valid@npm:1.2.0" + dependencies: + "@emotion/memoize": ^0.8.0 + checksum: cc7a19850a4c5b24f1514665289442c8c641709e6f7711067ad550e05df331da0692a16148e85eda6f47e31b3261b64d74c5e25194d053223be16231f969d633 + languageName: node + linkType: hard + "@emotion/memoize@npm:0.7.4": version: 0.7.4 resolution: "@emotion/memoize@npm:0.7.4" @@ -2999,6 +3008,13 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.8.0": + version: 0.8.0 + resolution: "@emotion/memoize@npm:0.8.0" + checksum: c87bb110b829edd8e1c13b90a6bc37cebc39af29c7599a1e66a48e06f9bec43e8e53495ba86278cc52e7589549492c8dfdc81d19f4fdec0cee6ba13d2ad2c928 + languageName: node + linkType: hard + "@emotion/serialize@npm:^0.9.1": version: 0.9.1 resolution: "@emotion/serialize@npm:0.9.1" @@ -4268,8 +4284,9 @@ __metadata: "@joplin/lib": "workspace:^" "@types/jest": ^28.1.6 "@types/pdfjs-dist": ^2.10.378 - "@types/react": ^18.0.14 + "@types/react": 16.9.55 "@types/react-dom": ^16.9.0 + "@types/styled-components": ^5.1.25 babel-jest: ^28.1.3 css-loader: ^6.7.1 jest: ^28.1.3 @@ -4278,6 +4295,7 @@ __metadata: react: 16.13.1 react-dom: 16.9.0 style-loader: ^3.3.1 + styled-components: ^5.3.5 ts-jest: ^28.0.7 ts-loader: ^9.3.0 typescript: ^4.0.5 @@ -6990,17 +7008,6 @@ __metadata: languageName: node linkType: hard -"@types/react@npm:^18.0.14": - version: 18.0.15 - resolution: "@types/react@npm:18.0.15" - dependencies: - "@types/prop-types": "*" - "@types/scheduler": "*" - csstype: ^3.0.2 - checksum: e22cc388d1c145aa184787e44dc28db4789976c704cd5db475c170bb76a560eb81def5f346cfe750949bb3d43ad88822b8cbb9f19b1286e3795892a8263e7715 - languageName: node - linkType: hard - "@types/responselike@npm:*, @types/responselike@npm:^1.0.0": version: 1.0.0 resolution: "@types/responselike@npm:1.0.0" @@ -7046,6 +7053,17 @@ __metadata: languageName: node linkType: hard +"@types/styled-components@npm:^5.1.25": + version: 5.1.25 + resolution: "@types/styled-components@npm:5.1.25" + dependencies: + "@types/hoist-non-react-statics": "*" + "@types/react": "*" + csstype: ^3.0.2 + checksum: 60ce64f13283b01da54fd3a4c5703769d8575c979d5ec6b67ad124c2d4df980c9b96bb91af87e03f6447a816a5d2b0270c63eefad60cfa885091b594984525f5 + languageName: node + linkType: hard + "@types/testing-library__react-hooks@npm:^3.4.0": version: 3.4.1 resolution: "@types/testing-library__react-hooks@npm:3.4.1" @@ -9087,6 +9105,21 @@ __metadata: languageName: node linkType: hard +"babel-plugin-styled-components@npm:>= 1.12.0": + version: 2.0.7 + resolution: "babel-plugin-styled-components@npm:2.0.7" + dependencies: + "@babel/helper-annotate-as-pure": ^7.16.0 + "@babel/helper-module-imports": ^7.16.0 + babel-plugin-syntax-jsx: ^6.18.0 + lodash: ^4.17.11 + picomatch: ^2.3.0 + peerDependencies: + styled-components: ">= 2" + checksum: 80b06b10db02d749432a0ac43a5feedd686f6b648628d7433a39b1844260b2b7c72431f6e705c82636ee025fcfd4f6c32fc05677e44033b8a39ddcd4488b3147 + languageName: node + linkType: hard + "babel-plugin-syntax-flow@npm:^6.18.0": version: 6.18.0 resolution: "babel-plugin-syntax-flow@npm:6.18.0" @@ -26785,7 +26818,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.3.1": +"picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 050c865ce81119c4822c45d3c84f1ced46f93a0126febae20737bd05ca20589c564d6e9226977df859ed5e03dc73f02584a2b0faad36e896936238238b0446cf @@ -31518,6 +31551,28 @@ __metadata: languageName: node linkType: hard +"styled-components@npm:^5.3.5": + version: 5.3.5 + resolution: "styled-components@npm:5.3.5" + dependencies: + "@babel/helper-module-imports": ^7.0.0 + "@babel/traverse": ^7.4.5 + "@emotion/is-prop-valid": ^1.1.0 + "@emotion/stylis": ^0.8.4 + "@emotion/unitless": ^0.7.4 + babel-plugin-styled-components: ">= 1.12.0" + css-to-react-native: ^3.0.0 + hoist-non-react-statics: ^3.0.0 + shallowequal: ^1.1.0 + supports-color: ^5.5.0 + peerDependencies: + react: ">= 16.8.0" + react-dom: ">= 16.8.0" + react-is: ">= 16.8.0" + checksum: 05a664dfe423c2906959a0f3f47f9b1ad630e493eb2e06deea0dc0906af33ba5ca17277b98948a6c9642e73894d6533391aebf45576489f5afe920c974e9f8eb + languageName: node + linkType: hard + "styled-system@npm:5.1.5": version: 5.1.5 resolution: "styled-system@npm:5.1.5"