@atlaskit/editor-plugin-table 1.2.0 → 1.2.1

package/dist/types/types/i18n.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -19,11 +19,11 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^25.3.0",
-    "@atlaskit/editor-common": "^72.5.0",
+    "@atlaskit/editor-common": "^72.6.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.3.0",
     "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/tooltip": "^17.7.0",
     "@babel/runtime": "^7.0.0",
@@ -50,14 +50,14 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-next": "^9.0.0",
-    "@atlaskit/button": "^16.5.0",
-    "@atlaskit/editor-core": "^180.1.0",
-    "@atlaskit/editor-test-helpers": "^18.0.0",
+    "@atlaskit/button": "^16.6.0",
+    "@atlaskit/editor-core": "^181.0.0",
+    "@atlaskit/editor-test-helpers": "^18.1.0",
     "@atlaskit/link-provider": "^1.5.0",
     "@atlaskit/logo": "^13.11.0",
     "@atlaskit/media-integration-test-helpers": "^2.6.0",
     "@atlaskit/synchrony-test-helpers": "^2.3.0",
-    "@atlaskit/util-data-test": "^17.6.0",
+    "@atlaskit/util-data-test": "^17.7.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/src/__tests__/integration/horizontal-scroll.ts

@@ -55,10 +55,9 @@ const assertTableDoesScroll = async (page: WebdriverPage) => {
   expect(tableScrollWidth).toBeGreaterThan(tableOffsetWidth);
 };
 
-// insertColumn helper doesn't work in Safari
 BrowserTestCase(
   'Table: Does not scroll when column is resized and a new column is inserted',
-  { skip: ['safari'] },
+  { skip: [] },
   async (client: any, testName: string) => {
     for (const screenWidth of screenWidths) {
       const page = await goToEditorTestingWDExample(
@@ -84,7 +83,6 @@ BrowserTestCase(
   },
 );
 
-// insertColumn helper doesn't work in Safari
 BrowserTestCase(
   'Table: Does not scroll when column is resized and breakout button is clicked 3x',
   { skip: ['safari'] },
@@ -281,10 +279,9 @@ BrowserTestCase(
   },
 );
 
-// insertColumn helper doesn't work in Safari
 BrowserTestCase(
   'Table: Scrolls when there are more columns added than can fit the current width',
-  { skip: ['safari'] },
+  { skip: [] },
   async (client: any, testName: string) => {
     for (const screenWidth of screenWidths) {
       const page = await goToEditorTestingWDExample(
@@ -315,10 +312,9 @@ BrowserTestCase(
   },
 );
 
-// insertColumn helper doesn't work in Safari
 BrowserTestCase(
   'Table: Does not scroll when nested in Bodied Macro, column is resized and breakout button is clicked',
-  { skip: ['safari'] },
+  { skip: [] },
   async (client: any, testName: string) => {
     for (const screenWidth of screenWidths) {
       const page = await goToEditorTestingWDExample(
@@ -451,10 +447,9 @@ BrowserTestCase(
   },
 );
 
-// insertColumn helper doesn't work in Safari
 BrowserTestCase(
   'Table: Does not scroll when nested in full-width layout, columns is resized and new column is inserted',
-  { skip: ['safari'] },
+  { skip: [] },
   async (client: any, testName: string) => {
     for (const screenWidth of screenWidths) {
       const page = await goToEditorTestingWDExample(

package/src/__tests__/integration/sticky-header.ts

@@ -3,6 +3,7 @@ import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
 import {
   fullpage,
   tableSelectors,
+  toggleBreakout,
 } from '@atlaskit/editor-test-helpers/integration/helpers';
 import {
   goToEditorTestingWDExample,
@@ -22,6 +23,15 @@ const scrollTo = async (page: WebdriverPage, height: number) => {
   );
 };
 
+// const resizeScrollParent = async (page: WebdriverPage) => {
+//   const editorScrollParentSelector = '.ak-editor-fp-content-area';
+//   await page.execute((editorScrollParentSelector: string) => {
+//     const editor = document.querySelector(editorScrollParentSelector);
+//     console.log('editort', editor);
+//     editor && editor.setAttribute('width', '1000px');
+//   }, editorScrollParentSelector);
+// };
+
 const insertColumn = async (page: any, cell: 'first' | 'last') => {
   const columnControl = tableSelectors.nthColumnControl(1);
   const insertButton = tableSelectors.insertButton;
@@ -41,9 +51,12 @@ const insertColumn = async (page: any, cell: 'first' | 'last') => {
   await page.click(insertButton);
 };
 
+// FIXME: This test was automatically skipped due to failure on 01/04/2023: https://product-fabric.atlassian.net/browse/ED-17364
 BrowserTestCase(
   'Sticky header should correctly toggle on and off',
-  { skip: [] },
+  {
+    skip: ['*'],
+  },
   async (client: any, testName: string) => {
     const page = await goToEditorTestingWDExample(
       client,
@@ -158,3 +171,50 @@ BrowserTestCase(
     expect(!numberedColStyle.includes('top')).toBeTruthy();
   },
 );
+
+BrowserTestCase(
+  'Sticky header should resize when the width of parent scroll container changes',
+  {},
+  async (client: any, testName: string) => {
+    const page = await goToEditorTestingWDExample(
+      client,
+      'editor-plugin-table',
+    );
+
+    await mountEditor(page, {
+      appearance: fullpage.appearance,
+      defaultValue: JSON.stringify(stickyTable),
+      allowTables: {
+        advanced: true,
+        stickyHeaders: true,
+      },
+      featureFlags: {
+        stickyHeadersOptimization: true,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    await toggleBreakout(page, 2);
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    await page.execute(() => {
+      const editorScrollParentSelector = '.fabric-editor-popup-scroll-parent';
+      const editor = document.querySelector(
+        editorScrollParentSelector,
+      ) as HTMLElement;
+      if (editor) {
+        editor.style.flexGrow = '0';
+        editor.style.width = '750px';
+      }
+    });
+
+    const table = await page.$(tableSelectors.stickyTable);
+    const tableWidth = await table.getSize();
+    const stickyHeader = await page.$(tableSelectors.stickyTr);
+    const stickyHeaderWidth = await stickyHeader.getSize();
+
+    expect(tableWidth.width).toEqual(stickyHeaderWidth.width);
+  },
+);

package/src/__tests__/unit/commands/insert.ts

@@ -37,14 +37,14 @@ describe('table plugin: insert', () => {
 
     const createEditor = createProsemirrorEditorFactory();
 
-    const preset = new Preset<LightEditorPlugin>();
-    preset.add([
-      tablePlugin,
-      {
-        tableOptions: {},
-      },
-    ]);
-    preset.add(widthPlugin);
+    const preset = new Preset<LightEditorPlugin>()
+      .add([
+        tablePlugin,
+        {
+          tableOptions: {},
+        },
+      ])
+      .add(widthPlugin);
 
     const editor = (doc: DocBuilder) =>
       createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/nodeviews/cell.ts

@@ -39,6 +39,20 @@ jest.mock('@atlaskit/editor-common/utils', () => ({
   },
 }));
 
+jest.mock('@atlaskit/editor-palette', () => ({
+  ...jest.requireActual<Object>('@atlaskit/editor-palette'),
+  hexToEditorBackgroundPaletteColorTokenName: jest.fn((hexColor: string) => {
+    return hexColor;
+  }),
+}));
+
+jest.mock('@atlaskit/tokens', () => ({
+  ...jest.requireActual<Object>('@atlaskit/tokens'),
+  getTokenValue: jest.fn((tokenId: string, fallback: string = '') => {
+    return tokenId || fallback;
+  }),
+}));
+
 describe('table -> nodeviews -> tableCell.tsx', () => {
   const TABLE_LOCAL_ID = 'test-table-local-id';
   const createEditor = createProsemirrorEditorFactory();

package/src/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -472,7 +472,7 @@ describe('TableRowNodeView', () => {
         triggerElementIntersect({
           target: sentinelTop,
           isIntersecting: false,
-          rootBounds: { bottom: 0, top: 0 },
+          rootBounds: { bottom: 0, top: 56 },
           boundingClientRect: { bottom: 0, top: 0 },
         });
 
@@ -507,7 +507,7 @@ describe('TableRowNodeView', () => {
         triggerElementIntersect({
           target: sentinelBottom,
           isIntersecting: true,
-          rootBounds: { bottom: 0, top: 0 },
+          rootBounds: { bottom: 0, top: 56 },
           boundingClientRect: { bottom: 0, top: -100 },
         });
 

package/src/__tests__/unit/ui/ContextualMenu.tsx

@@ -22,6 +22,7 @@ import { ContextualMenu } from '../../../plugins/table/ui/FloatingContextualMenu
 
 describe('ContextualMenu', () => {
   const getEditorContainerWidth = () => ({ width: 500 });
+  const getEditorFeatureFlags = () => ({});
   const createEditor = createProsemirrorEditorFactory();
   describe('with right table cell position in plugin state', () => {
     let editorView: EditorView;
@@ -44,6 +45,7 @@ describe('ContextualMenu', () => {
           isOpen
           selectionRect={{ bottom: 0, left: 0, right: 0, top: 0 }}
           getEditorContainerWidth={getEditorContainerWidth}
+          getEditorFeatureFlags={getEditorFeatureFlags}
         />,
       );
 

package/src/__tests__/unit/ui/FloatingContextualMenu.tsx

@@ -40,6 +40,7 @@ describe('FloatingContextualMenu', () => {
             isOpen
             pluginConfig={getPluginState(editorView.state).pluginConfig}
             getEditorContainerWidth={jest.fn()}
+            getEditorFeatureFlags={() => ({})}
           />
         </IntlProvider>,
       );

package/src/plugins/table/index.tsx

@@ -371,6 +371,10 @@ const tablesPlugin: NextEditorPlugin<
                     pluginConfig={pluginConfig}
                     editorAnalyticsAPI={options?.editorAnalyticsAPI}
                     getEditorContainerWidth={defaultGetEditorContainerWidth}
+                    getEditorFeatureFlags={
+                      options?.getEditorFeatureFlags ||
+                      defaultGetEditorFeatureFlags
+                    }
                   />
                   {allowControls && (
                     <FloatingDeleteButton

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;
@@ -689,7 +688,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/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/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

@@ -717,6 +717,7 @@ export const tableStyles = (
       padding-bottom: 0px;
       /* fixes gap cursor height */
       overflow: auto;
+      overflow-y: hidden;
       position: relative;
     }
   }

package/src/types/i18n.ts

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