@atlaskit/editor-plugin-table 7.11.3 → 7.11.4

package/dist/cjs/commands/column-resize.js

@@ -210,6 +210,10 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
       layout: originalTable.attrs.layout,
       getEditorContainerWidth: getEditorContainerWidth
     });
+    var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+    if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+      isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
+    }
     var initialResizeState = (0, _utils3.getResizeState)({
       minWidth: _styles.tableCellMinWidth,
       maxSize: maxSize,
@@ -217,7 +221,7 @@ var changeColumnWidthByStep = exports.changeColumnWidthByStep = function changeC
       tableRef: dom,
       start: tableStartPosition,
       domAtPos: domAtPos,
-      isTableScalingEnabled: isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
     });
     (0, _utils3.updateControls)()(state);
     var selectionRect = (0, _utils.getSelectionRect)(state.selection);

package/dist/cjs/nodeviews/TableComponent.js

@@ -355,7 +355,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
         }
       }
-      if (isTableScalingEnabled) {
+      if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+        this.handleColgroupUpdates(true);
+      }
+      if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
         this.handleColgroupUpdates(true);
       }
       if (allowColumnResizing && this.wrapper && !isIE11) {
@@ -479,8 +482,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var wasTableResized = (0, _colgroup.hasTableBeenResized)(this.node);
         var isTableResized = (0, _colgroup.hasTableBeenResized)(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
-        var shouldScale = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged;
-        if (force || !isResizing && shouldScale) {
+        var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
+        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged;
+        if (force || !isResizing && shouldUpdateColgroup) {
+          var _this$props$options, _this$props$options2;
           var resizeState = (0, _utils4.getResizeState)({
             minWidth: _utils4.COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -490,10 +495,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             domAtPos: view.domAtPos,
             isTableScalingEnabled: true
           });
+          var shouldScaleOnColgroupUpdate = false;
+          if ((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+            shouldScaleOnColgroupUpdate = true;
+          }
+          if ((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && tableNode.attrs.displayMode !== 'fixed') {
+            shouldScaleOnColgroupUpdate = true;
+          }
 
           // Request animation frame required for Firefox
           requestAnimationFrame(function () {
-            (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, true);
+            (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate);
           });
         }
       }
@@ -521,7 +533,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
       }
-      if (isTableScalingEnabled) {
+      var shouldScale = false;
+      var shouldHandleColgroupUpdates = false;
+      if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+        shouldScale = true;
+        shouldHandleColgroupUpdates = true;
+      }
+      if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
+        shouldScale = true;
+        shouldHandleColgroupUpdates = true;
+      }
+      if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== this.node.attrs.displayMode) {
+        shouldHandleColgroupUpdates = true;
+      }
+      if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
@@ -568,7 +593,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           if (shouldRecreateResizeCols) {
             var start = getPos() || 0;
             var depth = _view.state.doc.resolve(start).depth;
-            var shouldScale = depth === 0 && isTableScalingEnabled;
+            shouldScale = depth === 0 && shouldScale;
             (0, _utils4.insertColgroupFromNode)(this.table, currentTable, shouldScale);
           }
           (0, _dom.updateControls)()(_view.state);

package/dist/cjs/nodeviews/table.js

@@ -90,13 +90,24 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     value: function getContentDOM() {
       var rendered = _model.DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
       if (rendered.dom) {
-        var _this$options;
         this.table = rendered.dom;
-        // Preserve Table Width cannot have inline width set on the table
-        if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
-          var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
-          if (tableInlineWidth) {
-            handleInlineTableWidth(this.table, tableInlineWidth);
+        if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+          var _this$options;
+          if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled)) {
+            // Preserve Table Width cannot have inline width set on the table
+            var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+            if (tableInlineWidth) {
+              handleInlineTableWidth(this.table, tableInlineWidth);
+            }
+          }
+        } else {
+          var _this$options2;
+          if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled) || this.node.attrs.displayMode === 'fixed') {
+            // Preserve Table Width cannot have inline width set on the table
+            var _tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+            if (_tableInlineWidth) {
+              handleInlineTableWidth(this.table, _tableInlineWidth);
+            }
           }
         }
       }
@@ -106,7 +117,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
     key: "setDomAttrs",
     value: function setDomAttrs(node) {
       var _this2 = this,
-        _tableWidthPluginKey$;
+        _this$options3;
       if (!this.table) {
         return;
       }
@@ -115,11 +126,15 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         _this2.table.setAttribute(attr, attrs[attr]);
       });
 
-      // handle inline style when table been resized
-      var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-      var isTableResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
-      if (!isTableResizing && tableInlineWidth) {
-        handleInlineTableWidth(this.table, tableInlineWidth);
+      // Preserve Table Width cannot have inline width set on the table
+      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled)) {
+        var _tableWidthPluginKey$;
+        // handle inline style when table been resized
+        var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+        var isTableResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+        if (!isTableResizing && tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
     }
   }, {
@@ -172,6 +187,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         },
         editorView: props.view,
         render: function render(pluginStates) {
+          var _props$options;
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
             tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
@@ -203,7 +219,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
-            isTableScalingEnabled: pluginState.isTableScalingEnabled,
+            isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled sams as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
+            ,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,
@@ -302,7 +319,7 @@ var createTableView = exports.createTableView = function createTableView(node, v
       wasFullWidthModeEnabled: wasFullWidthModeEnabled,
       isTableResizingEnabled: isTableResizingEnabled,
       isDragAndDropEnabled: isDragAndDropEnabled,
-      isTableScalingEnabled: isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabled // same as options.isTableScalingEnabled
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/cjs/plugin.js

@@ -158,12 +158,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _ref5 = options || {},
             fullWidthEnabled = _ref5.fullWidthEnabled,
             tableOptions = _ref5.tableOptions,
-            getEditorFeatureFlags = _ref5.getEditorFeatureFlags;
+            getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
+            isTableScalingEnabled = _ref5.isTableScalingEnabled;
           var _pluginConfig = (0, _createPluginConfig.pluginConfig)(tableOptions),
             allowColumnResizing = _pluginConfig.allowColumnResizing;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -241,10 +242,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref13) {
-          var _options$fullWidthEna;
+          var _options$fullWidthEna, _options$isTableScali;
           var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
             dispatch = _ref13.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -384,7 +385,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             editorAnalyticsAPI: editorAnalyticsAPI,
             stickyHeaders: stickyHeader,
-            pluginConfig: pluginConfig
+            pluginConfig: pluginConfig,
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -416,10 +418,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var _api$table;
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-            var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-              _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
-              isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
-            var tr = insert((0, _utils2.createTableWithWidth)(isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
+            var tr = insert((0, _utils2.createTableWithWidth)(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,

package/dist/cjs/pm-plugins/drag-and-drop/plugin.js

@@ -9,6 +9,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _element = require("@atlaskit/pragmatic-drag-and-drop-auto-scroll/element");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
@@ -162,7 +163,11 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI) {
             var _getTablePluginState4 = (0, _pluginFactory.getPluginState)(editorView.state),
               _getTablePluginState5 = _getTablePluginState4.isTableScalingEnabled,
               isTableScalingEnabled = _getTablePluginState5 === void 0 ? false : _getTablePluginState5;
-            (0, _utils3.insertColgroupFromNode)(tableRef, tableNode, isTableScalingEnabled);
+            var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+            if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+              isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
+            }
+            (0, _utils3.insertColgroupFromNode)(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
           }
         }
         editorView.focus();

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

@@ -18,19 +18,16 @@ var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
 var _pluginFactory2 = require("./plugin-factory");
 var _utils3 = require("./utils");
-var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
+var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
   var editorDisabled = !view.editable;
   var domAtPos = view.domAtPos.bind(view);
-  var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
-    _getTablePluginState$ = _getTablePluginState.isTableScalingEnabled,
-    isTableScalingEnabled = _getTablePluginState$ === void 0 ? false : _getTablePluginState$;
   if (editorDisabled || localResizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
-  var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(state),
-    isKeyboardResize = _getTablePluginState2.isKeyboardResize;
+  var _getTablePluginState = (0, _pluginFactory.getPluginState)(state),
+    isKeyboardResize = _getTablePluginState.isKeyboardResize;
   event.preventDefault();
   var tr = view.state.tr;
   tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
@@ -56,6 +53,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     getEditorContainerWidth: getEditorContainerWidth
   });
   var shouldScale = tableDepth === 0 && isTableScalingEnabled;
+  if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+    shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+  }
   var resizeState = (0, _utils3.getResizeState)({
     minWidth: _styles.tableCellMinWidth,
     maxSize: maxSize,
@@ -92,8 +92,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
       dragging = _getPluginState.dragging,
       resizeHandlePos = _getPluginState.resizeHandlePos;
-    var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(state),
-      isTableHovered = _getTablePluginState3.isTableHovered;
+    var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(state),
+      isTableHovered = _getTablePluginState2.isTableHovered;
     if (resizeHandlePos === null) {
       return (0, _commands.stopResizing)()(state, dispatch);
     }
@@ -138,6 +138,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         // only selected (or selected - 1) columns should be distributed
         var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
         var _shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+          _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
+        }
         var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
         tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
@@ -197,8 +200,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
       dragging = _getPluginState2.dragging,
       resizeHandlePos = _getPluginState2.resizeHandlePos;
-    var _getTablePluginState4 = (0, _pluginFactory.getPluginState)(state),
-      isTableHovered = _getTablePluginState4.isTableHovered;
+    var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(state),
+      isTableHovered = _getTablePluginState3.isTableHovered;
     if (!which || !dragging || resizeHandlePos === null || !(0, _utils3.pointsAtCell)(state.doc.resolve(resizeHandlePos)) || !isTableHovered && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-column-resizing_emcvz')) {
       return finish(event);
     }
@@ -209,6 +212,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var map = _tableMap.TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     var shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+      shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+    }
     (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
     (0, _utils3.updateControls)()(state);
   }

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

@@ -16,7 +16,7 @@ var _eventHandlers = require("./event-handlers");
 var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 var _utils = require("./utils");
-function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
+function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled) {
   var _ref$lastColumnResiza = _ref.lastColumnResizable,
     lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza;
   return new _safePlugin.SafePlugin({
@@ -56,7 +56,7 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
             }
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
+            if ((0, _eventHandlers.handleMouseDown)(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI)) {
               var _state = view.state,
                 _dispatch = view.dispatch;
               return (0, _commands.setResizeHandlePos)(resizeHandlePos)(_state, _dispatch);

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

@@ -333,14 +333,19 @@ var getNewResizeStateFromSelectedColumns = exports.getNewResizeStateFromSelected
     layout: layout,
     getEditorContainerWidth: getEditorContainerWidth
   });
-  var resizeState = getResizeState({
+  var resizeState;
+  var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+  if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+    isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
+  }
+  resizeState = getResizeState({
     minWidth: _styles.tableCellMinWidth,
     maxSize: maxSize,
     table: table.node,
     tableRef: tableRef,
     start: table.start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
   });
   var newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   var widthsBefore = resizeState.widths;

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

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _transforms = require("../../../transforms");
 var _utils = require("../../../utils");
 var _misc = require("../utils/misc");
@@ -23,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
 var scale = exports.scale = function scale(tableRef, options, domAtPos) {
-  var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isTableScalingEnabledOnCurrentTable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var node = options.node,
     containerWidth = options.containerWidth,
     previousContainerWidth = options.previousContainerWidth,
@@ -59,12 +60,12 @@ var scale = exports.scale = function scale(tableRef, options, domAtPos) {
     tableRef: tableRef,
     start: start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
   });
   return scaleTableTo(resizeState, newWidth);
 };
 var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRef, parentWidth, table, start, domAtPos) {
-  var isTableScalingEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableScalingEnabledOnCurrentTable = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var resizeState = (0, _resizeState.getResizeState)({
     minWidth: _styles.tableCellMinWidth,
     maxSize: parentWidth,
@@ -72,7 +73,7 @@ var scaleWithParent = exports.scaleWithParent = function scaleWithParent(tableRe
     tableRef: tableRef,
     start: start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= _editorSharedStyles.akEditorTableNumberColumnWidth;
@@ -116,14 +117,18 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
     var width = isNumberColumnEnabled ? parentWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : parentWidth;
     tableRef.style.width = "".concat(width, "px");
   }
-
+  var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+  if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
+    isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
+  }
   // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
   // If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
-  if (!(0, _colgroup.hasTableBeenResized)(node) && !isTableScalingEnabled) {
+  if (!(0, _colgroup.hasTableBeenResized)(node) && !isTableScalingEnabledOnCurrentTable) {
     (0, _dom.syncStickyRowToTable)(tableRef);
     return;
   }
-  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) : scale(tableRef, options, domAtPos, false);
+  var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
+  : scale(tableRef, options, domAtPos, false);
   if (resizeState) {
     (0, _resizeState.updateColgroup)(resizeState, tableRef, node, false);
   }
@@ -131,7 +136,7 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
 
 // Scale the table to meet new requirements (col, layout change etc)
 var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, domAtPos) {
-  var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isTableScalingEnabledOnCurrentTable = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return function (tr) {
     if (!tableRef) {
       return tr;
@@ -144,7 +149,7 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
     if ((0, _colgroup.hasTableBeenResized)(node) === false) {
       // If its not a re-sized table, we still want to re-create cols
       // To force reflow of columns upon delete.
-      if (!isTableScalingEnabled) {
+      if (!isTableScalingEnabledOnCurrentTable) {
         (0, _colgroup.insertColgroupFromNode)(tableRef, node);
       }
       tr.setMeta('scrollIntoView', false);
@@ -152,9 +157,9 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
     }
     var resizeState;
     if (parentWidth) {
-      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabled);
+      resizeState = scaleWithParent(tableRef, parentWidth, node, start, domAtPos, isTableScalingEnabledOnCurrentTable);
     } else {
-      resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabled);
+      resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable);
     }
     if (resizeState) {
       tr = (0, _transforms.updateColumnWidths)(resizeState, node, start)(tr);

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

@@ -14,7 +14,6 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _pluginFactory = require("./plugin-factory");
 var _utils2 = require("./table-resizing/utils");
 var _excluded = ["width"];
 /**
@@ -25,7 +24,7 @@ var _excluded = ["width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
-var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) {
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
@@ -92,9 +91,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
       var referentialityTr = transactions.find(function (tr) {
         return tr.getMeta('referentialityTableInserted');
       });
-      var _getPluginState = (0, _pluginFactory.getPluginState)(newState),
-        _getPluginState$isTab = _getPluginState.isTableScalingEnabled,
-        isTableScalingEnabled = _getPluginState$isTab === void 0 ? false : _getPluginState$isTab;
       var shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
       if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
         return null;

package/dist/cjs/pm-plugins/view-mode-sort/utils.js

@@ -8,6 +8,7 @@ exports.unsort = exports.toggleSort = exports.getTableElements = exports.getSort
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _types = require("@atlaskit/editor-common/types");
+var _utils = require("@atlaskit/editor-common/utils");
 var _consts = require("./consts");
 var unsort = exports.unsort = function unsort(oldOrder, tableElement) {
   var rows = tableElement.querySelectorAll('tr');
@@ -19,44 +20,60 @@ var unsort = exports.unsort = function unsort(oldOrder, tableElement) {
     tbody === null || tbody === void 0 || tbody.appendChild(rows[item.index + 1]);
   });
 };
+var getSortOrderFromTable = exports.getSortOrderFromTable = function getSortOrderFromTable(tableNode, sortIndex, direction) {
+  var tableArray = (0, _utils.convertProsemirrorTableNodeToArrayOfRows)(tableNode);
+  tableArray.shift(); // remove header row
 
-// TODO - reuse sort logic from the Renderer and support switching between ASC, DESC and NO_ORDER
-var getSortOrderFromTable = exports.getSortOrderFromTable = function getSortOrderFromTable(tableElement, sortIndex, direction) {
-  var sortOrder = direction === _types.SortOrder.DESC ? -1 : 1;
-  var strings = [];
-  tableElement.querySelectorAll('tr:not([data-header-row="true"])').forEach(function (tr) {
-    var _tr$querySelectorAll$;
-    strings.push(((_tr$querySelectorAll$ = tr.querySelectorAll('td')[sortIndex]) === null || _tr$querySelectorAll$ === void 0 ? void 0 : _tr$querySelectorAll$.textContent) || '');
+  // Keep track of the origin row index
+  var tableArrayWithIndex = tableArray.map(function (node, index) {
+    return {
+      node: node,
+      originalIndex: index
+    };
   });
-  var order = Array.from(strings.keys()).sort(function (a, b) {
-    var string = strings[a] || '';
-    return string.localeCompare(strings[b] || '') * sortOrder;
-  }).map(function (value, index) {
+  var compareNodesInOrder = (0, _utils.createCompareNodes)({
+    // TODO - add inline card support
+    getInlineCardTextFromStore: function getInlineCardTextFromStore() {
+      return null;
+    }
+  }, direction);
+  var order = tableArrayWithIndex.sort(function (a, b) {
+    return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
+  }).map(function (tableRow, index) {
     return {
-      value: value,
+      value: tableRow.originalIndex,
       index: index
     };
   });
-  // TODO - improve this. right now this is a workaround to ensure the first tr is always first in the order
-  return [{
+  return [
+  // Ensures the first tr is always first in the order
+  {
     value: -1,
     index: -1
   }].concat((0, _toConsumableArray2.default)(order));
 };
 var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginState) {
-  var _target$closest;
+  var _target$closest, _tableNode$type;
   var target = event.target;
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
   var widget = target.closest(".".concat(_consts.SORTING_ICON_CLASS_NAME));
   if (widget !== null && widget !== void 0 && widget.classList.contains(_consts.IS_DISABLED_CLASS_NAME) || !widget) {
     return;
   }
-  var datasetortIndex = target === null || target === void 0 || (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(_consts.SORT_INDEX_DATA_ATTRIBUTE);
+  var dataSortIndex = target === null || target === void 0 || (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(_consts.SORT_INDEX_DATA_ATTRIBUTE);
   var tr = view.state.tr;
   var tableElement = target.closest('table');
-  if (!tableElement || !datasetortIndex) {
+  if (!tableElement || !dataSortIndex) {
+    return;
+  }
+  var tablePos = view.posAtDOM(tableElement, 0);
+  var tableNode = view.state.doc.nodeAt(tablePos - 1);
+  var tableId = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId;
+  if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 || (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
     return;
   }
-  var tableId = tableElement.getAttribute('data-table-local-id') || '';
   var _ref = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {},
     index = _ref.index,
     direction = _ref.direction,
@@ -66,7 +83,7 @@ var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginSta
   if (direction !== _types.SortOrder.NO_ORDER && oldOrder !== undefined) {
     unsort(oldOrder, tableElement);
   }
-  var sortIndex = parseInt(datasetortIndex);
+  var sortIndex = parseInt(dataSortIndex);
   if (sortIndex === index) {
     switch (direction) {
       case _types.SortOrder.NO_ORDER:
@@ -82,7 +99,7 @@ var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginSta
   } else {
     direction = _types.SortOrder.ASC; // default direction when a new index is clicked
   }
-  var order = getSortOrderFromTable(tableElement, sortIndex, direction);
+  var order = getSortOrderFromTable(tableNode, sortIndex, direction);
   if (direction === _types.SortOrder.NO_ORDER) {
     tr.setMeta('tableSortMeta', (0, _defineProperty2.default)({}, tableId, {}));
   } else {