@blocknote/core 0.19.0 → 0.19.2

package/src/api/getBlockInfoFromPos.ts

@@ -45,22 +45,21 @@ export type BlockInfo = {
 );
 
 /**
- * Retrieves the position just before the nearest blockContainer node in a
- * ProseMirror doc, relative to a position. If the position is within a
- * blockContainer node or its descendants, the position just before it is
- * returned. If the position is not within a blockContainer node or its
- * descendants, the position just before the next closest blockContainer node
- * is returned. If the position is beyond the last blockContainer, the position
- * just before the last blockContainer is returned.
+ * Retrieves the position just before the nearest block node in a ProseMirror
+ * doc, relative to a position. If the position is within a block node or its
+ * descendants, the position just before it is returned. If the position is not
+ * within a block node or its descendants, the position just before the next
+ * closest block node is returned. If the position is beyond the last block, the
+ * position just before the last block is returned.
  * @param doc The ProseMirror doc.
  * @param pos An integer position in the document.
  * @returns The position just before the nearest blockContainer node.
  */
-export function getNearestBlockContainerPos(doc: Node, pos: number) {
+export function getNearestBlockPos(doc: Node, pos: number) {
   const $pos = doc.resolve(pos);
 
-  // Checks if the position provided is already just before a blockContainer
-  // node, in which case we return the position.
+  // Checks if the position provided is already just before a block node, in
+  // which case we return the position.
   if ($pos.nodeAfter && $pos.nodeAfter.type.isInGroup("bnBlock")) {
     return {
       posBeforeNode: $pos.pos,
@@ -69,7 +68,7 @@ export function getNearestBlockContainerPos(doc: Node, pos: number) {
   }
 
   // Checks the node containing the position and its ancestors until a
-  // blockContainer node is found and returned.
+  // block node is found and returned.
   let depth = $pos.depth;
   let node = $pos.node(depth);
   while (depth > 0) {
@@ -84,13 +83,12 @@ export function getNearestBlockContainerPos(doc: Node, pos: number) {
     node = $pos.node(depth);
   }
 
-  // If the position doesn't lie within a blockContainer node, we instead find
-  // the position of the next closest one. If the position is beyond the last
-  // blockContainer, we return the position of the last blockContainer. While
-  // running `doc.descendants` is expensive, this case should be very rarely
-  // triggered. However, it's possible for the position to sometimes be beyond
-  // the last blockContainer node. This is a problem specifically when using the
-  // collaboration plugin.
+  // If the position doesn't lie within a block node, we instead find the
+  // position of the next closest one. If the position is beyond the last block,
+  // we return the position of the last block. While running `doc.descendants`
+  // is expensive, this case should be very rarely triggered. However, it's
+  // possible for the position to sometimes be beyond the last block node. This
+  // is a problem specifically when using the collaboration plugin.
   const allBlockContainerPositions: number[] = [];
   doc.descendants((node, pos) => {
     if (node.type.isInGroup("bnBlock")) {
@@ -119,7 +117,7 @@ export function getNearestBlockContainerPos(doc: Node, pos: number) {
  * the ProseMirror positions just before & after each node.
  * @param node The main `blockContainer` node that the block information should
  * be retrieved from,
- * @param blockContainerBeforePosOffset the position just before the
+ * @param bnBlockBeforePosOffset the position just before the
  * `blockContainer` node in the document.
  */
 export function getBlockInfoWithManualOffset(
@@ -237,15 +235,7 @@ export function getBlockInfoFromResolvedPos(resolvedPos: ResolvedPos) {
  * @param state The ProseMirror editor state.
  */
 export function getBlockInfoFromSelection(state: EditorState) {
-  const posInfo = getNearestBlockContainerPos(
-    state.doc,
-    state.selection.anchor
-  );
-  const ret = getBlockInfo(posInfo);
-  if (!ret.isBlockContainer) {
-    throw new Error(
-      `selection always expected to return blockContainer ${state.selection.anchor}`
-    );
-  }
-  return ret;
+  const posInfo = getNearestBlockPos(state.doc, state.selection.anchor);
+
+  return getBlockInfo(posInfo);
 }

package/src/api/parsers/html/__snapshots__/parse-notion-html.json

@@ -365,8 +365,7 @@
     "id": "19",
     "type": "table",
     "props": {
-      "textColor": "default",
-      "backgroundColor": "default"
+      "textColor": "default"
     },
     "content": {
       "type": "tableContent",

package/src/blocks/CodeBlockContent/CodeBlockContent.ts

@@ -47,11 +47,15 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
     };
   },
   addAttributes() {
+    const supportedLanguages = this.options
+      .supportedLanguages as SupportedLanguageConfig[];
+
     return {
       language: {
         default: this.options.defaultLanguage,
         parseHTML: (inputElement) => {
           let element = inputElement as HTMLElement | null;
+          let language: string | null = null;
 
           if (
             element?.tagName === "DIV" &&
@@ -67,20 +71,26 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           const dataLanguage = element?.getAttribute("data-language");
 
           if (dataLanguage) {
-            return dataLanguage.toLowerCase();
+            language = dataLanguage.toLowerCase();
+          } else {
+            const classNames = [...(element?.className.split(" ") || [])];
+            const languages = classNames
+              .filter((className) => className.startsWith("language-"))
+              .map((className) => className.replace("language-", ""));
+            const [classLanguage] = languages;
+
+            language = classLanguage.toLowerCase();
           }
 
-          const classNames = [...(element?.className.split(" ") || [])];
-          const languages = classNames
-            .filter((className) => className.startsWith("language-"))
-            .map((className) => className.replace("language-", ""));
-          const [language] = languages;
-
           if (!language) {
             return null;
           }
 
-          return language.toLowerCase();
+          return (
+            supportedLanguages.find(({ match }) => {
+              return match.includes(language);
+            })?.id || this.options.defaultLanguage
+          );
         },
         renderHTML: (attributes) => {
           return attributes.language && attributes.language !== "text"

package/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts

@@ -1,4 +1,4 @@
-import { bundledLanguagesInfo } from "shiki/bundle/web";
+import { bundledLanguagesInfo } from "shiki";
 
 export type SupportedLanguageConfig = {
   id: string;
@@ -14,23 +14,42 @@ export const defaultSupportedLanguages: SupportedLanguageConfig[] = [
   },
   ...bundledLanguagesInfo
     .filter((lang) => {
-      return ![
-        "angular-html",
-        "angular-ts",
-        "astro",
-        "blade",
-        "coffee",
-        "handlebars",
-        "html-derivative",
-        "http",
-        "imba",
-        "jinja",
-        "jison",
-        "json5",
-        "marko",
-        "mdc",
-        "stylus",
-        "ts-tags",
+      return [
+        "c",
+        "cpp",
+        "css",
+        "glsl",
+        "graphql",
+        "haml",
+        "html",
+        "java",
+        "javascript",
+        "json",
+        "jsonc",
+        "jsonl",
+        "jsx",
+        "julia",
+        "less",
+        "markdown",
+        "mdx",
+        "php",
+        "postcss",
+        "pug",
+        "python",
+        "r",
+        "regexp",
+        "sass",
+        "scss",
+        "shellscript",
+        "sql",
+        "svelte",
+        "typescript",
+        "vue",
+        "vue-html",
+        "wasm",
+        "wgsl",
+        "xml",
+        "yaml",
       ].includes(lang.id);
     })
     .map((lang) => ({
@@ -38,6 +57,7 @@ export const defaultSupportedLanguages: SupportedLanguageConfig[] = [
       id: lang.id,
       name: lang.name,
     })),
+  { id: "tsx", name: "TSX", match: ["tsx", "typescriptreact"] },
   {
     id: "haskell",
     name: "Haskell",

package/src/blocks/HeadingBlockContent/HeadingBlockContent.ts

@@ -48,7 +48,10 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
           find: new RegExp(`^(#{${level}})\\s$`),
           handler: ({ state, chain, range }) => {
             const blockInfo = getBlockInfoFromSelection(state);
-            if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+            if (
+              !blockInfo.isBlockContainer ||
+              blockInfo.blockContent.node.type.spec.content !== "inline*"
+            ) {
               return;
             }
 
@@ -78,7 +81,10 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
     return {
       "Mod-Alt-1": () => {
         const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 
@@ -94,7 +100,10 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
       },
       "Mod-Alt-2": () => {
         const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 
@@ -109,7 +118,10 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
       },
       "Mod-Alt-3": () => {
         const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 

package/src/blocks/ListItemBlockContent/BulletListItemBlockContent/BulletListItemBlockContent.ts

@@ -28,7 +28,10 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
         find: new RegExp(`^[-+*]\\s$`),
         handler: ({ state, chain, range }) => {
           const blockInfo = getBlockInfoFromSelection(state);
-          if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
             return;
           }
 
@@ -55,11 +58,14 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
       Enter: () => handleEnter(this.options.editor),
       "Mod-Shift-8": () => {
         const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 
-        return this.options.editor.commands.command(
+        return this.editor.commands.command(
           updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
             type: "bulletListItem",
             props: {},

package/src/blocks/ListItemBlockContent/CheckListItemBlockContent/CheckListItemBlockContent.ts

@@ -2,7 +2,7 @@ import { InputRule } from "@tiptap/core";
 import { updateBlockCommand } from "../../../api/blockManipulation/commands/updateBlock/updateBlock.js";
 import {
   getBlockInfoFromSelection,
-  getNearestBlockContainerPos,
+  getNearestBlockPos,
 } from "../../../api/getBlockInfoFromPos.js";
 import {
   PropSchema,
@@ -49,7 +49,10 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         find: new RegExp(`\\[\\s*\\]\\s$`),
         handler: ({ state, chain, range }) => {
           const blockInfo = getBlockInfoFromSelection(state);
-          if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
             return;
           }
 
@@ -75,7 +78,10 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
         handler: ({ state, chain, range }) => {
           const blockInfo = getBlockInfoFromSelection(state);
 
-          if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
             return;
           }
 
@@ -103,8 +109,11 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
     return {
       Enter: () => handleEnter(this.options.editor),
       "Mod-Shift-9": () => {
-        const blockInfo = getBlockInfoFromSelection(this.options.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        const blockInfo = getBlockInfoFromSelection(this.editor.state);
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 
@@ -232,10 +241,17 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
 
         // TODO: test
         if (typeof getPos !== "boolean") {
-          const beforeBlockContainerPos = getNearestBlockContainerPos(
+          const beforeBlockContainerPos = getNearestBlockPos(
             editor.state.doc,
             getPos()
           );
+
+          if (beforeBlockContainerPos.node.type.name !== "blockContainer") {
+            throw new Error(
+              `Expected blockContainer node, got ${beforeBlockContainerPos.node.type.name}`
+            );
+          }
+
           this.editor.commands.command(
             updateBlockCommand(
               this.options.editor,

package/src/blocks/ListItemBlockContent/ListItemKeyboardShortcuts.ts

@@ -5,9 +5,11 @@ import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js";
 
 export const handleEnter = (editor: BlockNoteEditor<any, any, any>) => {
   const ttEditor = editor._tiptapEditor;
-  const { blockContent, bnBlock: blockContainer } = getBlockInfoFromSelection(
-    ttEditor.state
-  );
+  const blockInfo = getBlockInfoFromSelection(ttEditor.state);
+  if (!blockInfo.isBlockContainer) {
+    return false;
+  }
+  const { bnBlock: blockContainer, blockContent } = blockInfo;
 
   const selectionEmpty =
     ttEditor.state.selection.anchor === ttEditor.state.selection.head;

package/src/blocks/ListItemBlockContent/NumberedListItemBlockContent/NumberedListItemBlockContent.ts

@@ -41,7 +41,10 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
         find: new RegExp(`^1\\.\\s$`),
         handler: ({ state, chain, range }) => {
           const blockInfo = getBlockInfoFromSelection(state);
-          if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+          if (
+            !blockInfo.isBlockContainer ||
+            blockInfo.blockContent.node.type.spec.content !== "inline*"
+          ) {
             return;
           }
 
@@ -68,7 +71,10 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
       Enter: () => handleEnter(this.options.editor),
       "Mod-Shift-7": () => {
         const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -20,7 +20,10 @@ export const ParagraphBlockContent = createStronglyTypedTiptapNode({
     return {
       "Mod-Alt-0": () => {
         const blockInfo = getBlockInfoFromSelection(this.editor.state);
-        if (blockInfo.blockContent.node.type.spec.content !== "inline*") {
+        if (
+          !blockInfo.isBlockContainer ||
+          blockInfo.blockContent.node.type.spec.content !== "inline*"
+        ) {
           return true;
         }
 

package/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -15,7 +15,6 @@ import { defaultProps } from "../defaultProps.js";
 import { EMPTY_CELL_WIDTH, TableExtension } from "./TableExtension.js";
 
 export const tablePropSchema = {
-  backgroundColor: defaultProps.backgroundColor,
   textColor: defaultProps.textColor,
 };
 

package/src/editor/Block.css

@@ -299,6 +299,9 @@ NESTED BLOCKS
   transition: opacity 0.3s;
   transition-delay: 1s;
 }
+.bn-block-content[data-content-type="codeBlock"] > div > select > option {
+  color: black;
+}
 .bn-block-content[data-content-type="codeBlock"]:hover > div > select,
 .bn-block-content[data-content-type="codeBlock"] > div > select:focus {
   opacity: 0.5;

package/src/editor/BlockNoteEditor.test.ts

@@ -1,7 +1,7 @@
 import { expect, it } from "vitest";
 import {
   getBlockInfo,
-  getNearestBlockContainerPos,
+  getNearestBlockPos,
 } from "../api/getBlockInfoFromPos.js";
 import { BlockNoteEditor } from "./BlockNoteEditor.js";
 
@@ -10,10 +10,7 @@ import { BlockNoteEditor } from "./BlockNoteEditor.js";
  */
 it("creates an editor", () => {
   const editor = BlockNoteEditor.create();
-  const posInfo = getNearestBlockContainerPos(
-    editor._tiptapEditor.state.doc,
-    2
-  );
+  const posInfo = getNearestBlockPos(editor._tiptapEditor.state.doc, 2);
   const info = getBlockInfo(posInfo);
   expect(info.blockNoteType).toEqual("paragraph");
 });

package/src/editor/BlockNoteEditor.ts

@@ -1,4 +1,11 @@
-import { EditorOptions, Extension, getSchema } from "@tiptap/core";
+import {
+  AnyExtension,
+  EditorOptions,
+  Extension,
+  getSchema,
+  Mark,
+  Node as TipTapNode,
+} from "@tiptap/core";
 import { Node, Schema } from "prosemirror-model";
 // import "./blocknote.css";
 import * as Y from "yjs";
@@ -47,9 +54,9 @@ import {
   InlineContentSchema,
   InlineContentSpecs,
   PartialInlineContent,
+  Styles,
   StyleSchema,
   StyleSpecs,
-  Styles,
 } from "../schema/index.js";
 import { mergeCSSClasses } from "../util/browser.js";
 import { NoInfer, UnreachableCaseError } from "../util/typescript.js";
@@ -67,7 +74,6 @@ import {
   BlockNoteTipTapEditorOptions,
 } from "./BlockNoteTipTapEditor.js";
 
-import { PlaceholderPlugin } from "../extensions/Placeholder/PlaceholderPlugin.js";
 import { Dictionary } from "../i18n/dictionary.js";
 import { en } from "../i18n/locales/index.js";
 
@@ -76,10 +82,14 @@ import { dropCursor } from "prosemirror-dropcursor";
 import { createInternalHTMLSerializer } from "../api/exporters/html/internalHTMLSerializer.js";
 import { inlineContentToNodes } from "../api/nodeConversions/blockToNode.js";
 import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js";
-import { NodeSelectionKeyboardPlugin } from "../extensions/NodeSelectionKeyboard/NodeSelectionKeyboardPlugin.js";
-import { PreviousBlockTypePlugin } from "../extensions/PreviousBlockType/PreviousBlockTypePlugin.js";
 import "../style.css";
 
+export type BlockNoteExtension =
+  | AnyExtension
+  | {
+      plugin: Plugin;
+    };
+
 export type BlockNoteEditorOptions<
   BSchema extends BlockSchema,
   ISchema extends InlineContentSchema,
@@ -92,7 +102,11 @@ export type BlockNoteEditorOptions<
    */
   animations?: boolean;
 
+  /**
+   * Disable internal extensions (based on keys / extension name)
+   */
   disableExtensions: string[];
+
   /**
    * A dictionary object containing translations for the editor.
    */
@@ -173,9 +187,16 @@ export type BlockNoteEditorOptions<
     renderCursor?: (user: any) => HTMLElement;
   };
 
-  // tiptap options, undocumented
+  /**
+   * additional tiptap options, undocumented
+   */
   _tiptapOptions: Partial<EditorOptions>;
 
+  /**
+   * (experimental) add extra prosemirror plugins or tiptap extensions to the editor
+   */
+  _extensions: Record<string, BlockNoteExtension>;
+
   trailingBlock?: boolean;
 
   /**
@@ -213,6 +234,11 @@ export class BlockNoteEditor<
 > {
   private readonly _pmSchema: Schema;
 
+  /**
+   * extensions that are added to the editor, can be tiptap extensions or prosemirror plugins
+   */
+  public readonly extensions: Record<string, BlockNoteExtension> = {};
+
   /**
    * Boolean indicating whether the editor is in headless mode.
    * Headless mode means we can use features like importing / exporting blocks,
@@ -355,17 +381,7 @@ export class BlockNoteEditor<
     this.inlineContentImplementations = newOptions.schema.inlineContentSpecs;
     this.styleImplementations = newOptions.schema.styleSpecs;
 
-    this.formattingToolbar = new FormattingToolbarProsemirrorPlugin(this);
-    this.linkToolbar = new LinkToolbarProsemirrorPlugin(this);
-    this.sideMenu = new SideMenuProsemirrorPlugin(this);
-    this.suggestionMenus = new SuggestionMenuProseMirrorPlugin(this);
-    this.filePanel = new FilePanelProsemirrorPlugin(this as any);
-
-    if (checkDefaultBlockTypeInSchema("table", this)) {
-      this.tableHandles = new TableHandlesProsemirrorPlugin(this as any);
-    }
-
-    const extensions = getBlockNoteExtensions({
+    this.extensions = getBlockNoteExtensions({
       editor: this,
       domAttributes: newOptions.domAttributes || {},
       blockSpecs: this.schema.blockSpecs,
@@ -375,30 +391,28 @@ export class BlockNoteEditor<
       trailingBlock: newOptions.trailingBlock,
       disableExtensions: newOptions.disableExtensions,
       setIdAttribute: newOptions.setIdAttribute,
+      animations: newOptions.animations ?? true,
+      tableHandles: checkDefaultBlockTypeInSchema("table", this),
+      dropCursor: this.options.dropCursor ?? dropCursor,
+      placeholders: newOptions.placeholders,
     });
 
-    const dropCursorPlugin: any = this.options.dropCursor ?? dropCursor;
-    const blockNoteUIExtension = Extension.create({
-      name: "BlockNoteUIExtension",
-
-      addProseMirrorPlugins: () => {
-        return [
-          this.formattingToolbar.plugin,
-          this.linkToolbar.plugin,
-          this.sideMenu.plugin,
-          this.suggestionMenus.plugin,
-          ...(this.filePanel ? [this.filePanel.plugin] : []),
-          ...(this.tableHandles ? [this.tableHandles.plugin] : []),
-          dropCursorPlugin({ width: 5, color: "#ddeeff", editor: this }),
-          PlaceholderPlugin(this, newOptions.placeholders),
-          NodeSelectionKeyboardPlugin(),
-          ...(this.options.animations ?? true
-            ? [PreviousBlockTypePlugin()]
-            : []),
-        ];
-      },
+    // add extensions from _tiptapOptions
+    (newOptions._tiptapOptions?.extensions || []).forEach((ext) => {
+      this.extensions[ext.name] = ext;
+    });
+
+    // add extensions from options
+    Object.entries(newOptions._extensions || {}).forEach(([key, ext]) => {
+      this.extensions[key] = ext;
     });
-    extensions.push(blockNoteUIExtension);
+
+    this.formattingToolbar = this.extensions["formattingToolbar"] as any;
+    this.linkToolbar = this.extensions["linkToolbar"] as any;
+    this.sideMenu = this.extensions["sideMenu"] as any;
+    this.suggestionMenus = this.extensions["suggestionMenus"] as any;
+    this.filePanel = this.extensions["filePanel"] as any;
+    this.tableHandles = this.extensions["tableHandles"] as any;
 
     if (newOptions.uploadFile) {
       const uploadFile = newOptions.uploadFile;
@@ -449,14 +463,35 @@ export class BlockNoteEditor<
       );
     }
 
+    const tiptapExtensions = [
+      ...Object.entries(this.extensions).map(([key, ext]) => {
+        if (
+          ext instanceof Extension ||
+          ext instanceof TipTapNode ||
+          ext instanceof Mark
+        ) {
+          // tiptap extension
+          return ext;
+        }
+
+        if (!ext.plugin) {
+          throw new Error(
+            "Extension should either be a TipTap extension or a ProseMirror plugin in a plugin property"
+          );
+        }
+
+        // "blocknote" extensions (prosemirror plugins)
+        return Extension.create({
+          name: key,
+          addProseMirrorPlugins: () => [ext.plugin],
+        });
+      }),
+    ];
     const tiptapOptions: BlockNoteTipTapEditorOptions = {
       ...blockNoteTipTapOptions,
       ...newOptions._tiptapOptions,
       content: initialContent,
-      extensions: [
-        ...(newOptions._tiptapOptions?.extensions || []),
-        ...extensions,
-      ],
+      extensions: tiptapExtensions,
       editorProps: {
         ...newOptions._tiptapOptions?.editorProps,
         attributes: {