@atlaskit/editor-plugin-table 2.2.0 → 2.3.0

package/dist/es2019/plugins/table/pm-plugins/{table-add-width.js → table-width.js}

@@ -1,12 +1,34 @@
 /**
- * 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
  */
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReplaceStep } from 'prosemirror-transform';
-const createPlugin = fullWidthEnabled => new SafePlugin({
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('tableWidthPlugin');
+const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
+  key: pluginKey,
+  state: {
+    init() {
+      return {
+        resizing: false
+      };
+    },
+    apply(tr, pluginState) {
+      const meta = tr.getMeta(pluginKey);
+      if (meta && meta.resizing !== pluginState.resizing) {
+        const newState = {
+          resizing: meta.resizing
+        };
+        dispatch(pluginKey, newState);
+        return newState;
+      }
+      return pluginState;
+    }
+  },
   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/es2019/plugins/table/toolbar.js

@@ -7,6 +7,7 @@ import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescend
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { TableCssClassName } from './types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 import { isReferencedSource, getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
@@ -294,7 +295,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
-  if (tableObject && pluginState.editorHasFocus) {
+  const tableWidthState = tableWidthPluginKey.getState(state);
+
+  // We don't want to show floating toolbar while resizing the table
+  const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
+  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     const {

package/dist/es2019/version.json

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

package/dist/esm/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';
@@ -165,9 +165,11 @@ var tablesPlugin = function tablesPlugin(options, api) {
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
-        name: 'tableAddWidth',
-        plugin: function plugin() {
-          return getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(options.fullWidthEnabled || false) : undefined;
+        name: 'tableWidth',
+        plugin: function plugin(_ref8) {
+          var _options$fullWidthEna;
+          var dispatch = _ref8.dispatch;
+          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',
@@ -197,12 +199,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.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -210,28 +212,32 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tablePluginState: pluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        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 ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = getBooleanFF('platform.editor.custom-table-width') ? null : isLayoutSupported(state) && options && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -245,7 +251,7 @@ var tablesPlugin = function 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,
@@ -272,17 +278,17 @@ var tablesPlugin = function 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,
@@ -297,8 +303,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.table),

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

@@ -378,7 +378,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,
@@ -404,7 +404,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/esm/plugins/table/nodeviews/TableResizer.js

@@ -7,6 +7,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';
@@ -60,27 +61,34 @@ export var TableResizer = function TableResizer(_ref) {
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = useCallback(function () {
+    var dispatch = editorView.dispatch,
+      tr = editorView.state.tr;
+    dispatch(tr.setMeta(tableWidthPluginKey, {
+      resizing: true
+    }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
     return width;
-  }, [width, displayGuideline]);
+  }, [width, displayGuideline, editorView]);
   var handleResizeStop = 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(tableWidthPluginKey, {
+      resizing: false
+    });
+    if (typeof pos === 'number') {
+      tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        width: newWidth
+      }));
+      var newNode = tr.doc.nodeAt(pos);
+      tr = 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 = 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/esm/plugins/table/nodeviews/table.js

@@ -18,6 +18,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';
@@ -107,16 +108,20 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         plugins: {
           pluginState: pluginKey,
           tableResizingPluginState: tableResizingPluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           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.createElement(TableComponent, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,
@@ -129,7 +134,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/esm/plugins/table/pm-plugins/decorations/plugin.js

@@ -6,13 +6,22 @@ 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 var pluginKey = new PluginKey('tableDecorationsPlugin');
 export var getDecorations = function getDecorations(state) {
   return pluginKey.getState(state);
 };
-export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState) {
-  if (tr.docChanged || tr.selection instanceof CellSelection) {
+export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState, newState) {
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  var isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+  var wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  var 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: decorationSet,
       tr: tr
@@ -34,15 +43,15 @@ export var createPlugin = function createPlugin() {
       init: function init() {
         return DecorationSet.empty;
       },
-      apply: function apply(tr, decorationSet, oldState) {
+      apply: function apply(tr, decorationSet, oldState, newState) {
         var pluginState = decorationSet;
         var 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;
       }

package/dist/esm/plugins/table/pm-plugins/{table-add-width.js → table-width.js}

@@ -4,15 +4,37 @@ var _excluded = ["width"];
 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) { _defineProperty(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; }
 /**
- * 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
  */
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReplaceStep } from 'prosemirror-transform';
-var createPlugin = function createPlugin(fullWidthEnabled) {
+import { PluginKey } from 'prosemirror-state';
+export var pluginKey = new PluginKey('tableWidthPlugin');
+var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
   return new 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/esm/plugins/table/toolbar.js

@@ -7,6 +7,7 @@ import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescend
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { TableCssClassName } from './types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 import { isReferencedSource, getChildrenInfo as _getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
@@ -293,7 +294,11 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       var tableObject = findTable(state.selection);
       var pluginState = getPluginState(state);
       var resizeState = tableResizingPluginKey.getState(state);
-      if (tableObject && pluginState.editorHasFocus) {
+      var tableWidthState = tableWidthPluginKey.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/esm/version.json

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

package/dist/types/plugins/table/nodeviews/TableComponent.d.ts

@@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { ColumnResizingPluginState, ShadowEvent, PluginInjectionAPI } from '../types';
+import { PluginInjectionAPI, ShadowEvent } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import type { TableOptions } from './types';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
@@ -23,7 +23,7 @@ export interface ComponentProps {
     isMediaFullscreen?: boolean;
     tableActive: boolean;
     ordering: TableColumnOrdering;
-    tableResizingPluginState?: ColumnResizingPluginState;
+    isResizing?: boolean;
     getEditorFeatureFlags: GetEditorFeatureFlags;
     pluginInjectionApi?: PluginInjectionAPI;
 }

package/dist/types/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -3,5 +3,5 @@ import { EditorState, PluginKey, Transaction, ReadonlyTransaction } from 'prosem
 import { DecorationSet } from 'prosemirror-view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
-export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState) => DecorationSet;
+export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
 export declare const createPlugin: () => SafePlugin<any>;

package/dist/types/plugins/table/pm-plugins/table-width.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+type TableWidthPluginState = {
+    resizing: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthPluginState>;
+declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<{
+    resizing: boolean;
+}>;
+export { createPlugin };

package/dist/types-ts4.5/plugins/table/nodeviews/TableComponent.d.ts

@@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { ColumnResizingPluginState, ShadowEvent, PluginInjectionAPI } from '../types';
+import { PluginInjectionAPI, ShadowEvent } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import type { TableOptions } from './types';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
@@ -23,7 +23,7 @@ export interface ComponentProps {
     isMediaFullscreen?: boolean;
     tableActive: boolean;
     ordering: TableColumnOrdering;
-    tableResizingPluginState?: ColumnResizingPluginState;
+    isResizing?: boolean;
     getEditorFeatureFlags: GetEditorFeatureFlags;
     pluginInjectionApi?: PluginInjectionAPI;
 }

package/dist/types-ts4.5/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -3,5 +3,5 @@ import { EditorState, PluginKey, Transaction, ReadonlyTransaction } from 'prosem
 import { DecorationSet } from 'prosemirror-view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
-export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState) => DecorationSet;
+export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
 export declare const createPlugin: () => SafePlugin<any>;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-width.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+type TableWidthPluginState = {
+    resizing: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthPluginState>;
+declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<{
+    resizing: boolean;
+}>;
+export { createPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.2.0",
-    "@atlaskit/editor-common": "^74.22.0",
+    "@atlaskit/editor-common": "^74.23.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",
@@ -65,7 +65,7 @@
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
     "@atlaskit/editor-plugin-guideline": "^0.3.4",
-    "@atlaskit/editor-plugin-hyperlink": "^0.1.0",
+    "@atlaskit/editor-plugin-hyperlink": "^0.2.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/visual-regression": "*",