1003205: Updated Review Corrections overview and TextMarkup Annotation

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/annotation-images/annotation-undo-redo.png

@@ -24,18 +24,20 @@ You can add squiggly annotations in two ways:
 * Select text in the PDF document and right-click it.
 * Choose **Squiggly** in the context menu.
 
-![Squiggly context](../../images/squiggly_context.png)
+![Squiggly context](../annotation-images/squiggle-context.gif)
 
 2. Using the annotation toolbar
 * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
 * Select **Squiggly** to enable squiggly mode.
 * Select text to add the squiggly annotation.
 * Alternatively, select text first and then click **Squiggly**.
 
-![Squiggly toolbar](../../images/squiggly_button.png)
+![Squiggly toolbar](../annotation-images/squiggle-tool.gif)
 
 N> When in pan mode, selecting a text markup annotation switches the PDF Viewer to text select mode.
 
+### Enable Squiggly Mode 
+
 Enable/exit squiggly mode using the following code:
 
 ```html
@@ -127,34 +129,27 @@ document.getElementById('addSquiggly')?.addEventListener('click', () => {
 
 ## Edit Squiggly Annotation
 
-### Edit squiggly annotation in UI
-
-You can select and delete squiggly annotations directly in the viewer. Use the context menu or toolbar options as needed.
-
-Delete the selected annotation in the following ways:
-
-1. Using the Delete/Backspace key
-    * Select the annotation.
-    * Press Delete (or Backspace). The selected annotation is removed.
-
-2. Using the annotation toolbar
-    * Select the annotation.
-    * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed.
-
-![Delete button](../../images/delete_button.png)
-
-#### Edit squiggly annotation properties in UI
+### Edit Squiggly annotation in UI
 
 The color and opacity of the squiggly annotation can be edited using the Edit Color and Edit Opacity tools in the annotation toolbar.
 
-- Edit color: Use the color palette in the Edit Color tool to change the annotation color.
+#### Edit color
+Use the color palette in the Edit Color tool to change the annotation color.
 
 ![Edit color](../../images/edit_color.png)
 
-- Edit opacity: Use the range slider in the Edit Opacity tool to change annotation opacity.
+#### Edit opacity
+Use the range slider in the Edit Opacity tool to change annotation opacity.
 
 ![Edit opacity](../../images/edit_opacity.png)
 
+#### Delete Squiggly annotation
+
+- Select the annotation and press Delete, or
+- Click **Delete Annotation** in the annotation toolbar.
+
+![Delete button](../../images/delete_button.png)
+
 ### Edit a squiggly annotation programmatically
 
 To modify an existing squiggly annotation programmatically, use the editAnnotation() method.
@@ -240,58 +235,74 @@ pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}
 
-## Perform undo and redo
-
-The PDF Viewer supports undo and redo for squiggly annotations:
+## Set properties while adding Individual Annotation
 
-* Adding squiggly annotations
-* Deleting squiggly annotations
-* Changing color or opacity
+Set properties for individual annotation before creating the control using `SquigglySettings`.
 
-Undo and redo actions can be performed in the following ways:
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
 
-1. Using keyboard shortcuts:
-    After a squiggly annotation action, press Ctrl+Z to undo and Ctrl+Y to redo.
-2. Using the toolbar:
-    Use the **Undo** and **Redo** tools in the toolbar.
+Refer to the following code snippet to set the default highlight settings.
 
+```html
+<button id="squiggly">Add Squiggly</button>
+```
 {% tabs %}
 {% highlight ts tabtitle="Standalone" %}
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SquigglySettings} from '@syncfusion/ej2-pdfviewer';
 
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
 
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-    resourceUrl:"https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib"
-});
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
 pdfviewer.appendTo('#PdfViewer');
 
-document.getElementById('undo')?.addEventListener('click', ()=> {
-    pdfviewer.undo();
-});
+//Apply Squiggly Settings while adding individual Annotation
+document.getElementById('squiggly')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Squiggly', {
+        bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+        pageNumber: 1,
+        author: 'User 1',
+        color: '#ffff00',
+        opacity: 0.9
+    } as SquigglySettings);
 
-document.getElementById('redo')?.addEventListener('click', ()=> {
-    pdfviewer.redo();
+    pdfviewer.annotation.addAnnotation('Squiggly', {
+        bounds: [{ x: 107, y: 220, width: 350, height: 14 }],
+        pageNumber: 1,
+        author: 'User 2',
+        color: '#ff1010ff',
+        opacity: 0.9
+    } as SquigglySettings);
 });
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
+import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, SquigglySettings} from '@syncfusion/ej2-pdfviewer';
 
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields);
+PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner);
 
-let pdfviewer: PdfViewer = new PdfViewer({
-    documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
-});
+const pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
 pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
 pdfviewer.appendTo('#PdfViewer');
 
-document.getElementById('undo')?.addEventListener('click', ()=> {
-    pdfviewer.undo();
-});
+//Apply Squiggly Settings while adding individual Annotation
+document.getElementById('squiggly')?.addEventListener('click', function () {
+    pdfviewer.annotation.addAnnotation('Squiggly', {
+        bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+        pageNumber: 1,
+        author: 'User 1',
+        color: '#ffff00',
+        opacity: 0.9
+    } as SquigglySettings);
 
-document.getElementById('redo')?.addEventListener('click', ()=> {
-    pdfviewer.redo();
+    pdfviewer.annotation.addAnnotation('Squiggly', {
+        bounds: [{ x: 107, y: 220, width: 350, height: 14 }],
+        pageNumber: 1,
+        author: 'User 2',
+        color: '#ff1010ff',
+        opacity: 0.9
+    } as SquigglySettings);
 });
 {% endhighlight %}
 {% endtabs %}
@@ -306,16 +317,21 @@ import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, Thumbnai
 
 PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation);
 
-let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', enableTextMarkupAnnotation: false });
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib";
+pdfviewer.enableTextMarkupAnnotation= false;
 pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% highlight ts tabtitle="Server-Backed" %}
 import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation } from '@syncfusion/ej2-pdfviewer';
 
 PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation);
 
-let pdfviewer: PdfViewer = new PdfViewer({ documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', enableTextMarkupAnnotation: false });
+let pdfviewer: PdfViewer = new PdfViewer();
+pdfviewer.documentPath='https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
 pdfviewer.serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
+pdfviewer.enableTextMarkupAnnotation= false;
 pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}