Skip to content

Commit 7a02f75

Browse files
SF4524LogeshKumarSF4524LogeshKumar
committed
993766: Redaction Annotation UG in React platform
1 parent 2d1a857 commit 7a02f75

32 files changed

+1407
-0
lines changed

‎Document-Processing-toc.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -847,6 +847,16 @@
847847
<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotations-in-mobile-view">Annotations in Mobile view</a></li>
848848
</ul>
849849
</li>
850+
<li>Redaction
851+
<ul>
852+
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/overview"></a>Overview</li>
853+
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/programmatic-support">Programmatic Support</a></li>
854+
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/ui-interaction">UI Interactions</a></li>
855+
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/toolbar">Toolbar</a></li>
856+
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/mobile-view">Mobile View</a></li>
857+
<li><a href="/document-processing/pdf/pdf-viewer/react/Redaction/search-redact">Search Text and Redact</a></li>
858+
</ul>
859+
</li>
850860
<li><a href="/document-processing/pdf/pdf-viewer/react/interaction-mode">Interaction Mode</a></li>
851861
<li>Form Designer
852862
<ul>

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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
---
2+
layout: post
3+
title: Redaction in mobile view in React PDF Viewer | Syncfusion
4+
description: Learn how to apply redactions in mobile view using the Syncfusion React PDF Viewer with a complete toolbar setup and redaction workflow.
5+
platform: document-processing
6+
control: PdfViewer
7+
documentation: ug
8+
---
9+
10+
# Redaction in Mobile View in React PdfViewer Component
11+
12+
The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the React PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
13+
14+
![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png)
15+
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 %}
71+
72+
## Understanding Mobile Redaction Toolbar Tools
73+
74+
When you enter redaction mode in mobile view, a specialized redaction toolbar appears with multiple tools optimized for touch interaction. Each tool serves a specific purpose in the redaction workflow.
75+
76+
### Redaction Annotation Tool
77+
78+
The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
79+
80+
Function: Creates visual redaction annotations that mark content for permanent removal
81+
Usage:
82+
Touch and drag to draw rectangular redaction overlays on any content area.
83+
84+
Process:
85+
- Selected content appears with a customizable overlay (default black)
86+
- Annotations remain editable until explicitly applied
87+
- Can be repositioned or deleted before final application
88+
89+
![Redaction Annotation Tool](./redaction-annotations-images/redaction-annotation-annot.png)
90+
91+
### Page Redaction Tool
92+
93+
The Page Redaction tool enables batch redaction of entire pages based on specific patterns.
94+
95+
![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png)
96+
97+
Function: Redacts complete pages or page ranges with a single action
98+
Options Available:
99+
- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.)
100+
- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.)
101+
- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7)
102+
- Current Page: Redacts only the currently displayed page
103+
104+
Usage:
105+
Select desired pattern → Review affected pages in the viewer → Confirm redaction scope
106+
107+
![Page Redaction Tool Dialog](./redaction-annotations-images/page-redaction-dialog-annot.png)
108+
109+
### Redaction Properties Tool
110+
111+
The Redaction Properties tool allows customization of redaction appearance before application.
112+
113+
![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png)
114+
115+
Function: Customize the visual appearance of redaction overlays and text replacement
116+
Customizable Properties:
117+
- Fill Color: Change the redaction overlay color (default: black)
118+
- Outline Color: Set outline color for redaction boxes (optional)
119+
- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")
120+
- Text Color: Change overlay text color for better visibility
121+
- Text Font: Select font family for overlay text
122+
- Text Alignment: Position overlay text within redaction boxes
123+
- Text Size: Adjust overlay text size relative to redaction area
124+
125+
![Redaction Properties Dialog Mobile View](./redaction-annotations-images/redaction-properties-dialog-annot.png)
126+
127+
## Enabling Redaction Mode in Mobile View
128+
129+
Step 1: Tap the Redaction button in the mobile toolbar to activate redaction mode. The redaction toolbar will appear at the bottom of the viewer.
130+
131+
![Redaction toolbar displayed at bottom of mobile PDF viewer with three distinct tools](./redaction-annotations-images/redaction-mobile-view.png)
132+
133+
Step 2: From the redaction toolbar, select your desired redaction tool:
134+
- First Tool (Redaction Annotation): For selective content redaction
135+
- Second Tool (Page Redaction): For page-wide or pattern-based redaction
136+
- Third Tool (Redaction Properties): For appearance customization
137+
138+
Step 3: Configure your redaction parameters using the selected tool interface.
139+
140+
## Applying Different Redaction Types in Mobile View
141+
142+
### Selective Content Redaction
143+
1. Select Redaction Annotation tool (first button)
144+
2. Choose Content: Tap and drag over text or draw rectangular areas
145+
3. Preview: Check redaction overlays for accuracy
146+
4. Apply: Tap "Apply Redactions" button
147+
148+
### Page-Wide Redaction
149+
1. Select Page Redaction tool (second button)
150+
2. Choose Pattern: Select odd pages, even pages, or custom range
151+
3. Review: Verify affected pages in the viewer
152+
4. Apply: Confirm page redaction scope and apply
153+
154+
### Custom Appearance Redaction
155+
1. Select Redaction Properties tool (third button)
156+
2. Customize: Adjust colors, overlay text, and formatting
157+
3. Preview: See changes applied to existing annotations
158+
4. Apply: Use customized appearance for final redaction
159+
160+
## Applying Redactions in Mobile View
161+
162+
N> Applying redactions is permanent. After applying, the underlying content and text are removed from the document and cannot be recovered.
163+
164+
Once you have configured redactions using any combination of tools.
165+
166+
Step 1: Review all redaction marks and configurations.
167+
168+
![Review Redaction Annotation](./redaction-annotations-images/review-redaction-annotation-mv-annot.png)
169+
170+
Step 2: Tap the Apply Redactions button in the redaction toolbar
171+
172+
![Apply Redaction Button](./redaction-annotations-images/apply-redaction-button-mv.png)
173+
174+
Step 3: Confirm the action when prompted - this operation is permanent and cannot be undone
175+
176+
![Apply Redaction Dialog](./redaction-annotations-images/apply-redaction-dialog-mv-annot.png)
177+
178+
The selected content will be permanently removed and replaced according to your redaction properties (solid color blocks or custom overlay text).
179+
180+
![Applied Redaction](./redaction-annotations-images/applied-redaction-annot.png)
181+
182+
## Removing Redaction Annotations
183+
184+
To remove existing redaction annotations before they are applied:
185+
186+
- Step 1: Tap the Redaction Edit button in the mobile toolbar to enter annotation editing mode
187+
- Step 2: Tap on any existing redaction annotation you wish to remove
188+
- Step 3: Select Delete from the context menu that appears
189+
190+
Alternative: Tap redaction annotation → Use delete button in annotation properties panel
191+
192+
![Delete Redaction Annotation](./redaction-annotations-images/delete-redaction-annotation-annot.png)
193+
194+
N> Once redactions have been applied to the document, they become part of the PDF content and cannot be removed or modified.
195+
196+
## See Also
197+
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)

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
---
2+
layout: post
3+
title: Redaction annotation in React PDF Viewer | Syncfusion
4+
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion React PDF Viewer.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Redaction in React PdfViewer
12+
13+
Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion React PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action.
14+
15+
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.
16+
17+
![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)
18+
19+
## Add Redaction Annotations
20+
21+
You can mark specific content for redaction using the toolbar or through code.
22+
23+
Select the **Redaction tool** and draw over the text or graphics you want to hide. You can also add overlay text (such as “Confidential”) and adjust the style — fill color, border color, and opacity.
24+
25+
![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png)
26+
27+
## Delete Redaction Annotations
28+
29+
Redaction annotations can be removed easily:
30+
31+
- Click the **Delete** button on the toolbar, or
32+
- Select the annotation and press the **Delete** key.
33+
34+
![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png)
35+
36+
## Redact Entire Pages
37+
38+
The viewer allows you to redact whole pages that contain sensitive information. You can choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically.
39+
40+
![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png)
41+
42+
## Apply Redaction
43+
44+
Once annotations are added, you can permanently apply them to the document. This action cannot be undone.
45+
46+
Use the **Apply Redaction** button on the toolbar or call the API method:
47+
48+
- The button is disabled until at least one redaction annotation exists.
49+
- It becomes active when redaction annotations are present.
50+
51+
![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png)
52+
53+
A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process.
54+
55+
![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png)
56+
57+
N> After redaction is applied, the original content cannot be recovered.
58+
59+
## Comment Support
60+
61+
Redaction annotations can include comments using the built‑in comment panel. This helps you add notes, track reviews, or record the reason for redaction.
62+
63+
Comments can be added through the UI or API. For more details, see the [Comments documentation](../annotations/comments).
64+
65+
## Import and Export Redaction Annotations
66+
67+
You can save and reload redaction annotations by exporting and importing them in JSON format. This makes it easy to persist annotations or share them across sessions.
68+
69+
For more details, see the [Export and import annotations documentation](../how-to/import-export-annotation).
70+
71+
## See also
72+
73+
* [Redaction UI interactions](./ui-interaction)
74+
* [Redaction Programmatic support](./programmatic-support)
75+
* [Redaction Toolbar](./toolbar)
76+
* [Redaction Mobile view](./mobile-view)
77+
* [Search Text and Redact](./search-redact)

0 commit comments

Comments
 (0)