UIOptions>= v1.5.0

UIOptions:

{
  locale?: Locale | "auto";
  unit?: Unit;
  ruler?: { enabled: boolean };
  toolbar?: ToolbarConfig;
  actions?: Action[];
}

Configuration options for the user interface.

See

CreateEditorOptions for all available options when creating an editor.

Properties

locale?

optional locale: Locale | "auto"

The locale to use for displaying text, formatting numbers etc.

auto will automatically detect the user’s locale based on their browser settings. If this doesn’t match a supported locale, it will fall back to en.

Default Value

auto

---

unit?

optional unit: Unit

The unit system for measurements shown in the UI.

Default Value

pt

---

ruler?

optional ruler: object

Configuration for the ruler feature.

enabled

enabled: boolean

Controls whether the ruler is shown by default when the editor loads.

Default Value

true

---

toolbar?

NEW

optional toolbar: ToolbarConfig

Initial toolbar configuration.

The toolbar can also be customized at runtime using editor.setToolbarConfig().

Examples

import { defaultToolbarConfig, defaultActions } from '@nutrient-sdk/document-authoring';

// Add a separator and custom action to the default toolbar
const editor = await system.createEditor(target, {
  ui: {
    actions: [...defaultActions, { id: 'custom.hello', label: 'Say Hello', handler: () => alert('Hello!') }],
    toolbar: {
      ...defaultToolbarConfig,
      items: [
        ...defaultToolbarConfig.items,
        { type: 'separator', id: 'sep-custom' },
        { type: 'action', id: 'custom-action', actionId: 'custom.hello' },
      ],
    },
  },
});

// Create a minimal toolbar with just undo/redo and bold/italic
const editor = await system.createEditor(target, {
  ui: {
    toolbar: {
      items: [
        { type: 'built-in', id: 'undo', builtInType: 'undo' },
        { type: 'built-in', id: 'redo', builtInType: 'redo' },
        { type: 'separator', id: 'sep-1' },
        { type: 'built-in', id: 'bold', builtInType: 'bold' },
        { type: 'built-in', id: 'italic', builtInType: 'italic' },
      ],
    },
  },
});

// Mix built-in items with custom actions
const editor = await system.createEditor(target, {
  ui: {
    toolbar: {
      items: [
        { type: 'built-in', id: 'undo', builtInType: 'undo' },
        { type: 'action', id: 'custom-btn', actionId: 'custom.my-action' },
      ],
    },
    actions: [
      {
        id: 'custom.my-action',
        label: 'My Action',
        handler: () => console.log('clicked!'),
      },
    ],
  },
});

See

• ToolbarConfig for the toolbar configuration type.
• defaultToolbarConfig for the default toolbar configuration.

---

actions?

NEW

optional actions: Action[]

Initial actions configuration.

Actions can also be customized at runtime using editor.setActions().

Example

import { defaultActions } from '@nutrient-sdk/document-authoring';

const editor = await system.createEditor(target, {
  ui: {
    actions: [
      ...defaultActions,
      {
        id: 'custom.hello',
        label: 'Say Hello',
        handler: () => alert('Hello!'),
      },
    ],
  },
});