1055046: Prepared samples for JavaScript client samples for collaborative editing

README.md

@@ -1,204 +1,90 @@
 # Spreadsheet Collaborative Editing
 
-This repository showcases real-time collaborative editing using the Syncfusion® Spreadsheet Editor, allowing multiple users to edit the same workbook simultaneously. The project demonstrates how to implement collaborative features across multiple frontend frameworks (Angular, React, Vue, and TypeScript) with an ASP.NET Core backend.
+This repository demonstrates real-time collaborative editing in the Syncfusion® Spreadsheet. Multiple users can edit the same workbook simultaneously, and supported changes are synchronized across all users connected to the same collaboration room.
 
 ## Features
 
-- Real-time collaborative editing of spreadsheets
-- Support for multiple frontend frameworks:
-  - Angular
-  - React
-  - Vue
-  - TypeScript (Vanilla)
-- ASP.NET Core backend with SignalR for real-time communication
-- Redis integration for collaboration state management
-- Spreadsheet operations synchronization across multiple clients
-- Selection highlighting for other users' cursor positions
+- Real-time multi-user Spreadsheet editing
+- Synchronization of supported Spreadsheet actions
+- Participant presence and selection indicators
+- SignalR-based real-time communication
+- Redis-backed collaboration state management
+- Client samples for Angular, JavaScript, React, TypeScript, and Vue
 
 ## Prerequisites
 
-### Backend
-- .NET 10.0 SDK
-- Redis server (for collaboration state management)
-- Syncfusion license key
+- Node.js and npm
+- ASP.NET Core Collaboration Server
+- Redis Server or a hosted Redis service
+- A valid Syncfusion license key
+
+## Repository structure
+
+```text
+Spreadsheet-Collaborative-Editing/
+|-- client/
+|   |-- angular/
+|   |-- javascript/
+|   |-- react/
+|   |-- typescript/
+|   `-- vue/
+|-- server/
+|   `-- aspnet-core/
+|-- README.md
+`-- license
+```
+
+## Client samples
+
+- [Angular](./client/angular)
+- [JavaScript](./client/javascript)
+- [React](./client/react)
+- [TypeScript](./client/typescript)
+- [Vue](./client/vue)
 
-### Frontend
-- Node.js (v18 or later)
-- npm or yarn
+Refer to the README file inside each client folder for platform-specific installation, configuration, and run instructions.
 
-## Project Structure
+## Collaboration Server
 
+The Collaboration Server uses SignalR for real-time communication and Redis to maintain collaboration sessions and synchronize workbook actions.
+
+Configure the Redis connection string in the server settings:
+
+```json
+{
+  "ConnectionStrings": {
+    "Redis": "YOUR_REDIS_CONNECTION_STRING"
+  }
+}
 ```
-├── client/
-│   ├── angular/          # Angular implementation
-│   ├── react/            # React implementation
-│   ├── typescript/       # TypeScript/Vanilla implementation
-│   └── vue/              # Vue implementation
-├── server/
-│   └── aspnet-core/      # ASP.NET Core backend with SignalR
-└── README.md
+
+Refer to the README file inside the server folder for setup and run instructions.
+
+## Configure the server URL
+
+In each client sample, replace the Collaboration Server URL placeholder with the URL of the running server:
+
+```text
+YOUR_COLLABORATION_SERVER_URL
 ```
 
-## Setup
-
-### Backend Setup
-
-1. Navigate to the server directory:
-   ```bash
-   cd server/aspnet-core
-   ```
-
-2. Configure your Syncfusion license:
-   - Add your license key to `SyncfusionLicense.txt` file
-   - Or set the `SYNCFUSION_LICENSE_KEY` environment variable
-
-3. Configure Redis connection:
-   - Update the Redis connection string in `appsettings.json`:
-     ```json
-     {
-       "ConnectionStrings": {
-         "Redis": "your_redis_connection_string"
-       }
-     }
-     ```
-
-4. Run the server:
-   ```bash
-   dotnet run
-   ```
-
-   The server will start on `https://localhost:5001` by default.
-
-### Frontend Setup
-
-Choose one of the client implementations:
-
-#### Angular
-
-1. Navigate to the Angular client:
-   ```bash
-   cd client/angular
-   ```
-
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-3. Update the service URL in `src/components/spreadsheet-editor/spreadsheet-editor.component.ts`:
-   ```typescript
-   const serviceUrl: string = 'https://localhost:5001/';
-   ```
-
-4. Run the application:
-   ```bash
-   npm start
-   ```
-
-   The application will be available at `http://localhost:4200`.
-
-#### React
-
-1. Navigate to the React client:
-   ```bash
-   cd client/react
-   ```
-
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-3. Update the service URL in `src/SpreadsheetEditorAdapter.ts`:
-   ```typescript
-   const serviceUrl: string = 'https://localhost:5001/';
-   ```
-
-4. Run the application:
-   ```bash
-   npm run dev
-   ```
-
-   The application will be available at `http://localhost:5173`.
-
-#### Vue
-
-1. Navigate to the Vue client:
-   ```bash
-   cd client/vue
-   ```
-
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-3. Update the service URL in `src/SpreadsheetEditorAdapter.ts`:
-   ```typescript
-   const serviceUrl: string = 'https://localhost:5001/';
-   ```
-
-4. Run the application:
-   ```bash
-   npm run dev
-   ```
-
-   The application will be available at `http://localhost:5173`.
-
-#### TypeScript (Vanilla)
-
-1. Navigate to the TypeScript client:
-   ```bash
-   cd client/typescript
-   ```
-
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-
-3. Update the service URL in `src/spreadsheet-editor-adapter.ts`:
-   ```typescript
-   const serviceUrl: string = 'https://localhost:5001/';
-   ```
-
-4. Run the application:
-   ```bash
-   npm run dev
-   ```
-
-   The application will be available at `http://localhost:5173`.
+Users who connect to the same server and open a URL containing the same `id` query parameter join the same collaboration room.
 
-## Usage
-
-1. Start the backend server
-2. Start one of the frontend clients
-3. Open the application in multiple browser windows or devices
-4. Each user will be assigned a unique room ID automatically
-5. To collaborate in the same room, share the URL with the room ID parameter
-6. All users in the same room will see real-time updates as others edit the spreadsheet
-
-## API Endpoints
-
-The backend provides the following API endpoints:
-
-- `POST /api/CollaborativeEditing/ImportFile` - Import a file for collaborative editing
-
-## Contributing
-
-Contributions are welcome! Please follow these steps:
-
-1. Fork the repository
-2. Create a feature branch
-3. Commit your changes
-4. Push to the branch
-5. Create a pull request
+## Test collaborative editing
 
-## License
+1. Start Redis and the Collaboration Server.
+2. Start any client sample.
+3. Open the application in a browser.
+4. Copy the complete URL containing the `id` query parameter.
+5. Open the copied URL in another browser tab or window.
+6. Edit the workbook and verify that supported changes are synchronized between both clients.
+
+## Documentation
 
-This project uses Syncfusion Essential JS 2 components, which are licensed under either the Syncfusion Community License Program or the Syncfusion commercial license.
+- [Collaborative editing overview](https://help.syncfusion.com/document-processing/excel/spreadsheet/react/collaborative-editing/overview)
+- [Collaboration Client](https://help.syncfusion.com/document-processing/collaborator/collaboration-client)
+- [Collaboration Server](https://help.syncfusion.com/document-processing/collaborator/collaboration-server)
 
-Please refer to the [license](license) file for more information.
+## License
 
-To use this product, you must agree to and abide by Syncfusion's license containing all terms and conditions, which can be found at:
-https://www.syncfusion.com/content/downloads/syncfusion_license.pdf
+This project is licensed under the terms specified in the repository's license file.

client/angular/src/components/spreadsheet-editor/spreadsheet-editor.component.ts

@@ -8,8 +8,8 @@ import { CollaborationClient } from '@syncfusion/ej2-collaborator';
 import { SpreadsheetEditorAdapter } from './spreadsheet-editor-adapter';
 
 const serviceUrl: string =
-    'https://appservice-267100-e9c8cxaab6a2dfeu.centralindia-01.azurewebsites.net/';
-const currentUser: string = 'John';
+    ''YOUR_COLLABORATION_SERVER_URL'';
+const currentUser: string = 'John Adams';
 
 function getRoomName(): string {
     const currentUrl: URL = new URL(window.location.href);

client/javascript/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+dist
+.vscode/*
+!.vscode/extensions.json
+.DS_Store
+*.local

client/javascript/README.md

@@ -0,0 +1,79 @@
+# JavaScript Spreadsheet Collaborative Editing
+
+This example demonstrates real-time collaborative editing in the Syncfusion Essential JS 2 JavaScript Spreadsheet. Multiple users can edit the same workbook, and supported actions are synchronized through the Collaboration Server.
+
+## Prerequisites
+
+- Node.js
+- Redis Server
+- ASP.NET Core Redis Collaboration Server, or access to the configured hosted Collaboration Server
+
+## Install dependencies
+
+```bash
+npm install
+```
+
+## Configure the Collaboration Server
+
+The Collaboration Server URL is defined in `src/index.js`. Update `serviceUrl` when a different server endpoint is used.
+
+## Run the application
+
+```bash
+npm run dev
+```
+
+Open the URL displayed by Vite, normally:
+
+```text
+http://localhost:5173/
+```
+
+When the page opens without an `id` query parameter, the client generates a room ID and updates the URL. Open the complete URL in another browser tab or window to join the same collaboration room.
+
+Example:
+
+```text
+http://localhost:5173/?id=sample-room
+```
+
+## Project structure
+
+```text
+src/
+|-- index.js
+|-- spreadsheet-editor-adapter.js
+`-- style.css
+```
+
+## How it works
+
+1. `CollaborativeEditingHandler` is injected into the Spreadsheet.
+2. The Spreadsheet starts with collaborative editing enabled.
+3. The client obtains or generates a room ID from the URL.
+4. The adapter imports the latest workbook and room version from the server.
+5. `CollaborationClient` connects through SignalR and joins the room.
+6. Local Spreadsheet actions are sent from `actionComplete`.
+7. Remote actions are applied through `SpreadsheetEditorAdapter.applyRemoteAction`.
+
+## Build
+
+```bash
+npm run build
+```
+
+## Important packages
+
+- `@syncfusion/ej2-spreadsheet`
+- `@syncfusion/ej2-collaborator`
+- `@microsoft/signalr`
+- `@syncfusion/ej2-tailwind3-theme`
+
+## Troubleshooting
+
+If clients do not synchronize, verify that the Collaboration Server is reachable, Redis is running, all clients use the same room ID, and the browser console has no SignalR or CORS errors.
+
+## License
+
+Refer to the license file in the parent repository.

client/javascript/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>JavaScript Spreadsheet Collaborative Editing</title>
+</head>
+<body>
+  <div id="spreadsheet"></div>
+  <script type="module" src="/src/index.js"></script>
+</body>
+</html>