Whiteboard editor events

The board's editor emits these events. Listen with editor.on(), and stop with editor.off().

docChange

Fired when the editor of a doc frame's document has a transaction, also one that only moves the caret, when its editing starts or stops, and when the editor is created or destroyed. Use it to update a toolbar that also works in documents, but not to save documents.

import { getEditedDocEditor } from '@tiptap-pro/extension-whiteboard'

editor.on('docChange', ({ docId }) => {
  const isEditing = getEditedDocEditor(editor) !== null
  console.log(`The document ${docId} changed. A document is edited: ${isEditing}`)
})

Payload

• docId (string): The id of the document that changed.

shapesMove

Fired while a drag moves shapes, with how far it moved them as delta, in board units. delta is null once the drag ends. When a drag ends, the drop changes the document before this event reports the end.

Share it with other users, so createRemoteMoves shows the drag on their boards:

editor.on('shapesMove', ({ ids, delta }) => {
  provider.setAwarenessField('drag', delta ? { ids, delta } : null)
})

Payload

• ids (readonly string[]): The ids of the dragged shapes.
• delta (Point | null): How far the drag has moved the shapes since it began, or null once it ends.

See Collaboration.