Skip to content

Commit d7ffb87

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1013392: Revamp 'add annotations via text search' docs
1 parent 1b6497a commit d7ffb87

1 file changed

Lines changed: 151 additions & 104 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/react/how-to/add-annotation-in-text-search.md‎

Lines changed: 151 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,179 @@
11
---
22
layout: post
3-
title: Add Rectangle Annotation via Text Search in Syncfusion React PDF Viewer
4-
description: Discover how to add rectangle annotations via text search in the Syncfusion React PDF Viewer for a seamless mobile experience.
3+
title: Add Annotations via Text Search in Syncfusion React PDF Viewer
4+
description: Learn how to add annotations via text search events in the Syncfusion React PDF Viewer for a seamless mobile experience.
55
control: PDF Viewer
66
platform: document-processing
77
documentation: ug
88
---
99

10-
# Add Rectangle Annotations via Text Search in PDF Viewer
10+
# Add Annotations via Text Search in PDF Viewer
1111

12-
A concise guide that demonstrates how to add rectangle annotations at highlighted text search results in the React PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps.
12+
A concise guide that demonstrates how to add rectangle and highlight annotations at highlighted text search results in the React PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps.
1313

14-
## Steps to add rectangle annotations on search result highlight
14+
## Prerequisites
15+
16+
A React PDF Viewer setup with [`Annotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation) module injected.
17+
18+
## Steps to add rectangle or highlight annotations on search result highlight
1519

1620
**Step 1:** Follow the steps provided in the [Syncfusion<sup style="font-size:70%">&reg;</sup> Getting Started Guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to set up a basic PDF Viewer sample.
1721

18-
**Step 2:** Set up the PDF Viewer component to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer.
22+
**Step 2a:** Set up the PDF Viewer component to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer.
1923

2024
{% tabs %}
2125
{% highlight js tabtitle="Standalone" %}
2226
{% raw %}
23-
24-
import React from 'react';
25-
import ReactDOM from 'react-dom/client';
26-
import './index.css';
27+
import { RefObject, useRef } from 'react';
2728
import {
28-
PdfViewerComponent,
29-
Toolbar,
30-
Magnification,
31-
Navigation,
32-
Annotation,
33-
TextSelection,
34-
TextSearch,
35-
FormFields,
36-
FormDesigner,
37-
PageOrganizer,
38-
Inject
29+
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, TextSelection,
30+
TextSearch, FormFields, FormDesigner, PageOrganizer, Print, Inject, RectangleSettings,
31+
TextSearchHighlightEventArgs, RectangleBoundsModel
3932
} from '@syncfusion/ej2-react-pdfviewer';
4033

41-
class App extends React.Component {
42-
constructor(props) {
43-
super(props);
44-
// Create a ref for the PdfViewerComponent to access its methods and properties
45-
this.viewerRef = React.createRef();
46-
}
47-
48-
componentDidMount() {
49-
// Obtain the current instance of the PdfViewerComponent
50-
const viewer = this.viewerRef.current;
51-
52-
if (viewer) {
53-
// Attach an event handler for text search highlight
54-
viewer.textSearchHighlight = this.handleTextSearchHighlight;
55-
}
56-
}
57-
58-
// Method to handle the text search highlight event
59-
handleTextSearchHighlight = (args) => {
60-
console.log(args); // Logs Highlighted text search details
61-
62-
const pageNumber = args.pageNumber;
63-
const bounds = args.bounds;
64-
65-
// Add a rectangle annotation on the highlighted text
66-
this.viewerRef.current.annotationModule.addAnnotation('Rectangle', {
67-
pageNumber: pageNumber,
68-
offset: { x: bounds.left, y: bounds.top },
69-
width: bounds.width,
70-
height: bounds.height,
71-
});
72-
};
73-
74-
// Method to initiate a text search for the term 'PDF'
75-
handleSearch = () => {
76-
this.viewerRef.current.textSearchModule.searchText('PDF', false);
77-
};
78-
79-
// Method to go to the next instance of the search term
80-
handleSearchNext = () => {
81-
this.viewerRef.current.textSearchModule.searchNext();
82-
};
83-
84-
// Method to cancel the current text search operation
85-
handleCancelSearch = () => {
86-
this.viewerRef.current.textSearchModule.cancelTextSearch();
87-
};
88-
89-
render() {
34+
export default function App() {
35+
const viewerRef: RefObject<PdfViewerComponent> = useRef(null);
36+
37+
// Method to handle the text search highlight event
38+
const handleTextSearchHighlight = (args: TextSearchHighlightEventArgs) => {
39+
console.log(args); // Logs Highlighted text search details
40+
41+
const pageNumber: number = args.pageNumber;
42+
const bounds: RectangleBoundsModel = args.bounds;
43+
44+
// Add a rectangle annotation on the highlighted text
45+
viewerRef.current.annotationModule.addAnnotation('Rectangle', {
46+
pageNumber: pageNumber,
47+
offset: { x: bounds.left, y: bounds.top },
48+
width: bounds.width,
49+
height: bounds.height,
50+
} as RectangleSettings);
51+
};
52+
53+
// Method to initiate a text search for the term 'PDF'
54+
const handleSearch = () => {
55+
viewerRef.current.textSearchModule.searchText('PDF', false);
56+
};
57+
58+
// Method to go to the next instance of the search term
59+
const handleSearchNext = () => {
60+
viewerRef.current.textSearchModule.searchNext();
61+
};
62+
63+
// Method to cancel the current text search operation
64+
const handleCancelSearch = () => {
65+
viewerRef.current.textSearchModule.cancelTextSearch();
66+
};
67+
9068
return (
91-
<div>
92-
<div style={{ marginTop: '50px' }}>
93-
<button onClick={this.handleSearch}>Search PDF</button>
94-
<button onClick={this.handleSearchNext}>Search Next</button>
95-
<button onClick={this.handleCancelSearch}>Cancel Search</button>
96-
</div>
97-
<div className='control-section' style={{ marginTop: '5px' }}>
98-
<PdfViewerComponent
99-
ref={this.viewerRef}
100-
id="PdfViewer"
101-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
102-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
103-
style={{ height: '640px' }}
104-
>
105-
<Inject services={[
106-
Toolbar,
107-
Magnification,
108-
Navigation,
109-
Annotation,
110-
TextSelection,
111-
TextSearch,
112-
FormFields,
113-
FormDesigner,
114-
PageOrganizer
115-
]} />
116-
</PdfViewerComponent>
117-
</div>
118-
</div>
119-
);
120-
}
69+
<div>
70+
<div style={{ marginTop: '50px' }}>
71+
<button onClick={handleSearch}>Search PDF</button>
72+
<button onClick={handleSearchNext}>Search Next</button>
73+
<button onClick={handleCancelSearch}>Cancel Search</button>
74+
</div>
75+
<div className='control-section' style={{ marginTop: '5px' }}>
76+
<PdfViewerComponent
77+
ref={viewerRef}
78+
id="PdfViewer"
79+
textSearchHighlight={handleTextSearchHighlight}
80+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
81+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
82+
style={{ height: '640px' }}
83+
>
84+
<Inject services={[
85+
Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch,
86+
FormFields, FormDesigner, PageOrganizer, Print
87+
]} />
88+
</PdfViewerComponent>
89+
</div>
90+
</div>
91+
);
12192
}
93+
{% endraw %}
94+
{% endhighlight %}
95+
{% endtabs %}
96+
97+
**Expected result:** Rectangle annotations are added at text search result locations, improving visibility for users navigating search matches.
98+
99+
**Step 2b:** Set up the PDF Viewer component to add highlight annotations based on the bounds of highlighted search text in the PDF Viewer.
100+
101+
{% tabs %}
102+
{% highlight js tabtitle="Standalone" %}
103+
{% raw %}
104+
import { RefObject, useRef } from 'react';
105+
import {
106+
PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, TextSelection,
107+
TextSearch, FormFields, FormDesigner, PageOrganizer, Print, Inject, TextSearchHighlightEventArgs,
108+
HighlightSettings, IAnnotationPoint
109+
} from '@syncfusion/ej2-react-pdfviewer';
122110

123-
const root = ReactDOM.createRoot(document.getElementById('sample'));
124-
root.render(<App />);
111+
export default function App() {
112+
const viewerRef: RefObject<PdfViewerComponent> = useRef(null);
113+
114+
// Method to handle the text search highlight event
115+
const handleTextSearchHighlight = (args: TextSearchHighlightEventArgs) => {
116+
console.log(args); // Logs Highlighted text search details
117+
118+
const pageNumber: number = args.pageNumber;
119+
const bounds: IAnnotationPoint[] = [{
120+
x: args.bounds.x ?? args.bounds.left,
121+
y: args.bounds.y ?? args.bounds.top,
122+
height: args.bounds.height,
123+
width: args.bounds.width
124+
}];
125+
126+
// Add a highlight annotation on the highlighted text
127+
viewerRef.current.annotation.addAnnotation('Highlight', {
128+
pageNumber: pageNumber,
129+
bounds: bounds
130+
} as HighlightSettings);
131+
};
132+
133+
// Method to initiate a text search for the term 'PDF'
134+
const handleSearch = () => {
135+
viewerRef.current.textSearchModule.searchText('PDF', false);
136+
};
137+
138+
// Method to go to the next instance of the search term
139+
const handleSearchNext = () => {
140+
viewerRef.current.textSearchModule.searchNext();
141+
};
142+
143+
// Method to cancel the current text search operation
144+
const handleCancelSearch = () => {
145+
viewerRef.current.textSearchModule.cancelTextSearch();
146+
};
125147

148+
return (
149+
<div>
150+
<div style={{ marginTop: '50px' }}>
151+
<button onClick={handleSearch}>Search PDF</button>
152+
<button onClick={handleSearchNext}>Search Next</button>
153+
<button onClick={handleCancelSearch}>Cancel Search</button>
154+
</div>
155+
<div className='control-section' style={{ marginTop: '5px' }}>
156+
<PdfViewerComponent
157+
ref={viewerRef}
158+
id="PdfViewer"
159+
textSearchHighlight={handleTextSearchHighlight}
160+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
161+
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
162+
style={{ height: '640px' }}
163+
>
164+
<Inject services={[
165+
Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch,
166+
FormFields, FormDesigner, PageOrganizer, Print
167+
]} />
168+
</PdfViewerComponent>
169+
</div>
170+
</div>
171+
);
172+
}
126173
{% endraw %}
127174
{% endhighlight %}
128175
{% endtabs %}
129176

130-
Following this guide enables the PDF Viewer to add rectangle annotations at text search result locations, improving visibility for users navigating search matches.
177+
**Expected result:** Highlight annotation is added at text search result locations, improving visibility for users navigating search matches.
131178

132-
[View sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
179+
[View sample the complete working sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)

0 commit comments

Comments
 (0)