docs: fix "Displaying Document JSON" example (#1943)

Author: matthewlipski

examples/01-basic/02-block-objects/src/App.tsx

@@ -3,7 +3,7 @@ import "@blocknote/core/fonts/inter.css";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import "./styles.css";
 
@@ -32,6 +32,9 @@ export default function App() {
     ],
   });
 
+  // Sets the initial document JSON
+  useEffect(() => setBlocks(editor.document), []);
+
   // Renders the editor instance and its document JSON.
   return (
     <div className={"wrapper"}>
@@ -40,15 +43,15 @@ export default function App() {
         <BlockNoteView
           editor={editor}
           onChange={() => {
-            // Saves the document JSON to state.
+            // Sets the document JSON whenever the editor content changes.
             setBlocks(editor.document);
           }}
         />
       </div>
       <div>Document JSON:</div>
       <div className={"item bordered"}>
         <pre>
-          <code>{JSON.stringify(editor.document, null, 2)}</code>
+          <code>{JSON.stringify(blocks, null, 2)}</code>
         </pre>
       </div>
     </div>