DanielArnould
commented
1 month ago expose content, position,etc in selectionTip as props. i have this use case where i have a text copy button inside the selectionTip, so having access to those values would be nice.
selectionTip is just of the Tip type and you can access the currently displayed selectionTip with the usePdfHighlighterContext hook or with the PdfHighlighterUtils directly.
the highlights prop takes value of type "Highlight[]", this isnt ideal imo, cause content type is often expensive to store in db, and not preferred imo. would be cool if youd make it "Omit<Highlight,"content"> [] | Highlight[]> , or something similar. same goes for the scrollToHighlight fn
Very true. I'm not too fond of adding additional accepted types to functions and components since I feel that confuses expected behaviour, but since content isn't actually used anywhere inside the PdfHighlighter, we can just make that property optional. This brings up some side effects, but they're covered in #16 .
Currently position is the position of a highlight which the tip should hover around. You can currently get precise positioning by passing through some fake highlight position. I'm not too fond of just exposing the raw positioning though since it seems the developer could just display an overlay themselves after a selection event in that case. But, if there's good reasoning for exposing offsets or the raw positioning, then I'm more than interested :).
For deleting a highlight itd be better for the popup to appear once the user clicks on the highlight instead of hover.
Not too sure what you mean? This sounds like an example app request though, which would be of low priority.
also maybe a fn to Scroll to specific page no . someone else raised this issue in the https://github.com/agentcooper/react-pdf-highlighter/issues/263
PDF.js actually already exposes this functionality via the PDF Viewer, which you can access yourself. Note: pageNumber is indexed at 1 like usual for PDF.js.
// Using usePdfHighlighterContext hook inside of any child of PdfHighlighter. For example, inside a tip
const { getViewer } = usePdfHighlighterContext();
getViewer()?.scrollPageIntoView({pageNumber: 2});
// Using utils ref outside of the PdfHighlighter component (taken from example app)
const highlighterUtilsRef = useRef<PdfHighlighterUtils>();
highlighterUtilsRef.current?.getViewer()?.scrollPageIntoView({ pageNumber: 2);You can even add in a destArray,
scrollPageIntoView({ pageNumber: 2, destArray: [null, { name: "XYZ" }, 10, 10, "page-fit"] });and maybe a toggle button which if turned on, then if any text is selected it gets highlighted. (instead of having to click the popover everytime). => some helper fn to implement this would be cool.
There's a lot of variability here in how a developer might want to implement this (how should highlights be separated, what data should be stored with highlights, etc.). In general though, you could implement this crudely by simply adding creating a highlight on every selection event. This is much simpler with the new selection event in #15 , and I've added this functionality to the example app.
feature to search text
The text layer of each PDF is currently loaded in, so you should be able to Ctrl + F as usual. Exposing the PDFFindService from PDF.js could have its perks though. I'll keep considering it.
zeus-12
v8 is awesome! Thanks a ton for putting time into this.
Few feature requests:
expose content, position,etc in selectionTip as props. i have this use case where i have a text copy button inside the selectionTip, so having access to those values would be nice.
the highlights prop takes value of type "Highlight[]", this isnt ideal imo, cause content type is often expensive to store in db, and not preferred imo. would be cool if youd make it "Omit<Highlight,"content"> [] | Highlight[]> , or something similar. same goes for the
scrollToHighlightfnFor deleting a highlight itd be better for the popup to appear once the user clicks on the highlight instead of hover.
also maybe a fn to Scroll to specific page no . someone else raised this issue in the other lib
and maybe a toggle button which if turned on, then if any text is selected it gets highlighted. (instead of having to click the popover everytime). => some helper fn to implement this would be cool.
feature to search text