Skip to content

Commit c19a310

Browse files
AnanthaGokulaRamanAnanthaGokulaRaman
authored
Merge pull request #2305 from syncfusion-content/1010724-annotationDiataxis
1010724: Text Markup Annotation UG using Diataxis
2 parents aa2bade + d4880ed commit c19a310

5 files changed

Lines changed: 1108 additions & 0 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -965,6 +965,14 @@
965965
<li><a href="/document-processing/pdf/pdf-viewer/react/text-search">Text Search</a></li>
966966
<li>Annotation
967967
<ul>
968+
<li>Annotation Types
969+
<ul>
970+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/highlight-annotation">Highlight</a></li>
971+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/underline-annotation">Underline</a></li>
972+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/strikethrough-annotation">Strikethrough</a></li>
973+
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/squiggly-annotation">Squiggly</a></li>
974+
</ul>
975+
</li>
968976
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/text-markup-annotation">Text Markup Annotation</a></li>
969977
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/shape-annotation">Shape Annotation</a></li>
970978
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/stamp-annotation">Stamp Annotation</a></li>

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

Lines changed: 294 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,294 @@
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+
- [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
25+
26+
This minimal setup enables UI interactions like selection and highlighting.
27+
28+
{% tabs %}
29+
{% highlight js tabtitle="Standalone" %}
30+
{% raw %}
31+
import * as React from 'react';
32+
import * as ReactDOM from 'react-dom/client';
33+
import {
34+
PdfViewerComponent,
35+
Inject,
36+
Toolbar,
37+
Annotation,
38+
TextSelection
39+
} from '@syncfusion/ej2-react-pdfviewer';
40+
41+
function App() {
42+
return (
43+
<PdfViewerComponent
44+
id="container"
45+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
46+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
47+
style={{ height: '650px' }}
48+
>
49+
<Inject services={[Toolbar, Annotation, TextSelection]} />
50+
</PdfViewerComponent>
51+
);
52+
}
53+
54+
ReactDOM.createRoot(document.getElementById('sample')).render(<App />);
55+
{% endraw %}
56+
{% endhighlight %}
57+
{% endtabs %}
58+
59+
---
60+
61+
## Apply Highlight Annotation
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 using Context Menu
74+
75+
Right-click a selected text region → select **Highlight**.
76+
77+
![Highlight Context](../../../javascript-es6/annotations/annotation-images/highlight-context.gif)
78+
79+
To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
80+
81+
---
82+
83+
### Enable Highlight Mode
84+
85+
Switch the viewer into highlight mode using `setAnnotationMode('Highlight')`.
86+
87+
{% tabs %}
88+
{% highlight js tabtitle="Standalone" %}
89+
{% raw %}
90+
function enableHighlight() {
91+
const viewer = document.getElementById('container').ej2_instances[0];
92+
viewer.annotation.setAnnotationMode('Highlight');
93+
}
94+
{% endraw %}
95+
{% endhighlight %}
96+
{% endtabs %}
97+
98+
#### Exit Highlight Mode
99+
100+
Switch back to normal mode using:
101+
102+
{% tabs %}
103+
{% highlight js tabtitle="Standalone" %}
104+
{% raw %}
105+
function disableHighlightMode() {
106+
const viewer = document.getElementById('container').ej2_instances[0];
107+
viewer.annotation.setAnnotationMode('None');
108+
}
109+
{% endraw %}
110+
{% endhighlight %}
111+
{% endtabs %}
112+
113+
---
114+
115+
### Add Highlight Programmatically
116+
117+
Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert highlight at a specific location.
118+
119+
{% tabs %}
120+
{% highlight js tabtitle="Standalone" %}
121+
{% raw %}
122+
function addHighlight() {
123+
const viewer = document.getElementById('container').ej2_instances[0];
124+
125+
viewer.annotation.addAnnotation('Highlight', {
126+
bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
127+
pageNumber: 1
128+
});
129+
}
130+
{% endraw %}
131+
{% endhighlight %}
132+
{% endtabs %}
133+
134+
---
135+
136+
## Customize Highlight Appearance
137+
138+
Configure default highlight settings such as **color**, **opacity**, and **author** using [`highlightSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings).
139+
140+
{% tabs %}
141+
{% highlight js tabtitle="Standalone" %}
142+
{% raw %}
143+
<PdfViewerComponent
144+
id="container"
145+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
146+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
147+
height="650px"
148+
highlightSettings={{
149+
author: 'Guest User',
150+
subject: 'Important',
151+
color: '#ffff00',
152+
opacity: 0.9
153+
}}
154+
>
155+
<Inject services={[Toolbar, Annotation, TextSelection]} />
156+
</PdfViewerComponent>
157+
{% endraw %}
158+
{% endhighlight %}
159+
{% endtabs %}
160+
161+
---
162+
163+
## Manage Highlight (Edit, Delete, Comment)
164+
165+
### Edit Highlight
166+
167+
#### Edit Highlight Appearance (UI)
168+
169+
Use the annotation toolbar:
170+
- **Edit Color** tool
171+
![Edit color](../../../javascript-es6/images/edit_color.png)
172+
173+
- **Edit Opacity** slider
174+
![Edit opacity](../../../javascript-es6/images/edit_opacity.png)
175+
176+
---
177+
178+
#### Edit Highlight Programmatically
179+
180+
Modify an existing highlight programmatically using `editAnnotation()`.
181+
182+
{% tabs %}
183+
{% highlight js tabtitle="Standalone" %}
184+
{% raw %}
185+
function editHighlightProgrammatically() {
186+
const viewer = document.getElementById('container').ej2_instances[0];
187+
188+
for (let annot of viewer.annotationCollection) {
189+
if (annot.textMarkupAnnotationType === 'Highlight') {
190+
annot.color = '#0000ff';
191+
annot.opacity = 0.8;
192+
viewer.annotation.editAnnotation(annot);
193+
break;
194+
}
195+
}
196+
}
197+
{% endraw %}
198+
{% endhighlight %}
199+
{% endtabs %}
200+
201+
---
202+
203+
### Delete Highlight
204+
205+
The PDF Viewer supports deleting existing annotations through both the UI and API.
206+
For detailed behavior, supported deletion workflows, and API reference, see [Delete Annotation](../remove-annotations)
207+
208+
---
209+
210+
### Comments
211+
212+
Use the [Comments panel](../comments) to add, view, and reply to threaded discussions linked to underline annotations.
213+
It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
214+
215+
---
216+
217+
## Set properties while adding Individual Annotation
218+
219+
Set properties for individual annotation before creating the control using [highlightSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings)
220+
221+
{% tabs %}
222+
{% highlight js tabtitle="Standalone" %}
223+
{% raw %}
224+
function addMultipleHighlights() {
225+
const viewer = document.getElementById('container').ej2_instances[0];
226+
227+
// Highlight 1
228+
viewer.annotation.addAnnotation('Highlight', {
229+
bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
230+
pageNumber: 1,
231+
author: 'User 1',
232+
color: '#ffff00',
233+
opacity: 0.9
234+
});
235+
236+
// Highlight 2
237+
viewer.annotation.addAnnotation('Highlight', {
238+
bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
239+
pageNumber: 1,
240+
author: 'User 2',
241+
color: '#ff1010',
242+
opacity: 0.9
243+
});
244+
}
245+
{% endraw %}
246+
{% endhighlight %}
247+
{% endtabs %}
248+
249+
---
250+
251+
## Disable TextMarkup Annotation
252+
253+
Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
254+
255+
{% tabs %}
256+
{% highlight js tabtitle="Standalone" %}
257+
{% raw %}
258+
<PdfViewerComponent
259+
id="container"
260+
enableTextMarkupAnnotation={false}
261+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
262+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
263+
style={{ height: '650px' }}
264+
>
265+
<Inject services={[Toolbar, Annotation, TextSelection]} />
266+
</PdfViewerComponent>
267+
{% endraw %}
268+
{% endhighlight %}
269+
{% endtabs %}
270+
271+
---
272+
273+
## Handle Highlight Events
274+
275+
The PDF viewer provides annotation life-cycle events that notify when highlight annotations are added, modified, selected, or removed.
276+
For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
277+
278+
---
279+
280+
## Export and Import
281+
282+
The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
283+
For full details on supported formats and steps to export or import annotations, see [Export and Import Annotation](../export-import-annotations)
284+
285+
---
286+
287+
## See Also
288+
289+
- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
290+
- [Customize Context Menu](../../context-menu/custom-context-menu)
291+
- [Comments Panel](../comments)
292+
- [Annotation Events](../annotation-event)
293+
- [Export and Import annotations](../export-import-annotations)
294+
- [Delete Annotations](../remove-annotations)

0 commit comments

Comments
 (0)