Events

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: ({ editor }) => {
  editor.focus();
}

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

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

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

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

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

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

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

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

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: ({ 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);
  },
});

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: ({ editor, event }) => {
  showFormattingToolbar();
}

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

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

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

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

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

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

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

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

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: ({ editor }) => {
  updateReviewPanel();
}

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

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

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

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

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