1010724: Updated Text Markup Annotation

Author: SF4524LogeshKumar

Document-Processing-toc.html

@@ -956,6 +956,14 @@
 							<li><a href="/document-processing/pdf/pdf-viewer/react/text-search">Text Search</a></li>
 							<li>Annotation
 								<ul>
+									<li>Annotation Types
+										<ul>
+											<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/highlight-annotation">Highlight</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/underline-annotation">Underline</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/strikethrough-annotation">Strikethrough</a></li>
+											<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/annotation-types/squiggly-annotation">Squiggly</a></li>
+										</ul>
+									</li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/text-markup-annotation">Text Markup Annotation</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/shape-annotation">Shape Annotation</a></li>
 									<li><a href="/document-processing/pdf/pdf-viewer/react/annotation/stamp-annotation">Stamp Annotation</a></li>

Document-Processing/PDF/PDF-Viewer/react/annotation/annotation-types/highlight-annotation.md

@@ -21,7 +21,6 @@ To enable Highlight annotations, inject the following modules into the React PDF
 
 - [**Annotation**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#annotation)
 - [**TextSelection**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textselection)
-- [**TextSearch**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#textsearch)
 - [**Toolbar**](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#toolbar)
 
 This minimal setup enables UI interactions like selection and highlighting.
@@ -36,8 +35,7 @@ import {
   Inject,
   Toolbar,
   Annotation,
-  TextSelection,
-  TextSearch
+  TextSelection
 } from '@syncfusion/ej2-react-pdfviewer';
 
 function App() {
@@ -48,7 +46,7 @@ function App() {
       resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
       style={{ height: '650px' }}
     >
-      <Inject services={[Toolbar, Annotation, TextSelection, TextSearch]} />
+      <Inject services={[Toolbar, Annotation, TextSelection]} />
     </PdfViewerComponent>
   );
 }
@@ -60,7 +58,9 @@ ReactDOM.createRoot(document.getElementById('sample')).render(<App />);
 
 ---
 
-## Apply Highlight Using the Toolbar
+## Apply Highlight Annotation
+
+### Apply Highlight Using the Toolbar
 
 1. Select the text you want to highlight.
 2. Click the **Highlight** icon in the annotation toolbar.
@@ -70,7 +70,17 @@ ReactDOM.createRoot(document.getElementById('sample')).render(<App />);
 
 ---
 
-## Apply Highlight Programmatically
+### Apply highlight using Context Menu
+
+Right-click a selected text region → select **Highlight**.
+
+![Highlight Context](../../../javascript-es6/annotations/annotation-images/highlight-context.gif)
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+---
+
+### Enable Highlight Mode
 
 Switch the viewer into highlight mode using `setAnnotationMode('Highlight')`.
 
@@ -85,7 +95,7 @@ function enableHighlight() {
 {% endhighlight %}
 {% endtabs %}
 
-### Exit Highlight Mode  
+#### Exit Highlight Mode
 
 Switch back to normal mode using:
 
@@ -100,7 +110,9 @@ function disableHighlightMode() {
 {% endhighlight %}
 {% endtabs %}
 
-### Add Highlight Programmatically (with bounds)
+---
+
+### Add Highlight Programmatically
 
 Use [`addAnnotation()`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#addannotation) to insert highlight at a specific location.
 
@@ -119,38 +131,6 @@ function addHighlight() {
 {% endhighlight %}
 {% endtabs %}
 
-
-## Add Multiple Highlights with Individual Properties  
-You can also supply custom per‑annotation settings:
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-{% raw %}
-function addMultipleHighlights() {
-  const viewer = document.getElementById('container').ej2_instances[0];
-
-  // Highlight 1
-  viewer.annotation.addAnnotation('Highlight', {
-    bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
-    pageNumber: 1,
-    author: 'User 1',
-    color: '#ffff00',
-    opacity: 0.9
-  });
-
-  // Highlight 2
-  viewer.annotation.addAnnotation('Highlight', {
-    bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
-    pageNumber: 1,
-    author: 'User 2',
-    color: '#ff1010',
-    opacity: 0.9
-  });
-}
-{% endraw %}
-{% endhighlight %}
-{% endtabs %}
-
 ---
 
 ## Customize Highlight Appearance
@@ -172,7 +152,7 @@ Configure default highlight settings such as **color**, **opacity**, and **autho
     opacity: 0.9
   }}
 >
-  <Inject services={[Toolbar, Annotation, TextSelection, TextSearch]} />
+  <Inject services={[Toolbar, Annotation, TextSelection]} />
 </PdfViewerComponent>
 {% endraw %}
 {% endhighlight %}
@@ -182,7 +162,10 @@ Configure default highlight settings such as **color**, **opacity**, and **autho
 
 ## Manage Highlight (Edit, Delete, Comment)
 
-### Edit Highlight Appearance (UI)
+### Edit Highlight
+
+#### Edit Highlight Appearance (UI)
+
 Use the annotation toolbar:
 - **Edit Color** tool  
 ![Edit color](../../../javascript-es6/images/edit_color.png)
@@ -192,15 +175,7 @@ Use the annotation toolbar:
 
 ---
 
-### Delete Highlight
-- Press **Delete** key, or
-- Use **Delete Annotation** in the toolbar
-
-![Delete Highlight](../../../javascript-es6/images/delete_button.png)
-
----
-
-### Edit Highlight Programmatically
+#### Edit Highlight Programmatically
 
 Modify an existing highlight programmatically using `editAnnotation()`.
 
@@ -225,45 +200,56 @@ function editHighlightProgrammatically() {
 
 ---
 
-### Comments
-Use the [**Comments panel**](../comments) for threaded discussions on highlight annotations.
-
----
+### Delete Highlight
 
-## Use the Context Menu with Highlight
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [Delete Annotation](../remove-annotations)
 
-Right-click a selected text region → select **Highlight**.
+---
 
-![Highlight Context](../../../javascript-es6/annotations/annotation-images/highlight-context.gif)
+### Comments
 
-To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+Use the [Comments panel](../comments) to add, view, and reply to threaded discussions linked to underline annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
 
 ---
 
-## Handle Highlight Events
+## Set properties while adding Individual Annotation
 
-Subscribe to annotation lifecycle events.
+Set properties for individual annotation before creating the control using [highlightSettings](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#highlightsettings)
 
 {% tabs %}
 {% highlight js tabtitle="Standalone" %}
 {% raw %}
-function onAnnotationAdd(args) {
-  console.log('Highlight added:', args);
-}
+function addMultipleHighlights() {
+  const viewer = document.getElementById('container').ej2_instances[0];
 
-<PdfViewerComponent
-  id="container"
-  annotationAdd={onAnnotationAdd}
-/>
+  // Highlight 1
+  viewer.annotation.addAnnotation('Highlight', {
+    bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+    pageNumber: 1,
+    author: 'User 1',
+    color: '#ffff00',
+    opacity: 0.9
+  });
+
+  // Highlight 2
+  viewer.annotation.addAnnotation('Highlight', {
+    bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+    pageNumber: 1,
+    author: 'User 2',
+    color: '#ff1010',
+    opacity: 0.9
+  });
+}
 {% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
-See [**Annotation Events**](../annotation-event) page for full list and parameter details.
-
 ---
 
 ## Disable TextMarkup Annotation
+
 Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/react/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
 
 {% tabs %}
@@ -276,17 +262,25 @@ Disable text markup annotations (including highlight) using the [`enableTextMark
   resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
   style={{ height: '650px' }}
 >
-  <Inject services={[Toolbar, Annotation, TextSelection, TextSearch]} />
+  <Inject services={[Toolbar, Annotation, TextSelection]} />
 </PdfViewerComponent>
 {% endraw %}
 {% endhighlight %}
 {% endtabs %}
 
 ---
 
-## Save and Export
+## Handle Highlight Events
+
+The PDF viewer provides annotation life-cycle events that notify when highlight annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+---
+
+## Export and Import
 
-Use the [**Download**](../../download) tool to export the PDF with highlight annotations included. The original document remains unchanged.
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [Export and Import Annotation](../export-import-annotations)
 
 ---
 
@@ -296,3 +290,5 @@ Use the [**Download**](../../download) tool to export the PDF with highlight ann
 - [Customize Context Menu](../../context-menu/custom-context-menu)
 - [Comments Panel](../comments)
 - [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)