1052813: Added UG content for the track-changes-revision-colors usage.

Document-Processing/Word/Word-Processor/angular/track-changes.md

@@ -245,7 +245,53 @@ export class AppComponent implements OnInit {
   }
 }
 ```
+## Custom Colors for Track Changes
 
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+```typescript
+import { Component, ViewChild, AfterViewInit } from '@angular/core';
+import {
+  DocumentEditorContainerComponent,
+  DocumentEditorContainerModule,
+  ToolbarService
+} from '@syncfusion/ej2-angular-documenteditor';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [DocumentEditorContainerModule],
+  providers: [ToolbarService],
+  template: `
+    <ejs-documenteditorcontainer
+      #container
+      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
+      height="600px"
+      [enableToolbar]="true">
+    </ejs-documenteditorcontainer>
+  `
+})
+export class App implements AfterViewInit {
+
+  @ViewChild('container')
+  public container!: DocumentEditorContainerComponent;
+
+  ngAfterViewInit(): void {
+    if(this.container!=null && this.container.documentEditorSettings != null && 
+      this.container.documentEditorSettings.revisionSettings != null) {
+        this.container.documentEditorSettings.revisionSettings.revisionColors = [
+          '#047a18',
+          '#bb00ff',
+          '#c14f16'
+        ];
+    }
+
+    this.container.documentEditor.resize();
+  }
+}
+```
 ## Online Demo
 
 Explore how to track and review changes in Word documents using the Angular DOCX Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/angular/#/tailwind3/document-editor/track-changes).

Document-Processing/Word/Word-Processor/asp-net-core/track-changes.md

@@ -123,6 +123,21 @@ container.documentEditor.selection.navigateNextRevision();
 container.documentEditor.selection.navigatePreviousRevision();
 ```
 
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Track-changes-revision-colors.cs" %}
+{% include code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## Filtering changes based on user
 
 In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user.

Document-Processing/Word/Word-Processor/asp-net-mvc/track-changes.md

@@ -118,6 +118,21 @@ container.documentEditor.selection.navigateNextRevision();
 container.documentEditor.selection.navigatePreviousRevision();
 ```
 
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Track-changes-revision-colors.cs" %}
+{% include code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## Filtering changes based on user
 
 The DOCX Editor has a built-in review panel that supports filtering changes by user.

Document-Processing/Word/Word-Processor/blazor/track-changes.md

@@ -77,6 +77,36 @@ await container.DocumentEditor.Selection.NavigateNextRevisionAsync();
 await container.DocumentEditor.Selection.NavigatePreviousRevisionAsync();
 ```
 
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+```csharp
+@using Syncfusion.Blazor.DocumentEditor
+
+<SfDocumentEditorContainer @ref="container" EnableToolbar="true" DocumentEditorSettings="settings">
+</SfDocumentEditorContainer>
+
+@code {
+    private SfDocumentEditorContainer container;
+    // Define settings with revision colors
+    private DocumentEditorSettingsModel Settings = new DocumentEditorSettingsModel()
+    {
+        RevisionSettings = new RevisionSettingsModel() 
+        { 
+            RevisionColors = new string[]
+            {
+                "#0000ff",
+                "#bb00ff",
+                "#c14f16"
+            }
+        }
+    };
+}
+```
+
 ## Filter changes by user
 
 In the DOCX Editor, we have a built-in review panel in which we have provided support for filtering changes based on the user.

Document-Processing/Word/Word-Processor/javascript-es5/track-changes.md

@@ -180,6 +180,19 @@ Tracked changes only protection can be enabled in the UI by using the [Restrict
 
 N> In the enforceProtection method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of the protection type are `NoProtection`, `ReadOnly`, `FormFieldsOnly`, `CommentsOnly`, and `RevisionsOnly`. In the stopProtection method, the parameter denotes the password.
 
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+```js
+container.documentEditorSettings.revisionSettings.revisionColors = [
+  '#0e76b1',
+  '#bb00ff',
+  '#c14f16'
+];
+```
 ## Events
 
 DOCX Editor provides the [beforeAcceptRejectChanges](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content.

Document-Processing/Word/Word-Processor/javascript-es6/track-changes.md

@@ -216,6 +216,22 @@ Tracked changes only protection can be enabled in UI by using [Restrict Editing
 
 N> In the `enforceProtection` method, the first parameter denotes the password and the second parameter denotes the protection type. Possible values of the protection type are `NoProtection | ReadOnly | FormFieldsOnly | CommentsOnly | RevisionsOnly`. In the `stopProtection` method, the parameter denotes the password.
 
+
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+```ts
+container.documentEditorSettings.revisionSettings.revisionColors = [
+  '#0e76b1',
+  '#bb00ff',
+  '#c14f16'
+];
+```
+
+
 ## Events
 
 DocumentEditor provides [beforeAcceptRejectChanges](https://ej2.syncfusion.com/documentation/api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before a tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](https://ej2.syncfusion.com/documentation/api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content.

Document-Processing/Word/Word-Processor/react/track-changes.md

@@ -305,6 +305,52 @@ createRoot(document.getElementById('sample')).render(<App />);
 {% endhighlight %}
 {% endtabs %}
 
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+```typescript
+import { useRef, useEffect } from 'react';
+import {
+  DocumentEditorContainerComponent,
+  Toolbar,
+  Inject
+} from '@syncfusion/ej2-react-documenteditor';
+
+function App() {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      // Access the underlying DocumentEditor instance
+      const editor = containerRef.current.documentEditorSettings;
+
+      // Update revision colors dynamically
+      editor.revisionSettings.revisionColors = [
+        '#0000ff',
+        '#bb00ff',
+        '#c14f16'
+      ];
+    }
+  }, []);
+
+  return (
+    <DocumentEditorContainerComponent
+      ref={containerRef}
+      height={'590px'}
+      enableToolbar={true}
+      serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"
+    >
+      <Inject services={[Toolbar]} />
+    </DocumentEditorContainerComponent>
+  );
+}
+
+export default App;
+```
+
 ## Filter Changes by User
 
 The built-in review panel in the DOCX Editor supports filtering changes based on the user.

Document-Processing/Word/Word-Processor/vue/track-changes.md

@@ -159,6 +159,34 @@ this.$refs.container.documentEditor.selection.navigateNextRevision();
 this.$refs.container.documentEditor.selection.navigatePreviousRevision();
 ```
 
+## Custom Colors for Track Changes
+
+You can set an array of colors to show track changes such as insertions and deletions in the DOCX editor. Each author is assigned a color in order: the first author gets the first color, the second author gets the next, and so on. If there are more authors than colors, the assignment starts again from the beginning of the array.
+
+The following example illustrates how to set the color order for track changes in the DOCX Editor
+
+```ts
+<template>
+  <EjsDocumenteditorcontainer 
+    ref="container"
+    height="590px"
+    :serviceUrl="serviceUrl" 
+    :enableToolbar="true"
+    :documentEditorSettings = "settings"
+    :enableTrackChanges="true"> 
+  </EjsDocumenteditorcontainer>
+</template>
+
+<script setup>
+import { provide } from 'vue';
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+const serviceUrl = 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/';
+const settings = { revisionSettings: { revisionColors: [ "#0000ff", "#bb00ff", "#c14f16" ] } };
+provide('DocumentEditorContainer', [Toolbar]);
+</script>
+```
+
 ## Filtering changes based on user
 
 In the DOCX Editor, we have built-in review panel in which we have provided support for filtering changes based on the user.

Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/document-editor.cs

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

Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/razor

@@ -0,0 +1,22 @@
+<div class="text-center">
+    <!-- DocumentEditorContainer -->
+    @Html.EJS().DocumentEditorContainer("container")
+        .EnableTrackChanges(true)
+        .EnableToolbar(true)
+        .Height("590px")
+        .Render()
+</div>
+
+@section Scripts {
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            // Get the container instance
+            var container = document.getElementById("container").ej2_instances[0];
+
+            // Apply revision colors dynamically
+            container.documentEditor.revisionSettings.revisionColors = [
+                '#0000ff', '#bb00ff', '#c14f16'
+            ];
+        });
+    </script>
+}

Document-Processing/code-snippet/document-editor/asp-net-core/document-editor-container/track-changes-revision-colors/tagHelper

@@ -0,0 +1,21 @@
+<div class="text-center">
+    <ejs-documenteditorcontainer id="container"
+                                 height="590px"
+                                 enableTrackChanges="true"
+                                 enableToolbar="true">
+    </ejs-documenteditorcontainer>
+</div>
+
+@section Scripts {
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            // Get the container instance by ID
+            var container = document.getElementById("container").ej2_instances[0];
+
+            // Apply revision colors dynamically
+            container.documentEditorSettings.revisionSettings = {
+                revisionColors: ['#0000ff', '#bb00ff', '#c14f16']
+            };
+        });
+    </script>
+}

Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/document-editor.cs

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

Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/razor

@@ -0,0 +1,22 @@
+<div class="text-center">
+    <!-- DocumentEditorContainer -->
+    @Html.EJS().DocumentEditorContainer("container")
+        .EnableTrackChanges(true)
+        .EnableToolbar(true)
+        .Height("590px")
+        .Render()
+</div>
+
+@section Scripts {
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            // Get the container instance
+            var container = document.getElementById("container").ej2_instances[0];
+
+            // Apply revision colors dynamically
+            container.documentEditor.revisionSettings.revisionColors = [
+                '#0000ff', '#bb00ff', '#c14f16'
+            ];
+        });
+    </script>
+}

Document-Processing/code-snippet/document-editor/asp-net-mvc/document-editor-container/track-changes-revision-colors/tagHelper

@@ -0,0 +1,21 @@
+<div class="text-center">
+    <ejs-documenteditorcontainer id="container"
+                                 height="590px"
+                                 enableTrackChanges="true"
+                                 enableToolbar="true">
+    </ejs-documenteditorcontainer>
+</div>
+
+@section Scripts {
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            // Get the container instance by ID
+            var container = document.getElementById("container").ej2_instances[0];
+
+            // Apply revision colors dynamically
+            container.documentEditorSettings.revisionSettings = {
+                revisionColors: ['#0000ff', '#bb00ff', '#c14f16']
+            };
+        });
+    </script>
+}