✨ feat(table): enhance table controller visibility with focus and hover states

Author: ilimei

src/plugins/table/react/TableColController.tsx

@@ -58,7 +58,10 @@ const TableColController = memo<TableColControllerProps>(({ editor, node }) => {
     [editor, node],
   );
   const [colWidths, setColWidths] = useState(initialColWidths);
-  const { isTableSelected, selectedColumns } = useTableControllerSelection(editor, node);
+  const { isTableFocused, isTableSelected, selectedColumns } = useTableControllerSelection(
+    editor,
+    node,
+  );
   const anchorColumnIndexRef = useRef<number | null>(null);
   const colTopRef = useRef<HTMLDivElement | null>(null);
   const deletePreviewElementsRef = useRef<HTMLElement[]>([]);
@@ -73,6 +76,7 @@ const TableColController = memo<TableColControllerProps>(({ editor, node }) => {
     index: number;
     insertAfter: boolean;
   } | null>(null);
+  const [isControllerHovered, setControllerHovered] = useState(false);
   const [isInsertButtonHovered, setInsertButtonHovered] = useState(false);
   const insertColumnOffset = insertTarget
     ? sum(colWidths.slice(0, insertTarget.index)) +
@@ -201,12 +205,31 @@ const TableColController = memo<TableColControllerProps>(({ editor, node }) => {
     };
   }, [clearDeletePreview]);
 
+  const shouldShowController = isTableFocused || isControllerHovered;
+
+  useEffect(() => {
+    if (!shouldShowController) {
+      clearInsertButtonHideTimer();
+      clearDeletePreview();
+      setInsertTarget(null);
+      setInsertButtonHovered(false);
+    }
+  }, [clearDeletePreview, shouldShowController]);
+
+  if (!shouldShowController) {
+    return null;
+  }
+
   return (
     <LexicalPortalContainer editor={editor} node={node}>
       <div className="table-controller-col" contentEditable={false}>
         <div
           className={cx('top', styles.colTop)}
+          onMouseEnter={() => {
+            setControllerHovered(true);
+          }}
           onMouseLeave={() => {
+            setControllerHovered(false);
             scheduleHideInsertButton();
           }}
           ref={colTopRef}

src/plugins/table/react/TableRowController.tsx

@@ -64,7 +64,10 @@ const TableRowController = memo<TableRowControllerProps>(({ editor, node }) => {
     [editor, node],
   );
   const [rowHeights, setRowHeights] = useState(initialRowHeights);
-  const { isTableSelected, selectedRows } = useTableControllerSelection(editor, node);
+  const { isTableFocused, isTableSelected, selectedRows } = useTableControllerSelection(
+    editor,
+    node,
+  );
   const anchorRowIndexRef = useRef<number | null>(null);
   const deletePreviewElementsRef = useRef<HTMLElement[]>([]);
   const insertButtonHoveredRef = useRef(false);
@@ -79,6 +82,7 @@ const TableRowController = memo<TableRowControllerProps>(({ editor, node }) => {
     index: number;
     insertAfter: boolean;
   } | null>(null);
+  const [isControllerHovered, setControllerHovered] = useState(false);
   const [isInsertButtonHovered, setInsertButtonHovered] = useState(false);
   const insertRowOffset = insertTarget
     ? sum(rowHeights.slice(0, insertTarget.index)) +
@@ -213,15 +217,34 @@ const TableRowController = memo<TableRowControllerProps>(({ editor, node }) => {
     };
   }, [editor, node]);
 
+  const shouldShowController = isTableFocused || isControllerHovered;
+
+  useEffect(() => {
+    if (!shouldShowController) {
+      clearInsertButtonHideTimer();
+      clearDeletePreview();
+      setInsertTarget(null);
+      setInsertButtonHovered(false);
+    }
+  }, [clearDeletePreview, shouldShowController]);
+
+  if (!shouldShowController) {
+    return null;
+  }
+
   return (
-    <div className="table-controller-row" contentEditable={false}>
-      <div
-        className={cx('left', styles.rowLeft)}
-        onMouseLeave={() => {
-          scheduleHideInsertButton();
-        }}
-        ref={rowLeftRef}
-      >
+    <div
+      className="table-controller-row"
+      contentEditable={false}
+      onMouseEnter={() => {
+        setControllerHovered(true);
+      }}
+      onMouseLeave={() => {
+        setControllerHovered(false);
+        scheduleHideInsertButton();
+      }}
+    >
+      <div className={cx('left', styles.rowLeft)} ref={rowLeftRef}>
         <TableDeleteButton
           ariaLabel="Delete selected rows"
           offset={selectedRowTop + selectedRowHeight / 2}

src/plugins/table/react/hooks.ts

@@ -5,14 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { TableNode } from '@lexical/table';
+import { $findTableNode, $isTableSelection, TableNode } from '@lexical/table';
 import { debounce } from 'es-toolkit/compat';
-import { $getSelection, LexicalEditor } from 'lexical';
+import { $getSelection, $isRangeSelection, LexicalEditor } from 'lexical';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { getTableSelectionIndexes, isTableFullySelected } from '../utils';
 
 export interface TableControllerSelection {
+  isTableFocused: boolean;
   isTableSelected: boolean;
   selectedColumns: number[];
   selectedRows: number[];
@@ -23,6 +24,7 @@ const isSameSelection = (
   next: TableControllerSelection,
 ): boolean => {
   return (
+    current.isTableFocused === next.isTableFocused &&
     current.isTableSelected === next.isTableSelected &&
     current.selectedColumns.length === next.selectedColumns.length &&
     current.selectedRows.length === next.selectedRows.length &&
@@ -43,8 +45,13 @@ const readTableControllerSelection = (
     const tableKey = latestNode.getKey();
 
     const selectionIndexes = getTableSelectionIndexes(selection, tableKey, columnCount, rowCount);
+    const isTableFocused =
+      ($isTableSelection(selection) && selection.tableKey === tableKey) ||
+      ($isRangeSelection(selection) &&
+        Boolean($findTableNode(selection.anchor.getNode())?.is(latestNode)));
 
     return {
+      isTableFocused,
       isTableSelected: isTableFullySelected(selection, tableKey, columnCount, rowCount),
       ...selectionIndexes,
     };