1009405: Updated UG revamp TS II

Author: SF4524LogeshKumar

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/create-modify-annotation.md

@@ -10,36 +10,36 @@ domainurl: ##DomainURL##
 
 # Create and modify annotations
 
-Use the PDF Viewer annotation tools to add, edit, and manage markups across your documents. This page provides a quick overview with convenient navigation to each annotation type and common ways to create and modify annotations.
+The PDF Viewer annotation tools add, edit, and manage markups across documents. This page provides an overview with quick navigation to each annotation type and common creation and modification workflows.
 
 ## Quick navigation to annotation types
 
 Jump directly to a specific annotation type for detailed usage and examples:
 
-TextMarkup Annotations:
+TextMarkup annotations:
 
-- Highlight : [Highlight annotation](./annotation-types/highlight-annotation)
+- Highlight: [Highlight annotation](./annotation-types/highlight-annotation)
 - Strikethrough: [Strikethrough annotation](./annotation-types/strikethrough-annotation)
 - Underline: [Underline annotation](./annotation-types/underline-annotation)
 - Squiggly: [Squiggly annotation](./annotation-types/Squiggly-annotation)
 
-Shape Annotations:
+Shape annotations:
 
 - Line: [Line annotation](./annotation-types/line-annotation)
 - Arrow: [Arrow annotation](./annotation-types/arrow-annotation)
 - Rectangle: [Rectangle annotation](./annotation-types/rectangle-annotation)
 - Circle : [Circle annotation](./annotation-types/circle-annotation)
 - Polygon: [Polygon annotation](./annotation-types/polygon-annotation)
 
-Measurement Annotations:
+Measurement annotations:
 
 - Distance: [Distance annotation](./annotation-types/distance-annotation)
 - Perimeter: [Perimeter annotation](./annotation-types/perimeter-annotation)
 - Area: [Area annotation](./annotation-types/area-annotation)
 - Radius: [Radius annotation](./annotation-types/ra)
 - Volume: [Volume annotation](./annotation-types/vo)
 
-Other Annotations:
+Other annotations:
 
 - Redaction: [Redaction annotation](./annotation-types/redaction-annotation)
 - Free Text: [Free text annotation](./annotation-types/free-text-annotation)
@@ -54,18 +54,18 @@ N> Each annotation type page includes both UI steps and programmatic examples sp
 ### Create via UI
 
 - Open the annotation toolbar in the PDF Viewer.
-- Choose the required tool (for example, Shape, Free Text, Ink, Stamp, Redaction).
+- Choose the required tool (for example, Shape, Free text, Ink, Stamp, Redaction).
 - Click or drag on the page to place the annotation.
 
 ![Annotation toolbar](../images/shape_toolbar.png)
 
-Notes:
-- When pan mode is active and you select a shape or stamp tool, the viewer switches to text select mode automatically.
-- Property pickers in the annotation toolbar let you choose color, stroke color, thickness, and opacity while drawing.
+Note:
+- When pan mode is active and a shape or stamp tool is selected, the viewer switches to text select mode automatically.
+- Property pickers in the annotation toolbar let users choose color, stroke color, thickness, and opacity while drawing
 
 ### Create programmatically
 
-Creation patterns vary slightly by type. Refer to the type pages above for tailored code. Example: creating a Redaction annotation using addAnnotation.
+Creation patterns vary by type. Refer to the individual annotation pages for tailored code. Example: creating a Redaction annotation using `addAnnotation`.
 
 ```html
 <button id="addRedactAnnot">Add Redaction Annotation</button>
@@ -88,31 +88,31 @@ document.getElementById('addRedactAnnot')?.addEventListener('click', () => {
 });
 ```
 
-See the individual annotation pages (links above) for enabling draw modes from UI buttons and other type-specific creation samples.
+Refer to the individual annotation pages for enabling draw modes from UI buttons and other type-specific creation samples.
 
 ## Modify annotations
 
 ### Modify via UI
 
 Use the annotation toolbar after selecting an annotation:
-- Edit Color: change the fill or text color (when applicable)
+- Edit color: change the fill or text color (when applicable)
 ![Edit color](../images/edit_color.png)
-- Edit Stroke Color: change the border/line color (shape and line types)
+- Edit stroke color: change the border or line color (shape and line types)
 ![Edit stroke color](../images/shape_strokecolor.png)
-- Edit Thickness: adjust the border/line thickness
+- Edit thickness: adjust the border or line thickness
 ![Edit thickness](../images/shape_thickness.png)
-- Edit Opacity: change transparency
+- Edit opacity: change transparency
 ![Edit opacity](../images/shape_opacity.png)
 
 
 Additional options such as Line Properties (for line/arrow) are available from the context menu (right-click > Properties) where supported.
 
 ### Modify programmatically
 
-Use editAnnotation to apply changes to an existing annotation. Common flow:
-- Locate the target annotation from annotationCollection
-- Update the desired properties
-- Call editAnnotation with the modified object
+Use `editAnnotation` to apply changes to an existing annotation. Common flow:
+- Locate the target annotation from `annotationCollection`.
+- Update the desired properties.
+- Call `editAnnotation` with the modified object.
 
 ```html
 <button id="bulkEdit">Bulk edit matching annotations</button>

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/custom-data.md

@@ -10,11 +10,12 @@ domainurl: ##DomainURL##
 
 # Custom data in annotations
 
-You can attach any custom key–value data to annotations using the customData property. This works at two levels:
-- Default level with annotationSettings: Applies to all annotations created via the UI.
-- Per-annotation-type level: Supply customData in each annotation type settings (highlightSettings, rectangleSettings, etc.).
+Annotations can include custom key–value data via the `customData` property. This is supported at two levels:
 
-The customData value can be any serializable object. It is preserved when exporting or importing annotations and is available at runtime on the annotation object.
+- Default level via `annotationSettings`: applies to all annotations created through the UI.
+- Per-annotation-type level: provide `customData` inside specific annotation-type settings (for example, `highlightSettings`, `rectangleSettings`).
+
+The `customData` value can be any JSON-serializable object. It is preserved during annotation export/import and is available at runtime on the annotation object.
 
 ## Default custom data (annotationSettings)
 
@@ -121,9 +122,9 @@ document.getElementById('CustomData')?.addEventListener('click', () => {
 });
 ```
 
-### Notes
-- customData can be any JSON-serializable object and is stored with the annotation.
-- Use default annotationSettings.customData for global defaults and override with per-tool settings as needed.
+### Note
+- `customData` can be any JSON-serializable object and is stored with the annotation.
+- Use `annotationSettings.customData` for global defaults and override with per-tool settings as needed.
 
 [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/custom-tools.md

@@ -10,17 +10,17 @@ domainurl: ##DomainURL##
 
 # Custom annotation tools in TypeScript PDF Viewer
 
-PDF viewer allows to add your own toolbar and toggle PDF annotation tools programmatically using the setAnnotationMode method. You can enable tools such as Highlight, Underline, Rectangle, Circle, Arrow, Free Text, Ink, and Measurement annotations (Distance, Perimeter, Area, Radius).
+The PDF Viewer supports adding a custom toolbar and toggling annotation tools programmatically using the `setAnnotationMode` method. The viewer can enable tools such as Highlight, Underline, Rectangle, Circle, Arrow, Free Text, Ink, and measurement annotations (Distance, Perimeter, Area, Radius)  
 
 Follow these steps to build a minimal custom annotation toolbar.
 
 Step 1: Start from a basic PDF Viewer sample
 
-See the [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a basic sample.
+Refer to the [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/javascript-es6/getting-started) to create a basic sample.
 
 Step 2: Add HTML for a lightweight custom toolbar
 
-Add buttons for the tools you want to expose. You can use plain buttons or Syncfusion Toolbar. Below is a plain-HTML variant that keeps things simple.
+Add buttons for the tools to expose. The sample below uses plain HTML buttons for simplicity; replace with a Syncfusion Toolbar for a richer UI if desired.
 
 ```html
 <div id="annotationToolbar" class="e-pv-custom-anno-toolbar">
@@ -46,7 +46,7 @@ Add buttons for the tools you want to expose. You can use plain buttons or Syncf
 
 Step 3: Import and inject modules
 
-Make sure the Annotation module is injected. If you also want text selection/search, include those as needed.
+Ensure the `Annotation` module is injected. Include text selection and search modules if those capabilities are required.
 
 ```ts
 import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch } from '@syncfusion/ej2-pdfviewer';
@@ -87,9 +87,9 @@ const bindAnnoTools = () => {
 bindAnnoTools();
 ```
 
-## Custom Tools Using Syncfusion Toolbar for a richer UI
+## Custom tools using Syncfusion Toolbar for a richer UI
 
-You can replace the plain buttons with Syncfusion EJ2 Toolbar items and icons similar to the custom toolbar sample. Here is a compact example showing a few common tools. Add the Toolbar package (@syncfusion/ej2-navigations) and wire each item’s click to setAnnotationMode.
+Replace the plain buttons with Syncfusion EJ2 Toolbar items and icons for a richer UI. The compact example below shows common tools. Add the Toolbar package `@syncfusion/ej2-navigations` and wire each item’s click handler to `setAnnotationMode`.
 
 ```ts
 import { Toolbar as Tool, ClickEventArgs, ItemModel } from '@syncfusion/ej2-navigations';
@@ -147,11 +147,10 @@ const annoToolbar = new Tool({
 annoToolbar.appendTo('#annotationToolbar');
 ```
 
-Notes
+Note
 
-- setAnnotationMode accepts the annotation type name. Common values include: Highlight, Underline, Strikethrough, StickyNotes, FreeText, Ink, Rectangle, Circle, Line, Arrow, Polygon, Polyline, Distance, Perimeter, Area, Radius, and None to exit.
-- You can predefine default annotation styles using the corresponding settings properties (for example, areaSettings as shown in the Area annotation topic).
-- To combine with a fully custom viewer toolbar, see Custom Toolbar in TypeScript PDF Viewer.
+- `setAnnotationMode` accepts the annotation type name. Common values include: `Highlight`, `Underline`, `Strikethrough`, `StickyNotes`, `FreeText`, `Ink`, `Rectangle`, `Circle`, `Line`, `Arrow`, `Polygon`, `Polyline`, `Distance`, `Perimeter`, `Area`, `Radius`, and `None` to exit.
+- Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`).
 
 [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/customize-annotation.md

@@ -10,42 +10,42 @@ domainurl: ##DomainURL##
 
 # Customize annotations
 
-You can customize annotation color, stroke color, thickness, opacity, and other properties using the built‑in UI or via code. This page summarizes common customization patterns and shows how to set defaults per annotation type.
+Annotation appearance and behavior (for example color, stroke color, thickness, and opacity) can be customized using the built‑in UI or programmatically. This page summarizes common customization patterns and shows how to set defaults per annotation type.
 
 ## Customize via UI
 
 Use the annotation toolbar after selecting an annotation:
-- Edit Color: changes the annotation fill/text color
+- Edit color: changes the annotation fill/text color
 ![Edit color](../images/edit_color.png)
-- Edit Stroke Color: changes border/line color (shapes and lines)
+- Edit stroke color: changes border or line color for shapes and lines types.
 ![Edit stroke color](../images/shape_strokecolor.png)
-- Edit Thickness: adjusts border/line thickness
+- Edit thickness: adjusts border or line thickness
 ![Edit thickness](../images/shape_thickness.png)
-- Edit Opacity: adjusts transparency
+- Edit opacity: adjusts transparency
 ![Edit opacity](../images/shape_opacity.png)
 
-Type‑specific options (for example, Line Properties) are available from the context menu (right‑click > Properties) where supported.
+Type‑specific options (for example, Line properties) are available from the context menu (right‑click > Properties) where supported.
 
 ## Set default properties during initialization
 
-You can set defaults for specific annotation types when creating the PdfViewer instance. You can set author, subject, color, opacity using Annotation Settings. Below are examples using settings already used in the annotation type pages.
+Set defaults for specific annotation types when creating the `PdfViewer` instance. Configure properties such as author, subject, color, and opacity using annotation settings. The examples below reference settings used on the annotation type pages.
 
-TextMarkup Annotations:
+Text markup annotations:
 
-- Highlight : Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation/#set-default-properties-during-control-initialization)
+- Highlight: Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation/#set-default-properties-during-control-initialization)
 - Strikethrough: Use [`strikethroughSettings`](./annotation-types/strikethrough-annotation/#default-strikethrough-settings-during-initialization)
 - Underline: Use [`underlineSettings`](./annotation-types/underline-annotation/#default-underline-settings-during-initialization)
 - Squiggly: Use [`squigglySettings`](./annotation-types/Squiggly-annotation/#set-default-properties-during-control-initialization)
 
-Shape Annotations:
+Shape annotations:
 
 - Line: Use [`lineSettings`](./annotation-types/line-annotation/#default-line-settings-during-initialization)
 - Arrow: Use [`arrowSettings`](./annotation-types/arrow-annotation/#default-arrow-settings-during-initialization)
 - Rectangle: Use [`rectangleSettings`](./annotation-types/rectangle-annotation/#default-rectangle-settings-during-initialization)
-- Circle : Use [`circleSettings`](./annotation-types/circle-annotation/#default-circle-settings-during-initialization)
+- Circle: Use [`circleSettings`](./annotation-types/circle-annotation/#default-circle-settings-during-initialization)
 - Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation/#default-polygon-settings-during-initialization)
 
-Measurement Annotations:
+Measurement annotations:
 
 - Distance: Use [`distanceSettings`](./annotation-types/distance-annotation/#default-distance-settings-during-initialization)
 - Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation/#default-perimeter-settings-during-initialization)
@@ -56,10 +56,10 @@ Measurement Annotations:
 Other Annotations:
 
 - Redaction: Use [`redactionSettings`](./annotation-types/redaction-annotation/#default-redaction-settings-during-initialization)
-- Free Text: Use [`freeTextSettings`](./annotation-types/free-text-annotation/#default-free-text-settings-during-initialization)
-- Ink (Freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation/#default-ink-settings-during-initialization)
+- Free text: Use [`freeTextSettings`](./annotation-types/free-text-annotation/#default-free-text-settings-during-initialization)
+- Ink (freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation/#default-ink-settings-during-initialization)
 - Stamp: Use [`stampSettings`](./annotation-types/stamp-annotation/#default-stamp-settings-during-initialization)
-- Sticky Notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation/#default-sticky-notes-settings-during-initialization)
+- Sticky notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes-annotation/#default-sticky-notes-settings-during-initialization)
 
 Set defaults for specific annotation types when creating the PdfViewer instance. Below are examples using settings already used in the annotation type pages.
 
@@ -137,7 +137,7 @@ pdfviewer.appendTo('#PdfViewer');
 {% endhighlight %}
 {% endtabs %}
 
-N> After changing defaults using UI tools (Edit Color, Edit Opacity, etc.), the values will reflect the latest selection for subsequent annotations in the same session.
+N> After changing defaults using UI tools (for example, Edit color or Edit opacity), the updated values apply to subsequent annotations within the same session.
 
 ## Customize programmatically at runtime
 

Document-Processing/PDF/PDF-Viewer/javascript-es6/annotations/delete-annotation.md

@@ -10,20 +10,21 @@ domainurl: ##DomainURL##
 
 # Remove annotations
 
-You can remove annotations using the built-in UI or programmatically. This page shows the common ways to delete annotations in the viewer.
+Annotations can be removed using the built-in UI or programmatically. This page shows common methods to delete annotations in the viewer.
 
 ## Delete via UI
 
-You can delete a selected annotation in three ways:
-- Context menu: Right-click the annotation and choose Delete.
+A selected annotation can be deleted in three ways:
+
+- Context menu: right-click the annotation and choose Delete.
 ![Delete via context menu](../annotations/annotation-images/delete-annot-context-menu.png)
-- Secondary toolbar: Select the annotation and click the Delete button on the annotation toolbar.
+- Annotation toolbar: select the annotation and click the Delete button on the annotation toolbar.
 ![Delete via annotation toolbar](../annotations/annotation-images/delete-annot.png)
-- Keyboard: Select the annotation and press the `Delete` key.
+- Keyboard: select the annotation and press the `Delete` key.
 
 ## Delete programmatically
 
-You can delete the currently selected annotation, or delete a specific annotation by its id.
+Annotations can be deleted programmatically either by removing the currently selected annotation or by specifying an annotation id.
 
 ```html
 <div class="toolbar">
@@ -85,7 +86,7 @@ document.getElementById('delbyId')?.addEventListener('click', () => {
 });
 ```
 
-N> Deleting via API requires the annotation to exist in the current document. Ensure an annotation is selected when using deleteAnnotation(), or pass a valid id to deleteAnnotationById().
+N> Deleting via the API requires the annotation to exist in the current document. Ensure an annotation is selected when using `deleteAnnotation()`, or pass a valid id to `deleteAnnotationById()`.
 
 [View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)