@blocknote/core 0.13.2 → 0.13.4

package/src/editor/Block.css

@@ -13,15 +13,9 @@ BASIC STYLES
   flex-direction: column;
 }
 
-/*Ensures block content inside React node views spans editor width*/
-.bn-react-node-view-renderer {
-  display: flex;
-  flex-grow: 1;
-}
-
 .bn-block-content {
+  display: flex;
   padding: 3px 0;
-  flex-grow: 1;
   transition: font-size 0.2s;
   width: 100%;
   /*
@@ -36,6 +30,13 @@ BASIC STYLES
   /*margin: 0px;*/
 }
 
+.bn-block-content.ProseMirror-selectednode > *,
+/* Case for node view renderers */
+.ProseMirror-selectednode > .bn-block-content > * {
+  border-radius: 4px;
+  outline: 4px solid rgb(100, 160, 255);
+}
+
 /*
 NESTED BLOCKS
 */
@@ -184,6 +185,28 @@ NESTED BLOCKS
   gap: 1.2em;
 }
 
+/* Checked */
+.bn-block-content[data-content-type="checkListItem"] > div {
+  display: flex;
+}
+
+.bn-block-content[data-content-type="checkListItem"] > div > div > input {
+  margin: 0 1.2em 0 0;
+  cursor: pointer;
+}
+
+.bn-block-content[data-content-type="checkListItem"][data-checked="true"] .bn-inline-content {
+  text-decoration: line-through;
+}
+
+.bn-block-content[data-text-alignment="center"] {
+  justify-content: center;
+}
+
+.bn-block-content[data-text-alignment="right"] {
+  justify-content: flex-end;
+}
+
 /* No list nesting */
 .bn-block-outer[data-prev-type="bulletListItem"]
   > .bn-block
@@ -235,49 +258,75 @@ NESTED BLOCKS
   content: "▪";
 }
 
-/* IMAGES */
+/* FILES */
+
+/* Add block button & default preview */
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-add-file-button),
+[data-file-block] .bn-file-block-content-wrapper:has(.bn-file-default-preview) {
+  width: 100%;
+}
 
-[data-content-type="image"] .bn-image-block-content-wrapper {
+[data-file-block] .bn-file-block-content-wrapper {
+  cursor: pointer;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: stretch;
   user-select: none;
-  width: 100%;
 }
 
-[data-content-type="image"] .bn-add-image-button {
-  display: flex;
-  flex-direction: row;
+[data-file-block] .bn-add-file-button {
   align-items: center;
-  gap: 8px;
-  background-color: whitesmoke;
+  background-color: rgb(242, 241, 238);
   border-radius: 4px;
+  color: rgb(125, 121, 122);
   cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
   padding: 12px;
   width: 100%;
 }
 
-[data-content-type="image"] .bn-add-image-button:hover {
-  background-color: gainsboro;
+[data-file-block] .bn-add-file-button:hover {
+  background-color: rgb(225, 225, 225);
 }
 
-[data-content-type="image"] .bn-add-image-button-icon {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 5H4V19L13.2923 9.70649C13.6828 9.31595 14.3159 9.31591 14.7065 9.70641L20 15.0104V5ZM2 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 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z'%3E%3C/path%3E%3C/svg%3E");
+[data-file-block] .bn-add-file-button-icon {
   width: 24px;
   height: 24px;
 }
 
-[data-content-type="image"] .bn-add-image-button-text {
-  color: black;
+[data-file-block] .bn-add-file-button .bn-add-file-button-text {
+  font-size: 0.9rem;
 }
 
-[data-content-type="image"] .bn-image-and-caption-wrapper {
+[data-file-block] .bn-file-and-caption-wrapper {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
 }
 
-[data-content-type="image"] .bn-image-wrapper {
+[data-file-block] .bn-file-default-preview {
+  align-items: center;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  padding: 4px;
+  width: 100%;
+}
+
+[data-file-block] .bn-file-default-preview:hover,
+.ProseMirror-selectednode .bn-file-default-preview {
+  background-color: rgb(225, 225, 225);
+}
+
+[data-file-block] .bn-file-default-preview-icon {
+  width: 24px;
+  height: 24px;
+}
+
+[data-file-block] .bn-visual-media-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -285,12 +334,12 @@ NESTED BLOCKS
   width: fit-content;
 }
 
-[data-content-type="image"] .bn-image {
+[data-file-block] .bn-visual-media {
   border-radius: 4px;
   max-width: 100%;
 }
 
-[data-content-type="image"] .bn-image-resize-handle {
+[data-file-block] .bn-visual-media-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;
@@ -300,8 +349,17 @@ NESTED BLOCKS
   cursor: ew-resize;
 }
 
-[data-content-type="image"] .caption {
+[data-content-type="audio"] > .bn-file-block-content-wrapper, .bn-audio {
+  width: 100%;
+}
+
+[data-file-block] .bn-file-caption {
   font-size: 0.8em;
+  padding-block: 4px;
+}
+
+[data-file-block] .bn-file-caption:empty {
+  padding-block: 0;
 }
 
 /* PLACEHOLDERS*/
@@ -392,17 +450,21 @@ NESTED BLOCKS
 
 /* TEXT ALIGNMENT */
 [data-text-alignment="left"] {
+  justify-content: flex-start;
   text-align: left;
 }
 
 [data-text-alignment="center"] {
+  justify-content: center;
   text-align: center;
 }
 
 [data-text-alignment="right"] {
+  justify-content: flex-end;
   text-align: right;
 }
 
 [data-text-alignment="justify"] {
+  justify-content: flex-start;
   text-align: justify;
 }

package/src/editor/BlockNoteEditor.ts

@@ -26,8 +26,8 @@ import {
   DefaultStyleSchema,
   PartialBlock,
 } from "../blocks/defaultBlocks";
+import { FilePanelProsemirrorPlugin } from "../extensions/FilePanel/FilePanelPlugin";
 import { FormattingToolbarProsemirrorPlugin } from "../extensions/FormattingToolbar/FormattingToolbarPlugin";
-import { ImagePanelProsemirrorPlugin } from "../extensions/ImagePanel/ImageToolbarPlugin";
 import { LinkToolbarProsemirrorPlugin } from "../extensions/LinkToolbar/LinkToolbarPlugin";
 import { SideMenuProsemirrorPlugin } from "../extensions/SideMenu/SideMenuPlugin";
 import { SuggestionMenuProseMirrorPlugin } from "../extensions/SuggestionMenu/SuggestionPlugin";
@@ -113,9 +113,16 @@ export type BlockNoteEditorOptions<
   /**
    * A custom function to handle file uploads.
    * @param file The file that should be uploaded.
-   * @returns The URL of the uploaded file.
+   * @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>;
+  uploadFile: (file: File) => 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
+   * implementing custom protocols / schemes
+   * @returns The URL that's
+   */
+  resolveFileUrl: (url: string) => Promise<string>;
 
   /**
    * When enabled, allows for collaboration between multiple users.
@@ -187,13 +194,21 @@ export class BlockNoteEditor<
     ISchema,
     SSchema
   >;
-  public readonly imagePanel?: ImagePanelProsemirrorPlugin<ISchema, SSchema>;
+  public readonly filePanel?: FilePanelProsemirrorPlugin<
+    BSchema,
+    ISchema,
+    SSchema
+  >;
   public readonly tableHandles?: TableHandlesProsemirrorPlugin<
     ISchema,
     SSchema
   >;
 
-  public readonly uploadFile: ((file: File) => Promise<string>) | undefined;
+  public readonly uploadFile:
+    | ((file: File) => Promise<string | Record<string, any>>)
+    | undefined;
+
+  public readonly resolveFileUrl: (url: string) => Promise<string>;
 
   public static create<
     BSchema extends BlockSchema = DefaultBlockSchema,
@@ -254,10 +269,8 @@ export class BlockNoteEditor<
     this.linkToolbar = new LinkToolbarProsemirrorPlugin(this);
     this.sideMenu = new SideMenuProsemirrorPlugin(this);
     this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
-    if (checkDefaultBlockTypeInSchema("image", this)) {
-      // Type guards only work on `const`s? Not working for `this`
-      this.imagePanel = new ImagePanelProsemirrorPlugin(this as any);
-    }
+    this.filePanel = new FilePanelProsemirrorPlugin(this as any);
+
     if (checkDefaultBlockTypeInSchema("table", this)) {
       this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
     }
@@ -282,7 +295,7 @@ export class BlockNoteEditor<
           this.linkToolbar.plugin,
           this.sideMenu.plugin,
           this.suggestionMenus.plugin,
-          ...(this.imagePanel ? [this.imagePanel.plugin] : []),
+          ...(this.filePanel ? [this.filePanel.plugin] : []),
           ...(this.tableHandles ? [this.tableHandles.plugin] : []),
           PlaceholderPlugin(this, newOptions.placeholders),
         ];
@@ -291,6 +304,7 @@ export class BlockNoteEditor<
     extensions.push(blockNoteUIExtension);
 
     this.uploadFile = newOptions.uploadFile;
+    this.resolveFileUrl = newOptions.resolveFileUrl || (async (url) => url);
 
     if (newOptions.collaboration && newOptions.initialContent) {
       console.warn(

package/src/editor/BlockNoteSchema.ts

@@ -23,6 +23,15 @@ import type {
 } from "../schema/blocks/types";
 import type { BlockNoteEditor } from "./BlockNoteEditor";
 
+function removeUndefined<T extends Record<string, any> | undefined>(obj: T): T {
+  if (!obj) {
+    return obj;
+  }
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== undefined)
+  ) as T;
+}
+
 export class BlockNoteSchema<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
@@ -84,10 +93,10 @@ export class BlockNoteSchema<
     inlineContentSpecs?: InlineContentSpecs;
     styleSpecs?: StyleSpecs;
   }) {
-    this.blockSpecs = opts?.blockSpecs || defaultBlockSpecs;
+    this.blockSpecs = removeUndefined(opts?.blockSpecs) || defaultBlockSpecs;
     this.inlineContentSpecs =
-      opts?.inlineContentSpecs || defaultInlineContentSpecs;
-    this.styleSpecs = opts?.styleSpecs || defaultStyleSpecs;
+      removeUndefined(opts?.inlineContentSpecs) || defaultInlineContentSpecs;
+    this.styleSpecs = removeUndefined(opts?.styleSpecs) || defaultStyleSpecs;
 
     this.blockSchema = getBlockSchemaFromSpecs(this.blockSpecs) as any;
     this.inlineContentSchema = getInlineContentSchemaFromSpecs(

package/src/editor/transformPasted.ts

@@ -40,7 +40,8 @@ export function transformPasted(slice: Slice, view: EditorView) {
 
         if (
           nestedChild.type.name === "bulletListItem" ||
-          nestedChild.type.name === "numberedListItem"
+          nestedChild.type.name === "numberedListItem" ||
+          nestedChild.type.name === "checkListItem"
         ) {
           content.push(f.child(i + 1));
           f = removeChild(f, i + 1);

package/src/extensions/{ImagePanel/ImageToolbarPlugin.ts → FilePanel/FilePanelPlugin.ts}

@@ -1,30 +1,29 @@
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
-import { DefaultBlockSchema } from "../../blocks/defaultBlocks";
 import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
 import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
 import type {
   BlockFromConfig,
+  BlockSchema,
+  FileBlockConfig,
   InlineContentSchema,
   StyleSchema,
 } from "../../schema";
 import { EventEmitter } from "../../util/EventEmitter";
 
-export type ImagePanelState<
+export type FilePanelState<
   I extends InlineContentSchema,
   S extends StyleSchema
 > = UiElementPosition & {
   // TODO: This typing is not quite right (children should be from BSchema)
-  block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
+  block: BlockFromConfig<FileBlockConfig, I, S>;
 };
 
-export class ImagePanelView<
-  I extends InlineContentSchema,
-  S extends StyleSchema
-> implements PluginView
+export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
+  implements PluginView
 {
-  public state?: ImagePanelState<I, S>;
+  public state?: FilePanelState<I, S>;
   public emitUpdate: () => void;
 
   public prevWasEditable: boolean | null = null;
@@ -32,11 +31,11 @@ export class ImagePanelView<
   constructor(
     private readonly pluginKey: PluginKey,
     private readonly pmView: EditorView,
-    emitUpdate: (state: ImagePanelState<I, S>) => void
+    emitUpdate: (state: FilePanelState<I, S>) => void
   ) {
     this.emitUpdate = () => {
       if (!this.state) {
-        throw new Error("Attempting to update uninitialized image panel");
+        throw new Error("Attempting to update uninitialized file panel");
       }
 
       emitUpdate(this.state);
@@ -77,7 +76,7 @@ export class ImagePanelView<
 
   update(view: EditorView, prevState: EditorState) {
     const pluginState: {
-      block: BlockFromConfig<DefaultBlockSchema["image"], I, S>;
+      block: BlockFromConfig<FileBlockConfig, I, S>;
     } = this.pluginKey.getState(view.state);
 
     if (!this.state?.show && pluginState.block) {
@@ -124,27 +123,26 @@ export class ImagePanelView<
   }
 }
 
-const imagePanelPluginKey = new PluginKey("ImagePanelPlugin");
+const filePanelPluginKey = new PluginKey("FilePanelPlugin");
 
-export class ImagePanelProsemirrorPlugin<
+export class FilePanelProsemirrorPlugin<
+  B extends BlockSchema,
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view: ImagePanelView<I, S> | undefined;
+  private view: FilePanelView<I, S> | undefined;
   public readonly plugin: Plugin;
 
-  constructor(
-    _editor: BlockNoteEditor<{ image: DefaultBlockSchema["image"] }, I, S>
-  ) {
+  constructor(_editor: BlockNoteEditor<B, I, S>) {
     super();
     this.plugin = new Plugin<{
-      block: BlockFromConfig<DefaultBlockSchema["image"], I, S> | undefined;
+      block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
     }>({
-      key: imagePanelPluginKey,
+      key: filePanelPluginKey,
       view: (editorView) => {
-        this.view = new ImagePanelView(
+        this.view = new FilePanelView(
           // editor,
-          imagePanelPluginKey,
+          filePanelPluginKey,
           editorView,
           (state) => {
             this.emit("update", state);
@@ -168,9 +166,8 @@ export class ImagePanelProsemirrorPlugin<
           };
         },
         apply: (transaction) => {
-          const block:
-            | BlockFromConfig<DefaultBlockSchema["image"], I, S>
-            | undefined = transaction.getMeta(imagePanelPluginKey)?.block;
+          const block: BlockFromConfig<FileBlockConfig, I, S> | undefined =
+            transaction.getMeta(filePanelPluginKey)?.block;
 
           return {
             block,
@@ -184,7 +181,7 @@ export class ImagePanelProsemirrorPlugin<
     return this.view?.state?.show || false;
   }
 
-  public onUpdate(callback: (state: ImagePanelState<I, S>) => void) {
+  public onUpdate(callback: (state: FilePanelState<I, S>) => void) {
     return this.on("update", callback);
   }
 

package/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts

@@ -1,4 +1,4 @@
-import { isNodeSelection, posToDOMRect } from "@tiptap/core";
+import { isNodeSelection, isTextSelection, posToDOMRect } from "@tiptap/core";
 import { EditorState, Plugin, PluginKey, PluginView } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 
@@ -22,7 +22,19 @@ export class FormattingToolbarView implements PluginView {
     state: EditorState;
     from: number;
     to: number;
-  }) => boolean = ({ state }) => !state.selection.empty;
+  }) => boolean = ({ state, from, to, view }) => {
+    const { doc, selection } = state;
+    const { empty } = selection;
+
+    // Sometime check for `empty` is not enough.
+    // Doubleclick an empty paragraph returns a node size of 2.
+    // So we check also for an empty text size.
+    const isEmptyTextBlock =
+      !doc.textBetween(from, to).length && isTextSelection(state.selection);
+
+    // check view.hasFocus so that the toolbar doesn't show up when the editor is not focused or when for example a code block is focused
+    return !(!view.hasFocus() || empty || isEmptyTextBlock);
+  };
 
   constructor(
     private readonly editor: BlockNoteEditor<

package/src/extensions/SuggestionMenu/getDefaultSlashMenuItems.ts

@@ -144,6 +144,19 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("checkListItem", editor)) {
+    items.push({
+      onItemClick: () => {
+        insertOrUpdateBlock(editor, {
+          type: "checkListItem",
+        });
+      },
+      badge: formatKeyboardShortcut("Mod-Shift-9"),
+      key: "check_list",
+      ...editor.dictionary.slash_menu.check_list,
+    });
+  }
+
   if (checkDefaultBlockTypeInSchema("paragraph", editor)) {
     items.push({
       onItemClick: () => {
@@ -188,9 +201,9 @@ export function getDefaultSlashMenuItems<
           type: "image",
         });
 
-        // Immediately open the image toolbar
+        // Immediately open the file toolbar
         editor.prosemirrorView.dispatch(
-          editor._tiptapEditor.state.tr.setMeta(editor.imagePanel!.plugin, {
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
             block: insertedBlock,
           })
         );
@@ -200,6 +213,63 @@ export function getDefaultSlashMenuItems<
     });
   }
 
+  if (checkDefaultBlockTypeInSchema("video", editor)) {
+    items.push({
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "video",
+        });
+
+        // Immediately open the file toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      key: "video",
+      ...editor.dictionary.slash_menu.video,
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("audio", editor)) {
+    items.push({
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "audio",
+        });
+
+        // Immediately open the file toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      key: "audio",
+      ...editor.dictionary.slash_menu.audio,
+    });
+  }
+
+  if (checkDefaultBlockTypeInSchema("file", editor)) {
+    items.push({
+      onItemClick: () => {
+        const insertedBlock = insertOrUpdateBlock(editor, {
+          type: "file",
+        });
+
+        // Immediately open the file toolbar
+        editor.prosemirrorView.dispatch(
+          editor._tiptapEditor.state.tr.setMeta(editor.filePanel!.plugin, {
+            block: insertedBlock,
+          })
+        );
+      },
+      key: "image",
+      ...editor.dictionary.slash_menu.file,
+    });
+  }
+
   return items;
 }
 

package/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -7,9 +7,9 @@ import {
   BlockFromConfigNoChildren,
   BlockSchemaWithBlock,
   InlineContentSchema,
-  SpecificBlock,
   StyleSchema,
 } from "../../schema";
+import { checkBlockIsDefaultType } from "../../blocks/defaultBlockTypeGuards";
 import { EventEmitter } from "../../util/EventEmitter";
 import { getDraggableBlockFromCoords } from "../SideMenu/SideMenuPlugin";
 
@@ -83,7 +83,6 @@ function hideElementsWithClassNames(classNames: string[]) {
 }
 
 export class TableHandlesView<
-  BSchema extends BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
   I extends InlineContentSchema,
   S extends StyleSchema
 > implements PluginView
@@ -146,28 +145,15 @@ export class TableHandlesView<
 
     const blockEl = getDraggableBlockFromCoords(cellRect, this.pmView);
     if (!blockEl) {
-      throw new Error(
-        "Found table cell element, but could not find surrounding blockContent element."
-      );
-    }
-    this.tableId = blockEl.id;
-
-    if (
-      this.state !== undefined &&
-      this.state.show &&
-      this.tableId === blockEl.id &&
-      this.state.rowIndex === rowIndex &&
-      this.state.colIndex === colIndex
-    ) {
       return;
     }
 
-    let block: Block<any, any, any> | undefined = undefined;
+    let tableBlock: Block<any, any, any> | undefined = undefined;
 
     // Copied from `getBlock`. We don't use `getBlock` since we also need the PM
     // node for the table, so we would effectively be doing the same work twice.
     this.editor._tiptapEditor.state.doc.descendants((node, pos) => {
-      if (typeof block !== "undefined") {
+      if (typeof tableBlock !== "undefined") {
         return false;
       }
 
@@ -175,24 +161,44 @@ export class TableHandlesView<
         return true;
       }
 
-      block = nodeToBlock(
+      const block = nodeToBlock(
         node,
         this.editor.schema.blockSchema,
         this.editor.schema.inlineContentSchema,
         this.editor.schema.styleSchema,
         this.editor.blockCache
       );
-      this.tablePos = pos + 1;
+
+      if (checkBlockIsDefaultType("table", block, this.editor)) {
+        this.tablePos = pos + 1;
+        tableBlock = block;
+      }
 
       return false;
     });
 
+    if (!tableBlock) {
+      return;
+    }
+
+    this.tableId = blockEl.id;
+
+    if (
+      this.state !== undefined &&
+      this.state.show &&
+      this.tableId === blockEl.id &&
+      this.state.rowIndex === rowIndex &&
+      this.state.colIndex === colIndex
+    ) {
+      return;
+    }
+
     this.state = {
       show: true,
       referencePosCell: cellRect,
       referencePosTable: tableRect,
 
-      block: block! as SpecificBlock<BSchema, "table", I, S>,
+      block: tableBlock,
       colIndex: colIndex,
       rowIndex: rowIndex,
 
@@ -365,13 +371,7 @@ export class TableHandlesProsemirrorPlugin<
   I extends InlineContentSchema,
   S extends StyleSchema
 > extends EventEmitter<any> {
-  private view:
-    | TableHandlesView<
-        BlockSchemaWithBlock<"table", DefaultBlockSchema["table"]>,
-        I,
-        S
-      >
-    | undefined;
+  private view: TableHandlesView<I, S> | undefined;
   public readonly plugin: Plugin;
 
   constructor(