@blocknote/core 0.17.1 → 0.19.0

package/src/api/nodeConversions/blockToNode.ts

@@ -54,7 +54,7 @@ function styledTextToNodes<T extends StyleSchema>(
       // Converts text & line breaks to nodes.
       .map((text) => {
         if (text === "\n") {
-          return schema.nodes["hardBreak"].create();
+          return schema.nodes["hardBreak"].createChecked();
         } else {
           return schema.text(text, marks);
         }
@@ -161,21 +161,35 @@ export function tableContentToNodes<
 
   for (const row of tableContent.rows) {
     const columnNodes: Node[] = [];
-    for (const cell of row.cells) {
+    for (let i = 0; i < row.cells.length; i++) {
+      const cell = row.cells[i];
       let pNode: Node;
       if (!cell) {
-        pNode = schema.nodes["tableParagraph"].create({});
+        pNode = schema.nodes["tableParagraph"].createChecked({});
       } else if (typeof cell === "string") {
-        pNode = schema.nodes["tableParagraph"].create({}, schema.text(cell));
+        pNode = schema.nodes["tableParagraph"].createChecked(
+          {},
+          schema.text(cell)
+        );
       } else {
         const textNodes = inlineContentToNodes(cell, schema, styleSchema);
-        pNode = schema.nodes["tableParagraph"].create({}, textNodes);
+        pNode = schema.nodes["tableParagraph"].createChecked({}, textNodes);
       }
 
-      const cellNode = schema.nodes["tableCell"].create({}, pNode);
+      const cellNode = schema.nodes["tableCell"].createChecked(
+        {
+          // The colwidth array should have multiple values when the colspan of
+          // a cell is greater than 1. However, this is not yet implemented so
+          // we can always assume a length of 1.
+          colwidth: tableContent.columnWidths?.[i]
+            ? [tableContent.columnWidths[i]]
+            : null,
+        },
+        pNode
+      );
       columnNodes.push(cellNode);
     }
-    const rowNode = schema.nodes["tableRow"].create({}, columnNodes);
+    const rowNode = schema.nodes["tableRow"].createChecked({}, columnNodes);
     rowNodes.push(rowNode);
   }
   return rowNodes;
@@ -201,16 +215,16 @@ function blockOrInlineContentToContentNode(
   }
 
   if (!block.content) {
-    contentNode = schema.nodes[type].create(block.props);
+    contentNode = schema.nodes[type].createChecked(block.props);
   } else if (typeof block.content === "string") {
     const nodes = inlineContentToNodes([block.content], schema, styleSchema);
-    contentNode = schema.nodes[type].create(block.props, nodes);
+    contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else if (Array.isArray(block.content)) {
     const nodes = inlineContentToNodes(block.content, schema, styleSchema);
-    contentNode = schema.nodes[type].create(block.props, nodes);
+    contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else if (block.content.type === "tableContent") {
     const nodes = tableContentToNodes(block.content, schema, styleSchema);
-    contentNode = schema.nodes[type].create(block.props, nodes);
+    contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else {
     throw new UnreachableCaseError(block.content.type);
   }
@@ -218,7 +232,7 @@ function blockOrInlineContentToContentNode(
 }
 
 /**
- * Converts a BlockNote block to a TipTap node.
+ * Converts a BlockNote block to a Prosemirror node.
  */
 export function blockToNode(
   block: PartialBlock<any, any, any>,
@@ -231,12 +245,6 @@ export function blockToNode(
     id = UniqueID.options.generateID();
   }
 
-  const contentNode = blockOrInlineContentToContentNode(
-    block,
-    schema,
-    styleSchema
-  );
-
   const children: Node[] = [];
 
   if (block.children) {
@@ -245,13 +253,41 @@ export function blockToNode(
     }
   }
 
-  const groupNode = schema.nodes["blockGroup"].create({}, children);
+  const nodeTypeCorrespondingToBlock = schema.nodes[block.type];
 
-  return schema.nodes["blockContainer"].create(
-    {
-      id: id,
-      ...block.props,
-    },
-    children.length > 0 ? [contentNode, groupNode] : contentNode
-  );
+  if (nodeTypeCorrespondingToBlock.isInGroup("blockContent")) {
+    // Blocks with a type that matches "blockContent" group always need to be wrapped in a blockContainer
+
+    const contentNode = blockOrInlineContentToContentNode(
+      block,
+      schema,
+      styleSchema
+    );
+
+    const groupNode =
+      children.length > 0
+        ? schema.nodes["blockGroup"].createChecked({}, children)
+        : undefined;
+
+    return schema.nodes["blockContainer"].createChecked(
+      {
+        id: id,
+        ...block.props,
+      },
+      groupNode ? [contentNode, groupNode] : contentNode
+    );
+  } else if (nodeTypeCorrespondingToBlock.isInGroup("bnBlock")) {
+    // this is a bnBlock node like Column or ColumnList that directly translates to a prosemirror node
+    return schema.nodes[block.type].createChecked(
+      {
+        id: id,
+        ...block.props,
+      },
+      children
+    );
+  } else {
+    throw new Error(
+      `block type ${block.type} doesn't match blockContent or bnBlock group`
+    );
+  }
 }

package/src/api/nodeConversions/fragmentToBlocks.ts

@@ -43,6 +43,24 @@ export function fragmentToBlocks<
         // so we don't need to serialize this block, just descend into the children of the blockGroup
         return true;
       }
+    }
+
+    if (node.type.name === "columnList" && node.childCount === 1) {
+      // column lists with a single column should be flattened (not the entire column list has been selected)
+      node.firstChild?.forEach((child) => {
+        blocks.push(
+          nodeToBlock(
+            child,
+            schema.blockSchema,
+            schema.inlineContentSchema,
+            schema.styleSchema
+          )
+        );
+      });
+      return false;
+    }
+
+    if (node.type.isInGroup("bnBlock")) {
       blocks.push(
         nodeToBlock(
           node,

package/src/api/nodeConversions/nodeToBlock.ts

@@ -30,14 +30,24 @@ export function contentNodeToTableContent<
 >(contentNode: Node, inlineContentSchema: I, styleSchema: S) {
   const ret: TableContent<I, S> = {
     type: "tableContent",
+    columnWidths: [],
     rows: [],
   };
 
-  contentNode.content.forEach((rowNode) => {
+  contentNode.content.forEach((rowNode, _offset, index) => {
     const row: TableContent<I, S>["rows"][0] = {
       cells: [],
     };
 
+    if (index === 0) {
+      rowNode.content.forEach((cellNode) => {
+        // The colwidth array should have multiple values when the colspan of a
+        // cell is greater than 1. However, this is not yet implemented so we
+        // can always assume a length of 1.
+        ret.columnWidths.push(cellNode.attrs.colwidth?.[0] || undefined);
+      });
+    }
+
     rowNode.content.forEach((cellNode) => {
       row.cells.push(
         contentNodeToInlineContent(
@@ -296,7 +306,9 @@ export function nodeToCustomInlineContent<
 }
 
 /**
- * Convert a TipTap node to a BlockNote block.
+ * Convert a Prosemirror node to a BlockNote block.
+ *
+ * TODO: test changes
  */
 export function nodeToBlock<
   BSchema extends BlockSchema,
@@ -309,11 +321,9 @@ export function nodeToBlock<
   styleSchema: S,
   blockCache?: WeakMap<Node, Block<BSchema, I, S>>
 ): Block<BSchema, I, S> {
-  if (node.type.name !== "blockContainer") {
+  if (!node.type.isInGroup("bnBlock")) {
     throw Error(
-      "Node must be of type blockContainer, but is of type" +
-        node.type.name +
-        "."
+      "Node must be in bnBlock group, but is of type" + node.type.name
     );
   }
 
@@ -323,29 +333,26 @@ export function nodeToBlock<
     return cachedBlock;
   }
 
-  const { blockContainer, blockContent, blockGroup } =
-    getBlockInfoWithManualOffset(node, 0);
+  const blockInfo = getBlockInfoWithManualOffset(node, 0);
 
-  let id = blockContainer.node.attrs.id;
+  let id = blockInfo.bnBlock.node.attrs.id;
 
   // Only used for blocks converted from other formats.
   if (id === null) {
     id = UniqueID.options.generateID();
   }
 
+  const blockSpec = blockSchema[blockInfo.blockNoteType];
+
+  if (!blockSpec) {
+    throw Error("Block is of an unrecognized type: " + blockInfo.blockNoteType);
+  }
+
   const props: any = {};
   for (const [attr, value] of Object.entries({
     ...node.attrs,
-    ...blockContent.node.attrs,
+    ...(blockInfo.isBlockContainer ? blockInfo.blockContent.node.attrs : {}),
   })) {
-    const blockSpec = blockSchema[blockContent.node.type.name];
-
-    if (!blockSpec) {
-      throw Error(
-        "Block is of an unrecognized type: " + blockContent.node.type.name
-      );
-    }
-
     const propSchema = blockSpec.propSchema;
 
     if (attr in propSchema) {
@@ -353,10 +360,10 @@ export function nodeToBlock<
     }
   }
 
-  const blockConfig = blockSchema[blockContent.node.type.name];
+  const blockConfig = blockSchema[blockInfo.blockNoteType];
 
   const children: Block<BSchema, I, S>[] = [];
-  blockGroup?.node.forEach((child) => {
+  blockInfo.childContainer?.node.forEach((child) => {
     children.push(
       nodeToBlock(
         child,
@@ -371,14 +378,20 @@ export function nodeToBlock<
   let content: Block<any, any, any>["content"];
 
   if (blockConfig.content === "inline") {
+    if (!blockInfo.isBlockContainer) {
+      throw new Error("impossible");
+    }
     content = contentNodeToInlineContent(
-      blockContent.node,
+      blockInfo.blockContent.node,
       inlineContentSchema,
       styleSchema
     );
   } else if (blockConfig.content === "table") {
+    if (!blockInfo.isBlockContainer) {
+      throw new Error("impossible");
+    }
     content = contentNodeToTableContent(
-      blockContent.node,
+      blockInfo.blockContent.node,
       inlineContentSchema,
       styleSchema
     );

package/src/api/nodeUtil.ts

@@ -17,7 +17,7 @@ export function getNodeById(
     }
 
     // Keeps traversing nodes if block with target ID has not been found.
-    if (node.type.name !== "blockContainer" || node.attrs.id !== id) {
+    if (!node.type.isInGroup("bnBlock") || node.attrs.id !== id) {
       return true;
     }
 

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

@@ -370,6 +370,11 @@
     },
     "content": {
       "type": "tableContent",
+      "columnWidths": [
+        null,
+        null,
+        null
+      ],
       "rows": [
         {
           "cells": [

package/src/api/parsers/markdown/parseMarkdown.ts

@@ -12,7 +12,7 @@ import { HTMLToBlocks } from "../html/parseHTML.js";
 // modified version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
 // that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
 function code(state: any, node: any) {
-  const value = node.value ? node.value + "\n" : "";
+  const value = node.value ? node.value : "";
   /** @type {Properties} */
   const properties: any = {};
 

package/src/api/testUtil/cases/defaultSchema.ts

@@ -175,6 +175,33 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "codeBlock/empty",
+      blocks: [
+        {
+          type: "codeBlock",
+        },
+      ],
+    },
+    {
+      name: "codeBlock/defaultLanguage",
+      blocks: [
+        {
+          type: "codeBlock",
+          content: "console.log('Hello, world!');",
+        },
+      ],
+    },
+    {
+      name: "codeBlock/python",
+      blocks: [
+        {
+          type: "codeBlock",
+          props: { language: "python" },
+          content: "print('Hello, world!')",
+        },
+      ],
+    },
     {
       name: "file/button",
       blocks: [
@@ -332,6 +359,74 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "table/basic",
+      blocks: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "table/allColWidths",
+      blocks: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            columnWidths: [100, 200, 300],
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
+    {
+      name: "table/mixedColWidths",
+      blocks: [
+        {
+          type: "table",
+          content: {
+            type: "tableContent",
+            columnWidths: [100, undefined, 300],
+            rows: [
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+              {
+                cells: ["Table Cell", "Table Cell", "Table Cell"],
+              },
+            ],
+          },
+        },
+      ],
+    },
     {
       name: "link/basic",
       blocks: [

package/src/api/testUtil/partialBlockTestUtil.ts

@@ -1,4 +1,5 @@
 import { Block, PartialBlock } from "../../blocks/defaultBlocks.js";
+import { BlockNoteSchema } from "../../editor/BlockNoteSchema.js";
 import UniqueID from "../../extensions/UniqueID/UniqueID.js";
 import { BlockSchema, TableContent } from "../../schema/blocks/types.js";
 import {
@@ -54,6 +55,17 @@ function partialContentToInlineContent(
         } as any;
       }
     });
+  } else if (content?.type === "tableContent") {
+    return {
+      type: "tableContent",
+      columnWidths: content.columnWidths,
+      rows: content.rows.map((row) => ({
+        ...row,
+        cells: row.cells.map(
+          (cell) => partialContentToInlineContent(cell) as any
+        ),
+      })),
+    };
   }
 
   return content;
@@ -64,11 +76,11 @@ export function partialBlocksToBlocksForTesting<
   I extends InlineContentSchema,
   S extends StyleSchema
 >(
-  schema: BSchema,
-  partialBlocks: Array<PartialBlock<BSchema, I, S>>
+  schema: BlockNoteSchema<BSchema, I, S>,
+  partialBlocks: Array<PartialBlock<NoInfer<BSchema>, NoInfer<I>, NoInfer<S>>>
 ): Array<Block<BSchema, I, S>> {
   return partialBlocks.map((partialBlock) =>
-    partialBlockToBlockForTesting(schema, partialBlock)
+    partialBlockToBlockForTesting(schema.blockSchema, partialBlock)
   );
 }
 
@@ -80,12 +92,19 @@ export function partialBlockToBlockForTesting<
   schema: BSchema,
   partialBlock: PartialBlock<BSchema, I, S>
 ): Block<BSchema, I, S> {
+  const contentType: "inline" | "table" | "none" =
+    schema[partialBlock.type!].content;
+
   const withDefaults: Block<BSchema, I, S> = {
     id: "",
     type: partialBlock.type!,
     props: {} as any,
     content:
-      schema[partialBlock.type!].content === "inline" ? [] : (undefined as any),
+      contentType === "inline"
+        ? []
+        : contentType === "table"
+        ? { type: "tableContent", columnWidths: [], rows: [] }
+        : (undefined as any),
     children: [] as any,
     ...partialBlock,
   };
@@ -98,6 +117,24 @@ export function partialBlockToBlockForTesting<
     }
   );
 
+  if (contentType === "inline") {
+    const content = withDefaults.content as InlineContent<I, S>[] | undefined;
+    withDefaults.content = partialContentToInlineContent(content) as any;
+  } else if (contentType === "table") {
+    const content = withDefaults.content as TableContent<I, S> | undefined;
+    withDefaults.content = {
+      type: "tableContent",
+      columnWidths:
+        content?.columnWidths ||
+        content?.rows[0]?.cells.map(() => undefined) ||
+        [],
+      rows:
+        content?.rows.map((row) => ({
+          cells: row.cells.map((cell) => partialContentToInlineContent(cell)),
+        })) || [],
+    } as any;
+  }
+
   return {
     ...withDefaults,
     content: partialContentToInlineContent(withDefaults.content),

package/src/blocks/AudioBlockContent/AudioBlockContent.ts

@@ -17,6 +17,9 @@ import {
 } from "../FileBlockContent/fileBlockHelpers.js";
 import { parseAudioElement } from "./audioBlockHelpers.js";
 
+export const FILE_AUDIO_ICON_SVG =
+  '<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>';
+
 export const audioPropSchema = {
   backgroundColor: defaultProps.backgroundColor,
   // File name.
@@ -50,8 +53,7 @@ export const audioRender = (
   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 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>';
+  icon.innerHTML = FILE_AUDIO_ICON_SVG;
 
   const audio = document.createElement("audio");
   audio.className = "bn-audio";