DocAuthEditor

DocAuthEditor:

{
  setCurrentDocument(doc: DocAuthDocument): void;
  currentDocument(): DocAuthDocument;
  destroy(): void;
  docAuthSystem(): DocAuthSystem;
  insertTextAtCursor(text: string): void;
  hasActiveCursor(): boolean;
  setActions(actions: Action[]): void;
  setToolbarConfig(config: ToolbarConfig): void;
  on(event: EventName, handler: (payload: EventPayload) => void): DocAuthEditor;
  off(event: EventName, handler?: (payload: EventPayload) => void): DocAuthEditor;
  once(event: EventName, handler: (payload: EventPayload) => void): DocAuthEditor;
}

The visual editor UI. Binds to a DOM element and lets users edit documents.

Create editors using createDocAuthSystem.

Methods

setCurrentDocument()

setCurrentDocument(doc): void

Attaches the provided document as the current document to the editor.

Parameters

doc

DocAuthDocument

Returns

void

currentDocument()

currentDocument(): DocAuthDocument

Returns a reference to the currently attached document.

Returns

DocAuthDocument

destroy()

destroy(): void

Removes all DOM elements and releases resources held by the editor. Note: This does not release the underlying DocAuthSystem. Use DocAuthSystem.destroy after calling DocAuthEditor.destroy for a complete teardown.

Returns

void

docAuthSystem()

docAuthSystem(): DocAuthSystem

Retrieves the DocAuthSystem instance this editor is bound to.

Returns

DocAuthSystem

insertTextAtCursor()

NEW

insertTextAtCursor(text): void

Inserts text at the current cursor position. If there’s a selection, it will be replaced with the provided text.

Parameters

text

string

The text to insert at the cursor position

Returns

void

hasActiveCursor()

NEW

hasActiveCursor(): boolean

Checks if the editor has an active cursor/insertion point. This is useful for custom actions to determine if they should be enabled.

Returns

boolean

True if cursor is active and insertion is possible, false otherwise

setActions()

NEW

setActions(actions): void

Set all actions (replaces any existing actions). Allows setting and executing editor actions programmatically.

Parameters

actions

Action[]

Array of actions to register

Returns

void

Example

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

// Register custom actions alongside default actions
editor.setActions([
  ...defaultActions, // Keep default actions
  {
    id: 'custom.insert-signature',
    label: 'Insert Signature',
    handler: () => {
      editor.insertTextAtCursor('\n\nBest regards,\nJohn Doe');
    },
    shortcuts: ['Mod+Shift+S'],
  },
]);

setToolbarConfig()

NEW

setToolbarConfig(config): void

Set the toolbar configuration. Use this to customize the editor’s toolbar.

Parameters

config

ToolbarConfig

Toolbar configuration object

Returns

void

Example

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

// Use default toolbar config but add a custom item
editor.setToolbarConfig({
  ...defaultToolbarConfig,
  items: [...defaultToolbarConfig.items, { type: 'action', id: 'custom', actionId: 'custom.insert-signature' }],
});

// Or create a minimal toolbar
editor.setToolbarConfig({
  ...defaultToolbarConfig,
  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' },
    { type: 'action', id: 'custom', actionId: 'custom.insert-signature' },
  ],
});

on()

>= v1.8.0

on(event, handler): DocAuthEditor

Adds an event listener that will be called every time the specified event is emitted.

Parameters

event

EventName

handler

(payload: EventPayload) => void

Returns

DocAuthEditor

The editor instance for method chaining

Example

// Auto-save on content changes
editor.on('content.change', async () => {
  const doc = await editor.currentDocument().saveDocument();
  localStorage.setItem('draft', JSON.stringify(doc));
});

// Track document load
editor.on('document.load', () => {
  console.log('Document loaded successfully');
});

// Debounced save to prevent excessive API calls
let saveTimeout;
editor.on('content.change', async () => {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(async () => {
    const doc = await editor.currentDocument().saveDocument();
    await fetch('/api/save', {
      method: 'POST',
      body: JSON.stringify(doc),
    });
  }, 1000);
});

// Method chaining
editor.on('document.load', () => console.log('loaded')).on('content.change', () => console.log('changed'));

Available Events

Event name	Event payload	Description
`document.load`	none	Fired when a document is initially loaded into the editor. This event is triggered once per document load, including when switching documents.
`content.change`	none	Fired when the document content has changed due to user editing or programmatic modifications. Use this event to react to document changes, such as saving drafts or updating UI state.

off()

>= v1.8.0

off(event, handler?): DocAuthEditor

Removes an event listener. If no handler is provided, removes all listeners for the event.

Parameters

event

EventName

handler?

(payload: EventPayload) => void

Returns

DocAuthEditor

The editor instance for method chaining

Example

// Remove specific handler (prevent memory leaks)
const handleChange = async () => {
  const doc = await editor.currentDocument().saveDocument();
  localStorage.setItem('draft', JSON.stringify(doc));
};
editor.on('content.change', handleChange);
// ... later ...
editor.off('content.change', handleChange);

// Remove all handlers for an event
editor.off('content.change');

// Cleanup pattern
const setupEditor = (target) => {
  const editor = await system.createEditor(target);

  const handleChange = () => console.log('changed');
  const handleLoad = () => console.log('loaded');

  editor.on('content.change', handleChange);
  editor.on('document.load', handleLoad);

  return () => {
    editor.off('content.change', handleChange);
    editor.off('document.load', handleLoad);
    editor.destroy();
  };
};

Available Events

Event name	Event payload	Description
`document.load`	none	Fired when a document is initially loaded into the editor. This event is triggered once per document load, including when switching documents.
`content.change`	none	Fired when the document content has changed due to user editing or programmatic modifications. Use this event to react to document changes, such as saving drafts or updating UI state.

once()

>= v1.8.0

once(event, handler): DocAuthEditor

Adds an event listener that will be called only once when the specified event is emitted. The listener is automatically removed after being called.

Parameters

event

EventName

handler

(payload: EventPayload) => void

Returns

DocAuthEditor

The editor instance for method chaining

Example

// Wait for initial document load
editor.once('document.load', () => {
  console.log('Document loaded for the first time');
});

// Perform action after first change
editor.once('content.change', () => {
  console.log('User made their first edit');
});

// Promise-based pattern for waiting on load
const waitForLoad = (editor) => {
  return new Promise((resolve) => {
    editor.once('document.load', resolve);
  });
};
await waitForLoad(editor);
console.log('Ready to use');

Available Events

Event name	Event payload	Description
`document.load`	none	Fired when a document is initially loaded into the editor. This event is triggered once per document load, including when switching documents.
`content.change`	none	Fired when the document content has changed due to user editing or programmatic modifications. Use this event to react to document changes, such as saving drafts or updating UI state.