You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/react/Redaction/mobile-view.md
+81-81Lines changed: 81 additions & 81 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,11 +7,11 @@ control: PdfViewer
7
7
documentation: ug
8
8
---
9
9
10
-
# Redaction in Mobile View in React PdfViewer Component
10
+
# Redaction in mobile view in React PdfViewer component
11
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.
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.
13
13
14
-
14
+
15
15
16
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
17
@@ -69,129 +69,129 @@ root.render(<App />);
69
69
{% endhighlight %}
70
70
{% endtabs %}
71
71
72
-
## Understanding Mobile Redaction Toolbar Tools
72
+
## Understanding mobile redaction toolbar tools
73
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.
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.
75
75
76
-
### Redaction Annotation Tool
76
+
### Redaction annotation tool
77
77
78
-
The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
78
+
The Redaction Annotation tool creates rectangular overlays that mark content for removal.
79
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.
80
+
Function: create visual redaction annotations that mark content for permanent removal.
81
+
82
+
Usage: touch and drag to draw rectangular redaction overlays.
83
83
84
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
Step 2: Tap the Apply Redactions button in the redaction toolbar
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.
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/react/Redaction/overview.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
10
10
11
11
# Redaction in React PdfViewer
12
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.
13
+
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.
14
14
15
15
## Enable the redaction toolbar
16
16
@@ -109,7 +109,7 @@ A confirmation dialog appears before applying redaction to ensure you acknowledg
109
109
110
110
111
111
112
-
N> After redaction is applied, the original content cannot be recovered.
112
+
N> After redaction is applied the original content cannot be recovered.
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/react/Redaction/programmatic-support.md
+18-6Lines changed: 18 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,15 +7,15 @@ control: PdfViewer
7
7
documentation: ug
8
8
---
9
9
10
-
# Programmatic support for redaction in React PdfViewer
10
+
# Programmatic support for redaction in React PDF Viewer
11
11
12
12
The Syncfusion React PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. You can also redact entire pages, configure default properties, and work with the redaction property panel.
13
13
14
14
## Enable the redaction toolbar
15
15
16
16
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
17
17
18
-
The following example shows how to enable the redaction toolbar:
18
+
The example below shows a PdfViewer with the redaction toolbar enabled:
19
19
20
20
{% tabs %}
21
21
{% highlight js tabtitle="index.js" %}
@@ -70,6 +70,8 @@ root.render(<App />);
70
70
71
71
You can add redaction annotations to a PDF document using the `addAnnotation` method of the `annotation` module. You can listen to the `annotationAdd` event to track when annotations are added.
72
72
73
+
The example below adds a redaction annotation at a fixed location on the first page.
74
+
73
75
{% tabs %}
74
76
{% highlight js tabtitle="index.js" %}
75
77
@@ -186,6 +188,8 @@ root.render(<App />);
186
188
187
189
Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code.
188
190
191
+
This example removes a redaction annotation by id.
192
+
189
193
{% tabs %}
190
194
{% highlight js tabtitle="index.js" %}
191
195
@@ -281,12 +285,14 @@ root.render(<App />);
281
285
{% endtabs %}
282
286
283
287
284
-
Alternatively, you can remove annotations by selecting them in the UI and pressing the **Delete** key.
288
+
Annotations can also be removed by selecting them in the UI and pressing the **Delete** key.
You can update properties of an existing redaction annotation using the `editAnnotation` API. For example, to change overlay text or fill color:
289
293
294
+
The example below updates properties of existing redaction annotations.
295
+
290
296
{% tabs %}
291
297
{% highlight js tabtitle="index.js" %}
292
298
@@ -399,6 +405,8 @@ root.render(<App />);
399
405
400
406
Entire pages can be marked for redaction using the `addPageRedactions` method:
401
407
408
+
This example marks full pages for redaction.
409
+
402
410
{% tabs %}
403
411
{% highlight js tabtitle="index.js" %}
404
412
@@ -496,6 +504,8 @@ root.render(<App />);
496
504
497
505
Once annotations are added, you can permanently apply them to the document using the `redact` method:
498
506
507
+
This example applies all pending redactions, permanently modifying the document.
508
+
499
509
{% tabs %}
500
510
{% highlight js tabtitle="index.js" %}
501
511
@@ -589,12 +599,14 @@ root.render(<App />);
589
599
{% endhighlight %}
590
600
{% endtabs %}
591
601
592
-
N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.
602
+
N> Applying redaction is irreversible. Create a backup of the original document before applying redactions; once applied, the original content cannot be recovered.
Copy file name to clipboardExpand all lines: Document-Processing/PDF/PDF-Viewer/react/Redaction/search-redact.md
+7-8Lines changed: 7 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,18 +8,17 @@ documentation: ug
8
8
domainurl: ##DomainURL##
9
9
---
10
10
11
-
# Search text and redact in React PdfViewer
11
+
# Search text and redact in React PDF Viewer
12
12
13
-
You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the extractTextCompleted event, triggers text extraction, performs a search, and places redaction annotations for every result.
13
+
You can search for a keyword in the loaded PDF and automatically add redaction annotations over each match. The example below wires the `extractTextCompleted` event, triggers text extraction, performs a search, and places redaction annotations for every result.
14
14
15
-
N> Prerequisites: Add the PdfViewer control to your React application and ensure a document is loaded. Make sure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
15
+
N> Prerequisites — add the PdfViewer control to your React application and ensure a document is loaded. Confirm that the redaction feature is available in the product version you are using. Create a backup of the original document before applying redactions; applied redactions are permanent and cannot be recovered.
16
16
17
-
## Steps to add Redaction annotations on search Text Bounds
17
+
## Steps to add redaction annotations to search text bounds
18
18
19
19
**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/react/getting-started) to create a simple PDF Viewer sample.
20
20
21
-
22
-
**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds.
21
+
**Step 2:** The example below searches for a term, adds redaction annotations for each match, and exposes a button to apply redactions. Use the following code snippets to add redaction annotations on search text bounds.
23
22
24
23
{% tabs %}
25
24
{% highlight js tabtitle="index.js" %}
@@ -159,12 +158,12 @@ root.render(<App />);
159
158
- Ensure the PDF is fully loaded before triggering extraction and search.
160
159
- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates.
161
160
- Customize overlay text, colors, and typography as needed.
162
-
- Adding a redaction annotation covers the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or equivalent API if available in your version.
161
+
- Adding a redaction annotation only marks the content visually. To permanently remove sensitive data, use the viewer's Apply Redaction action or the `annotation.redact()`API; this operation is irreversible.
163
162
164
163
## See also
165
164
166
165
*[Overview of Redaction](./overview)
167
166
*[Programmatic Support in Redaction](./programmatic-support)
0 commit comments