feat: Table row/column extension UI

packages/ariakit/src/index.tsx

@@ -81,6 +81,11 @@ export const components: Components = {
   },
   TableHandle: {
     Root: TableHandle,
+    ExtendButton: (props) => (
+      <button style={{ height: "100%", width: "100%" }} {...props}>
+        +
+      </button>
+    ),
   },
   Generic: {
     Form: {

packages/core/src/api/nodeConversions/blockToNode.ts

@@ -161,7 +161,8 @@ 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({});
@@ -172,7 +173,19 @@ export function tableContentToNodes<
         pNode = schema.nodes["tableParagraph"].create({}, textNodes);
       }
 
-      const cellNode = schema.nodes["tableCell"].create({}, pNode);
+      const cellNode = schema.nodes["tableCell"].create(
+        {
+          // 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
+              ? tableContent.columnWidths[i] || 100
+              : 100,
+          ],
+        },
+        pNode
+      );
       columnNodes.push(cellNode);
     }
     const rowNode = schema.nodes["tableRow"].create({}, columnNodes);

packages/core/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] || 100);
+      });
+    }
+
     rowNode.content.forEach((cellNode) => {
       row.cells.push(
         contentNodeToInlineContent(

packages/core/src/blocks/TableBlockContent/TableExtension.ts

@@ -1,13 +1,40 @@
 import { callOrReturn, Extension, getExtensionField } from "@tiptap/core";
 import { columnResizing, tableEditing } from "prosemirror-tables";
+import { TableView } from "prosemirror-tables";
+import { Node as PMNode } from "prosemirror-model";
+import { mergeCSSClasses } from "../../util/browser.js";
 
 export const TableExtension = Extension.create({
   name: "BlockNoteTableExtension",
 
   addProseMirrorPlugins: () => {
+    class CustomTableView extends TableView {
+      constructor(public node: PMNode, public cellMinWidth: number) {
+        super(node, cellMinWidth);
+
+        const blockContent = document.createElement("div");
+        blockContent.className = mergeCSSClasses(
+          "bn-block-content"
+          // blockContentHTMLAttributes.class
+        );
+        blockContent.setAttribute("data-content-type", "table");
+        // for (const [attribute, value] of Object.entries(blockContentHTMLAttributes)) {
+        //   if (attribute !== "class") {
+        //     blockContent.setAttribute(attribute, value);
+        //   }
+        // }
+
+        const tableWrapper = this.dom;
+        blockContent.appendChild(tableWrapper);
+
+        this.dom = blockContent;
+      }
+    }
+
     return [
       columnResizing({
         cellMinWidth: 100,
+        View: CustomTableView,
       }),
       tableEditing(),
     ];

packages/core/src/editor/editor.css

@@ -107,6 +107,7 @@ Tippy popups that are appended to document.body directly
 /* table related: */
 .bn-editor table {
   width: auto !important;
+  margin-bottom: 2em;
 }
 .bn-editor th,
 .bn-editor td {
@@ -115,10 +116,6 @@ Tippy popups that are appended to document.body directly
   padding: 3px 5px;
 }
 
-.bn-editor .tableWrapper {
-  margin: 1em 0;
-}
-
 .bn-editor th {
   font-weight: bold;
   text-align: left;

packages/core/src/extensions/TableHandles/TableHandlesPlugin.ts

@@ -104,6 +104,7 @@ export class TableHandlesView<
 
   public tableId: string | undefined;
   public tablePos: number | undefined;
+  public tableElement: HTMLElement | undefined;
 
   public menuFrozen = false;
 
@@ -195,6 +196,7 @@ export class TableHandlesView<
     if (!blockEl) {
       return;
     }
+    this.tableElement = blockEl.node;
 
     let tableBlock: Block<any, any, any> | undefined = undefined;
 
@@ -410,6 +412,41 @@ export class TableHandlesView<
     }
   };
 
+  // Updates drag handle positions on table content updates.
+  update() {
+    if (!this.state || !this.state.show) {
+      return;
+    }
+
+    // TODO: Can also just do down the DOM tree until we find it but this seems
+    //  cleaner.
+    const tableBody = this.tableElement!.querySelector("tbody");
+    if (!tableBody) {
+      return;
+    }
+
+    if (this.state.rowIndex >= tableBody.children.length) {
+      this.state.rowIndex = tableBody.children.length - 1;
+      this.emitUpdate();
+
+      return;
+    }
+    const row = tableBody.children[this.state.rowIndex];
+
+    if (this.state.colIndex >= tableBody.children[0].children.length) {
+      this.state.colIndex = tableBody.children[0].children.length - 1;
+      this.emitUpdate();
+
+      return;
+    }
+    const cell = row.children[this.state.colIndex];
+
+    // TODO: Check if DOMRects changed first?
+    this.state.referencePosCell = cell.getBoundingClientRect();
+    this.state.referencePosTable = tableBody.getBoundingClientRect();
+    this.emitUpdate();
+  }
+
   destroy() {
     this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler);
     this.pmView.root.removeEventListener(

packages/core/src/schema/blocks/types.ts

@@ -149,6 +149,7 @@ export type TableContent<
   S extends StyleSchema = StyleSchema
 > = {
   type: "tableContent";
+  columnWidths: number[];
   rows: {
     cells: InlineContent<I, S>[][];
   }[];
@@ -224,6 +225,7 @@ export type PartialTableContent<
   S extends StyleSchema = StyleSchema
 > = {
   type: "tableContent";
+  columnWidths?: (number | undefined)[];
   rows: {
     cells: PartialInlineContent<I, S>[];
   }[];

packages/mantine/src/index.tsx

@@ -90,6 +90,11 @@ export const components: Components = {
   },
   TableHandle: {
     Root: TableHandle,
+    ExtendButton: (props) => (
+      <button style={{ height: "100%", width: "100%" }} {...props}>
+        +
+      </button>
+    ),
   },
   Generic: {
     Form: {

packages/react/src/components/TableHandles/ExtendButton/ExtendButton.tsx

@@ -0,0 +1,181 @@
+import {
+  DefaultInlineContentSchema,
+  DefaultStyleSchema,
+  InlineContentSchema,
+  PartialTableContent,
+  StyleSchema,
+} from "@blocknote/core";
+import { MouseEvent as ReactMouseEvent, useEffect, useState } from "react";
+
+import { useComponentsContext } from "../../../editor/ComponentsContext.js";
+import { TableHandleProps } from "../TableHandleProps.js";
+
+const getContentWithAddedRows = <
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  content: PartialTableContent<I, S>,
+  rowsToAdd = 1
+): PartialTableContent<I, S> => {
+  const newRow: PartialTableContent<I, S>["rows"][number] = {
+    cells: content.rows[0].cells.map(() => []),
+  };
+  const newRows: PartialTableContent<I, S>["rows"] = [];
+  for (let i = 0; i < rowsToAdd; i++) {
+    newRows.push(newRow);
+  }
+
+  return {
+    type: "tableContent",
+    columnWidths: content.columnWidths
+      ? [...content.columnWidths, ...newRows.map(() => undefined)]
+      : undefined,
+    rows: [...content.rows, ...newRows],
+  };
+};
+
+const getContentWithAddedCols = <
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(
+  content: PartialTableContent<I, S>,
+  colsToAdd = 1
+): PartialTableContent<I, S> => {
+  const newCell: PartialTableContent<I, S>["rows"][number]["cells"][number] =
+    [];
+  const newCells: PartialTableContent<I, S>["rows"][number]["cells"] = [];
+  for (let i = 0; i < colsToAdd; i++) {
+    newCells.push(newCell);
+  }
+
+  return {
+    type: "tableContent",
+    columnWidths: content.columnWidths || undefined,
+    rows: content.rows.map((row) => ({
+      cells: [...row.cells, ...newCells],
+    })),
+  };
+};
+
+export const ExtendButton = <
+  I extends InlineContentSchema = DefaultInlineContentSchema,
+  S extends StyleSchema = DefaultStyleSchema
+>(
+  props: Pick<
+    TableHandleProps<I, S>,
+    "block" | "editor" | "orientation" | "freezeHandles" | "unfreezeHandles"
+  >
+) => {
+  const Components = useComponentsContext()!;
+
+  const [editingState, setEditingState] = useState<{
+    startPos: number;
+    numOriginalCells: number;
+    clickOnly: boolean;
+  } | null>(null);
+
+  const mouseDownHandler = (event: ReactMouseEvent) => {
+    props.freezeHandles();
+    setEditingState({
+      startPos: props.orientation === "row" ? event.clientX : event.clientY,
+      numOriginalCells:
+        props.orientation === "row"
+          ? props.block.content.rows[0].cells.length
+          : props.block.content.rows.length,
+      clickOnly: true,
+    });
+  };
+
+  // Extends columns/rows on when moving the mouse.
+  useEffect(() => {
+    const callback = (event: MouseEvent) => {
+      if (editingState === null) {
+        return;
+      }
+
+      const diff =
+        (props.orientation === "row" ? event.clientX : event.clientY) -
+        editingState.startPos;
+
+      const numCells =
+        editingState.numOriginalCells +
+        Math.floor(diff / (props.orientation === "row" ? 100 : 31));
+      const block = props.editor.getBlock(props.block)!;
+      const numCurrentCells =
+        props.orientation === "row"
+          ? block.content.rows[0].cells.length
+          : block.content.rows.length;
+
+      if (
+        editingState.numOriginalCells <= numCells &&
+        numCells !== numCurrentCells
+      ) {
+        props.editor.updateBlock(props.block, {
+          type: "table",
+          content:
+            props.orientation === "row"
+              ? getContentWithAddedCols(
+                  props.block.content,
+                  numCells - editingState.numOriginalCells
+                )
+              : getContentWithAddedRows(
+                  props.block.content,
+                  numCells - editingState.numOriginalCells
+                ),
+        });
+        // Edge case for updating block content as `updateBlock` causes the
+        // selection to move into the next block, so we have to set it back.
+        if (block.content) {
+          props.editor.setTextCursorPosition(props.block);
+        }
+        setEditingState({ ...editingState, clickOnly: false });
+      }
+    };
+
+    document.body.addEventListener("mousemove", callback);
+
+    return () => {
+      document.body.removeEventListener("mousemove", callback);
+    };
+  }, [editingState, props.block, props.editor, props.orientation]);
+
+  // Stops mouse movements from extending columns/rows when the mouse is
+  // released. Also extends columns/rows by 1 if the mouse wasn't moved enough
+  // to add any, imitating a click.
+  useEffect(() => {
+    const callback = () => {
+      if (editingState?.clickOnly) {
+        props.editor.updateBlock(props.block, {
+          type: "table",
+          content:
+            props.orientation === "row"
+              ? getContentWithAddedCols(props.block.content)
+              : getContentWithAddedRows(props.block.content),
+        });
+      }
+
+      setEditingState(null);
+      props.unfreezeHandles();
+    };
+
+    document.body.addEventListener("mouseup", callback);
+
+    return () => {
+      document.body.removeEventListener("mouseup", callback);
+    };
+  }, [
+    editingState?.clickOnly,
+    getContentWithAddedCols,
+    getContentWithAddedRows,
+    props,
+  ]);
+
+  return (
+    <Components.TableHandle.ExtendButton
+      onDragStart={(event) => {
+        event.preventDefault();
+      }}
+      onMouseDown={mouseDownHandler}
+    />
+  );
+};