@atlaskit/editor-plugin-table 1.6.9 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 1.7.1
+
+### Patch Changes
+
+- [`7a720ec3e8e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7a720ec3e8e) - ED-18796 Use setAttrsStep to update colwidth attribute when scaling the table
+
+## 1.7.0
+
+### Minor Changes
+
+- [`cb69e6847ec`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb69e6847ec) - [ux] The table colgroup will always set the width to the min width when the custom-table-width flag is enabled
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.6.9
 
 ### Patch Changes

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

@@ -32,6 +32,7 @@ var _updateOverflowShadows = require("./update-overflow-shadows");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
 var _TableContainer = require("./TableContainer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty3.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -135,7 +136,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // Usually happens on window resize.
       layoutSize !== _this.layoutSize || noOfColumnsChanged) {
         // If column has been inserted/deleted avoid multi dispatch
-        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
+        if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && !hasNumberedColumnChanged && !noOfColumnsChanged) {
           _this.scaleTable({
             parentWidth: parentWidth,
             layoutChanged: layoutChanged

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

@@ -10,29 +10,56 @@ var _prosemirrorModel = require("prosemirror-model");
 var _utils = require("@atlaskit/editor-common/utils");
 var _styles = require("@atlaskit/editor-common/styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var generateColgroup = function generateColgroup(table) {
   var cols = [];
-  table.content.firstChild.content.forEach(function (cell) {
-    var colspan = cell.attrs.colspan || 1;
-    if (Array.isArray(cell.attrs.colwidth)) {
-      // We slice here to guard against our colwidth array having more entries
-      // Than the we actually span. We'll patch the document at a later point.
-      cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
-        cols.push(['col', width ? {
-          style: "width: ".concat(width, "px;")
-        } : {}]);
-      });
-    } else {
-      // When we have merged cells on the first row (firstChild),
-      // We want to ensure we're creating the appropriate amount of
-      // cols the table still has.
-      cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
-        length: colspan
-      }, function (_) {
-        return ['col', {}];
-      })));
-    }
-  });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
+    table.content.firstChild.content.forEach(function (cell) {
+      var colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+          cols.push(['col', {
+            style: "width: ".concat(width ? Math.max(width, _styles.tableCellMinWidth) : _styles.tableCellMinWidth, "px;")
+          }]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
+          length: colspan
+        }, function (_) {
+          return ['col', {
+            style: "width: ".concat(_styles.tableCellMinWidth, "px;")
+          }];
+        })));
+      }
+    });
+  } else {
+    table.content.firstChild.content.forEach(function (cell) {
+      var colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+          cols.push(['col', width ? {
+            style: "width: ".concat(width, "px;")
+          } : {}]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push.apply(cols, (0, _toConsumableArray2.default)(Array.from({
+          length: colspan
+        }, function (_) {
+          return ['col', {}];
+        })));
+      }
+    });
+  }
   return cols;
 };
 exports.generateColgroup = generateColgroup;

package/dist/cjs/plugins/table/transforms/column-width.js

@@ -10,11 +10,13 @@ var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("../pm-plugins/table-resizing/utils");
+var _steps = require("@atlaskit/adf-schema/steps");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _commonStyles = require("../ui/common-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
@@ -58,36 +60,54 @@ var updateColumnWidths = function updateColumnWidths(resizeState, table, start)
     }
 
     // updating all cells with new attributes
-    var rows = [];
-    var seen = {};
-    for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
-      var row = table.child(_rowIndex);
-      var cells = [];
-      for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
-        var _mapIndex = _rowIndex * map.width + _columnIndex;
-        var pos = map.map[_mapIndex];
-        var cell = table.nodeAt(pos);
-        if (!seen[pos] && cell) {
-          cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
-          seen[pos] = true;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.update-table-cell-width-via-step')) {
+      var seen = {};
+      for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
+        for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
+          var _mapIndex = _rowIndex * map.width + _columnIndex;
+          var pos = map.map[_mapIndex];
+          var cell = table.nodeAt(pos);
+          if (!seen[pos] && cell) {
+            if (updatedCellsAttrs[pos]) {
+              tr.step(new _steps.SetAttrsStep(pos + start, updatedCellsAttrs[pos]));
+            }
+            seen[pos] = true;
+          }
         }
       }
-      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+    } else {
+      var rows = [];
+      var _seen = {};
+      for (var _rowIndex2 = 0; _rowIndex2 < map.height; _rowIndex2++) {
+        var row = table.child(_rowIndex2);
+        var cells = [];
+        for (var _columnIndex2 = 0; _columnIndex2 < map.width; _columnIndex2++) {
+          var _mapIndex2 = _rowIndex2 * map.width + _columnIndex2;
+          var _pos = map.map[_mapIndex2];
+          var _cell = table.nodeAt(_pos);
+          if (!_seen[_pos] && _cell) {
+            cells.push(_cell.type.createChecked(updatedCellsAttrs[_pos] || _cell.attrs, _cell.content, _cell.marks));
+            _seen[_pos] = true;
+          }
+        }
+        rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+      }
+      var tablePos = start - 1;
+      var selectionBookmark = tr.selection.getBookmark();
+      tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
+      /**
+       * We want to restore to the original selection but w/o applying the mapping. Function
+       * tr.replaceWith puts the selection after the inserted content. We need to manually
+       * set the selection back to original state. Mapping in this case doesn't quite work
+       * e.g. if we change the content before a selection. This is because mapping
+       * means moving it if the content in front of it changed. Instead we can get
+       * bookmark of selection.
+       *
+       * @see https://github.com/ProseMirror/prosemirror/issues/645
+       */
+      tr.setSelection(selectionBookmark.resolve(tr.doc));
     }
-    var tablePos = start - 1;
-    var selectionBookmark = tr.selection.getBookmark();
-    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
-    /**
-     * We want to restore to the original selection but w/o applying the mapping. Function
-     * tr.replaceWith puts the selection after the inserted content. We need to manually
-     * set the selection back to original state. Mapping in this case doesn't quite work
-     * e.g. if we change the content before a selection. This is because mapping
-     * means moving it if the content in front of it changed. Instead we can get
-     * bookmark of selection.
-     *
-     * @see https://github.com/ProseMirror/prosemirror/issues/645
-     */
-    return tr.setSelection(selectionBookmark.resolve(tr.doc));
+    return tr;
   };
 };
 

package/dist/cjs/version.json

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

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

@@ -20,6 +20,7 @@ import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
 class TableComponent extends React.Component {
@@ -121,7 +122,7 @@ class TableComponent extends React.Component {
       // Usually happens on window resize.
       layoutSize !== this.layoutSize || noOfColumnsChanged) {
         // If column has been inserted/deleted avoid multi dispatch
-        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
+        if (!getBooleanFF('platform.editor.custom-table-width') && !hasNumberedColumnChanged && !noOfColumnsChanged) {
           this.scaleTable({
             parentWidth,
             layoutChanged

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

@@ -2,27 +2,52 @@ import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const generateColgroup = table => {
   const cols = [];
-  table.content.firstChild.content.forEach(cell => {
-    const colspan = cell.attrs.colspan || 1;
-    if (Array.isArray(cell.attrs.colwidth)) {
-      // We slice here to guard against our colwidth array having more entries
-      // Than the we actually span. We'll patch the document at a later point.
-      cell.attrs.colwidth.slice(0, colspan).forEach(width => {
-        cols.push(['col', width ? {
-          style: `width: ${width}px;`
-        } : {}]);
-      });
-    } else {
-      // When we have merged cells on the first row (firstChild),
-      // We want to ensure we're creating the appropriate amount of
-      // cols the table still has.
-      cols.push(...Array.from({
-        length: colspan
-      }, _ => ['col', {}]));
-    }
-  });
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    table.content.firstChild.content.forEach(cell => {
+      const colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+          cols.push(['col', {
+            style: `width: ${width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth}px;`
+          }]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push(...Array.from({
+          length: colspan
+        }, _ => ['col', {
+          style: `width: ${tableCellMinWidth}px;`
+        }]));
+      }
+    });
+  } else {
+    table.content.firstChild.content.forEach(cell => {
+      const colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach(width => {
+          cols.push(['col', width ? {
+            style: `width: ${width}px;`
+          } : {}]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push(...Array.from({
+          length: colspan
+        }, _ => ['col', {}]));
+      }
+    });
+  }
   return cols;
 };
 export const insertColgroupFromNode = (tableRef, table) => {

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

@@ -2,12 +2,14 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { insertColumnButtonOffset } from '../ui/common-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const updateColumnWidths = (resizeState, table, start) => tr => {
   const map = TableMap.get(table);
   const updatedCellsAttrs = {};
@@ -51,36 +53,54 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
   }
 
   // updating all cells with new attributes
-  const rows = [];
-  const seen = {};
-  for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-    const row = table.child(rowIndex);
-    const cells = [];
-    for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-      const mapIndex = rowIndex * map.width + columnIndex;
-      const pos = map.map[mapIndex];
-      const cell = table.nodeAt(pos);
-      if (!seen[pos] && cell) {
-        cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
-        seen[pos] = true;
+  if (getBooleanFF('platform.editor.update-table-cell-width-via-step')) {
+    const seen = {};
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+        const mapIndex = rowIndex * map.width + columnIndex;
+        const pos = map.map[mapIndex];
+        const cell = table.nodeAt(pos);
+        if (!seen[pos] && cell) {
+          if (updatedCellsAttrs[pos]) {
+            tr.step(new SetAttrsStep(pos + start, updatedCellsAttrs[pos]));
+          }
+          seen[pos] = true;
+        }
+      }
+    }
+  } else {
+    const rows = [];
+    const seen = {};
+    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      const row = table.child(rowIndex);
+      const cells = [];
+      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+        const mapIndex = rowIndex * map.width + columnIndex;
+        const pos = map.map[mapIndex];
+        const cell = table.nodeAt(pos);
+        if (!seen[pos] && cell) {
+          cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
+          seen[pos] = true;
+        }
       }
+      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
     }
-    rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+    const tablePos = start - 1;
+    const selectionBookmark = tr.selection.getBookmark();
+    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
+    /**
+     * We want to restore to the original selection but w/o applying the mapping. Function
+     * tr.replaceWith puts the selection after the inserted content. We need to manually
+     * set the selection back to original state. Mapping in this case doesn't quite work
+     * e.g. if we change the content before a selection. This is because mapping
+     * means moving it if the content in front of it changed. Instead we can get
+     * bookmark of selection.
+     *
+     * @see https://github.com/ProseMirror/prosemirror/issues/645
+     */
+    tr.setSelection(selectionBookmark.resolve(tr.doc));
   }
-  const tablePos = start - 1;
-  const selectionBookmark = tr.selection.getBookmark();
-  tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
-  /**
-   * We want to restore to the original selection but w/o applying the mapping. Function
-   * tr.replaceWith puts the selection after the inserted content. We need to manually
-   * set the selection back to original state. Mapping in this case doesn't quite work
-   * e.g. if we change the content before a selection. This is because mapping
-   * means moving it if the content in front of it changed. Instead we can get
-   * bookmark of selection.
-   *
-   * @see https://github.com/ProseMirror/prosemirror/issues/645
-   */
-  return tr.setSelection(selectionBookmark.resolve(tr.doc));
+  return tr;
 };
 
 /**

package/dist/es2019/version.json

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

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

@@ -30,6 +30,7 @@ import { updateOverflowShadows } from './update-overflow-shadows';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var isIE11 = browser.ie_version === 11;
 var NOOP = function NOOP() {
   return undefined;
@@ -129,7 +130,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // Usually happens on window resize.
       layoutSize !== _this.layoutSize || noOfColumnsChanged) {
         // If column has been inserted/deleted avoid multi dispatch
-        if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
+        if (!getBooleanFF('platform.editor.custom-table-width') && !hasNumberedColumnChanged && !noOfColumnsChanged) {
           _this.scaleTable({
             parentWidth: parentWidth,
             layoutChanged: layoutChanged

package/dist/esm/plugins/table/pm-plugins/table-resizing/utils/colgroup.js

@@ -3,29 +3,56 @@ import { DOMSerializer } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var generateColgroup = function generateColgroup(table) {
   var cols = [];
-  table.content.firstChild.content.forEach(function (cell) {
-    var colspan = cell.attrs.colspan || 1;
-    if (Array.isArray(cell.attrs.colwidth)) {
-      // We slice here to guard against our colwidth array having more entries
-      // Than the we actually span. We'll patch the document at a later point.
-      cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
-        cols.push(['col', width ? {
-          style: "width: ".concat(width, "px;")
-        } : {}]);
-      });
-    } else {
-      // When we have merged cells on the first row (firstChild),
-      // We want to ensure we're creating the appropriate amount of
-      // cols the table still has.
-      cols.push.apply(cols, _toConsumableArray(Array.from({
-        length: colspan
-      }, function (_) {
-        return ['col', {}];
-      })));
-    }
-  });
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    table.content.firstChild.content.forEach(function (cell) {
+      var colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+          cols.push(['col', {
+            style: "width: ".concat(width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth, "px;")
+          }]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push.apply(cols, _toConsumableArray(Array.from({
+          length: colspan
+        }, function (_) {
+          return ['col', {
+            style: "width: ".concat(tableCellMinWidth, "px;")
+          }];
+        })));
+      }
+    });
+  } else {
+    table.content.firstChild.content.forEach(function (cell) {
+      var colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach(function (width) {
+          cols.push(['col', width ? {
+            style: "width: ".concat(width, "px;")
+          } : {}]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push.apply(cols, _toConsumableArray(Array.from({
+          length: colspan
+        }, function (_) {
+          return ['col', {}];
+        })));
+      }
+    });
+  }
   return cols;
 };
 export var insertColgroupFromNode = function insertColgroupFromNode(tableRef, table) {

package/dist/esm/plugins/table/transforms/column-width.js

@@ -5,12 +5,14 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { insertColumnButtonOffset } from '../ui/common-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var updateColumnWidths = function updateColumnWidths(resizeState, table, start) {
   return function (tr) {
     var map = TableMap.get(table);
@@ -52,36 +54,54 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
     }
 
     // updating all cells with new attributes
-    var rows = [];
-    var seen = {};
-    for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
-      var row = table.child(_rowIndex);
-      var cells = [];
-      for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
-        var _mapIndex = _rowIndex * map.width + _columnIndex;
-        var pos = map.map[_mapIndex];
-        var cell = table.nodeAt(pos);
-        if (!seen[pos] && cell) {
-          cells.push(cell.type.createChecked(updatedCellsAttrs[pos] || cell.attrs, cell.content, cell.marks));
-          seen[pos] = true;
+    if (getBooleanFF('platform.editor.update-table-cell-width-via-step')) {
+      var seen = {};
+      for (var _rowIndex = 0; _rowIndex < map.height; _rowIndex++) {
+        for (var _columnIndex = 0; _columnIndex < map.width; _columnIndex++) {
+          var _mapIndex = _rowIndex * map.width + _columnIndex;
+          var pos = map.map[_mapIndex];
+          var cell = table.nodeAt(pos);
+          if (!seen[pos] && cell) {
+            if (updatedCellsAttrs[pos]) {
+              tr.step(new SetAttrsStep(pos + start, updatedCellsAttrs[pos]));
+            }
+            seen[pos] = true;
+          }
         }
       }
-      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+    } else {
+      var rows = [];
+      var _seen = {};
+      for (var _rowIndex2 = 0; _rowIndex2 < map.height; _rowIndex2++) {
+        var row = table.child(_rowIndex2);
+        var cells = [];
+        for (var _columnIndex2 = 0; _columnIndex2 < map.width; _columnIndex2++) {
+          var _mapIndex2 = _rowIndex2 * map.width + _columnIndex2;
+          var _pos = map.map[_mapIndex2];
+          var _cell = table.nodeAt(_pos);
+          if (!_seen[_pos] && _cell) {
+            cells.push(_cell.type.createChecked(updatedCellsAttrs[_pos] || _cell.attrs, _cell.content, _cell.marks));
+            _seen[_pos] = true;
+          }
+        }
+        rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+      }
+      var tablePos = start - 1;
+      var selectionBookmark = tr.selection.getBookmark();
+      tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
+      /**
+       * We want to restore to the original selection but w/o applying the mapping. Function
+       * tr.replaceWith puts the selection after the inserted content. We need to manually
+       * set the selection back to original state. Mapping in this case doesn't quite work
+       * e.g. if we change the content before a selection. This is because mapping
+       * means moving it if the content in front of it changed. Instead we can get
+       * bookmark of selection.
+       *
+       * @see https://github.com/ProseMirror/prosemirror/issues/645
+       */
+      tr.setSelection(selectionBookmark.resolve(tr.doc));
     }
-    var tablePos = start - 1;
-    var selectionBookmark = tr.selection.getBookmark();
-    tr.replaceWith(tablePos, tablePos + table.nodeSize, table.type.createChecked(table.attrs, rows, table.marks));
-    /**
-     * We want to restore to the original selection but w/o applying the mapping. Function
-     * tr.replaceWith puts the selection after the inserted content. We need to manually
-     * set the selection back to original state. Mapping in this case doesn't quite work
-     * e.g. if we change the content before a selection. This is because mapping
-     * means moving it if the content in front of it changed. Instead we can get
-     * bookmark of selection.
-     *
-     * @see https://github.com/ProseMirror/prosemirror/issues/645
-     */
-    return tr.setSelection(selectionBookmark.resolve(tr.doc));
+    return tr;
   };
 };
 

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^25.10.0",
-    "@atlaskit/editor-common": "^74.11.0",
+    "@atlaskit/editor-common": "^74.12.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.0.3",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.3",
@@ -37,7 +37,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.10.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -65,7 +65,7 @@
     "@af/editor-libra": "*",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.8.0",
-    "@atlaskit/editor-core": "^185.5.0",
+    "@atlaskit/editor-core": "^185.6.0",
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
@@ -108,6 +108,9 @@
   "platform-feature-flags": {
     "platform.editor.custom-table-width": {
       "type": "boolean"
+    },
+    "platform.editor.update-table-cell-width-via-step": {
+      "type": "boolean"
     }
   }
 }

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -52,6 +52,7 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import memoizeOne from 'memoize-one';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 const isIE11 = browser.ie_version === 11;
 const NOOP = () => undefined;
@@ -550,7 +551,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       noOfColumnsChanged
     ) {
       // If column has been inserted/deleted avoid multi dispatch
-      if (!hasNumberedColumnChanged && !noOfColumnsChanged) {
+      if (
+        !getBooleanFF('platform.editor.custom-table-width') &&
+        !hasNumberedColumnChanged &&
+        !noOfColumnsChanged
+      ) {
         this.scaleTable({ parentWidth, layoutChanged });
       }
       this.updateParentWidth(parentWidth);

package/src/plugins/table/pm-plugins/table-resizing/utils/colgroup.ts

@@ -2,27 +2,58 @@ import { DOMSerializer, Node as PmNode } from 'prosemirror-model';
 import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 type Col = Array<string | { [name: string]: string }>;
 
 export const generateColgroup = (table: PmNode): Col[] => {
   const cols: Col[] = [];
 
-  table.content.firstChild!.content.forEach((cell) => {
-    const colspan = cell.attrs.colspan || 1;
-    if (Array.isArray(cell.attrs.colwidth)) {
-      // We slice here to guard against our colwidth array having more entries
-      // Than the we actually span. We'll patch the document at a later point.
-      cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-        cols.push(['col', width ? { style: `width: ${width}px;` } : {}]);
-      });
-    } else {
-      // When we have merged cells on the first row (firstChild),
-      // We want to ensure we're creating the appropriate amount of
-      // cols the table still has.
-      cols.push(...Array.from({ length: colspan }, (_) => ['col', {}]));
-    }
-  });
+  if (getBooleanFF('platform.editor.custom-table-width')) {
+    table.content.firstChild!.content.forEach((cell) => {
+      const colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+          cols.push([
+            'col',
+            {
+              style: `width: ${
+                width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth
+              }px;`,
+            },
+          ]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push(
+          ...Array.from({ length: colspan }, (_) => [
+            'col',
+            { style: `width: ${tableCellMinWidth}px;` },
+          ]),
+        );
+      }
+    });
+  } else {
+    table.content.firstChild!.content.forEach((cell) => {
+      const colspan = cell.attrs.colspan || 1;
+      if (Array.isArray(cell.attrs.colwidth)) {
+        // We slice here to guard against our colwidth array having more entries
+        // Than the we actually span. We'll patch the document at a later point.
+        cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+          cols.push(['col', width ? { style: `width: ${width}px;` } : {}]);
+        });
+      } else {
+        // When we have merged cells on the first row (firstChild),
+        // We want to ensure we're creating the appropriate amount of
+        // cols the table still has.
+        cols.push(...Array.from({ length: colspan }, (_) => ['col', {}]));
+      }
+    });
+  }
 
   return cols;
 };

package/src/plugins/table/transforms/column-width.ts

@@ -13,6 +13,7 @@ import {
 
 import { ContentNodeWithPos } from 'prosemirror-utils';
 import { EditorView } from 'prosemirror-view';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import {
   getResizeState,
   normaliseTableLayout,
@@ -24,6 +25,8 @@ import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { insertColumnButtonOffset } from '../ui/common-styles';
 
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+
 export const updateColumnWidths =
   (resizeState: ResizeState, table: PMNode, start: number) =>
   (tr: Transaction): Transaction => {
@@ -71,49 +74,68 @@ export const updateColumnWidths =
     }
 
     // updating all cells with new attributes
-    const rows: PMNode[] = [];
-    const seen: { [key: number]: boolean } = {};
-    for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-      const row = table.child(rowIndex);
-      const cells: PMNode[] = [];
-
-      for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-        const mapIndex = rowIndex * map.width + columnIndex;
-        const pos = map.map[mapIndex];
-        const cell = table.nodeAt(pos);
-        if (!seen[pos] && cell) {
-          cells.push(
-            cell.type.createChecked(
-              updatedCellsAttrs[pos] || cell.attrs,
-              cell.content,
-              cell.marks,
-            ),
-          );
-          seen[pos] = true;
+    if (getBooleanFF('platform.editor.update-table-cell-width-via-step')) {
+      const seen: { [key: number]: boolean } = {};
+      for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+        for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+          const mapIndex = rowIndex * map.width + columnIndex;
+          const pos = map.map[mapIndex];
+          const cell = table.nodeAt(pos);
+          if (!seen[pos] && cell) {
+            if (updatedCellsAttrs[pos]) {
+              tr.step(new SetAttrsStep(pos + start, updatedCellsAttrs[pos]));
+            }
+            seen[pos] = true;
+          }
+        }
+      }
+    } else {
+      const rows: PMNode[] = [];
+      const seen: { [key: number]: boolean } = {};
+      for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
+        const row = table.child(rowIndex);
+        const cells: PMNode[] = [];
+
+        for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
+          const mapIndex = rowIndex * map.width + columnIndex;
+          const pos = map.map[mapIndex];
+          const cell = table.nodeAt(pos);
+          if (!seen[pos] && cell) {
+            cells.push(
+              cell.type.createChecked(
+                updatedCellsAttrs[pos] || cell.attrs,
+                cell.content,
+                cell.marks,
+              ),
+            );
+            seen[pos] = true;
+          }
         }
+        rows.push(row.type.createChecked(row.attrs, cells, row.marks));
       }
-      rows.push(row.type.createChecked(row.attrs, cells, row.marks));
+
+      const tablePos = start - 1;
+      const selectionBookmark = tr.selection.getBookmark();
+
+      tr.replaceWith(
+        tablePos,
+        tablePos + table.nodeSize,
+        table.type.createChecked(table.attrs, rows, table.marks),
+      );
+      /**
+       * We want to restore to the original selection but w/o applying the mapping. Function
+       * tr.replaceWith puts the selection after the inserted content. We need to manually
+       * set the selection back to original state. Mapping in this case doesn't quite work
+       * e.g. if we change the content before a selection. This is because mapping
+       * means moving it if the content in front of it changed. Instead we can get
+       * bookmark of selection.
+       *
+       * @see https://github.com/ProseMirror/prosemirror/issues/645
+       */
+      tr.setSelection(selectionBookmark.resolve(tr.doc));
     }
 
-    const tablePos = start - 1;
-    const selectionBookmark = tr.selection.getBookmark();
-
-    tr.replaceWith(
-      tablePos,
-      tablePos + table.nodeSize,
-      table.type.createChecked(table.attrs, rows, table.marks),
-    );
-    /**
-     * We want to restore to the original selection but w/o applying the mapping. Function
-     * tr.replaceWith puts the selection after the inserted content. We need to manually
-     * set the selection back to original state. Mapping in this case doesn't quite work
-     * e.g. if we change the content before a selection. This is because mapping
-     * means moving it if the content in front of it changed. Instead we can get
-     * bookmark of selection.
-     *
-     * @see https://github.com/ProseMirror/prosemirror/issues/645
-     */
-    return tr.setSelection(selectionBookmark.resolve(tr.doc));
+    return tr;
   };
 
 /**