feat: Default image blocks

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
@@ -460,6 +475,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 {
@@ -473,9 +494,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",
     },