Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ The Redaction Tool enables users to permanently mark and remove sensitive conten

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

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

## Adding Redaction in Mobile View

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Redaction in ASP.NET Core PdfViewer

Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion ASP.NET Core PDF Viewer lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action.
Redaction annotations hide confidential or sensitive information in a PDF. The Syncfusion ASP.NET Core PDF Viewer enables marking areas or entire pages for redaction, customizing their appearance, and permanently applying redactions.

## Enable the redaction toolbar

Expand Down Expand Up @@ -55,40 +55,40 @@ window.onload = function () {
{% endhighlight %}
{% endtabs %}

N> Prerequisites: Add the PdfViewer control to your ASP.NET Core application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
N> Prerequisites: Add the PdfViewer control to the ASP.NET Core application and confirm that the redaction feature is available in the used product version. Applying redaction permanently removes the selected content.

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

## Add Redaction Annotations

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

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

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

## Delete Redaction Annotations

Redaction annotations can be removed easily:
Remove redaction annotations by either:

- Click the **Delete** button on the toolbar, or
- Select the annotation and press the **Delete** key.
- Clicking the **Delete** button on the toolbar, or
- Selecting the annotation and pressing the **Delete** key.

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

## Redact Entire Pages

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.
Redact whole pages that contain sensitive information. Choose specific pages, page ranges, or redact all pages using the built‑in dialog, or perform the same action programmatically.

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

## Apply Redaction

Once annotations are added, you can permanently apply them to the document. This action cannot be undone.
After adding annotations, permanently apply them to the document. This action is irreversible.

Use the **Apply Redaction** button on the toolbar or call the API method:

- The button is disabled until at least one redaction annotation exists.
- The button remains disabled until at least one redaction annotation exists.
- It becomes active when redaction annotations are present.

![Toolbar showing the Apply Redaction button](redaction-annotations-images/redact-button-icon.png)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Programmatic support for redaction in ASP.NET Core PdfViewer

The Syncfusion ASP.NET Core 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.
The Syncfusion ASP.NET Core PDF Viewer provides APIs to add, update, delete, and apply redaction annotations programmatically. The viewer also supports page redaction, configuration of default properties, and interaction with the redaction property panel.

## Enable the redaction toolbar

Expand Down Expand Up @@ -324,5 +324,5 @@ The redaction property panel allows users to update annotation properties throug
* [Overview of Redaction](./overview)
* [Redaction UI interactions](./ui-interaction)
* [Redaction Toolbar](./toolbar)
* [Reaction in Mobile view](./mobile-view)
* [Redaction in Mobile view](./mobile-view)
* [Search Text and Redact](./search-redact)
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ domainurl: ##DomainURL##

# Search text and redact in ASP.NET Core PdfViewer

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.
Search for a keyword in the loaded PDF and automatically add redaction annotations for each match. The example below wires the `extractTextCompleted` event, triggers text extraction, performs a search, and adds redaction annotations for every result.

N> Prerequisites: Add the PdfViewer control to your ASP.NET Core 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.
N> Prerequisites: Add the PdfViewer control to the ASP.NET Core application and ensure a document is loaded. Confirm the redaction feature is available in the used product version. Applying redaction permanently removes the selected content.

## Steps to add Redaction annotations on search Text Bounds

Expand Down Expand Up @@ -111,7 +111,7 @@ N> Prerequisites: Add the PdfViewer control to your ASP.NET Core application and
- Ensure the PDF is fully loaded before triggering extraction and search.
- Bounds from search are in points (72 DPI). Convert to pixels (96 DPI) to align with annotation coordinates.
- Customize overlay text, colors, and typography as needed.
- 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.
- 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 the used product version.

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Redaction toolbar customization in ASP.NET Core

The redaction toolbar in the Syncfusion ASP.NET Core 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.
Customize the redaction toolbar by rearranging existing items, hiding default items, or adding custom items. Custom items can be inserted at specific index positions among existing toolbar items.

## Enable the redaction toolbar

Expand Down Expand Up @@ -60,17 +60,17 @@ Refer to the following image for the toolbar view:

## Show or hide the redaction toolbar

You can toggle the redaction toolbar either using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method.
Toggle the redaction toolbar using the built‑in toolbar icon or programmatically with the `showRedactionToolbar` method.

### Display the redaction toolbar using the toolbar icon

When **RedactionEditTool** is included in the toolbar settings, clicking the redaction icon in the primary toolbar will show or hide the redaction toolbar.
When `RedactionEditTool` is included in the toolbar settings, clicking the redaction icon in the primary toolbar shows or hides the redaction toolbar.

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

### Display the redaction toolbar programmatically

You can also control visibility through code by calling `viewer.toolbar.showRedactionToolbar(true/false)`.
Control visibility in code by calling `viewer.toolbar.showRedactionToolbar(true)` or `viewer.toolbar.showRedactionToolbar(false)`.

The following example demonstrates toggling the redaction toolbar programmatically:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

## Add redaction annotations from the toolbar

Use the redaction tool in the toolbar to draw over content that should be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties.
Use the redaction tool to draw over content to be hidden. After marking, an annotation can display overlay text (for example, “Confidential”) and can be styled using fill color and other properties.

![Drawing a redaction annotation on the page](redaction-annotations-images/adding-redaction-annotation.png)

Expand All @@ -37,7 +37,7 @@ After adding a redaction annotation, you can update its properties through the p

### Update using the property panel

When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets you customize text and styling. Changes are reflected instantly on the redaction mark.
When a redaction annotation is selected, a two‑tab property panel (General and Appearance) lets the user customize text and styling. Changes are reflected instantly on the redaction mark.

The property panel can be opened in two ways:

Expand All @@ -62,7 +62,7 @@ Use the General tab to define how the content will look after redaction. These s

![Fill Color in General Tab](redaction-annotations-images/after-redaction-fill-color.png)

Note: Hovering the mouse over a redaction annotation shows a preview of this final look. After you click Apply Redaction, these settings are flattened into the page and can’t be edited. Tip: Click Save in the dialog to keep your changes.
N> Hovering the mouse over a redaction annotation previews the final look. After clicking Apply Redaction, these settings are flattened into the page and cannot be edited. Tip: Click Save in the dialog to keep changes.

#### Appearance tab

Expand All @@ -72,7 +72,7 @@ Use the Appearance tab to style the redaction annotation itself (before applying
* Outline Color – Optional border for the annotation.
* Fill Opacity – Controls how transparent the annotation appears during review.

Note: The Appearance tab affects only the temporary annotation. The final look after applying redaction comes from the General tab settings.
N> The Appearance tab affects only the temporary annotation. The final look after applying redaction uses the General tab settings.

![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png)

Expand Down
51 changes: 33 additions & 18 deletions Document-Processing/PDF/PDF-Viewer/asp-net-core/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ documentation: ug
---
# Accessibility in Syncfusion PDF Viewer component

The PDF Viewer component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also integrates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used for accessibility evaluation.
The PDF Viewer component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It implements [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) to ensure comprehensive accessibility support for all users.

## Accessibility compliance

Below is an outline of the accessibility compliance for the PDF Viewer component:

Expand Down Expand Up @@ -58,7 +60,9 @@ Below is an outline of the accessibility compliance for the PDF Viewer component

## Keyboard interaction

The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it easy for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the PDF Viewer component:
The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users of assistive technologies and those who rely solely on keyboard navigation. The built-in keyboard shortcuts support common operations such as document navigation, zooming, searching, text selection, and annotation management.

### Built-in keyboard shortcuts

| **Press (Windows)** | **Press (Macintosh)** | **To do this** |
| --- | --- | --- |
Expand Down Expand Up @@ -93,15 +97,30 @@ The PDF Viewer component follows the [keyboard interaction](https://www.w3.org/W
| <kbd>Shift + H</kbd> | <kbd>Shift + H</kbd> | Enable pan mode |
| <kbd>Shift + V</kbd> | <kbd>Shift + V</kbd> | Enable text selection mode |

The current implementation of our PDF Viewer includes keyboard shortcuts for functions such as scrolling, zooming, text search, printing, and annotation deletion.
## Custom keyboard commands

In addition to the built-in keyboard shortcuts, the PDF Viewer component supports custom keyboard commands, allowing developers to define application-specific keyboard gestures and actions. This feature enhances user experience by enabling efficient navigation and interaction tailored to specific workflows.

### Configuring custom keyboard commands

Custom keyboard commands are configured through the **CommandManager** class, which manages keyboard events and executes defined commands. The CommandManager accepts a collection of custom keyboard commands via the `keyboardCommand` parameter, where each command specifies a unique name and its associated keyboard gesture.

To enhance user experience, we are adding additional keyboard shortcuts for actions like navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements (outlines, annotations, bookmarks, and thumbnails).
Each keyboard gesture consists of two components:
- **Key**: The primary key (represented using the `PdfKeys` enum)
- **Modifier keys**: Optional modifier keys (Shift, Ctrl, Alt, or Meta combinations)

To support these enhancements, we are introducing a new class called **commandManager**. This class handles custom commands triggered by specific key gestures, which are defined by users and executed accordingly.
### Modifier keys reference

The **commandManager** includes a parameter called `keyboardCommand` (which replaces `Commands`). This parameter holds a collection of custom keyboard commands specified by users. Each custom command is represented by a `KeyboardCommand` class, containing the `name` of the command and its associated `gesture` (keyboard combination).
The following modifier keys can be combined with primary keys:

Additionally, we are introducing an `EventCallback` to the `keyboardCustomCommands` parameter for the `CommandManager`. This will handle keyboard events and trigger appropriate methods when specific key combinations are pressed.
- **Ctrl** (Control key): represented by the value `1`
- **Alt** (Alt key): represented by the value `2`
- **Shift** (Shift key): represented by the value `4`
- **Meta** (Command key on macOS or Windows key on Windows): represented by the value `8`

Multiple modifiers can be combined using the bitwise OR operator (`|`).

### Example: Defining custom keyboard commands

{% tabs %}
{% highlight cshtml tabtitle="Standalone" %}
Expand Down Expand Up @@ -196,21 +215,17 @@ Additionally, we are introducing an `EventCallback` to the `keyboardCustomComman
{% endhighlight %}
{% endtabs %}

Each `keyboardCommand` object consists of a name property, specifying the `name` of the `custom command`, and a `gesture property`, defining the key gesture associated with the command.

For example, the first command named `customCopy` is associated with the **G** key and requires both the **Shift** and **Alt** modifier keys to be pressed simultaneously.

Additionally, there's an explanation of the key modifiers used in the gestures:
Each `keyboardCommand` object consists of the following properties:

* Ctrl corresponds to the Control key, represented by the value `1`.
* Alt corresponds to the Alt key, represented by the value `2`.
* Shift corresponds to the Shift key, represented by the value `4`.
* Meta corresponds to the Command key on macOS or the Windows key on Windows, represented by the value `8`.
- **name**: The identifier for the custom command (e.g., `customCopy`, `customPaste`)
- **gesture**: An object containing the key binding configuration:
- **pdfKeys**: The primary key from the `PdfKeys` enum
- **modifierKeys**: A combination of modifier keys using the `ModifierKeys` enum with bitwise OR operations

This setup allows users to perform custom actions within the PDF viewer by pressing specific key combinations, enhancing the user experience and providing more efficient navigation and interaction options.
In the example above, the `customCopy` command is triggered by pressing **G** in combination with **Shift** and **Alt** keys. The gesture definition allows multiple modifier keys to be combined, enabling flexible keyboard accessibility patterns.

## Ensuring accessibility

The PDF Viewer component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
The PDF Viewer component's accessibility compliance is validated through automated testing using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools.

N> Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/asp-net-core/getting-started) to create a simple PDF Viewer sample.
Loading