Events

Events let you respond to editor lifecycle and content changes.

Lifecycle

onBeforeCreate

Called before the editor view is created.

Usage

onBeforeCreate: ({ editor }) => {
  // Set up external services
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onBeforeCreate: ({ editor }) => {
    // Set up external services
  },
});

onCreate

Called when editor is fully initialized and ready.

Usage

onCreate: ({ editor }) => {
  editor.focus();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onCreate: ({ editor }) => {
    editor.focus();
  },
});

onDestroy

Called when editor is being destroyed. Clean up resources here.

Usage

onDestroy: () => {
  clearInterval(autoSaveTimer);
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onDestroy: () => {
    clearInterval(autoSaveTimer);
  },
});

onFirstRender

Called after the first render completes.

Usage

onFirstRender: () => {
  hideLoadingSpinner();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onFirstRender: () => {
    hideLoadingSpinner();
  },
});

Content

onUpdate

Called when document content changes.

Usage

onUpdate: ({ editor, transaction }) => {
  if (transaction.docChanged) {
    saveToBackend(editor.getJSON());
  }
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onUpdate: ({ editor, transaction }) => {
    if (transaction.docChanged) {
      saveToBackend(editor.getJSON());
    }
  },
});

onContentError

Called when content processing fails.

Usage

onContentError: ({ error, editor, documentId }) => {
  console.error('Document error:', error);
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onContentError: ({ error, editor, documentId }) => {
    console.error('Document error:', error);
  },
});

Selection

onSelectionUpdate

Called when selection changes (cursor movement).

Usage

onSelectionUpdate: ({ editor }) => {
  toolbar.bold = editor.isActive('bold');
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onSelectionUpdate: ({ editor }) => {
    toolbar.bold = editor.isActive('bold');
  },
});

onFocus

Called when editor gains focus.

Usage

onFocus: ({ editor, event }) => {
  showFormattingToolbar();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onFocus: ({ editor, event }) => {
    showFormattingToolbar();
  },
});

onBlur

Called when editor loses focus.

Usage

onBlur: ({ editor, event }) => {
  saveCurrentState();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onBlur: ({ editor, event }) => {
    saveCurrentState();
  },
});

Features

onCommentsUpdate

Usage

onCommentsUpdate: ({ editor }) => {
  updateCommentsSidebar();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onCommentsUpdate: ({ editor }) => {
    updateCommentsSidebar();
  },
});

onCommentsLoaded

Usage

onCommentsLoaded: ({ editor, comments }) => {
  console.log(`Loaded ${comments.length} comments`);
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onCommentsLoaded: ({ editor, comments }) => {
    console.log(`Loaded ${comments.length} comments`);
  },
});

onTrackedChangesUpdate

Usage

onTrackedChangesUpdate: ({ editor }) => {
  updateReviewPanel();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onTrackedChangesUpdate: ({ editor }) => {
    updateReviewPanel();
  },
});

onCollaborationReady

Usage

onCollaborationReady: ({ editor, ydoc }) => {
  showCollaboratorsCursors();
}

import { Editor } from 'superdoc/super-editor';

const editor = await Editor.open(yourFile, {
  element: document.querySelector('#editor'),
  onCollaborationReady: ({ editor, ydoc }) => {
    showCollaboratorsCursors();
  },
});