Skip to main content
Events let you respond to editor lifecycle and content changes.

​
Lifecycle

​
onBeforeCreate

Called before the editor view is created. 
onBeforeCreate: ({ editor }) => {
  // Set up external services
}

​
onCreate

Called when editor is fully initialized and ready. 
onCreate: ({ editor }) => {
  editor.focus();
}

​
onDestroy

Called when editor is being destroyed. Clean up resources here. 
onDestroy: () => {
  clearInterval(autoSaveTimer);
}

​
onFirstRender

Called after the first render completes. 
onFirstRender: () => {
  hideLoadingSpinner();
}

​
Content

​
onUpdate

Called when document content changes. 
onUpdate: ({ editor, transaction }) => {
  if (transaction.docChanged) {
    saveToBackend(editor.getJSON());
  }
}

​
onContentError

Called when content processing fails. 
onContentError: ({ error, editor, documentId }) => {
  console.error('Document error:', error);
}

​
Selection

​
onSelectionUpdate

Called when selection changes (cursor movement). 
onSelectionUpdate: ({ editor }) => {
  toolbar.bold = editor.isActive('bold');
}

​
onFocus

Called when editor gains focus. 
onFocus: ({ editor, event }) => {
  showFormattingToolbar();
}

​
onBlur

Called when editor loses focus. 
onBlur: ({ editor, event }) => {
  saveCurrentState();
}

​
Features

​
onCommentsUpdate

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

​
onCommentsLoaded

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

​
onTrackedChangesUpdate

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

​
onCollaborationReady

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