Core Features

GitHubEdit on GitHub
Preset Info
@univerjs/preset-docs-core
Server Required
No

Univer Docs provides core features including a document editor, formula engine, rendering engine, design system, and UI component library. Together, they form a powerful document processing platform that supports various document formats and complex operations.

Features

Univer Docs core features include:

  • Document Rendering: Supports rendering of Univer Docs, including cursor and selection rendering.
  • Document Typesetting: Supports full-text typesetting, including paragraph settings, spacing before and after paragraphs, paragraph alignment, indentation, and hanging indent. It also includes typesetting capabilities within paragraphs, such as punctuation compression, hanging punctuation, character spacing, and Western word breaking.
  • Formula Calculation: Supports adding and calculating Univer formulas (in development).
  • Table Capabilities: Supports inserting basic tables and editing tables, including adding and deleting rows, and editing cells.
  • Document Styles: Univer Docs supports both traditional document styles similar to Microsoft Word (including pagination, headers, and footers) and modern document styles similar to Notion. In modern document styles, pagination is not required, content can expand infinitely, and it supports mixed typesetting of various official or third-party block-level elements (such as text, images, tables, etc.) (planned).
  • Headers and Footers: Supports inserting headers and footers, editing header and footer content, and distinguishing between first pages and odd/even pages (only supported in traditional documents).
  • List Features: Supports inserting and editing ordered, unordered, and task lists, as well as list indentation and outdenting.
  • Plugin System: Supports a plugin system that allows for custom plugins, such as formula plugins, image plugins, chart plugins, etc. This is also one of the core architectural capabilities of Univer.

Preset Mode

Installation

npm install @univerjs/presets @univerjs/preset-docs-core

Usage

import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
import { createUniver, LocaleType, merge } from '@univerjs/presets'

import '@univerjs/preset-docs-core/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      UniverPresetDocsCoreEnUS,
    ),
  },
  presets: [
    UniverDocsCorePreset(),
  ],
})

univerAPI.createUniverDoc({})

Presets and Configuration

@univerjs/presets

This preset provides the createUniver method to create a Univer application, and exposes all methods and objects from @univerjs/core and @univerjs/design.

The createUniver method accepts a configuration object that includes options for theme, language, presets, etc. It returns a Univer instance univer and an FUniver instance univerAPI for calling the Facade API.

interface CreateUniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
  // The list of presets to use.
  presets: IPresets[]
  // The list of plugins to use.
  plugins: IPlugins[]
}

Reference: createUniver

@univerjs/preset-docs-core

This preset is the core preset of Univer Docs, containing essential core features for electronic documents such as document editor, formula engine, and rendering engine.

interface IUniverDocsCorePresetConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. default: grouped mode; simple: ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the footer
  footer?: boolean
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Dependency injection override configuration
  override?: DependencyOverride
  // Menu configuration
  menu?: MenuConfig

  // ... More configuration options
}

The menu configuration option can be used to simply set the display or hidden state of certain specific menu items:

UniverSheetsCorePreset({
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})

Here, 'sheet.command.set-range-bold' and 'sheet.command.set-range-italic' are the names of the commands, indicating the corresponding menu items.

Reference: @univerjs/preset-docs-core

Plugin Mode

Installation

npm install @univerjs/core @univerjs/engine-render @univerjs/engine-formula @univerjs/design @univerjs/ui @univerjs/docs @univerjs/docs-ui

Usage

import { LocaleType, merge, Univer } from '@univerjs/core'
import DesignEnUS from '@univerjs/design/locale/en-US'
import { UniverDocsPlugin } from '@univerjs/docs'
import { UniverDocsUIPlugin } from '@univerjs/docs-ui'
import DocsUIEnUS from '@univerjs/docs-ui/lib/locale/en-US'
import { UniverFormulaEnginePlugin } from '@univerjs/engine-formula'
import { UniverRenderEnginePlugin } from '@univerjs/engine-render'
import { UniverUIPlugin } from '@univerjs/ui'
import UIEnUS from '@univerjs/ui/locale/en-US'

import '@univerjs/docs-ui/facade'

import '@univerjs/design/lib/index.css'
import '@univerjs/ui/lib/index.css'
import '@univerjs/docs-ui/lib/index.css'

const univer = new Univer({
  locale: LocaleType.EN_US,
  locales: {
    [LocaleType.EN_US]: merge(
      {},
      DesignEnUS,
      UIEnUS,
      DocsUIEnUS,
    ),
  },
})

univer.registerPlugin(UniverRenderEnginePlugin)
univer.registerPlugin(UniverFormulaEnginePlugin)
univer.registerPlugin(UniverUIPlugin, {
  container: 'app',
})
univer.registerPlugin(UniverDocsPlugin)
univer.registerPlugin(UniverDocsUIPlugin)

univer.createUnit(UniverInstanceType.UNIVER_DOC, {})

Plugins and Configuration

@univerjs/core

This plugin is the core library of Univer, providing basic functionalities such as creating Univer instances, themes, and languages.

interface UniverParameter {
  // Univer instance theme, default is `defaultTheme`
  theme: IStyleSheet
  // Whether to use dark mode, default is false
  darkMode?: boolean
  // The locale of the Univer instance
  locale: LocaleType
  // The locale objects to use, with keys as locale types and values as corresponding locale objects
  locales: ILocales
  // The log level of the Univer instance
  logLevel?: LogLevel
}

Reference: Univer

@univerjs/engine-render

This plugin is the rendering engine of Univer, responsible for rendering, scrollbars, cursor, and selection rendering. It provides the UniverRenderEnginePlugin.

Reference: @univerjs/engine-render

@univerjs/engine-formula

This plugin is the formula engine of Univer, responsible for calculating and processing formulas. It provides the UniverFormulaEnginePlugin.

Reference: @univerjs/engine-formula

@univerjs/design

This plugin is the design system of Univer, providing all basic components and styles.

See: UI Chapter

@univerjs/ui

This plugin is the UI foundation of Univer. It provides the UniverUIPlugin.

The UniverUIPlugin provides some configuration options that can be used for basic layout configuration.

interface IUniverUIConfig {
  // Container element, can be a string or a DOM element
  container?: string | HTMLElement
  // Whether to show the header
  header?: boolean
  // Whether to show the header toolbar
  toolbar?: boolean
  // The type of the header toolbar. default: grouped mode; simple: ungrouped mode
  ribbonType?: RibbonType
  // Whether to show the context menu
  contextMenu?: boolean
  // Whether to disable auto focus
  disableAutoFocus?: true
  // Dependency injection override configuration
  override?: DependencyOverride
  // Menu configuration
  menu?: MenuConfig
}

The menu configuration option can be used to simply set the display or hidden state of certain specific menu items:

univer.registerPlugin(UniverSheetsUIPlugin, {
  menu: {
    'sheet.command.set-range-bold': {
      hidden: true,
    },
    'sheet.command.set-range-italic': {
      hidden: true,
      disabled: true,
    },
  },
})

Here, 'sheet.command.set-range-bold' and 'sheet.command.set-range-italic' are the names of the commands, indicating the corresponding menu items.

Reference: @univerjs/ui

@univerjs/docs

This plugin is the core plugin of Univer Docs. It provides the UniverDocsPlugin.

Reference: @univerjs/docs

@univerjs/docs-ui

This plugin is the UI plugin of Univer Docs, which includes UI components and interactions for the document editor. It provides the UniverDocsUIPlugin.

Reference: @univerjs/docs-ui