GuidesUniver SheetsFeaturesEdit HistoryPro

Edit History

Facade APIPaid VersionUniver ServerUniver on Node.jsPreset
โœ…โœ…โœ…-UniverSheetsCollaborationPreset

Univer provides a history tracking feature based on collaborative editing, so before using Edit History, you need to install the Collaboration feature first.

This feature includes the following plugin packages:

Presets Installation

Please follow the instructions in Collaborative Editing.

Advanced Installation

npm install @univerjs-pro/edit-history-viewer @univerjs-pro/edit-history-loader
import { LocaleType, Tools } from '@univerjs/core';
import { UniverEditHistoryLoaderPlugin } from '@univerjs-pro/edit-history-loader';
import EditHistoryViewerEnUS from '@univerjs-pro/edit-history-viewer/locale/en-US';
 
import '@univerjs-pro/edit-history-viewer/lib/index.css';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      EditHistoryViewerEnUS
    ),
  },
});
 
univer.registerPlugin(UniverEditHistoryLoaderPlugin, { 
  univerContainerId: 'Your-Univer-Container-Id',
});

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))
  }
}