Highlight plugin

The highlight plugin allows to select particular texts in the document and highlight them.

Install

npm install '@react-pdf-viewer/highlight';

Usage

  • Import the plugin and styles:
import { highlightPlugin } from '@react-pdf-viewer/highlight';

// Import styles
import '@react-pdf-viewer/highlight/lib/styles/index.css';
  • Create the plugin instance:
const highlightPluginInstance = highlightPlugin(props?: HighlightPluginProps);

The highlightPlugin() function takes a HighlightPluginProps parameter that consists of the following properties:

PropertyTypeDescriptionFrom
renderHighlightTarget?RenderHighlightTargetProps => ReactElementRender the element displayed after you select texts. It can be a form that allows user to add a note about selected text2.3.0
renderHighlightContent?RenderHighlightContentProps => ReactElementRender the highlighted texts before you are going to do something with the selected text2.3.0
renderHighlights?RenderHighlightsProps => ReactElementRender the texts that are highlighted2.3.0

In the next sections, we will go through each property to demonstrate a completed example of highlighting texts.

  • Finally, register the highlight plugin instance:
<Viewer
    fileUrl='...'
    plugins={[
        highlightPluginInstance,
    ]}
/>

HighlightArea data structure

Imagine that when user selects multiple texts in the PDF document. Each selected text will be represented by its bounding rectangle:

interface HighlightArea {
    height: number;
    left: number;
    pageIndex: number;
    top: number;
    width: number;
}

The top and left properties are the distances from the top-left corner of the bounding rectangle to the top and left side of pages. While height and width properties are the height and width of the rectangle. All those properties are the number of percentages, not the absolute values in pixels.

The pageIndex property is the index of page that the selected text belongs to.

The HighlightArea interface is available as following

import { HighlightArea } from '@react-pdf-viewer/highlight';

SelectionData data structure

Each page of the document consists of different layers including canvas, annotations, texts. The text layer is a div element that renders all texts in the page.

It is constructed by multiple span (or div) elements. In order to store exactly the text user selects, we need the SelectionData data structure:

interface SelectionData {
    startPageIndex: number;
    startOffset: number;
    startDivIndex: number;
    endPageIndex: number;
    endOffset: number;
    endDivIndex: number;
}

The startPageIndex is the index of starting page. The startOffset property is the index of starting character in the starting text element which is determined by the startDivIndex property.

The same definitions are used for the endPageIndex, endOffset and endDivIndex properties.

The SelectionData interface is available as following

import { SelectionData } from '@react-pdf-viewer/highlight';

Before diving in a completed example, let's assume that we are going to add note for selected texts. Each note has the following structure:

interface Note {
    // The generated unique identifier
    id: number;
    // The note content
    content: string;
    // The list of highlight areas
    highlightAreas: HighlightArea[];
    // The selected text
    quote: string;
}

renderHighlightTarget

This prop is used to render a custom target (a button, for example) that is used to trigger the form for adding a note.

renderHighlightTarget provides the following properties:

PropertyTypeDescriptionFrom
cancel()FunctionCancel the selection2.3.0
highlightAreasHighlightArea[]The list of highlight areas2.3.0
selectedTextstringThe selected text2.3.0
selectionDataSelectionDataThe selection data2.3.0
selectionRegionHighlightAreaThe area represents the entire selected region2.3.0
toggle()FunctionSwitch to the hightlighting state2.3.0

The following sample code displays a button after user selects text in the document:

import { 
    highlightPlugin, MessageIcon, RenderHighlightTargetProps
} from '@react-pdf-viewer/highlight';
import { Button, Position, Tooltip } from '@react-pdf-viewer/core';

const renderHighlightTarget = (props: RenderHighlightTargetProps) => (
    <div
        style={{
            background: '#eee',
            display: 'flex',
            position: 'absolute',
            left: `${props.selectionRegion.left}%`,
            top: `${props.selectionRegion.top + props.selectionRegion.height}%`,
            transform: 'translate(0, 8px)',
        }}
    >
        <Tooltip
            position={Position.TopCenter}
            target={<Button onClick={props.toggle}><MessageIcon /></Button>}
            content={() => <div style={{ width: '100px' }}>Add a note</div>}
            offset={{ left: 0, top: -8 }}
        />
    </div>
);

const highlightPluginInstance = highlightPlugin({
    renderHighlightTarget,
});

Select any text in the document (The sample code)

bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference
5Parameters for Opening PDF FilesYou can open a PDF document with a command or URL that specifies exactly what to display (a named destination or specific page), and how to display it (using such characteristics as a specific view, scrollbars, bookmarks, annotations, or highlighting).The parameters for URLs are supported by most browsers, and can be used when opening PDF documents programmatically.Many of these parameters can be passed to the following core API functions (see the Acrobat and PDF Library API Reference for details):AVDocOpenFromFileWithParamStringAVDocOpenFromASFileWithParamStringAVDocOpenFromPDDocWithParamStringWhen opening a PDF document from a command shell, you can pass the parameters to the open command using the /A switch with the following syntax:<Acrobat path> /A "<parameter>=<value>" "<PDF path>"For example:Acrobat.exe /A "zoom=1000" "C:\example.pdf"In Mac OS, you can use the parameters when opening a PDF document with an Apple event.Parameters The following table describes the parameters. Italics indicate user-specified variables.SyntaxDescriptionnameddest=destinationSpecifies a named destination in the PDF document.page=pagenumSpecifies a numbered page in the document, using an integer value. The document’s first page has a pagenum value of 1.comment=commentIDSpecifies a comment on a given page in the PDF document. Use the page command before this command. For example:#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Parameters 6collab=settingSets the comment repository to be used to supply and store comments for the document. This overrides the default comment server for the review or the default preference. The setting is of the form store_type@location, where valid values for store_type are:DAVFDF (WebDAV)FSFDF (Network folder)DB (ADBC)For example:#collab=DAVFDF@http://review_server/Collab/user1For more information on comment repositories, see Acrobat Online Collaboration: Setup and Administration.zoom=scalezoom=scale,left,topSets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.Scroll values left and top are in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.view=Fitview=FitHview=FitH,topview=FitVview=FitV,leftview=FitBview=FitBHview=FitBH,topview=FitBVview=FitBV,leftSet the view of the displayed page, using the keyword values defined in the PDF language specification. For more information, see the PDF Reference.Scroll values left and top are floats or integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.viewrect=left,top,wd,htSets the view rectangle using float or integer values in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.pagemode=bookmarkspagemode=thumbspagemode=none (default) Displays bookmarks or thumbnails.scrollbar=1|0Turns scrollbars on or off.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Specifying parameters in a URL 7Specifying parameters in a URLYou can specify multiple parameters in a single URL. Separate each parameter with either an ampersand (&) or a pound (#) character. Actions are processed and executed from left to right as they appear in the URL. Because all specified actions are executed, it is possible that later actions will override the effects of previous actions, so it is important to use the correct order. For example, page actions should appear before zoom actions.Commands are not case sensitive except for the value of a named destination. There can be no spaces in the URL. search=wordListOpens the Search panel and performs a search for any of the words in the specified word list. The first matching word is highlighted in the document.The words must be enclosed in quotation marks and separated by spaces. For example:#search="word1 word2"You can search only for single words. You cannot search for a string of words.toolbar=1|0Turns the toolbar on or off.statusbar=1|0Turns the status bar on or off.messages=1|0Turns the document message bar on or off.navpanes=1|0Turns the navigation panes and tabs on or off.highlight=lt,rt,top,btmHighlights a specified rectangle on the displayed page. Use the page command before this command.The rectangle values are integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.fdf=URLSpecifies an FDF file to populate form fields in the PDF file being opened. For example:#fdf=http://example.org/doc.fdfNote:The fdf parameter should be specified last in a URL.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files URL examples 8URL exampleshttp://example.org/doc.pdf#Chapter6http://example.org/doc.pdf#page=3http://example.org/doc.pdf#page=3&zoom=200,250,100http://example.org/doc.pdf#zoom=50http://example.org/doc.pdf#page=72&view=fitH,100http://example.org/doc.pdf#pagemode=nonehttp://example.org/doc.pdf#pagemode=bookmarks&page=2http://example.org/doc.pdf#page=3&pagemode=thumbshttp://example.org/doc.pdf#collab=DAVFDF@http://review_server/Collab/user1http://example.org/doc.pdf#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349http://example.org/doc.pdf#fdf=http://example.org/doc.fdfURL limitationsOnly one digit following a decimal point is retained for float values.Individual parameters, together with their values (separated by & or #), can be no greater then 32 characters in length.You cannot use the reserved characters =, #, and &. There is no way to escape these special characters.If you turn bookmarks off using a URL parameter when a document had previously been saved with bookmarks on, the bookmark scrollbars are displayed at first, and only disappear once Acrobat obtains enough streamed information to render the full page.

After you select texts in the document, it will show a Add a note icon, but clicking it doesn't show up anything.

Don't worry about it. We are going to show a form for adding a note in the next section.

renderHighlightContent

This prop is used to render an element which is shown after user switches to the highlighting mode. Technically, it's called after the renderHighlightTarget's toggle() is invoked.

renderHighlightContent provides the following properties:

PropertyTypeDescriptionFrom
cancel()FunctionCancel the selection2.3.0
highlightAreasHighlightArea[]The list of highlight areas2.3.0
selectedTextstringThe selected text2.3.0
selectionDataSelectionDataThe selection data2.3.0
selectionRegionHighlightAreaThe area represents the entire selected region2.3.0

To make it simple, we just show a textarea for user to enter the note's message:

// Store the current note's message
const [message, setMessage] = React.useState('');

const renderHighlightContent = (props: RenderHighlightContentProps) => {
    const addNote = () => {
        // We will implement it later
    };

    return (
        <div
            style={{
                background: '#fff',
                border: '1px solid rgba(0, 0, 0, .3)',
                borderRadius: '2px',
                padding: '8px',
                position: 'absolute',
                left: `${props.selectionRegion.left}%`,
                top: `${props.selectionRegion.top + props.selectionRegion.height}%`,
                zIndex: 1,
            }}
        >
            <div>
                <textarea
                    rows={3}
                    style={{
                        border: '1px solid rgba(0, 0, 0, .3)',
                    }}
                    onChange={e => setMessage(e.target.value)}
                ></textarea>
            </div>
            <div
                style={{
                    display: 'flex',
                    marginTop: '8px',
                }}
            >
                <div style={{ marginRight: '8px' }}>
                    <PrimaryButton onClick={addNote}>Add</PrimaryButton>
                </div>
                <Button onClick={props.cancel}>Cancel</Button>
            </div>
        </div>
    );
};

Clicking the Add button will call the addNote function. In addition to track the current message, we also need to store the list of notes, and the latest id for note.

In reality, you might store and load notes from the database. In our example, the note's id is generated manually.

const [notes, setNotes] = React.useState<Note[]>([]);
let noteId = notes.length;

The function to add a note is quite simple:

const renderHighlightContent = (props: RenderHighlightContentProps) => {
    const addNote = () => {
        // Only add message if it's not empty
        if (message !== '') {
            const note: Note = {
                // Increase the id manually
                id: ++noteId,
                content: message,
                highlightAreas: props.highlightAreas,
                quote: props.selectedText,
            };
            setNotes(notes.concat([note]));

            // Close the form
            props.cancel();
        }
    };
};

Select any text in the document (The sample code)

bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference
5Parameters for Opening PDF FilesYou can open a PDF document with a command or URL that specifies exactly what to display (a named destination or specific page), and how to display it (using such characteristics as a specific view, scrollbars, bookmarks, annotations, or highlighting).The parameters for URLs are supported by most browsers, and can be used when opening PDF documents programmatically.Many of these parameters can be passed to the following core API functions (see the Acrobat and PDF Library API Reference for details):AVDocOpenFromFileWithParamStringAVDocOpenFromASFileWithParamStringAVDocOpenFromPDDocWithParamStringWhen opening a PDF document from a command shell, you can pass the parameters to the open command using the /A switch with the following syntax:<Acrobat path> /A "<parameter>=<value>" "<PDF path>"For example:Acrobat.exe /A "zoom=1000" "C:\example.pdf"In Mac OS, you can use the parameters when opening a PDF document with an Apple event.Parameters The following table describes the parameters. Italics indicate user-specified variables.SyntaxDescriptionnameddest=destinationSpecifies a named destination in the PDF document.page=pagenumSpecifies a numbered page in the document, using an integer value. The document’s first page has a pagenum value of 1.comment=commentIDSpecifies a comment on a given page in the PDF document. Use the page command before this command. For example:#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349

renderHighlights

The highlight areas now are ready in the local state of component. It is the time to display them via the renderHighlights prop.

renderHighlights provides the following properties:

PropertyTypeDescriptionFrom
getCssPropertiesFunctionReturns the CSS styles used to position a highlight area on pages2.3.0
pageIndexnumberThe page index of highlight area2.3.0
rotationnumberThe current number of rotated degrees of the document2.3.0

The getCssProperties function has the signature of

(area: HighlightArea, rotation: number) => React.CSSProperties;
ParameterTypeDescriptionFrom
areaHighlightAreaThe highlight area2.3.0
rotationnumberThe current number of rotated degrees of the document2.3.0

The rotation parameter ensures that the highlight area is positioned properly even if user rotates the document.

Listing all highlights on page is simple as following:

const renderHighlights = (props: RenderHighlightsProps) => (
    <div>
    {
        notes.map(note => (
            <React.Fragment key={note.id}>
            {
                note.highlightAreas
                    // Filter all highlights on the current page
                    .filter(area => area.pageIndex === props.pageIndex)
                    .map((area, idx) => (
                        <div
                            key={idx}
                            style={
                                Object.assign({}, {
                                    background: 'yellow',
                                    opacity: 0.4,
                                }, props.getCssProperties(area, props.rotation))
                            }
                        />
                    ))
            }
            </React.Fragment>
        ))
    }
    </div>
);

Select any text in the document (The sample code)

bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference

Display notes in a sidebar

We would like to list notes in a sidebar. The markup of sidebar and viewer look like as following

<div
    style={{
        border: '1px solid rgba(0, 0, 0, 0.3)',
        display: 'flex',
        height: '100%',
        overflow: 'hidden',
    }}
>
    <div
        style={{
            borderRight: '1px solid rgba(0, 0, 0, 0.3)',
            width: '25%',
            overflow: 'auto',
        }}
    >
        Sidebar
    </div>
    <div
        style={{
            flex: '1 1 0',
        }}
    >
        Viewer
    </div>
</div>

Now we can loop over the notes and display one by one:

const sidebarNotes = (
    <>
    {notes.length === 0 && <div>There is no note</div>}
    {
        notes.map(note => {
            return (
                <div key={note.id}>
                    <blockquote>
                        {note.quote}
                    </blockquote>
                    {note.content}
                </div>
            );
        })
    }
    </>
);

Jump to a highlight area when clicking a note

The highlightPluginInstance created by the highlightPlugin() function provides a method for that purpose.

const { jumpToHighlightArea } = highlightPluginInstance;

const sidebarNotes = (
    <>
    {
        notes.map(note => {
            return (
                <div
                    key={note.id}
                    // Jump to the associated highlight area
                    onClick={() => jumpToHighlightArea(note.highlightAreas[0])}
                >
                    ...
                </div>
            );
        })
    }
    </>
);

Jump to a note in sidebar when clicking its highlight area

To do that, we need to keep the relationship between a note's id and its note element in the sidebar.

const noteEles: Map<number, HTMLElement> = new Map();

The map will be updated when a highlight is rendered:

const renderHighlights = (props: RenderHighlightsProps) => (
    <div>
    {
        notes.map(note => (
            <React.Fragment key={note.id}>
            {
                note.highlightAreas
                    .filter(area => area.pageIndex === props.pageIndex)
                    .map((area, idx) => (
                        <div
                            // We will implement `jumpToNote` later
                            onClick={() => jumpToNote(note)}
                            ref={(ref): void => {
                                // Update the map
                                noteEles.set(note.id, ref as HTMLElement);
                            }}
                        />
                    ))
            }
            </React.Fragment>
        ))
    }
    </div>
);

Clicking a highlight will jump to its note in the sidebar:

const jumpToNote = (note: Note) => {
    if (noteEles.has(note.id)) {
        noteEles.get(note.id).scrollIntoView();
    }
};

Select any text in the document (The sample code)

There is no note
bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference

Integrate with Default Layout plugin

This section introduces the steps to integrate the highlight with default-layout plugin.

In order to move the list of notes into the sidebar, we create a new tab for the sidebar:

import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';
import { MessageIcon } from '@react-pdf-viewer/highlight';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    sidebarTabs: defaultTabs => defaultTabs.concat({
        content: sidebarNotes,
        icon: <MessageIcon />,
        title: <>Notes</>,
    }),
});

The sidebarTabs propety defines the list of tabs that will be shown in the sidebar. It is a function taking the default tabs, and returns the list of tabs.

In our specific example, the tab showing all notes is the last one.

Open the tab when clicking a highlight

As mentioned in the previous section, clicking a highlight area will jump to the associated note in the sidebar.

Since the tab listing all notes can be closed, we have to open the tab first to make sure the notes visible:

const { activateTab } = defaultLayoutPluginInstance;

const jumpToNote = (note: Note) => {
    // Open the tab
    activateTab(3);

    // Jump to the note
    // ...
};

The activateTab function accepts the index of tab that you want to open. Our specific example has four tabs, and the tab showing all notes is the last one.

Select any text in the document (The sample code)

/ 8
90%
bbcParameters for Opening PDF FilesAdobe® Acrobat® SDK April 2007Version 8.1
© 2007 Adobe Systems Incorporated. All rights reserved.Adobe® Acrobat® SDK 8.1 Parameters for Opening PDF Files for Microsoft® Windows®, Mac OS®, Linux®, and UNIX®Edition 1.0, April 2007If this guide is distributed with software that includes an end user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by any such license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end user license agreement.The content of this guide is furnished for informational use only, is subject to change without notice, and should not be construed as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liability for any errors or inaccuracies that may appear in the informational content contained in this guide.Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.Any references to company names and company logos in sample material are for demonstration purposes only and are not intended to refer to any actual organization.Adobe, the Adobe logo, Acrobat and Reader are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.Linux is a registered trademark of Linus Torvalds.Apple and Mac OS are trademarks of Apple Computer, Inc., registered in the United States and other countries.Microsoft and Windows are either a registered trademark or a trademark of Microsoft Corporation in the United States and/or other countries.UNIX is a registered trademark of The Open Group in the United States and other countries.All other trademarks are the property of their respective owners.Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA.Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Documentation are being licensed to U.S. Government end users(a) only as Commercial Items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, ifappropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
3ContentsPreface .......................................................................................................................................... 4Who should read this guide? ..................................................................................................................................................... 4Related documentation ............................................................................................................................................................... 4Parameters for Opening PDF Files ............................................................................................. 5Parameters ........................................................................................................................................................................................ 5Specifying parameters in a URL ................................................................................................................................................ 7URL examples ............................................................................................................................................................................ 8URL limitations ..........................................................................................................................................................................8
4PrefaceThis document describes the parameters you can use when opening Adobe® PDF files. These parameters allow you to open a PDF file using a URL or command that specifies both the file to be opened and the actions to be performed once the file is opened. Who should read this guide?This guide is for developers who want to customize the way PDF files open. It may be useful for those developing an online collaboration system.Related documentationFor information aboutSeeConfiguring and administering a system for online collaborationusing comment repositories, Adobe Acrobat®, andAdobeReader®Acrobat Online Collaboration: Setup and AdministrationA detailed description of the PDF file formatPDF ReferenceDetailed descriptions of the APIs for Acrobat and AdobeReader plug-ins, as well as for PDF Library applicationsAcrobat and PDF Library API Reference
5Parameters for Opening PDF FilesYou can open a PDF document with a command or URL that specifies exactly what to display (a named destination or specific page), and how to display it (using such characteristics as a specific view, scrollbars, bookmarks, annotations, or highlighting).The parameters for URLs are supported by most browsers, and can be used when opening PDF documents programmatically.Many of these parameters can be passed to the following core API functions (see the Acrobat and PDF Library API Reference for details):AVDocOpenFromFileWithParamStringAVDocOpenFromASFileWithParamStringAVDocOpenFromPDDocWithParamStringWhen opening a PDF document from a command shell, you can pass the parameters to the open command using the /A switch with the following syntax:<Acrobat path> /A "<parameter>=<value>" "<PDF path>"For example:Acrobat.exe /A "zoom=1000" "C:\example.pdf"In Mac OS, you can use the parameters when opening a PDF document with an Apple event.Parameters The following table describes the parameters. Italics indicate user-specified variables.SyntaxDescriptionnameddest=destinationSpecifies a named destination in the PDF document.page=pagenumSpecifies a numbered page in the document, using an integer value. The document’s first page has a pagenum value of 1.comment=commentIDSpecifies a comment on a given page in the PDF document. Use the page command before this command. For example:#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Parameters 6collab=settingSets the comment repository to be used to supply and store comments for the document. This overrides the default comment server for the review or the default preference. The setting is of the form store_type@location, where valid values for store_type are:DAVFDF (WebDAV)FSFDF (Network folder)DB (ADBC)For example:#collab=DAVFDF@http://review_server/Collab/user1For more information on comment repositories, see Acrobat Online Collaboration: Setup and Administration.zoom=scalezoom=scale,left,topSets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.Scroll values left and top are in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.view=Fitview=FitHview=FitH,topview=FitVview=FitV,leftview=FitBview=FitBHview=FitBH,topview=FitBVview=FitBV,leftSet the view of the displayed page, using the keyword values defined in the PDF language specification. For more information, see the PDF Reference.Scroll values left and top are floats or integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.viewrect=left,top,wd,htSets the view rectangle using float or integer values in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.Use the page command before this command.Note:This parameter is not supported on the command line.pagemode=bookmarkspagemode=thumbspagemode=none (default) Displays bookmarks or thumbnails.scrollbar=1|0Turns scrollbars on or off.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files Specifying parameters in a URL 7Specifying parameters in a URLYou can specify multiple parameters in a single URL. Separate each parameter with either an ampersand (&) or a pound (#) character. Actions are processed and executed from left to right as they appear in the URL. Because all specified actions are executed, it is possible that later actions will override the effects of previous actions, so it is important to use the correct order. For example, page actions should appear before zoom actions.Commands are not case sensitive except for the value of a named destination. There can be no spaces in the URL. search=wordListOpens the Search panel and performs a search for any of the words in the specified word list. The first matching word is highlighted in the document.The words must be enclosed in quotation marks and separated by spaces. For example:#search="word1 word2"You can search only for single words. You cannot search for a string of words.toolbar=1|0Turns the toolbar on or off.statusbar=1|0Turns the status bar on or off.messages=1|0Turns the document message bar on or off.navpanes=1|0Turns the navigation panes and tabs on or off.highlight=lt,rt,top,btmHighlights a specified rectangle on the displayed page. Use the page command before this command.The rectangle values are integers in a coordinate system where 0,0 represents the top left corner of the visible page, regardless of document rotation.fdf=URLSpecifies an FDF file to populate form fields in the PDF file being opened. For example:#fdf=http://example.org/doc.fdfNote:The fdf parameter should be specified last in a URL.SyntaxDescription
Adobe Acrobat SDKParameters for Opening PDF FilesParameters for Opening PDF Files URL examples 8URL exampleshttp://example.org/doc.pdf#Chapter6http://example.org/doc.pdf#page=3http://example.org/doc.pdf#page=3&zoom=200,250,100http://example.org/doc.pdf#zoom=50http://example.org/doc.pdf#page=72&view=fitH,100http://example.org/doc.pdf#pagemode=nonehttp://example.org/doc.pdf#pagemode=bookmarks&page=2http://example.org/doc.pdf#page=3&pagemode=thumbshttp://example.org/doc.pdf#collab=DAVFDF@http://review_server/Collab/user1http://example.org/doc.pdf#page=1&comment=452fde0e-fd22-457c-84aa-2cf5bed5a349http://example.org/doc.pdf#fdf=http://example.org/doc.fdfURL limitationsOnly one digit following a decimal point is retained for float values.Individual parameters, together with their values (separated by & or #), can be no greater then 32 characters in length.You cannot use the reserved characters =, #, and &. There is no way to escape these special characters.If you turn bookmarks off using a URL parameter when a document had previously been saved with bookmarks on, the bookmark scrollbars are displayed at first, and only disappear once Acrobat obtains enough streamed information to render the full page.

Clear the notes when opening other document

The last but not least thing is do not forget to reset (or load new notes) when user opens new document. We can do it by handling the onDocumentLoad event:

const [currentDoc, setCurrentDoc] = React.useState<PdfJs.PdfDocument | null>(null);

const handleDocumentLoad = (e: DocumentLoadEvent) => {
    setCurrentDoc(e.doc);
    if (currentDoc && currentDoc !== e.doc) {
        // User opens new document
        setNotes([]);
    }
};

<Viewer
    onDocumentLoad={handleDocumentLoad}
/>