Edit History

Facade API	Has Paid Plan	Univer Server	Univer on Node.js	Preset
-	✅	✅	-	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.

Piecemeal Installation


npm install @univerjs-pro/edit-history-viewer @univerjs-pro/edit-history-loader


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


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


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


import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
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]: merge(
      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’.

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.

By HistoryLoaderService, you can also get or subscribe to the Univer instance of Edit History, to support more extended operations.


import { HistoryLoaderService } from '@univerjs-pro/edit-history-loader';
// Presets Import: import { HistoryLoaderService } from '@univerjs/presets/preset-sheets-collaboration';
 
const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
  if (stage === univerAPI.Enum.LifecycleStages.Steady) {
    const injector = univer.__getInjector();
    const historyLoaderService = injector.get(HistoryLoaderService);
 
    // Similar to PluginService registration, the Univer instance for history tracking will register the corresponding plugin according to the following configuration after being created
    historyLoaderService.registerPlugin(YourPlugin, YourPluginConfig);
    // Configure officially registered plugins
    historyLoaderService.registerPlugin(ExamplePlugin, ExamplePluginConfig, true);
 
    // If the history feature is loaded, you can directly get the Univer instance of history
    const historyUniver = historyLoaderService.historyUniver;
  }
});
 
// Remove event listener, use `disposable.dispose()`