Skip to content

Commit 35694d1

Browse files
1009405: Updated UG revamp TS III
1 parent 1a09d61 commit 35694d1

62 files changed

Lines changed: 519 additions & 528 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/default-language.md

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

11-
# Localization support in Typescript PDF Viewer
11+
# Localization in the TypeScript PDF Viewer
1212

13-
The PDF Viewer fully supports localization, allowing all UI text, tooltips, and messages to be replaced with culture-specific strings so the interface matches users language and regional settings.
13+
The PDF Viewer supports localization of UI text, tooltips, and messages using culture-specific string collections so the interface matches users' language and regional settings.
1414

1515
![Default Locale](../images/locale-us.gif)
1616

17+
N> Change the viewer locale by setting the `locale` property in the viewer options during initialization or by assigning `pdfviewer.locale` before rendering.
18+
1719
## Default language (en-US)
1820

1921
By default, the PDF Viewer uses the en-US culture and requires no additional configuration.

Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/new-language.md

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

11-
# Set a new language (localization)
11+
# Set a new language in the TypeScript PDF Viewer
1212

13-
You can localize the PDF Viewer UI by:
14-
- Registering localized strings for each culture using `L10n.load` at the application level
15-
- Setting the [`locale`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale) property of the `PdfViewer` instance to the desired culture
13+
Localize the PDF Viewer UI by:
14+
- Registering culture-specific strings with `L10n.load` at the application level
15+
- Setting the [`locale`]((https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale)) property on the `PdfViewer` instance to the desired culture
1616

1717
![German Locale](../images/locale-de.gif)
1818

19-
## Example Code-snippet to change language using Locale
19+
## Example: change language using `locale` and `L10n.load`
2020

2121
{% tabs %}
2222
{% highlight ts tabtitle="Standalone" %}
@@ -299,7 +299,7 @@ pdfviewer.appendTo('#PdfViewer');
299299
{% endhighlight %}
300300
{% endtabs %}
301301

302-
N> You can find a comprehensive list of localization files/strings here: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys you want to override, missing keys fall back to defaults.
302+
N> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys that require overrides; missing keys fall back to the default `en-US` values.
303303

304304
## See Also
305305

Document-Processing/PDF/PDF-Viewer/javascript-es6/Localization/rtl-language-support.md

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

11-
# RTL Language Support in Typescript PDF Viewer
11+
# RTL language support in TypeScript PDF Viewer
1212

13-
RTL support in TypeScript PDF Viewer:
14-
15-
- PDF Viewer component supports right-to-left layouts.
16-
- For RTL languages (Arabic, Hebrew, Persian), enable the [`enableRtl`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#enablertl) property.
17-
- Load culture-specific strings globally using `L10n.load`.
18-
- Set the PdfViewer [`locale`](https://ej2.syncfusion.com/documentation/api/pdfviewer/index-default#locale) property to the target culture.
13+
Use RTL support to render the viewer interface for right-to-left languages.
14+
- Enable `enableRtl` to apply right-to-left layout.
15+
- Load culture-specific strings globally with `L10n.load`.
16+
- Set the `locale` property on the `PdfViewer` instance to the target culture.
1917

2018
![Arabic Localization](../images/locale-ar.gif)
2119

22-
## Example Code-snippet to Enable RTL with Arabic Localization
20+
## Example: enable RTL and provide Arabic localization
2321

24-
Use the below code-snippet to enable RTL for RTL Languages(Arabic, Hebrew, Persian)
22+
Use the example below to enable RTL for languages such as Arabic, Hebrew, and Persian.
2523

2624
{% tabs %}
2725
{% highlight ts tabtitle="Standalone" %}
@@ -298,7 +296,7 @@ pdfviewer.appendTo('#PdfViewer');
298296
{% endhighlight %}
299297
{% endtabs %}
300298

301-
N> You can find a comprehensive list of localization files/strings here: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only the keys you want to override, missing keys fall back to defaults.
299+
N> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only keys that require overrides; missing keys fall back to the default `en-US` values.
302300

303301
[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
304302

Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/mobile-view.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ documentation: ug
99

1010
# Redaction in Mobile View in JavaScript (ES6) PdfViewer Component
1111

12-
The Redaction Tool enables users to permanently mark and remove sensitive content from PDF documents in mobile view using the JavaScript (ES6) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
12+
The Redaction Tool enables permanent marking and removal of sensitive content from PDF documents in mobile view using the JavaScript (ES6) PdfViewer component. This feature is optimized for touch interactions and provides a streamlined redaction workflow specifically designed for mobile devices.
1313

1414
![Redaction in Mobile View](./redaction-annotations-images/redaction-mobile-view.png)
1515

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.
16+
N> In mobile view, the redaction toolbar appears at the bottom of the viewer for easy thumb access. The mobile layout activates automatically on small screens.
1717

1818
## Adding Redaction in Mobile View
1919

@@ -53,11 +53,10 @@ When you enter redaction mode in mobile view, a specialized redaction toolbar ap
5353

5454
### Redaction Annotation Tool
5555

56-
The Redaction Annotation tool is the primary redaction feature that allows you to draw redaction rectangles on specific content:
56+
The Redaction Annotation tool is the primary redaction feature that allows you to drawing redaction rectangles on specific content:
5757

5858
Function: Creates visual redaction annotations that mark content for permanent removal
59-
Usage:
60-
Touch and drag to draw rectangular redaction overlays on any content area.
59+
Usage: Touch and drag to draw rectangular redaction overlays on any content area.
6160

6261
Process:
6362
- Selected content appears with a customizable overlay (default black)
@@ -73,7 +72,7 @@ The Page Redaction tool enables batch redaction of entire pages based on specifi
7372
![Page Redaction Tool](./redaction-annotations-images/page-redaction-annot.png)
7473

7574
Function: Redacts complete pages or page ranges with a single action
76-
Options Available:
75+
Options available:
7776
- Odd Pages: Redacts only odd-numbered pages (1, 3, 5, etc.)
7877
- Even Pages: Redacts only even-numbered pages (2, 4, 6, etc.)
7978
- Specific Page: Specify single pages, ranges (e.g., 1-5, 10-15), or comma-separated lists (e.g., 1,3,5-7)
@@ -91,7 +90,7 @@ The Redaction Properties tool allows customization of redaction appearance befor
9190
![Redaction Properties Mobile View](./redaction-annotations-images/redaction-properties-annot.png)
9291

9392
Function: Customize the visual appearance of redaction overlays and text replacement
94-
Customizable Properties:
93+
Customizable properties:
9594
- Fill Color: Change the redaction overlay color (default: black)
9695
- Outline Color: Set outline color for redaction boxes (optional)
9796
- Overlay Text: Add custom text to appear on redacted areas (e.g., "REDACTED", "CONFIDENTIAL")

Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/overview.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Redaction annotation in Typescript PDF Viewer | Syncfusion
4-
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion JavaScript PDF Viewer.
4+
description: Learn how to hide sensitive information with interactive and programmatic redaction using the Syncfusion TypeScript PDF Viewer.
55
platform: document-processing
66
control: PDF Viewer
77
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
1010

1111
# Redaction in JavaScript (ES6) PdfViewer
1212

13-
Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript 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 are used to hide confidential or sensitive information in a PDF. The Syncfusion JavaScript PDF Viewer (EJ2) enables marking regions or entire pages for redaction, customizing appearance, and permanently applying redaction them with a single action.
1414

1515
## Enable the redaction toolbar
1616

@@ -49,49 +49,47 @@ let viewer: PdfViewer = new PdfViewer({
4949
viewer.appendTo('#pdfViewer');
5050
```
5151

52-
N> Prerequisites: Add the PdfViewer control to your JavaScript application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
52+
N> Add the PdfViewer control to the JavaScript application and ensure the redaction feature is included in the installed package version. Once applied, redaction permanently removes the selected content.
5353

5454
![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)
5555

5656
## Add Redaction Annotations
5757

58-
You can mark specific content for redaction using the toolbar or through code.
58+
Mark specific content for redaction using the toolbar or programmatically.
5959

60-
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.
60+
Select the **Redaction tool** and draw over text or graphics to hide. Optionally add overlay text (for example, “Confidential”) and adjust style properties: fill color, border color, and opacity.
6161

6262
![Drawing a redaction region over page content](redaction-annotations-images/adding-redaction-annotation.png)
6363

6464
## Delete Redaction Annotations
6565

66-
Redaction annotations can be removed easily:
66+
Remove redaction annotations using the toolbar or keyboard shortcuts:
6767

68-
- Click the **Delete** button on the toolbar, or
68+
- Click the **Delete** button on the toolbar, or
6969
- Select the annotation and press the **Delete** key.
7070

7171
![Toolbar showing the Delete command for redaction](redaction-annotations-images/redaction-delete-icon.png)
7272

7373
## Redact Entire Pages
7474

75-
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.
75+
The viewer supports redacting entire pages that contain sensitive information. Use the built-in dialog to select specific pages, page ranges, or all pages, or invoke the same behavior programmatically.
7676

7777
![Toolbar showing the Redact Page option](redaction-annotations-images/redact-page-icon.png)
7878

7979
## Apply Redaction
8080

81-
Once annotations are added, you can permanently apply them to the document. This action cannot be undone.
81+
After adding redaction annotations, permanently apply them to the document using the **Apply Redaction** toolbar button or the corresponding API method.
8282

83-
Use the **Apply Redaction** button on the toolbar or call the API method:
84-
85-
- The button is disabled until at least one redaction annotation exists.
86-
- It becomes active when redaction annotations are present.
83+
- The **Apply Redaction** button remains disabled until at least one redaction annotation exists.
84+
- The button becomes enabled when redaction annotations are present.
8785

8886
![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png)
8987

90-
A confirmation dialog appears before applying redaction to ensure you acknowledge the irreversible nature of the process.
88+
A confirmation dialog appears before applying redaction to ensure acknowledgment of the irreversible action.
9189

9290
![Confirmation dialog for applying redaction](redaction-annotations-images/apply-redaction-dialog.png)
9391

94-
N> After redaction is applied, the original content cannot be recovered.
92+
N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.
9593

9694
## Comment Support
9795

Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/programmatic-support.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Programmatic support for redaction in JavaScript (ES6) PdfViewer
1111

12-
The Syncfusion JavaScript PDF Viewer (EJ2) 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.
12+
The Syncfusion TypeScript `PdfViewer` control 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.
1313

1414
## Enable the redaction toolbar
1515

@@ -82,7 +82,7 @@ viewer.annotationAdd = (args) => {
8282

8383
## Delete redaction annotations programmatically
8484

85-
Redaction annotations can be removed using the `deleteAnnotationById` event or by selecting and deleting them through code.
85+
Redaction annotations can be removed using the `deleteAnnotationById` method or by selecting and deleting them through code.
8686

8787
```html
8888
<button id="deleteAnnotationbyId">Delete Annotation By Id</button>
@@ -156,7 +156,7 @@ document.getElementById('redact').addEventListener('click', () => {
156156
});
157157
```
158158

159-
N> Applying redaction is irreversible. Once applied, the original content cannot be recovered.
159+
N> Applying redaction is irreversible. Before calling `redact()`, save or export a backup copy of the document; the original content cannot be recovered.
160160

161161
## Configure default redaction annotation properties
162162

@@ -182,7 +182,7 @@ viewer.redactionSettings= {
182182

183183
The redaction property panel allows users to update annotation properties through the UI. Programmatically, you can invoke the property panel by selecting an annotation and calling the relevant APIs. Properties such as overlay text, font style, and fill color can be updated directly in the panel.
184184

185-
![Redaction Property Panel](../redaction/redaction-annotations-images/redaction-property-panel-icon.png)
185+
![Redaction property panel showing overlay text and color options](../redaction/redaction-annotations-images/redaction-property-panel-icon.png)
186186

187187
## See also
188188

Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/search-redact.md

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

11-
# Search text and redact in JavaScript (ES6) PdfViewer
11+
# Search text and redact in JavaScript (ES6) PDF Viewer
1212

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.
1414

15-
N> Prerequisites: Add the PdfViewer control to your JavaScript 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 PDF Viewer control to your TypeScript application and ensure a document is loaded. Confirm the redaction feature is available in the viewer version in use and that text extraction is enabled (`isExtractText: true`). Redaction is permanent once applied.
1616

17-
## Steps to add Redaction annotations on search Text Bounds
17+
## Steps to add redaction annotations on search text bounds
1818

19-
**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample.
20-
21-
22-
**Step 2:** Use the following code-snippets to Add Redaction annotation on Search Text Bounds.
19+
**Step 1:** Follow the steps in [PDF Viewer - Getting started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a simple PDF Viewer sample.
2320

21+
**Step 2:** Use the following code-snippets to add Redaction annotation on search text bounds.
2422

2523
```html
2624
<button id="searchTextRedact">Search Text and Redact</button>

Document-Processing/PDF/PDF-Viewer/javascript-es6/Redaction/toolbar.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ documentation: ug
99

1010
# Redaction toolbar customization in TypeScript
1111

12-
The redaction toolbar in the Syncfusion JavaScript (ES6/TypeScript) PDF Viewer can be customized by rearranging existing items, hiding default items, or adding new ones. You can also place custom items at specific index positions among the existing toolbar items.
12+
The redaction toolbar in the Syncfusion TypeScript PDF Viewer can be customized by rearranging items, hiding default items, or adding custom items. Custom items can be inserted at specific index positions within the existing toolbar.
1313

1414
## Enable the redaction toolbar
1515

16-
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
16+
To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the `RedactionEditTool`.
1717

1818
The following example shows how to enable the redaction toolbar:
1919

@@ -54,17 +54,17 @@ Refer to the following image for the toolbar view:
5454

5555
## Show or hide the redaction toolbar
5656

57-
You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method.
57+
The redaction toolbar can be toggled using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method.
5858

5959
### Display the redaction toolbar using the toolbar icon
6060

61-
When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
61+
When `RedactionEditTool` is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
6262

6363
![Show redaction toolbar from the primary toolbar](../redaction/redaction-annotations-images/redaction-icon-toolbar.png)
6464

6565
### Display the redaction toolbar programmatically
6666

67-
You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`.
67+
Programmatic control is available via the viewer instance. For example, call `this.pdfViewer.toolbar.showRedactionToolbar(true)` to display the redaction toolbar, or `this.pdfViewer.toolbar.showRedactionToolbar(false)` to hide it.
6868

6969
The following example demonstrates toggling the redaction toolbar programmatically:
7070

0 commit comments

Comments
 (0)