@atlaskit/editor-core 153.1.1 → 153.1.5

package/dist/cjs/plugins/table/event-handlers.js

@@ -19,11 +19,9 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _utils2 = require("@atlaskit/editor-common/utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
-
-var _utils2 = require("../../utils");
+var _utils3 = require("../../utils");
 
 var _dom = require("../../utils/dom");
 
@@ -39,7 +37,7 @@ var _transforms = require("./transforms");
 
 var _types = require("./types");
 
-var _utils3 = require("./utils");
+var _utils4 = require("./utils");
 
 var _getAllowAddColumnCustomStep = require("./utils/get-allow-add-column-custom-step");
 
@@ -58,7 +56,7 @@ var handleBlur = function handleBlur(view, event) {
       dispatch = view.dispatch; // IE version check for ED-4665
   // Calendar focus check for ED-10466
 
-  if (_editorCommon.browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
+  if (_utils2.browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event)) {
     (0, _commands.setEditorFocus)(false)(state, dispatch);
   }
 
@@ -86,8 +84,8 @@ var handleClick = function handleClick(view, event) {
   var element = event.target;
   var table = (0, _utils.findTable)(view.state.selection);
 
-  if (event instanceof MouseEvent && (0, _utils3.isColumnControlsDecorations)(element)) {
-    var _getColumnOrRowIndex = (0, _utils3.getColumnOrRowIndex)(element),
+  if (event instanceof MouseEvent && (0, _utils4.isColumnControlsDecorations)(element)) {
+    var _getColumnOrRowIndex = (0, _utils4.getColumnOrRowIndex)(element),
         _getColumnOrRowIndex2 = (0, _slicedToArray2.default)(_getColumnOrRowIndex, 1),
         startIndex = _getColumnOrRowIndex2[0];
 
@@ -98,7 +96,7 @@ var handleClick = function handleClick(view, event) {
 
   var matchfn = element.matches ? element.matches : element.msMatchesSelector; // check if the table cell with an image is clicked and its not the image itself
 
-  if (!table || !(0, _utils2.isElementInTableCell)(element) || !matchfn || matchfn.call(element, 'table .image, table p, table .image div')) {
+  if (!table || !(0, _utils3.isElementInTableCell)(element) || !matchfn || matchfn.call(element, 'table .image, table p, table .image div')) {
     return false;
   }
 
@@ -111,7 +109,6 @@ var handleClick = function handleClick(view, event) {
   var rowElement = (0, _dom.closestElement)(element, 'tr');
   var rowIndex = rowElement && rowElement.rowIndex;
   var cellIndex = map.width * rowIndex + colIndex;
-  var posInTable = map.map[cellIndex + 1];
   var dispatch = view.dispatch,
       _view$state = view.state,
       tr = _view$state.tr,
@@ -119,10 +116,11 @@ var handleClick = function handleClick(view, event) {
   var editorElement = table.node.nodeAt(map.map[cellIndex]);
   /** Only if the last item is media group, insert a paragraph */
 
-  if ((0, _utils2.isLastItemMediaGroup)(editorElement)) {
+  if ((0, _utils3.isLastItemMediaGroup)(editorElement)) {
+    var posInTable = map.map[cellIndex] + editorElement.nodeSize;
     tr.insert(posInTable + table.pos, paragraph.create());
     dispatch(tr);
-    (0, _utils2.setNodeSelection)(view, posInTable + table.pos);
+    (0, _utils3.setNodeSelection)(view, posInTable + table.pos);
   }
 
   return true;
@@ -143,18 +141,18 @@ var handleMouseOver = function handleMouseOver(view, mouseEvent) {
       insertColumnButtonIndex = _getPluginState.insertColumnButtonIndex,
       insertRowButtonIndex = _getPluginState.insertRowButtonIndex;
 
-  if ((0, _utils3.isInsertRowButton)(target)) {
-    var _getColumnOrRowIndex3 = (0, _utils3.getColumnOrRowIndex)(target),
+  if ((0, _utils4.isInsertRowButton)(target)) {
+    var _getColumnOrRowIndex3 = (0, _utils4.getColumnOrRowIndex)(target),
         _getColumnOrRowIndex4 = (0, _slicedToArray2.default)(_getColumnOrRowIndex3, 2),
         startIndex = _getColumnOrRowIndex4[0],
         endIndex = _getColumnOrRowIndex4[1];
 
-    var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(mouseEvent) === 'bottom' ? endIndex : startIndex;
+    var positionRow = (0, _utils4.getMousePositionVerticalRelativeByElement)(mouseEvent) === 'bottom' ? endIndex : startIndex;
     return (0, _commands.showInsertRowButton)(positionRow)(state, dispatch);
   }
 
-  if ((0, _utils3.isColumnControlsDecorations)(target)) {
-    var _getColumnOrRowIndex5 = (0, _utils3.getColumnOrRowIndex)(target),
+  if ((0, _utils4.isColumnControlsDecorations)(target)) {
+    var _getColumnOrRowIndex5 = (0, _utils4.getColumnOrRowIndex)(target),
         _getColumnOrRowIndex6 = (0, _slicedToArray2.default)(_getColumnOrRowIndex5, 1),
         _startIndex = _getColumnOrRowIndex6[0];
 
@@ -163,12 +161,12 @@ var handleMouseOver = function handleMouseOver(view, mouseEvent) {
     return (0, _commands.hoverColumns)([_startIndex], false)(_state, _dispatch2);
   }
 
-  if (((0, _utils3.isCell)(target) || (0, _utils3.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+  if (((0, _utils4.isCell)(target) || (0, _utils4.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
   }
 
-  if ((0, _utils3.isResizeHandleDecoration)(target)) {
-    var _getColumnOrRowIndex7 = (0, _utils3.getColumnOrRowIndex)(target),
+  if ((0, _utils4.isResizeHandleDecoration)(target)) {
+    var _getColumnOrRowIndex7 = (0, _utils4.getColumnOrRowIndex)(target),
         _getColumnOrRowIndex8 = (0, _slicedToArray2.default)(_getColumnOrRowIndex7, 2),
         _startIndex2 = _getColumnOrRowIndex8[0],
         _endIndex = _getColumnOrRowIndex8[1];
@@ -187,7 +185,7 @@ var handleMouseOver = function handleMouseOver(view, mouseEvent) {
 exports.handleMouseOver = handleMouseOver;
 
 var handleMouseDown = function handleMouseDown(_, event) {
-  var isControl = !!(event.target && event.target instanceof HTMLElement && ((0, _utils3.isTableContainerOrWrapper)(event.target) || (0, _utils3.isColumnControlsDecorations)(event.target) || (0, _utils3.isRowControlsButton)(event.target)));
+  var isControl = !!(event.target && event.target instanceof HTMLElement && ((0, _utils4.isTableContainerOrWrapper)(event.target) || (0, _utils4.isColumnControlsDecorations)(event.target) || (0, _utils4.isRowControlsButton)(event.target)));
 
   if (isControl) {
     event.preventDefault();
@@ -205,7 +203,7 @@ var handleMouseOut = function handleMouseOut(view, mouseEvent) {
 
   var target = mouseEvent.target;
 
-  if ((0, _utils3.isColumnControlsDecorations)(target)) {
+  if ((0, _utils4.isColumnControlsDecorations)(target)) {
     var state = view.state,
         dispatch = view.dispatch;
     return (0, _commands.clearHoverSelection)()(state, dispatch);
@@ -214,7 +212,7 @@ var handleMouseOut = function handleMouseOut(view, mouseEvent) {
   var relatedTarget = mouseEvent.relatedTarget; // In case the user is moving between cell at the same column
   // we don't need to hide the resize handle decoration
 
-  if ((0, _utils3.isResizeHandleDecoration)(target) && !(0, _utils3.isResizeHandleDecoration)(relatedTarget)) {
+  if ((0, _utils4.isResizeHandleDecoration)(target) && !(0, _utils4.isResizeHandleDecoration)(relatedTarget)) {
     var _state2 = view.state,
         _dispatch3 = view.dispatch;
     return (0, _commands.hideResizeHandleLine)()(_state2, _dispatch3);
@@ -239,7 +237,7 @@ var handleMouseLeave = function handleMouseLeave(view, event) {
 
   var target = event.target;
 
-  if ((0, _utils3.isTableControlsButton)(target)) {
+  if ((0, _utils4.isTableControlsButton)(target)) {
     return true;
   }
 
@@ -259,38 +257,38 @@ var handleMouseMove = function handleMouseMove(view, event, tableCellOptimizatio
 
   var element = event.target;
 
-  if ((0, _utils3.isColumnControlsDecorations)(element)) {
+  if ((0, _utils4.isColumnControlsDecorations)(element)) {
     var state = view.state,
         dispatch = view.dispatch;
 
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
         insertColumnButtonIndex = _getPluginState3.insertColumnButtonIndex;
 
-    var _getColumnOrRowIndex9 = (0, _utils3.getColumnOrRowIndex)(element),
+    var _getColumnOrRowIndex9 = (0, _utils4.getColumnOrRowIndex)(element),
         _getColumnOrRowIndex10 = (0, _slicedToArray2.default)(_getColumnOrRowIndex9, 2),
         startIndex = _getColumnOrRowIndex10[0],
         endIndex = _getColumnOrRowIndex10[1];
 
-    var positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
+    var positionColumn = (0, _utils4.getMousePositionHorizontalRelativeByElement)(event, tableCellOptimization, elementContentRects) === 'right' ? endIndex : startIndex;
 
     if (positionColumn !== insertColumnButtonIndex) {
       return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
     }
   }
 
-  if ((0, _utils3.isRowControlsButton)(element)) {
+  if ((0, _utils4.isRowControlsButton)(element)) {
     var _state3 = view.state,
         _dispatch4 = view.dispatch;
 
     var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),
         insertRowButtonIndex = _getPluginState4.insertRowButtonIndex;
 
-    var _getColumnOrRowIndex11 = (0, _utils3.getColumnOrRowIndex)(element),
+    var _getColumnOrRowIndex11 = (0, _utils4.getColumnOrRowIndex)(element),
         _getColumnOrRowIndex12 = (0, _slicedToArray2.default)(_getColumnOrRowIndex11, 2),
         _startIndex3 = _getColumnOrRowIndex12[0],
         _endIndex2 = _getColumnOrRowIndex12[1];
 
-    var positionRow = (0, _utils3.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
+    var positionRow = (0, _utils4.getMousePositionVerticalRelativeByElement)(event) === 'bottom' ? _endIndex2 : _startIndex3;
 
     if (positionRow !== insertRowButtonIndex) {
       return (0, _commands.showInsertRowButton)(positionRow)(_state3, _dispatch4);
@@ -304,8 +302,8 @@ var handleMouseMove = function handleMouseMove(view, event, tableCellOptimizatio
 
   var useMouseMoveOptimisation = tableCellOptimization && mouseMoveOptimization;
 
-  if (!(0, _utils3.isResizeHandleDecoration)(element) && (0, _utils3.isCell)(element)) {
-    var _positionColumn = (0, _utils3.getMousePositionHorizontalRelativeByElement)(event, useMouseMoveOptimisation, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
+  if (!(0, _utils4.isResizeHandleDecoration)(element) && (0, _utils4.isCell)(element)) {
+    var _positionColumn = (0, _utils4.getMousePositionHorizontalRelativeByElement)(event, useMouseMoveOptimisation, elementContentRects, _types.RESIZE_HANDLE_AREA_DECORATION_GAP);
 
     if (_positionColumn !== null) {
       var _state4 = view.state,
@@ -321,7 +319,7 @@ var handleMouseMove = function handleMouseMove(view, event, tableCellOptimizatio
       if (rect) {
         var columnEndIndexTarget = _positionColumn === 'left' ? rect.left : rect.right;
 
-        if (columnEndIndexTarget !== resizeHandleColumnIndex || !(0, _utils3.hasResizeHandler)({
+        if (columnEndIndexTarget !== resizeHandleColumnIndex || !(0, _utils4.hasResizeHandler)({
           target: element,
           columnEndIndexTarget: columnEndIndexTarget
         })) {
@@ -375,7 +373,7 @@ var handleCut = function handleCut(oldTr, oldState, newState) {
       var rect = (0, _utils.getSelectionRect)(cellSelection);
 
       if (rect) {
-        var _getSelectedCellInfo = (0, _utils3.getSelectedCellInfo)(tr.selection),
+        var _getSelectedCellInfo = (0, _utils4.getSelectedCellInfo)(tr.selection),
             verticalCells = _getSelectedCellInfo.verticalCells,
             horizontalCells = _getSelectedCellInfo.horizontalCells,
             totalCells = _getSelectedCellInfo.totalCells,
@@ -432,10 +430,9 @@ var whenTableInFocus = function whenTableInFocus(eventHandler, elementContentRec
 
     if (!hasTableNode || isDragging) {
       return false;
-    } // debounce event handler
-
+    }
 
-    return (0, _rafSchd.default)(eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects));
+    return eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects);
   };
 };
 

package/dist/cjs/plugins/table/handlers.js

@@ -23,9 +23,9 @@ var _tableResizing = require("./pm-plugins/table-resizing");
 
 var _steps = require("@atlaskit/adf-schema/steps");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 // #endregion
 var nextTableSorting = function nextTableSorting(tr, table) {
@@ -108,9 +108,8 @@ var updateCollapseHandler = function updateCollapseHandler(_ref3) {
     }
 
     var expandNodeType = schema.nodes.expand;
-    var isTableCollapsed = expandNodeType && !!(0, _prosemirrorUtils.findParentNodeOfType)(expandNodeType)(tr.selection); // check result of wrapping without applying it
-
-    var trCanBeCollapsed = (0, _collapse.collapseSelectedTable)(tr); // We're focused on a table + we're not inside an expand
+    var isTableCollapsed = expandNodeType && !!(0, _prosemirrorUtils.findParentNodeOfType)(expandNodeType)(tr.selection);
+    var trCanBeCollapsed = (0, _collapse.isTableCollapsible)(tr).tableIsCollapsible; // We're focused on a table + we're not inside an expand
 
     var canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
     !isTableCollapsed && !!trCanBeCollapsed;

package/dist/cjs/plugins/table/index.js

@@ -9,9 +9,11 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _utils = require("@atlaskit/editor-common/utils");
+
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 
-var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
@@ -29,6 +31,8 @@ var _createPluginConfig = require("./create-plugin-config");
 
 var _tableLocalId = require("./pm-plugins/table-local-id");
 
+var _safariDelayedDomSelectionSyncingWorkaround = require("./pm-plugins/safari-delayed-dom-selection-syncing-workaround");
+
 var _plugin = require("./pm-plugins/decorations/plugin");
 
 var _keymap = require("./pm-plugins/keymap");
@@ -55,7 +59,7 @@ var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertB
 
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 
-var _utils2 = require("./utils");
+var _utils3 = require("./utils");
 
 var _featureFlagsContext = require("../feature-flags-context");
 
@@ -80,7 +84,7 @@ var tablesPlugin = function tablesPlugin(options) {
       }];
     },
     pmPlugins: function pmPlugins() {
-      return [{
+      var plugins = [{
         name: 'table',
         plugin: function plugin(_ref) {
           var dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
@@ -150,7 +154,20 @@ var tablesPlugin = function tablesPlugin(options) {
           var dispatch = _ref6.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
-      }];
+      }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
+      // causing issues with table selections in Safari
+      // https://github.com/ProseMirror/prosemirror-view/commit/885258b80551ac87b81601d3ed25f552aeb22293
+
+      if (_utils.browser.safari) {
+        plugins.push({
+          name: 'tableSafariDelayedDomSelectionSyncingWorkaround',
+          plugin: function plugin() {
+            return (0, _safariDelayedDomSelectionSyncingWorkaround.createPlugin)();
+          }
+        });
+      }
+
+      return plugins;
     },
     contentComponent: function contentComponent(_ref7) {
       var editorView = _ref7.editorView,
@@ -234,7 +251,7 @@ var tablesPlugin = function tablesPlugin(options) {
             scrollableElement: popupsScrollableElement,
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled
-          }), (0, _utils2.isLayoutSupported)(state) && options && options.breakoutEnabled && /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+          }), (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled && /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -261,7 +278,7 @@ var tablesPlugin = function tablesPlugin(options) {
             return /*#__PURE__*/_react.default.createElement(_assets.IconTable, null);
           },
           action: function action(insert, state) {
-            var tr = insert((0, _utils.createTable)({
+            var tr = insert((0, _utils2.createTable)({
               schema: state.schema
             }));
             return (0, _analytics.addAnalytics)(state, tr, {

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -29,11 +29,13 @@ var _utils = require("@atlaskit/editor-tables/utils");
 
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils2 = require("@atlaskit/editor-common/utils");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _utils2 = require("../../../utils");
+var _utils3 = require("../../../utils");
 
 var _nodeWidth = require("../../../utils/node-width");
 
@@ -47,7 +49,7 @@ var _stickyHeaders = require("../pm-plugins/sticky-headers");
 
 var _tableResizing = require("../pm-plugins/table-resizing");
 
-var _utils3 = require("../pm-plugins/table-resizing/utils");
+var _utils4 = require("../pm-plugins/table-resizing/utils");
 
 var _dom2 = require("../pm-plugins/table-resizing/utils/dom");
 
@@ -55,7 +57,7 @@ var _types = require("../types");
 
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
 
-var _utils4 = require("../utils");
+var _utils5 = require("../utils");
 
 var _updateOverflowShadows = require("./update-overflow-shadows");
 
@@ -65,15 +67,15 @@ var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var isIE11 = _editorCommon.browser.ie_version === 11;
+var isIE11 = _utils2.browser.ie_version === 11;
 
 var NOOP = function NOOP() {
   return undefined;
@@ -133,7 +135,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
 
       var pos = _this.props.getPos();
 
-      if (!(0, _utils2.isValidPosition)(pos, _this.props.view.state)) {
+      if (!(0, _utils3.isValidPosition)(pos, _this.props.view.state)) {
         return;
       }
 
@@ -206,7 +208,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
 
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
-      var noOfColumnsChanged = (0, _utils4.tablesHaveDifferentNoOfColumns)(node, prevNode);
+      var noOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(node, prevNode);
 
       if ( // Breakout mode/layout changed
       layoutChanged || // We need to react if our parent changes
@@ -244,16 +246,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           dispatch = view.dispatch;
       var pos = getPos();
 
-      if (!(0, _utils2.isValidPosition)(pos, state)) {
+      if (!(0, _utils3.isValidPosition)(pos, state)) {
         return;
       }
 
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
 
-      if (_this.frameId && window) {
-        window.cancelAnimationFrame(_this.frameId);
-      }
+      _this.scaleTableDebounced.cancel();
 
       (0, _tableResizing.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
@@ -274,7 +274,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var node = getNode();
         var pos = getPos();
 
-        if (!(0, _utils2.isValidPosition)(pos, view.state)) {
+        if (!(0, _utils3.isValidPosition)(pos, view.state)) {
           return;
         }
 
@@ -297,7 +297,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
 
       var parentWidth = _this.getParentNodeWidth();
 
-      _this.frameId = _this.scaleTableDebounced(parentWidth);
+      _this.scaleTableDebounced(parentWidth);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateTableContainerWidth", function () {
       var _this$props5 = _this.props,
@@ -310,7 +310,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      var tableContainerWidth = (0, _editorCommon.calcTableWidth)(node.attrs.layout, containerWidth.width);
+      var tableContainerWidth = (0, _styles.calcTableWidth)(node.attrs.layout, containerWidth.width);
 
       if (_this.state.tableContainerWidth === tableContainerWidth) {
         return null;
@@ -336,7 +336,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           state = _this$props6.view.state;
       var pos = getPos();
 
-      if (!(0, _utils2.isValidPosition)(pos, state)) {
+      if (!(0, _utils3.isValidPosition)(pos, state)) {
         return;
       }
 
@@ -348,7 +348,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
-      return (0, _utils3.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
+      return (0, _utils4.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
@@ -411,7 +411,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          */
         window.addEventListener('resize', this.handleWindowResizeDebounced);
         this.updateTableContainerWidth();
-        this.frameId = this.handleTableResizingDebounced(this.props);
+        this.handleTableResizingDebounced();
       }
 
       var currentStickyState = _stickyHeaders.pluginKey.getState(this.props.view.state);
@@ -430,15 +430,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
 
       this.handleScrollDebounced.cancel();
+      this.scaleTableDebounced.cancel();
+      this.handleTableResizingDebounced.cancel();
+      this.handleAutoSizeDebounced.cancel();
+      this.handleWindowResizeDebounced.cancel();
 
       if (this.props.allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
 
-      if (this.frameId && window) {
-        window.cancelAnimationFrame(this.frameId);
-      }
-
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();
       }
@@ -467,7 +467,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (this.overflowShadowsObserver) {
           var _this$state$stickyHea;
 
-          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils4.containsHeaderRow)(view.state, getNode()));
+          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils5.containsHeaderRow)(view.state, getNode()));
         }
       }
 
@@ -481,13 +481,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // re-draw colgroup.
         var previousTable = this.node;
 
-        if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
+        if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view2 = this.props.view;
-          (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          (0, _utils4.insertColgroupFromNode)(this.table, currentTable);
           (0, _dom2.updateControls)(_view2.state);
         }
 
-        this.frameId = this.handleTableResizingDebounced(prevProps);
+        this.handleTableResizingDebounced();
       }
     }
   }, {
@@ -542,7 +542,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined; //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
 
       var tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
-      var hasHeaderRow = (0, _utils4.containsHeaderRow)(view.state, node);
+      var hasHeaderRow = (0, _utils5.containsHeaderRow)(view.state, node);
 
       var rowControls = /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.ROW_CONTROLS_WRAPPER
@@ -565,7 +565,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader
       }));
 
-      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _editorCommon.tableMarginSides;
+      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = tableOverflowShadowsOptimization ? (0, _memoizeOne.default)(function (visible) {
         return {
           visibility: visible ? 'visible' : 'hidden'

package/dist/cjs/plugins/table/nodeviews/table.js

@@ -45,6 +45,8 @@ var _tableResizing = require("../pm-plugins/table-resizing");
 
 var _utils = require("../pm-plugins/table-resizing/utils");
 
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 
 var _commands = require("../commands");
@@ -215,6 +217,14 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           return true;
         }
 
+        var tableMap = _tableMap.TableMap.get(node);
+
+        var nextTableMap = _tableMap.TableMap.get(nextNode);
+
+        if (tableMap.width !== nextTableMap.width) {
+          return true;
+        }
+
         return attrKeys.some(function (key) {
           return node.attrs[key] !== nextNode.attrs[key];
         });

package/dist/cjs/plugins/table/pm-plugins/main.js

@@ -15,7 +15,7 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils2 = require("@atlaskit/editor-common/utils");
 
 var _dom = require("../../../utils/dom");
 
@@ -31,7 +31,7 @@ var _transforms = require("../transforms");
 
 var _types = require("../types");
 
-var _utils2 = require("../utils");
+var _utils3 = require("../utils");
 
 var _analytics = require("../../analytics");
 
@@ -41,9 +41,9 @@ var _pluginFactory = require("./plugin-factory");
 
 var _tableCell = _interopRequireDefault(require("../nodeviews/tableCell"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var isBreakoutEnabled;
 var isDynamicTextSizingEnabled;
@@ -152,7 +152,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
           }
 
           if (pluginState.tableNode !== tableNode) {
-            (0, _utils2.updateResizeHandles)(tableRef);
+            (0, _utils3.updateResizeHandles)(tableRef);
           }
 
           if (pluginState.editorHasFocus && pluginState.tableRef) {
@@ -183,14 +183,14 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
 
         var decorationSet = _plugin.pluginKey.getState(state);
 
-        if ((0, _utils2.findControlsHoverDecoration)(decorationSet).length) {
+        if ((0, _utils3.findControlsHoverDecoration)(decorationSet).length) {
           (0, _commands.clearHoverSelection)()(state, dispatch);
         } // ED-6069: workaround for Chrome given a regression introduced in prosemirror-view@1.6.8
         // Returning true prevents that updateSelection() is getting called in the commit below:
         // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
 
 
-        if (_editorCommon.browser.chrome && event.target) {
+        if (_utils2.browser.chrome && event.target) {
           var targetClassList = event.target.classList;
 
           if (targetClassList.contains(_types.TableCssClassName.CONTROLS_BUTTON) || targetClassList.contains(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON)) {

package/dist/cjs/plugins/table/pm-plugins/plugin-factory.js

@@ -17,9 +17,9 @@ var _handlers = require("../handlers");
 
 var _reducer = _interopRequireDefault(require("../reducer"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var pluginKey = new _prosemirrorState.PluginKey('tablePlugin');
 exports.pluginKey = pluginKey;