997555: Updated Review Changes for Redaction in PDF Viewer

Document-Processing/PDF/PDF-Viewer/angular/Redaction/overview.md

@@ -12,6 +12,95 @@ domainurl: ##DomainURL##
 
 Redaction annotations are used to hide confidential or sensitive information in a PDF. The Syncfusion Angular PDF Viewer (EJ2) lets you mark areas or entire pages for redaction, customize their appearance, and permanently apply them with a single action.
 
+## Enable the redaction toolbar
+
+To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
+
+The following example shows how to enable the redaction toolbar:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+  PdfViewerComponent,
+  LinkAnnotationService,
+  BookmarkViewService,
+  MagnificationService,
+  ThumbnailViewService,
+  ToolbarService,
+  NavigationService,
+  AnnotationService,
+  TextSearchService,
+  TextSelectionService,
+  PrintService,
+  FormFieldsService,
+  FormDesignerService,
+  PageOrganizerService,
+  ToolbarSettingsModel
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="content-wrapper">
+      <ejs-pdfviewer
+        #pdfviewer
+        id="pdfViewer"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="documentPath"
+        [toolbarSettings]="toolbarSettings"
+        style="height:640px;display:block">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  providers: [
+    LinkAnnotationService,
+    BookmarkViewService,
+    MagnificationService,
+    ThumbnailViewService,
+    ToolbarService,
+    NavigationService,
+    AnnotationService,
+    TextSearchService,
+    TextSelectionService,
+    PrintService,
+    FormFieldsService,
+    FormDesignerService,
+    PageOrganizerService
+  ]
+})
+export class AppComponent {
+  @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent;
+
+  // Standalone mode (CDN) – keep this version aligned with your package
+  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+  // Matches your JS toolbar configuration, with RedactionEditTool included
+  public toolbarSettings: ToolbarSettingsModel = {
+    toolbarItems: [
+      'OpenOption',
+      'UndoRedoTool',
+      'PageNavigationTool',
+      'MagnificationTool',
+      'PanTool',
+      'SelectionTool',
+      'CommentTool',
+      'SubmitForm',
+      'AnnotationEditTool',
+      'RedactionEditTool',   // Redaction entry in the primary toolbar
+      'FormDesignerEditTool',
+      'SearchOption',
+      'PrintOption',
+      'DownloadOption'
+    ]
+  };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 N> Prerequisites: Add the PdfViewer control to your Angular application and ensure the redaction feature is available in the version you are using. Once applied, redaction permanently removes the selected content.
 
 ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)

Document-Processing/PDF/PDF-Viewer/angular/Redaction/programmatic-support.md

@@ -11,6 +11,95 @@ documentation: ug
 
 The Syncfusion Angular 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.
 
+## Enable the redaction toolbar
+
+To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
+
+The following example shows how to enable the redaction toolbar:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+  PdfViewerComponent,
+  LinkAnnotationService,
+  BookmarkViewService,
+  MagnificationService,
+  ThumbnailViewService,
+  ToolbarService,
+  NavigationService,
+  AnnotationService,
+  TextSearchService,
+  TextSelectionService,
+  PrintService,
+  FormFieldsService,
+  FormDesignerService,
+  PageOrganizerService,
+  ToolbarSettingsModel
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <div class="content-wrapper">
+      <ejs-pdfviewer
+        #pdfviewer
+        id="pdfViewer"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="documentPath"
+        [toolbarSettings]="toolbarSettings"
+        style="height:640px;display:block">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  providers: [
+    LinkAnnotationService,
+    BookmarkViewService,
+    MagnificationService,
+    ThumbnailViewService,
+    ToolbarService,
+    NavigationService,
+    AnnotationService,
+    TextSearchService,
+    TextSelectionService,
+    PrintService,
+    FormFieldsService,
+    FormDesignerService,
+    PageOrganizerService
+  ]
+})
+export class AppComponent {
+  @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent;
+
+  // Standalone mode (CDN) – keep this version aligned with your package
+  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+  // Matches your JS toolbar configuration, with RedactionEditTool included
+  public toolbarSettings: ToolbarSettingsModel = {
+    toolbarItems: [
+      'OpenOption',
+      'UndoRedoTool',
+      'PageNavigationTool',
+      'MagnificationTool',
+      'PanTool',
+      'SelectionTool',
+      'CommentTool',
+      'SubmitForm',
+      'AnnotationEditTool',
+      'RedactionEditTool',   // Redaction entry in the primary toolbar
+      'FormDesignerEditTool',
+      'SearchOption',
+      'PrintOption',
+      'DownloadOption'
+    ]
+  };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Add redaction annotations programmatically
 
 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.

Document-Processing/PDF/PDF-Viewer/angular/Redaction/ui-interaction.md

@@ -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, you can change overlay text, font style, fill color, and other properties. Updates are applied immediately in the viewer.
+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.
 
 The property panel can be opened in two ways:
 
@@ -47,6 +47,45 @@ The property panel can be opened in two ways:
 * By right‑clicking (or long‑pressing) the annotation and choosing **Properties** from the context menu.  
 ![Redaction Property Panel via Context Menu](redaction-annotations-images/redaction-property-panel-via-context-menu.png)
 
+#### General tab
+
+Use the General tab to define how the content will look after redaction. These settings control the final, burned‑in result and provide a live preview on hover.
+
+* Use Overlay Text – Enable to show text (for example, Confidential) over the redacted area.
+* Overlay Text – Enter the text to display.
+* Repeat Overlay Text – Tile the text to cover the whole region.
+
+![Overlay Text Options](redaction-annotations-images/redaction-overalytext.png)
+
+* Font options – Choose family, size, color, and alignment for the overlay text.
+* Fill Color – Select the color that will fill the region after redaction is applied.
+
+![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.
+
+#### Appearance tab
+
+Use the Appearance tab to style the redaction annotation itself (before applying). These options help you see and manage the box on the page but do not change the final redacted output.
+
+* Fill Color – Sets the annotation’s fill while you review and move/resize it.
+* 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.
+
+![Appearance Tab Settings](redaction-annotations-images/redaction-annotation-appearance.png)
+
+### What changes after applying redaction?
+
+When you click Apply Redaction:
+
+* The selected content is permanently removed from the page.
+* The redaction region is flattened into the page with a solid fill that uses the General tab Fill Color.
+* If overlay text was enabled, the text is burned into the page. If Repeat Overlay Text was enabled, the text is tiled across the region.
+* All properties become read‑only. You cannot edit overlay text, fill color, outline, or opacity after applying. Set the final look in the General tab and use the Appearance tab only to style the annotation before you apply.
+
+
 ## Delete redaction annotations
 
 Delete redaction annotations using any of the following:

Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/overview.md

@@ -12,6 +12,49 @@ domainurl: ##DomainURL##
 
 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.
 
+## Enable the redaction toolbar
+
+To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
+
+The following example shows how to enable the redaction toolbar:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+<div class="text-center">
+    <ejs-pdfviewer
+        id="pdfViewer"
+        style="height:640px; display:block"
+        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
+    </ejs-pdfviewer>
+</div>
+<script type="text/javascript">
+window.onload = function () {
+        var viewer = document.getElementById('pdfViewer').ej2_instances[0];
+        // Include RedactionEditTool in the primary toolbar
+        viewer.toolbarSettings = {
+            toolbarItems: [
+                'OpenOption',
+                'UndoRedoTool',
+                'PageNavigationTool',
+                'MagnificationTool',
+                'PanTool',
+                'SelectionTool',
+                'CommentTool',
+                'SubmitForm',
+                'AnnotationEditTool',
+                'RedactionEditTool',
+                'FormDesignerEditTool',
+                'SearchOption',
+                'PrintOption',
+                'DownloadOption'
+            ]
+        };
+    }
+</script>
+{% 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.
 
 ![Toolbar with the Redaction tool highlighted](redaction-annotations-images/redaction-icon-toolbar.png)

Document-Processing/PDF/PDF-Viewer/asp-net-core/Redaction/programmatic-support.md

@@ -11,6 +11,49 @@ documentation: ug
 
 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.
 
+## Enable the redaction toolbar
+
+To enable the redaction toolbar, configure the `toolbarSettings.toolbarItems` property of the PdfViewer instance to include the **RedactionEditTool**.
+
+The following example shows how to enable the redaction toolbar:
+
+{% tabs %}
+{% highlight cshtml tabtitle="Standalone" %}
+<div class="text-center">
+    <ejs-pdfviewer
+        id="pdfViewer"
+        style="height:640px; display:block"
+        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2-pdfviewer-lib"
+        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
+    </ejs-pdfviewer>
+</div>
+<script type="text/javascript">
+window.onload = function () {
+        var viewer = document.getElementById('pdfViewer').ej2_instances[0];
+        // Include RedactionEditTool in the primary toolbar
+        viewer.toolbarSettings = {
+            toolbarItems: [
+                'OpenOption',
+                'UndoRedoTool',
+                'PageNavigationTool',
+                'MagnificationTool',
+                'PanTool',
+                'SelectionTool',
+                'CommentTool',
+                'SubmitForm',
+                'AnnotationEditTool',
+                'RedactionEditTool',
+                'FormDesignerEditTool',
+                'SearchOption',
+                'PrintOption',
+                'DownloadOption'
+            ]
+        };
+    }
+</script>
+{% endhighlight %}
+{% endtabs %}
+
 ## Add redaction annotations programmatically
 
 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.