Skip to content

Commit 0d2a37f

Browse files
KameshRajendranKameshRajendran
authored
Merge pull request #2476 from syncfusion-content/1016259-DevtoHf
1016259: Moved Dev changes to Hotfix.
2 parents e5ad6d2 + c7c0958 commit 0d2a37f

4 files changed

Lines changed: 264 additions & 89 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 6 additions & 1 deletion
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>

‎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)