Skip to content

Commit b8049eb

Browse files
Karan-SF4772Karan-SF4772
committed
Merge branch 'hotfix/hotfix-v33.1.44' of https://github.com/syncfusion-content/document-processing-docs into 1016290-Update-Performance-Metrics-Page-in-UG-hotfix
2 parents 02210c3 + 0ea0978 commit b8049eb

7 files changed

Lines changed: 316 additions & 94 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1204,7 +1204,12 @@
12041204
</li>
12051205
<li><a href="/document-processing/pdf/pdf-viewer/react/download">Download</a></li>
12061206
<li><a href="/document-processing/pdf/pdf-viewer/react/events">Events</a></li>
1207-
<li><a href="/document-processing/pdf/pdf-viewer/react/text-selection">Text Selection</a></li>
1207+
<li><a href="/document-processing/pdf/pdf-viewer/react/text-selection/overview">Text Selection</a>
1208+
<ul>
1209+
<li><a href="/document-processing/pdf/pdf-viewer/react/how-to/enable-text-selection">Toggle text selection</a></li>
1210+
<li><a href="/document-processing/pdf/pdf-viewer/react/text-selection/text-selection-api-events">Text Selection API and Events</a></li>
1211+
</ul>
1212+
</li>
12081213
<li>Localization and Globalization
12091214
<ul>
12101215
<li><a href="/document-processing/pdf/pdf-viewer/react/Localization/default-language">Default Language</a></li>
@@ -7848,7 +7853,15 @@
78487853
</li>
78497854
<li>
78507855
Release Notes
7851-
<ul><li>2026 Volume 1 - v33.*<ul><li><a href="/document-processing/release-notes/v33.1.44">v33.1.44 Main Release</a></li></ul></li>
7856+
<ul><li>2026 Volume 1 - v33.*
7857+
<ul><li> Weekly Nuget Release
7858+
<ul>
7859+
<li><a href="/document-processing/release-notes/v33.1.45">v33.1.45</a></li>
7860+
</ul>
7861+
</li>
7862+
<li><a href="/document-processing/release-notes/v33.1.44">v33.1.44 Main Release</a></li>
7863+
</ul>
7864+
</li>
78527865
<li>
78537866
2025 Volume 4 - v32.*
78547867
<ul><li> Weekly Nuget Release

‎Document-Processing/PDF/PDF-Library/NET/Create-PDF-file-in-MaUI.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,7 @@ N> Our PDF library is currently supported in .NET MAUI applications on the Andro
2828
{% endtabcontent %}
2929
{% endtabcontents %}
3030

31-
A complete working example of creating a PDF document in the .NET MAUI Desktop app can be downloaded from this [link](https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfSampleMaUI-1356433164887362210.zip).
32-
33-
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Getting%20Started/MAUI/CreatePdfDemoSample).
31+
You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/PDF-Examples/tree/master/Getting%20Started/MAUI/CreateMAUIPDFSample).
3432

3533
By executing the program in windows, you will get the PDF document as follows.
3634
![.NET MAUI output image](MAUI_images/invoice.png)
@@ -115,7 +113,7 @@ Download the helper files from this [link](https://www.syncfusion.com/downloads/
115113
PreviewControllerDS.cs<br/>QLPreviewItemFileSystem.cs
116114
</td>
117115
<td>
118-
Helper classes for viewing the <b>Pdf document</b> in iOS device
116+
Helper classes for viewing the <b>PDF document</b> in iOS device
119117
</td>
120118
</tr>
121119
</table>

‎Document-Processing/PDF/PDF-Library/NET/Working-with-Pages.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1740,6 +1740,7 @@ Refer to the following code example for removing PDF page‑level actions.
17401740

17411741
using Syncfusion.Pdf;
17421742
using Syncfusion.Pdf.Interactive;
1743+
using Syncfusion.Pdf.Parsing;
17431744

17441745
// Load the existing PDF document
17451746
using (PdfLoadedDocument document = new PdfLoadedDocument(Path.GetFullPath(@"Data/Input.pdf")))
@@ -1767,6 +1768,7 @@ using (PdfLoadedDocument document = new PdfLoadedDocument(Path.GetFullPath(@"Dat
17671768

17681769
using Syncfusion.Pdf;
17691770
using Syncfusion.Pdf.Interactive;
1771+
using Syncfusion.Pdf.Parsing;
17701772

17711773
// Load the existing PDF document
17721774
using (PdfLoadedDocument document = new PdfLoadedDocument(Path.GetFullPath(@"Data/Input.pdf")))
@@ -1793,6 +1795,7 @@ using (PdfLoadedDocument document = new PdfLoadedDocument(Path.GetFullPath(@"Dat
17931795

17941796
Imports Syncfusion.Pdf
17951797
Imports Syncfusion.Pdf.Interactive
1798+
Imports Syncfusion.Pdf.Parsing
17961799

17971800
' Load the existing PDF document
17981801
Using document As New PdfLoadedDocument(

‎Document-Processing/PDF/PDF-Viewer/react/how-to/enable-text-selection.md‎

Lines changed: 99 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -8,122 +8,133 @@ documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Enable or disable text selection in PDF Viewer
11+
# Enable or disable text selection in React PDF Viewer
1212

13-
The Syncfusion PDF Viewer exposes the `enableTextSelection` property to control whether users can select text within the displayed PDF document. This setting can be configured at initialization and toggled programmatically at runtime.
13+
This guide explains how to enable or disable text selection in the Syncfusion React PDF Viewer using both initialization-time settings and runtime toggling.
1414

15-
## Configure text selection on initialization
15+
**Outcome:** By the end of this guide, you will be able to control whether users can select text in the PDF Viewer.
1616

17-
Set the initial text-selection behavior by configuring the `enableTextSelection` property in the component template or on the `PdfViewerComponent` instance. The example below shows a complete component (TypeScript and template) that initializes the viewer with text selection disabled.
17+
## Steps to toggle text selection
1818

19-
{% tabs %}
20-
{% highlight js tabtitle="Standalone" %}
19+
### 1. Disable text selection at initialization
20+
21+
Follow one of these steps to disable text selection when the viewer first loads:
22+
23+
**Remove the text selection module**
24+
25+
Remove the [`TextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textselection) module in the services array to disable text selection during initialization.
26+
27+
{% highlight ts %}
2128
{% raw %}
29+
<PdfViewerComponent
30+
id="PdfViewer"
31+
ref={viewerRef}
32+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
33+
resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
34+
style={{ height: '100%' }}
35+
>
36+
<Inject
37+
services={[
38+
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
39+
ThumbnailView, Print, TextSearch, FormFields, FormDesigner, PageOrganizer
40+
]}
41+
/>
42+
</PdfViewerComponent>
43+
{% endraw %}
44+
{% endhighlight %}
2245

23-
import * as ReactDOM from 'react-dom';
24-
import * as React from 'react';
25-
import './index.css';
26-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
27-
BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch,
28-
FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
29-
30-
export function App() {
31-
return (<div>
32-
<div className='control-section'>
33-
<PdfViewerComponent
34-
id="container"
35-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
36-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
37-
enableTextSelection={false}
38-
style={{ 'height': '680px' }}
39-
>
40-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
41-
BookmarkView, ThumbnailView, Print, TextSelection, TextSearch, FormFields,
42-
FormDesigner, PageOrganizer]} />
43-
</PdfViewerComponent>
44-
</div>
45-
</div>);
46-
}
47-
const root = ReactDOM.createRoot(document.getElementById('sample'));
48-
root.render(<App />);
46+
**Set `enableTextSelection` to false**
4947

48+
Use the [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) during initialization to disable or enable text selection. The following example disables the text selection during initialization
49+
50+
{% highlight ts %}
51+
{% raw %}
52+
<PdfViewerComponent
53+
id="PdfViewer"
54+
ref={viewerRef}
55+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
56+
resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
57+
style={{ height: '100%' }}
58+
enableTextSelection={false}
59+
>
60+
<Inject
61+
services={[
62+
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
63+
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
64+
]}
65+
/>
66+
</PdfViewerComponent>
5067
{% endraw %}
5168
{% endhighlight %}
52-
{% endtabs %}
5369

54-
## Toggle dynamically
70+
### 2. Toggle text selection at runtime
5571

56-
Change the behavior at runtime using buttons or other UI.
72+
The [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) property can also be used to toggle the text selection at runtime.
5773

5874
{% tabs %}
59-
{% highlight js tabtitle="Standalone" %}
75+
{% highlight ts tabtitle="App.tsx" %}
6076
{% raw %}
61-
62-
import * as ReactDOM from 'react-dom';
63-
import * as React from 'react';
64-
import './index.css';
65-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation,
66-
BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch,
67-
FormFields, FormDesigner, PageOrganizer, Inject } from '@syncfusion/ej2-react-pdfviewer';
68-
69-
export class App extends React.Component {
70-
constructor() {
71-
super();
72-
this.pdfViewer = React.createRef();
73-
}
74-
75-
enableTextSelection = () => {
76-
if (this.pdfViewer.current) {
77-
this.pdfViewer.current.enableTextSelection = true;
77+
import {
78+
PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
79+
ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner,
80+
PageOrganizer, Inject
81+
} from '@syncfusion/ej2-react-pdfviewer';
82+
import { useRef, RefObject } from 'react';
83+
84+
export default function App() {
85+
const viewerRef: RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
86+
const enableTextSelection = () => {
87+
if (viewerRef.current) {
88+
viewerRef.current.enableTextSelection = true;
89+
}
7890
}
79-
}
80-
81-
disableTextSelection = () => {
82-
if (this.pdfViewer.current) {
83-
this.pdfViewer.current.enableTextSelection = false;
91+
const disableTextSelection = () => {
92+
if (viewerRef.current) {
93+
viewerRef.current.enableTextSelection = false;
94+
}
8495
}
85-
}
86-
87-
render() {
8896
return (
89-
<div id="app">
90-
<button onClick={this.enableTextSelection} style={{ marginBottom: '20px' }}>
91-
enableTextSelection
92-
</button>
93-
<button onClick={this.disableTextSelection} style={{ marginBottom: '20px' }}>
94-
disableTextSelection
95-
</button>
96-
<PdfViewerComponent
97-
id="pdfViewer"
98-
ref={this.pdfViewer}
99-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
100-
resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
101-
enableTextSelection={false}
102-
style={{ height: '640px' }}
103-
>
104-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, TextSelection,
105-
TextSearch, FormFields, FormDesigner, PageOrganizer]} />
106-
</PdfViewerComponent>
107-
</div>
97+
<div style={{ height: '100vh' }}>
98+
<button onClick={enableTextSelection}>Enable Text Selection</button>
99+
<button onClick={disableTextSelection}>Disable Text Selection</button>
100+
<PdfViewerComponent
101+
id="PdfViewer"
102+
ref={viewerRef}
103+
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
104+
resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
105+
style={{ height: '100%' }}
106+
>
107+
<Inject
108+
services={[
109+
Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView,
110+
ThumbnailView, Print, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer
111+
]}
112+
/>
113+
</PdfViewerComponent>
114+
</div>
108115
);
109-
}
110116
}
111-
112-
const root = ReactDOM.createRoot(document.getElementById('sample'));
113-
root.render(<App />);
114-
115117
{% endraw %}
116118
{% endhighlight %}
117119
{% endtabs %}
118120

121+
N> When text selection is disabled, the viewer automatically switches to pan mode.
122+
123+
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
124+
119125
## Use cases and considerations
120126

121127
- Document protection: Disable text selection to help prevent copying sensitive content.
122128
- Read-only documents: Provide a cleaner viewing experience by preventing selection.
123129
- Interactive apps: Toggle selection based on user roles or document states.
124130

125-
## Default behavior
131+
N> Text selection is enabled by default. Set `enableTextSelection` to `false` to disable it.
132+
133+
## Troubleshooting
134+
135+
If text selection remains active, ensure that the [`TextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/textselection) is removed in `Inject` or [`enableTextSelection`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#enabletextselection) is set to `false`.
126136

127-
Text selection is enabled by default. Set `enableTextSelection` to `false` to disable it.
137+
## See also
128138

129-
[View sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples/tree/master/How%20to)
139+
- [Text Selection API reference](../text-selection/reference)
140+
- [React PDF Viewer events](../events)

‎Document-Processing/PDF/PDF-Viewer/react/text-selection/overview.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
layout: post
3+
title: Text selection in React PDF Viewer | Syncfusion
4+
description: Learn the text selection concepts, copy behavior, and interaction capabilities of the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: Text selection
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Text selection in React PDF Viewer
12+
13+
The Text Selection module in the Syncfusion React PDF Viewer enables users to select and copy text from a loaded PDF document. Text selection is available by default and gives users direct interaction with the content through dragging, keyboard shortcuts, and context menus.
14+
15+
This overview explains the behavior of text selection, how copy actions work, and how it relates to other interaction features in the viewer.
16+
17+
## Capabilities of text selection
18+
19+
Text selection allows users to:
20+
21+
- Highlight text using mouse or touch
22+
- Copy the selected text to the clipboard
23+
- Access contextual commands such as Copy through the built‑in context menu
24+
- Use keyboard shortcuts such as Ctrl+C or Cmd+C to copy text
25+
- Trigger application behavior through selection events
26+
27+
The feature behaves consistently across single-page and multi-page documents.
28+
29+
## Copying text
30+
31+
Copying is available through several user interaction methods.
32+
33+
### Using the context menu
34+
35+
When text is selected, the built‑in context menu shows a Copy option. Selecting this option copies the highlighted text to the clipboard. See the [context menu](../context-menu/builtin-context-menu#text-menu-items) documentation for further explanation.
36+
37+
### Using keyboard shortcuts
38+
39+
The following keyboard shortcuts copy the selected text:
40+
41+
- Ctrl+C (Windows and Linux)
42+
- Cmd+C (macOS)
43+
44+
## Related topics
45+
46+
These topics describe how selection interacts with other features or how copy behavior may be limited depending on viewer configuration or PDF security settings.
47+
48+
- [Restricting copy operations (permissions)](../security/prevent-copy-and-print)
49+
- [Toggle text selection](./toggle-text-selection)
50+
- [Text selection API reference](./reference)

0 commit comments

Comments
 (0)