999358-ug: Added proper code example and content.

Author: sameerkhan001

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-angular.md

@@ -44,6 +44,12 @@ All the available JS 2 packages are published in `npmjs.com` registry.
 npm install @syncfusion/ej2-pdf --save
 ```
 N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
+* Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command:
+```bash
+cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg
+```
+* Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF.
+* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type.
 
 ## Create a PDF document using TypeScript
 

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-core.md

@@ -39,7 +39,7 @@ N> Check out the following topics for including script references in an ASP.NET
 *   [CDN](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#cdn-reference)
 *   [NPM Package](https://ej2.syncfusion.com/aspnetcore/documentation/common/adding-script-references#node-package-manager-npm)
 *   [CRG](https://ej2.syncfusion.com/aspnetcore/documentation/common/custom-resource-generator)
-N> And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`.
+And ensure the application includes an `openjpeg` folder under `wwwroot` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`.
 
 Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
 

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-asp-net-mvc.md

@@ -36,7 +36,11 @@ Step 5: **Add script reference** : Add the required scripts using the CDN inside
 {% endhighlight %}
 {% endtabs %}
 
-N> And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`.
+N> Check out the following topics for including script references in an ASP.NET MVC application to enable PDF creation using the Syncfusion<sup>&reg;</sup> JavaScript PDF library:
+*   [CDN](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references)
+*   [NPM Package](https://ej2.syncfusion.com/aspnetmvc/documentation/common/adding-script-references#node-package-manager-npm)
+*   [CRG](https://ej2.syncfusion.com/aspnetmvc/documentation/common/custom-resource-generator)
+And ensure the application includes an `openjpeg` folder under `Scripts` (or a publicly accessible static path). This folder must contain the `openjpeg.js` and `openjpeg.wasm` files, along with the PDF file to extract images. Keep these in the same static content area as `ej2.min.js`.
 
 Step 6: **Create a PDF document** : Add the script in `~/Views/Home/Index.cshtml` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
 

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-javascript.md

@@ -39,6 +39,11 @@ Step 3: Create a HTML page (index.html) in `my-app` location and add the CDN lin
 {% endhighlight %}
 {% endtabs %}
 
+N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following:
+*   `openjpeg.js`
+*   `openjpeg.wasm`
+Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading.
+
 Step 4: **Create a PDF document** : Add the script in `index.html` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
 
 {% tabs %}
@@ -73,12 +78,6 @@ Step 4: **Create a PDF document** : Add the script in `index.html` by creating a
 {% endhighlight %}
 {% endtabs %}
 
-N> For the JavaScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following:
-*   `openjpeg.js`
-*   `openjpeg.wasm`
-
-Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading.
-
 By executing the program, you will get the PDF document as follows.
 
 ![Output PDF document](Getting_started_images/Output.png)

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-react.md

@@ -24,13 +24,12 @@ All the available JS 2 packages are published in `npmjs.com` registry.
 npm install @syncfusion/ej2-pdf --save
 ```
 N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-
 * Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command:
 ```bash
 cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/openjpeg
 ```
 * Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF.
-* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section.
+* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type.
 
 **Create a PDF document** : Add the script in `App.jsx` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
 

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-typescript.md

@@ -14,6 +14,21 @@ The Syncfusion<sup>&reg;</sup> TypeScript PDF library is used to create, read, a
 
 This guide explains how to integrate the TypeScript PDF library into an TypeScript application.
 
+## Installing Syncfusion<sup>&reg;</sup> JavaScript PDF package
+
+All the available JS 2 packages are published in `npmjs.com` registry.
+
+* To install PDF component, use the following command.
+
+```bash
+npm install @syncfusion/ej2-pdf --save
+```
+N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
+For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following:
+*   `openjpeg.js`
+*   `openjpeg.wasm`
+Along with the PDF file from which you want to extract images.
+
 ## Dependencies
 
 The following list of dependencies are required to use the `TypeScript PDF library` component in your application.
@@ -40,12 +55,6 @@ The following list of dependencies are required to use the `TypeScript PDF libra
 {% endhighlight %}
 {% endtabs %}
 
-N> For the TypeScript platform, place the **openjpeg** folder in the same location as your `index.html` file. Ensure that your application includes an `openjpeg` folder under `Scripts` (or any publicly accessible static path). This folder must contain the following:
-*   `openjpeg.js`
-*   `openjpeg.wasm`
-
-Along with the PDF file from which you want to extract images. Keep these files in the same static content area as `ej2.min.js` to ensure proper loading.
-
 * Include the following namespaces in `index.ts` file.
 
 {% tabs %}

Document-Processing/PDF/PDF-Library/javascript/Create-PDF-document-vue.md

@@ -48,13 +48,12 @@ All the available JS 2 packages are published in `npmjs.com` registry.
 npm install @syncfusion/ej2-pdf --save
 ```
 N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
-
 * Copy the contents of the openjpeg folder from ./node_modules/@syncfusion/ej2-pdf-data-extract/dist to the public directory using the command:
 ```bash
 cp -R ./node_modules/@syncfusion/ej2-pdf-data-extract/dist/openjpeg public/js/openjpeg
 ```
 * Confirm that there is an 'openjpeg' directory within your public directory, if you extracting images from PDF.
-* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section.
+* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type.
 
 * **Create a PDF document** : Add the script in `App.vue` by creating a button and attaching a click event that uses the JavaScript PDF API to generate a PDF document.
 

Document-Processing/PDF/PDF-Library/javascript/Redaction.md

@@ -9,11 +9,11 @@ documentation: UG
 
 Redacting a PDF is the process of permanently removing sensitive or confidential information from PDF documents. Syncfusion<sup>&reg;</sup> PDF library provides an easy way to redact PDF documents. 
 
-N> For data extraction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on.
+N> For redaction features, you need to install the `@syncfusion/ej2-pdf-data-extract` package as an add-on. Please verify the platform's actual root directory where the `openjpeg` file is extracted. Depending on the platform, the root path may vary. Check which root folder is being used by reviewing the path referenced in the [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/create-pdf-document-asp-net-core) page.
 
 ## Removing sensitive content from the PDF document
 
-Redaction permanently removes confidential or sensitive information from a PDF. The `PdfRedactionAnnotation` class allows you to define areas to redact, ensuring the underlying text or image data is completely deleted from the document.
+Redaction permanently removes confidential or sensitive information from a PDF. The `PdfRedactor` and `PdfRedactionRegion` classes allow you to mark specific areas and apply irreversible redaction to the document.
 
 {% tabs %}
 {% highlight typescript tabtitle="TypeScript" %}
@@ -27,7 +27,6 @@ let redactor: PdfRedactor = new PdfRedactor(document);
 // Add redactions to the collection
 let redactions: PdfRedactionRegion[] = [];
 redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
-redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0}));
 redactor.add(redactions);
 // Apply redactions on the PDF document
 redactor.redact();
@@ -45,7 +44,6 @@ var redactor = new ej.pdfdataextract.PdfRedactor(document);
 // Add redactions to the collection
 var redactions = [];
 redactions.push(new PdfRedactionRegion(0, {x: 10, y: 10, width: 100, height: 50}));
-redactions.push(new PdfRedactionRegion(2, {x: 10, y: 10, width: 100, height: 50}, true, {r: 255, g: 0, b: 0}));
 redactor.add(redactions);
 // Apply redactions on the PDF document
 redactor.redact();
@@ -67,6 +65,8 @@ import { PdfRedactor, PdfRedactionRegion} from '@syncfusion/ej2-pdf-data-extract
 
 // Load an existing PDF document
 let document: PdfDocument = new PdfDocument(data);
+// Add redactions to the collection
+let redactions: PdfRedactionRegion[] = [];
 // Initialize a new instance of the `PdfRedactor` class
 let redactor: PdfRedactor = new PdfRedactor(document);
 // Initialize a new instance of the `PdfRedactionRegion` class.
@@ -86,6 +86,8 @@ document.destroy();
 {% highlight javascript tabtitle="JavaScript" %}
 // Load an existing PDF document
 var document = new ej.pdf.PdfDocument(data);
+// Add redactions to the collection
+var redactions = [];
 // Initialize a new instance of the `PdfRedactor` class
 var redactor = new ej.pdfdataextract.PdfRedactor(document);
 // Initialize a new instance of the `PdfRedactionRegion` class.
@@ -104,54 +106,76 @@ document.destroy();
 {% endhighlight %}
 {% endtabs %}
 
-## Redaction appearance fill color
+## Text appearance on the redacted area
 
-Customize the appearance of the redacted area by applying specific fill colors. This helps maintain a consistent design or highlight redacted sections in a visually appealing way.
+Customize the redacted region by drawing text or graphics over it, using `PdfRedactionRegion` and `PdfRedactor` to define the area and apply a custom visual appearance to the redaction.
 
 {% tabs %}
 {% highlight typescript tabtitle="TypeScript" %}
 import { PdfDocument } from '@syncfusion/ej2-pdf';
 import { PdfRedactor, PdfRedactionRegion } from '@syncfusion/ej2-pdf-data-extract';
 
 // Load an existing PDF document
-let document: PdfDocument = new PdfDocument(data, password);
+let document = new PdfDocument(data);
 // Add redactions to the collection
-let redactions: PdfRedactionRegion[] = [];
-// Initialize a new instance of the `PdfRedactor` class
-let redactor: PdfRedactor = new PdfRedactor(document);
-// Initialize a new instance of the `PdfRedactionRegion` class.
-let redaction: PdfRedactionRegion = new PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90});
-// Sets the fill color used to fill the redacted area.
-redaction.fillColor = {r: 255, g: 0, b: 0};
+let redactions = [];
+let region = { x: 40, y: 43.620000000000005, width: 80, height: 20 };
+// Initialize a new redaction region with custom appearance
+let redaction = new PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true);
+let font = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+redaction.appearance.normal.graphics.drawString(
+  'Redacted Text',
+  font,
+  { x: 0, y: 0, width: 80, height: 20 },
+  new PdfBrush({ r: 255, g: 0, b: 0 })
+);
 redactions.push(redaction);
-// Add redactions with specified options.
+// Add another redaction region (example region coordinates)
+redaction = new PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true);
+region = { x: 40, y: 43.620000000000005, width: 80, height: 20 };
+redactions.push(redaction);
+// Initialize a new instance of the PdfRedactor class
+let redactor = new PdfRedactor(document);
+// Add redactions with specified options
 redactor.add(redactions);
 // Apply redactions on the PDF document
 redactor.redact();
 // Save the document
 document.save('output.pdf');
 // Destroy the document
 document.destroy();
+
 {% endhighlight %}
 {% highlight javascript tabtitle="JavaScript" %}
-// Load an existing PDF document
-var document = new ej.pdf.PdfDocument(data, password);
-// Add redactions to the collection
+
+// Load an existing PDF document 
+var document = new ej.pdf.PdfDocument(data);
+// Prepare redactions collection
 var redactions = [];
-// Initialize a new instance of the `PdfRedactor` class
-var redactor = new ej.pdfdataextract.PdfRedactor(document);
-// Initialize a new instance of the `PdfRedactionRegion` class.
-var redaction = new ej.pdfdataextract.PdfRedactionRegion(0, {x: 40, y: 41.809, width: 80, height: 90});
-// Sets the fill color used to fill the redacted area.
-redaction.fillColor = {r: 255, g: 0, b: 0};
+// Example region coordinates (page 0)
+var region = { x: 40, y: 43.62, width: 80, height: 20 };
+// Create a redaction region with a custom appearance (draw "Redacted Text" in red)
+var redaction = new ej.pdf.PdfRedactionRegion(0, { x: 0, y: 0, width: 80, height: 20 }, true);
+var font = document.embedFont(PdfFontFamily.helvetica, 10, PdfFontStyle.regular);
+// Draw custom appearance on the redaction overlay
+redaction.appearance.normal.graphics.drawString(
+  'Redacted Text',
+  font,
+  { x: 0, y: 0, width: 80, height: 20 },
+  new ej.pdf.PdfBrush({ r: 255, g: 0, b: 0 })
+);
 redactions.push(redaction);
-// Add redactions with specified options.
+// Add another redaction region using the specified coordinates on page 0
+redaction = new ej.pdf.PdfRedactionRegion(0, { x: region.x, y: region.y, width: region.width, height: region.height }, true);
+redactions.push(redaction);
+// Initialize redactor
+var redactor = new ej.pdf.PdfRedactor(document);
+// Add redactions and apply them
 redactor.add(redactions);
-// Apply redactions on the PDF document
 redactor.redact();
-// Save the document
+// Save and dispose
 document.save('output.pdf');
-// Destroy the document
 document.destroy();
+
 {% endhighlight %}
 {% endtabs %}