🎉 v0.5.0 is released. Read more →
GuidesUniver SheetsFeaturesThread Comment

Thread Comment 0.2.10+

Facade APIPaid VersionUniver ServerUniver on Node.jsPreset
✅-Optional-UniverSheetsThreadCommentPreset

The Comment plugin provides the ability to comment or annotate cells.

This feature includes the following plugin packages:

Presets Installation

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreEnUS from '@univerjs/presets/preset-sheets-core/locales/en-US';
import { UniverSheetsThreadCommentPreset } from '@univerjs/presets/preset-sheets-thread-comment';
import sheetsThreadCommentEnUS from '@univerjs/presets/preset-sheets-thread-comment/locales/en-US';
 
createUniver({
  locale: LocaleType.EN_US,
  locales: {
    enUS: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreEnUS,
      sheetsThreadCommentEnUS 
    ),
  },
  theme: defaultTheme,
  collaboration: true,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsThreadCommentPreset(),
  ],
});

If you are using Univer’s collaboration feature and want the collaboration feature to manage comment information, you need to provide configuration:

- UniverSheetsThreadCommentPreset(),
+ UniverSheetsThreadCommentPreset({ collaboration: true }),

Advanced Installation

npm install @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui @univerjs/thread-comment @univerjs/thread-comment-ui
import { LocaleType, Tools } from '@univerjs/core';
import { IThreadCommentMentionDataService, UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment';
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment';
import { UniverSheetsThreadCommentUIPlugin } from '@univerjs/sheets-thread-comment-ui';
import ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US';
import SheetsThreadCommentEnUS from '@univerjs/sheets-thread-comment/locale/en-US';
 
import '@univerjs/thread-comment-ui/lib/index.css';
 
import '@univerjs/sheets-thread-comment/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      ThreadCommentUIEnUS,
      SheetsThreadCommentEnUS
    ),
  },
});
 
univer.registerPlugin(UniverThreadCommentPlugin);
univer.registerPlugin(UniverThreadCommentUIPlugin);
univer.registerPlugin(UniverSheetsThreadCommentBasePlugin);
univer.registerPlugin(UniverSheetsThreadCommentPlugin);

If you use the collaboration plugin at the same time, you need to do the following:

npm install @univerjs-pro/thread-comment-datasource
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource';
 
univer.registerPlugin(UniverThreadCommentDataSourcePlugin);

Facade API

const univerAPI = FUniver.newAPI(univer);
 
// get cell
const workbook = univerAPI.getActiveWorkbook();
const worksheet = workbook.getActiveSheet();
// comment only attch to single cell, if range is A1:J10 equal A1
const range = worksheet.getRange(0, 0, 1, 1); // A1
 
// add comment to empty cell
range.addComment({
  dataStream: 'hello world\r\n',
});
 
// reply to current comment
range.addComment({
  dataStream: 'reply\r\n',
});
 
range.clearComment();
 
// get comment
const comment = range.getComment();
 
// update content
comment?.update({
  dataStream: 'hello world222\r\n',
});
 
// delete comment
comment?.delete();
 
// resolve comment
comment?.resolve();
 
// get replies
comment?.getReplies();
 
// get range of this comment
comment?.getRange();
 
// event
workbook.onBeforeUpdateThreadComment
workbook.onBeforeDeleteThreadComment
workbook.onBeforeAddThreadComment
// comment change event include add, update, delete
workbook.onThreadCommentChange
ChartsProFind & Replace