Hooks

contentChanged

This hook is the callback equivalent of the 'content_changed'event. It is invoked when the document content has been updated due to changes made by any user in the session.

const config = {
  hooks: {
    // invoked whenever the document has been updated
    contentChanged: (data) => {
      // data.source === 'local' for local changes
      // data.source === 'remote' for remote changes
      doSomthingUseful(data);
    },
  },
};

Event data will contain a source field, where 'local' indicates local user changes, and 'remote' indicates remote user changes.

Typical use-cases include triggering third party plugins that perform actions such as word-counting, spellchecking, or taking content snapshots

note: this hook will not be invoked when edits are made by the local user.

From v1.3.3, contentChanged hook will be invoked for both local and remote updates

If your application listens to the editor ‘onChanged’ event to trigger actions like saving document content to the backend, it should instead use this hook callback or thecontent_changed event.

usersUpdate

This hook is the callback equivalent of the 'users_update'event. It is invoked every time a new user joins a session or an existing user leaves a session

const config = {
  hooks: {
    // invoked whenever a user joins or leaves the session
    usersUpdate: (data) => {
      doSomthingUseful(data);
    },
  },
};

The hook’sdata object is an array that contains the current snapshot of users currently connected to the session. See 'users_update'event for details.

fetchDocOnNetworkReconnect

If specified, this hook will be invoked whenever an offline user’s browser becomes online. It expects a Promise that resolves the latest document version stored in your backend data-store.

const config = {
  hooks: {
    // invoked whenever the user's brwosers comes goes from offline -> online
    fetchDocOnNetworkReconnect: async () => {
      // example: run your doc data fetch api
      const doc = await fetchDocument();
      return doc;
    },
  },
};