feat: change event allows getting a list of the changes made

[nperez0111]

This implements a getChanges API which will derive the changes made within a transaction as a list of: inserts, updates and deletions of blocknote blocks

To test this you can update an example like so:

diff --git i/examples/01-basic/01-minimal/App.tsx w/examples/01-basic/01-minimal/App.tsx
index a3b92bafd..d5c43ac2b 100644
--- i/examples/01-basic/01-minimal/App.tsx
+++ w/examples/01-basic/01-minimal/App.tsx
@@ -8,5 +8,12 @@ export default function App() {
   const editor = useCreateBlockNote();
 
   // Renders the editor instance using a React component.
-  return <BlockNoteView editor={editor} />;
+  return (
+    <BlockNoteView
+      editor={editor}
+      onChange={(t, ctx) => {
+        console.log("changes", ctx.getChanges());
+      }}
+    />
+  );
 }

Things left:

• add tests

Resolves #1541 #482 #1566

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
blocknote	✅ Ready (Inspect)	Visit Preview	Apr 7, 2025 9:36am
blocknote-website	✅ Ready (Inspect)	Visit Preview	Apr 7, 2025 9:36am

[Copilot]

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

[pkg-pr-new]

Open in StackBlitz

@blocknote/ariakit

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/ariakit@1585

@blocknote/code-block

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/code-block@1585

@blocknote/core

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/core@1585

@blocknote/mantine

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/mantine@1585

@blocknote/server-util

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/server-util@1585

@blocknote/react

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/react@1585

@blocknote/shadcn

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/shadcn@1585

@blocknote/xl-docx-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-docx-exporter@1585

@blocknote/xl-multi-column

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-multi-column@1585

@blocknote/xl-odt-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-odt-exporter@1585

@blocknote/xl-pdf-exporter

npm i https://pkg.pr.new/TypeCellOS/BlockNote/@blocknote/xl-pdf-exporter@1585

commit: 8948cf5

[YousefED]

this is so awesome, and implementation actually cleaner / clearer than expected! really cool

[YousefED]

does this work for collaboration as well (yjs history)?

[YousefED]

I don't completely understand this. How do we get the block ids now then, if we don't yet support the uniqueid transactions?

[YousefED]

not easier to test the onchange event directly instead of patching like this?

[YousefED]

Let's add test-cases for child blocks (add / update / delete child blocks). We can debate whether this should trigger a change on the parent or not, but at least it should be tested / documented imo