Comment
| Facade API | Has Paid Plan | Univer Server | Univer on Node.js | Preset |
|---|---|---|---|---|
| - | - | optional | - | UniverDocsThreadCommentPreset |
The Comment plugin provides the ability to comment documents.
This feature includes the following plugin packages:
@univerjs/thread-comment- basic comment plugin@univerjs/thread-comment-ui- basic comment UI plugin@univerjs/docs-thread-comment-ui- doc comment UI plugin@univerjs-pro/thread-comment-datasource- the comment data source plugin when used with collaborative editing
Presets Installation
import { createUniver, defaultTheme, LocaleType, merge } from '@univerjs/presets';
import { UniverDocsCorePreset } from '@univerjs/presets/preset-docs-core';
import UniverPresetDocsCoreEnUS from '@univerjs/presets/preset-docs-core/locales/en-US';
import { UniverDocsThreadCommentPreset } from '@univerjs/presets/preset-docs-thread-comment';
import UniverPresetDocsThreadCommentEnUS from '@univerjs/presets/preset-docs-thread-comment/locales/en-US';
import '@univerjs/presets/lib/styles/preset-docs-thread-comment.css'
const { univerAPI } = createUniver({
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
{},
UniverPresetDocsCoreEnUS,
UniverPresetDocsThreadCommentEnUS
),
},
theme: defaultTheme,
presets: [
UniverDocsCorePreset(),
UniverDocsThreadCommentPreset(),
],
});If you are using Univer’s collaboration feature and want the collaboration feature to manage comment information, you need to provide configuration:
- UniverDocsThreadCommentPreset()
+ UniverDocsThreadCommentPreset({ collaboration: true }),Piecemeal Installation
npm install @univerjs/docs-thread-comment-ui @univerjs/thread-comment @univerjs/thread-comment-uiimport { LocaleType, merge, Univer, UserManagerService } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment';
import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-ui';
import ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US';
import '@univerjs/thread-comment-ui/lib/index.css';
const univer = new Univer({
theme: defaultTheme,
locale: LocaleType.EN_US,
locales: {
[LocaleType.EN_US]: merge(
ThreadCommentUIEnUS,
),
},
});
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,
};
const injector = univer.__getInjector();
const userManagerService = injector.get(UserManagerService);
univer.registerPlugin(UniverThreadCommentPlugin);
univer.registerPlugin(UniverThreadCommentUIPlugin);
univer.registerPlugin(UniverDocsThreadCommentUIPlugin);If you are using Univer’s collaboration feature and want the collaboration feature to manage comment information, you need to import another plugin:
npm install @univerjs-pro/thread-comment-datasourceimport { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource';
univer.registerPlugin(UniverThreadCommentDataSourcePlugin);Last updated on