@blocknote/core 0.24.2 → 0.25.0

package/src/api/nodeConversions/blockToNode.ts

@@ -1,4 +1,4 @@
-import { Mark, Node, Schema } from "@tiptap/pm/model";
+import { Attrs, Fragment, Mark, Node, Schema } from "@tiptap/pm/model";
 
 import UniqueID from "../../extensions/UniqueID/UniqueID.js";
 import type {
@@ -16,7 +16,9 @@ import {
   isPartialLinkInlineContent,
   isStyledTextInlineContent,
 } from "../../schema/inlineContent/types.js";
+import { getColspan, isPartialTableCell } from "../../util/table.js";
 import { UnreachableCaseError } from "../../util/typescript.js";
+import { getAbsoluteTableCells } from "../blockManipulation/tables/tables.js";
 
 /**
  * Convert a StyledText inline element to a
@@ -174,34 +176,75 @@ export function tableContentToNodes<
   styleSchema: StyleSchema
 ): Node[] {
   const rowNodes: Node[] = [];
+  // Header rows and columns are used to determine the type of the cell
+  // If headerRows is 1, then the first row is a header row
+  const headerRows = new Array(tableContent.headerRows ?? 0).fill(true);
+  // If headerCols is 1, then the first column is a header column
+  const headerCols = new Array(tableContent.headerCols ?? 0).fill(true);
 
-  for (const row of tableContent.rows) {
+  const columnWidths: (number | undefined)[] = tableContent.columnWidths ?? [];
+
+  for (let rowIndex = 0; rowIndex < tableContent.rows.length; rowIndex++) {
+    const row = tableContent.rows[rowIndex];
     const columnNodes: Node[] = [];
-    for (let i = 0; i < row.cells.length; i++) {
-      const cell = row.cells[i];
-      let pNode: Node;
+    const isHeaderRow = headerRows[rowIndex];
+    for (let cellIndex = 0; cellIndex < row.cells.length; cellIndex++) {
+      const cell = row.cells[cellIndex];
+      const isHeaderCol = headerCols[cellIndex];
+      /**
+       * The attributes of the cell to apply to the node
+       */
+      const attrs: Attrs | undefined = undefined;
+      /**
+       * The content of the cell to apply to the node
+       */
+      let content: Fragment | Node | readonly Node[] | null = null;
+
+      // Colwidths are absolutely referenced to the table, so we need to resolve the relative cell index to the absolute cell index
+      const absoluteCellIndex = getAbsoluteTableCells(
+        {
+          row: rowIndex,
+          col: cellIndex,
+        },
+        { type: "table", content: tableContent } as any
+      );
+
+      // Assume the column width is the width of the cell at the absolute cell index
+      let colwidth: (number | undefined)[] | null = columnWidths[
+        absoluteCellIndex.col
+      ]
+        ? [columnWidths[absoluteCellIndex.col]]
+        : null;
+
       if (!cell) {
-        pNode = schema.nodes["tableParagraph"].createChecked({});
+        // No-op
       } else if (typeof cell === "string") {
-        pNode = schema.nodes["tableParagraph"].createChecked(
-          {},
-          schema.text(cell)
-        );
+        content = schema.text(cell);
+      } else if (isPartialTableCell(cell)) {
+        if (cell.content) {
+          content = inlineContentToNodes(cell.content, schema, styleSchema);
+        }
+        const colspan = getColspan(cell);
+
+        if (colspan > 1) {
+          // If the cell has a > 1 colspan, we need to get the column width for each cell in the span
+          colwidth = new Array(colspan).fill(false).map((_, i) => {
+            // Starting from the absolute column index, get the column width for each cell in the span
+            return columnWidths[absoluteCellIndex.col + i] ?? undefined;
+          });
+        }
       } else {
-        const textNodes = inlineContentToNodes(cell, schema, styleSchema);
-        pNode = schema.nodes["tableParagraph"].createChecked({}, textNodes);
+        content = inlineContentToNodes(cell, schema, styleSchema);
       }
 
-      const cellNode = schema.nodes["tableCell"].createChecked(
+      const cellNode = schema.nodes[
+        isHeaderCol || isHeaderRow ? "tableHeader" : "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,
+          ...(isPartialTableCell(cell) ? cell.props : {}),
+          colwidth,
         },
-        pNode
+        schema.nodes["tableParagraph"].createChecked(attrs, content)
       );
       columnNodes.push(cellNode);
     }

package/src/api/nodeConversions/nodeToBlock.ts

@@ -10,6 +10,7 @@ import type {
   InlineContentSchema,
   StyleSchema,
   Styles,
+  TableCell,
   TableContent,
 } from "../../schema/index.js";
 import { getBlockInfoWithManualOffset } from "../getBlockInfoFromPos.js";
@@ -31,36 +32,97 @@ export function contentNodeToTableContent<
   const ret: TableContent<I, S> = {
     type: "tableContent",
     columnWidths: [],
+    headerRows: undefined,
+    headerCols: undefined,
     rows: [],
   };
 
-  contentNode.content.forEach((rowNode, _offset, index) => {
+  /**
+   * A matrix of boolean values indicating whether a cell is a header.
+   * The first index is the row index, the second index is the cell index.
+   */
+  const headerMatrix: boolean[][] = [];
+
+  contentNode.content.forEach((rowNode, _offset, rowIndex) => {
     const row: TableContent<I, S>["rows"][0] = {
       cells: [],
     };
 
-    if (index === 0) {
+    if (rowIndex === 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);
+        let colWidth = cellNode.attrs.colwidth as null | undefined | number[];
+        if (colWidth === undefined || colWidth === null) {
+          colWidth = new Array(cellNode.attrs.colspan ?? 1).fill(undefined);
+        }
+        ret.columnWidths.push(...colWidth);
       });
     }
 
-    rowNode.content.forEach((cellNode) => {
-      row.cells.push(
-        contentNodeToInlineContent(
-          cellNode.firstChild!,
-          inlineContentSchema,
-          styleSchema
+    row.cells = rowNode.content.content.map((cellNode, cellIndex) => {
+      if (!headerMatrix[rowIndex]) {
+        headerMatrix[rowIndex] = [];
+      }
+      // Mark the cell as a header if it is a tableHeader node.
+      headerMatrix[rowIndex][cellIndex] = cellNode.type.name === "tableHeader";
+      // Convert cell content to inline content and merge adjacent styled text nodes
+      const content = cellNode.content.content
+        .map((child) =>
+          contentNodeToInlineContent(child, inlineContentSchema, styleSchema)
         )
-      );
+        // The reason that we merge this content is that we allow table cells to contain multiple tableParagraph nodes
+        // So that we can leverage prosemirror-tables native merging
+        // If the schema only allowed a single tableParagraph node, then the merging would not work and cause prosemirror to fit the content into a new cell
+        .reduce((acc, contentPartial) => {
+          if (!acc.length) {
+            return contentPartial;
+          }
+
+          const last = acc[acc.length - 1];
+          const first = contentPartial[0];
+
+          // Only merge if the last and first content are both styled text nodes and have the same styles
+          if (
+            isStyledTextInlineContent(last) &&
+            isStyledTextInlineContent(first) &&
+            JSON.stringify(last.styles) === JSON.stringify(first.styles)
+          ) {
+            // Join them together if they have the same styles
+            last.text += "\n" + first.text;
+            acc.push(...contentPartial.slice(1));
+            return acc;
+          }
+          acc.push(...contentPartial);
+          return acc;
+        }, [] as InlineContent<I, S>[]);
+
+      return {
+        type: "tableCell",
+        content,
+        props: {
+          colspan: cellNode.attrs.colspan,
+          rowspan: cellNode.attrs.rowspan,
+          backgroundColor: cellNode.attrs.backgroundColor,
+          textColor: cellNode.attrs.textColor,
+          textAlignment: cellNode.attrs.textAlignment,
+        },
+      } satisfies TableCell<I, S>;
     });
 
     ret.rows.push(row);
   });
 
+  for (let i = 0; i < headerMatrix.length; i++) {
+    if (headerMatrix[i].every((isHeader) => isHeader)) {
+      ret.headerRows = (ret.headerRows ?? 0) + 1;
+    }
+  }
+
+  for (let i = 0; i < headerMatrix[0]?.length; i++) {
+    if (headerMatrix.every((row) => row[i])) {
+      ret.headerCols = (ret.headerCols ?? 0) + 1;
+    }
+  }
+
   return ret;
 }
 

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

@@ -374,80 +374,171 @@
         null,
         null
       ],
+      "headerRows": 1,
       "rows": [
         {
           "cells": [
-            [
-              {
-                "type": "text",
-                "text": "Cell 1",
-                "styles": {}
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 1",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ],
-            [
-              {
-                "type": "text",
-                "text": "Cell 2",
-                "styles": {}
+            },
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 2",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ],
-            [
-              {
-                "type": "text",
-                "text": "Cell 3",
-                "styles": {}
+            },
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 3",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ]
+            }
           ]
         },
         {
           "cells": [
-            [
-              {
-                "type": "text",
-                "text": "Cell 4",
-                "styles": {}
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 4",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ],
-            [
-              {
-                "type": "text",
-                "text": "Cell 5",
-                "styles": {}
+            },
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 5",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ],
-            [
-              {
-                "type": "text",
-                "text": "Cell 6",
-                "styles": {}
+            },
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 6",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ]
+            }
           ]
         },
         {
           "cells": [
-            [
-              {
-                "type": "text",
-                "text": "Cell 7",
-                "styles": {}
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 7",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ],
-            [
-              {
-                "type": "text",
-                "text": "Cell 8",
-                "styles": {}
+            },
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 8",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ],
-            [
-              {
-                "type": "text",
-                "text": "Cell 9",
-                "styles": {}
+            },
+            {
+              "type": "tableCell",
+              "content": [
+                {
+                  "type": "text",
+                  "text": "Cell 9",
+                  "styles": {}
+                }
+              ],
+              "props": {
+                "colspan": 1,
+                "rowspan": 1,
+                "backgroundColor": "default",
+                "textColor": "default",
+                "textAlignment": "left"
               }
-            ]
+            }
           ]
         }
       ]