Hooks

onBeforeCreate: ({ editor }) => {
  console.log('Preparing editor...');
  // Set up external services
}

onCreate: ({ editor }) => {
  console.log('Editor ready');
  editor.focus();
}

onDestroy: () => {
  console.log('Cleaning up...');
  clearInterval(autoSaveTimer);
}

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

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

onTransaction: ({ editor, transaction, duration }) => {
  if (duration > 50) {
    console.warn(`Slow transaction: ${duration}ms`);
  }
}

onContentError: ({ error, editor }) => {
  if (error.recoverable) {
    editor.commands.clearInvalidNodes();
  } else {
    showErrorDialog(error);
  }
}

onSelectionUpdate: ({ editor }) => {
  const { from, to } = editor.state.selection;
  updateSelectionUI(from, to);
  
  // Update formatting buttons
  toolbar.bold = editor.isActive('bold');
}

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

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

onCommentsUpdate: ({ editor }) => {
  const comments = editor.storage.comments.all();
  updateCommentsSidebar(comments);
}

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

onTrackedChangesUpdate: ({ editor }) => {
  const changes = editor.storage.trackChanges.all();
  updateReviewPanel(changes);
}

onCollaborationReady: ({ editor, ydoc }) => {
  console.log('Collaboration active');
  showCollaboratorsCursors();
}

import { debounce } from 'lodash';

const autoSave = debounce(async (content) => {
  await api.saveDocument(content);
}, 1000);

options: {
  onUpdate: ({ editor }) => {
    autoSave(editor.getJSON());
  }
}

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