@react-pdf-viewer/core 3.8.0

Improve Highlight plugin

on Node.js Yarn

New features

• Set the initial rotation with the new initialRotation parameter:

<Viewer initialRotation={90} />

• The highlight plugin provides new function to switch the trigger mode:

const highlightPluginInstance = highlightPlugin();
const { switchTrigger } = highlightPluginInstance;

// Switch to None
switchTrigger(Trigger.None);

// Switch to Selection mode
switchTrigger(Trigger.TextSelection);

• Users can click and drag to highlight an area

Improvements

• Adjust the pointer when hovering the mouse over checkboxes inside the search popover
• Keep the expanded/collapsed state of each bookmark
• Set the title and aria-label attributes for link annotations without using the Bookmark plugin
• Support pdf-js 3.0.279
• RenderBookmarkItemProps includes new path property that indicates the path from each bookmark item to the root
• SelectionData provides more information about the selected text including:

A DivText item consists of

• The open file dialog filters PDF files by default
• The search popover should perform search based on the initial keyword passed to the keyword option:

const searchPluginInstance = searchPlugin({
    keyword: '...',
});

• RenderSearchProps adds new isDocumentLoaded property that indicates if the document is loaded.
  You can use it to perform searching for a keyword in a sidebar:

import type { Match, RenderSearchProps } from '@react-pdf-viewer/search';

const SearchSidebarInner: React.FC<{
    renderSearchProps: RenderSearchProps
}> = ({ renderSearchProps }) => {
    const [matches, setMatches] = React.useState<Match[]>([]);
    const { isDocumentLoaded, keyword, search } = renderSearchProps;

    React.useEffect(() => {
        if (isDocumentLoaded && keyword) {
            search().then((matches) => {
                setMatches(matches);
            });
        }
    }, [isDocumentLoaded]);

    return (
        // Display matches ...
    );
};

Bug fixes

• Can't render certain PDF documents that contain an annotation whose destination consists of non alphabetical characters
• Popover doesn't work if the Viewer is rendered inside ShadowDOM
• Replace the deprecated contents and title properties of annotations with corresponding objects
• The annotation link doesn't navigate to the correct page in some cases
• The Cover component doesn't rotate the corresponding rotated page
• The jumpToHighlightArea function does not work properly with some documents
• The startPageIndex and endPageIndex properties of SelectionData aren't correct

Breaking change

• In addition to selecting texts, users can click and drag to highlight a particular area. The second way doesn't provide the SelectionData data.
  The SelectionData property in RenderHighlightContentProps and RenderHighlightTargetProps turn to optional properties.

interface RenderHighlightContentProps {
    selectionData?: SelectionData;
}

interface RenderHighlightTargetProps {
    selectionData?: SelectionData;
}

You have to check if it exists before using it:

if (renderHighlightContentProps.selectionData) {
    // Do something ...
}

if (renderHighlightTargetProps.selectionData) {
    // Do something ...
}