@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

package/dist/es2019/nodeviews/TableComponent.js

@@ -34,6 +34,12 @@ const isIE11 = browser.ie_version === 11;
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
 // To make sure we capture the last update, we use setTimeout.
 const initialOverflowCaptureTimeroutDelay = 300;
+
+// This is a hard switch for controlling whether the overflow analytics should be dispatched. There has been 6months of data
+// already collected which we could use but have not. This has been disabled rather then removed entirely in the event that
+// the current collected data becomes stale and we want to start collecting fresh data again in future.
+// PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
+const isOverflowAnalyticsEnabled = false;
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -41,7 +47,9 @@ class TableComponent extends React.Component {
       scroll: 0,
       parentWidth: undefined,
       [ShadowEvent.SHOW_BEFORE_SHADOW]: false,
-      [ShadowEvent.SHOW_AFTER_SHADOW]: false
+      [ShadowEvent.SHOW_AFTER_SHADOW]: false,
+      tableWrapperWidth: undefined,
+      tableWrapperHeight: undefined
     });
     _defineProperty(this, "updateShadowState", (shadowKey, value) => {
       if (this.state[shadowKey] === value) {
@@ -293,6 +301,18 @@ class TableComponent extends React.Component {
     this.layoutSize = this.tableNodeLayoutSize(this.node, _containerWidth.width, {
       isFullWidthModeEnabled
     });
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        this.setState(prev => {
+          var _entry$contentRect, _entry$contentRect2;
+          return (prev === null || prev === void 0 ? void 0 : prev.tableWrapperWidth) === ((_entry$contentRect = entry.contentRect) === null || _entry$contentRect === void 0 ? void 0 : _entry$contentRect.width) && (prev === null || prev === void 0 ? void 0 : prev.tableWrapperHeight) === ((_entry$contentRect2 = entry.contentRect) === null || _entry$contentRect2 === void 0 ? void 0 : _entry$contentRect2.height) ? prev : {
+            ...prev,
+            tableWrapperWidth: entry.contentRect.width,
+            tableWrapperHeight: entry.contentRect.height
+          };
+        });
+      }
+    });
 
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
@@ -351,10 +371,13 @@ class TableComponent extends React.Component {
       this.onStickyState(currentStickyState);
     }
     eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-    const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-    this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    if (isOverflowAnalyticsEnabled) {
+      const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
   componentWillUnmount() {
+    var _this$resizeObserver;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -368,6 +391,7 @@ class TableComponent extends React.Component {
     if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
       this.dragAndDropCleanupFn();
     }
+    (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -418,9 +442,7 @@ class TableComponent extends React.Component {
     if (depth !== 0) {
       return;
     }
-    const {
-      width: tableNodeWidth
-    } = tableNode.attrs;
+    const tableNodeWidth = getTableContainerWidth(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
     const {
       width: containerWidthValue
@@ -436,7 +458,11 @@ class TableComponent extends React.Component {
         domAtPos: view.domAtPos,
         isTableScalingEnabled: true
       });
-      updateColgroup(resizeState, this.table, tableNode, true);
+
+      // Request animation frame required for Firefox
+      requestAnimationFrame(() => {
+        updateColgroup(resizeState, this.table, tableNode, true);
+      });
     }
     this.containerWidth = containerWidth;
   }
@@ -500,29 +526,37 @@ class TableComponent extends React.Component {
       }
       this.handleTableResizingDebounced();
     }
-    const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-    const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-    if (this.initialOverflowCaptureTimerId) {
-      clearTimeout(this.initialOverflowCaptureTimerId);
-    }
-    if (!this.isInitialOverflowSent) {
-      this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+    if (isOverflowAnalyticsEnabled) {
+      const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+        var _this$state2;
+        const {
+          dispatch,
+          state: {
+            tr
+          }
+        } = this.props.view;
+        dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+          isOverflowing: newIsOverflowing,
+          wasOverflowing: prevIsOverflowing,
+          editorWidth: this.props.containerWidth.width || 0,
+          width: this.node.attrs.width || 0,
+          parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+        }));
+      }
     }
-    if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-      var _this$state2;
-      const {
-        dispatch,
-        state: {
-          tr
-        }
-      } = this.props.view;
-      dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
-        isOverflowing: newIsOverflowing,
-        wasOverflowing: prevIsOverflowing,
-        editorWidth: this.props.containerWidth.width || 0,
-        width: this.node.attrs.width || 0,
-        parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
-      }));
+  }
+  observeTable(table) {
+    if (table) {
+      var _this$resizeObserver2;
+      (_this$resizeObserver2 = this.resizeObserver) === null || _this$resizeObserver2 === void 0 ? void 0 : _this$resizeObserver2.observe(table);
     }
   }
   render() {
@@ -578,7 +612,8 @@ class TableComponent extends React.Component {
       ,
       selection: view.state.selection,
       headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-      stickyHeader: this.state.stickyHeader
+      stickyHeader: this.state.stickyHeader,
+      tableWrapperWidth: this.state.tableWrapperWidth
     });
     const tableContainerWidth = getTableContainerWidth(node);
     const colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
@@ -604,7 +639,8 @@ class TableComponent extends React.Component {
       getScrollOffset: () => {
         var _this$wrapper2;
         return ((_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.scrollLeft) || 0;
-      }
+      },
+      tableWrapperHeight: this.state.tableWrapperHeight
     }) : null;
     const shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
     const shadowStyle = memoizeOne(visible => ({
@@ -642,6 +678,7 @@ class TableComponent extends React.Component {
       isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
+      tableWrapperHeight: this.state.tableWrapperHeight,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
       isResizing: isResizing,
       isTableScalingEnabled: isTableScalingEnabled
@@ -682,6 +719,7 @@ class TableComponent extends React.Component {
           if (tableElement !== this.table) {
             this.table = tableElement;
             this.createShadowSentinels(this.table);
+            this.observeTable(this.table);
           }
         }
       }

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef } from 'react';
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
@@ -42,10 +42,12 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableRef,
   isResizing,
   pluginInjectionApi,
-  isTableScalingEnabled
+  isTableScalingEnabled,
+  tableWrapperHeight
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  const [resizing, setIsResizing] = useState(false);
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -53,31 +55,24 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     //    consistently fetch and refactor below
     const stickyHeaders = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getElementsByClassName('pm-table-sticky');
     if (!stickyHeaders || stickyHeaders.length < 1) {
-      var _containerRef$current2;
       // when starting to drag, we need to keep the original space,
       // -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
       //    1px is border width but collapse make it 0.5.
       // -- When sticky header appear, we should add first row height but reduce
       //    collapsed border
-      (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.setProperty('height', typeof height === 'number' ? `${height + 40.5}px` : 'auto');
+      return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
     } else {
-      var _containerRef$current3, _containerRef$current4;
-      const stickyHeaderHeight = ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
-      (_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.style.setProperty('height', typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto');
+      var _containerRef$current2;
+      const stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      return typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto';
     }
   }, []);
-  const resizeObserverRef = useRef(new ResizeObserver(entries => {
-    updateContainerHeight(entries[entries.length - 1].contentRect.height);
-  }));
   const onResizeStart = useCallback(() => {
-    if (tableRef) {
-      resizeObserverRef.current.observe(tableRef);
-    }
-  }, [tableRef]);
+    setIsResizing(true);
+  }, []);
   const onResizeStop = useCallback(() => {
-    updateContainerHeight('auto');
-    resizeObserverRef.current.disconnect();
-  }, [updateContainerHeight]);
+    setIsResizing(false);
+  }, []);
   const updateWidth = useCallback(width => {
     if (!containerRef.current) {
       return;
@@ -141,7 +136,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
-      width: tableWidthRef.current
+      width: tableWidthRef.current,
+      height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto'
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
     ref: containerRef
@@ -164,6 +160,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
   isTableScalingEnabled
@@ -176,6 +173,7 @@ export const TableContainer = ({
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled

package/dist/es2019/nodeviews/TableResizer.js

@@ -51,7 +51,7 @@ const getResizerHandleHeight = tableRef => {
 };
 const getResizerMinWidth = node => {
   const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
   // add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;

package/dist/es2019/plugin.js

@@ -49,11 +49,10 @@ const tablesPlugin = ({
     current: null
   };
   const defaultGetEditorContainerWidth = () => {
-    var _document$body$offset, _document, _document$body, _api$width$sharedStat, _api$width;
-    const defaultState = {
+    var _api$width$sharedStat, _api$width, _document$body$offset, _document, _document$body;
+    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : {
       width: (_document$body$offset = (_document = document) === null || _document === void 0 ? void 0 : (_document$body = _document.body) === null || _document$body === void 0 ? void 0 : _document$body.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : _api$width.sharedState.currentState()) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : defaultState;
   };
   const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

package/dist/es2019/pm-plugins/main.js

@@ -23,7 +23,6 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) => {
-  var _window;
   const state = createPluginState(dispatch, {
     pluginConfig,
     isTableHovered: false,
@@ -41,15 +40,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     ...defaultTableSelection,
     getIntl
   });
-  let elementContentRects = {};
-  const observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(entries => {
-    entries.forEach(entry => {
-      if (!entry.target.id) {
-        return;
-      }
-      elementContentRects[entry.target.id] = entry.contentRect;
-    });
-  }) : undefined;
 
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds = [];
@@ -151,11 +141,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           } else if (pluginState.isResizeHandleWidgetAdded) {
             removeResizeHandleDecorations()(state, dispatch);
           }
-        },
-        destroy: () => {
-          if (observer) {
-            observer.disconnect();
-          }
         }
       };
     },
@@ -264,8 +249,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       nodeViews: {
         table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi),
         tableRow: (node, view, getPos) => new TableRow(node, view, getPos, eventDispatcher),
-        tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher, observer),
-        tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher, observer)
+        tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher),
+        tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher)
       },
       handleDOMEvents: {
         focus: handleFocus,
@@ -274,7 +259,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
         mouseleave: handleMouseLeave,
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
+        mousemove: whenTableInFocus(handleMouseMove),
         mouseenter: handleMouseEnter,
         mouseup: whenTableInFocus(handleMouseUp),
         click: withCellTracking(whenTableInFocus(handleClick))

package/dist/es2019/pm-plugins/sticky-headers/types.js

@@ -1 +0,0 @@
-export {};

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -3,7 +3,7 @@ import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { MAX_SCALING_PERCENT } from './consts';
+import { getTableScalingPercent } from './misc';
 /**
  * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
  * than the table and table wrapper elements. This is necessary as there is no longer
@@ -21,14 +21,10 @@ export const generateColgroup = (table, tableRef) => {
         // We slice here to guard against our colwidth array having more entries
         // Than the we actually span. We'll patch the document at a later point.
         if (tableRef) {
-          var _tableRef$parentEleme;
-          const tableWidth = table.attrs && table.attrs.width;
-          let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 760;
-          let scalePercent = renderWidth / tableWidth;
-          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          const scalePercent = getTableScalingPercent(table, tableRef);
           cell.attrs.colwidth.slice(0, colspan).forEach(width => {
             const fixedColWidth = getColWidthFix(width, map.width);
-            const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            const scaledWidth = fixedColWidth * scalePercent;
             const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
             cols.push(['col', {
               style: `width: ${finalWidth}px;`

package/dist/es2019/pm-plugins/table-resizing/utils/misc.js

@@ -5,6 +5,7 @@ import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-commo
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hasTableBeenResized } from './colgroup';
+import { MAX_SCALING_PERCENT } from './consts';
 
 // Translates named layouts in number values.
 export function getLayoutSize(tableLayout, containerWidth = 0, options) {
@@ -89,4 +90,13 @@ export const getTableElementWidth = table => {
 };
 export const getTableContainerElementWidth = table => {
   return getTableContainerWidth(table);
+};
+export const getTableScalingPercent = (table, tableRef) => {
+  var _tableRef$parentEleme;
+  const tableWidth = getTableContainerElementWidth(table);
+  let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (renderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js

@@ -1,3 +1,4 @@
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -5,8 +6,7 @@ import { getSelectedTableInfo } from '../../../utils';
 import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
 import { syncStickyRowToTable } from './dom';
-import { getTableContainerElementWidth, getTableMaxWidth } from './misc';
-import { COLUMN_MIN_WIDTH, MAX_SCALING_PERCENT, TABLE_DEFAULT_WIDTH } from './index';
+import { getTableMaxWidth, getTableScalingPercent } from './misc';
 export const getResizeState = ({
   minWidth,
   maxSize,
@@ -16,6 +16,10 @@ export const getResizeState = ({
   domAtPos,
   isTableScalingEnabled = false
 }) => {
+  if (isTableScalingEnabled) {
+    const scalePercent = getTableScalingPercent(table, tableRef);
+    minWidth = Math.ceil(minWidth / scalePercent);
+  }
   // If the table has been resized, we can use the column widths from the table node
   if (hasTableBeenResized(table)) {
     const cols = calcTableColumnWidths(table).map((width, index) => ({
@@ -42,11 +46,12 @@ export const getResizeState = ({
   const cols = Array.from(colgroupChildren).map((_, index) => {
     // If the table hasn't been resized and we have a table width attribute, we can use it
     // to calculate the widths of the columns
-    if (isTableScalingEnabled && table.attrs.width) {
+    if (isTableScalingEnabled) {
+      const tableNodeWidth = getTableContainerWidth(table);
       return {
         index,
-        width: table.attrs.width / colgroupChildren.length,
-        minWidth: COLUMN_MIN_WIDTH
+        width: tableNodeWidth / colgroupChildren.length,
+        minWidth
       };
     }
     const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
@@ -70,23 +75,17 @@ export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled
   if (getBooleanFF('platform.editor.custom-table-width')) {
     const columnsCount = cols.length;
     if (isTableScalingEnabled && tableNode) {
-      const tableWidth = getTableContainerElementWidth(tableNode);
-      if (tableWidth) {
-        var _tableRef$parentEleme;
-        let renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || TABLE_DEFAULT_WIDTH;
-        let scalePercent = renderWidth / tableWidth;
-        scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
-        state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
-        .forEach((column, i) => {
-          const fixedColWidth = getColWidthFix(column.width, columnsCount);
-          const scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
-          const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-          // we aren't handling the remaining pixels here when the 48px min width is reached
-          if (cols[i]) {
-            cols[i].style.width = `${finalWidth}px`;
-          }
-        });
-      }
+      const scalePercent = getTableScalingPercent(tableNode, tableRef);
+      state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
+      .forEach((column, i) => {
+        const fixedColWidth = getColWidthFix(column.width, columnsCount);
+        const scaledWidth = fixedColWidth * scalePercent;
+        const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
+        // we aren't handling the remaining pixels here when the 48px min width is reached
+        if (cols[i]) {
+          cols[i].style.width = `${finalWidth}px`;
+        }
+      });
     } else {
       state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.
       .forEach((column, i) => {

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -126,9 +126,9 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     syncStickyRowToTable(tableRef);
     return;
   }
-  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabled) : scale(tableRef, options, domAtPos, isTableScalingEnabled);
+  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) : scale(tableRef, options, domAtPos, false);
   if (resizeState) {
-    updateColgroup(resizeState, tableRef, node, isTableScalingEnabled);
+    updateColgroup(resizeState, tableRef, node, false);
   }
 };
 

package/dist/es2019/pm-plugins/table-selection-keymap.js

@@ -1,7 +1,7 @@
-import { bindKeymapArrayWithCommand, bindKeymapWithCommand, moveLeft, moveRight, selectColumn, selectRow, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapArrayWithCommand, bindKeymapWithCommand, moveLeft, moveRight, selectColumn, selectRow, selectTable, shiftArrowUp } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { arrowLeftFromTable, arrowRightFromTable, selectColumns, selectRows, shiftArrowUpFromTable } from '../commands/selection';
+import { arrowLeftFromTable, arrowRightFromTable, modASelectTable, selectColumns, selectRows, shiftArrowUpFromTable } from '../commands/selection';
 export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   const list = {};
   bindKeymapWithCommand(moveRight.common, arrowRightFromTable(editorSelectionAPI)(), list);
@@ -13,6 +13,9 @@ export function tableSelectionKeymapPlugin(editorSelectionAPI) {
   if (getBooleanFF('platform.editor.table.shift-arrowup-fix')) {
     bindKeymapWithCommand(shiftArrowUp.common, shiftArrowUpFromTable(editorSelectionAPI)(), list);
   }
+  if (getBooleanFF('platform.editor.table.cmd-a-select-table')) {
+    bindKeymapWithCommand(selectTable.common, modASelectTable(editorSelectionAPI)(), list);
+  }
   return keymap(list);
 }
 export default tableSelectionKeymapPlugin;

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -18,37 +18,15 @@ export const TableFloatingColumnControls = ({
   isTableHovered,
   tableContainerWidth,
   isNumberColumnEnabled,
-  getScrollOffset
+  getScrollOffset,
+  tableWrapperHeight
 }) => {
-  const [tableRect, setTableRect] = useState({
-    width: 0,
-    height: 0
-  });
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef(null);
   const node = getNode();
   const currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
   const hasHeaderColumn = containsHeaderColumn(node);
   const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
-  useEffect(() => {
-    var _window;
-    if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
-      const resizeObserver = new ResizeObserver(entries => {
-        for (let entry of entries) {
-          setTableRect(prev => {
-            if (prev.width !== entry.contentRect.width || prev.height !== entry.contentRect.height) {
-              return entry.contentRect;
-            }
-            return prev;
-          });
-        }
-      });
-      resizeObserver.observe(tableRef);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, [tableRef]);
   useEffect(() => {
     return monitorForElements({
       canMonitor({
@@ -71,11 +49,11 @@ export const TableFloatingColumnControls = ({
   }, [editorView, currentNodeLocalId]);
   const rowHeights = useMemo(() => {
     // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
-    if (tableRef && !!tableRect.height) {
+    if (tableRef && !!tableWrapperHeight) {
       return getRowHeights(tableRef);
     }
     return [0];
-  }, [tableRef, tableRect.height]);
+  }, [tableRef, tableWrapperHeight]);
   if (!tableRef || !tableActive || isResizing) {
     return null;
   }
@@ -112,7 +90,7 @@ export const TableFloatingColumnControls = ({
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,
-    tableHeight: tableRect.height,
+    tableHeight: tableWrapperHeight,
     localId: currentNodeLocalId,
     colWidths: colWidths,
     getScrollOffset: getScrollOffset