Events
BlockNote emits events when certain actions occur.
onCreate
The onCreate callback is called when the editor is initialized.
editor.onCreate(() => {
console.log("Editor created");
});onChange
The onChange callback is called when the editor content changes.
editor.onChange((editor, { getChanges }) => {
console.log("Editor updated");
const changes = getChanges();
console.log(changes);
});You can see what specific changes occurred in the editor by calling getChanges() in the callback. This function returns an array of block changes which looks like:
/**
* The changes that occurred in the editor.
*/
type BlocksChanged = Array<
| {
// The affected block
block: Block;
// The source of the change
source: BlockChangeSource;
type: "insert" | "delete";
// Insert and delete changes don't have a previous block
prevBlock: undefined;
}
| {
// The affected block
block: Block;
// The source of the change
source: BlockChangeSource;
type: "update";
// The block before the update
prevBlock: Block;
}
)>;
/**
* This attributes the changes to a specific source.
*/
type BlockChangeSource = {
/**
* The type of change source:
* - "local": Triggered by local user (default)
* - "paste": From paste operation
* - "drop": From drop operation
* - "undo"/"redo"/"undo-redo": From undo/redo operations
* - "yjs-remote": From remote user
*/
type:
| "local"
| "paste"
| "drop"
| "undo"
| "redo"
| "undo-redo"
| "yjs-remote";
};onSelectionChange
The onSelectionChange callback is called when the editor selection changes.
editor.onSelectionChange(() => {
console.log("Editor selection changed");
});