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,11 +82,7 @@ export const components: Components = {
   },
   TableHandle: {
     Root: TableHandle,
-    ExtendButton: (props) => (
-      <button style={{ height: "100%", width: "100%" }} {...props}>
-        +
-      </button>
-    ),
+    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,29 @@
+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, 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}
+      onMouseDown={onMouseDown}
+      {...rest}>
+      {children}
+    </AriakitButton>
+  );
+});

packages/core/src/api/blockManipulation/commands/insertBlocks/__snapshots__/insertBlocks.test.ts.snap

@@ -309,6 +309,11 @@ exports[`Test insertBlocks > Insert multiple blocks after 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -831,6 +836,11 @@ exports[`Test insertBlocks > Insert multiple blocks before 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -1313,6 +1323,11 @@ exports[`Test insertBlocks > Insert single basic block after 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -1795,6 +1810,11 @@ exports[`Test insertBlocks > Insert single basic block before 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -2334,6 +2354,11 @@ exports[`Test insertBlocks > Insert single complex block after 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -2873,6 +2898,11 @@ exports[`Test insertBlocks > Insert single complex block before 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [

packages/core/src/api/blockManipulation/commands/mergeBlocks/__snapshots__/mergeBlocks.test.ts.snap

@@ -241,6 +241,11 @@ exports[`Test mergeBlocks > Basic 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -695,6 +700,11 @@ exports[`Test mergeBlocks > Blocks have different types 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -1149,6 +1159,11 @@ exports[`Test mergeBlocks > First block has children 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -1602,6 +1617,11 @@ exports[`Test mergeBlocks > Second block has children 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -2073,6 +2093,11 @@ exports[`Test mergeBlocks > Second block is empty 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [

packages/core/src/api/blockManipulation/commands/moveBlock/__snapshots__/moveBlock.test.ts.snap

@@ -258,6 +258,11 @@ exports[`Test moveBlockDown > Basic 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -729,6 +734,11 @@ exports[`Test moveBlockDown > Into children 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -1200,6 +1210,11 @@ exports[`Test moveBlockDown > Last block 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -1671,6 +1686,11 @@ exports[`Test moveBlockDown > Out of children 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -2141,6 +2161,11 @@ exports[`Test moveBlockUp > Basic 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -2612,6 +2637,11 @@ exports[`Test moveBlockUp > First block 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -3083,6 +3113,11 @@ exports[`Test moveBlockUp > Into children 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -3554,6 +3589,11 @@ exports[`Test moveBlockUp > Out of children 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [

packages/core/src/api/blockManipulation/commands/removeBlocks/__snapshots__/removeBlocks.test.ts.snap

@@ -171,6 +171,11 @@ exports[`Test removeBlocks > Remove multiple consecutive blocks 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [
@@ -922,6 +927,11 @@ exports[`Test removeBlocks > Remove single block 1`] = `
   {
     "children": [],
     "content": {
+      "columnWidths": [
+        undefined,
+        undefined,
+        undefined,
+      ],
       "rows": [
         {
           "cells": [