# @univerjs/docs-ui

> Language fallback: requested `ko-KR`; content is `en-US`.

- Human documentation: [https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui)

- Agent Markdown: [https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui.md](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/docs-ui.md)

- Requested language: `ko-KR`

- Content language: `en-US`

- Documentation version: `1.0.4`

- Source: [packages/plugins/univerjs/docs-ui.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/packages/plugins/univerjs/docs-ui.mdx)

---

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`.

```typescript
// [!code word:UniverDocsUIPlugin]
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

```ts
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](https://docs.univer.ai/ko-KR/reference/packages/plugins/univerjs/engine-render.md#instance-scoped-document-layout).

## 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](https://docs.univer.ai/ko-KR/guides/docs/features/core.md#paste-options).