984540: JS how-to module documentation revamp

Author: BalajiLoganathanSF4826

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-annotation-in-text-search-js.md

@@ -1,25 +1,22 @@
 ---
 layout: post
-title: Add Annotation in Text Search in JavaScript PdfViewer | Syncfusion
-description: Learn how to add rectangle annotations using search text bounds in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Add rectangle annotation from textSearch in JavaScript PDF Viewer | Syncfusion
+description: Learn to add rectangle annotations using text search bounds in the JavaScript PDF Viewer component, including initialization and search controls.
 platform: document-processing
 control: PDF Viewer
-publishingplatform: Javascript
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Add Rectangle Annotations Using Search Text Bounds in PDF Viewer
+# Add rectangle annotations using text search bounds in PDF Viewer
 
-## Overview
+A concise guide to adding rectangle annotations at highlighted text search results in the JavaScript PDF Viewer to visually emphasize matches and improve readability.
 
-This guide demonstrates how to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. This technique is useful for emphasizing search results with visual markers in annotation-supported applications.
-
-## Steps to Add Rectangle Annotations on Search Result Highlight
+## Steps to add rectangle annotations on search result highlight
 
 **Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started) to create a simple PDF Viewer sample.
 
-**Step 2:** Initialize the PDF Viewer with Required Modules
+**Step 2:** Initialize the PDF Viewer with the required modules
 
 ```js
 var pdfviewer = new ej.pdfviewer.PdfViewer({
@@ -31,9 +28,9 @@ ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearc
 pdfviewer.appendTo('#PdfViewer');
 ```
 
-**Step 3:** Implement code blocks to automatically add Rectangle Annotation on Search Result Highlight
+**Step 3:** Add a rectangle annotation when a search result is highlighted
 
-Define a callback function for the `textSearchHighlight` event to add rectangle annotations
+Define a callback for the `textSearchHighlight` event to add a rectangle annotation at each match.
 
 ```js
 // Highlight event handler for text search, which adds a rectangle annotation where the text is found
@@ -50,17 +47,17 @@ pdfviewer.textSearchHighlight = function(args){
 }
 ```
 
-**Step 3:** Add Search Controls
+**Step 4:** Add search controls
 
-Ensure you have the appropriate HTML buttons for text search operations
+Ensure that the HTML includes buttons for text search operations.
 
 ```html
 <button id="searchText">Search</button>
 <button id="searchNext">Next</button>
 <button id="searchCancel">Cancel</button>
 ```
 
-Use the following JavaScript to handle search controls:
+Use the following JavaScript code to handle search controls:
 
 ```js
 // Event listener for initiating a search
@@ -79,6 +76,6 @@ document.getElementById("searchCancel").addEventListener("click", function() {
 });
 ```
 
-By following this guide, you will enable the PDF Viewer to add rectangle annotations at search result locations, thus increasing the visibility of search results in your application.
+Following these steps enables the PDF Viewer to add rectangle annotations at search result locations, improving the visibility of matches.
 
 [View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/)

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-header-value.md

@@ -1,19 +1,17 @@
 ---
 layout: post
-title: Add header value in Javascript Pdfviewer control | Syncfusion
-description: Learn here all about Add header value in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Add header values to AJAX requests in JavaScript PDF Viewer | Syncfusion
+description: Learn how to include custom headers in PDF Viewer AJAX requests using ajaxRequestSettings and ajaxHeaders in the JavaScript PDF Viewer component.
 platform: document-processing
-control: Add header value
-publishingplatform: Javascript
+control: PDF Viewer
 documentation: ug
-domainurl: ##DomainURL##
 ---
 
-# Add header value in Javascript Pdfviewer control
+# Add header values in the JavaScript PDF Viewer
 
-To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request.
+Use the ajaxHeaders property in the PDF Viewer’s [ajaxRequestSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) to include custom headers with each AJAX request.
 
-Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer:
+Example: Add a custom Authorization header using ajaxRequestSettings
 
 ```ts
 
@@ -31,4 +29,5 @@ viewer.ajaxRequestSettings = {
 
 ```
 
-Find the sample [how to add custom headers in AjaxRequestSettings](https://stackblitz.com/edit/typescript-nv1way?file=index.ts)
+Sample: How to add custom headers using ajaxRequestSettings
+[StackBlitz example](https://stackblitz.com/edit/typescript-nv1way?file=index.ts)

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-new-page-to-the-pdf-document.md

@@ -1,23 +1,22 @@
 ---
 layout: post
-title: Add new page to the pdf document in Javascript Pdfviewer control | Syncfusion
-description: Learn here all about Add new page to the pdf document in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Add a new page to a PDF document in JavaScript PDF Viewer control | Syncfusion
+description: Learn how to append a new page to a loaded PDF document in the Syncfusion JavaScript PDF Viewer control using the PDF library service.
 platform: document-processing
-control: Add new page to the pdf document
-publishingplatform: Javascript
+control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Add new page to the pdf document in Javascript Pdfviewer control
+# Add a new page to a PDF document in JavaScript PDF Viewer control
 
-The PDF Viewer library allows you to add a new page to the PDF document using the PDF library.
+The JavaScript PDF Viewer library can append a blank page to any loaded PDF document through the accompanying PDF library service.
 
-**Step 1:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) to create a simple PDF Viewer sample.
+**Step 1:** Follow the guidance in the [Getting started with the JavaScript PDF Viewer](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/getting-started/) article to configure a working sample.
 
-**Step 2:** Follow the steps provided in the [link](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service/) to create the PDF Viewer web service.
+**Step 2:** Complete the web service setup by using this [guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es5/how-to/create-pdfviewer-service/).
 
-**Step 3:** Add the following code sample in the PDF Viewer controller code to add a new page in the PDF document using the PDF library.
+**Step 3:** Add the following controller action to insert a new page into the loaded PDF document before returning it to the viewer.
 
 ```javascript
 
@@ -64,4 +63,4 @@ public IActionResult Load([FromBody] Dictionary<string, string> jsonObject)
 }
 ```
 
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20new%20page%20to%20the%20PDF%20document%20using%20PDF%20library)
+[View the sample on GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20new%20page%20to%20the%20PDF%20document%20using%20PDF%20library)

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/add-save-button-js.md

@@ -1,23 +1,22 @@
 ---
 layout: post
-title: Add Save button in Javascript Pdfviewer control | Syncfusion
-description: Learn here all about How to add save button in Toolbar in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Add Save button to the built-in toolbar in JavaScript PDF Viewer | Syncfusion
+description: Learn how to add, show, hide, enable, and disable a custom Save button in the built-in toolbar of the JavaScript PDF Viewer component.
 platform: document-processing
 control: Toolbar
-publishingplatform: Javascript
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Add Save button in Built-In Toolbar
+# Add a Save button to the built-in toolbar
 
-PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.
+PDF Viewer supports customizing toolbar items, including adding, showing, hiding, enabling, and disabling items.
 
-* Save button - `Save` button-item can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customToolbarItem/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property. Newly added save button-item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs/).
+- Save button: The Save button can be defined using [CustomToolbarItemModel](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customToolbarItem/) and included alongside existing items via [ToolbarSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/). Handle the click action using [`toolbarclick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs/).
 
-* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarItem/).
+- Show or hide: The Save button can be shown or hidden using [ToolbarSettings](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/). Predefined items are listed under [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarItem/).
 
-* Enable, Disable -  `Save` button-item can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#enabletoolbaritem)
+- Enable or disable: The Save button can be enabled or disabled using [`enabletoolbaritem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#enabletoolbaritem).
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
@@ -79,35 +78,33 @@ function OnCreateSearch() {
 {% endhighlight %}
 {% endtabs %}
 
+N> Default toolbar items: ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
 
-N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
+### Align property
 
-### Align Property
+Specifies the alignment of the Save button within the toolbar.
 
-The align property is used to specify the alignment of a `save` button-item within the toolbar.
+- Left: Aligns the item to the left side of the toolbar.
+- Right: Aligns the item to the right side of the toolbar.
 
-`Left`: Aligns the item to the left side of the toolbar.
-`Right`: Aligns the item to the right side of the toolbar.
+### Tooltip property
 
-### Tooltip Property
+Sets the tooltip text for the Save button. The tooltip provides additional information on hover.
 
-The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item.
+### CssClass property
 
-### CssClass Property
+Applies custom CSS classes to the Save button for styling.
 
-The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item.
+### Prefix property
 
-### Prefix Property
+Sets the CSS class or icon to add as a prefix to the Save button content.
 
-The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the `save` button-item.
+### ID property
 
-### ID Property
+The id property within a CustomToolbarItemModel is required and uniquely identifies each toolbar item for configuration and interaction.
 
-The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions.
+When defining or customizing toolbar items, assign a specific, descriptive id to each item. These properties are commonly used when defining custom toolbar items with `CustomToolbarItemModel` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings` property, include these properties to customize appearance and behavior.
 
-When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
-These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item.
-
-N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference.
+N> When customizing the Save button, icons or text can be used based on design preference.
 
 [View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20Save%20Button%20In%20Toolbar)

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/annotation-selector.md

@@ -1,19 +1,18 @@
 ---
 layout: post
-title: Annotation selector in Javascript Pdfviewer control | Syncfusion
-description: Learn here all about Annotation selector in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Customize annotation selectors in JavaScript PDF Viewer
+description: Learn how to customize annotation selectors in the JavaScript PDF Viewer component using annotationSelectorSettings with examples.
 platform: document-processing
-control: Annotation selector
-publishingplatform: Javascript
+control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Annotation selector in Javascript Pdfviewer control
+# Customize annotation selectors in JavaScript PDF Viewer
 
-To customize the annotation selector in Syncfusion PDF Viewer, you can use the [**annotationSelectorSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control.
+Customize the annotation selector using the [annotationSelectorSettings](https://ej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PDF Viewer.
 
-Here is an example of how you can customize the selector of the shape annotation:
+Example: Customize the selector of a shape annotation
 
 ```
 
@@ -30,4 +29,5 @@ document.getElementById('annotationSelector').addEventListener('click', () => {
 
 ```
 
-Find the sample [how to customize the annotation selector](https://stackblitz.com/edit/js-5p3ae6?file=index.js)
+Sample: [How to customize the annotation selector]
+(https://stackblitz.com/edit/js-5p3ae6?file=index.js)

Document-Processing/PDF/PDF-Viewer/javascript-es5/how-to/change-author-name-using-annotation-settings.md

@@ -1,34 +1,33 @@
 ---
 layout: post
-title: Change author name using annotation settings in Javascript Pdfviewer control | Syncfusion
-description: Learn here all about Change author name using annotation settings in Syncfusion Javascript Pdfviewer control of Syncfusion Essential JS 2 and more.
+title: Change author name using annotation settings in JavaScript PDF Viewer | Syncfusion
+description: Learn how to change the author name and related annotation settings using the annotationSettings API in the JavaScript PDF Viewer.
 platform: document-processing
-control: Change author name using annotation settings
-publishingplatform: Javascript
+control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Change author name using annotation settings in Javascript Pdfviewer control
+# Change author name using annotation settings in JavaScript PDF Viewer
 
-The Essential JavaScript PDF Viewer supports to customize a single property of the annotation settings by exposing an API for the properties common to all the annotations.
+The PDF Viewer allows customizing individual annotation settings using the annotationSettings API, which exposes properties common to all annotations.
 
-**API Name** : annotationSettings
+API name: annotationSettings
 
-|Property Name|Data type & Default Value|Description|
+| Property Name | Data type & Default Value | Description |
 |---|---|---|
-|author|String(“Guest”)|specifies the author of the annotation.|
-|minWidth|Number(0)|specifies the minWidth of the annotation.|
-|maxWidth|Number(0)|specifies the maxWidth of the annotation.|
-|minHeight|Number(0)|specifies the minHeight of the annotation.|
-|maxHeight|Number(0)|specifies the maxHeight of the annotation.|
-|isLock|Boolean(false)|specifies the locked action of the annotations. [If set true unable to select the annotations]|
-|isPrint|Boolean(true)|specifies whether the annotations are included or not in Print actions.|
-|isDownload|Boolean(true|specifies whether the annotations are included or not in Download actions.|
-|Free Text Settings|
-|allowOnlyTextInput|Boolean(false)|specifies the allow only text action of the free text annotation. [If set true unable to move or resize the annotations]|
-
-You can change the author name and the other properties using the annotationSettings API as in the following code sample.
+| author | String ("Guest") | Specifies the author of the annotation. |
+| minWidth | Number (0) | Specifies the minimum width of the annotation. |
+| maxWidth | Number (0) | Specifies the maximum width of the annotation. |
+| minHeight | Number (0) | Specifies the minimum height of the annotation. |
+| maxHeight | Number (0) | Specifies the maximum height of the annotation. |
+| isLock | Boolean (false) | Specifies whether the annotation is locked. If true, the annotation cannot be selected. |
+| isPrint | Boolean (true) | Specifies whether the annotation is included in print actions. |
+| isDownload | Boolean (true) | Specifies whether the annotation is included in download actions. |
+| Free Text Settings |
+| allowOnlyTextInput | Boolean (false) | Specifies text-only mode for free text annotations. If true, moving or resizing is disabled. |
+
+Change the author name and other properties using the annotationSettings API as shown below.
 
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}