fix(table): keep floating toolbar row/column controls for single-cell selections (udecode#5058)

Co-authored-by: Matt Jansen <matt@rolekit.com>

Author: mattpanther

apps/www/src/registry/changelog/2026-07-09-table-toolbar-single-cell-selection.json

@@ -0,0 +1,47 @@
+{
+  "schemaVersion": 1,
+  "id": "2026-07-09-table-toolbar-single-cell-selection",
+  "status": "draft",
+  "source": {
+    "kind": "entry-mdx",
+    "path": "apps/www/src/registry/changelog/entries/2026-07-09-table-toolbar-single-cell-selection.mdx"
+  },
+  "change": {
+    "type": "source",
+    "date": "2026-07-09",
+    "commits": []
+  },
+  "release": {
+    "status": "unresolved"
+  },
+  "kind": "fix",
+  "summary": "Keep table floating toolbar row/column controls while a single cell's content is selected",
+  "targets": [
+    {
+      "name": "table-node",
+      "files": ["apps/www/src/registry/ui/table-node.tsx"],
+      "definitionFiles": ["apps/www/src/registry/registry-ui.ts"],
+      "diagnostics": []
+    }
+  ],
+  "entries": [
+    {
+      "id": "2026-07-09-table-keep-floating-toolbar-row-b77da8d6",
+      "kind": "fix",
+      "summary": "The floating toolbar now keeps its insert/delete row and column controls visible while the selection stays inside a single cell, including when the cell's content is fully selected. Previously any expanded selection switched the toolbar to its multi-cell mode, hiding those controls the moment a cell's text was highlighted.",
+      "details": [],
+      "migrationNotes": [],
+      "targets": ["table-node"],
+      "source": {
+        "line": 12,
+        "row": 1,
+        "legacyRelease": {
+          "date": "2026-07-09",
+          "entry": "2026-07-09-table-toolbar-single-cell-selection",
+          "section": null
+        }
+      }
+    }
+  ],
+  "diagnostics": []
+}

apps/www/src/registry/changelog/components.json

@@ -1,6 +1,13 @@
 {
   "schemaVersion": 1,
   "components": {
+    "table-node": [
+      "2026-07-09-table-toolbar-single-cell-selection",
+      "2026-03-22-table-improve-selection-bug-fixed-insert-issue",
+      "2026-01-20-add-docx-file-import-word-export-support",
+      "2025-11-20-biome-ultracite",
+      "2025-10-17-fix-react-decouple"
+    ],
     "ai-api": [
       "2026-06-28-ai-sdk-v7",
       "2026-01-09-support-using-ai-features-tables-improve-prompts",
@@ -184,12 +191,6 @@
       "2026-03-27-snapshot-ai-streaming-preview-task-pr-flow",
       "2025-11-20-biome-ultracite"
     ],
-    "table-node": [
-      "2026-03-22-table-improve-selection-bug-fixed-insert-issue",
-      "2026-01-20-add-docx-file-import-word-export-support",
-      "2025-11-20-biome-ultracite",
-      "2025-10-17-fix-react-decouple"
-    ],
     "font-color-toolbar-button": [
       "2026-03-22-table-improve-selection-bug-fixed-insert-issue",
       "2026-03-19-improve-non-react-test-coverage-ci-workflow-hygiene",

apps/www/src/registry/changelog/entries/2026-07-09-table-toolbar-single-cell-selection.mdx

@@ -0,0 +1,12 @@
+---
+id: 2026-07-09-table-toolbar-single-cell-selection
+date: 2026-07-09
+status: draft
+kind: fix
+summary: "Keep table floating toolbar row/column controls while a single cell's content is selected"
+change: {"type":"source","date":"2026-07-09","commits":[]}
+release: {"status":"unresolved"}
+diagnostics: []
+---
+<!-- entry: {"id":"2026-07-09-table-keep-floating-toolbar-row-b77da8d6","kind":"fix","migrationNotes":[]} -->
+- **`table-node`**: The floating toolbar now keeps its insert/delete row and column controls visible while the selection stays inside a single cell, including when the cell's content is fully selected. Previously any expanded selection switched the toolbar to its multi-cell mode, hiding those controls the moment a cell's text was highlighted.

apps/www/src/registry/changelog/index.json

@@ -1,6 +1,24 @@
 {
   "schemaVersion": 1,
   "events": [
+    {
+      "id": "2026-07-09-table-toolbar-single-cell-selection",
+      "href": "/registry/changelog/2026-07-09-table-toolbar-single-cell-selection.json",
+      "status": "draft",
+      "kind": "fix",
+      "summary": "Keep table floating toolbar row/column controls while a single cell's content is selected",
+      "change": {
+        "type": "source",
+        "date": "2026-07-09",
+        "commits": []
+      },
+      "release": {
+        "status": "unresolved"
+      },
+      "targets": ["table-node"],
+      "entries": 1,
+      "diagnostics": []
+    },
     {
       "id": "2026-06-28-ai-sdk-v7",
       "href": "/registry/changelog/2026-06-28-ai-sdk-v7.json",

apps/www/src/registry/ui/table-node.tsx

@@ -767,16 +767,18 @@ function TableFloatingToolbar({
     []
   );
   const selected = useSelected();
-  const collapsedInside = useEditorSelector(
-    (editor) => selected && editor.api.isCollapsed(),
-    [selected]
-  );
   const isFocusedLast = useFocusedLast();
   const [isExpandedSelectionToolbarReady, setIsExpandedSelectionToolbarReady] =
     React.useState(false);
-  const isCollapsedToolbarOpen = isFocusedLast && collapsedInside;
-  const isExpandedSelectionPending =
-    isFocusedLast && !collapsedInside && selectedCellCount > 1;
+  // `getSelectedCellIds` only reports cells once a range spans more than one
+  // cell, so a count of zero means the selection (a caret or an expanded
+  // range) is confined to a single cell. Gating on it instead of
+  // `editor.api.isCollapsed()` keeps the row/column controls available while a
+  // cell's content is fully selected (e.g. select-all inside a cell), not just
+  // while the caret is collapsed in it.
+  const isSingleCellToolbarOpen =
+    isFocusedLast && selected && selectedCellCount === 0;
+  const isExpandedSelectionPending = isFocusedLast && selectedCellCount > 1;
 
   React.useEffect(() => {
     if (!isExpandedSelectionPending) {
@@ -798,13 +800,13 @@ function TableFloatingToolbar({
   const shouldRenderExpandedSelectionToolbar =
     isExpandedSelectionToolbarReady && isExpandedSelectionPending;
   const isToolbarOpen =
-    isCollapsedToolbarOpen || shouldRenderExpandedSelectionToolbar;
+    isSingleCellToolbarOpen || shouldRenderExpandedSelectionToolbar;
 
   return (
     <Popover open={isToolbarOpen} modal={false}>
       <PopoverAnchor asChild>{children}</PopoverAnchor>
-      {isCollapsedToolbarOpen && (
-        <CollapsedTableFloatingToolbarContent {...props} />
+      {isSingleCellToolbarOpen && (
+        <SingleCellTableFloatingToolbarContent {...props} />
       )}
       {shouldRenderExpandedSelectionToolbar && (
         <ExpandedSelectionTableFloatingToolbarContent {...props} />
@@ -832,7 +834,7 @@ function ExpandedSelectionTableFloatingToolbarContent(
   );
 }
 
-function CollapsedTableFloatingToolbarContent(
+function SingleCellTableFloatingToolbarContent(
   props: React.ComponentProps<typeof PopoverContent>
 ) {
   const { tf } = useEditorPlugin(TablePlugin);
@@ -844,7 +846,7 @@ function CollapsedTableFloatingToolbarContent(
     <TableFloatingToolbarContent
       buttonProps={buttonProps}
       canSplit={canSplit}
-      collapsedInside
+      singleCellMode
       onDeleteColumn={() => {
         tf.remove.tableColumn();
       }}
@@ -873,7 +875,7 @@ function TableFloatingToolbarContent({
   buttonProps,
   canMerge = false,
   canSplit = false,
-  collapsedInside = false,
+  singleCellMode = false,
   onDeleteColumn,
   onDeleteRow,
   onInsertColumnAfter,
@@ -887,7 +889,7 @@ function TableFloatingToolbarContent({
   buttonProps?: React.ComponentProps<typeof ToolbarButton>;
   canMerge?: boolean;
   canSplit?: boolean;
-  collapsedInside?: boolean;
+  singleCellMode?: boolean;
   onDeleteColumn?: () => void;
   onDeleteRow?: () => void;
   onInsertColumnAfter?: () => void;
@@ -943,7 +945,7 @@ function TableFloatingToolbarContent({
             </DropdownMenuPortal>
           </DropdownMenu>
 
-          {collapsedInside && (
+          {singleCellMode && (
             <ToolbarGroup>
               <ToolbarButton tooltip="Delete table" {...buttonProps}>
                 <Trash2Icon />
@@ -952,7 +954,7 @@ function TableFloatingToolbarContent({
           )}
         </ToolbarGroup>
 
-        {collapsedInside && (
+        {singleCellMode && (
           <ToolbarGroup>
             <ToolbarButton
               onClick={onInsertRowBefore}
@@ -978,7 +980,7 @@ function TableFloatingToolbarContent({
           </ToolbarGroup>
         )}
 
-        {collapsedInside && (
+        {singleCellMode && (
           <ToolbarGroup>
             <ToolbarButton
               onClick={onInsertColumnBefore}