@univerjs/docs-ui

UI layer for full Univer Docs applications.

Use this package together with @univerjs/docs to render and interact with a document instance. For rich text data in cells, comments, or custom integrations, prefer the Facade rich text APIs such as newRichText and newRichTextValue.

import { UniverDocsUIPlugin } from '@univerjs/docs-ui'univer.registerPlugin(UniverDocsUIPlugin, {  container: 'app',})

Entry Points

• Facade: @univerjs/docs-ui/facade
• Locale: @univerjs/docs-ui/locale/*

The root entry also exports:

• BulletListTypePicker and OrderListTypePicker for list-style controls.
• MobileRichTextToolbar and IMobileRichTextToolbarProps for embedded mobile rich-text editors.
• SetDocInputStyleCommand for document input-style updates.
• IDocPrintPreparationContext for print preparation integrations.
• convertClipboardHtmlToDocumentData, removeClipboardHtmlImages, and convertClipboardRtfToPlainText for importing external rich-text clipboard content.

Paste options in embedded editors

An internal rich-text editor can opt into the post-paste formatting menu through IDocClipboardHook.supportsPasteOptions(unitId). Return true only for the editor instances owned by your integration. Full Docs documents support this menu without that opt-in. Slides shape and table text editors enable it through their editor plugins.

IUniverDocsUIConfig

import type { DependencyOverride } from '@univerjs/core'import type { IDocFitToWidthOptions } from '@univerjs/docs-ui'import type { MenuConfig } from '@univerjs/ui'export interface IUniverDocsUIConfig {  menu?: MenuConfig  container?: HTMLElement | string  toc?: boolean  footer?: boolean  wordCount?: boolean  placeholder?: boolean  fitToWidth?: IDocFitToWidthOptions  override?: DependencyOverride}

wordCount and placeholder default to true. fitToWidth controls viewport/container fitting, horizontal padding, scale bounds, and alignment. Desktop defaults to no automatic fitting; the mobile plugin defaults to fit-width with 12px padding and a maximum scale of 1.

Embedded editor runtime configuration

RichTextEditor.renderConfig accepts IEditorRuntimeConfig: layout?: IDocumentLayoutPresentation, inheritParagraphStartStyle?: boolean, disableSelectionAutoScroll?: boolean, and customHyperLinkUI?: boolean. These are runtime options for an editor instance, not fields to store in its document snapshot.

Set customHyperLinkUI: true when the host owns hyperlink menus and pointer interactions, such as a shape-text editor. The Docs hyperlink UI then leaves those interactions to the host.

The root exports IEditorRuntimeConfig, registerEditorRuntimeConfig(model, config), and getEditorRuntimeConfig(model). RichTextEditor manages its registration lifetime. Custom integrations that register directly must dispose the returned registration when the editor is removed. layout uses the render engine's instance-scoped layout presentation.

Clipboard

The editor offers source formatting, destination formatting, and text-only paste, plus options to change the latest paste. Destination formatting preserves supported emphasis while applying the target styles. Text-only paste removes images and hyperlinks and converts tables to tab-separated text. Browser clipboard restrictions may require keyboard or system paste. See paste options.