Skip to content

Commit 64641c8

Browse files
Bold Create Agentsuriyaprakasamr
Bold Create Agent
and
suriyaprakasamr
committed
Add Side-by-Side Comparison sample for TypeScript DOCX Editor
Co-authored-by: suriyaprakasamr <302142999+suriyaprakasamr@users.noreply.github.com>
1 parent 4e041ae commit 64641c8

11 files changed

Lines changed: 992 additions & 0 deletions

File tree

‎Side-by-Side-Comparison/README.md‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# TypeScript DOCX Editor – Compare Original and Revised Documents
2+
3+
## Introduction
4+
5+
This repository contains a TypeScript sample that demonstrates how to compare two Word documents side-by-side using the Syncfusion<sup style="font-size:70%">&reg;</sup> [JavaScript (ES6) DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) (Document Editor). The sample lets users upload an original and a revised document, compare them through the Document Editor web service, and review the result with revision tracking – all inside two side-by-side editors.
6+
7+
### Features
8+
9+
- Upload an original Word document.
10+
- Upload a revised Word document.
11+
- Compare both documents.
12+
- View tracked revisions in the comparison result.
13+
- Switch between:
14+
- Original vs Compared document
15+
- Original vs Revised document
16+
- Synchronized scrolling between the two editors.
17+
- Download the comparison result as a DOCX file.
18+
19+
---
20+
21+
# How to Run the Application
22+
23+
## Prerequisites
24+
25+
Before running the sample, ensure the following software is installed:
26+
27+
- [Node.js](https://nodejs.org/) (LTS)
28+
- [npm](https://www.npmjs.com/)
29+
30+
---
31+
32+
## Configuration
33+
34+
No additional configuration is required.
35+
36+
This sample is already configured to use the online Syncfusion Document Editor service:
37+
38+
```ts
39+
const serviceUrl =
40+
"https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/"; //only for demo purpose.
41+
```
42+
43+
Since the application consumes the hosted web service, you do **not** need to download, build, or run any ASP.NET Core Web API project.
44+
45+
---
46+
47+
## Install Dependencies
48+
49+
Open the project folder in a terminal and install the required packages.
50+
51+
```bash
52+
npm install
53+
```
54+
55+
---
56+
57+
## Run the Application
58+
59+
Start the TypeScript development server (webpack-dev-server).
60+
61+
```bash
62+
npm start
63+
```
64+
65+
The application will launch in your default browser.
66+
67+
If it does not open automatically, browse to:
68+
69+
```
70+
http://localhost:4000
71+
```
72+
73+
---
74+
75+
## Build the Application
76+
77+
Generate a production build in the `dist/` folder.
78+
79+
```bash
80+
npm run build
81+
```
82+
83+
---
84+
85+
## Verify the Sample
86+
87+
1. Launch the application.
88+
2. Click **Choose file** under **Original document** and select a DOCX (or SFDT) file.
89+
3. Click **Choose file** under **Revised document** and select another version of the same document.
90+
4. Click **Compare**.
91+
5. The application sends both documents to the online Document Editor service.
92+
6. The comparison result is displayed in the right-side editor with tracked revisions.
93+
7. Toggle between:
94+
- **Show comparison results with tracked changes** (Original vs Compared)
95+
- Uncheck the option to show **Original vs Revised**
96+
8. Review insertions, deletions, and formatting changes using the Document Editor revision features.
97+
9. Use the **Download Result Document** button to save the right-side editor's contents as a DOCX file.
98+
99+
---
100+
101+
## Demo
102+
103+
<p align="center">
104+
<img
105+
src="images/compare-documents-demo-typescript-docx-editor.png"
106+
alt="TypeScript DOCX Editor Compare Documents Demo"
107+
width="1000" />
108+
</p>
109+
110+
---
111+
112+
# Project Workflow
113+
114+
The application follows the workflow below:
115+
116+
1. User uploads the original document.
117+
2. User uploads the revised document.
118+
3. Both documents are sent to the Syncfusion online Document Editor service.
119+
4. The service:
120+
- Imports the DOCX files.
121+
- Compares both documents.
122+
- Generates a document with tracked revisions.
123+
5. The comparison result is returned in SFDT format.
124+
6. The TypeScript application loads the original document in the left editor.
125+
7. The compared document (or revised document) is loaded in the right editor for side-by-side review.
126+
127+
```
128+
Original DOCX
129+
│
130+
│
131+
▼
132+
TypeScript Application
133+
│
134+
│
135+
▼
136+
Syncfusion Online Document Editor Service
137+
│
138+
├── Import Original
139+
├── Import Revised
140+
└── Compare Documents
141+
│
142+
▼
143+
Compared SFDT Document
144+
│
145+
▼
146+
TypeScript DOCX Editor
147+
│
148+
├── Left Editor → Original
149+
└── Right Editor → Compared / Revised
150+
```
151+
152+
---
153+
154+
# Project Files
155+
156+
| Path | Description |
157+
|------|-------------|
158+
| `src/app/app.ts` | Main TypeScript entry point that wires up the two editors and the compare UI. |
159+
| `src/index.html` | Application HTML host. |
160+
| `src/styles/styles.css` | Styles for the editor toolbar, upload controls, and loading overlay. |
161+
| `src/resources/favicon.ico` | Application favicon. |
162+
| `webpack.config.js` | Webpack 5 configuration used by `npm start` and `npm run build`. |
163+
| `tsconfig.json` | TypeScript compiler options. |
164+
| `package.json` | npm metadata and scripts. |
165+
166+
---
167+
168+
# Resources
169+
170+
- **Product page:** [Syncfusion® JavaScript (ES6) DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/javascript-docx-editor?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples)
171+
172+
- **Documentation:** [Syncfusion® JavaScript (ES6) DOCX Editor - Documentation](https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/overview?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples)
173+
174+
- **Online demo:** [Syncfusion® JavaScript (ES6) DOCX Editor - Online demo](https://document.syncfusion.com/demos/docx-editor/javascript/#/material3/document-editor/default.html?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples)
175+
176+
# Support and feedback
177+
178+
For any other queries, reach our [Syncfusion® support team](https://support.syncfusion.com/?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) or post the queries through the [community forums](https://www.syncfusion.com/forums?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).
179+
180+
Request new feature through [Syncfusion® feedback portal](https://www.syncfusion.com/feedback?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).
181+
182+
# License
183+
184+
This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of [Syncfusion's EULA](https://www.syncfusion.com/license/studio/syncfusion_essential_studio_eula.pdf?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples). You can purchase a license [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).

‎Side-by-Side-Comparison/gulpfile.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use strict';
2+
3+
var gulp = require('gulp');
4+
5+
/**
6+
* Compile TypeScript to JS
7+
*/
8+
gulp.task('compile', function (done) {
9+
var webpack = require('webpack');
10+
var webpackStream = require('webpack-stream');
11+
gulp.src(['./src/app/app.ts']).pipe(webpackStream({
12+
config: require('./webpack.config.js')
13+
}, webpack))
14+
.pipe(gulp.dest('./dist'))
15+
.on('end', function () {
16+
done();
17+
});
18+
});
19+
20+
/**
21+
* Testing spec files
22+
*/
23+
var protractor = require('gulp-protractor').protractor;
24+
var webdriver_standalone = require('gulp-protractor').webdriver_standalone;
25+
var webdriver_update = require('gulp-protractor').webdriver_update_specific;
26+
27+
gulp.task('e2e-serve', webdriver_standalone);
28+
29+
gulp.task('e2e-webdriver-update', webdriver_update({
30+
webdriverManagerArgs: ['--ie', '--edge']
31+
}));
32+
33+
gulp.task('e2e-test', gulp.series('compile', function (done) {
34+
var browserSync = require('browser-sync');
35+
var bs = browserSync.create('Essential JS 2');
36+
var options = {
37+
server: {
38+
baseDir: [
39+
'./dist/',
40+
],
41+
directory: true
42+
},
43+
ui: false,
44+
open: false,
45+
notify: false
46+
};
47+
bs.init(options, function () {
48+
gulp.src(['./spec/**/*.spec.js'])
49+
.pipe(protractor({
50+
configFile: 'e2e/protractor.conf.js'
51+
}))
52+
.on('error', function (e) {
53+
console.error('Error: ' + e.message);
54+
done();
55+
process.exit(1);
56+
})
57+
.on('end', function () {
58+
done();
59+
process.exit(0);
60+
});
61+
});
62+
}));

‎Side-by-Side-Comparison/images/compare-documents-demo-typescript-docx-editor.png‎

2.9 KB
Loading

‎Side-by-Side-Comparison/license‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Essential JS 2 library is available under the Syncfusion Essential Studio program, and can be licensed either under the Syncfusion Community License Program or the Syncfusion commercial license.
2+
3+
To be qualified for the Syncfusion Community License Program you must have a gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and have less than five (5) developers in your organization, and agree to be bound by Syncfusion’s terms and conditions.
4+
5+
Customers who do not qualify for the community license can contact sales@syncfusion.com for commercial licensing options.
6+
7+
Under no circumstances can you use this product without (1) either a Community License or a commercial license and (2) without agreeing and abiding by Syncfusion’s license containing all terms and conditions.
8+
9+
The Syncfusion license that contains the terms and conditions can be found at
10+
https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

‎Side-by-Side-Comparison/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "typescript-docx-editor-side-by-side-comparison",
3+
"version": "1.0.0",
4+
"description": "TypeScript DOCX Editor - Side-by-Side document comparison sample using Syncfusion Document Editor.",
5+
"author": "Syncfusion Inc.",
6+
"license": "SEE LICENSE IN license",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/SyncfusionExamples/JavaScript-ES6-DOCX-Editor-Examples.git"
10+
},
11+
"scripts": {
12+
"start": "webpack serve --mode development",
13+
"build": "webpack --mode production",
14+
"serve": "gulp e2e-serve",
15+
"test": "gulp e2e-test",
16+
"update-webdriver": "gulp e2e-webdriver-update"
17+
},
18+
"devDependencies": {
19+
"ajv": "^8.17.1",
20+
"browser-sync": "^3.0.3",
21+
"css-loader": "^7.1.2",
22+
"gulp": "^5.0.0",
23+
"gulp-protractor": "^4.1.1",
24+
"gulp-typescript": "^5.0.1",
25+
"html-webpack-plugin": "^5.6.4",
26+
"jasmine": "^5.7.1",
27+
"mini-css-extract-plugin": "^2.9.4",
28+
"ts-loader": "^9.5.4",
29+
"typescript": "^5.9.2",
30+
"webpack": "^5.102.0",
31+
"webpack-cli": "^6.0.1",
32+
"webpack-dev-server": "^5.2.0",
33+
"webpack-stream": "^7.0.0"
34+
},
35+
"dependencies": {
36+
"@syncfusion/ej2-documenteditor": "^35.1.40",
37+
"@syncfusion/ej2-tailwind3-theme": "^35.1.40"
38+
}
39+
}

0 commit comments

Comments
 (0)