feat: Table row/column extension UI

packages/ariakit/src/index.tsx

@@ -39,6 +39,7 @@ import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
 import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
 import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
 import { TableHandle } from "./tableHandle/TableHandle.js";
+import { ExtendButton } from "./tableHandle/ExtendButton.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
 import { ToolbarButton } from "./toolbar/ToolbarButton.js";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
@@ -81,6 +82,7 @@ export const components: Components = {
   },
   TableHandle: {
     Root: TableHandle,
+    ExtendButton: ExtendButton,
   },
   Generic: {
     Form: {

packages/ariakit/src/style.css

@@ -160,10 +160,33 @@
 }
 
 .bn-ariakit .bn-side-menu,
-.bn-ariakit .bn-table-handle {
+.bn-ariakit .bn-table-handle,
+.bn-ariakit .bn-extend-button {
     color: gray;
 }
 
+.bn-ariakit .bn-extend-button-editing {
+    background-color: hsl(204 4% 0% / 0.05);
+}
+
+.bn-ariakit .bn-extend-button-editing:where(.dark, .dark *) {
+    background-color: hsl(204 20% 100% / 0.05);
+}
+
+.bn-ariakit .bn-extend-button-row {
+    height: 100%;
+    width: 18px;
+    padding: 0;
+    margin-left: 4px;
+}
+
+.bn-ariakit .bn-extend-button-column {
+    height: 18px;
+    width: 100%;
+    padding: 0;
+    margin-top: 4px;
+}
+
 .bn-ak-button:where(.dark, .dark *) {
     color: hsl(204 20% 100%);
 }

packages/ariakit/src/tableHandle/ExtendButton.tsx

@@ -0,0 +1,30 @@
+import { Button as AriakitButton } from "@ariakit/react";
+
+import { forwardRef } from "react";
+import { ComponentProps } from "@blocknote/react";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+
+export const ExtendButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["TableHandle"]["ExtendButton"]
+>((props, ref) => {
+  const { children, className, onDragStart, onMouseDown, ...rest } = props;
+
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitButton
+      className={mergeCSSClasses(
+        "bn-ak-button bn-ak-secondary",
+        className || ""
+      )}
+      ref={ref}
+      onDragStart={onDragStart}
+      onMouseDown={onMouseDown}
+      {...rest}>
+      {children}
+    </AriakitButton>
+  );
+});

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

@@ -47,6 +47,7 @@ import { SuggestionMenuItem } from "./suggestionMenu/SuggestionMenuItem.js";
 import { SuggestionMenuLabel } from "./suggestionMenu/SuggestionMenuLabel.js";
 import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
 import { TableHandle } from "./tableHandle/TableHandle.js";
+import { ExtendButton } from "./tableHandle/ExtendButton.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
 import { ToolbarButton } from "./toolbar/ToolbarButton.js";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
@@ -90,6 +91,7 @@ export const components: Components = {
   },
   TableHandle: {
     Root: TableHandle,
+    ExtendButton: ExtendButton,
   },
   Generic: {
     Form: {

packages/mantine/src/style.css

@@ -488,7 +488,8 @@
 }
 
 /* Table Handle styling */
-.bn-mantine .bn-table-handle {
+.bn-mantine .bn-table-handle,
+.bn-mantine .bn-extend-button {
   align-items: center;
   background-color: var(--bn-colors-menu-background);
   border: var(--bn-border);
@@ -508,10 +509,24 @@
 }
 
 .bn-mantine .bn-table-handle:hover,
-.bn-mantine .bn-table-handle-dragging {
+.bn-mantine .bn-table-handle-dragging,
+.bn-mantine .bn-extend-button:hover,
+.bn-mantine .bn-extend-button-editing {
   background-color: var(--bn-colors-hovered-background);
 }
 
+.bn-mantine .bn-extend-button-row {
+  height: 100%;
+  width: 18px;
+  margin-left: 4px;
+}
+
+.bn-mantine .bn-extend-button-column {
+  height: 18px;
+  width: 100%;
+  margin-top: 4px;
+}
+
 /* Drag Handle & Table Handle Menu styling */
 .bn-mantine .bn-drag-handle-menu {
   overflow: visible;

packages/mantine/src/tableHandle/ExtendButton.tsx

@@ -0,0 +1,27 @@
+import { Button as MantineButton } from "@mantine/core";
+
+import { forwardRef } from "react";
+import { ComponentProps } from "@blocknote/react";
+import { assertEmpty } from "@blocknote/core";
+
+export const ExtendButton = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["TableHandle"]["ExtendButton"]
+>((props, ref) => {
+  const { children, className, onDragStart, onMouseDown, ...rest } = props;
+
+  // false, because rest props can be added by mantine when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  return (
+    <MantineButton
+      className={className}
+      ref={ref}
+      onDragStart={onDragStart}
+      onMouseDown={onMouseDown}
+      {...rest}>
+      {children}
+    </MantineButton>
+  );
+});