Edit History

Preset ModePlugin Mode

Preset Info

@univerjs/preset-docs-collaboration

Server Required

Yes

Caution

The edit history functionality requires support from the Univer server. Please ensure that you have correctly installed and configured the Univer server. For details, please refer to: Upgrading to Pro

Edit History allows users to view and restore historical versions of documents, supporting various filtering and searching methods to help users efficiently manage document content.

Caution

The Edit History feature creates an independent Univer instance to handle the loading and display of historical records. If you need to operate or configure the Univer instance for historical records (such as modifying interface request headers, registering plugins, etc.), please refer to the section Getting the Univer Instance for Edit History.

Preset Mode

Installation

The UniverSheetsAdvancedPreset preset from @univerjs/preset-sheets-advanced depends on the UniverSheetsDrawingPreset preset at runtime. Please install @univerjs/preset-sheets-drawing first.

npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced

Usage

import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced'
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US'
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing'
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US'
import { createUniver, LocaleType, merge } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css'
import '@univerjs/preset-sheets-advanced/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, 
      UniverPresetSheetsAdvancedEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset(), 
    UniverSheetsAdvancedPreset({ 
      universerEndpoint: 'http://localhost:3010', 
    }), 
  ],
})

If you have a commercial license for Univer, please refer to Using License in Client for configuration.

Presets and Configuration

The UniverSheetsAdvancedPreset configuration options:

interface IUniverSheetsAdvancedPresetConfig {
  // The endpoint of the Univer Server
  universerEndpoint?: string
}

Plugin Mode

Installation

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

Usage

import { UniverEditHistoryLoaderPlugin } from '@univerjs-pro/edit-history-loader'
import EditHistoryViewerEnUS from '@univerjs-pro/edit-history-viewer/locale/en-US'
import { LocaleType, merge, Univer } from '@univerjs/core'

import '@univerjs-pro/edit-history-viewer/lib/index.css'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: merge(
      {},
      EditHistoryViewerEnUS, 
    ),
  },
})

univer.registerPlugin(UniverEditHistoryLoaderPlugin, { 
  univerContainerId: 'your-univer-container-id', 
})

If you have a commercial license for Univer, please refer to Using License in Client for configuration.

Plugins and Configuration

The UniverEditHistoryLoaderPlugin configuration options:

interface IUniverEditHistoryLoaderConfig {
  univerContainerId?: string
  // The server url of the history list
  historyListServerUrl?: string
}

When enabling edit history, the UniverEditHistoryLoaderPlugin will load a new Univer instance and mount it on the specified DOM node. Therefore, when registering, you need to provide a suitable DOM node id (such as the original Univer instance's container) to achieve the purpose of the history panel covering the original Univer panel. If the node id is not specified, it defaults to univer-container.

If you need to modify the server address for the history list, you can set it through the historyListServerUrl configuration option, which defaults to /universer-api/history.

Getting the Univer Instance for Edit History

Good to Know

The Univer instance for edit history is created only when the history panel is opened for the first time.

If you need to operate or configure the Univer instance for edit history (such as modifying interface request headers, registering plugins, etc.), you can obtain the instance through HistoryLoaderService.

import { HistoryLoaderService } from '@univerjs/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)

    historyLoaderService.historyUniver$.subscribe((historyUniver) => {
      // 在这里可以使用 historyUniver 实例进行操作
    })
  }
})

// Remove the event listener using `disposable.dispose()`

import { HistoryLoaderService } from '@univerjs-pro/edit-history-loader'

const disposable = univerAPI.addEvent(univerAPI.Event.LifeCycleChanged, ({ stage }) => {
  if (stage === univerAPI.Enum.LifecycleStages.Steady) {
    const injector = univer.__getInjector()
    const historyLoaderService = injector.get(HistoryLoaderService)

    historyLoaderService.historyUniver$.subscribe((historyUniver) => {
      if (!historyUniver) return

      // You can perform operations on the historyUniver instance here
    })
  }
})

// Remove the event listener using `disposable.dispose()`

Third-Party Plugin Adaptation

The Univer instance for edit history will only load official plugins by default. Third-party Feature Plugins developed for business needs need to be registered with the HistoryLoaderService to be displayed correctly in the history.

const injector = univer.__getInjector()
const historyLoaderService = injector.get(HistoryLoaderService)

// The registration method is the same as that of PluginService. The Univer instance for edit history will register the corresponding plugins according to the following configuration after creation.
historyLoaderService.registerPlugin(YourPlugin, YourPluginConfig)
// Configure the officially registered plugin, set the true parameter to indicate that the original configuration should be overridden
historyLoaderService.registerPlugin(ExamplePlugin, ExamplePluginConfig, true)

On this page