@atlaskit/editor-plugin-table 2.1.7 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-table
 
+## 2.3.0
+
+### Minor Changes
+
+- [`464c9736dff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/464c9736dff) - [ux] [ED-17626] Remove table controls during table width resizing
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.2.0
+
+### Minor Changes
+
+- [`464745a92e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/464745a92e6) - [ux] Updated the Editor Table plugin to use the new guidelines plugin when custom-table-widths FF is enabled
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.7
 
 ### Patch Changes

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

@@ -16,6 +16,7 @@ var _steps = require("@atlaskit/adf-schema/steps");
 var _nodes = require("./utils/nodes");
 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 = 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; } // #region Imports
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 // #endregion
 var nextTableSorting = function nextTableSorting(tr, table) {
   var tableSortStep = tr.steps.find(function (step) {

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

@@ -18,7 +18,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _icons = require("@atlaskit/editor-common/icons");
 var _createPluginConfig = require("./create-plugin-config");
 var _tableLocalId = require("./pm-plugins/table-local-id");
-var _tableAddWidth = require("./pm-plugins/table-add-width");
+var _tableWidth = require("./pm-plugins/table-width");
 var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
 var _plugin = require("./pm-plugins/decorations/plugin");
 var _keymap = require("./pm-plugins/keymap");
@@ -103,7 +103,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             breakoutEnabled = _ref2.breakoutEnabled,
             tableOptions = _ref2.tableOptions,
             getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',
@@ -172,9 +172,11 @@ var tablesPlugin = function tablesPlugin(options, api) {
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
-        name: 'tableAddWidth',
-        plugin: function plugin() {
-          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && options ? (0, _tableAddWidth.createPlugin)(options.fullWidthEnabled || false) : undefined;
+        name: 'tableWidth',
+        plugin: function plugin(_ref8) {
+          var _options$fullWidthEna;
+          var dispatch = _ref8.dispatch;
+          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _tableWidth.createPlugin)(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
@@ -204,12 +206,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        popupsMountPoint = _ref8.popupsMountPoint,
-        popupsBoundariesElement = _ref8.popupsBoundariesElement,
-        popupsScrollableElement = _ref8.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        popupsMountPoint = _ref9.popupsMountPoint,
+        popupsBoundariesElement = _ref9.popupsBoundariesElement,
+        popupsScrollableElement = _ref9.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -217,28 +219,32 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }, /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
         plugins: {
           tablePluginState: _pluginKey.pluginKey,
+          tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
           stickyHeadersState: _stickyHeaders.pluginKey
         },
-        render: function render(_ref9) {
-          var resizingPluginState = _ref9.tableResizingPluginState,
-            stickyHeadersState = _ref9.stickyHeadersState,
-            tablePluginState = _ref9.tablePluginState;
+        render: function render(_ref10) {
+          var resizingPluginState = _ref10.tableResizingPluginState,
+            stickyHeadersState = _ref10.stickyHeadersState,
+            tablePluginState = _ref10.tablePluginState,
+            tableWidthPluginState = _ref10.tableWidthPluginState;
           var state = editorView.state;
-          var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref10 = tablePluginState,
-            tableNode = _ref10.tableNode,
-            tablePos = _ref10.tablePos,
-            targetCellPosition = _ref10.targetCellPosition,
-            isContextualMenuOpen = _ref10.isContextualMenuOpen,
-            layout = _ref10.layout,
-            tableRef = _ref10.tableRef,
-            pluginConfig = _ref10.pluginConfig,
-            insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref10.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
-            tableWrapperTarget = _ref10.tableWrapperTarget;
+          var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+          var isResizing = isColumnResizing || isTableResizing;
+          var _ref11 = tablePluginState,
+            tableNode = _ref11.tableNode,
+            tablePos = _ref11.tablePos,
+            targetCellPosition = _ref11.targetCellPosition,
+            isContextualMenuOpen = _ref11.isContextualMenuOpen,
+            layout = _ref11.layout,
+            tableRef = _ref11.tableRef,
+            pluginConfig = _ref11.pluginConfig,
+            insertColumnButtonIndex = _ref11.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref11.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref11.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref11.isHeaderRowEnabled,
+            tableWrapperTarget = _ref11.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? null : (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -252,7 +258,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             stickyHeader: stickyHeader,
             editorAnalyticsAPI: editorAnalyticsAPI
           }) : null;
-          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,
@@ -279,17 +285,17 @@ var tablesPlugin = function tablesPlugin(options, api) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth
-          }), /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
+          }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
             targetCellPosition: targetCellPosition,
-            isOpen: Boolean(isContextualMenuOpen),
+            isOpen: Boolean(isContextualMenuOpen) && !isResizing,
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
-          }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
+          }), allowControls && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,
@@ -304,8 +310,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

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

@@ -384,7 +384,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props8 = this.props,
         view = _this$props8.view,
         getNode = _this$props8.getNode,
-        tableResizingPluginState = _this$props8.tableResizingPluginState,
+        isResizing = _this$props8.isResizing,
         _this$props8$allowCon = _this$props8.allowControls,
         allowControls = _this$props8$allowCon === void 0 ? true : _this$props8$allowCon,
         isHeaderRowEnabled = _this$props8.isHeaderRowEnabled,
@@ -393,7 +393,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableActive = _this$props8.tableActive,
         containerWidth = _this$props8.containerWidth,
         options = _this$props8.options,
-        getPos = _this$props8.getPos;
+        getPos = _this$props8.getPos,
+        pluginInjectionApi = _this$props8.pluginInjectionApi;
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
         showBeforeShadow = _this$state.showBeforeShadow,
@@ -409,7 +410,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
         tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
       var tableRef = this.table || undefined;
-      var isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
       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
@@ -453,7 +453,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerWidth: containerWidth,
         isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.isFullWidthModeEnabled,
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
-        isNested: isNested
+        isNested: isNested,
+        pluginInjectionApi: pluginInjectionApi
       }, stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -14,9 +14,7 @@ var _TableResizer = require("./TableResizer");
 var _utils = require("../pm-plugins/table-resizing/utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var getMarginLeft = function getMarginLeft(_ref) {
-  var lineLength = _ref.lineLength,
-    tableWidth = _ref.tableWidth;
+var getMarginLeft = function getMarginLeft(lineLength, tableWidth) {
   var marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
     var containerWidth = tableWidth;
@@ -26,11 +24,11 @@ var getMarginLeft = function getMarginLeft(_ref) {
   }
   return marginLeft;
 };
-var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var className = _ref2.className,
-    style = _ref2.style,
-    node = _ref2.node,
-    children = _ref2.children;
+var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    node = _ref.node,
+    children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: style,
@@ -41,42 +39,47 @@ var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   }, children);
 });
 exports.InnerContainer = InnerContainer;
-var ResizableTableContainer = function ResizableTableContainer(_ref3) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    node = _ref3.node,
-    lineLength = _ref3.lineLength,
-    containerWidth = _ref3.containerWidth,
-    editorView = _ref3.editorView,
-    getPos = _ref3.getPos,
-    tableRef = _ref3.tableRef;
+var ResizableTableContainer = function ResizableTableContainer(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    node = _ref2.node,
+    lineLength = _ref2.lineLength,
+    containerWidth = _ref2.containerWidth,
+    editorView = _ref2.editorView,
+    getPos = _ref2.getPos,
+    tableRef = _ref2.tableRef,
+    pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = (0, _react.useRef)(null);
   var innerContainerRef = (0, _react.useRef)(null);
+  var marginLeftRef = (0, _react.useRef)(0);
   var updateWidth = (0, _react.useCallback)(function (width) {
     if (!containerRef.current || !innerContainerRef.current) {
       return;
     }
-    var marginLeft = getMarginLeft({
-      lineLength: lineLength,
-      tableWidth: width
-    });
-    if (marginLeft) {
-      containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    var marginLeft = getMarginLeft(lineLength, width);
+    if (marginLeftRef.current !== marginLeft) {
+      marginLeftRef.current = marginLeft;
+      if (Number.isFinite(marginLeft)) {
+        containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+      }
     }
   }, [lineLength]);
+  var displayGuideline = (0, _react.useCallback)(function (guidelines) {
+    var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+    return (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.guideline) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.actions) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.displayGuideline(editorView)({
+      guidelines: guidelines
+    })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
+  }, [pluginInjectionApi, editorView]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  var marginLeft = getMarginLeft({
-    lineLength: lineLength,
-    tableWidth: width
-  });
+  marginLeftRef.current = getMarginLeft(lineLength, width);
   var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginLeft: marginLeft,
+      marginLeft: marginLeftRef.current,
       width: width
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
@@ -88,7 +91,8 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     editorView: editorView,
     getPos: getPos,
     node: node,
-    tableRef: tableRef
+    tableRef: tableRef,
+    displayGuideline: displayGuideline
   }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
@@ -96,19 +100,20 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
   }, children)));
 };
 exports.ResizableTableContainer = ResizableTableContainer;
-var TableContainer = function TableContainer(_ref4) {
-  var children = _ref4.children,
-    node = _ref4.node,
-    className = _ref4.className,
-    _ref4$containerWidth = _ref4.containerWidth,
-    lineLength = _ref4$containerWidth.lineLength,
-    editorWidth = _ref4$containerWidth.width,
-    isFullWidthModeEnabled = _ref4.isFullWidthModeEnabled,
-    isBreakoutEnabled = _ref4.isBreakoutEnabled,
-    editorView = _ref4.editorView,
-    getPos = _ref4.getPos,
-    tableRef = _ref4.tableRef,
-    isNested = _ref4.isNested;
+var TableContainer = function TableContainer(_ref3) {
+  var children = _ref3.children,
+    node = _ref3.node,
+    className = _ref3.className,
+    _ref3$containerWidth = _ref3.containerWidth,
+    lineLength = _ref3$containerWidth.lineLength,
+    editorWidth = _ref3$containerWidth.width,
+    isFullWidthModeEnabled = _ref3.isFullWidthModeEnabled,
+    isBreakoutEnabled = _ref3.isBreakoutEnabled,
+    editorView = _ref3.editorView,
+    getPos = _ref3.getPos,
+    tableRef = _ref3.tableRef,
+    isNested = _ref3.isNested,
+    pluginInjectionApi = _ref3.pluginInjectionApi;
   if ((isFullWidthModeEnabled || isBreakoutEnabled) && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -117,7 +122,8 @@ var TableContainer = function TableContainer(_ref4) {
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,
-      tableRef: tableRef
+      tableRef: tableRef,
+      pluginInjectionApi: pluginInjectionApi
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';
@@ -126,10 +132,7 @@ var TableContainer = function TableContainer(_ref4) {
     className: className,
     style: {
       width: tableWidth,
-      marginLeft: getMarginLeft({
-        lineLength: lineLength,
-        tableWidth: tableWidth
-      })
+      marginLeft: getMarginLeft(lineLength, tableWidth)
     }
   }, children);
 };

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

@@ -1,15 +1,24 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableResizer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _guideline = require("@atlaskit/editor-common/guideline");
 var _utils = require("../pm-plugins/table-resizing/utils");
+var _tableWidth = require("../pm-plugins/table-width");
+var _guidelines = require("../utils/guidelines");
+var _snapping = require("../utils/snapping");
+var _consts = require("../ui/consts");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 = 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 handles = {
@@ -24,7 +33,8 @@ var TableResizer = function TableResizer(_ref) {
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
-    tableRef = _ref.tableRef;
+    tableRef = _ref.tableRef,
+    displayGuideline = _ref.displayGuideline;
   var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
@@ -42,15 +52,67 @@ var TableResizer = function TableResizer(_ref) {
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  var currentGap = (0, _react.useRef)(0);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    snappingEnabled = _useState2[0],
+    setSnappingEnabled = _useState2[1];
+  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
+    var gap = _ref2.gap,
+      keys = _ref2.keys;
+    if (gap !== currentGap.current) {
+      currentGap.current = gap;
+      displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, _guidelines.defaultGuidelines));
+    }
+  }, [displayGuideline]);
+  var guidelineSnaps = (0, _react.useMemo)(function () {
+    return snappingEnabled ? {
+      x: _guidelines.defaultGuidelineWidths
+    } : undefined;
+  }, [snappingEnabled]);
+  var handleResizeStart = (0, _react.useCallback)(function () {
+    var dispatch = editorView.dispatch,
+      tr = editorView.state.tr;
+    dispatch(tr.setMeta(_tableWidth.pluginKey, {
+      resizing: true
+    }));
+    setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
+    return width;
+  }, [width, displayGuideline, editorView]);
+  var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var pos = getPos();
+    var tr = state.tr.setMeta(_tableWidth.pluginKey, {
+      resizing: false
+    });
+    if (typeof pos === 'number') {
+      tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        width: newWidth
+      }));
+      var newNode = tr.doc.nodeAt(pos);
+      tr = (0, _utils.scaleTable)(tableRef, {
+        node: newNode,
+        prevNode: node,
+        start: pos + 1,
+        parentWidth: newWidth
+      }, editorView.domAtPos.bind(editorView))(tr);
+    }
+    dispatch(tr);
+
+    // Hide guidelines when resizing stops
+    displayGuideline([]);
+    updateWidth(newWidth);
+    return newWidth;
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline]);
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
-    handleResizeStart: function handleResizeStart() {
-      return width;
-    },
+    handleResizeStart: handleResizeStart,
     handleResize: (0, _rafSchd.default)(function (originalState, delta) {
       var newWidth = originalState.width + delta.width;
       var pos = getPos();
@@ -63,34 +125,16 @@ var TableResizer = function TableResizer(_ref) {
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView));
+      updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
       updateWidth(newWidth);
       return newWidth;
     }),
-    handleResizeStop: function handleResizeStop(originalState, delta) {
-      var newWidth = originalState.width + delta.width;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        width: newWidth
-      }));
-      var newNode = tr.doc.nodeAt(pos);
-      tr = (0, _utils.scaleTable)(tableRef, {
-        node: newNode,
-        prevNode: node,
-        start: pos + 1,
-        parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView))(tr);
-      dispatch(tr);
-      updateWidth(newWidth);
-      return newWidth;
-    },
+    handleResizeStop: handleResizeStop,
     resizeRatio: 2,
     minWidth: minColumnWidth,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    snapGap: _consts.TABLE_SNAP_GAP,
+    snap: guidelineSnaps
   }, children);
 };
 exports.TableResizer = TableResizer;

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

@@ -23,6 +23,7 @@ var _createPluginConfig = require("../create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _tableResizing = require("../pm-plugins/table-resizing");
+var _tableWidth = require("../pm-plugins/table-width");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
@@ -114,16 +115,20 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         plugins: {
           pluginState: _pluginKey.pluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
+          tableWidthPluginState: _tableWidth.pluginKey,
           widthPlugin: fakePluginKey,
           mediaState: fakeMediaPluginKey
         },
         editorView: props.view,
         render: function render(pluginStates) {
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
+            tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
             mediaState = pluginStates.mediaState;
-          var tableActive = props.getPos() === pluginState.tablePos;
           var containerWidth = props.getEditorContainerWidth();
+          var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+          var isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
+          var tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
           return /*#__PURE__*/_react.default.createElement(_TableComponent.default, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,
@@ -136,11 +141,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
-            tableResizingPluginState: tableResizingPluginState,
+            isResizing: isResizing,
             getNode: _this3.getNode,
             containerWidth: containerWidth,
             contentDOM: forwardRef,
-            getEditorFeatureFlags: props.getEditorFeatureFlags
+            getEditorFeatureFlags: props.getEditorFeatureFlags,
+            pluginInjectionApi: props.pluginInjectionApi
           });
         }
       });
@@ -209,7 +215,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(_reactNodeView.default);
 exports.default = TableView;
-var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) {
+var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig;
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
@@ -228,7 +234,8 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
-    hasIntlContext: hasIntlContext
+    hasIntlContext: hasIntlContext,
+    pluginInjectionApi: pluginInjectionApi
   }).init();
 };
 exports.createTableView = createTableView;

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

@@ -9,6 +9,7 @@ var _prosemirrorState = require("prosemirror-state");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _prosemirrorView = require("prosemirror-view");
 var _pluginKey = require("../plugin-key");
+var _tableWidth = require("../table-width");
 var _utils = require("./utils");
 var pluginKey = new _prosemirrorState.PluginKey('tableDecorationsPlugin');
 exports.pluginKey = pluginKey;
@@ -16,8 +17,16 @@ var getDecorations = function getDecorations(state) {
   return pluginKey.getState(state);
 };
 exports.getDecorations = getDecorations;
-var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState) {
-  if (tr.docChanged || tr.selection instanceof _cellSelection.CellSelection) {
+var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState, newState) {
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  var isResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+  var wasResizing = (_tableWidthPluginKey$2 = _tableWidth.pluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  var changedResizing = isResizing !== wasResizing;
+
+  // Remove column controls when resizing
+  if (isResizing) {
+    return _prosemirrorView.DecorationSet.empty;
+  } else if (tr.docChanged || tr.selection instanceof _cellSelection.CellSelection || changedResizing) {
     return (0, _utils.buildColumnControlsDecorations)({
       decorationSet: decorationSet,
       tr: tr
@@ -40,15 +49,15 @@ var createPlugin = function createPlugin() {
       init: function init() {
         return _prosemirrorView.DecorationSet.empty;
       },
-      apply: function apply(tr, decorationSet, oldState) {
+      apply: function apply(tr, decorationSet, oldState, newState) {
         var pluginState = decorationSet;
         var meta = tr.getMeta(_pluginKey.pluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(_tableWidth.pluginKey)) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
-          return handleDocOrSelectionChanged(tr, pluginState, oldState);
+          return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }
         return pluginState;
       }

package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -9,6 +9,8 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../../types");
 var _decoration = require("../../../utils/decoration");
 var _composeDecorations = require("./compose-decorations");
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 var isColumnSelected = function isColumnSelected(tr) {
   return tr.selection instanceof _cellSelection.CellSelection && tr.selection.isColSelection();
 };