Task(1043919): Revamped the UG documentation for the Annotation, Forms, Manage Form Fields, and Import-Export Form Fields samples in the Vue PDF Viewer platform

Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-comment-filter.md

@@ -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)
 4. Click **APPLY** to see only annotations matching your criteria
 5. Use the **CLEAR** button to reset all filters
 
@@ -177,12 +177,10 @@ export default {
         // includereplies: true,
         applyToDocument: true
       });
-    }
-  },
-
-  handleClearFilter() {
-    if (viewerRef.current) {
-      viewerRef.current.annotation.applyCommentFilter(null);
+    },
+    clearFilter() {
+      const pdfViewer = this.$refs.pdfViewer.ej2Instances;
+      pdfViewer.annotation.applyCommentFilter(null);
     }
   },
   provide: {

Document-Processing/PDF/PDF-Viewer/vue/annotation/annotation-event.md

@@ -2,7 +2,7 @@
 layout: post
 title: Annotation Events in Vue PDF Viewer control | Syncfusion
 description: Learn here all about Annotation Events in Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
-control: Annotation Events
+control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
@@ -33,7 +33,7 @@ The annotation events supported by the PDF Viewer control are:
 | [resizeSignature](#resizesignature)                  | Triggers when a signature is resized.                             |
 | [signaturePropertiesChange](#signaturepropertieschange) | Triggers when signature properties change.                        |
 | [signatureSelect](#signatureselect)                  | Triggers when a signature is selected.                            |
-| [signatureUnselect](#signatureunselect)              | Triggers when a signature is unselected.                          |            |
+| [signatureUnselect](#signatureunselect)              | Triggers when a signature is unselected.                          |
 
 ### annotationAdd
 

Document-Processing/PDF/PDF-Viewer/vue/annotation/annotations-in-mobile-view.md

@@ -7,6 +7,7 @@ control: PDF Viewer
 documentation: ug
 domainurl: ##DomainURL##
 ---
+
 # Annotations in mobile view in Vue PDF Viewer control
 
 This article describes how to use annotation tools in the Syncfusion Vue PDF Viewer on touch-enabled (mobile) devices. It covers enabling the annotation toolbar, adding common annotation types, adjusting annotation properties, using comments, and removing annotations.
@@ -49,7 +50,7 @@ This article describes how to use annotation tools in the Syncfusion Vue PDF Vie
 
 **Step 2:** Choose a shape or measurement type, then draw the annotation on the page using touch gestures.
 
-![Select measurement type](../images/open-radius.png)
+![Select radius measurement type](../images/open-radius.png)
 
 **Step 3:** The shape or measurement annotation is added to the PDF and can be adjusted via its property toolbar.
 

Document-Processing/PDF/PDF-Viewer/vue/annotation/comments.md

@@ -2,7 +2,7 @@
 layout: post
 title: Comments in Vue PDF Viewer component | Syncfusion
 description: Learn about comments, replies, and status in the Syncfusion Vue PDF Viewer component of Syncfusion Essential JS 2 and more.
-control: Comments
+control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
@@ -105,7 +105,7 @@ Edit comments and replies in the following ways:
 * Click More options in the comment or reply container.
 * Select Delete from the context menu.
 
-![CommentDelete](../images/commentsdelete.png)
+![Delete a comment from the comment panel](../images/commentsdelete.png)
 
 N> Deleting the root comment from the comment panel also deletes the associated annotation.
 

Document-Processing/PDF/PDF-Viewer/vue/annotation/free-text-annotation.md

@@ -2,7 +2,7 @@
 layout: post
 title: Free text annotation in Vue PDF viewer component | Syncfusion
 description: Learn about free text annotations in the Syncfusion Vue PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
-control: Free text annotation
+control: PDF Viewer
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
@@ -627,7 +627,7 @@ Select a color from the Font Color palette to change the font color.
 
 Use the Text Align tool to set the annotation text alignment.
 
-![FreeTextAnnotation](../images/textalign.png)
+![Set free text alignment](../images/textalign.png)
 
 ### Font styles
 
@@ -694,7 +694,7 @@ provide('PdfViewer', [Toolbar, Magnification, Navigation, LinkAnnotation, Bookma
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Optiions API (Standalone)" %}
+{% highlight html tabtitle="Options API (Standalone)" %}
 
 <template>
   <div id="app">
@@ -732,7 +732,7 @@ export default {
 </script>
 
 {% endhighlight %}
-{% highlight html tabtitle="Composition API (Server-backed)" %}
+{% highlight html tabtitle="Composition API (Server-Backed)" %}
 
 <template>
   <div id="app">

Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-annotation.md

@@ -193,7 +193,7 @@ export default {
 {% endhighlight %}
 {% endtabs %}
 
-## Add an Ink annotation programmatically to the PDF document Programmatically
+## Add an Ink annotation programmatically to the PDF document
 
 The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
@@ -547,7 +547,7 @@ import {
 export default {
   name: "App",
   components: {
-    "ejs-pdfviewer": PdfviewerComponent
+    "ejs-pdfviewer": PdfViewerComponent
   },
   data() {
     return {
@@ -607,7 +607,7 @@ Edit opacity using the range slider in the Edit Opacity tool.
 
 Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
 
-After changing default values, the new defaults are applied to subsequently created ink annotations.. Refer to the following code sample to set the default ink annotation settings.
+After changing default values, the new defaults are applied to subsequently created ink annotations. Refer to the following code sample to set the default ink annotation settings.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (Standalone)" %}

Document-Processing/PDF/PDF-Viewer/vue/annotation/ink-eraser.md

@@ -193,7 +193,7 @@ export default {
 
 ### Set eraser size programmatically
 
-Use the `inkEraserSize` property to control the width of the eraser:
+Use the `inkEraserSize` property to control the width of the eraser. The default value is `20` pixels; recommended range is `1`–`20` pixels.
 
 {% tabs %}
 {% highlight html tabtitle="Composition API (~/src/App.vue)" %}

Document-Processing/PDF/PDF-Viewer/vue/annotation/line-angle-constraints.md

@@ -1,7 +1,7 @@
 ---
 layout: post
-title: Line Angle Constraints in Vue PdfViewer | Syncfusion
-description: Discover how to manage text markup annotations like highlight, underline, strikethrough, and squiggly in the Syncfusion Vue PDF Viewer.
+title: Line Angle Constraints in Vue PDF Viewer | Syncfusion
+description: Learn how to enable and configure line angle constraints for line-type annotations in the Syncfusion Vue PDF Viewer.
 platform: document-processing
 control: PDF Viewer
 documentation: ug

Document-Processing/PDF/PDF-Viewer/vue/annotation/measurement-annotation.md

@@ -211,11 +211,11 @@ Here is an example showing how to add measurement annotations programmatically u
 
 <template>
   <div id="app">
-    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programatically</button>
-    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programatically</button>
-    <button v-on:click="addAreaAnnotation">Add Area Annotation programatically</button>
-    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programatically</button>
-    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programatically</button>
+    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programmatically</button>
+    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programmatically</button>
+    <button v-on:click="addAreaAnnotation">Add Area Annotation programmatically</button>
+    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programmatically</button>
+    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
@@ -283,11 +283,11 @@ const addVolumeAnnotation = function () {
 
 <template>
   <div id="app">
-    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programatically</button>
-    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programatically</button>
-    <button v-on:click="addAreaAnnotation">Add Area Annotation programatically</button>
-    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programatically</button>
-    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programatically</button>
+    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programmatically</button>
+    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programmatically</button>
+    <button v-on:click="addAreaAnnotation">Add Area Annotation programmatically</button>
+    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programmatically</button>
+    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
@@ -362,11 +362,11 @@ export default {
 
 <template>
   <div id="app">
-    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programatically</button>
-    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programatically</button>
-    <button v-on:click="addAreaAnnotation">Add Area Annotation programatically</button>
-    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programatically</button>
-    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programatically</button>
+    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programmatically</button>
+    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programmatically</button>
+    <button v-on:click="addAreaAnnotation">Add Area Annotation programmatically</button>
+    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programmatically</button>
+    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
     </ejs-pdfviewer>
   </div>
@@ -434,11 +434,11 @@ const addVolumeAnnotation = function () {
 
 <template>
   <div id="app">
-    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programatically</button>
-    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programatically</button>
-    <button v-on:click="addAreaAnnotation">Add Area Annotation programatically</button>
-    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programatically</button>
-    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programatically</button>
+    <button v-on:click="addDistanceAnnotation">Add Distance Annotation programmatically</button>
+    <button v-on:click="addPerimeterAnnotation">Add Perimeter Annotation programmatically</button>
+    <button v-on:click="addAreaAnnotation">Add Area Annotation programmatically</button>
+    <button v-on:click="addRadiusAnnotation">Add Radius Annotation programmatically</button>
+    <button v-on:click="addVolumeAnnotation">Add Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
     </ejs-pdfviewer>
   </div>
@@ -521,11 +521,11 @@ Here is an example of using editAnnotation():
 
 <template>
   <div id="app">
-    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programatically</button>
-    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programatically</button>
-    <button v-on:click="editAreaAnnotation">Edit Area Annotation programatically</button>
-    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programatically</button>
-    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programatically</button>
+    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programmatically</button>
+    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programmatically</button>
+    <button v-on:click="editAreaAnnotation">Edit Area Annotation programmatically</button>
+    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programmatically</button>
+    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
@@ -613,11 +613,11 @@ const editVolumeAnnotation = function () {
 
 <template>
   <div id="app">
-    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programatically</button>
-    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programatically</button>
-    <button v-on:click="editAreaAnnotation">Edit Area Annotation programatically</button>
-    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programatically</button>
-    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programatically</button>
+    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programmatically</button>
+    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programmatically</button>
+    <button v-on:click="editAreaAnnotation">Edit Area Annotation programmatically</button>
+    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programmatically</button>
+    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :resourceUrl="resourceUrl">
     </ejs-pdfviewer>
   </div>
@@ -715,11 +715,11 @@ export default {
 
 <template>
   <div id="app">
-    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programatically</button>
-    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programatically</button>
-    <button v-on:click="editAreaAnnotation">Edit Area Annotation programatically</button>
-    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programatically</button>
-    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programatically</button>
+    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programmatically</button>
+    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programmatically</button>
+    <button v-on:click="editAreaAnnotation">Edit Area Annotation programmatically</button>
+    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programmatically</button>
+    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
     </ejs-pdfviewer>
   </div>
@@ -811,11 +811,11 @@ const editVolumeAnnotation = function () {
 
 <template>
   <div id="app">
-    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programatically</button>
-    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programatically</button>
-    <button v-on:click="editAreaAnnotation">Edit Area Annotation programatically</button>
-    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programatically</button>
-    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programatically</button>
+    <button v-on:click="editDistanceAnnotation">Edit Distance Annotation programmatically</button>
+    <button v-on:click="editPerimeterAnnotation">Edit Perimeter Annotation programmatically</button>
+    <button v-on:click="editAreaAnnotation">Edit Area Annotation programmatically</button>
+    <button v-on:click="editRadiusAnnotation">Edit Radius Annotation programmatically</button>
+    <button v-on:click="editVolumeAnnotation">Edit Volume Annotation programmatically</button>
     <ejs-pdfviewer id="pdfViewer" ref="pdfviewer" :documentPath="documentPath" :serviceUrl="serviceUrl">
     </ejs-pdfviewer>
   </div>
@@ -1123,7 +1123,7 @@ The PDF Viewer supports the following measurement units:
 
 ## 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 ScaleRatioSettings as shown in the following code snippet.
 
 
 {% tabs %}

Document-Processing/PDF/PDF-Viewer/vue/annotation/shape-annotation.md

@@ -1,7 +1,7 @@
 ---
 layout: post
 title: Shape annotation in Vue PDF Viewer component | Syncfusion
-description: Learn here all about Shape annotation in Syncfusion Vue PDF Viewer control of Syncfusion Essential JS 2 and more.
+description: Learn how to add, edit, and customize shape annotations like line, arrow, rectangle, circle, and polygon in the Vue PDF Viewer.
 control: PDF Viewer
 platform: document-processing
 documentation: ug

Document-Processing/PDF/PDF-Viewer/vue/annotation/signature-annotation.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Handwritten signature Vue PDF Viewer control
+# Handwritten signature in Vue PDF Viewer control
 
 The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification.
 
@@ -29,7 +29,7 @@ Add a handwritten signature using the annotation toolbar.
 
 ![Place the handwritten signature on the page](../images/create_sign.png)
 
-## Adding a handwritten signature to the PDF document Programmatically
+## Adding a handwritten signature to the PDF document programmatically
 
 With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [addAnnotation()](https://ej2.syncfusion.com/vue/documentation/api/pdfviewer/annotation#addannotation) method.
 
@@ -299,7 +299,7 @@ Here is an example of adding a handwritten signature programmatically using addA
 <script setup>
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, Annotation, ThumbnailView, Print, TextSelection, DisplayMode
+  BookmarkView, Annotation, ThumbnailView, Print, TextSelection, DisplayMode,
   TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
 import { provide, ref } from 'vue';
@@ -447,7 +447,7 @@ export default {
 <script setup>
 import {
   PdfViewerComponent as EjsPdfviewer, Toolbar, Magnification, Navigation, LinkAnnotation,
-  BookmarkView, Annotation, ThumbnailView, Print, TextSelection, DisplayMode
+  BookmarkView, Annotation, ThumbnailView, Print, TextSelection, DisplayMode,
   TextSearch, FormFields, FormDesigner, PageOrganizer
 } from '@syncfusion/ej2-vue-pdfviewer';
 import { provide, ref } from 'vue';