@atlaskit/editor-plugin-table 1.2.0 → 1.2.2

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -55,7 +55,6 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
-import { getParentWidthWithoutPadding } from '../pm-plugins/table-resizing/utils/misc';
 
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
@@ -226,9 +225,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       }
 
       if (this.overflowShadowsObserver) {
-        this.overflowShadowsObserver.observeCells(
+        this.overflowShadowsObserver.observeShadowSentinels(
           this.state.stickyHeader?.sticky,
-          containsHeaderRow(getNode()),
         );
       }
     }
@@ -288,6 +286,17 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     this.setState({ [shadowKey]: value });
   };
 
+  private createShadowSentinels = (table: HTMLTableElement | null) => {
+    if (table) {
+      const shadowSentinelLeft = document.createElement('span');
+      shadowSentinelLeft.className = ClassName.TABLE_SHADOW_SENTINEL_LEFT;
+      const shadowSentinelRight = document.createElement('span');
+      shadowSentinelRight.className = ClassName.TABLE_SHADOW_SENTINEL_RIGHT;
+      table.prepend(shadowSentinelLeft);
+      table.prepend(shadowSentinelRight);
+    }
+  };
+
   onStickyState = (state: StickyPluginState) => {
     const { tableOverflowShadowsOptimization } =
       this.props.getEditorFeatureFlags();
@@ -441,6 +450,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               const tableElement = elem.querySelector('table');
               if (tableElement !== this.table) {
                 this.table = tableElement;
+                this.createShadowSentinels(this.table);
               }
             }
           }}
@@ -520,6 +530,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     if (!tableOverflowShadowsOptimization) {
       this.updateShadows();
     }
+
+    if (this.wrapper.scrollLeft === 0) {
+      this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: false });
+    } else {
+      this.setState({ [ShadowEvent.SHOW_BEFORE_SHADOW]: true });
+    }
   };
 
   private handleTableResizing = () => {
@@ -689,7 +705,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       options && options.isFullWidthModeEnabled,
     );
 
-    return getParentWidthWithoutPadding(parentNodeWith, pos, state);
+    return parentNodeWith;
   };
 
   private updateParentWidth = (width?: number) => {

package/src/plugins/table/nodeviews/__mocks__/OverflowShadowsObserver.ts

@@ -1,13 +1,13 @@
 import { OverridableMock } from './OverridableMock';
 
 export class OverflowShadowsObserver extends OverridableMock {
-  firstCell: HTMLElement | null = null;
-  lastCell: HTMLElement | null = null;
+  leftShadowSentinel: HTMLElement | null = null;
+  rightShadowSentinel: HTMLElement | null = null;
   constructor(...inputs: any[]) {
     super(...inputs);
   }
 
-  observeCells = this.getMock('observeCells');
+  observeShadowSentinels = this.getMock('observeShadowSentinels');
   updateStickyShadows = this.getMock('updateStickyShadows');
   dispose = this.getMock('dispose');
 }

package/src/plugins/table/nodeviews/table.tsx

@@ -225,6 +225,18 @@ export default class TableView extends ReactNodeView<Props> {
       return false;
     }
 
+    // ED-16668
+    // Do not remove this fixes an issue with windows firefox that relates to
+    // the addition of the shadow sentinels
+    if (
+      type === 'selection' &&
+      nodeName?.toUpperCase() === 'TABLE' &&
+      (firstChild?.nodeName.toUpperCase() === 'COLGROUP' ||
+        firstChild?.nodeName.toUpperCase() === 'SPAN')
+    ) {
+      return false;
+    }
+
     return true;
   }
 

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -170,7 +170,7 @@ export class TableRowNodeView implements NodeView {
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
 
-    this.eventDispatcher.on('widthPlugin', this.onWidthPluginState);
+    this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
 
     this.eventDispatcher.on(
       (tablePluginKey as any).key,
@@ -209,7 +209,7 @@ export class TableRowNodeView implements NodeView {
       this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
     }
 
-    this.eventDispatcher.off('widthPlugin', this.onWidthPluginState);
+    this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.off(
       (tablePluginKey as any).key,
       this.onTablePluginState,
@@ -235,6 +235,9 @@ export class TableRowNodeView implements NodeView {
     }
 
     this.resizeObserver.observe(this.dom);
+    if (this.editorScrollableElement) {
+      this.resizeObserver.observe(this.editorScrollableElement as HTMLElement);
+    }
 
     window.requestAnimationFrame(() => {
       // we expect tree to be defined after animation frame
@@ -268,22 +271,31 @@ export class TableRowNodeView implements NodeView {
       }
       const { table } = this.tree;
       entries.forEach((entry) => {
-        const newHeight = entry.contentRect
-          ? entry.contentRect.height
-          : (entry.target as HTMLElement).offsetHeight;
-
+        // On resize of the parent scroll element we need to adjust the width
+        // of the sticky header
         if (
-          this.sentinels.bottom &&
-          // When the table header is sticky, it would be taller by a 1px (border-bottom),
-          // So we adding this check to allow a 1px difference.
-          Math.abs(newHeight - (this.stickyRowHeight || 0)) >
-            stickyHeaderBorderBottomWidth
+          entry.target.className ===
+          (this.editorScrollableElement as HTMLElement)?.className
         ) {
-          this.stickyRowHeight = newHeight;
-          this.sentinels.bottom.style.bottom = `${
-            tableScrollbarOffset + stickyRowOffsetTop + newHeight
-          }px`;
-          updateTableMargin(table);
+          this.updateStickyHeaderWidth();
+        } else {
+          const newHeight = entry.contentRect
+            ? entry.contentRect.height
+            : (entry.target as HTMLElement).offsetHeight;
+
+          if (
+            this.sentinels.bottom &&
+            // When the table header is sticky, it would be taller by a 1px (border-bottom),
+            // So we adding this check to allow a 1px difference.
+            Math.abs(newHeight - (this.stickyRowHeight || 0)) >
+              stickyHeaderBorderBottomWidth
+          ) {
+            this.stickyRowHeight = newHeight;
+            this.sentinels.bottom.style.bottom = `${
+              tableScrollbarOffset + stickyRowOffsetTop + newHeight
+            }px`;
+            updateTableMargin(table);
+          }
         }
       });
     });
@@ -309,7 +321,8 @@ export class TableRowNodeView implements NodeView {
               (entry.rootBounds?.bottom || 0) < entry.boundingClientRect.bottom;
 
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
-              this.tree && this.makeHeaderRowSticky(this.tree);
+              this.tree &&
+                this.makeHeaderRowSticky(this.tree, entry.rootBounds?.top);
             } else {
               table && this.makeRowHeaderNotSticky(table);
             }
@@ -325,7 +338,8 @@ export class TableRowNodeView implements NodeView {
             if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
               this.makeRowHeaderNotSticky(table);
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-              this.tree && this.makeHeaderRowSticky(this.tree);
+              this.tree &&
+                this.makeHeaderRowSticky(this.tree, entry?.rootBounds?.top);
             }
           }
         });
@@ -549,7 +563,7 @@ export class TableRowNodeView implements NodeView {
     }, 0);
   };
 
-  onWidthPluginState = () => {
+  updateStickyHeaderWidth = () => {
     // table width might have changed, sync that back to sticky row
     const tree = this.tree;
     if (!tree) {
@@ -591,7 +605,7 @@ export class TableRowNodeView implements NodeView {
     return false;
   };
 
-  makeHeaderRowSticky = (tree: TableDOMElements) => {
+  makeHeaderRowSticky = (tree: TableDOMElements, scrollTop?: number) => {
     // If header row height is more than 50% of viewport height don't do this
     if (this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
       return;
@@ -607,10 +621,13 @@ export class TableRowNodeView implements NodeView {
     }
 
     const currentTableTop = this.getCurrentTableTop(tree);
+
+    if (!scrollTop) {
+      scrollTop = getTop(this.editorScrollableElement);
+    }
+
     const domTop =
-      currentTableTop > 0
-        ? this.topPosEditorElement
-        : this.topPosEditorElement + currentTableTop;
+      currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
 
     if (!this.isSticky) {
       syncStickyRowToTable(table);

package/src/plugins/table/pm-plugins/table-resizing/event-handlers.ts

@@ -31,7 +31,6 @@ import type {
   GetEditorContainerWidth,
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { getParentWidthWithoutPadding } from './utils/misc';
 
 export const handleMouseDown = (
   view: EditorView,
@@ -68,15 +67,8 @@ export const handleMouseDown = (
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(start, state, containerWidth);
 
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  const parentActualWidth = getParentWidthWithoutPadding(
-    parentWidth,
-    start,
-    state,
-  );
-
   let maxSize =
-    parentActualWidth ||
+    parentWidth ||
     getLayoutSize(
       dom.getAttribute('data-layout') as TableLayout,
       containerWidth.width,

package/src/plugins/table/pm-plugins/table-resizing/utils/misc.ts

@@ -21,8 +21,6 @@ import { Node as PMNode } from 'prosemirror-model';
 import { EditorState } from 'prosemirror-state';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
-import { gridSize } from '@atlaskit/theme/constants';
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
 
 export const tableLayoutToSize: Record<string, number> = {
   default: akEditorDefaultLayoutWidth,
@@ -124,15 +122,7 @@ export const getTableMaxWidth = ({
   const containerWidth = getEditorContainerWidth();
   const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
 
-  // TODO - refactor this logic into getParentNodeWidth() in editor-common [ED-16718]
-  const parentActualWidth = getParentWidthWithoutPadding(
-    parentWidth,
-    tableStart,
-    state,
-  );
-
-  let maxWidth =
-    parentActualWidth || getLayoutSize(layout, containerWidth.width, {});
+  let maxWidth = parentWidth || getLayoutSize(layout, containerWidth.width, {});
 
   if (table.attrs.isNumberColumnEnabled) {
     maxWidth -= akEditorTableNumberColumnWidth;
@@ -140,49 +130,3 @@ export const getTableMaxWidth = ({
 
   return maxWidth;
 };
-
-export const getParentWidthWithoutPadding = (
-  parentWidth: number,
-  tableStartPos: number,
-  state: EditorState,
-) => {
-  const node = getNestedParentNode(tableStartPos, state);
-  if (!node) {
-    return;
-  }
-
-  const { schema } = state;
-
-  if (node.type === schema.nodes.expand) {
-    // padding
-    parentWidth -= gridSize() * 2;
-    // gutter offset
-    parentWidth += gridSize() * 1.5 * 2;
-    // padding right
-    parentWidth -= gridSize();
-    // padding left
-    parentWidth -= gridSize() * 4 - gridSize() / 2;
-  }
-
-  return parentWidth;
-};
-
-// copy of getNestedParentNode() from packages/editor/editor-common/src/node-width/index.ts
-// to be removed later when we will move getParentWidthWithoutPadding() logic to editor-common
-const getNestedParentNode = (
-  tablePos: number,
-  state: EditorState,
-): PMNode | null => {
-  if (tablePos === undefined) {
-    return null;
-  }
-
-  const $pos = state.doc.resolve(tablePos);
-  const parent = findParentNodeOfTypeClosestToPos($pos, [
-    state.schema.nodes.bodiedExtension,
-    state.schema.nodes.layoutSection,
-    state.schema.nodes.expand,
-  ]);
-
-  return parent ? parent.node : null;
-};

package/src/plugins/table/transforms/delete-rows.ts

@@ -5,7 +5,7 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 
 import { CellAttributes } from '@atlaskit/adf-schema';
 
-import { removeEmptyColumns } from './merge';
+import { mergeEmptyColumns } from './merge';
 import { setMeta } from './metadata';
 
 export const deleteRows =
@@ -125,7 +125,7 @@ export const deleteRows =
       rows,
       table.node.marks,
     );
-    const fixedTable = removeEmptyColumns(newTable);
+    const fixedTable = mergeEmptyColumns(newTable);
     if (fixedTable === null) {
       return setMeta({ type: 'DELETE_ROWS', problem: 'REMOVE_EMPTY_COLUMNS' })(
         tr,

package/src/plugins/table/transforms/index.ts

@@ -1,5 +1,5 @@
-export { mergeCells, canMergeCells, removeEmptyColumns } from './merge';
 export { fireAnalytics, fixTables, fixAutoSizedTable } from './fix-tables';
+export { mergeCells, canMergeCells, mergeEmptyColumns } from './merge';
 export { deleteColumns } from './delete-columns';
 export { deleteRows } from './delete-rows';
 export { updateColumnWidths } from './column-width';

package/src/plugins/table/transforms/merge.ts

@@ -131,7 +131,8 @@ export function mergeCells(tr: Transaction): Transaction {
     rows,
     table.node.marks,
   );
-  const fixedTable = removeEmptyColumns(newTable);
+
+  const fixedTable = mergeEmptyColumns(newTable);
   if (fixedTable === null) {
     return setMeta({ type: 'MERGE_CELLS', problem: 'REMOVE_EMPTY_COLUMNS' })(
       tr,
@@ -227,77 +228,74 @@ function cellsOverlapRectangle({ width, height, map }: TableMap, rect: Rect) {
 }
 
 // returns an array of numbers, each number indicates the minimum colSpan in each column
-function getMinColSpans(table: PMNode): number[] {
+function getEmptyColumnIndexes(table: PMNode): Set<number> {
   const map = TableMap.get(table);
-  const minColspans: number[] = [];
-  for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
-    const cellsPositions = map.cellsInRect({
+  const emptyColumnIndexes = new Set<number>();
+
+  // Loop throuh each column
+  for (let colIndex = 0; colIndex < map.width; colIndex++) {
+    // Get the cells in each row for this column
+    const cellPositions = map.cellsInRect({
       left: colIndex,
       right: colIndex + 1,
       top: 0,
       bottom: map.height,
     });
-    if (cellsPositions.length) {
-      const colspans = cellsPositions.map((cellPos) => {
-        const cell = table.nodeAt(cellPos);
-        if (cell) {
-          return cell.attrs.colspan;
-        }
-      });
-      const minColspan = Math.min(...colspans);
-      // only care about the case when the next column is invisible
-      if (!minColspans[colIndex + 1]) {
-        minColspans[colIndex] = minColspan;
-      } else {
-        minColspans[colIndex] = 1;
-      }
+
+    // If no cells exist in that column it is empty
+    if (!cellPositions.length) {
+      emptyColumnIndexes.add(colIndex);
     }
   }
 
-  return minColspans;
+  return emptyColumnIndexes;
 }
 
-export function removeEmptyColumns(table: PMNode): PMNode | null {
+export function mergeEmptyColumns(table: PMNode): PMNode | null {
+  const rows: PMNode[] = [];
   const map = TableMap.get(table);
-  const minColSpans = getMinColSpans(table);
-  if (!minColSpans.some((colspan) => colspan > 1)) {
+  const emptyColumnIndexes = getEmptyColumnIndexes(table);
+
+  // We don't need to remove any so return early.
+  if (emptyColumnIndexes.size === 0) {
     return table;
   }
-  const rows: PMNode[] = [];
+
   for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
     const cellsByCols: Record<string, PMNode> = {};
-    const cols = Object.keys(minColSpans).map(Number);
-    for (let idx in cols) {
-      const colIndex = cols[idx];
+
+    // Work backwards so that calculating colwidths is easier with Array.slice
+    for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
       const cellPos = map.map[colIndex + rowIndex * map.width];
       const rect = map.findCell(cellPos);
-      const cell = cellsByCols[rect.left] || table.nodeAt(cellPos);
-      if (cell && rect.top === rowIndex) {
-        if (minColSpans[colIndex] > 1) {
-          const colspan = cell.attrs.colspan - minColSpans[colIndex] + 1;
-          if (colspan < 1) {
-            return null;
-          }
-          const { colwidth } = cell.attrs;
-          const newCell = cell.type.createChecked(
+      let cell = cellsByCols[rect.left] || table.nodeAt(cellPos);
+
+      if (rect.top !== rowIndex) {
+        continue;
+      }
+
+      // If this column is empty, we want to decrement the colspan of its corresponding
+      // cell as this column is being "merged"
+      if (emptyColumnIndexes.has(colIndex)) {
+        const { colspan, colwidth } = cell.attrs;
+
+        if (colspan > 1) {
+          cell = cell.type.createChecked(
             {
               ...cell.attrs,
-              colspan,
+              colspan: colspan - 1,
               colwidth: colwidth ? colwidth.slice(0, colspan) : null,
             },
             cell.content,
             cell.marks,
           );
-          cellsByCols[rect.left] = newCell;
-        } else {
-          cellsByCols[rect.left] = cell;
         }
       }
+
+      cellsByCols[rect.left] = cell;
     }
 
-    const rowCells: PMNode[] = Object.keys(cellsByCols).map(
-      (col) => cellsByCols[col],
-    );
+    const rowCells = Object.values(cellsByCols);
     const row = table.child(rowIndex);
     if (row) {
       rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -18,6 +18,7 @@ import {
 } from '@atlaskit/editor-common/keymaps';
 import {
   ColorPalette,
+  backgroundPaletteTooltipMessages,
   cellBackgroundColorPalette,
 } from '@atlaskit/editor-common/ui-color';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -32,7 +33,10 @@ import { cellColourPreviewStyles } from './styles';
 import { closestElement } from '@atlaskit/editor-common/utils';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 type DropdownItem = MenuItem & {
@@ -131,6 +135,7 @@ export interface Props {
   offset?: Array<number>;
   editorAnalyticsAPI?: EditorAnalyticsAPI;
   getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
 }
 
 export interface State {
@@ -209,9 +214,11 @@ export class ContextualMenu extends Component<
       selectionRect,
       intl: { formatMessage },
       editorView,
+      getEditorFeatureFlags,
     } = this.props;
     const items: any[] = [];
     const { isSubmenuOpen } = this.state;
+    const { useSomewhatSemanticTextColorNames } = getEditorFeatureFlags();
     // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
     const {
       targetCellPosition,
@@ -239,9 +246,21 @@ export class ContextualMenu extends Component<
               >
                 <ColorPalette
                   cols={7}
-                  palette={cellBackgroundColorPalette}
                   onClick={this.setColor}
                   selectedColor={background}
+                  paletteOptions={{
+                    palette: cellBackgroundColorPalette,
+                    paletteColorTooltipMessages:
+                      backgroundPaletteTooltipMessages,
+                    // We did not want to create new FF or update
+                    //  useSomewhatSemanticTextColorNames name
+                    //  because it is temporary and require extra work.
+                    // So even though it says text color names,
+                    //  we are going to use for all color pickers
+                    //  such as text, background and table charts.
+                    showSomewhatSemanticTooltips:
+                      useSomewhatSemanticTextColorNames,
+                  }}
                 />
               </div>
             )}

package/src/plugins/table/ui/FloatingContextualMenu/index.tsx

@@ -23,7 +23,10 @@ import {
 import { tablePopupStyles } from './styles';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import type {
+  GetEditorContainerWidth,
+  GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
 import ContextualMenu from './ContextualMenu';
 
 // offset of the contextual menu dropdown
@@ -46,6 +49,7 @@ export interface Props {
   editorView: EditorView;
   isOpen: boolean;
   getEditorContainerWidth: GetEditorContainerWidth;
+  getEditorFeatureFlags: GetEditorFeatureFlags;
   targetCellPosition?: number;
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
@@ -63,6 +67,7 @@ const FloatingContextualMenu = ({
   pluginConfig,
   editorAnalyticsAPI,
   getEditorContainerWidth,
+  getEditorFeatureFlags,
 }: Props) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const { targetCellPosition } = getPluginState(editorView.state);
@@ -103,6 +108,7 @@ const FloatingContextualMenu = ({
       zIndex={akEditorFloatingOverlapPanelZIndex}
       forcePlacement={true}
       offset={[-7, 0]}
+      stick={true}
     >
       <div css={tablePopupStyles}>
         <ContextualMenu
@@ -120,6 +126,7 @@ const FloatingContextualMenu = ({
           boundariesElement={boundariesElement}
           editorAnalyticsAPI={editorAnalyticsAPI}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />
       </div>
     </Popup>

package/src/plugins/table/ui/common-styles.ts

@@ -113,6 +113,22 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
   }
 }`;
 
+const shadowSentinelStyles = `
+  .${ClassName.TABLE_SHADOW_SENTINEL_LEFT},
+  .${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    width: 1px;
+    visibility: hidden;
+  }
+  .${ClassName.TABLE_SHADOW_SENTINEL_LEFT} {
+    left: 0;
+  }
+  .${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
+    right: 0;
+  }
+`;
 // previous styles to add spacing to numbered lists with
 // large item markers (e.g. 101, 102, ...) when nested inside tables
 const listLargeNumericMarkersOldStyles = `
@@ -624,6 +640,8 @@ export const tableStyles = (
       border-top: none;
       // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212
       margin-right: -1px;
+      // Allows better positioning for the shadow sentinels - ED-16668
+      position: relative;
 
       > tbody > tr {
         white-space: pre-wrap;
@@ -717,6 +735,7 @@ export const tableStyles = (
       padding-bottom: 0px;
       /* fixes gap cursor height */
       overflow: auto;
+      overflow-y: hidden;
       position: relative;
     }
   }
@@ -740,6 +759,8 @@ export const tableStyles = (
   ${props?.featureFlags?.restartNumberedLists
     ? ``
     : listLargeNumericMarkersOldStyles}
+
+  ${shadowSentinelStyles}
 `;
 
 export const tableFullPageEditorStyles = css`

package/src/plugins/table/utils/row-controls.ts

@@ -22,8 +22,9 @@ export interface RowParams {
 
 export const getRowHeights = (tableRef: HTMLTableElement): number[] => {
   const heights: number[] = [];
-  if (tableRef.lastChild) {
-    const rows = tableRef.lastChild.childNodes;
+  const tableBody = tableRef.querySelector('tbody');
+  if (tableBody) {
+    const rows = tableBody.childNodes;
     for (let i = 0, count = rows.length; i < count; i++) {
       const row = rows[i] as HTMLTableRowElement;
       heights[i] = row.getBoundingClientRect().height + 1;

package/src/types/i18n.ts

@@ -0,0 +1,5 @@
+export interface MessageDescriptor {
+  id: string;
+  description: string;
+  defaultMessage: string;
+}