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

Thread Comment 0.2.10+

Facade APIHas Paid PlanUniver 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, merge } 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 UniverPresetSheetsThreadCommentEnUS from '@univerjs/presets/preset-sheets-thread-comment/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-thread-comment.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsThreadCommentEnUS 
    ),
  },
  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 }),

Piecemeal Installation

npm install @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui @univerjs/thread-comment @univerjs/thread-comment-ui
import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment';
import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
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 SheetsThreadCommentUIEnUS from '@univerjs/sheets-thread-comment-ui/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]: merge(
      ThreadCommentUIEnUS,
      SheetsThreadCommentUIEnUS
    ),
  },
});
 
univer.registerPlugin(UniverThreadCommentPlugin);
univer.registerPlugin(UniverThreadCommentUIPlugin);
univer.registerPlugin(UniverSheetsThreadCommentPlugin);
univer.registerPlugin(UniverSheetsThreadCommentUIPlugin);

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

To get full defination of facade api, please refer to FacadeAPI

Add / Clear cell comment

Add / Clear the comment to the start cell in the current range.

const worksheet = univerAPI.getActiveWorkbook().getActiveSheet();
 
// comment only attch to single cell, if range is A1:J10 equal A1
const range = worksheet.getRange(0, 0, 1, 1);
 
// add comment to empty cell
await range.addComment({
  dataStream: 'hello world\r\n',
});
 
// reply to current comment
await range.addComment({
  dataStream: 'reply\r\n',
});
 
// clear comment
await range.clearComment();

Get cell comment

Get the comment of the start cell in the current range and return an FThreadComment object, or null if there is no comment.

const worksheet = univerAPI.getActiveWorkbook().getActiveSheet();
 
// comment only attch to single cell, if range is A1:J10 equal A1
const range = worksheet.getRange(0, 0, 1, 1);
 
// get comment
const comment = range.getComment();
console.log(comment);

Update / Delete / Resolve comment

// update content
await comment?.update({
  dataStream: 'hello world222\r\n',
});
 
// delete comment
await comment?.delete();
 
// or
 
// resolve comment
await comment?.resolve();

Get comment replies list

Returns an array of FThreadComment objects.

// get replies
const replies = comment?.getReplies();
console.log(replies);
 
// get range of this comment
console.log(comment?.getRange());

Event

const workbook = univerAPI.getActiveWorkbook();
 
// event
workbook.onBeforeAddThreadComment
workbook.onBeforeUpdateThreadComment
workbook.onBeforeDeleteThreadComment
 
// comment change event include add, update, delete
workbook.onThreadCommentChange
 
// event callback return false will stop the corresponding operation
ChartsProFind & Replace
Was this page helpful?