@atlaskit/editor-plugin-table 2.2.0 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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");
@@ -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,
@@ -410,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

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

@@ -13,6 +13,7 @@ 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");
@@ -70,27 +71,34 @@ var TableResizer = function TableResizer(_ref) {
     } : 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]);
+  }, [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();
-    if (typeof pos !== 'number') {
-      return;
+    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);
     }
-    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);
 
     // Hide guidelines when resizing stops

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,7 +141,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
-            tableResizingPluginState: tableResizingPluginState,
+            isResizing: isResizing,
             getNode: _this3.getNode,
             containerWidth: containerWidth,
             contentDOM: forwardRef,

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/{table-add-width.js → table-width.js}

@@ -4,22 +4,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPlugin = void 0;
+exports.pluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _steps = require("@atlaskit/adf-schema/steps");
 var _prosemirrorTransform = require("prosemirror-transform");
+var _prosemirrorState = require("prosemirror-state");
 var _excluded = ["width"];
 /**
- * A plugin for scan the document, add width value to table's width attribute when necessary
- *
+ * A plugin for handle table custom widths
+ * Has login to scan the document, add width value to table's width attribute when necessary
+ * Also holds resizing state to hide / show table controls
  */
 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 createPlugin = function createPlugin(fullWidthEnabled) {
+var pluginKey = new _prosemirrorState.PluginKey('tableWidthPlugin');
+exports.pluginKey = pluginKey;
+var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
   return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          resizing: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta && meta.resizing !== pluginState.resizing) {
+          var newState = {
+            resizing: meta.resizing
+          };
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return pluginState;
+      }
+    },
     appendTransaction: function appendTransaction(transactions, _oldState, newState) {
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.

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

@@ -13,6 +13,7 @@ var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 var _tableResizing = require("./pm-plugins/table-resizing");
+var _tableWidth = require("./pm-plugins/table-width");
 var _types = require("./types");
 var _utils = require("./utils");
 var _utils2 = require("@atlaskit/editor-common/utils");
@@ -302,7 +303,11 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
       var tableObject = (0, _utils3.findTable)(state.selection);
       var pluginState = (0, _pluginFactory.getPluginState)(state);
       var resizeState = _tableResizing.pluginKey.getState(state);
-      if (tableObject && pluginState.editorHasFocus) {
+      var tableWidthState = _tableWidth.pluginKey.getState(state);
+
+      // We don't want to show floating toolbar while resizing the table
+      var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
+      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var _ref3 = getEditorFeatureFlags() || {},

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.2.0",
+	"version": "2.3.0",
 	"sideEffects": false
 }

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

@@ -11,7 +11,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
+import { pluginKey as tableWidthPluginKey, createPlugin as createTableWidthPlugin } from './pm-plugins/table-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -155,8 +155,13 @@ const tablesPlugin = (options, api) => {
           dispatch
         }) => createTableLocalIdPlugin(dispatch)
       }, {
-        name: 'tableAddWidth',
-        plugin: () => getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(options.fullWidthEnabled || false) : undefined
+        name: 'tableWidth',
+        plugin: ({
+          dispatch
+        }) => {
+          var _options$fullWidthEna;
+          return getBooleanFF('platform.editor.custom-table-width') ? createTableWidthPlugin(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: () => {
@@ -199,18 +204,22 @@ const tablesPlugin = (options, api) => {
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tablePluginState: pluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
         render: ({
           tableResizingPluginState: resizingPluginState,
           stickyHeadersState,
-          tablePluginState
+          tablePluginState,
+          tableWidthPluginState
         }) => {
           const {
             state
           } = editorView;
-          const isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+          const isResizing = isColumnResizing || isTableResizing;
           const {
             tableNode,
             tablePos,
@@ -240,7 +249,7 @@ const tablesPlugin = (options, api) => {
             stickyHeader: stickyHeader,
             editorAnalyticsAPI: editorAnalyticsAPI
           }) : null;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,
@@ -267,17 +276,17 @@ const tablesPlugin = (options, api) => {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth
-          }), /*#__PURE__*/React.createElement(FloatingContextualMenu, {
+          }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             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.createElement(FloatingDeleteButton, {
+          }), allowControls && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,

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

@@ -376,7 +376,7 @@ class TableComponent extends React.Component {
     const {
       view,
       getNode,
-      tableResizingPluginState,
+      isResizing,
       allowControls = true,
       isHeaderRowEnabled,
       ordering,
@@ -405,7 +405,6 @@ class TableComponent extends React.Component {
       tableOverflowShadowsOptimization
     } = this.props.getEditorFeatureFlags();
     const tableRef = this.table || undefined;
-    const isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
 
     //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components

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

@@ -3,6 +3,7 @@ import rafSchd from 'raf-schd';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 import { TABLE_SNAP_GAP, TABLE_HIGHLIGHT_GAP } from '../ui/consts';
@@ -53,9 +54,18 @@ export const TableResizer = ({
     x: defaultGuidelineWidths
   } : undefined, [snappingEnabled]);
   const handleResizeStart = useCallback(() => {
+    const {
+      dispatch,
+      state: {
+        tr
+      }
+    } = editorView;
+    dispatch(tr.setMeta(tableWidthPluginKey, {
+      resizing: true
+    }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
     return width;
-  }, [width, displayGuideline]);
+  }, [width, displayGuideline, editorView]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const {
@@ -63,20 +73,22 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const pos = getPos();
-    if (typeof pos !== 'number') {
-      return;
-    }
-    let tr = state.tr.setNodeMarkup(pos, undefined, {
-      ...node.attrs,
-      width: newWidth
+    let tr = state.tr.setMeta(tableWidthPluginKey, {
+      resizing: false
     });
-    const newNode = tr.doc.nodeAt(pos);
-    tr = scaleTable(tableRef, {
-      node: newNode,
-      prevNode: node,
-      start: pos + 1,
-      parentWidth: newWidth
-    }, editorView.domAtPos.bind(editorView))(tr);
+    if (typeof pos === 'number') {
+      tr = tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        width: newWidth
+      });
+      const newNode = tr.doc.nodeAt(pos);
+      tr = scaleTable(tableRef, {
+        node: newNode,
+        prevNode: node,
+        start: pos + 1,
+        parentWidth: newWidth
+      }, editorView.domAtPos.bind(editorView))(tr);
+    }
     dispatch(tr);
 
     // Hide guidelines when resizing stops

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

@@ -7,6 +7,7 @@ import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
@@ -83,6 +84,7 @@ export default class TableView extends ReactNodeView {
       plugins: {
         pluginState: pluginKey,
         tableResizingPluginState: tableResizingPluginKey,
+        tableWidthPluginState: tableWidthPluginKey,
         widthPlugin: fakePluginKey,
         mediaState: fakeMediaPluginKey
       },
@@ -90,12 +92,15 @@ export default class TableView extends ReactNodeView {
       render: pluginStates => {
         const {
           tableResizingPluginState,
+          tableWidthPluginState,
           pluginState,
           // containerWidth,
           mediaState
         } = pluginStates;
-        const tableActive = props.getPos() === pluginState.tablePos;
         const containerWidth = props.getEditorContainerWidth();
+        const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+        const isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
+        const tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
         return /*#__PURE__*/React.createElement(TableComponent, {
           view: props.view,
           allowColumnResizing: props.allowColumnResizing,
@@ -108,7 +113,7 @@ export default class TableView extends ReactNodeView {
           isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
           tableActive: tableActive,
           ordering: pluginState.ordering,
-          tableResizingPluginState: tableResizingPluginState,
+          isResizing: isResizing,
           getNode: this.getNode,
           containerWidth: containerWidth,
           contentDOM: forwardRef,

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

@@ -6,11 +6,20 @@ import { PluginKey
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
 export const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);
-export const handleDocOrSelectionChanged = (tr, decorationSet, oldState) => {
-  if (tr.docChanged || tr.selection instanceof CellSelection) {
+export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+  const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  const changedResizing = isResizing !== wasResizing;
+
+  // Remove column controls when resizing
+  if (isResizing) {
+    return DecorationSet.empty;
+  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet,
       tr
@@ -30,15 +39,15 @@ export const createPlugin = () => {
   return new SafePlugin({
     state: {
       init: () => DecorationSet.empty,
-      apply: (tr, decorationSet, oldState) => {
+      apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
-          return handleDocOrSelectionChanged(tr, pluginState, oldState);
+          return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }
         return pluginState;
       }