@blocknote/core 0.15.7 → 0.15.10

package/src/api/parsers/handleFileInsertion.ts

@@ -106,28 +106,22 @@ export async function handleFileInsertion<
 
     const file = items[i].getAsFile();
     if (file) {
-      const updateData = await editor.uploadFile(file);
+      const fileBlock = {
+        type: fileBlockType,
+        props: {
+          name: file.name,
+        },
+      } as PartialBlock<BSchema, I, S>;
 
-      const fileBlock =
-        typeof updateData === "string"
-          ? ({
-              type: fileBlockType,
-              props: {
-                name: file.name,
-                url: updateData,
-              },
-            } as PartialBlock<BSchema, I, S>)
-          : { type: fileBlockType, ...updateData };
+      let insertedBlockId: string | undefined = undefined;
 
       if (event.type === "paste") {
-        editor.insertBlocks(
+        insertedBlockId = editor.insertBlocks(
           [fileBlock],
           editor.getTextCursorPosition().block,
           "after"
-        );
-      }
-
-      if (event.type === "drop") {
+        )[0].id;
+      } else if (event.type === "drop") {
         const coords = {
           left: (event as DragEvent).clientX,
           top: (event as DragEvent).clientY,
@@ -143,8 +137,27 @@ export async function handleFileInsertion<
           pos.pos
         );
 
-        editor.insertBlocks([fileBlock], blockInfo.id, "after");
+        insertedBlockId = editor.insertBlocks(
+          [fileBlock],
+          blockInfo.id,
+          "after"
+        )[0].id;
+      } else {
+        return;
       }
+
+      const updateData = await editor.uploadFile(file, insertedBlockId);
+
+      const updatedFileBlock =
+        typeof updateData === "string"
+          ? ({
+              props: {
+                url: updateData,
+              },
+            } as PartialBlock<BSchema, I, S>)
+          : { ...updateData };
+
+      editor.updateBlock(insertedBlockId, updatedFileBlock);
     }
   }
 }

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -9,10 +9,9 @@ import {
 import { defaultProps } from "../defaultProps";
 
 import {
-  createAddFileButton,
-  createDefaultFilePreview,
   createFigureWithCaption,
   createFileAndCaptionWrapper,
+  createFileBlockWrapper,
   createLinkWithCaption,
   parseFigureElement,
 } from "../FileBlockContent/fileBlockHelpers";
@@ -50,51 +49,28 @@ export const audioRender = (
   block: BlockFromConfig<typeof audioBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-file-block-content-wrapper";
-
-  if (block.props.url === "") {
-    const fileBlockAudioIcon = document.createElement("div");
-    fileBlockAudioIcon.innerHTML =
-      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
-    const addAudioButton = createAddFileButton(
-      block,
-      editor,
-      editor.dictionary.file_blocks.audio.add_button_text,
-      fileBlockAudioIcon.firstElementChild as HTMLElement
-    );
-    wrapper.appendChild(addAudioButton.dom);
-
-    return {
-      dom: wrapper,
-      destroy: () => {
-        addAudioButton?.destroy?.();
-      },
-    };
-  } else if (!block.props.showPreview) {
-    const file = createDefaultFilePreview(block).dom;
-    const element = createFileAndCaptionWrapper(block, file);
-
-    return {
-      dom: element.dom,
-    };
-  } else {
-    const audio = document.createElement("audio");
-    audio.className = "bn-audio";
-    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-      audio.src = downloadUrl;
-    });
-    audio.controls = true;
-    audio.contentEditable = "false";
-    audio.draggable = false;
-
-    const element = createFileAndCaptionWrapper(block, audio);
-    wrapper.appendChild(element.dom);
-
-    return {
-      dom: wrapper,
-    };
-  }
+  const icon = document.createElement("div");
+  icon.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 16.0001H5.88889L11.1834 20.3319C11.2727 20.405 11.3846 20.4449 11.5 20.4449C11.7761 20.4449 12 20.2211 12 19.9449V4.05519C12 3.93977 11.9601 3.8279 11.887 3.73857C11.7121 3.52485 11.3971 3.49335 11.1834 3.66821L5.88889 8.00007H2C1.44772 8.00007 1 8.44778 1 9.00007V15.0001C1 15.5524 1.44772 16.0001 2 16.0001ZM23 12C23 15.292 21.5539 18.2463 19.2622 20.2622L17.8445 18.8444C19.7758 17.1937 21 14.7398 21 12C21 9.26016 19.7758 6.80629 17.8445 5.15557L19.2622 3.73779C21.5539 5.75368 23 8.70795 23 12ZM18 12C18 10.0883 17.106 8.38548 15.7133 7.28673L14.2842 8.71584C15.3213 9.43855 16 10.64 16 12C16 13.36 15.3213 14.5614 14.2842 15.2841L15.7133 16.7132C17.106 15.6145 18 13.9116 18 12Z"></path></svg>';
+
+  const audio = document.createElement("audio");
+  audio.className = "bn-audio";
+  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+    audio.src = downloadUrl;
+  });
+  audio.controls = true;
+  audio.contentEditable = "false";
+  audio.draggable = false;
+
+  const element = createFileAndCaptionWrapper(block, audio);
+
+  return createFileBlockWrapper(
+    block,
+    editor,
+    element,
+    editor.dictionary.file_blocks.audio.add_button_text,
+    icon.firstElementChild as HTMLElement
+  );
 };
 
 export const audioParse = (

package/src/blocks/FileBlockContent/FileBlockContent.ts

@@ -7,9 +7,9 @@ import {
 } from "../../schema";
 import { defaultProps } from "../defaultProps";
 import {
-  createAddFileButton,
   createDefaultFilePreview,
   createFileAndCaptionWrapper,
+  createFileBlockWrapper,
   createLinkWithCaption,
   parseEmbedElement,
   parseFigureElement,
@@ -42,28 +42,10 @@ export const fileRender = (
   block: BlockFromConfig<typeof fileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  // Wrapper element to set the file alignment, contains both file/file
-  // upload dashboard and caption.
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-file-block-content-wrapper";
+  const file = createDefaultFilePreview(block).dom;
+  const element = createFileAndCaptionWrapper(block, file);
 
-  if (block.props.url === "") {
-    const addFileButton = createAddFileButton(block, editor);
-    wrapper.appendChild(addFileButton.dom);
-
-    return {
-      dom: wrapper,
-      destroy: addFileButton.destroy,
-    };
-  } else {
-    const file = createDefaultFilePreview(block).dom;
-    const element = createFileAndCaptionWrapper(block, file);
-    wrapper.appendChild(element.dom);
-
-    return {
-      dom: wrapper,
-    };
-  }
+  return createFileBlockWrapper(block, editor, element);
 };
 
 export const fileParse = (element: HTMLElement) => {

package/src/blocks/FileBlockContent/fileBlockHelpers.ts

@@ -1,5 +1,76 @@
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
-import { BlockFromConfig, FileBlockConfig } from "../../schema";
+import {
+  BlockFromConfig,
+  BlockSchemaWithBlock,
+  FileBlockConfig,
+} from "../../schema";
+
+export const createFileBlockWrapper = (
+  block: BlockFromConfig<FileBlockConfig, any, any>,
+  editor: BlockNoteEditor<
+    BlockSchemaWithBlock<FileBlockConfig["type"], FileBlockConfig>,
+    any,
+    any
+  >,
+  // TODO: Maybe make optional for default preview
+  element: { dom: HTMLElement; destroy?: () => void },
+  buttonText?: string,
+  buttonIcon?: HTMLElement
+) => {
+  const wrapper = document.createElement("div");
+  wrapper.className = "bn-file-block-content-wrapper";
+
+  if (block.props.url === "") {
+    const addFileButton = createAddFileButton(
+      block,
+      editor,
+      buttonText,
+      buttonIcon
+    );
+    wrapper.appendChild(addFileButton.dom);
+
+    const loading = document.createElement("div");
+    loading.className = "bn-file-loading-preview";
+    loading.textContent = "Loading...";
+
+    const destroyUploadStartHandler = editor.onUploadStart((blockId) => {
+      if (blockId === block.id) {
+        wrapper.removeChild(addFileButton.dom);
+        wrapper.appendChild(loading);
+      }
+    });
+    const destroyUploadEndHandler = editor.onUploadEnd((blockId) => {
+      if (blockId === block.id) {
+        wrapper.removeChild(loading);
+        wrapper.appendChild(addFileButton.dom);
+      }
+    });
+
+    return {
+      dom: wrapper,
+      destroy: () => {
+        addFileButton.destroy?.();
+        destroyUploadStartHandler();
+        destroyUploadEndHandler();
+      },
+    };
+  } else if (block.props.showPreview === false) {
+    // TODO: Not using the wrapper element here?
+    const file = createDefaultFilePreview(block).dom;
+    const element = createFileAndCaptionWrapper(block, file);
+
+    return {
+      dom: element.dom,
+    };
+  } else {
+    wrapper.appendChild(element.dom);
+
+    return {
+      dom: wrapper,
+      destroy: element.destroy,
+    };
+  }
+};
 
 // Default file preview, displaying a file icon and file name.
 export const createDefaultFilePreview = (

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -7,12 +7,10 @@ import {
   PropSchema,
 } from "../../schema";
 import { defaultProps } from "../defaultProps";
-
 import {
-  createAddFileButton,
-  createDefaultFilePreview,
   createFigureWithCaption,
   createFileAndCaptionWrapper,
+  createFileBlockWrapper,
   createLinkWithCaption,
   createResizeHandlesWrapper,
   parseFigureElement,
@@ -56,64 +54,40 @@ export const imageRender = (
   block: BlockFromConfig<typeof imageBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-file-block-content-wrapper";
-
-  if (block.props.url === "") {
-    const fileBlockImageIcon = document.createElement("div");
-    fileBlockImageIcon.innerHTML =
-      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>';
-    const addImageButton = createAddFileButton(
-      block,
-      editor,
-      editor.dictionary.file_blocks.image.add_button_text,
-      fileBlockImageIcon.firstElementChild as HTMLElement
-    );
-    wrapper.appendChild(addImageButton.dom);
-
-    return {
-      dom: wrapper,
-      destroy: () => {
-        addImageButton?.destroy?.();
-      },
-    };
-  } else if (!block.props.showPreview) {
-    const file = createDefaultFilePreview(block).dom;
-    const element = createFileAndCaptionWrapper(block, file);
-
-    return {
-      dom: element.dom,
-    };
-  } else {
-    const image = document.createElement("img");
-    image.className = "bn-visual-media";
-    editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
-      image.src = downloadUrl;
-    });
-    image.alt = block.props.name || block.props.caption || "BlockNote image";
-    image.contentEditable = "false";
-    image.draggable = false;
-    image.width = Math.min(
-      block.props.previewWidth,
-      editor.domElement.firstElementChild!.clientWidth
-    );
-
-    const file = createResizeHandlesWrapper(
-      block,
-      editor,
-      image,
-      () => image.width,
-      (width) => (image.width = width)
-    );
-
-    const element = createFileAndCaptionWrapper(block, file.dom);
-    wrapper.appendChild(element.dom);
-
-    return {
-      dom: wrapper,
-      destroy: file.destroy,
-    };
-  }
+  const icon = document.createElement("div");
+  icon.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11.1005L7 9.1005L12.5 14.6005L16 11.1005L19 14.1005V5H5V11.1005ZM4 3H20C20.5523 3 21 3.44772 21 4V20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V4C3 3.44772 3.44772 3 4 3ZM15.5 10C14.6716 10 14 9.32843 14 8.5C14 7.67157 14.6716 7 15.5 7C16.3284 7 17 7.67157 17 8.5C17 9.32843 16.3284 10 15.5 10Z"></path></svg>';
+
+  const image = document.createElement("img");
+  image.className = "bn-visual-media";
+  editor.resolveFileUrl(block.props.url).then((downloadUrl) => {
+    image.src = downloadUrl;
+  });
+  image.alt = block.props.name || block.props.caption || "BlockNote image";
+  image.contentEditable = "false";
+  image.draggable = false;
+  image.width = Math.min(
+    block.props.previewWidth,
+    editor.domElement.firstElementChild!.clientWidth
+  );
+
+  const file = createResizeHandlesWrapper(
+    block,
+    editor,
+    image,
+    () => image.width,
+    (width) => (image.width = width)
+  );
+
+  const element = createFileAndCaptionWrapper(block, file.dom);
+
+  return createFileBlockWrapper(
+    block,
+    editor,
+    element,
+    editor.dictionary.file_blocks.image.add_button_text,
+    icon.firstElementChild as HTMLElement
+  );
 };
 
 export const imageParse = (

package/src/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -9,10 +9,9 @@ import {
 import { defaultProps } from "../defaultProps";
 
 import {
-  createAddFileButton,
-  createDefaultFilePreview,
   createFigureWithCaption,
   createFileAndCaptionWrapper,
+  createFileBlockWrapper,
   createLinkWithCaption,
   createResizeHandlesWrapper,
   parseFigureElement,
@@ -56,62 +55,38 @@ export const videoRender = (
   block: BlockFromConfig<typeof videoBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
-  const wrapper = document.createElement("div");
-  wrapper.className = "bn-file-block-content-wrapper";
-
-  if (block.props.url === "") {
-    const fileBlockVideoIcon = document.createElement("div");
-    fileBlockVideoIcon.innerHTML =
-      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
-    const addVideoButton = createAddFileButton(
-      block,
-      editor,
-      editor.dictionary.file_blocks.video.add_button_text,
-      fileBlockVideoIcon.firstElementChild as HTMLElement
-    );
-    wrapper.appendChild(addVideoButton.dom);
-
-    return {
-      dom: wrapper,
-      destroy: () => {
-        addVideoButton?.destroy?.();
-      },
-    };
-  } else if (!block.props.showPreview) {
-    const file = createDefaultFilePreview(block).dom;
-    const element = createFileAndCaptionWrapper(block, file);
-
-    return {
-      dom: element.dom,
-    };
-  } else {
-    const video = document.createElement("video");
-    video.className = "bn-visual-media";
-    video.src = block.props.url;
-    video.controls = true;
-    video.contentEditable = "false";
-    video.draggable = false;
-    video.width = Math.min(
-      block.props.previewWidth,
-      editor.domElement.firstElementChild!.clientWidth
-    );
-
-    const file = createResizeHandlesWrapper(
-      block,
-      editor,
-      video,
-      () => video.width,
-      (width) => (video.width = width)
-    );
-
-    const element = createFileAndCaptionWrapper(block, file.dom);
-    wrapper.appendChild(element.dom);
-
-    return {
-      dom: wrapper,
-      destroy: file.destroy,
-    };
-  }
+  const icon = document.createElement("div");
+  icon.innerHTML =
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934ZM8 5V19H16V5H8ZM4 5V7H6V5H4ZM18 5V7H20V5H18ZM4 9V11H6V9H4ZM18 9V11H20V9H18ZM4 13V15H6V13H4ZM18 13V15H20V13H18ZM4 17V19H6V17H4ZM18 17V19H20V17H18Z"></path></svg>';
+
+  const video = document.createElement("video");
+  video.className = "bn-visual-media";
+  video.src = block.props.url;
+  video.controls = true;
+  video.contentEditable = "false";
+  video.draggable = false;
+  video.width = Math.min(
+    block.props.previewWidth,
+    editor.domElement.firstElementChild!.clientWidth
+  );
+
+  const file = createResizeHandlesWrapper(
+    block,
+    editor,
+    video,
+    () => video.width,
+    (width) => (video.width = width)
+  );
+
+  const element = createFileAndCaptionWrapper(block, file.dom);
+
+  return createFileBlockWrapper(
+    block,
+    editor,
+    element,
+    editor.dictionary.file_blocks.video.add_button_text,
+    icon.firstElementChild as HTMLElement
+  );
 };
 
 export const videoParse = (

package/src/editor/BlockNoteEditor.test.ts

@@ -57,3 +57,16 @@ it("immediately replaces doc", async () => {
     ]
   `);
 });
+
+it("adds id attribute when requested", async () => {
+  const editor = BlockNoteEditor.create({
+    setIdAttribute: true,
+  });
+  const blocks = await editor.tryParseMarkdownToBlocks(
+    "This is a normal text\n\n# And this is a large heading"
+  );
+  editor.replaceBlocks(editor.document, blocks);
+  expect(
+    await editor.blocksToFullHTML(editor.document)
+  ).toMatchInlineSnapshot(`"<div class="bn-block-group" data-node-type="blockGroup"><div class="bn-block-outer" data-node-type="blockOuter" data-id="1" id="1"><div class="bn-block" data-node-type="blockContainer" data-id="1" id="1"><div class="bn-block-content" data-content-type="paragraph"><p class="bn-inline-content">This is a normal text</p></div></div></div><div class="bn-block-outer" data-node-type="blockOuter" data-id="2" id="2"><div class="bn-block" data-node-type="blockContainer" data-id="2" id="2"><div class="bn-block-content" data-content-type="heading" data-level="1"><h1 class="bn-inline-content">And this is a large heading</h1></div></div></div></div>"`);
+});

package/src/editor/BlockNoteEditor.ts

@@ -41,9 +41,9 @@ import {
   InlineContentSchema,
   InlineContentSpecs,
   PartialInlineContent,
+  Styles,
   StyleSchema,
   StyleSpecs,
-  Styles,
 } from "../schema";
 import { mergeCSSClasses } from "../util/browser";
 import { NoInfer, UnreachableCaseError } from "../util/typescript";
@@ -67,6 +67,7 @@ import { en } from "../i18n/locales";
 
 import { Transaction } from "@tiptap/pm/state";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer";
+import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin";
 import "../style.css";
 import { initializeESMDependencies } from "../util/esmDependencies";
 
@@ -75,6 +76,13 @@ export type BlockNoteEditorOptions<
   ISchema extends InlineContentSchema,
   SSchema extends StyleSchema
 > = {
+  /**
+   * Whether changes to blocks (like indentation, creating lists, changing headings) should be animated or not. Defaults to `true`.
+   *
+   * @default true
+   */
+  animations?: boolean;
+
   disableExtensions: string[];
   /**
    * A dictionary object containing translations for the editor.
@@ -119,7 +127,10 @@ export type BlockNoteEditorOptions<
    * @param file The file that should be uploaded.
    * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
    */
-  uploadFile: (file: File) => Promise<string | Record<string, any>>;
+  uploadFile: (
+    file: File,
+    blockId?: string
+  ) => Promise<string | Record<string, any>>;
 
   /**
    * Resolve a URL of a file block to one that can be displayed or downloaded. This can be used for creating authenticated URL or
@@ -166,6 +177,16 @@ export type BlockNoteEditorOptions<
    * You probably don't need to set this manually, but use the `server-util` package instead that uses this option internally
    */
   _headless: boolean;
+
+  /**
+   * A flag indicating whether to set an HTML ID for every block
+   *
+   * When set to `true`, on each block an id attribute will be set with the block id
+   * Otherwise, the HTML ID attribute will not be set.
+   *
+   * (note that the id is always set on the `data-id` attribute)
+   */
+  setIdAttribute?: boolean;
 };
 
 const blockNoteTipTapOptions = {
@@ -255,9 +276,12 @@ export class BlockNoteEditor<
    * @returns The URL of the uploaded file OR an object containing props that should be set on the file block (such as an id)
    */
   public readonly uploadFile:
-    | ((file: File) => Promise<string | Record<string, any>>)
+    | ((file: File, blockId?: string) => Promise<string | Record<string, any>>)
     | undefined;
 
+  private onUploadStartCallbacks: ((blockId?: string) => void)[] = [];
+  private onUploadEndCallbacks: ((blockId?: string) => void)[] = [];
+
   public readonly resolveFileUrl: (url: string) => Promise<string>;
 
   public get pmSchema() {
@@ -273,7 +297,7 @@ export class BlockNoteEditor<
   }
 
   protected constructor(
-    private readonly options: Partial<BlockNoteEditorOptions<any, any, any>>
+    protected readonly options: Partial<BlockNoteEditorOptions<any, any, any>>
   ) {
     const anyOpts = options as any;
     if (anyOpts.onEditorContentChange) {
@@ -339,6 +363,7 @@ export class BlockNoteEditor<
       collaboration: newOptions.collaboration,
       trailingBlock: newOptions.trailingBlock,
       disableExtensions: newOptions.disableExtensions,
+      setIdAttribute: newOptions.setIdAttribute,
     });
 
     const blockNoteUIExtension = Extension.create({
@@ -353,12 +378,30 @@ export class BlockNoteEditor<
           ...(this.filePanel ? [this.filePanel.plugin] : []),
           ...(this.tableHandles ? [this.tableHandles.plugin] : []),
           PlaceholderPlugin(this, newOptions.placeholders),
+          ...(this.options.animations ?? true
+            ? [PreviousBlockTypePlugin()]
+            : []),
         ];
       },
     });
     extensions.push(blockNoteUIExtension);
 
-    this.uploadFile = newOptions.uploadFile;
+    if (newOptions.uploadFile) {
+      const uploadFile = newOptions.uploadFile;
+      this.uploadFile = async (file, block) => {
+        this.onUploadStartCallbacks.forEach((callback) =>
+          callback.apply(this, [block])
+        );
+        try {
+          return await uploadFile(file, block);
+        } finally {
+          this.onUploadEndCallbacks.forEach((callback) =>
+            callback.apply(this, [block])
+          );
+        }
+      };
+    }
+
     this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
     this.headless = newOptions._headless;
 
@@ -463,6 +506,28 @@ export class BlockNoteEditor<
     this._tiptapEditor.view.focus();
   }
 
+  public onUploadStart(callback: (blockId?: string) => void) {
+    this.onUploadStartCallbacks.push(callback);
+
+    return () => {
+      const index = this.onUploadStartCallbacks.indexOf(callback);
+      if (index > -1) {
+        this.onUploadStartCallbacks.splice(index, 1);
+      }
+    };
+  }
+
+  public onUploadEnd(callback: (blockId?: string) => void) {
+    this.onUploadEndCallbacks.push(callback);
+
+    return () => {
+      const index = this.onUploadEndCallbacks.indexOf(callback);
+      if (index > -1) {
+        this.onUploadEndCallbacks.splice(index, 1);
+      }
+    };
+  }
+
   /**
    * @deprecated, use `editor.document` instead
    */
@@ -550,7 +615,7 @@ export class BlockNoteEditor<
       blockArray: Block<BSchema, ISchema, SSchema>[]
     ): boolean {
       for (const block of blockArray) {
-        if (!callback(block)) {
+        if (callback(block) === false) {
           return false;
         }