feat: File blocks

docs/package.json

@@ -31,7 +31,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-github-btn": "^1.4.0",
-    "react-icons": "^4.3.1",
+    "react-icons": "^5.2.1",
     "y-partykit": "^0.0.25",
     "yjs": "^13.6.1"
   },

docs/pages/docs/advanced/vanilla-js.mdx

@@ -49,7 +49,7 @@ While it's up to you to decide how you want the elements to be rendered, BlockNo
 type UIElement =
   | "formattingToolbar"
   | "linkToolbar"
-  | "imageToolbar"
+  | "filePanel"
   | "sideMenu"
   | "suggestionMenu"
   | "tableHandles"

docs/pages/docs/editor-basics/setup.mdx

@@ -96,7 +96,7 @@ export type BlockNoteViewProps = {
   linkToolbar?: boolean;
   sideMenu?: boolean;
   slashMenu?: boolean;
-  imageToolbar?: boolean;
+  filePanel?: boolean;
   tableHandles?: boolean;
   children?:
 } & HTMLAttributes<HTMLDivElement>;
@@ -120,7 +120,7 @@ export type BlockNoteViewProps = {
 
 `slashMenu`: Whether the [Slash Menu](/docs/ui-components/suggestion-menus#slash-menu) should be enabled.
 
-`imageToolbar`: Whether the Image Toolbar should be enabled.
+`filePanel`: Whether the File Toolbar should be enabled.
 
 `tableHandles`: Whether the Table Handles should be enabled.
 

examples/01-basic/03-all-blocks/App.tsx

@@ -40,9 +40,6 @@ export default function App() {
         type: "numberedListItem",
         content: "Numbered List Item",
       },
-      {
-        type: "image",
-      },
       {
         type: "table",
         content: {
@@ -60,6 +57,33 @@ export default function App() {
           ],
         },
       },
+      {
+        type: "file",
+      },
+      {
+        type: "image",
+        props: {
+          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+          caption:
+            "From https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
+        },
+      },
+      {
+        type: "video",
+        props: {
+          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+          caption:
+            "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+        },
+      },
+      {
+        type: "audio",
+        props: {
+          url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+          caption:
+            "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",
+        },
+      },
       {
         type: "paragraph",
       },

examples/01-basic/testing/App.tsx

@@ -1,8 +1,8 @@
 import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
 
 export default function App() {
   // Creates a new editor instance.

examples/02-ui-components/01-ui-elements-remove/App.tsx

@@ -1,7 +1,7 @@
 import "@blocknote/core/fonts/inter.css";
-import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
 
 export default function App() {
   // Creates a new editor instance.
@@ -34,7 +34,7 @@ export default function App() {
       // Removes all menus and toolbars.
       formattingToolbar={false}
       linkToolbar={false}
-      imageToolbar={false}
+      filePanel={false}
       sideMenu={false}
       slashMenu={false}
       tableHandles={false}

examples/02-ui-components/02-formatting-toolbar-buttons/App.tsx

@@ -1,20 +1,20 @@
 import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
 import {
   BasicTextStyleButton,
   BlockTypeSelect,
   ColorStyleButton,
   CreateLinkButton,
+  FileCaptionButton,
+  FileReplaceButton,
   FormattingToolbar,
   FormattingToolbarController,
-  ImageCaptionButton,
   NestBlockButton,
-  ReplaceImageButton,
   TextAlignButton,
   UnnestBlockButton,
   useCreateBlockNote,
 } from "@blocknote/react";
-import { BlockNoteView } from "@blocknote/mantine";
-import "@blocknote/mantine/style.css";
 
 import { BlueButton } from "./BlueButton";
 
@@ -77,8 +77,8 @@ export default function App() {
             {/* Extra button to toggle blue text & background */}
             <BlueButton key={"customButton"} />
 
-            <ImageCaptionButton key={"imageCaptionButton"} />
-            <ReplaceImageButton key={"replaceImageButton"} />
+            <FileCaptionButton key={"fileCaptionButton"} />
+            <FileReplaceButton key={"replaceFileButton"} />
 
             <BasicTextStyleButton
               basicTextStyle={"bold"}

examples/02-ui-components/03-formatting-toolbar-block-type-items/.bnexample.json

@@ -5,6 +5,6 @@
   "tags": ["Intermediate", "Blocks", "UI Components", "Formatting Toolbar", "Custom Schemas"],
   "dependencies": {
     "@mantine/core": "^7.7.1",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   }
 }

examples/02-ui-components/03-formatting-toolbar-block-type-items/package.json

@@ -19,7 +19,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@mantine/core": "^7.7.1",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/02-ui-components/04-side-menu-buttons/.bnexample.json

@@ -4,6 +4,6 @@
   "author": "matthewlipski",
   "tags": ["Intermediate", "Blocks", "UI Components", "Block Side Menu"],
   "dependencies": {
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   }
 }

examples/02-ui-components/04-side-menu-buttons/package.json

@@ -18,7 +18,7 @@
     "@blocknote/shadcn": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/02-ui-components/05-side-menu-drag-handle-items/.bnexample.json

@@ -4,6 +4,6 @@
   "author": "matthewlipski",
   "tags": ["Intermediate", "Blocks", "UI Components", "Block Side Menu"],
   "dependencies": {
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   }
 }

examples/02-ui-components/05-side-menu-drag-handle-items/package.json

@@ -18,7 +18,7 @@
     "@blocknote/shadcn": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/02-ui-components/06-suggestion-menus-slash-menu-items/.bnexample.json

@@ -10,6 +10,6 @@
     "Slash Menu"
   ],
   "dependencies": {
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   }
 }

examples/02-ui-components/06-suggestion-menus-slash-menu-items/package.json

@@ -18,7 +18,7 @@
     "@blocknote/shadcn": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/02-ui-components/08-custom-ui/.bnexample.json

@@ -4,6 +4,6 @@
   "author": "matthewlipski",
   "tags": ["Advanced", "Inline Content", "UI Components", "Block Side Menu", "Formatting Toolbar", "Suggestion Menus", "Slash Menu", "Appearance & Styling"],
   "dependencies": {
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   }
 }

examples/02-ui-components/08-custom-ui/CustomFormattingToolbar.tsx

@@ -1,7 +1,6 @@
 import {
   useBlockNoteEditor,
-  useEditorChange,
-  useEditorSelectionChange,
+  useEditorContentOrSelectionChange,
 } from "@blocknote/react";
 import { useState } from "react";
 import {
@@ -16,6 +15,7 @@ import {
   MdFormatUnderlined,
 } from "react-icons/md";
 
+import { checkBlockHasDefaultProp } from "@blocknote/core";
 import { ColorMenu } from "./ColorMenu";
 import { LinkMenu } from "./LinkMenu";
 
@@ -24,7 +24,7 @@ type CustomFormattingToolbarState = {
   italic: boolean;
   underline: boolean;
 
-  textAlignment: "left" | "center" | "right" | "justify";
+  textAlignment: "left" | "center" | "right" | "justify" | undefined;
 
   textColor: string;
   backgroundColor: string;
@@ -35,6 +35,7 @@ export function CustomFormattingToolbar() {
   const editor = useBlockNoteEditor();
 
   // Function to get the state of toolbar buttons (active/inactive).
+  // TODO: this is a bit weird, better to use useSelectedBlocks and useActiveStyles hooks
   const getState = (): CustomFormattingToolbarState => {
     const block = editor.getTextCursorPosition().block;
     const activeStyles = editor.getActiveStyles();
@@ -44,7 +45,9 @@ export function CustomFormattingToolbar() {
       italic: (activeStyles.italic as boolean) || false,
       underline: (activeStyles.underline as boolean) || false,
 
-      textAlignment: block.props.textAlignment,
+      textAlignment: checkBlockHasDefaultProp("textAlignment", block, editor)
+        ? block.props.textAlignment
+        : undefined,
 
       textColor: (activeStyles.textColor as string) || "default",
       backgroundColor: (activeStyles.backgroundColor as string) || "default",
@@ -80,8 +83,7 @@ export function CustomFormattingToolbar() {
   const [linkMenuOpen, setLinkMenuOpen] = useState(false);
 
   // Updates toolbar state when the editor content or selection changes.
-  useEditorChange(() => setState(getState()), editor);
-  useEditorSelectionChange(() => setState(getState()), editor);
+  useEditorContentOrSelectionChange(() => setState(getState()), editor);
 
   return (
     <div className={"formatting-toolbar"}>
@@ -111,40 +113,42 @@ export function CustomFormattingToolbar() {
         </button>
       </div>
       {/* Button group for text alignment */}
-      <div className={"formatting-toolbar-group"}>
-        {/*Left align button*/}
-        <button
-          className={`formatting-toolbar-button${
-            state.textAlignment === "left" ? " active" : ""
-          }`}
-          onClick={() => setTextAlignment("left")}>
-          <MdFormatAlignLeft />
-        </button>
-        {/* Center align button */}
-        <button
-          className={`formatting-toolbar-button${
-            state.textAlignment === "center" ? " active" : ""
-          }`}
-          onClick={() => setTextAlignment("center")}>
-          <MdFormatAlignCenter />
-        </button>
-        {/* Right align button */}
-        <button
-          className={`formatting-toolbar-button${
-            state.textAlignment === "right" ? " active" : ""
-          }`}
-          onClick={() => setTextAlignment("right")}>
-          <MdFormatAlignRight />
-        </button>
-        {/* Justify text button */}
-        <button
-          className={`formatting-toolbar-button${
-            state.textAlignment === "justify" ? " active" : ""
-          }`}
-          onClick={() => setTextAlignment("justify")}>
-          <MdFormatAlignJustify />
-        </button>
-      </div>
+      {state.textAlignment && (
+        <div className={"formatting-toolbar-group"}>
+          {/*Left align button*/}
+          <button
+            className={`formatting-toolbar-button${
+              state.textAlignment === "left" ? " active" : ""
+            }`}
+            onClick={() => setTextAlignment("left")}>
+            <MdFormatAlignLeft />
+          </button>
+          {/* Center align button */}
+          <button
+            className={`formatting-toolbar-button${
+              state.textAlignment === "center" ? " active" : ""
+            }`}
+            onClick={() => setTextAlignment("center")}>
+            <MdFormatAlignCenter />
+          </button>
+          {/* Right align button */}
+          <button
+            className={`formatting-toolbar-button${
+              state.textAlignment === "right" ? " active" : ""
+            }`}
+            onClick={() => setTextAlignment("right")}>
+            <MdFormatAlignRight />
+          </button>
+          {/* Justify text button */}
+          <button
+            className={`formatting-toolbar-button${
+              state.textAlignment === "justify" ? " active" : ""
+            }`}
+            onClick={() => setTextAlignment("justify")}>
+            <MdFormatAlignJustify />
+          </button>
+        </div>
+      )}
       {/* Button group for color menu */}
       <div className={"formatting-toolbar-group"}>
         <div className={"color-menu-button"}>

examples/02-ui-components/08-custom-ui/package.json

@@ -18,7 +18,7 @@
     "@blocknote/shadcn": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",

examples/05-custom-schema/01-alert-block/.bnexample.json

@@ -5,6 +5,6 @@
   "tags": ["Intermediate", "Blocks", "Custom Schemas", "Suggestion Menus", "Slash Menu"],
   "dependencies": {
     "@mantine/core": "^7.7.1",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   }
 }

examples/05-custom-schema/01-alert-block/package.json

@@ -19,7 +19,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "@mantine/core": "^7.7.1",
-    "react-icons": "^4.3.1"
+    "react-icons": "^5.2.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.25",