feat: Default image blocks (#331)

* Made formatting toolbar buttons not show if they are not applicable

* Made formatting toolbar placement change based on text alignment

* Improved typing for blocks without inline content and made them selectable

* Updated default blocks with new typing

* Added image block (React implementation)

* Added image upload and caption formatting toolbar buttons

* Added image slash menu item

* Temporarily updated `App.tsx` to show image block

* Added placeholder `alt` attribute to image

* Added `destroy` function so vanilla custom blocks can clean ip between renders

* Added vanilla image block

* Added Uppy deps

* Updated `ReplaceImageButton.tsx`

* Small fix in `BlockColorsButton.tsx`

* Typing fix for hyperlink toolbar components

* Created reusable components for link & caption components

* Fixed import issue

* Made image selection border also include caption

* Added comment

* Added new hooks to clean up code

* Updated exports

* Changed image replacing from Uppy to custom UI and removed `replacing` prop

* Fixed z-index for UI elements

* Changed image `width` prop to be in px

* Removed Uppy dependency

* Reverted `App.tsx`

* Removed React image block implementation

* Fixed exports

* Fixed image block imports

* Small fixes to tests

* Changed image replacement to use image specific toolbar

* Made image toolbar open immediately after inserting an image using the slash menu

* Fixed replace image button having persistent `open` state

* `ImageToolbarPositioner.tsx` cleanup

* Made image toolbar design more similar to Notion

* Cleaned up block typing

* Implemented PR feedback

* Removed redundant z-index style from `ColorStyleButton`

* Made props able to be any primitive type and cleaned up test snapshots

* Extracted image styles to CSS

* Refactored `DefaultImageToolbar`

* Added editor option for consumers to handle image uploads

* Small `FormattingToolbarPositioner` refactor

* Fixed image slash menu item bug

* Changed image toolbar to use tabs and fixed dark theme

* Renamed image `src` prop to `url`

* Changed how image width is constrained to editor width

* Updated default color names

* Added loading overlay to the image toolbar while an image is being uploaded

* Fixed heading in block tyupe dropdown

* small fixes (#346)

* small fixes

* Updated `uploadFile` JSDoc

* Extracted example file upload function to new file removed it as a default

---------

Co-authored-by: Matthew Lipski <[email protected]>

* Small hook fix

* Added image docs

* Updated unit test snapshots

* Added image e2e tests

* Added error handling for image uploads

* Renamed example image upload handler

* Added example image upload handler to docs home page

* Small fixes

* Added test snapshots/screenshots

* Improved e2e test reliability

---------

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

Author: matthewlipski

examples/editor/src/App.tsx

@@ -2,6 +2,7 @@
 import "@blocknote/core/style.css";
 import { BlockNoteView, useBlockNote } from "@blocknote/react";
 import styles from "./App.module.css";
+import { uploadToTmpFilesDotOrg_DEV_ONLY } from "@blocknote/core";
 
 type WindowWithProseMirror = Window & typeof globalThis & { ProseMirror: any };
 
@@ -16,6 +17,7 @@ function App() {
         "data-test": "editor",
       },
     },
+    uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY,
   });
 
   // Give tests a way to get prosemirror instance

packages/core/src/BlockNoteEditor.ts

@@ -11,9 +11,9 @@ import {
   updateBlock,
 } from "./api/blockManipulation/blockManipulation";
 import {
+  HTMLToBlocks,
   blocksToHTML,
   blocksToMarkdown,
-  HTMLToBlocks,
   markdownToBlocks,
 } from "./api/formatConversions/formatConversions";
 import {
@@ -44,6 +44,7 @@ import { getBlockInfoFromPos } from "./extensions/Blocks/helpers/getBlockInfoFro
 
 import { FormattingToolbarProsemirrorPlugin } from "./extensions/FormattingToolbar/FormattingToolbarPlugin";
 import { HyperlinkToolbarProsemirrorPlugin } from "./extensions/HyperlinkToolbar/HyperlinkToolbarPlugin";
+import { ImageToolbarProsemirrorPlugin } from "./extensions/ImageToolbar/ImageToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "./extensions/SideMenu/SideMenuPlugin";
 import { BaseSlashMenuItem } from "./extensions/SlashMenu/BaseSlashMenuItem";
 import { SlashMenuProsemirrorPlugin } from "./extensions/SlashMenu/SlashMenuPlugin";
@@ -106,6 +107,13 @@ export type BlockNoteEditorOptions<BSchema extends BlockSchema> = {
    */
   blockSchema: BSchema;
 
+  /**
+   * A custom function to handle file uploads.
+   * @param file The file that should be uploaded.
+   * @returns The URL of the uploaded file.
+   */
+  uploadFile: (file: File) => Promise<string>;
+
   /**
    * When enabled, allows for collaboration between multiple users.
    */
@@ -151,6 +159,9 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
   public readonly formattingToolbar: FormattingToolbarProsemirrorPlugin<BSchema>;
   public readonly slashMenu: SlashMenuProsemirrorPlugin<BSchema, any>;
   public readonly hyperlinkToolbar: HyperlinkToolbarProsemirrorPlugin<BSchema>;
+  public readonly imageToolbar: ImageToolbarProsemirrorPlugin<BSchema>;
+
+  public readonly uploadFile: ((file: File) => Promise<string>) | undefined;
 
   constructor(
     private readonly options: Partial<BlockNoteEditorOptions<BSchema>> = {}
@@ -178,6 +189,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
         getDefaultSlashMenuItems(newOptions.blockSchema)
     );
     this.hyperlinkToolbar = new HyperlinkToolbarProsemirrorPlugin(this);
+    this.imageToolbar = new ImageToolbarProsemirrorPlugin(this);
 
     const extensions = getBlockNoteExtensions<BSchema>({
       editor: this,
@@ -195,13 +207,16 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
           this.formattingToolbar.plugin,
           this.slashMenu.plugin,
           this.hyperlinkToolbar.plugin,
+          this.imageToolbar.plugin,
         ];
       },
     });
     extensions.push(blockNoteUIExtension);
 
     this.schema = newOptions.blockSchema;
 
+    this.uploadFile = newOptions.uploadFile;
+
     const initialContent =
       newOptions.initialContent ||
       (options.collaboration
@@ -468,6 +483,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       posBeforeNode + 2
     )!;
 
+    // For blocks without inline content
+    if (contentNode.type.spec.content === "") {
+      this._tiptapEditor.commands.setNodeSelection(startPos);
+      return;
+    }
+
     if (placement === "start") {
       this._tiptapEditor.commands.setTextSelection(startPos + 1);
     } else {
@@ -481,9 +502,12 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    * Gets a snapshot of the current selection.
    */
   public getSelection(): Selection<BSchema> | undefined {
+    // Either the TipTap selection is empty, or it's a node selection. In either
+    // case, it only spans one block, so we return undefined.
     if (
       this._tiptapEditor.state.selection.from ===
-      this._tiptapEditor.state.selection.to
+        this._tiptapEditor.state.selection.to ||
+      "node" in this._tiptapEditor.state.selection
     ) {
       return undefined;
     }

packages/core/src/api/blockManipulation/__snapshots__/blockManipulation.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blocks 1`] = `
 [
@@ -16,7 +16,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -33,7 +33,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -53,7 +53,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -70,7 +70,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -106,7 +106,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -142,7 +142,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -159,7 +159,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete multiple blo
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -286,7 +286,7 @@ exports[`Insert, Update, & Delete Blocks > Insert, update, & delete single block
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "3",
+      "level": 3,
       "textAlignment": "right",
       "textColor": "default",
     },
@@ -349,7 +349,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -366,7 +366,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -386,7 +386,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -403,7 +403,7 @@ exports[`Inserting Blocks with Different Placements > Insert after existing bloc
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -439,7 +439,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
         "id": "2",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -456,7 +456,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -476,7 +476,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
         "id": "4",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -493,7 +493,7 @@ exports[`Inserting Blocks with Different Placements > Insert before existing blo
     "id": "3",
     "props": {
       "backgroundColor": "default",
-      "level": "2",
+      "level": 2,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -531,7 +531,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
             "id": "2",
             "props": {
               "backgroundColor": "default",
-              "level": "1",
+              "level": 1,
               "textAlignment": "left",
               "textColor": "default",
             },
@@ -548,7 +548,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
         "id": "1",
         "props": {
           "backgroundColor": "default",
-          "level": "1",
+          "level": 1,
           "textAlignment": "left",
           "textColor": "default",
         },
@@ -568,7 +568,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
             "id": "4",
             "props": {
               "backgroundColor": "default",
-              "level": "2",
+              "level": 2,
               "textAlignment": "left",
               "textColor": "default",
             },
@@ -585,7 +585,7 @@ exports[`Inserting Blocks with Different Placements > Insert nested inside exist
         "id": "3",
         "props": {
           "backgroundColor": "default",
-          "level": "2",
+          "level": 2,
           "textAlignment": "left",
           "textColor": "default",
         },

packages/core/src/api/blockManipulation/blockManipulation.test.ts

@@ -1,6 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { Block, BlockNoteEditor, PartialBlock } from "../..";
-import { DefaultBlockSchema } from "../../extensions/Blocks/api/defaultBlocks";
 
 let editor: BlockNoteEditor;
 
@@ -15,13 +14,11 @@ function waitForEditor() {
   });
 }
 
-let singleBlock: PartialBlock<DefaultBlockSchema>;
+let singleBlock: PartialBlock;
 
-let multipleBlocks: PartialBlock<DefaultBlockSchema>[];
+let multipleBlocks: PartialBlock[];
 
-let insert: (
-  placement: "before" | "nested" | "after"
-) => Block<DefaultBlockSchema>[];
+let insert: (placement: "before" | "nested" | "after") => Block[];
 
 beforeEach(() => {
   (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
@@ -37,14 +34,14 @@ beforeEach(() => {
     {
       type: "heading",
       props: {
-        level: "1",
+        level: 1,
       },
       content: "Heading 1",
       children: [
         {
           type: "heading",
           props: {
-            level: "1",
+            level: 1,
           },
           content: "Nested Heading 1",
         },
@@ -53,14 +50,14 @@ beforeEach(() => {
     {
       type: "heading",
       props: {
-        level: "2",
+        level: 2,
       },
       content: "Heading 2",
       children: [
         {
           type: "heading",
           props: {
-            level: "2",
+            level: 2,
           },
           content: "Nested Heading 2",
         },
@@ -123,7 +120,7 @@ describe("Insert, Update, & Delete Blocks", () => {
       type: "heading",
       props: {
         textAlignment: "right",
-        level: "3",
+        level: 3,
       },
       content: [
         {

packages/core/src/api/formatConversions/__snapshots__/formatConversions.test.ts.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Complex Block/HTML/Markdown Conversions > Convert complex blocks to HTML 1`] = `"<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><p><span data-text-color=\\"purple\\"><span data-background-color=\\"green\\">Paragraph</span></span></p><p>P<strong>ara</strong><em>grap</em>h</p><p>P<u>ara</u><s>grap</s>h</p><ul><li><p>Bullet List Item</p></li><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p><ul><li><p>Bullet List Item</p></li></ul><p>Paragraph</p><ol><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p></li><li><p>Numbered List Item</p><ol><li><p>Numbered List Item</p></li></ol></li></ol><ul><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul></li><li><p>Bullet List Item</p></li></ul>"`;
 
@@ -68,7 +68,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested HTML to
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },
@@ -142,7 +142,7 @@ exports[`Non-Nested Block/HTML/Markdown Conversions > Convert non-nested Markdow
     "id": "1",
     "props": {
       "backgroundColor": "default",
-      "level": "1",
+      "level": 1,
       "textAlignment": "left",
       "textColor": "default",
     },