@atlaskit/editor-plugin-table 7.5.5 → 7.5.7

package/dist/esm/nodeviews/TableComponent.js

@@ -6,6 +6,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -45,6 +48,12 @@ var 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.
 var 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.
+var isOverflowAnalyticsEnabled = false;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -56,7 +65,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "state", (_defineProperty2 = {
       scroll: 0,
       parentWidth: undefined
-    }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
+    }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty(_defineProperty2, "tableWrapperWidth", undefined), _defineProperty(_defineProperty2, "tableWrapperHeight", undefined), _defineProperty2));
     _defineProperty(_assertThisInitialized(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
         return;
@@ -288,6 +297,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this.layoutSize = _this.tableNodeLayoutSize(_this.node, _containerWidth.width, {
       isFullWidthModeEnabled: isFullWidthModeEnabled
     });
+    _this.resizeObserver = new ResizeObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        var _loop = function _loop() {
+          var entry = _step.value;
+          _this.setState(function (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 : _objectSpread(_objectSpread({}, prev), {}, {
+              tableWrapperWidth: entry.contentRect.width,
+              tableWrapperHeight: entry.contentRect.height
+            });
+          });
+        };
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
 
     // Disable inline table editing and resizing controls in Firefox
     // https://github.com/ProseMirror/prosemirror/issues/432
@@ -347,12 +379,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.onStickyState(currentStickyState);
       }
       eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
-      var initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      if (isOverflowAnalyticsEnabled) {
+        var initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+        this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
+      var _this$resizeObserver;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
@@ -365,6 +400,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
+      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
       var _getEditorFeatureFlag2 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag2.stickyScrollbar;
       if (stickyScrollbar) {
@@ -393,7 +429,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this$containerWidth;
+      var _this$containerWidth,
+        _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props9 = this.props,
         getNode = _this$props9.getNode,
@@ -416,7 +453,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (depth !== 0) {
         return;
       }
-      var tableNodeWidth = tableNode.attrs.width;
+      var tableNodeWidth = getTableContainerWidth(tableNode);
       var shouldTableScale = tableRenderWidth < tableNodeWidth;
       var containerWidthValue = containerWidth.width;
       var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
@@ -430,7 +467,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           domAtPos: view.domAtPos,
           isTableScalingEnabled: true
         });
-        updateColgroup(resizeState, this.table, tableNode, true);
+
+        // Request animation frame required for Firefox
+        requestAnimationFrame(function () {
+          updateColgroup(resizeState, _this2.table, tableNode, true);
+        });
       }
       this.containerWidth = containerWidth;
     }
@@ -438,7 +479,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
       var _this$wrapper,
-        _this2 = this;
+        _this3 = this;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -462,7 +503,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this2.overflowShadowsObserver = new OverflowShadowsObserver(_this2.updateShadowState, _this2.table, _this2.wrapper);
+            _this3.overflowShadowsObserver = new OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -493,32 +534,42 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         this.handleTableResizingDebounced();
       }
-      var newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
-      var prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
-      if (this.initialOverflowCaptureTimerId) {
-        clearTimeout(this.initialOverflowCaptureTimerId);
+      if (isOverflowAnalyticsEnabled) {
+        var newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+        var 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;
+          var _this$props$view = this.props.view,
+            dispatch = _this$props$view.dispatch,
+            tr = _this$props$view.state.tr;
+          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) {
-        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
-      }
-      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
-        var _this$state2;
-        var _this$props$view = this.props.view,
-          dispatch = _this$props$view.dispatch,
-          tr = _this$props$view.state.tr;
-        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
-        }));
+    }
+  }, {
+    key: "observeTable",
+    value: function observeTable(table) {
+      if (table) {
+        var _this$resizeObserver2;
+        (_this$resizeObserver2 = this.resizeObserver) === null || _this$resizeObserver2 === void 0 || _this$resizeObserver2.observe(table);
       }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this,
+      var _this4 = this,
         _classnames;
       var _this$props11 = this.props,
         view = _this$props11.view,
@@ -570,7 +621,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         ,
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
-        stickyHeader: this.state.stickyHeader
+        stickyHeader: this.state.stickyHeader,
+        tableWrapperWidth: this.state.tableWrapperWidth
       });
       var tableContainerWidth = getTableContainerWidth(node);
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/React.createElement(TableFloatingColumnControls, {
@@ -594,9 +646,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper;
-          return ((_this3$wrapper = _this3.wrapper) === null || _this3$wrapper === void 0 ? void 0 : _this3$wrapper.scrollLeft) || 0;
-        }
+          var _this4$wrapper;
+          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
+        },
+        tableWrapperHeight: this.state.tableWrapperHeight
       }) : null;
       var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
       var shadowStyle = memoizeOne(function (visible) {
@@ -630,6 +683,7 @@ var TableComponent = /*#__PURE__*/function (_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
@@ -643,12 +697,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this3$wrapper2;
-          return ((_this3$wrapper2 = _this3.wrapper) === null || _this3$wrapper2 === void 0 ? void 0 : _this3$wrapper2.scrollLeft) || 0;
+          var _this4$wrapper2;
+          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this3$wrapper3;
-          return ((_this3$wrapper3 = _this3.wrapper) === null || _this3$wrapper3 === void 0 ? void 0 : _this3$wrapper3.clientWidth) || 760;
+          var _this4$wrapper3;
+          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
@@ -663,13 +717,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this3.wrapper = elem;
+          _this4.wrapper = elem;
           if (elem) {
-            _this3.props.contentDOM(elem);
+            _this4.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this3.table) {
-              _this3.table = tableElement;
-              _this3.createShadowSentinels(_this3.table);
+            if (tableElement !== _this4.table) {
+              _this4.table = tableElement;
+              _this4.createShadowSentinels(_this4.table);
+              _this4.observeTable(_this4.table);
             }
           }
         }

package/dist/esm/nodeviews/TableContainer.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-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';
@@ -44,9 +45,14 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
     pluginInjectionApi = _ref2.pluginInjectionApi,
-    isTableScalingEnabled = _ref2.isTableScalingEnabled;
+    isTableScalingEnabled = _ref2.isTableScalingEnabled,
+    tableWrapperHeight = _ref2.tableWrapperHeight;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    resizing = _useState2[0],
+    setIsResizing = _useState2[1];
   var updateContainerHeight = useCallback(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -54,31 +60,24 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     //    consistently fetch and refactor below
     var 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 || _containerRef$current2.style.setProperty('height', typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto');
+      return typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto';
     } else {
-      var _containerRef$current3, _containerRef$current4;
-      var 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 || _containerRef$current4.style.setProperty('height', typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto');
+      var _containerRef$current2;
+      var stickyHeaderHeight = ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
+      return typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto';
     }
   }, []);
-  var resizeObserverRef = useRef(new ResizeObserver(function (entries) {
-    updateContainerHeight(entries[entries.length - 1].contentRect.height);
-  }));
   var onResizeStart = useCallback(function () {
-    if (tableRef) {
-      resizeObserverRef.current.observe(tableRef);
-    }
-  }, [tableRef]);
+    setIsResizing(true);
+  }, []);
   var onResizeStop = useCallback(function () {
-    updateContainerHeight('auto');
-    resizeObserverRef.current.disconnect();
-  }, [updateContainerHeight]);
+    setIsResizing(false);
+  }, []);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current) {
       return;
@@ -141,7 +140,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     }
   }, /*#__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
@@ -163,6 +163,7 @@ export var TableContainer = function TableContainer(_ref3) {
     getPos = _ref3.getPos,
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
+    tableWrapperHeight = _ref3.tableWrapperHeight,
     isResizing = _ref3.isResizing,
     pluginInjectionApi = _ref3.pluginInjectionApi,
     isTableScalingEnabled = _ref3.isTableScalingEnabled;
@@ -174,6 +175,7 @@ export var TableContainer = function TableContainer(_ref3) {
       editorView: editorView,
       getPos: getPos,
       tableRef: tableRef,
+      tableWrapperHeight: tableWrapperHeight,
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled

package/dist/esm/nodeviews/TableResizer.js

@@ -55,7 +55,7 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = getColgroupChildrenLength(node);
-  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  var 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/esm/plugin.js

@@ -50,11 +50,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
     current: null
   };
   var defaultGetEditorContainerWidth = function defaultGetEditorContainerWidth() {
-    var _document$body$offset, _document, _api$width$sharedStat, _api$width;
-    var defaultState = {
+    var _api$width$sharedStat, _api$width, _document$body$offset, _document;
+    return (_api$width$sharedStat = api === null || api === 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 || (_document = _document.body) === null || _document === void 0 ? void 0 : _document.offsetWidth) !== null && _document$body$offset !== void 0 ? _document$body$offset : 500
     };
-    return (_api$width$sharedStat = api === null || api === 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;
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {

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

@@ -26,7 +26,6 @@ import { defaultHoveredCell, defaultTableSelection } from './default-table-selec
 import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
 export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, breakoutEnabled, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled) {
-  var _window;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
     isTableHovered: false,
@@ -43,15 +42,6 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   }, defaultHoveredCell), defaultTableSelection), {}, {
     getIntl: getIntl
   }));
-  var elementContentRects = {};
-  var observer = (_window = window) !== null && _window !== void 0 && _window.ResizeObserver ? new ResizeObserver(function (entries) {
-    entries.forEach(function (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
   var invalidTableIds = [];
@@ -154,11 +144,6 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           } else if (pluginState.isResizeHandleWidgetAdded) {
             removeResizeHandleDecorations()(state, dispatch);
           }
-        },
-        destroy: function destroy() {
-          if (observer) {
-            observer.disconnect();
-          }
         }
       };
     },
@@ -264,10 +249,10 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
           return new TableRow(node, view, getPos, eventDispatcher);
         },
         tableCell: function tableCell(node, view, getPos) {
-          return new TableCell(node, view, getPos, eventDispatcher, observer);
+          return new TableCell(node, view, getPos, eventDispatcher);
         },
         tableHeader: function tableHeader(node, view, getPos) {
-          return new TableCell(node, view, getPos, eventDispatcher, observer);
+          return new TableCell(node, view, getPos, eventDispatcher);
         }
       },
       handleDOMEvents: {
@@ -277,7 +262,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         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/esm/pm-plugins/sticky-headers/types.js

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

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

@@ -4,7 +4,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
@@ -24,14 +24,10 @@ export var generateColgroup = function 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;
-          var tableWidth = table.attrs && table.attrs.width;
-          var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 760;
-          var scalePercent = renderWidth / tableWidth;
-          scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+          var scalePercent = getTableScalingPercent(table, tableRef);
           cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
             var fixedColWidth = getColWidthFix(width, map.width);
-            var scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
+            var scaledWidth = fixedColWidth * scalePercent;
             var finalWidth = Math.max(scaledWidth, tableCellMinWidth);
             cols.push(['col', {
               style: "width: ".concat(finalWidth, "px;")

package/dist/esm/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) {
@@ -89,4 +90,13 @@ export var getTableElementWidth = function getTableElementWidth(table) {
 };
 export var getTableContainerElementWidth = function getTableContainerElementWidth(table) {
   return getTableContainerWidth(table);
+};
+export var getTableScalingPercent = function getTableScalingPercent(table, tableRef) {
+  var _tableRef$parentEleme;
+  var tableWidth = getTableContainerElementWidth(table);
+  var 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
+  var scalePercent = (renderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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';
@@ -8,8 +9,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 var getResizeState = function getResizeState(_ref) {
   var minWidth = _ref.minWidth,
     maxSize = _ref.maxSize,
@@ -19,6 +19,10 @@ export var getResizeState = function getResizeState(_ref) {
     domAtPos = _ref.domAtPos,
     _ref$isTableScalingEn = _ref.isTableScalingEnabled,
     isTableScalingEnabled = _ref$isTableScalingEn === void 0 ? false : _ref$isTableScalingEn;
+  if (isTableScalingEnabled) {
+    var 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)) {
     var _cols = calcTableColumnWidths(table).map(function (width, index) {
@@ -51,11 +55,12 @@ export var getResizeState = function getResizeState(_ref) {
   var cols = Array.from(colgroupChildren).map(function (_, 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) {
+      var tableNodeWidth = getTableContainerWidth(table);
       return {
         index: index,
-        width: table.attrs.width / colgroupChildren.length,
-        minWidth: COLUMN_MIN_WIDTH
+        width: tableNodeWidth / colgroupChildren.length,
+        minWidth: minWidth
       };
     }
     var cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
@@ -83,25 +88,19 @@ export var updateColgroup = function updateColgroup(state, tableRef, tableNode,
   if (getBooleanFF('platform.editor.custom-table-width')) {
     var columnsCount = cols.length;
     if (isTableScalingEnabled && tableNode) {
-      var tableWidth = getTableContainerElementWidth(tableNode);
-      if (tableWidth) {
-        var _tableRef$parentEleme;
-        var renderWidth = ((_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || TABLE_DEFAULT_WIDTH;
-        var scalePercent = renderWidth / tableWidth;
-        scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
-        state.cols.filter(function (column) {
-          return column && !!column.width;
-        }) // if width is 0, we dont want to apply that.
-        .forEach(function (column, i) {
-          var fixedColWidth = getColWidthFix(column.width, columnsCount);
-          var scaledWidth = fixedColWidth * Math.min(scalePercent, 1);
-          var 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 = "".concat(finalWidth, "px");
-          }
-        });
-      }
+      var scalePercent = getTableScalingPercent(tableNode, tableRef);
+      state.cols.filter(function (column) {
+        return column && !!column.width;
+      }) // if width is 0, we dont want to apply that.
+      .forEach(function (column, i) {
+        var fixedColWidth = getColWidthFix(column.width, columnsCount);
+        var scaledWidth = fixedColWidth * scalePercent;
+        var 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 = "".concat(finalWidth, "px");
+        }
+      });
     } else {
       state.cols.filter(function (column) {
         return column && !!column.width;

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

@@ -124,9 +124,9 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     syncStickyRowToTable(tableRef);
     return;
   }
-  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabled) : scale(tableRef, options, domAtPos, isTableScalingEnabled);
+  var 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/esm/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) {
   var 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;