From bb16831a031563ec1a5cf1c269362252bbdd1138 Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Tue, 7 Jul 2026 20:56:03 +0530 Subject: [PATCH 1/2] 1037470: Resolved technical issues in react document editor --- .../Word-Processor/react/track-changes.md | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/track-changes.md b/Document-Processing/Word/Word-Processor/react/track-changes.md index b6756560c5..c5cfb9128f 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -28,15 +28,13 @@ import * as React from 'react'; import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); -let documenteditor; +let documenteditor = useRef(null); function App() { return ( { - documenteditor = scope; - }} + ref={documenteditor} // Use the following service URL only for demo purposes serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} @@ -89,8 +87,10 @@ function App() { let container = null; React.useEffect(() => { - container.documentEditor.showRevisions = true; // To show revisions pane - container.documentEditor.showRevisions = false; // To hide revisions pane + if (container) { + container.documentEditor.showRevisions = true; // To show revisions pane + container.documentEditor.showRevisions = false; // To hide revisions pane + } }, [container]); // Re-run the effect when the container is initialized return ( @@ -180,11 +180,15 @@ let revisions: RevisionCollection = documentEditor.revisions; /** * Accept specific changes */ -revisions.get(0).accept(); +if (revisions.length > 0) { + revisions.get(0).accept(); +} /** * Reject specific changes */ -revisions.get(1).reject(); +if (revisions.length > 1) { + revisions.get(1).reject(); +} {% endhighlight %} {% endtabs %} @@ -219,7 +223,7 @@ The following example illustrates how to enable and update custom metadata for t {% tabs %} {% highlight ts tabtitle="TS" %} -import * as ReactDOM from 'react-dom'; +import { createRoot } from 'react-dom/client'; import * as React from 'react'; import { DocumentEditorContainerComponent, @@ -237,14 +241,15 @@ function App() { container = scope; }} height={'590px'} - serviceUrl="HostUrl" + // Use the following service URL only for demo purposes + serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableTrackChanges={true} documentEditorSettings={settings} /> ); } export default App; -ReactDOM.render(, document.getElementById('sample')); +createRoot(document.getElementById('sample')).render(); {% endhighlight %} {% endtabs %} @@ -266,13 +271,14 @@ The following example demonstrates how to restrict an author from accept or reje import { createRoot } from 'react-dom/client'; import * as React from 'react'; +import { useRef } from 'react'; import { DocumentEditorContainerComponent, Toolbar, } from '@syncfusion/ej2-react-documenteditor'; DocumentEditorContainerComponent.Inject(Toolbar); function App() { - let container = DocumentEditorContainerComponent; + const container = useRef(null); // Event gets triggered before accepting/rejecting changes const beforeAcceptRejectChanges = (args) => { // Check the author of the revision @@ -285,9 +291,7 @@ function App() {
{ - container = scope; - }} + ref={container} height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} From 438406e8a8a12259dcfdcb5b02a02c15cedf7c8e Mon Sep 17 00:00:00 2001 From: VijayalakshmiGSF4561 Date: Tue, 7 Jul 2026 21:57:35 +0530 Subject: [PATCH 2/2] 1037470: Resolved grammar issues in react track changes --- .../Word/Word-Processor/react/track-changes.md | 6 +++--- 1 file changed, 3 insertions(+), 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 c5cfb9128f..84a9e072ff 100644 --- a/Document-Processing/Word/Word-Processor/react/track-changes.md +++ b/Document-Processing/Word/Word-Processor/react/track-changes.md @@ -8,7 +8,7 @@ documentation: ug domainurl: ##DomainURL## --- -# Track Change in React DOCX Editor +# Track Changes in React DOCX Editor [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports Track Changes functionality, which allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject these modifications. It is a useful tool for managing changes made by several reviewers to the same document. When the Track Changes option is enabled, all editing operations are preserved as revisions in the Document Editor. @@ -48,7 +48,7 @@ createRoot(document.getElementById('sample')).render(); {% endhighlight %} {% endtabs %} -N> Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set enableTrackChanges: true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes in documentChange event. +N> Track changes are document level settings. When opening a document, if the document does not have track changes enabled, `enableTrackChanges` is reset to `false` even if you set it to `true` initially. If you want to enable track changes for all the documents, then we recommend enabling track changes in the `documentChange` event. The following example demonstrates how to enable track changes for the all the document while opening. @@ -262,7 +262,7 @@ N> When the document is exported as SFDT, the customData value is stored in the ## Restrict accept or reject by author -Accepting or rejecting changes can be restricted based on the author’s name. +Accepting or rejecting changes can be restricted based on the author’s name. The `beforeAcceptRejectChanges` event is triggered before both accept and reject actions, so the same handler can be used to restrict either operation. The following example demonstrates how to restrict an author from accept or reject changes.