Zen Mode

Plugins Info

Zen Mode allows users to focus on editing cell content in a clean interface. It provides a full-screen editor for editing the content of the currently active cell, enhancing the editing experience by minimizing distractions.

Preset Mode

Zen Mode does not provide a preset mode but supports mixing with its plugin.

Installation

npm install @univerjs/sheets-zen-editor

Usage

import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'
import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US'

import '@univerjs/sheets-zen-editor/facade'

import '@univerjs/sheets-zen-editor/lib/index.css'

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      SheetsZenEditorEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsZenEditorPlugin, 
  ],
})

Plugin Mode

Installation

npm install @univerjs/sheets-zen-editor

Usage

import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsZenEditorPlugin } from '@univerjs/sheets-zen-editor'
import SheetsZenEditorEnUS from '@univerjs/sheets-zen-editor/locale/en-US'

import '@univerjs/sheets-zen-editor/lib/index.css'

import '@univerjs/sheets-zen-editor/facade'

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      SheetsZenEditorEnUS, 
    ),
  },
})

univer.registerPlugin(UniverSheetsZenEditorPlugin)

Facade API

Complete Facade API type definitions can be found in the FacadeAPI.

Importing

Plugin mode note

Only plugin mode requires manually importing the Facade package. Preset mode already includes the corresponding Facade package, so no extra import is needed.

import '@univerjs/sheets-zen-editor/facade'

Entering Zen Editing Mode

FWorkbook.startZenEditingAsync() can be used to enter Zen editing mode, which opens a full-screen editor for editing the content of the currently active cell.

const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.startZenEditingAsync()

Exiting Zen Editing Mode

FWorkbook.endZenEditingAsync(save) can be used to exit Zen editing mode, closing the full-screen editor. If save is true, it saves the changes made in the editor.

const fWorkbook = univerAPI.getActiveWorkbook()
const success = await fWorkbook.endZenEditingAsync(true)

Event Listeners

Zen editor can use the cell edit events to listen for changes in the editor:

univerAPI.Event.BeforeSheetEditStart: Before entering Zen editing mode
univerAPI.Event.SheetEditStarted: After entering Zen editing mode
univerAPI.Event.BeforeSheetEditEnd: Before exiting Zen editing mode
univerAPI.Event.SheetEditEnded: After exiting Zen editing mode

Table of Contents