@atlaskit/editor-plugin-table 1.1.2 → 1.1.3

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

@@ -0,0 +1,489 @@
+import WebdriverPage from '@atlaskit/webdriver-runner/wd-wrapper';
+import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
+import {
+  fullpage,
+  resizeColumn,
+} from '@atlaskit/editor-test-helpers/integration/helpers';
+import {
+  goToEditorTestingWDExample,
+  mountEditor,
+} from '@atlaskit/editor-test-helpers/testing-example-page';
+import {
+  insertColumn,
+  insertTable,
+} from '@atlaskit/editor-test-helpers/page-objects/table';
+import basicTableAdf from './__fixtures__/basic-table';
+import nestedInExpand from './__fixtures__/nested-in-expand';
+import { nestedInExtension } from './__fixtures__/nested-in-extension';
+import { table as tableInsideLayout } from './__fixtures__/table-inside-layout';
+import { emptyLayout } from './__fixtures__/empty-layout';
+
+// TODO - Add wider screen size here once editor-common fix is made ED-16647
+const screenWidths = [1920];
+
+const breakout = async (
+  page: WebdriverPage,
+  breakoutButton: WebdriverIO.Element,
+) => {
+  let tableContainer = await page.$('.pm-table-container');
+
+  const currentWidth = await tableContainer.getCSSProperty('width');
+  breakoutButton.click();
+
+  await page.waitUntil(async () => {
+    tableContainer = await page.$('.pm-table-container');
+    const updatedWidth = await tableContainer.getCSSProperty('width');
+    return updatedWidth.value !== currentWidth.value;
+  });
+};
+
+const assertTableDoesNotScroll = async (page: WebdriverPage) => {
+  const table = await page.$('.pm-table-wrapper');
+
+  const tableScrollWidth = await table.getProperty('scrollWidth');
+  const tableOffsetWidth = await table.getProperty('offsetWidth');
+
+  expect(tableScrollWidth).toEqual(tableOffsetWidth);
+};
+
+const assertTableDoesScroll = async (page: WebdriverPage) => {
+  const table = await page.$('.pm-table-wrapper');
+
+  const tableScrollWidth = await table.getProperty('scrollWidth');
+  const tableOffsetWidth = (await table.getProperty('offsetWidth')) as number;
+
+  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'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Does not scroll when column is resized and breakout button is clicked 3x',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in expand, column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: nestedInExpand,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: -100 });
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 2, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 10, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: When nested in expand, last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: nestedInExpand,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 11, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: When nested in layout, last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: tableInsideLayout,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 16, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: When nested in bodied macro, last column can be resized to remove scroll',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: nestedInExtension,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+        allowExtension: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: 1000 });
+      await assertTableDoesScroll(page);
+      await resizeColumn(page, { cellHandlePos: 11, resizeWidth: -1000 });
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+// insertColumn helper doesn't work in Safari
+BrowserTestCase(
+  'Table: Scrolls when there are more columns added than can fit the current width',
+  { skip: ['safari'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: basicTableAdf,
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowExpand: true,
+        allowLayouts: true,
+        allowBreakout: true,
+      });
+
+      const numberOfColumns = 14;
+      for (const _column of [...Array(numberOfColumns).keys()]) {
+        await insertColumn(page, 0, 'right');
+      }
+
+      await assertTableDoesScroll(page);
+    }
+  },
+);
+
+// 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'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(nestedInExtension),
+        allowTables: {
+          advanced: true,
+        },
+        allowExtension: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 3, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in layout, column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(tableInsideLayout),
+        allowTables: {
+          advanced: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+        },
+        allowBreakout: true,
+      });
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in single column layout, table column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(tableInsideLayout),
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+          UNSAFE_allowSingleColumnLayout: true,
+        },
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
+
+      const singleColumnButton = await page.$('[aria-label="Single column"]');
+      singleColumnButton.click();
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+BrowserTestCase(
+  'Table: Does not scroll when nested in three columns layout, table column is resized and breakout button is clicked',
+  { skip: [] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: JSON.stringify(tableInsideLayout),
+        allowTables: {
+          advanced: true,
+          allowDistributeColumns: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+          UNSAFE_allowSingleColumnLayout: true,
+        },
+        allowBreakout: true,
+      });
+
+      await resizeColumn(page, { cellHandlePos: 8, resizeWidth: -100 });
+
+      const threeColumnButton = await page.$('[aria-label="Three columns"]');
+      threeColumnButton.click();
+
+      const breakoutButton = await page.$('[aria-label="Go wide"]');
+
+      await breakout(page, breakoutButton);
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);
+
+// 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'] },
+  async (client: any, testName: string) => {
+    for (const screenWidth of screenWidths) {
+      const page = await goToEditorTestingWDExample(
+        client,
+        'editor-plugin-table',
+        { width: screenWidth, height: 1440 },
+      );
+
+      await mountEditor(page, {
+        appearance: fullpage.appearance,
+        defaultValue: emptyLayout,
+        allowTables: {
+          advanced: true,
+        },
+        allowLayouts: {
+          allowBreakout: true,
+        },
+        allowBreakout: true,
+      });
+
+      const goWideButton = await page.$('[aria-label="Go wide"]');
+      goWideButton.click();
+      goWideButton.click();
+
+      insertTable(page);
+      await assertTableDoesNotScroll(page);
+      await resizeColumn(page, { cellHandlePos: 4, resizeWidth: -100 });
+      await insertColumn(page, 0, 'right');
+      await assertTableDoesNotScroll(page);
+    }
+  },
+);

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

@@ -58,9 +58,9 @@ describe('table plugin: insert', () => {
         doc(
           table({ localId: TABLE_LOCAL_ID })(
             tr(
-              td({ colwidth: [200] })(p('')),
-              td({ colwidth: [200] })(p('')),
-              td({ colwidth: [200] })(p('')),
+              td({ colwidth: [230] })(p('')),
+              td({ colwidth: [230] })(p('')),
+              td({ colwidth: [230] })(p('')),
             ),
           ),
         ),

package/src/__tests__/unit/keymap.ts

@@ -57,6 +57,7 @@ import tablePlugin from '../../plugins/table';
 import { TablePluginState } from '../../plugins/table/types';
 import { pluginKey } from '../../plugins/table/pm-plugins/plugin-key';
 import featureFlagsPlugin from '@atlaskit/editor-core/src/plugins/feature-flags-context';
+import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -101,7 +102,8 @@ describe('table keymap', () => {
     .add([statusPlugin, { menuDisabled: false }])
     .add([mediaPlugin, { allowMediaSingle: true }])
     .add([analyticsPlugin, { createAnalyticsEvent }])
-    .add([featureFlagsPlugin, {}]);
+    .add([featureFlagsPlugin, {}])
+    .add(widthPlugin);
 
   const editor = (doc: DocBuilder) =>
     createEditor<TablePluginState, PluginKey>({

package/src/__tests__/unit/pm-plugins/table-resizing/colgroup.ts

@@ -1,5 +1,6 @@
 import { p, table, tr, td } from '@atlaskit/editor-test-helpers/doc-builder';
 import defaultSchema from '@atlaskit/editor-test-helpers/schema';
+import { isMinCellWidthTable } from '../../../../plugins/table/pm-plugins/table-resizing/utils/colgroup';
 import { generateColgroup } from '../../../../plugins/table/pm-plugins/table-resizing/utils';
 
 describe('table-resizing/colgroup', () => {
@@ -83,4 +84,41 @@ describe('table-resizing/colgroup', () => {
       }
     });
   });
+
+  //isMinCellWidthTable function test
+  describe('#isMinCellWidthTable', () => {
+    describe('check if a table has all the columns with minimum width', () => {
+      it('when input table has all columns in minimum width', () => {
+        const result = isMinCellWidthTable(getMinCellWidthTable());
+
+        expect(result).toEqual(true);
+      });
+
+      it('when input table has a column that is not minimum width', () => {
+        const result = isMinCellWidthTable(getNonMinCellWidthTable());
+
+        expect(result).toEqual(false);
+      });
+
+      function getMinCellWidthTable() {
+        return table()(
+          tr(
+            td({ colwidth: [48] })(p('')),
+            td({ colwidth: [48] })(p('')),
+            td({ colwidth: [48] })(p('')),
+          ),
+        )(defaultSchema);
+      }
+
+      function getNonMinCellWidthTable() {
+        return table()(
+          tr(
+            td({ colwidth: [200] })(p('')),
+            td({ colwidth: [200] })(p('')),
+            td({ colwidth: [48] })(p('')),
+          ),
+        )(defaultSchema);
+      }
+    });
+  });
 });

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

@@ -26,7 +26,10 @@ import { EditorView } from 'prosemirror-view';
 import panelPlugin from '@atlaskit/editor-core/src/plugins/panel';
 import widthPlugin from '@atlaskit/editor-core/src/plugins/width';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { akEditorFullPageMaxWidth } from '@atlaskit/editor-shared-styles/consts';
+import {
+  akEditorFullPageMaxWidth,
+  akEditorDefaultLayoutWidth,
+} from '@atlaskit/editor-shared-styles/consts';
 
 describe('table-resizing/event-handlers', () => {
   const editorAnalyticsAPIFake: EditorAnalyticsAPI = {
@@ -92,7 +95,7 @@ describe('table-resizing/event-handlers', () => {
 
       // No matter how large we try to resize the result should equal the width (within 1 pt)
       expect(getTotalTableWidth(view.state as EditorState)).toBeLessThanOrEqual(
-        akEditorFullPageMaxWidth,
+        akEditorDefaultLayoutWidth,
       );
       expect(
         getTotalTableWidth(view.state as EditorState),

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:b2d4c34ad034fd6a8ffe63e9470ef849f5025413a0d1f9f97e5621ee7c689333
-size 29845
+oid sha256:73e26bdfa1009884d8657a69ff2a721ecf9f0a0763629cae053550cf9b640425
+size 29791

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:337ae7625db1ff78ea3fad3a65bda0821c41c0917ba728eaa6cc059dc5432a8a
-size 29876
+oid sha256:4c6f837604b1df78aef416e043bfd090906490e7604121f6f0c683d43dd7c9da
+size 29783

package/src/__tests__/visual-regression/__image_snapshots__/sticky-header-ts-snapshot-test-table-sticky-header-should-align-with-table-cell-when-active-2-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f1a5a555cab8c01960d1dd4009d44eb51abf0fbd27674404e0bc8ddc9152c345
-size 19785
+oid sha256:19e5db9586d2f5b635464786308235a3da2adda2bea5ab7dcde7a50d901cd869
+size 19731

package/src/__tests__/visual-regression/sticky-header.ts

@@ -38,7 +38,8 @@ describe('Snapshot Test: Table', () => {
   });
 
   describe('sticky header', () => {
-    it('should align with table cell when active', async () => {
+    // FIXME: This test was automatically skipped due to failure on 14/02/2023: https://product-fabric.atlassian.net/browse/ED-16900
+    it.skip('should align with table cell when active', async () => {
       await initEditor(page, stickyHeaderWithHorizontalScroll);
 
       await clickFirstCell(page, true);

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

@@ -55,6 +55,7 @@ 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;
@@ -620,14 +621,23 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
   private handleWindowResize = () => {
     const { getNode, containerWidth } = this.props;
-    const layoutSize = this.tableNodeLayoutSize(getNode());
+    const node = getNode();
+    const prevNode = this.node;
+    const layoutSize = this.tableNodeLayoutSize(node);
+    const prevAttrs = prevNode?.attrs;
+    const layoutChanged =
+      prevAttrs?.layout !== node?.attrs?.layout &&
+      prevAttrs?.__autoSize === node?.attrs?.__autoSize;
 
     if (containerWidth.width > layoutSize) {
       return;
     }
 
     const parentWidth = this.getParentNodeWidth();
-    this.scaleTableDebounced(parentWidth);
+    this.scaleTableDebounced({
+      layoutChanged: layoutChanged,
+      parentWidth: parentWidth,
+    });
   };
 
   private updateTableContainerWidth = () => {
@@ -671,12 +681,15 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     if (!isValidPosition(pos, state)) {
       return;
     }
-    return getParentNodeWidth(
+
+    const parentNodeWith = getParentNodeWidth(
       pos,
       state,
       containerWidth,
       options && options.isFullWidthModeEnabled,
     );
+
+    return getParentWidthWithoutPadding(parentNodeWith, pos, state);
   };
 
   private updateParentWidth = (width?: number) => {

package/src/plugins/table/pm-plugins/table-resizing/commands.ts

@@ -33,7 +33,7 @@ export const scaleTable =
       return false;
     }
 
-    const { node, start, parentWidth } = options;
+    const { node, start, parentWidth, layoutChanged } = options;
 
     // If a table has not been resized yet, columns should be auto.
     if (hasTableBeenResized(node) === false) {
@@ -65,7 +65,11 @@ export const scaleTable =
         // TODO: ED-8995
         // We need to do this check to reduce the number of race conditions when working with tables.
         // This metadata is been used in the sendTransaction function in the Collab plugin
-        tr.setMeta('scaleTable', true);
+        /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
+           scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+           Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+         */
+        !layoutChanged && tr.setMeta('scaleTable', true);
         dispatch(tr);
         return true;
       }