@blocknote/core 0.18.0 → 0.19.1

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;
             }
 
@@ -56,7 +59,7 @@ const HeadingBlockContent = createStronglyTypedTiptapNode({
               .command(
                 updateBlockCommand(
                   this.options.editor,
-                  blockInfo.blockContainer.beforePos,
+                  blockInfo.bnBlock.beforePos,
                   {
                     type: "heading",
                     props: {
@@ -78,60 +81,57 @@ 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;
         }
 
         // call updateBlockCommand
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "heading",
-              props: {
-                level: 1 as any,
-              },
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "heading",
+            props: {
+              level: 1 as any,
+            },
+          })
         );
       },
       "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;
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "heading",
-              props: {
-                level: 2 as any,
-              },
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "heading",
+            props: {
+              level: 2 as any,
+            },
+          })
         );
       },
       "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;
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "heading",
-              props: {
-                level: 3 as any,
-              },
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "heading",
+            props: {
+              level: 3 as any,
+            },
+          })
         );
       },
     };

package/src/blocks/ImageBlockContent/ImageBlockContent.ts

@@ -17,6 +17,9 @@ import {
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseImageElement } from "./imageBlockHelpers.js";
 
+export const FILE_IMAGE_ICON_SVG =
+  '<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>';
+
 export const imagePropSchema = {
   textAlignment: defaultProps.textAlignment,
   backgroundColor: defaultProps.backgroundColor,
@@ -55,8 +58,7 @@ export const imageRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   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>';
+  icon.innerHTML = FILE_IMAGE_ICON_SVG;
 
   const image = document.createElement("img");
   image.className = "bn-visual-media";

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;
           }
 
@@ -36,7 +39,7 @@ const BulletListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "bulletListItem",
                   props: {},
@@ -55,19 +58,18 @@ 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(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "bulletListItem",
-              props: {},
-            }
-          )
+        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;
           }
 
@@ -57,7 +60,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "checkListItem",
                   props: {
@@ -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;
           }
 
@@ -83,7 +89,7 @@ const checkListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "checkListItem",
                   props: {
@@ -103,20 +109,19 @@ 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;
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "checkListItem",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "checkListItem",
+            props: {},
+          })
         );
       },
     };
@@ -236,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, 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/NumberedListIndexingPlugin.ts

@@ -27,24 +27,30 @@ export const NumberedListIndexingPlugin = () => {
             node,
           });
 
+          if (!blockInfo.isBlockContainer) {
+            throw new Error("impossible");
+          }
+
           // Checks if this block is the start of a new ordered list, i.e. if it's the first block in the document, the
           // first block in its nesting level, or the previous block is not an ordered list item.
 
           const prevBlock = tr.doc.resolve(
-            blockInfo.blockContainer.beforePos
+            blockInfo.bnBlock.beforePos
           ).nodeBefore;
 
           if (prevBlock) {
             const prevBlockInfo = getBlockInfo({
-              posBeforeNode:
-                blockInfo.blockContainer.beforePos - prevBlock.nodeSize,
+              posBeforeNode: blockInfo.bnBlock.beforePos - prevBlock.nodeSize,
               node: prevBlock,
             });
 
             const isPrevBlockOrderedListItem =
-              prevBlockInfo.blockContent.node.type.name === "numberedListItem";
+              prevBlockInfo.blockNoteType === "numberedListItem";
 
             if (isPrevBlockOrderedListItem) {
+              if (!prevBlockInfo.isBlockContainer) {
+                throw new Error("impossible");
+              }
               const prevBlockIndex =
                 prevBlockInfo.blockContent.node.attrs["index"];
 
@@ -59,6 +65,7 @@ export const NumberedListIndexingPlugin = () => {
             modified = true;
 
             tr.setNodeMarkup(blockInfo.blockContent.beforePos, undefined, {
+              ...contentNode.attrs,
               index: newIndex,
             });
           }

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;
           }
 
@@ -49,7 +52,7 @@ const NumberedListItemBlockContent = createStronglyTypedTiptapNode({
             .command(
               updateBlockCommand(
                 this.options.editor,
-                blockInfo.blockContainer.beforePos,
+                blockInfo.bnBlock.beforePos,
                 {
                   type: "numberedListItem",
                   props: {},
@@ -68,19 +71,18 @@ 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;
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "numberedListItem",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "numberedListItem",
+            props: {},
+          })
         );
       },
     };

package/src/blocks/ParagraphBlockContent/ParagraphBlockContent.ts

@@ -20,19 +20,18 @@ 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;
         }
 
         return this.editor.commands.command(
-          updateBlockCommand(
-            this.options.editor,
-            blockInfo.blockContainer.beforePos,
-            {
-              type: "paragraph",
-              props: {},
-            }
-          )
+          updateBlockCommand(this.options.editor, blockInfo.bnBlock.beforePos, {
+            type: "paragraph",
+            props: {},
+          })
         );
       },
     };

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/blocks/VideoBlockContent/VideoBlockContent.ts

@@ -18,6 +18,9 @@ import {
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseVideoElement } from "./videoBlockHelpers.js";
 
+export const FILE_VIDEO_ICON_SVG =
+  '<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>';
+
 export const videoPropSchema = {
   textAlignment: defaultProps.textAlignment,
   backgroundColor: defaultProps.backgroundColor,
@@ -56,8 +59,7 @@ export const videoRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   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>';
+  icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
   const video = document.createElement("video");
   video.className = "bn-visual-media";

package/src/blocks/defaultBlockHelpers.ts

@@ -67,8 +67,13 @@ export const defaultBlockToHTML = <
   dom: HTMLElement;
   contentDOM?: HTMLElement;
 } => {
-  const node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema)
-    .firstChild!;
+  let node = blockToNode(block, editor.pmSchema, editor.schema.styleSchema);
+
+  if (node.type.name === "blockContainer") {
+    // for regular blocks, get the toDOM spec from the blockContent node
+    node = node.firstChild!;
+  }
+
   const toDOM = editor.pmSchema.nodes[node.type.name].spec.toDOM;
 
   if (toDOM === undefined) {

package/src/editor/Block.css

@@ -403,6 +403,7 @@ NESTED BLOCKS
 [data-file-block] .bn-file-caption {
   font-size: 0.8em;
   padding-block: 4px;
+  word-break: break-word;
 }
 
 [data-file-block] .bn-file-caption:empty {
@@ -472,7 +473,7 @@ NESTED BLOCKS
 }
 
 [data-background-color="orange"] {
-  background-color: #faebdd;
+  background-color: #f6e9d9;
 }
 
 [data-background-color="yellow"] {
@@ -515,3 +516,23 @@ NESTED BLOCKS
   justify-content: flex-start;
   text-align: justify;
 }
+
+.bn-block-column-list {
+  display: flex;
+  flex-direction: row;
+}
+
+.bn-block-column {
+  flex: 1;
+  padding: 12px 20px;
+  /* scroll if we overflow, for example when tables or images are in the column */
+  overflow-x: auto;
+}
+
+.bn-block-column:first-child {
+  padding-left: 0;
+}
+
+.bn-block-column:last-child {
+  padding-right: 0;
+}

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,12 +10,9 @@ import { BlockNoteEditor } from "./BlockNoteEditor.js";
  */
 it("creates an editor", () => {
   const editor = BlockNoteEditor.create();
-  const posInfo = getNearestBlockContainerPos(
-    editor._tiptapEditor.state.doc,
-    2
-  );
-  const { blockContent } = getBlockInfo(posInfo);
-  expect(blockContent.node.type.name).toEqual("paragraph");
+  const posInfo = getNearestBlockPos(editor._tiptapEditor.state.doc, 2);
+  const info = getBlockInfo(posInfo);
+  expect(info.blockNoteType).toEqual("paragraph");
 });
 
 it("immediately replaces doc", async () => {