Skip to content

Commit 42950fc

Browse files
SyncfusionBuildSyncfusionBuild
authored
Merge pull request #2362 from Syncfusion-Content/hotfix/hotfix-v32.2.3
DOCINFRA-2341_merged_using_automation
2 parents 9d68a40 + 824ec41 commit 42950fc

17 files changed

Lines changed: 818 additions & 2258 deletions

‎Document-Processing-toc.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1021,6 +1021,14 @@
10211021
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/search-redact">Search Text and Redact</a></li>
10221022
</ul>
10231023
</li>
1024+
<li>Permissions and Security
1025+
<ul>
1026+
<li><a href="/document-processing/pdf/pdf-viewer/react/security/overview">Overview</a></li>
1027+
<li><a href="/document-processing/pdf/pdf-viewer/react/security/prevent-copy-and-print">Prevent copy/print</a></li>
1028+
<li><a href="/document-processing/pdf/pdf-viewer/react/security/secure-pdf-viewing">Secure PDF viewing in react apps</a></li>
1029+
<li><a href="/document-processing/pdf/pdf-viewer/react/security/restricting-download-and-print">Restrict download/print</a></li>
1030+
</ul>
1031+
</li>
10241032
<li><a href="/document-processing/pdf/pdf-viewer/react/interaction-mode">Interaction Mode</a></li>
10251033
<li>Forms
10261034
<ul>

‎Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md‎

Lines changed: 54 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -7,196 +7,106 @@ control: PdfViewer
77
documentation: ug
88
---
99

10-
# Redaction in mobile view in React PdfViewer component
10+
# Redaction in mobile view in React PDF Viewer
1111

12-
The Redaction tool lets users permanently mark and remove sensitive content from PDF documents in mobile view. It is optimized for touch interactions and provides a streamlined redaction workflow for phones and tablets.
12+
## Overview
13+
14+
This tutorial teaches you how to enable and use the Redaction tools in the Syncfusion React PDF Viewer optimized for mobile (phone/tablet) screens. You will add a redaction button to the viewer toolbar, open the viewer on a small-screen layout, create selective and page-wide redactions, customize appearance, and apply redactions permanently.
15+
16+
**Outcome**: a working React sample where users can mark content for redaction using touch, configure appearance, and apply redactions.
1317

1418
![Redaction toolbar displayed at bottom of mobile PDF viewer](./redaction-annotations-images/redaction-mobile-view.png)
1519

16-
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
17-
18-
## Adding Redaction in Mobile View
19-
20-
To enable redaction functionality in your React application, configure the PDF Viewer with the following setup:
21-
22-
{% tabs %}
23-
{% highlight js tabtitle="index.js" %}
24-
25-
import * as ReactDOM from 'react-dom/client';
26-
import * as React from 'react';
27-
import './index.css';
28-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
29-
export function App() {
30-
// includes RedactionEditTool
31-
const toolbarSettings = {
32-
toolbarItems: [
33-
'OpenOption',
34-
'UndoRedoTool',
35-
'PageNavigationTool',
36-
'MagnificationTool',
37-
'PanTool',
38-
'SelectionTool',
39-
'CommentTool',
40-
'SubmitForm',
41-
'AnnotationEditTool',
42-
'RedactionEditTool', // Redaction entry in the primary toolbar
43-
'FormDesignerEditTool',
44-
'SearchOption',
45-
'PrintOption',
46-
'DownloadOption'
47-
]
48-
};
49-
return (<div>
50-
<div className='control-section'>
51-
<PdfViewerComponent
52-
id="container"
53-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
54-
resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
55-
toolbarSettings={toolbarSettings}
56-
57-
style={{ 'height': '680px' }}
58-
>
59-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
60-
Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
61-
</PdfViewerComponent>
62-
</div>
63-
</div>);
64-
65-
}
66-
const root = ReactDOM.createRoot(document.getElementById('sample'));
67-
root.render(<App />);
68-
69-
{% endhighlight %}
70-
{% endtabs %}
20+
N> In mobile view the redaction toolbar appears at the bottom of the viewer for easy thumb access. Mobile layout activates automatically on small screens.
7121

72-
## Understanding mobile redaction toolbar tools
22+
## Prerequisites
7323

74-
When entering redaction mode in mobile view, a specialized redaction toolbar appears with tools optimized for touch. Each tool supports a specific step in the redaction workflow.
24+
- A React project with PDF Viewer added to project. See [getting started guide](../getting-started)
7525

76-
### Redaction annotation tool
26+
## Steps
7727

78-
The Redaction Annotation tool creates rectangular overlays that mark content for removal.
28+
1. Add the PdfViewer to your React app and include the redaction toolbar item.
7929

80-
Function: create visual redaction annotations that mark content for permanent removal.
30+
- Enable the redaction tool with the code example in this [guide](./toolbar#enable-redaction-toolbar). The example includes a toolbar entry for [`RedactionEditTool`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbaritem) which enables redaction controls in the viewer.
8131

82-
Usage: touch and drag to draw rectangular redaction overlays.
32+
2. Start the app and open it on a narrow viewport (phone width) to trigger mobile layout.
8333

84-
Process:
34+
3. Use the mobile redaction toolbar (bottom of the screen) to:
35+
- Draw redaction boxes with the Redaction Annotation tool (touch & drag)
36+
- Use Page Redaction to redact odd/even/specified pages
37+
- Open Redaction Properties to change overlay color, overlay text, and font
8538

86-
- Selected content shows a customizable overlay (default black).
87-
- Annotations remain editable until explicitly applied and can be repositioned or deleted.
39+
4. Review annotations, then tap Apply Redactions to permanently remove content.
8840

89-
![Redaction annotation tool overlay preview](./redaction-annotations-images/redaction-annotation-annot.png)
41+
## Understanding mobile redaction toolbar tools
9042

91-
### Page redaction tool
43+
When entering redaction mode in mobile view, a specialized redaction toolbar appears with tools optimized for touch. Each tool supports a specific step in the redaction workflow.
9244

93-
The Page Redaction tool supports batch redaction of entire pages based on patterns.
45+
### Redaction annotation tool
9446

95-
![Page redaction tool options and dialog](./redaction-annotations-images/page-redaction-annot.png)
47+
The Redaction Annotation tool creates rectangular overlays that mark content for removal. Touch and drag to draw boxes; overlays remain editable until applied.
9648

97-
Function: redact complete pages or page ranges with one action.
49+
![Redaction annotation tool overlay preview](./redaction-annotations-images/redaction-annotation-annot.png)
9850

99-
Options:
51+
### Page redaction tool
10052

101-
- **Odd pages**: redact pages 1, 3, 5, etc.
102-
- **Even pages**: redact pages 2, 4, 6, etc.
103-
- **Specific pages**: specify single pages, ranges (for example, 1-5), or comma-separated lists (for example, 1,3,5-7).
104-
- **Current page**: redact the currently displayed page.
53+
Use Page Redaction to redact whole pages or page ranges (odd, even, specific ranges). This helps remove patterns of sensitive pages quickly.
10554

106-
Usage: choose a pattern, review affected pages in the viewer, and confirm the redaction scope.
55+
![Page redaction tool options and dialog](./redaction-annotations-images/page-redaction-annot.png)
10756

10857
![Page redaction dialog preview](./redaction-annotations-images/page-redaction-dialog-annot.png)
10958

11059
### Redaction properties tool
11160

112-
The Redaction Properties tool customizes redaction appearance before applying changes.
61+
Open Redaction Properties to change overlay fill color, outline color, overlay text, text color, font and alignment before applying.
11362

11463
![Redaction properties options preview](./redaction-annotations-images/redaction-properties-annot.png)
11564

116-
Customizable properties include:
117-
118-
- **Fill color**: redaction overlay color (default black).
119-
- **Outline color**: optional outline for redaction boxes.
120-
- **Overlay text**: custom text shown on redacted areas (for example, "REDACTED").
121-
- **Text color and font**: control visibility and style of overlay text.
122-
- **Text alignment and size**: position and scale overlay text within the redaction area.
123-
12465
![Redaction properties dialog preview](./redaction-annotations-images/redaction-properties-dialog-annot.png)
12566

126-
## Enabling redaction mode in mobile view
127-
128-
1. Tap the Redaction button in the mobile toolbar to activate redaction mode; the redaction toolbar appears at the bottom of the viewer.
129-
130-
![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png)
131-
132-
2. From the redaction toolbar, select a redaction tool:
133-
134-
- **Redaction Annotation**: selective content redaction.
135-
- **Page Redaction**: page-wide or pattern-based redaction.
136-
- **Redaction Properties**: configure appearance options.
137-
138-
3. Configure redaction parameters using the selected tool interface.
139-
140-
## Applying different redaction types in mobile view
141-
142-
### Selective content redaction
143-
144-
1. Select the Redaction Annotation tool.
145-
2. Tap and drag to select content or draw rectangular areas.
146-
3. Preview overlays for accuracy.
147-
4. Tap **Apply Redactions** to apply selected annotations.
148-
149-
### Page-wide redaction
150-
151-
1. Select the Page Redaction tool.
152-
2. Choose a pattern (odd, even, specific range).
153-
3. Review affected pages in the viewer.
154-
4. Confirm and apply redaction for chosen pages.
155-
156-
### Custom appearance redaction
157-
158-
1. Select the Redaction Properties tool.
159-
2. Adjust colors, overlay text, and formatting.
160-
3. Preview changes on existing annotations.
161-
4. Apply to use the customized appearance for final redaction.
162-
16367
## Applying redactions in mobile view
16468

165-
Note: Applying redactions is permanent. After applying, underlying content and extracted text are removed and cannot be recovered. Back up the original document before applying redactions.
166-
167-
After configuring redactions using any combination of tools:
69+
Applying redactions is permanent. Back up the original document before applying.
16870

16971
1. Review all redaction marks and configurations.
17072

171-
![Review redaction annotations before applying](./redaction-annotations-images/review-redaction-annotation-mv-annot.png)
73+
![Review redaction annotations before applying](./redaction-annotations-images/review-redaction-annotation-mv-annot.png)
74+
17275
2. Tap the **Apply Redactions** button in the redaction toolbar.
17376

174-
![Apply redaction button in mobile view](./redaction-annotations-images/apply-redaction-button-mv.png)
77+
![Apply redaction button in mobile view](./redaction-annotations-images/apply-redaction-button-mv.png)
17578

17679
3. Confirm the action when prompted — this operation is irreversible.
17780

178-
![Apply redaction confirmation dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png)
81+
![Apply redaction confirmation dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png)
17982

180-
The selected content is permanently removed and replaced according to redaction properties (solid overlays or custom overlay text).
83+
4. After applying, the selected content is permanently removed and replaced according to redaction properties.
18184

182-
![Result of applied redaction](./redaction-annotations-images/applied-redaction-annot.png)
85+
![Result of applied redaction](./redaction-annotations-images/applied-redaction-annot.png)
18386

184-
## Removing redaction annotations
87+
### Removing redaction annotations
18588

186-
To remove existing redaction annotations before they are applied:
187-
188-
1. Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode.
189-
2. Tap an existing redaction annotation to select it.
190-
3. Choose **Delete** from the context menu or use the delete option in the annotation properties panel.
89+
To remove a redaction annotation prior to applying it: enter Redaction Edit mode, tap the annotation to select it and choose Delete.
19190

19291
![Delete a redaction annotation before applying](./redaction-annotations-images/delete-redaction-annotation-annot.png)
19392

194-
N> Once redactions are applied they become part of the PDF content and cannot be removed or modified.
93+
## Mobile redaction workflow
94+
95+
1. Tap the Redaction button in the main toolbar to open the mobile redaction toolbar at the bottom.
96+
2. Choose Redaction Annotation to draw boxes by touch-and-drag.
97+
3. Use Redaction Properties to set fill color and overlay text.
98+
4. Tap Apply Redactions to make changes permanent (this is irreversible).
99+
100+
## Troubleshooting
101+
102+
- If toolbar or redaction controls don't appear: ensure your [`toolbarSettings`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#toolbarsettings) includes [`RedactionEditTool`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbaritem) and that the `Inject` list contains [`Annotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/annotation).
103+
- If the viewer is blank: confirm [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) points to the correct Syncfusion PDF Viewer resource package version.
104+
- For production builds, ensure your app serves the WASM and resource files from [`resourceUrl`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer#resourceurl) or a hosted CDN.
195105

196-
## See Also
106+
## Related topics
197107

198-
* [Redaction Overview](./overview)
199-
* [UI Interaction](./ui-interaction)
200-
* [Programmatic Support in Redaction](./programmatic-support)
201-
* [Toolbar](./toolbar)
202-
* [Search Text and Redact](./search-redact)
108+
- [Redaction Overview](./overview)
109+
- [UI Interaction](./ui-interaction)
110+
- [Programmatic Support in Redaction](./programmatic-support)
111+
- [Toolbar](./toolbar)
112+
- [Search Text and Redact](./search-redact)

‎Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md‎

Lines changed: 3 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,20 @@
11
---
22
layout: post
3-
title: Redaction annotation in React PDF Viewer | Syncfusion
3+
title: Redact sensitive content in React PDF Viewer | Syncfusion
44
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion React PDF Viewer.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug
88
domainurl: ##DomainURL##
99
---
1010

11-
# Redaction in React PdfViewer
11+
# Redact sensitive content in React PDF Viewer
1212

1313
Redaction annotations hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) enables marking areas or entire pages for redaction, customizing appearance, and applying changes permanently.
1414

1515
## Enable the redaction toolbar
1616

17-
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
18-
19-
The following example shows how to enable the redaction toolbar:
20-
21-
{% tabs %}
22-
{% highlight js tabtitle="app.jsx" %}
23-
24-
import * as ReactDOM from 'react-dom/client';
25-
import * as React from 'react';
26-
import './index.css';
27-
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
28-
export function App() {
29-
// includes RedactionEditTool
30-
const toolbarSettings = {
31-
toolbarItems: [
32-
'OpenOption',
33-
'UndoRedoTool',
34-
'PageNavigationTool',
35-
'MagnificationTool',
36-
'PanTool',
37-
'SelectionTool',
38-
'CommentTool',
39-
'SubmitForm',
40-
'AnnotationEditTool',
41-
'RedactionEditTool', // Redaction entry in the primary toolbar
42-
'FormDesignerEditTool',
43-
'SearchOption',
44-
'PrintOption',
45-
'DownloadOption'
46-
]
47-
};
48-
return (<div>
49-
<div className='control-section'>
50-
<PdfViewerComponent
51-
id="container"
52-
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
53-
resourceUrl= "https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
54-
toolbarSettings={toolbarSettings}
55-
style={{ 'height': '680px' }}
56-
>
57-
<Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
58-
Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
59-
</PdfViewerComponent>
60-
</div>
61-
</div>);
62-
63-
}
64-
const root = ReactDOM.createRoot(document.getElementById('sample'));
65-
root.render(<App />);
66-
67-
{% endhighlight %}
68-
{% endtabs %}
17+
To enable the redaction toolbar, configure the [`toolbarSettings.toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/toolbarsettings#toolbaritems) property of the PdfViewer instance to include the **RedactionEditTool**. See this [guide](./toolbar#enable-redaction-toolbar) to enable redaction toolbar.
6918

7019
N> Prerequisites: Add the PdfViewer control to your React application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
7120

0 commit comments

Comments
 (0)