Skip to content

Commit 0ec14bf

Browse files
feat: add word addin example
1 parent 049f7d5 commit 0ec14bf

33 files changed

Lines changed: 3882 additions & 0 deletions
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
auth0-config.js
2+
server-domain.js
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"folders": [
3+
{
4+
"path": "."
5+
}
6+
]
7+
}
Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# SuperDoc MS Add-in Sync
2+
3+
Real-time document synchronization between Microsoft Word Add-in and web editor using WebSocket communication.
4+
5+
## Architecture
6+
7+
The system consists of three main components:
8+
- **MS Word Add-in** (`src/taskpane/taskpane.js`) - Runs inside Microsoft Word
9+
- **Web Editor** (`server/public/editor.js`) - Browser-based document editor
10+
- **Node.js Server** (`server/server.js`) - WebSocket server handling real-time sync
11+
12+
## WebSocket Events
13+
14+
The WebSocket communication uses the following event types:
15+
16+
### `client_ready`
17+
**Sent by:** Web Editor
18+
**Handled by:** Server (broadcasts to other clients)
19+
**Purpose:** Signals that a browser client has loaded and is ready to receive authentication
20+
21+
```javascript
22+
// Sent by editor.js
23+
websocket.send(JSON.stringify({
24+
type: 'client_ready'
25+
}));
26+
27+
// Broadcasted by server.js to other clients
28+
{
29+
type: 'client_ready',
30+
timestamp: '2024-01-01T00:00:00.000Z'
31+
}
32+
```
33+
34+
### `token_transfer`
35+
**Sent by:** MS Word Add-in
36+
**Handled by:** Server (validates and broadcasts to other clients), Web Editor
37+
**Purpose:** Transfers authentication token from Word add-in to web editor
38+
39+
```javascript
40+
// Sent by taskpane.js
41+
websocket.send(JSON.stringify({
42+
type: 'token_transfer',
43+
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik...'
44+
}));
45+
46+
// Broadcasted by server.js after validation
47+
{
48+
type: 'token_transfer',
49+
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik...',
50+
user: {
51+
email: 'user@example.com',
52+
name: 'User Name',
53+
picture: 'https://example.com/avatar.jpg'
54+
},
55+
timestamp: '2024-01-01T00:00:00.000Z'
56+
}
57+
58+
// Error response
59+
{
60+
type: 'token_transfer',
61+
error: 'Invalid token',
62+
timestamp: '2024-01-01T00:00:00.000Z'
63+
}
64+
```
65+
66+
### `document_update`
67+
**Sent by:** MS Word Add-in, Web Editor
68+
**Handled by:** Server (validates and broadcasts to other clients), MS Word Add-in, Web Editor
69+
**Purpose:** Real-time document synchronization between clients
70+
71+
```javascript
72+
// Sent by taskpane.js or editor.js
73+
websocket.send(JSON.stringify({
74+
type: 'document_update',
75+
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6Ik...',
76+
document: 'UEsDBBQABgAIAAAAIQDb4fbL7...' // Base64 encoded .docx
77+
}));
78+
79+
// Broadcasted by server.js after validation
80+
{
81+
type: 'document_update',
82+
document: 'UEsDBBQABgAIAAAAIQDb4fbL7...',
83+
author: 'user@example.com',
84+
timestamp: '2024-01-01T00:00:00.000Z'
85+
}
86+
```
87+
88+
### `close`
89+
**Sent by:** Server
90+
**Handled by:** MS Word Add-in, Web Editor
91+
**Purpose:** Notifies clients when another connection closes
92+
93+
```javascript
94+
// Broadcasted by server.js
95+
{
96+
type: 'close',
97+
timestamp: '2024-01-01T00:00:00.000Z'
98+
}
99+
```
100+
101+
### `error`
102+
**Sent by:** Server
103+
**Handled by:** MS Word Add-in, Web Editor
104+
**Purpose:** Notifies clients when a connection error occurs
105+
106+
```javascript
107+
// Broadcasted by server.js
108+
{
109+
type: 'error',
110+
timestamp: '2024-01-01T00:00:00.000Z'
111+
}
112+
```
113+
114+
## Authentication Flow
115+
116+
1. Web editor loads and sends `client_ready` to server
117+
2. Server broadcasts `client_ready` to Word add-in
118+
3. Word add-in sends `token_transfer` with user's authentication token
119+
4. Server validates token against Auth0 and broadcasts `token_transfer` with user info to web editor
120+
5. Both clients are now authenticated and can send `document_update` events
121+
122+
## Real-time Synchronization
123+
124+
- Document changes in Word trigger `document_update` events via selection change detection
125+
- Document changes in web editor trigger `document_update` events via SuperDoc's `onEditorUpdate` callback
126+
- All `document_update` events include the full document as Base64-encoded .docx
127+
- Server validates authentication token before broadcasting updates
128+
- Clients update their document content when receiving `document_update` events
129+
130+
## Setup
131+
132+
1. Install dependencies:
133+
```bash
134+
npm install
135+
cd server && npm install
136+
```
137+
138+
2. Configure Auth0 in `src/auth0-config.js` and `src/server-domain.js`
139+
140+
3. Start the server:
141+
```bash
142+
npm run server
143+
```
144+
145+
4. Build and run the add-in:
146+
```bash
147+
npm run build
148+
npm start
149+
```
108 KB
Loading
108 KB
Loading
114 KB
Loading
114 KB
Loading
114 KB
Loading
114 KB
Loading
114 KB
Loading

0 commit comments

Comments
Β (0)