Collaborative Editing

📊 Univer Sheet

🏆

This feature contains closed-source code, allowing any user to use it for free. It also includes an optional business upgrade plan that provides richer features and services.

💻

This feature depends on the Univer backend service. Please make sure you have read the related documentation and completed the deployment before using it.

Univer provides collaborative editing functions, supporting multiple people to edit the same workbook at the same time.

Installation

pnpm add @univerjs-pro/collaboration @univerjs-pro/collaboration-client

Import

import '@univerjs-pro/collaboration-client/lib/index.css';
 
import { UniverCollaborationPlugin } from '@univerjs-pro/collaboration';
import { UniverCollaborationClientPlugin } from '@univerjs-pro/collaboration-client';

Internationalization

import { LocaleType, Tools } from '@univerjs/core';
import CollaborationClientEnUS from '@univerjs-pro/collaboration-client/locale/en-US';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      CollaborationClientEnUS
    ),
  },
});

Register

// By setting the override option to [[IAuthzIoService, null]], you can instruct Univer not to register the built-in IAuthzIoService.
// By setting the override option to [[IUndoRedoService, null]], you can instruct Univer not to register the built-in IUndoRedoService.
// This way, Univer will use the services provided by the UniverCollaborationPlugin as the implementation for the authorization and undo-redo features.
const univer = new Univer({
  override: [
    [IAuthzIoService, null]
    [IUndoRedoService, null],
  ],
});
 
univer.registerPlugin(UniverCollaborationPlugin);
univer.registerPlugin(UniverCollaborationClientPlugin, {
  authzUrl: 'http://localhost:3010/universer-api/authz',
  snapshotServerUrl: 'http://localhost:3010/universer-api/snapshot',
  collabSubmitChangesetUrl: 'http://localhost:3010/universer-api/comb',
  collabWebSocketUrl: 'ws://localhost:3010/universer-api/comb/connect',
});

Automatically Load Data

@univerjs-pro/collaboration-client plugin provides a feature that automatically loads corresponding data according to the URL parameters unit and type, which can simplify the data loading logic in some cases.

If you want to use this feature, you need to modify the original data loading logic appropriately and add the unit and type parameters to the URL, as shown below:

import { UniverInstanceType } from '@univerjs/core';
 
- univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});
 
+ const url = new URL(window.location.href);
+ const unit = url.searchParams.get('unit');
 
+ if (unit) {
+   // If the URL contains the unit parameter, the data will be loaded automatically
+ } else {
+   // Or create a new workbook
+   fetch(`/universer-api/snapshot/${UniverInstanceType.UNIVER_SHEET}/unit/-/create`, {
+     method: 'POST',
+     headers: {
+       'Content-Type': 'application/json',
+     },
+     body: JSON.stringify({
+       type: UniverInstanceType.UNIVER_SHEET, // instance type
+       name: 'New Sheet By Univer', // sheet name
+       creator: 'user',  // creator name
+     }),
+   }).then((response) => {
+     if (!response.ok) {
+       throw new Error('create unit failed');
+     }
+
+     return response.json();
+   }).then((data) => {
+     if (!data.unitID) {
+       throw new Error('create unit failed');
+     }
+
+     url.searchParams.set('unit', data.unitID);
+     url.searchParams.set('type', String(UniverInstanceType.UNIVER_SHEET));
+     window.location.href = url.toString();
+   }).catch((error) => {
+     console.error(error);
+   })
+ }

Import & Export Live Share