1044353: Updated Annotations and Forms Quality Enhancement

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-comment-filter.md

@@ -23,7 +23,7 @@ Imagine reviewing a PDF document with feedback from 5 team members, resulting in
 Comment filtering is most useful in these scenarios:
 
 - **Team reviews**: Filter annotations by author to see feedback from specific reviewers
-- **Status tracking**: Filter by status (Accepted, Rejected, Canceled) to track document workflow progress
+- **Status tracking**: Filter by status (Accepted, Rejected, Cancelled) to track document workflow progress
 - **Color-coded reviews**: Filter by annotation color to organize feedback by priority or type
 - **Time-based review**: Filter by modification date to see recent changes
 - **Document collaboration**: Use "Filter document and comments panel" to synchronize your view with the document
@@ -36,8 +36,8 @@ The JavaScript PDF Viewer provides a comment filter dialog in the comments panel
 ### Filter options
 
 - **Author**: Filter annotations by the author who created them. Use the "Include replies" checkbox to also include comments where the author has replied to other annotations.
-- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Text Box, Sticky Notes, and more.
-- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Canceled, Completed, None).
+- **Annotation Type**: Filter by specific annotation types such as Highlight, Underline, Strikethrough, Free Text, Sticky Notes, and more.
+- **Status**: Filter annotations by their status (e.g., Accepted, Rejected, Cancelled, Completed, None).
 - **Date**: Filter annotations by their modification date.
 - **Color**: Filter annotations by their color.
 
@@ -63,7 +63,7 @@ Follow these steps to filter annotations by their type and status:
 
 1. Click the **filter icon** in the comments panel toolbar
 2. In the **Annotation Type** dropdown, select the annotation types you want to view (e.g., Highlight, Underline)
-3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Pending)
+3. In the **Status** dropdown, select the status you want to filter by (e.g., Accepted, Rejected, Completed)
 4. Click **APPLY** to see only annotations matching your criteria
 5. Use the **CLEAR** button to reset all filters
 
@@ -128,7 +128,6 @@ This approach is useful when you want to:
 
 Use the `applyCommentFilter` method to apply filters with specific criteria:
 
-
 ```html
 <button id="applyFilterBtn">Apply Filter</button>
 <button id="clearFilterBtn">Clear Filter</button>

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-event.md

@@ -1,5 +1,5 @@
 ---
-title: Annotations Events in JavaScript PDF Viewer control | Syncfusion
+title: Annotation Events in JavaScript PDF Viewer control | Syncfusion
 description: Learn here all about Annotations Events in Syncfusion JavaScript PDF Viewer component of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: PDF Viewer

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-permission.md

@@ -121,7 +121,7 @@ var pdfviewer = new ej.pdfviewer.PdfViewer({
 pdfviewer.appendTo('#PdfViewer');
 ```
 
-Behavior notes
+### Behavior notes
 - isLock true: The annotation is locked; users cannot move, resize, or edit it through the UI until it is unlocked.
 - skipPrint true: All annotations are omitted from the print output initiated from the viewer.
 - skipDownload true: All annotations are omitted from the exported/downloaded PDF from the viewer.

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/area-annotation.md

@@ -18,10 +18,11 @@ Area is a measurement annotation used to measure the surface of a closed region
 
 ### Add area annotation via UI
 
-- Use the annotation toolbar to:
-- Click the **Edit Annotation** button in the PDF Viewer toolbar.
-- Click the **Measurement Annotation** dropdown.
-- Choose **Area**, then draw the region on the page.
+Use the annotation toolbar to add an area annotation:
+
+1. Click the **Edit Annotation** button in the PDF Viewer toolbar.
+2. Click the **Measurement Annotation** dropdown.
+3. Choose **Area**, then draw the region on the page.
 
 N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
 
@@ -348,11 +349,11 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotations before creating the control using `AreaSettings`.
+Set properties for individual annotations while adding the annotation using `addAnnotation()`.
 
 N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
-Refer to the following code snippet to set the default Area settings.
+Refer to the following code snippet to set the properties while adding an Area annotation.
 
 ```html
 <button id="Area">Add Area</button>
@@ -447,7 +448,7 @@ Supported units for measurement annotations are
 
 ## Setting default scale ratio settings during control initialization
 
-The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet,
+The properties of scale ratio for measurement annotation can be set before creating the control using `measurementSettings` as shown in the following code snippet,
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/arrow-annotation.md

@@ -18,10 +18,11 @@ Arrow is a shape annotation used to point, direct attention, or indicate flow. C
 
 ### Add arrow annotation via UI
 
-Use the annotation toolbar to:
-- Click the **Edit Annotation** button in the PDF Viewer toolbar.
-- Open the **Shape Annotation** dropdown.
-- Choose **Arrow**, then draw on the page.
+Use the annotation toolbar to add an arrow annotation:
+
+1. Click the **Edit Annotation** button in the PDF Viewer toolbar.
+2. Open the **Shape Annotation** dropdown.
+3. Choose **Arrow**, then draw on the page.
 
 N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
 
@@ -171,7 +172,7 @@ You can select, move, and resize Arrow annotations directly in the viewer:
 
 The fill color, stroke color, thickness, and opacity of arrow shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
 
-##### Editing fill color
+#### Editing fill color
 
 The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
 
@@ -335,11 +336,11 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotations before creating the control using `ArrowSettings`.
+Set properties for individual annotations while adding the annotation using `addAnnotation()`.
 
 N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
-Refer to the following code snippet to set the default arrow settings.
+Refer to the following code snippet to set the properties while adding an arrow annotation.
 
 ```html
 <button id="arrow">Add Arrow</button>

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/circle-annotation.md

@@ -18,10 +18,11 @@ Circle is a shape annotation used to highlight circular regions or draw emphasis
 
 ### Add circle annotation via UI
 
-Use the annotation toolbar to:
-- Click the **Edit Annotation** button in the PDF Viewer toolbar.
-- Open the **Shape Annotation** dropdown.
-- Choose **Circle**, then draw on the page.
+Use the annotation toolbar to add a circle annotation:
+
+1. Click the **Edit Annotation** button in the PDF Viewer toolbar.
+2. Open the **Shape Annotation** dropdown.
+3. Choose **Circle**, then draw on the page.
 
 N> When in pan mode, selecting a shape annotation switches the viewer to text select mode.
 
@@ -216,7 +217,9 @@ The opacity of the annotation can be edited using the range slider provided in t
 
 ### Edit an existing circle annotation programmatically
 
-Use editAnnotation on items from annotationCollection.
+To modify an existing circle annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
 
 ```html
 <button id="editCircleAnnotation">Edit Circle annotation programmatically</button>
@@ -350,17 +353,17 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotations before creating the control using `CircleSettings`.
+Set properties for individual annotations while adding the annotation using `addAnnotation()`.
 
 N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
-Refer to the following code snippet to set the default Circle settings.
+Refer to the following code snippet to set the properties while adding a Circle annotation.
 
 ```html
 <button id="Circle">Add Circle</button>
 ```
 {% tabs %}
-{% highlight ts tabtitle="Standalone" %}
+{% highlight js tabtitle="Standalone" %}
 ej.pdfviewer.PdfViewer.Inject(
     ej.pdfviewer.Toolbar,
     ej.pdfviewer.Magnification,
@@ -389,12 +392,12 @@ document.getElementById('Circle')?.addEventListener('click', function () {
         height: 75,
         opacity: 0.5,
         strokeColor: '#FF0000',
-        fillColor: '#000fff#',
+        fillColor: '#000fff',
         author: 'User1'
     });
 });
 {% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
+{% highlight js tabtitle="Server-Backed" %}
 ej.pdfviewer.PdfViewer.Inject(
     ej.pdfviewer.Toolbar,
     ej.pdfviewer.Magnification,
@@ -423,7 +426,7 @@ document.getElementById('Circle')?.addEventListener('click', function () {
         height: 75,
         opacity: 0.5,
         strokeColor: '#FF0000',
-        fillColor: '#000fff#',
+        fillColor: '#000fff',
         author: 'User1'
     });
 });

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/distance-annotation.md

@@ -18,10 +18,11 @@ Distance is a measurement annotation used to measure the length between two poin
 
 ### Add distance annotation via UI
 
-Use the annotation toolbar to:
-- Click the **Edit Annotation** button in the PDF Viewer toolbar.
-- Open the **Measurement Annotation** dropdown.
-- Choose **Distance**, then draw on the page.
+Use the annotation toolbar to add a distance annotation:
+
+1. Click the **Edit Annotation** button in the PDF Viewer toolbar.
+2. Open the **Measurement Annotation** dropdown.
+3. Choose **Distance**, then draw on the page.
 
 N> When in pan mode, selecting a measurement annotation switches the viewer to text select mode.
 
@@ -185,7 +186,7 @@ You can select, move, and resize Distance annotations directly in the viewer:
 
 The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
 
-##### Edit fill color
+#### Edit fill color
 
 The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
 
@@ -211,7 +212,9 @@ The opacity of the annotation can be edited using the range slider provided in t
 
 ### Edit an existing distance annotation programmatically
 
-Use editAnnotation on items from annotationCollection.
+To modify an existing distance annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
 
 ```html
 <button id="editDistanceAnnotation">Edit Distance annotation programmatically</button>
@@ -337,17 +340,17 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotations before creating the control using `DistanceSettings`.
+Set properties for individual annotations while adding the annotation using `addAnnotation()`.
 
 N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
-Refer to the following code snippet to set the default Distance settings.
+Refer to the following code snippet to set the properties while adding a Distance annotation.
 
 ```html
 <button id="Distance">Add Distance</button>
 ```
 {% tabs %}
-{% highlight ts tabtitle="Standalone" %}
+{% highlight js tabtitle="Standalone" %}
 ej.pdfviewer.PdfViewer.Inject(
     ej.pdfviewer.Toolbar,
     ej.pdfviewer.Magnification,
@@ -377,7 +380,7 @@ document.getElementById('Distance')?.addEventListener('click', function () {
     });
   });
 {% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
+{% highlight js tabtitle="Server-Backed" %}
 ej.pdfviewer.PdfViewer.Inject(
     ej.pdfviewer.Toolbar,
     ej.pdfviewer.Magnification,

Document-Processing/PDF/PDF-Viewer/javascript-es5/annotations/annotation-types/free-text-annotation.md

@@ -18,10 +18,11 @@ Free Text is a text box annotation used to place formatted text anywhere on the
 
 ### Add Free Text annotation via UI
 
-Use the annotation toolbar to:
-- Click the **Edit Annotation** button in the PDF Viewer toolbar.
-- Click the **Free Text Annotation** button to enable Free Text mode.
-- Click on the page to add text.
+Use the annotation toolbar to add a Free Text annotation:
+
+1. Click the **Edit Annotation** button in the PDF Viewer toolbar.
+2. Click the **Free Text Annotation** button to enable Free Text mode.
+3. Click on the page to add text.
 
 N> When in pan mode, selecting Free Text switches the viewer to text select mode.
 
@@ -247,7 +248,9 @@ Edit opacity using the range slider in the Edit Opacity tool.
 
 ### Edit Free Text annotation programmatically
 
-Use editAnnotation to update existing Free Text content.
+To modify an existing Free Text annotation programmatically, use the editAnnotation() method.
+
+Here is an example of using editAnnotation():
 
 ```html
 <button id="changeContent">Change Content</button>
@@ -317,10 +320,6 @@ document.getElementById('changeContent').addEventListener('click', function () {
 {% endhighlight %}
 {% endtabs %}
 
-
-
-
-
 ## Default Free Text settings during initialization
 
 Set default Free Text properties before creating the control using freeTextSettings.
@@ -374,17 +373,17 @@ pdfviewer.appendTo('#PdfViewer');
 
 ## Set properties while adding Individual Annotation
 
-Set properties for individual annotations before creating the control using `FreeTextSettings`.
+Set properties for individual annotations while adding the annotation using `addAnnotation()`.
 
 N> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
-Refer to the following code snippet to set the default FreeText settings.
+Refer to the following code snippet to set the properties while adding a FreeText annotation.
 
 ```html
 <button id="FreeText">Add FreeText</button>
 ```
 {% tabs %}
-{% highlight ts tabtitle="Standalone" %}
+{% highlight js tabtitle="Standalone" %}
 ej.pdfviewer.PdfViewer.Inject(
     ej.pdfviewer.Toolbar,
     ej.pdfviewer.Magnification,
@@ -421,7 +420,7 @@ document.getElementById('FreeText')?.addEventListener('click', function () {
   });
 });
 {% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
+{% highlight js tabtitle="Server-Backed" %}
 ej.pdfviewer.PdfViewer.Inject(
     ej.pdfviewer.Toolbar,
     ej.pdfviewer.Magnification,