@atlaskit/editor-plugin-table 7.11.3 → 7.11.5

package/dist/es2019/nodeviews/TableComponent.js

@@ -340,7 +340,10 @@ class TableComponent extends React.Component {
         this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       }
     }
-    if (isTableScalingEnabled) {
+    if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+      this.handleColgroupUpdates(true);
+    }
+    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
       this.handleColgroupUpdates(true);
     }
     if (allowColumnResizing && this.wrapper && !isIE11) {
@@ -464,8 +467,10 @@ class TableComponent extends React.Component {
       const wasTableResized = hasTableBeenResized(this.node);
       const isTableResized = hasTableBeenResized(tableNode);
       const isColumnsDistributed = wasTableResized && !isTableResized;
-      const shouldScale = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged;
-      if (force || !isResizing && shouldScale) {
+      const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
+      const shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged;
+      if (force || !isResizing && shouldUpdateColgroup) {
+        var _this$props$options, _this$props$options2;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -475,10 +480,17 @@ class TableComponent extends React.Component {
           domAtPos: view.domAtPos,
           isTableScalingEnabled: true
         });
+        let shouldScaleOnColgroupUpdate = false;
+        if ((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled && !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 && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && tableNode.attrs.displayMode !== 'fixed') {
+          shouldScaleOnColgroupUpdate = true;
+        }
 
         // Request animation frame required for Firefox
         requestAnimationFrame(() => {
-          updateColgroup(resizeState, this.table, tableNode, true);
+          updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate);
         });
       }
     }
@@ -496,6 +508,7 @@ class TableComponent extends React.Component {
       isResizing,
       options,
       isTableScalingEnabled,
+      // we could use options.isTableScalingEnabled here
       getPos
     } = this.props;
     let {
@@ -506,7 +519,17 @@ class TableComponent extends React.Component {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
     }
-    if (isTableScalingEnabled) {
+    let shouldScale = false;
+    let shouldHandleColgroupUpdates = false;
+    if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+      shouldScale = true;
+      shouldHandleColgroupUpdates = true;
+    }
+    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && getNode().attrs.displayMode !== 'fixed') {
+      shouldScale = true;
+      shouldHandleColgroupUpdates = true;
+    }
+    if (shouldHandleColgroupUpdates) {
       this.handleColgroupUpdates();
     }
     if (isInDanger && !table) {
@@ -555,7 +578,7 @@ class TableComponent extends React.Component {
         if (shouldRecreateResizeCols) {
           const start = getPos() || 0;
           const depth = view.state.doc.resolve(start).depth;
-          const shouldScale = depth === 0 && isTableScalingEnabled;
+          shouldScale = depth === 0 && shouldScale;
           insertColgroupFromNode(this.table, currentTable, shouldScale);
         }
         updateControls()(view.state);
@@ -611,7 +634,7 @@ class TableComponent extends React.Component {
       pluginInjectionApi,
       isDragAndDropEnabled,
       getEditorFeatureFlags,
-      isTableScalingEnabled
+      isTableScalingEnabled // here we can use options.isTableScalingEnabled
     } = this.props;
     let {
       isInDanger,

package/dist/es2019/nodeviews/table.js

@@ -65,10 +65,9 @@ export default class TableView extends ReactNodeView {
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
     if (rendered.dom) {
-      var _this$options;
+      var _this$options, _this$options2;
       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)) {
+      if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && this.node.attrs.displayMode === 'fixed') {
         const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
         if (tableInlineWidth) {
           handleInlineTableWidth(this.table, tableInlineWidth);
@@ -78,7 +77,7 @@ export default class TableView extends ReactNodeView {
     return rendered;
   }
   setDomAttrs(node) {
-    var _tableWidthPluginKey$;
+    var _this$options3, _this$options4;
     if (!this.table) {
       return;
     }
@@ -87,11 +86,15 @@ export default class TableView extends ReactNodeView {
       this.table.setAttribute(attr, attrs[attr]);
     });
 
-    // handle inline style when table been resized
-    const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
-    const isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.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) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') && node.attrs.displayMode === 'fixed') {
+      var _tableWidthPluginKey$;
+      // handle inline style when table been resized
+      const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      const isTableResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+      if (!isTableResizing && tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
   }
   render(props, forwardRef) {
@@ -141,6 +144,7 @@ export default class TableView extends ReactNodeView {
       },
       editorView: props.view,
       render: pluginStates => {
+        var _props$options;
         const {
           tableResizingPluginState,
           tableWidthPluginState,
@@ -174,7 +178,8 @@ export default class TableView extends 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,
@@ -251,7 +256,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
     isDragAndDropEnabled,
-    isTableScalingEnabled
+    isTableScalingEnabled // same as options.isTableScalingEnabled
   } = getPluginState(view.state);
   const {
     allowColumnResizing,
@@ -271,7 +276,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
       isDragAndDropEnabled,
-      isTableScalingEnabled
+      isTableScalingEnabled // same as options.isTableScalingEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/dist/es2019/plugin.js

@@ -151,14 +151,15 @@ const tablesPlugin = ({
           const {
             fullWidthEnabled,
             tableOptions,
-            getEditorFeatureFlags
+            getEditorFeatureFlags,
+            isTableScalingEnabled
           } = options || {};
           const {
             allowColumnResizing
           } = pluginConfig(tableOptions);
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -234,8 +235,8 @@ const tablesPlugin = ({
           dispatchAnalyticsEvent,
           dispatch
         }) => {
-          var _options$fullWidthEna;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          var _options$fullWidthEna, _options$isTableScali;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(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'
@@ -380,7 +381,8 @@ const tablesPlugin = ({
             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.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -410,10 +412,7 @@ const tablesPlugin = ({
           var _api$table;
           // see comment on tablesPlugin.getSharedState on usage
           const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-          const {
-            isTableScalingEnabled = false
-          } = getPluginState(state);
-          const tr = insert(createTableWithWidth(isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
+          const tr = insert(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 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,

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

@@ -3,6 +3,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow, getSelectedCellInfo } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -170,7 +171,11 @@ const destroyFn = (editorView, editorAnalyticsAPI) => {
             const {
               isTableScalingEnabled = false
             } = getTablePluginState(editorView.state);
-            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabled);
+            let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+            if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+              isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
+            }
+            insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable);
           }
         }
         editorView.focus();

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

@@ -12,16 +12,13 @@ import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
-export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) => {
+export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) => {
   const {
     state,
     dispatch
   } = view;
   const editorDisabled = !view.editable;
   const domAtPos = view.domAtPos.bind(view);
-  const {
-    isTableScalingEnabled = false
-  } = getTablePluginState(state);
   if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
     return false;
   }
@@ -52,7 +49,10 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     layout: originalTable.attrs.layout,
     getEditorContainerWidth
   });
-  const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+  let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+  if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+    shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+  }
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -144,7 +144,10 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+          shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+        }
         const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
         const resizedDelta = clientX - startX;
         tr = updateColumnWidths(newResizeState, table, start)(tr);
@@ -221,7 +224,10 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const tableDepth = state.doc.resolve(tablePos).depth;
     const map = TableMap.get(table);
     const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    let shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+      shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
+    }
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
     updateControls()(state);
   }

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

@@ -10,7 +10,7 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
   lastColumnResizable = true
-}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) {
+}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
@@ -54,7 +54,7 @@ export function createPlugin(dispatch, {
             }
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI)) {
               const {
                 state,
                 dispatch

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

@@ -304,14 +304,19 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
     layout,
     getEditorContainerWidth
   });
-  const resizeState = getResizeState({
+  let resizeState;
+  let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+  if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+    isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
+  }
+  resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
     table: table.node,
     tableRef,
     start: table.start,
     domAtPos,
-    isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
   });
   const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
   const widthsBefore = resizeState.widths;

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

@@ -1,6 +1,7 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../../transforms';
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
@@ -10,7 +11,7 @@ import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
 import { syncStickyRowToTable } from './dom';
 // Base function to trigger the actual scale on a table node.
 // Will only resize/scale if a table has been previously resized.
-export const scale = (tableRef, options, domAtPos, isTableScalingEnabled = false) => {
+export const scale = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false) => {
   const {
     node,
     containerWidth,
@@ -48,11 +49,11 @@ export const scale = (tableRef, options, domAtPos, isTableScalingEnabled = false
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
   });
   return scaleTableTo(resizeState, newWidth);
 };
-export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, isTableScalingEnabled = false) => {
+export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, isTableScalingEnabledOnCurrentTable = false) => {
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize: parentWidth,
@@ -60,7 +61,7 @@ export const scaleWithParent = (tableRef, parentWidth, table, start, domAtPos, i
     tableRef,
     start,
     domAtPos,
-    isTableScalingEnabled
+    isTableScalingEnabled: isTableScalingEnabledOnCurrentTable
   });
   if (table.attrs.isNumberColumnEnabled) {
     parentWidth -= akEditorTableNumberColumnWidth;
@@ -109,21 +110,25 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     const width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
     tableRef.style.width = `${width}px`;
   }
-
+  let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
+  if (isTableScalingEnabled && 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 (!hasTableBeenResized(node) && !isTableScalingEnabled) {
+  if (!hasTableBeenResized(node) && !isTableScalingEnabledOnCurrentTable) {
     syncStickyRowToTable(tableRef);
     return;
   }
-  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) : scale(tableRef, options, domAtPos, false);
+  const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false) // Here last value is isTableScalingEnabled = false
+  : scale(tableRef, options, domAtPos, false);
   if (resizeState) {
     updateColgroup(resizeState, tableRef, node, false);
   }
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false) => tr => {
+export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false) => tr => {
   if (!tableRef) {
     return tr;
   }
@@ -137,7 +142,7 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabled =
   if (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) {
       insertColgroupFromNode(tableRef, node);
     }
     tr.setMeta('scrollIntoView', false);
@@ -145,9 +150,9 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabled =
   }
   let 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 = updateColumnWidths(resizeState, node, start)(tr);

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

@@ -11,10 +11,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getPluginState } from './plugin-factory';
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export const pluginKey = new PluginKey('tableWidthPlugin');
-const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled) => {
+const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) => {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -79,9 +78,6 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled) => {
         return hasStepReplacingEntireDocument;
       });
       const referentialityTr = transactions.find(tr => tr.getMeta('referentialityTableInserted'));
-      const {
-        isTableScalingEnabled = false
-      } = getPluginState(newState);
       const shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
       if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
         return null;

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

@@ -1,4 +1,5 @@
 import { SortOrder } from '@atlaskit/editor-common/types';
+import { convertProsemirrorTableNodeToArrayOfRows, createCompareNodes } from '@atlaskit/editor-common/utils';
 import { IS_DISABLED_CLASS_NAME, SORT_INDEX_DATA_ATTRIBUTE, SORTING_ICON_CLASS_NAME } from './consts';
 export const unsort = (oldOrder, tableElement) => {
   const rows = tableElement.querySelectorAll('tr');
@@ -8,42 +9,56 @@ export const unsort = (oldOrder, tableElement) => {
     tbody === null || tbody === void 0 ? void 0 : tbody.appendChild(rows[item.index + 1]);
   });
 };
+export const getSortOrderFromTable = (tableNode, sortIndex, direction) => {
+  const tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
+  tableArray.shift(); // remove header row
 
-// TODO - reuse sort logic from the Renderer and support switching between ASC, DESC and NO_ORDER
-export const getSortOrderFromTable = (tableElement, sortIndex, direction) => {
-  const sortOrder = direction === SortOrder.DESC ? -1 : 1;
-  const strings = [];
-  tableElement.querySelectorAll('tr:not([data-header-row="true"])').forEach(tr => {
-    var _tr$querySelectorAll$;
-    strings.push(((_tr$querySelectorAll$ = tr.querySelectorAll('td')[sortIndex]) === null || _tr$querySelectorAll$ === void 0 ? void 0 : _tr$querySelectorAll$.textContent) || '');
-  });
-  const order = Array.from(strings.keys()).sort((a, b) => {
-    const string = strings[a] || '';
-    return string.localeCompare(strings[b] || '') * sortOrder;
-  }).map((value, index) => ({
-    value,
+  // Keep track of the origin row index
+  const tableArrayWithIndex = tableArray.map((node, index) => ({
+    node,
+    originalIndex: index
+  }));
+  const compareNodesInOrder = createCompareNodes({
+    // TODO - add inline card support
+    getInlineCardTextFromStore() {
+      return null;
+    }
+  }, direction);
+  const order = tableArrayWithIndex.sort((a, b) => {
+    return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
+  }).map((tableRow, index) => ({
+    value: tableRow.originalIndex,
     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
   }, ...order];
 };
 export const toggleSort = (view, event, pluginState) => {
-  var _target$closest;
+  var _target$closest, _tableNode$type;
   const target = event.target;
+  if (!(target instanceof HTMLElement)) {
+    return;
+  }
   const widget = target.closest(`.${SORTING_ICON_CLASS_NAME}`);
   if (widget !== null && widget !== void 0 && widget.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
     return;
   }
-  let datasetortIndex = target === null || target === void 0 ? void 0 : (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
+  let dataSortIndex = target === null || target === void 0 ? void 0 : (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
   const tr = view.state.tr;
   const tableElement = target.closest('table');
-  if (!tableElement || !datasetortIndex) {
+  if (!tableElement || !dataSortIndex) {
+    return;
+  }
+  const tablePos = view.posAtDOM(tableElement, 0);
+  const tableNode = view.state.doc.nodeAt(tablePos - 1);
+  const tableId = tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId;
+  if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
     return;
   }
-  const tableId = tableElement.getAttribute('data-table-local-id') || '';
   let {
     index,
     direction,
@@ -54,7 +69,7 @@ export const toggleSort = (view, event, pluginState) => {
   if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
     unsort(oldOrder, tableElement);
   }
-  const sortIndex = parseInt(datasetortIndex);
+  const sortIndex = parseInt(dataSortIndex);
   if (sortIndex === index) {
     switch (direction) {
       case SortOrder.NO_ORDER:
@@ -70,7 +85,7 @@ export const toggleSort = (view, event, pluginState) => {
   } else {
     direction = SortOrder.ASC; // default direction when a new index is clicked
   }
-  const order = getSortOrderFromTable(tableElement, sortIndex, direction);
+  const order = getSortOrderFromTable(tableNode, sortIndex, direction);
   if (direction === SortOrder.NO_ORDER) {
     tr.setMeta('tableSortMeta', {
       [tableId]: {}

package/dist/es2019/toolbar.js

@@ -311,13 +311,10 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   // We don't want to show floating toolbar while resizing the table
   const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
   const {
-    isTableScalingEnabled,
     widthToWidest
   } = pluginState;
   const currentTableNodeLocalId = (_tableObject$node$att = tableObject === null || tableObject === void 0 ? void 0 : (_tableObject$node = tableObject.node) === null || _tableObject$node === void 0 ? void 0 : (_tableObject$node$att2 = _tableObject$node.attrs) === null || _tableObject$node$att2 === void 0 ? void 0 : _tableObject$node$att2.localId) !== null && _tableObject$node$att !== void 0 ? _tableObject$node$att : '';
-  if (isTableScalingEnabled &&
-  // TODO ED-21670: check if need options.isTableScalingEnabled
-  isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
+  if (options !== null && options !== void 0 && options.isTableScalingEnabled && isWidthResizing && widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId]) {
     const {
       stickyScrollbar
     } = getEditorFeatureFlags();
@@ -364,14 +361,10 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-    const {
-      isTableScalingEnabled = false
-    } = getPluginState(state); // TODO ED-21670: check if we need options.isTableScalingEnabled and not an acutual state of displayNode attr on the table
-
     let cellItems;
-    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled);
+    cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
     let columnSettingsItems;
-    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options, isTableScalingEnabled) : [];
+    columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
     // Check if we need to show confirm dialog for delete button
@@ -489,18 +482,17 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI,
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, options, isTableScalingEnabled = false) => {
+}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false) => {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
   if (!selectionOrTableRect || !editorView) {
     return [];
   }
-  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled // TODO ED-21670: Here should be actual state of tableNode's displayMode attr
-  );
+  const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled);
   const wouldChange = (_newResizeStateWithAn2 = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn2 !== void 0 ? _newResizeStateWithAn2 : false;
   const items = [];
-  const isTableScalingLockBtnEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+  const isTableScalingLockBtnEnabled = isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
   if (isTableScalingLockBtnEnabled) {
     var _pluginState$tableNod;
     const areColumnWidthsLocked = (pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$tableNod = pluginState.tableNode) === null || _pluginState$tableNod === void 0 ? void 0 : _pluginState$tableNod.attrs.displayMode) === 'fixed';
@@ -524,8 +516,7 @@ const getColumnSettingItems = (editorState, editorView, {
       type: 'button',
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
-      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled // TODO ED-21670: Maybe here too we an actual state of tableNode's displayMode attr
-      )(state, dispatch, view),
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled)(state, dispatch, view),
       disabled: !wouldChange
     });
   }

package/dist/es2019/transforms/column-width.js

@@ -107,7 +107,10 @@ export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) =
     isResized
   };
   const tableDepth = view.state.doc.resolve(table.pos).depth;
-  const shouldScale = isTableScalingEnabled && tableDepth === 0;
+  let shouldScale = isTableScalingEnabled && tableDepth === 0;
+  if (shouldScale && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
+    shouldScale = newTable.attrs.displayMode !== 'fixed';
+  }
   if (shouldScale) {
     previousTableInfo = {
       width: getTableElementWidth(table.node),