Move table row/column insertion controls to a floating menu (#8409)

packages/volto-slate/news/8409.feature

@@ -0,0 +1 @@
+Move table row and column insertion and deletion controls to a floating menu above the currently selected row. @r4-rahul123

packages/volto-slate/src/blocks/Table/TableBlockEdit.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import isEmpty from 'lodash/isEmpty';
 import map from 'lodash/map';
@@ -182,13 +182,35 @@ const Edit = (props) => {
     row: 0,
     cell: 0,
   });
+  const tableRef = useRef(null);
+  const [toolbarTop, setToolbarTop] = useState(0);
+
   // If selected prop is unset, update the state
   useEffect(() => {
     if (!selected) {
       setSelectedCell(null);
     }
   }, [selected]);
 
+  useEffect(() => {
+    if (!selected || !selectedCell || !tableRef.current) {
+      setToolbarTop(0);
+      return;
+    }
+    let rowEl;
+    if (!data.table?.hideHeaders && selectedCell.row === 0) {
+      rowEl = tableRef.current.querySelector('thead tr');
+    } else {
+      const bodyRows = tableRef.current.querySelectorAll('tbody tr');
+      const rowIndex = selectedCell.row > 0 ? selectedCell.row - 1 : 0;
+      rowEl = bodyRows[rowIndex];
+    }
+    if (rowEl) {
+      setToolbarTop(rowEl.offsetTop);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, selectedCell?.row, data.table?.hideHeaders]);
+
   useEffect(() => {
     if (!data.table || isEmpty(data.table)) {
       onChangeBlock(block, {
@@ -348,9 +370,14 @@ const Edit = (props) => {
   }, [data, block, onChangeBlock, selectedCell]);
 
   return (
-    <div className={cx('block table', { selected })}>
+    <div ref={tableRef} className={cx('block table', { selected })}>
       {selected && (
-        <div className="toolbar">
+        <div
+          className="toolbar"
+          style={{
+            top: `${toolbarTop}px`,
+          }}
+        >
           <Button.Group>
             <Button
               icon

packages/volto/news/8409.feature

@@ -0,0 +1 @@
+Move table row and column insertion and deletion controls to a floating menu above the currently selected row. @r4-rahul123

packages/volto/theme/themes/pastanaga/extras/blocks.less

@@ -292,8 +292,16 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
   line-height: @headerLineHeight;
 }
 
-.ui.block.table {
+.ui.block.table,
+.block.table {
+  --toolbar-gap: 2px;
   border: 0;
+
+  .toolbar {
+    top: 0;
+    transform: translate(-50%, calc(-100% - var(--toolbar-gap)));
+    transition: top 0.15s ease-in-out;
+  }
 }
 
 .block {