From b1c2df250254d0df1b41c0b03112c5333dfdee32 Mon Sep 17 00:00:00 2001 From: suriyaprakasamr Date: Sun, 6 Sep 2026 19:15:18 +0530 Subject: [PATCH 1/3] 1052603 - Document custom colors for track changes Added section on custom colors for track changes in DOCX editor. --- .../Word/Word-Processor/react/track-changes.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index 5fb23f528f..ac70f52bd1 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -305,6 +305,19 @@ createRoot(document.getElementById('sample')).render(); {% 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 + let container = useRef(null); + container.documentEditorSettings.revisionSettings.revisionColors = [ '#0e76b1', '#bb00ff', '#c14f16']; +``` + ## Filter Changes by User The built-in review panel in the DOCX Editor supports filtering changes based on the user. @@ -319,4 +332,4 @@ Explore how to track and review changes in Word documents using the React DOCX E To learn more about Track Changes in the DOCX Editor component, refer to the video below. -{% youtube "https://www.youtube.com/watch?v=Ke27Mip4bN0" %} \ No newline at end of file +{% youtube "https://www.youtube.com/watch?v=Ke27Mip4bN0" %} From 39788591a89a07e7bbf45a608f830b08bfb1d451 Mon Sep 17 00:00:00 2001 From: Vellaisamy Auvudaiappan Date: Mon, 7 Sep 2026 13:20:29 +0530 Subject: [PATCH 2/3] 1052603-changed to single line in custom color of tc in track-changes.md file --- .../Word/Word-Processor/react/track-changes.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index ac70f52bd1..6f3a406a68 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -307,9 +307,7 @@ createRoot(document.getElementById('sample')).render(); ## 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. +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 From 4188c6fd7f23f412c6711afd8051cbe03b239e1b Mon Sep 17 00:00:00 2001 From: suriyaprakasamr Date: Thu, 10 Sep 2026 13:22:57 +0530 Subject: [PATCH 3/3] Refactor track changes example to use React hooks Updated the example to use a functional component with hooks for setting revision colors dynamically in the DOCX Editor. --- .../Word-Processor/react/track-changes.md | 39 ++++++++++++++++++- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index 6f3a406a68..ddfbae7509 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -312,8 +312,43 @@ You can set an array of colors to show track changes such as insertions and dele The following example illustrates how to set the color order for track changes in the DOCX Editor ```typescript - let container = useRef(null); - container.documentEditorSettings.revisionSettings.revisionColors = [ '#0e76b1', '#bb00ff', '#c14f16']; + 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 ( + + + + ); +} + +export default App; ``` ## Filter Changes by User