Fixed types and comments (#136)

Author: matthewlipski

packages/website/docs/docs/blocks.md

@@ -63,7 +63,7 @@ Now that we know how blocks are represented in code, let's take a look at the li
 
 ```typescript /App.tsx
 import { useState } from "react";
-import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
@@ -79,8 +79,8 @@ export default function App() {
       setBlocks(editor.topLevelBlocks)
   })
 
-  // Renders a BlockNote editor, and its contents as an array of Block objects 
-  // below.
+  // Renders the editor instance and its contents, as an array of Block
+  // objects, below.
   return (
     <div>
       <BlockNoteView editor={editor}/>

packages/website/docs/docs/converting-blocks.md

@@ -44,23 +44,24 @@ import "@blocknote/core/style.css";
 
 export default function App() {
   // Stores the editor's contents as Markdown.
-  const [markdown, setMarkdown] = useState<string | null>(null);
+  const [markdown, setMarkdown] = useState<string>("");
 
   // Creates a new editor instance.
-  const editor = useBlockNote({
+  const editor: BlockNoteEditor | null = useBlockNote({
     // Listens for when the editor's contents change.
     onEditorContentChange: (editor: BlockNoteEditor) => {
       // Converts the editor's contents from Block objects to Markdown and 
       // saves them.
       const saveBlocksAsMarkdown = async () => {
-        const markdown = await editor.blocksToMarkdown(editor.topLevelBlocks);
+        const markdown: string = 
+          await editor.blocksToMarkdown(editor.topLevelBlocks);
         setMarkdown(markdown);
       };
       saveBlocksAsMarkdown();
     }
   });
 
-  // Renders a BlockNote editor, and its contents as Markdown below.
+  // Renders the editor instance, and its contents as Markdown below.
   return (
     <div>
       <BlockNoteView editor={editor} />
@@ -98,11 +99,14 @@ Tries to create `Block` and `InlineNode` objects based on Markdown syntax, thoug
 
 ```typescript /App.tsx
 import { useEffect, useState } from "react";
-import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
 export default function App() {
+  // Stores the current Markdown content.
+  const [markdown, setMarkdown] = useState<string>("");
+  
   // Creates a new editor instance.
   const editor: BlockNoteEditor | null = useBlockNote({
     // Makes the editor non-editable.
@@ -111,23 +115,20 @@ export default function App() {
     },
   })
 
-  // Stores the current Markdown content.
-  const [markdown, setMarkdown] = useState<string>("");
-
   useEffect(() => {
     if (editor) {
       // Whenever the current Markdown content changes, converts it to an array
       // of Block objects and replaces the editor's content with them.
       const getBlocks = async () => {
-        const blocks = await editor.markdownToBlocks(markdown);
+        const blocks: Block[] = await editor.markdownToBlocks(markdown);
         editor.replaceBlocks(editor.topLevelBlocks, blocks);
       };
       getBlocks();
     }
   }, [editor, markdown]);
 
-  // Renders a text area for you to write/paste Markdown in and a BlockNote
-  // editor below, which displays the current Markdown as blocks.
+  // Renders a text area for you to write/paste Markdown in, and the editor
+  // instance below, which displays the current Markdown as blocks.
   return (
     <div>
       <textarea
@@ -179,23 +180,23 @@ import "@blocknote/core/style.css";
 
 export default function App() {
   // Stores the editor's contents as HTML.
-  const [html, setHTML] = useState<string | null>(null);
+  const [html, setHTML] = useState<string>("");
 
   // Creates a new editor instance.
-  const editor = useBlockNote({
+  const editor: BlockNoteEditor | null = useBlockNote({
     // Listens for when the editor's contents change.
     onEditorContentChange: (editor: BlockNoteEditor) => {
       // Converts the editor's contents from Block objects to HTML and saves 
       // them.
       const saveBlocksAsHTML = async () => {
-        const html = await editor.blocksToHTML(editor.topLevelBlocks);
+        const html: string = await editor.blocksToHTML(editor.topLevelBlocks);
         setHTML(html);
       };
       saveBlocksAsHTML();
     }
   });
 
-  // Renders a BlockNote editor, and its contents as HTML below.
+  // Renders the editor instance, and its contents as HTML below.
   return (
     <div>
       <BlockNoteView editor={editor} />
@@ -233,11 +234,14 @@ Tries to create `Block` objects out of any HTML block-level elements, and `Inlin
 
 ```typescript /App.tsx
 import { useEffect, useState } from "react";
-import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
 export default function App() {
+  // Stores the current HTML content.
+  const [html, setHTML] = useState<string>("");
+  
   // Creates a new editor instance.
   const editor: BlockNoteEditor | null = useBlockNote({
     // Makes the editor non-editable.
@@ -246,22 +250,19 @@ export default function App() {
     },
   })
 
-  // Stores the current HTML content.
-  const [html, setHTML] = useState<string>("");
-
   useEffect(() => {
     if (editor) {
       // Whenever the current HTML content changes, converts it to an array of 
       // Block objects and replaces the editor's content with them.
       const getBlocks = async () => {
-        const blocks = await editor.HTMLToBlocks(html);
+        const blocks: Block[] = await editor.HTMLToBlocks(html);
         editor.replaceBlocks(editor.topLevelBlocks, blocks);
       };
       getBlocks();
     }
   }, [editor, html]);
 
-  // Renders a text area for you to write/paste HTML in and a BlockNote editor 
+  // Renders a text area for you to write/paste HTML in, and the editor instance
   // below, which displays the current HTML as blocks.
   return (
     <div>

packages/website/docs/docs/cursor-selections.md

@@ -72,20 +72,20 @@ Throws an error if the target block could not be found.
 ::: sandbox {template=react-ts}
 
 ```typescript /App.tsx
-import { BlockNoteEditor } from "@blocknote/core";
+import { BlockNoteEditor, Block } from "@blocknote/core";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import "@blocknote/core/style.css";
 
 export default function App() {
   // Creates a new editor instance.
   const editor: BlockNoteEditor | null = useBlockNote({
     // Listens for when the text cursor position changes.
-    onTextCursorPositionChange: (editor) => {
+    onTextCursorPositionChange: (editor: BlockNoteEditor) => {
       // Gets the block currently hovered by the text cursor.
-      const hoveredBlock = editor.getTextCursorPosition().block;
+      const hoveredBlock: Block = editor.getTextCursorPosition().block;
 
       // Traverses all blocks.
-      editor.forEachBlock((block) => {
+      editor.forEachBlock((block: Block) => {
         if (
           block.id === hoveredBlock.id &&
           block.props.backgroundColor !== "blue"
@@ -99,7 +99,7 @@ export default function App() {
           block.id !== hoveredBlock.id &&
           block.props.backgroundColor === "blue"
         ) {
-          // If the block not is currently hovered by the text cursor, resets 
+          // If the block is not currently hovered by the text cursor, resets 
           // its background if it's blue.
           editor.updateBlock(block, {
             props: {backgroundColor: "default"},
@@ -109,7 +109,7 @@ export default function App() {
     }
   })
 
-  // Renders a BlockNote editor.
+  // Renders the editor instance.
   return <BlockNoteView editor={editor}/>;
 }
 ```

packages/website/docs/docs/quickstart.md

@@ -48,7 +48,6 @@ export default function App() {
   const editor: BlockNoteEditor | null = useBlockNote({});
 
   // Renders the editor instance using a React component.
-
   return <BlockNoteView editor={editor} />;
 }
 ```

packages/website/docs/docs/slash-menu.md

@@ -82,36 +82,43 @@ import "@blocknote/core/style.css";
 import { HiOutlineGlobeAlt } from "react-icons/all";
 
 export default function App() {
+  // Command to insert "Hello World" in bold in a new block below.
   const insertHelloWorld = (editor: BlockNoteEditor) => {
+    // Block that the text cursor is currently in.
     const currentBlock: Block = editor.getTextCursorPosition().block;
+    
+    // New block we want to insert.
     const helloWorldBlock: PartialBlock = {
       type: "paragraph",
       content: [{type: "text", text: "Hello World", styles: {bold: true}}],
     };
 
+    // Inserting the new block after the current one.
     editor.insertBlocks([helloWorldBlock], currentBlock, "after");
   };
 
+  // Slash Menu item which executes the command.
   const insertHelloWorldItem: ReactSlashMenuItem =
     new ReactSlashMenuItem(
       "Insert Hello World",
       insertHelloWorld,
       ["helloworld", "hw"],
       "Other",
-      <HiOutlineGlobeAlt size = {18}
-  />,
-  "Used to insert a block with 'Hello World' below."
-)
+      <HiOutlineGlobeAlt size = {18}/>,
+      "Used to insert a block with 'Hello World' below."
+    )
 
-  const editor = useBlockNote({
+  // Creates a new editor instance.
+  const editor: BlockNoteEditor = useBlockNote({
+    // Adds all default Slash Menu items as well as our custom one.
     slashCommands: [
       ...defaultReactSlashMenuItems,
       insertHelloWorldItem
     ]
   });
 
-  return <BlockNoteView editor = {editor}
-  />;
+  // Renders the editor instance.
+  return <BlockNoteView editor = {editor}/>;
 }
 ```