Zen Mode

Preset ModePlugin Mode

Plugins Info

@univerjs/sheets-zen-editor

Server Required

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]: merge(
      {},
      UniverPresetSheetsCoreEnUS,
      SheetsZenEditorEnUS, 
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
  ],
  plugins: [
    UniverSheetsZenEditorPlugin, 
  ],
})

Plugin Mode

Installation

npm install @univerjs/sheets-zen-editor

Usage

import { LocaleType, merge, 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]: merge(
      {},
      SheetsZenEditorEnUS, 
    ),
  },
})

univer.registerPlugin(UniverSheetsZenEditorPlugin)

Facade API

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

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

On this page