Enhanced List

Plugins Info

The enhanced list feature provides advanced list capabilities for Univer Docs, including nested lists, custom glyphs, and flexible list manipulation.

Introduction

In Univer Docs, enhanced lists enable you to:

Create nested lists: Build multi-level list hierarchies.
Customize glyphs: Use different bullet symbols and numbering styles.
Manipulate list structure: Promote, demote, and reorder list items.

Plugin Mode

Installation

Shell

pnpm add @univerjs-pro/docs-list @univerjs-pro/docs-list-ui

Shell

npm install @univerjs-pro/docs-list @univerjs-pro/docs-list-ui

Shell

yarn add @univerjs-pro/docs-list @univerjs-pro/docs-list-ui

Shell

bun add @univerjs-pro/docs-list @univerjs-pro/docs-list-ui

Usage

TypeScript

import { UniverDocsListPlugin } from '@univerjs-pro/docs-list'import { UniverDocsListUIPlugin } from '@univerjs-pro/docs-list-ui'import DocsListUIEnUS from '@univerjs-pro/docs-list-ui/locale/en-US'import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import '@univerjs-pro/docs-list-ui/lib/index.css'const univer = new Univer({  locale: LocaleType.EN_US,  locales: {    [LocaleType.EN_US]: mergeLocales(      DocsListUIEnUS,     ),  },})univer.registerPlugin(UniverDocsListPlugin)univer.registerPlugin(UniverDocsListUIPlugin)

If you have a commercial license for Univer, please refer to Using License in Client for configuration.

First configure the mobile editor. In this page’s plugin-mode setup, replace the desktop registrations below with their mobile exports from the same packages, before opening a document. Keep the model plugins, styles, locales and Facade imports; do not register both variants.

Package	Desktop registration	Mobile registration
`@univerjs-pro/docs-list-ui`	`UniverDocsListUIPlugin`	`UniverDocsListMobileUIPlugin`

Facade API

Make sure to import the facade before using the API:

TypeScript

import '@univerjs-pro/docs-list/facade'

Insert a List

TypeScript

import { PresetListType } from '@univerjs/core'const doc = univerAPI.getActiveDocument()doc?.insertList({  startOffset: 0,  endOffset: 10,  listType: PresetListType.BULLET_LIST,})

Get All Lists

TypeScript

const doc = univerAPI.getActiveDocument()const lists = doc?.getLists() ?? []

Set List Glyph Type

TypeScript

const doc = univerAPI.getActiveDocument()doc?.setListGlyphType(0, ListGlyphType.DECIMAL)

Set List Level

TypeScript

const doc = univerAPI.getActiveDocument()doc?.setListLevel(0, 1)

How is this guide?