feat: File blocks (#731)

* WIP file blocks

* Refactored API for extending file block previews

* Added `parse`/`toExternalHTML` to vanilla file block API

* Added `parse`/`toExternalHTML` to React file block API

* Fixed issues from merge

* Added audio/video file extensions, file UI buttons, and code improvements

* wip

* update formatting toolbar buttons

* Added `parse` & `toExternalHTML`

* Moved `parse` & `toExternalHTML` for file block

* wip

* Finished core refactor

* Refactored react package

* small improvements

* Updated CSS

* fix build

* Updated examples

* Implemented PR feedback

* Implemented PR feedback

* Fixed issues with `toExternalHTML`

* Updated core unit tests

* Updated React unit tests

* Fixed build

* small fixes

* fix build

* Updated PW tests

* Fixed PW tests

* small cleanup

* small fixes + add accept for file uploads

* Small fix to buttons & PDF example

* fix dictionary

* Updated locales

* Updated test screenshots

* Reverted test editor changes

* Updated snapshots

* Updated snapshots

* Changed how focus is set in toolbar buttons

* tmp fix for resetting fileId

* Simplified React unit tests

* Small CSS fix

* Removed text alignment from default file block

* Updated unit test snapshots

* Updated PW tests

---------

Co-authored-by: yousefed <[email protected]>

Author: matthewlipski

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"
   }
 }