Note

Facade API	Has Paid Plan	Univer Server	Univer on Node.js	Preset
✅	-	-	-	UniverSheetsNotePreset

Notes are a feature for adding comments to cells. Currently, adding and deleting notes is supported, and notes are always displayed on the right side of the cell.

This feature includes the following plugin packages:

@univerjs/sheets-note - Note plugin
@univerjs/sheets-note-ui - Note UI plugin

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 { UniverSheetsNotePreset } from '@univerjs/presets/preset-sheets-note';
import UniverPresetSheetsNoteEnUS from '@univerjs/presets/preset-sheets-note/locales/en-US';
 
import '@univerjs/presets/lib/styles/preset-sheets-core.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsNoteEnUS 
    ),
  },
  theme: defaultTheme,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsNotePreset()
  ]
});

Manual Combination Installation


npm install @univerjs/sheets-note @univerjs/sheets-note-ui


pnpm add @univerjs/sheets-note @univerjs/sheets-note-ui


yarn add @univerjs/sheets-note @univerjs/sheets-note-ui


bun add @univerjs/sheets-note @univerjs/sheets-note-ui


import { LocaleType, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverSheetsNotePlugin } from '@univerjs/sheets-note';
import { UniverSheetsNoteUIPlugin } from '@univerjs/sheets-note-ui';
import SheetsNoteEnUS from '@univerjs/sheets-note/locale/en-US';
import SheetsNoteUIEnUS from '@univerjs/sheets-note-ui/locale/en-US';
 
import '@univerjs/sheets-note-ui/lib/index.css';
 
import '@univerjs/sheets-note/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      SheetsNoteEnUS,
      SheetsNoteUIEnUS
    ),
  },
});
 
univer.registerPlugin(UniverSheetsNotePlugin);
univer.registerPlugin(UniverSheetsNoteUIPlugin);

Facade API 0.7.0+

To get full definition of facade api, please refer to FacadeAPI .

Get Annotation

FWorksheet.getNotes: Get all annotations in the worksheet


const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const notes = fWorksheet.getNotes();
console.log(notes);
 
notes.forEach((item) => {
  const { row, col, note } = item;
  console.log(`Cell ${fWorksheet.getRange(row, col).getA1Notation()} has a note: ${note}`);
});

FRange.getNote: Get the annotation of the upper left cell in the range


const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const fRange = fWorksheet.getRange('A1:D10');
const note = fRange.getNote();
console.log(note);

Create / Update Annotation

FRange.createOrUpdateNote: Create or update the annotation of the upper left cell in the range


const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const fRange = fWorksheet.getRange('A1');
fRange.createOrUpdateNote({
  note: 'This is a note',
  width: 160,
  height: 100,
  show: true,
});

Delete Annotation

FRange.deleteNote: Delete the annotation of the upper left cell in the range


const fWorkbook = univerAPI.getActiveWorkbook();
const fWorksheet = fWorkbook.getActiveSheet();
const notes = fWorksheet.getNotes();
console.log(notes);
 
if (notes.length > 0) {
  // Delete the first note
  const { row, col } = notes[0];
  fWorksheet.getRange(row, col).deleteNote();
}
 
// Delete C1 note
const fRange = fWorksheet.getRange('C1');
fRange.deleteNote();

Event Listening

Full event type definitions, please refer to Events .

Event Name	Description
`SheetNoteAdd`	Triggered after a note is added
`SheetNoteDelete`	Triggered after a note is deleted
`SheetNoteUpdate`	Triggered after a note is updated
`SheetNoteShow`	Triggered when a note is shown
`SheetNoteHide`	Triggered when a note is hidden
`BeforeSheetNoteAdd`	Triggered before a note is added
`BeforeSheetNoteDelete`	Triggered before a note is deleted
`BeforeSheetNoteUpdate`	Triggered before a note is updated
`BeforeSheetNoteShow`	Triggered before a note is shown
`BeforeSheetNoteHide`	Triggered before a note is hidden

Event Listening Example


// After annotation is added event
const disposable = univerAPI.addEvent(univerAPI.Event.SheetNoteAdd, (params) => {
  const { workbook, worksheet, row, col, note } = params;
  console.log(params);
});
 
// Remove the event listener, use `disposable.dispose()`


// Before annotation is deleted event, can be canceled
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeSheetNoteDelete, (params) => {
  const { workbook, worksheet, row, col, oldNote } = params;
  console.log(params);
 
  // Cancel the note deletion operation
  params.cancel = true;
});
 
// Remove the event listener, use `disposable.dispose()`