@react-pdf-viewer/core 3.5.0

Customize the highlight elements

on Node.js Yarn

New feature

• Be able to customize the highlight elements when searching for a keyword:

const searchPluginInstance = searchPlugin({
    renderHighlights: (highlightPositions: HighlightPosition[]) => (
        // Your custom highlight elements
    ),
});

Improvements

• The highlight plugin supports double click. Users can double click to select the entire text of a given element

• The page navigation plugin allows to jump to the previous and next pages with shortcuts.

The shortcuts are enabled by default. It's possible to disable them, for example:

// Use the standalone page navigation plugin
const pageNavigationPluginInstance = pageNavigationPlugin({
    enableShortcuts: false,
});

// Use the default layout plugin
const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        pageNavigationPlugin: {
            enableShortcuts: false,
        },
    },
});

Bug fixes

• Don't highlight the entire page when selecting multiple lines
• The default layout plugin throws an exception if the setInitialTabFromPageMode function returns a Promise which resolves an invalid tab index
• The highlight plugin throws an exception when double click a page without selecting any text
• The search plugin can't set the initial keyword when using with the highlight plugins