Edit History

📊 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 a history tracking feature based on collaborative editing, so before using Edit History, you need to install the Collaboration plugin first.

Installation

pnpm add @univerjs-pro/edit-history-viewer
pnpm add @univerjs-pro/edit-history-loader

Import

import '@univerjs-pro/edit-history-viewer/lib/index.css';
 
import { UniverEditHistoryLoaderPlugin } from '@univerjs-pro/edit-history-loader';

Internationalization

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

Register

When starting the edit-history feature, the UniverEditHistoryLoaderPlugin will load a new Univer instance and mount it on the specified DOM node.

Therefore, when registering, you need to provide the appropriate DOM node ID (e.g., the container of the original Univer instance) to ensure that the history panel covers the original Univer panel. If the node ID is not specified, it defaults to 'univer-container'.

 
univer.registerPlugin(UniverEditHistoryLoaderPlugin, { univerContainerId: 'Your-Univer-Container-Id'});

Feature Adaptation

The Univer instance for history tracking will only load the official plugins by default. Any third-party feature plugins developed for business needs must be registered with the HistoryLoaderService to be correctly displayed in the history tracking panel.

For official plugins that are already registered, their configurations can also be modified.

import { Disposable } from '@univerjs/core';
import { HistoryLoaderService } from '@univerjs-pro/edit-history-loader'
 
export class YourFeatureController extends Disposable {
  constructor(
    @Inject(HistoryLoaderService) private _historyLoaderService: HistoryLoaderService
  ) {
    super();
    // Similar to PluginService registration, the Univer instance for history tracking will register the corresponding plugin according to the following configuration after being created
    this._historyLoaderService.registerPlugin(YourPlugin, YourPluginConfig))
    // Configure officially registered plugins
    this._historyLoaderService.registerPlugin(ExamplePlugin, ExamplePluginConfig))
  }
}

Zen Editor Extending Univer in JavaScript