Callout
Plugins Info
The callout feature allows you to highlight important information in a document with visually distinct blocks, complete with customizable icons and colors.
Introduction
In Univer Docs, callout blocks enable you to:
- Highlight key information: Draw attention to important notes, warnings, or tips.
- Customize appearance: Choose from different icons and color schemes to match your content.
- Organize content: Structure your document with visually separated sections.
Plugin Mode
Installation
Shell
pnpm add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uiShell
npm install @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uiShell
yarn add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uiShell
bun add @univerjs-pro/docs-callout @univerjs-pro/docs-callout-uiUsage
TypeScript
import { UniverDocsCalloutPlugin } from '@univerjs-pro/docs-callout'import { UniverDocsCalloutUIPlugin } from '@univerjs-pro/docs-callout-ui'import DocsCalloutUIEnUS from '@univerjs-pro/docs-callout-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-callout-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( DocsCalloutUIEnUS, ), },})univer.registerPlugin(UniverDocsCalloutPlugin)univer.registerPlugin(UniverDocsCalloutUIPlugin)If you have a commercial license for Univer, please refer to Using License in Client for configuration.
Facade API
Make sure to import the facade before using the API:
TypeScript
import '@univerjs-pro/docs-callout/facade'Get All Callouts
TypeScript
const doc = univerAPI.getActiveDocument()const callouts = doc?.getCallouts() ?? []Get a Callout by ID
TypeScript
const doc = univerAPI.getActiveDocument()const callout = doc?.getCallout('callout-block-id')Insert a Callout
TypeScript
const doc = univerAPI.getActiveDocument()const callout = doc?.insertCallout({ startOffset: 12, endOffset: 35, config: { icon: '💡' },})Update Callout Config
TypeScript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.updateConfig({ icon: '⚠️' })Set callout appearance
TypeScript
const callout = univerAPI.getActiveDocument()?.getCallout('callout-block-id')callout?.setIcon('📝')callout?.setBackgroundColor('#FFF4E5')callout?.setBorder({ color: '#E6A23C', width: 2 })callout?.setTextColor('#5C3B00')How is this guide?