@atlaskit/editor-plugin-table 1.1.5 → 1.2.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

@@ -0,0 +1,220 @@
+import WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  tableSelectors,
+  toggleBreakout,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import stickyTable from './__fixtures__/large-table-with-sticky-header';
+
+const scrollTo = async (page: WebdriverPage, height: number) => {
+  const editorScrollParentSelector = '.fabric-editor-popup-scroll-parent';
+  await page.execute(
+    (editorScrollParentSelector: string, height: number) => {
+      const editor = document.querySelector(editorScrollParentSelector);
+      editor && editor.scroll(0, height);
+    },
+    editorScrollParentSelector,
+    height,
+  );
+};
+
+// 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;
+  const firstCell = tableSelectors.topLeftCell;
+  const firstCellLastRow = `table > tbody > tr:nth-child(48) > td:nth-child(1)`;
+
+  if (cell === 'first') {
+    await page.click(firstCell);
+  } else if (cell === 'last') {
+    await page.click(firstCellLastRow);
+  }
+
+  const columnDecorationSelector = columnControl;
+  await page.hover(columnDecorationSelector);
+
+  await page.waitForSelector(insertButton);
+  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: ['*'],
+  },
+  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,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    expect(await page.waitForSelector(tableSelectors.stickyTable)).toBeTruthy();
+    expect(await page.waitForSelector(tableSelectors.stickyTr)).toBeTruthy();
+
+    await scrollTo(page, 0);
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+  },
+);
+
+BrowserTestCase(
+  'Sticky header should still correctly toggle on and off, after a column has been added',
+  { skip: ['safari'] },
+  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,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+
+    await insertColumn(page, 'first');
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    expect(await page.waitForSelector(tableSelectors.stickyTable)).toBeTruthy();
+    expect(await page.waitForSelector(tableSelectors.stickyTr)).toBeTruthy();
+  },
+);
+
+BrowserTestCase(
+  'Sticky header should correctly toggle on and off, after table is scrolled to the bottom and a column has been added',
+  { skip: ['safari'] },
+  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,
+      },
+    });
+
+    await page.waitForSelector('table');
+
+    await scrollTo(page, window.innerHeight * 100);
+
+    await insertColumn(page, 'last');
+
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTable, {}, true),
+    ).toBeTruthy();
+    expect(
+      await page.waitForSelector(tableSelectors.stickyTr, {}, true),
+    ).toBeTruthy();
+
+    // ED-16817 This checks for a bug where the table row would become not sticky
+    // but the numbered column header would stay sticky
+    const numberedCol = await page.$(tableSelectors.numberedColumnTopLeftCell);
+    const numberedColStyle = await numberedCol.getAttribute('style');
+    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/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-column-menu-item-visual-hints-should-be-added-to-the-table-column-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:73e26bdfa1009884d8657a69ff2a721ecf9f0a0763629cae053550cf9b640425
-size 29791
+oid sha256:ac570fb3172970569166ac27d43c4d4330ed10407894ae2882fc91268b7c6543
+size 29647

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-visual-hints-should-be-added-to-the-table-row-on-hover-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4c6f837604b1df78aef416e043bfd090906490e7604121f6f0c683d43dd7c9da
-size 29783
+oid sha256:91b791b54bbda59e690dbec1a779bbba00ccdfdd2b1658def547de0edb8164c5
+size 29662

package/src/__tests__/visual-regression/__image_snapshots__/index-ts-snapshot-test-table-numbered-list-should-not-overflow-table-cell-when-there-are-more-than-100-ordered-list-items-3-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:61cd30f491d1cf3499042fe4c002d5ec610520b57e395cc78c998b71dadc9cd3
-size 42193
+oid sha256:918d6eca1f77862b22c2530a59567a7bed80e221c1d1050a3e45c0803112437e
+size 42897

package/src/plugins/table/index.tsx

@@ -79,8 +79,9 @@ const defaultGetEditorFeatureFlags = () => ({});
 
 const tablesPlugin: NextEditorPlugin<
   'table',
-  never,
-  TablePluginOptions | undefined
+  {
+    pluginConfiguration: TablePluginOptions | undefined;
+  }
 > = (options?: TablePluginOptions) => {
   const editorViewRef: Record<'current', EditorView | null> = { current: null };
   const defaultGetEditorContainerWidth: GetEditorContainerWidth = () => {
@@ -370,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,
@@ -190,9 +190,15 @@ export class TableRowNodeView implements NodeView {
     if (!this.listening) {
       return;
     }
-
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
+      // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
+      // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+      [this.sentinels.top, this.sentinels.bottom].forEach((el) => {
+        if (el) {
+          delete el.dataset.isObserved;
+        }
+      });
     }
 
     if (this.resizeObserver) {
@@ -203,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,
@@ -229,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
@@ -262,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);
+          }
         }
       });
     });
@@ -303,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);
             }
@@ -319,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);
             }
           }
         });
@@ -543,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) {
@@ -585,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;
@@ -601,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);
@@ -633,7 +656,6 @@ export class TableRowNodeView implements NodeView {
     table.classList.remove(ClassName.TABLE_STICKY);
 
     this.isSticky = false;
-
     this.dom.style.top = '';
     table.style.removeProperty('margin-top');
 

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;
-};