1052601: Added UG content for the Comment Highlights features for ASP…

Document-Processing/Word/Word-Processor/asp-net-core/comments.md

@@ -157,6 +157,20 @@ The following example illustrates how to enable mention support in DOCX Editor
 {% endhighlight %}
 {% endtabs %}
 
+## Highlight comments by author
+
+When `highlightCommentsByAuthor' is enabled, each comment marker and pane border is displayed in the author’s avatar color. Selecting a comment highlights the corresponding text in that color. If multiple comments appear on the same line, the marker retains the first author’s avatar color.
+
+The following example illustrates how to enable comment highlights in the DOCX Editor
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-core/document-editor-container/comment-highlights/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="comment-highlights.cs" %}
+{% include code-snippet/document-editor/asp-net-core/document-editor-container/comment-highlights/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 
 ## Events
 

Document-Processing/Word/Word-Processor/asp-net-mvc/comments.md

@@ -159,6 +159,20 @@ The following example illustrates how to enable mention support in the DOCX Edit
 {% endhighlight %}
 {% endtabs %}
 
+## Highlight comments by author
+
+When `highlightCommentsByAuthor' is enabled, each comment marker and pane border is displayed in the author’s avatar color. Selecting a comment highlights the corresponding text in that color. If multiple comments appear on the same line, the marker retains the first author’s avatar color.
+
+The following example illustrates how to enable comment highlights in the DOCX Editor
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-highlights/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="comment-highlights.cs" %}
+{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-highlights/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 
 ## Events
 

Document-Processing/Word/Word-Processor/blazor/comments.md

@@ -47,6 +47,26 @@ You can delete all the comments in the document using [`DeleteAllCommentsAsync`]
 await container.DocumentEditor.Editor.DeleteAllCommentsAsync();
 ```
 
+## Highlight comments by author
+
+When `HighlightCommentsByAuthor' is enabled, each comment marker and pane border is displayed in the author’s avatar color. Selecting a comment highlights the corresponding text in that color. If multiple comments appear on the same line, the marker retains the first author’s avatar color.
+
+The following example illustrates how to enable comment highlights in the DOCX Editor
+
+
+```csharp
+
+@using Syncfusion.Blazor.DocumentEditor;
+
+<SfDocumentEditorContainer @ref="container" EnableToolbar=true DocumentEditorSettings="settings"> 
+</SfDocumentEditorContainer>
+
+@code {
+    SfDocumentEditorContainer container;
+    DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { commentSettings: { highlightCommentsByAuthor : true } };
+}
+```
+
 ## Protect the document in comments-only mode
 
 The DOCX Editor supports a special protection mode that restricts user actions to adding or editing comments only. When `CommentsOnly` protection is active, users cannot change the document content.

Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/comment-highlights/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/comment-highlights/razor

@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditorSettings = { commentSettings: { highlightCommentsByAuthor : true } };
+    }
+</script>

Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/comment-highlights/tagHelper

@@ -0,0 +1,13 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditorSettings = { commentSettings: { highlightCommentsByAuthor : true } };
+    }
+</script>

Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-highlights/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-highlights/razor

@@ -0,0 +1,12 @@
+@Html.EJS().DocumentEditorContainer("container").Created("onCreated").EnableToolbar(true).Render()
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditorSettings = { commentSettings: { highlightCommentsByAuthor : true } };
+    }
+</script>

Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/comment-highlights/tagHelper

@@ -0,0 +1,13 @@
+
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+        container.documentEditorSettings = { commentSettings: { highlightCommentsByAuthor : true } };
+    }
+</script>