Skip to content

Commit d8ae7cd

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
1010724: Highlight-annotation Updated to React PDF Viewer
1 parent 9173a04 commit d8ae7cd

1 file changed

Lines changed: 298 additions & 0 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
---
2+
layout: post
3+
title: Highlight Text in React PDF Viewer | Syncfusion
4+
description: Learn how to enable, apply, customize, and manage Highlight annotations in the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Highlight Annotation (Text Markup) in React PDF Viewer
12+
13+
This guide explains how to **enable**, **apply**, **customize**, and **manage** *Highlight* text markup annotations in the Syncfusion **React PDF Viewer**.
14+
You can highlight text using the toolbar or context menu, programmatically invoke highlight mode, customize default settings, handle events, and export the PDF with annotations.
15+
16+
---
17+
18+
## Enable Highlight in the Viewer
19+
20+
To enable Highlight annotations, inject the following modules into the React PDF Viewer:
21+
22+
- [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
23+
- [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
24+
- [**TextSearch**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textsearch)
25+
- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
26+
27+
This minimal setup enables UI interactions like selection and highlighting.
28+
29+
{% tabs %}
30+
{% highlight js tabtitle="Standalone" %}
31+
{% raw %}
32+
import * as React from 'react';
33+
import * as ReactDOM from 'react-dom/client';
34+
import {
35+
PdfViewerComponent,
36+
Inject,
37+
Toolbar,
38+
Annotation,
39+
TextSelection,
40+
TextSearch
41+
} from '@syncfusion/ej2-react-pdfviewer';
42+
43+
function App() {
44+
return (
45+
<PdfViewerComponent
46+
id="container"
47+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
48+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
49+
style={{ height: '650px' }}
50+
>
51+
<Inject services={[Toolbar, Annotation, TextSelection, TextSearch]} />
52+
</PdfViewerComponent>
53+
);
54+
}
55+
56+
ReactDOM.createRoot(document.getElementById('sample')).render(<App />);
57+
{% endraw %}
58+
{% endhighlight %}
59+
{% endtabs %}
60+
61+
---
62+
63+
## Apply Highlight Using the Toolbar
64+
65+
1. Select the text you want to highlight.
66+
2. Click the **Highlight** icon in the annotation toolbar.
67+
- If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
68+
69+
![Highlight tool](../../../javascript-es6/annotations/annotation-images/highlight-tool.gif)
70+
71+
---
72+
73+
## Apply Highlight Programmatically
74+
75+
Switch the viewer into highlight mode using `setAnnotationMode('Highlight')`.
76+
77+
{% tabs %}
78+
{% highlight js tabtitle="Standalone" %}
79+
{% raw %}
80+
function enableHighlight() {
81+
const viewer = document.getElementById('container').ej2_instances[0];
82+
viewer.annotation.setAnnotationMode('Highlight');
83+
}
84+
{% endraw %}
85+
{% endhighlight %}
86+
{% endtabs %}
87+
88+
### Exit Highlight Mode
89+
90+
Switch back to normal mode using:
91+
92+
{% tabs %}
93+
{% highlight js tabtitle="Standalone" %}
94+
{% raw %}
95+
function disableHighlightMode() {
96+
const viewer = document.getElementById('container').ej2_instances[0];
97+
viewer.annotation.setAnnotationMode('None');
98+
}
99+
{% endraw %}
100+
{% endhighlight %}
101+
{% endtabs %}
102+
103+
### Add Highlight Programmatically (with bounds)
104+
105+
Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert highlight at a specific location.
106+
107+
{% tabs %}
108+
{% highlight js tabtitle="Standalone" %}
109+
{% raw %}
110+
function addHighlight() {
111+
const viewer = document.getElementById('container').ej2_instances[0];
112+
113+
viewer.annotation.addAnnotation('Highlight', {
114+
bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
115+
pageNumber: 1
116+
});
117+
}
118+
{% endraw %}
119+
{% endhighlight %}
120+
{% endtabs %}
121+
122+
123+
## Add Multiple Highlights with Individual Properties
124+
You can also supply custom per‑annotation settings:
125+
126+
{% tabs %}
127+
{% highlight js tabtitle="Standalone" %}
128+
{% raw %}
129+
function addMultipleHighlights() {
130+
const viewer = document.getElementById('container').ej2_instances[0];
131+
132+
// Highlight 1
133+
viewer.annotation.addAnnotation('Highlight', {
134+
bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
135+
pageNumber: 1,
136+
author: 'User 1',
137+
color: '#ffff00',
138+
opacity: 0.9
139+
});
140+
141+
// Highlight 2
142+
viewer.annotation.addAnnotation('Highlight', {
143+
bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
144+
pageNumber: 1,
145+
author: 'User 2',
146+
color: '#ff1010',
147+
opacity: 0.9
148+
});
149+
}
150+
{% endraw %}
151+
{% endhighlight %}
152+
{% endtabs %}
153+
154+
---
155+
156+
## Customize Highlight Appearance
157+
158+
Configure default highlight settings such as **color**, **opacity**, and **author** using [`highlightSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings).
159+
160+
{% tabs %}
161+
{% highlight js tabtitle="Standalone" %}
162+
{% raw %}
163+
<PdfViewerComponent
164+
id="container"
165+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
166+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
167+
height="650px"
168+
highlightSettings={{
169+
author: 'Guest User',
170+
subject: 'Important',
171+
color: '#ffff00',
172+
opacity: 0.9
173+
}}
174+
>
175+
<Inject services={[Toolbar, Annotation, TextSelection, TextSearch]} />
176+
</PdfViewerComponent>
177+
{% endraw %}
178+
{% endhighlight %}
179+
{% endtabs %}
180+
181+
---
182+
183+
## Manage Highlight (Edit, Delete, Comment)
184+
185+
### Edit Highlight Appearance (UI)
186+
Use the annotation toolbar:
187+
- **Edit Color** tool
188+
![Edit color](../../../javascript-es6/images/edit_color.png)
189+
190+
- **Edit Opacity** slider
191+
![Edit opacity](../../../javascript-es6/images/edit_opacity.png)
192+
193+
---
194+
195+
### Delete Highlight
196+
- Press **Delete** key, or
197+
- Use **Delete Annotation** in the toolbar
198+
199+
![Delete Highlight](../../../javascript-es6/images/delete_button.png)
200+
201+
---
202+
203+
### Edit Highlight Programmatically
204+
205+
Modify an existing highlight programmatically using `editAnnotation()`.
206+
207+
{% tabs %}
208+
{% highlight js tabtitle="Standalone" %}
209+
{% raw %}
210+
function editHighlightProgrammatically() {
211+
const viewer = document.getElementById('container').ej2_instances[0];
212+
213+
for (let annot of viewer.annotationCollection) {
214+
if (annot.textMarkupAnnotationType === 'Highlight') {
215+
annot.color = '#0000ff';
216+
annot.opacity = 0.8;
217+
viewer.annotation.editAnnotation(annot);
218+
break;
219+
}
220+
}
221+
}
222+
{% endraw %}
223+
{% endhighlight %}
224+
{% endtabs %}
225+
226+
---
227+
228+
### Comments
229+
Use the [**Comments panel**](../comments) for threaded discussions on highlight annotations.
230+
231+
---
232+
233+
## Use the Context Menu with Highlight
234+
235+
Right-click a selected text region → select **Highlight**.
236+
237+
![Highlight Context](../../../javascript-es6/annotations/annotation-images/highlight-context.gif)
238+
239+
To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
240+
241+
---
242+
243+
## Handle Highlight Events
244+
245+
Subscribe to annotation lifecycle events.
246+
247+
{% tabs %}
248+
{% highlight js tabtitle="Standalone" %}
249+
{% raw %}
250+
function onAnnotationAdd(args) {
251+
console.log('Highlight added:', args);
252+
}
253+
254+
<PdfViewerComponent
255+
id="container"
256+
annotationAdd={onAnnotationAdd}
257+
/>
258+
{% endraw %}
259+
{% endhighlight %}
260+
{% endtabs %}
261+
262+
See [**Annotation Events**](../annotation-event) page for full list and parameter details.
263+
264+
---
265+
266+
## Disable TextMarkup Annotation
267+
Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
268+
269+
{% tabs %}
270+
{% highlight js tabtitle="Standalone" %}
271+
{% raw %}
272+
<PdfViewerComponent
273+
id="container"
274+
enableTextMarkupAnnotation={false}
275+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
276+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
277+
style={{ height: '650px' }}
278+
>
279+
<Inject services={[Toolbar, Annotation, TextSelection, TextSearch]} />
280+
</PdfViewerComponent>
281+
{% endraw %}
282+
{% endhighlight %}
283+
{% endtabs %}
284+
285+
---
286+
287+
## Save and Export
288+
289+
Use the [**Download**](../../download) tool to export the PDF with highlight annotations included. The original document remains unchanged.
290+
291+
---
292+
293+
## See Also
294+
295+
- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
296+
- [Customize Context Menu](../../context-menu/custom-context-menu)
297+
- [Comments Panel](../comments)
298+
- [Annotation Events](../annotation-event)

0 commit comments

Comments
 (0)