Comment / Annotation

📊 Univer Sheet

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

Installation

pnpm add @univerjs/sheets-thread-comment @univerjs/thread-comment-ui

Import

import '@univerjs/thread-comment-ui/lib/index.css';
 
import { IThreadCommentMentionDataService } from '@univerjs/thread-comment-ui';
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment';

Internationalization

import { LocaleType, Tools } from '@univerjs/core';
ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US';
import SheetsThreadCommentEnUS from '@univerjs/sheets-thread-comment/locale/en-US';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: Tools.deepMerge(
      ThreadCommentUIEnUS,
      SheetsThreadCommentEnUS
    ),
  },
});

Register

const mockUser = {
  userID: 'mockId',
  name: 'MockUser',
  avatar: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAInSURBVHgBtZU9TxtBEIbfWRzFSIdkikhBSqRQkJqkCKTCFkqVInSUSaT0wC8w/gXxD4gU2nRJkXQWhAZowDUUWKIwEgWWbEEB3mVmx3dn4DA2nB/ppNuPeWd29mMIPXDr+RxwtgRHeW6+guNPRxogqnL7Dwz9psJ27S4NShaeZTH3kwXy6I81dlRKcmRui88swdq9AcSFL7Buz1Vmlns64MiLsCjzwnIYHLH57tbfFbs7KRaXyEU8FVZofqccOfA5l7Q8LPIkGrwnb2RPNEXWFVMUF3L+kDCk0btDDAMzOm5YfAHDwp4tG74wnzAsiOYMnJ3GoDybA7IT98/jm5+JNnfiIzAS6LlqHQBN/i6b2t/cV1Hh6BfwYlHnHP4AXi5q/8kmMMpOs8+BixZw/Fd6xUEHEbnkgclvQP2fGp7uShRKnQ3G32rkjV1th8JhIGG7tR/JyjGteSOZELwGMmNqIIigRCLRh2OZIE6BjItdd7pCW6Uhm1zzkUtungSxwEUzNpQ+GQumtH1ej1MqgmNT6vwmhCq5yuwq56EYTbgeQUz3yvrpV1b4ok3nYJ+eYhgYmjRUqErx2EDq0Fr8FhG++iqVGqxlUJI/70Ar0UgJaWHj6hYVHJrfKssAHot1JfqwE9WVWzXZVd5z2Ws/4PnmtEjkXeKJDvxUecLbWOXH/DP6QQ4J72NS0adedp1aseBfXP8odlZFfPvBF7SN/8hky1TYuPOAXAEipMx15u5ToAAAAABJRU5ErkJggg==',
  anonymous: false,
  canBindAnonymous: false,
};
 
class CustomMentionDataService implements IThreadCommentMentionDataService {
  trigger: string = '@';
 
  async getMentions(search: string) {
    return [
      {
        id: mockUser.userID,
        label: mockUser.name,
        type: 'user',
        icon: mockUser.avatar,
      },
      {
        id: '2',
        label: 'User2',
        type: 'user',
        icon: mockUser.avatar,
      },
    ];
  }
  }
 
univer.registerPlugin(UniverSheetsThreadCommentPlugin, {
  overrides: [[IThreadCommentMentionDataService, { useClass: CustomMentionDataService }]],
});

Permission Print