@atlaskit/editor-plugin-table 1.6.8 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-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
+
+- [`6e54d9fbeea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e54d9fbeea) - Added tableAddWidthPlugin
+
 ## 1.6.8
 
 ### Patch Changes

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

@@ -18,6 +18,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _icons = require("@atlaskit/editor-common/icons");
 var _createPluginConfig = require("./create-plugin-config");
 var _tableLocalId = require("./pm-plugins/table-local-id");
+var _tableAddWidth = require("./pm-plugins/table-add-width");
 var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
 var _plugin = require("./pm-plugins/decorations/plugin");
 var _keymap = require("./pm-plugins/keymap");
@@ -175,6 +176,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
           var dispatch = _ref7.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
+      }, {
+        name: 'tableAddWidth',
+        plugin: function plugin(_ref8) {
+          var dispatch = _ref8.dispatch;
+          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && options ? (0, _tableAddWidth.createPlugin)(dispatch, options.fullWidthEnabled || false) : undefined;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: function plugin() {
@@ -203,12 +210,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        popupsMountPoint = _ref8.popupsMountPoint,
-        popupsBoundariesElement = _ref8.popupsBoundariesElement,
-        popupsScrollableElement = _ref8.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        popupsMountPoint = _ref9.popupsMountPoint,
+        popupsBoundariesElement = _ref9.popupsBoundariesElement,
+        popupsScrollableElement = _ref9.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -219,25 +226,25 @@ var tablesPlugin = function tablesPlugin(options, api) {
           tableResizingPluginState: _tableResizing.pluginKey,
           stickyHeadersState: _stickyHeaders.pluginKey
         },
-        render: function render(_ref9) {
-          var resizingPluginState = _ref9.tableResizingPluginState,
-            stickyHeadersState = _ref9.stickyHeadersState,
-            tablePluginState = _ref9.tablePluginState;
+        render: function render(_ref10) {
+          var resizingPluginState = _ref10.tableResizingPluginState,
+            stickyHeadersState = _ref10.stickyHeadersState,
+            tablePluginState = _ref10.tablePluginState;
           var state = editorView.state;
           var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref10 = tablePluginState,
-            tableNode = _ref10.tableNode,
-            tablePos = _ref10.tablePos,
-            targetCellPosition = _ref10.targetCellPosition,
-            isContextualMenuOpen = _ref10.isContextualMenuOpen,
-            layout = _ref10.layout,
-            tableRef = _ref10.tableRef,
-            pluginConfig = _ref10.pluginConfig,
-            insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref10.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
-            tableWrapperTarget = _ref10.tableWrapperTarget;
+          var _ref11 = tablePluginState,
+            tableNode = _ref11.tableNode,
+            tablePos = _ref11.tablePos,
+            targetCellPosition = _ref11.targetCellPosition,
+            isContextualMenuOpen = _ref11.isContextualMenuOpen,
+            layout = _ref11.layout,
+            tableRef = _ref11.tableRef,
+            pluginConfig = _ref11.pluginConfig,
+            insertColumnButtonIndex = _ref11.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref11.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref11.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref11.isHeaderRowEnabled,
+            tableWrapperTarget = _ref11.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? null : (0, _utils3.isLayoutSupported)(state) && options && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -303,8 +310,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

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

@@ -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-add-width.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _steps = require("@atlaskit/adf-schema/steps");
+var _prosemirrorTransform = require("prosemirror-transform");
+var _excluded = ["width"];
+/**
+ * A plugin for scan the document, add width value to table's width attribute when necessary
+ *
+ */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
+  return new _safePlugin.SafePlugin({
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      // When document first load in Confluence, initially it is an empty document
+      // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
+      // what we need to do is to add width attr to all tables in the real document
+      // isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
+      var isReplaceDocumentOperation = transactions.some(function (tr) {
+        if (tr.getMeta('replaceDocument')) {
+          return true;
+        }
+        var hasStepReplacingEntireDocument = tr.steps.some(function (step) {
+          if (!(step instanceof _prosemirrorTransform.ReplaceStep)) {
+            return false;
+          }
+          var isStepReplacingFromDocStart = step.from === 0;
+          var isStepReplacingUntilTheEndOfDocument = step.to === _oldState.doc.content.size;
+          if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
+            return false;
+          }
+          return true;
+        });
+        return hasStepReplacingEntireDocument;
+      });
+      if (!isReplaceDocumentOperation) {
+        return null;
+      }
+      var tr = newState.tr;
+      var table = newState.schema.nodes.table;
+      newState.doc.forEach(function (node, offset, index) {
+        if (node.type === table) {
+          var width = node.attrs.width;
+          var layout = node.attrs.layout;
+          if (!width && layout) {
+            var tableWidthCal;
+            if (fullWidthEnabled) {
+              tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+            } else {
+              switch (layout) {
+                case 'wide':
+                  tableWidthCal = _editorSharedStyles.akEditorWideLayoutWidth;
+                  break;
+                case 'full-width':
+                  tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+                  break;
+                // when in fix-width apprearance, no need to assign value to table width attr
+                // as when table is created, width attr is null by default, table rendered using layout attr
+                default:
+                  break;
+              }
+            }
+            var _node$attrs = node.attrs,
+              _width = _node$attrs.width,
+              rest = (0, _objectWithoutProperties2.default)(_node$attrs, _excluded);
+            if (tableWidthCal) {
+              tr.step(new _steps.SetAttrsStep(offset, _objectSpread({
+                width: tableWidthCal
+              }, rest)));
+            }
+          }
+        }
+      });
+      return tr;
+    }
+  });
+};
+exports.createPlugin = createPlugin;

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/version.json

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

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

@@ -11,6 +11,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
+import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -158,6 +159,11 @@ const tablesPlugin = (options, api) => {
         plugin: ({
           dispatch
         }) => createTableLocalIdPlugin(dispatch)
+      }, {
+        name: 'tableAddWidth',
+        plugin: ({
+          dispatch
+        }) => getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(dispatch, options.fullWidthEnabled || false) : undefined
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: () => {

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-add-width.js

@@ -0,0 +1,78 @@
+/**
+ * A plugin for scan the document, add width value to table's width attribute when necessary
+ *
+ */
+
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { ReplaceStep } from 'prosemirror-transform';
+const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
+  appendTransaction: (transactions, _oldState, newState) => {
+    // When document first load in Confluence, initially it is an empty document
+    // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
+    // what we need to do is to add width attr to all tables in the real document
+    // isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
+    const isReplaceDocumentOperation = transactions.some(tr => {
+      if (tr.getMeta('replaceDocument')) {
+        return true;
+      }
+      const hasStepReplacingEntireDocument = tr.steps.some(step => {
+        if (!(step instanceof ReplaceStep)) {
+          return false;
+        }
+        const isStepReplacingFromDocStart = step.from === 0;
+        const isStepReplacingUntilTheEndOfDocument = step.to === _oldState.doc.content.size;
+        if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
+          return false;
+        }
+        return true;
+      });
+      return hasStepReplacingEntireDocument;
+    });
+    if (!isReplaceDocumentOperation) {
+      return null;
+    }
+    const tr = newState.tr;
+    const {
+      table
+    } = newState.schema.nodes;
+    newState.doc.forEach((node, offset, index) => {
+      if (node.type === table) {
+        const width = node.attrs.width;
+        const layout = node.attrs.layout;
+        if (!width && layout) {
+          let tableWidthCal;
+          if (fullWidthEnabled) {
+            tableWidthCal = akEditorFullWidthLayoutWidth;
+          } else {
+            switch (layout) {
+              case 'wide':
+                tableWidthCal = akEditorWideLayoutWidth;
+                break;
+              case 'full-width':
+                tableWidthCal = akEditorFullWidthLayoutWidth;
+                break;
+              // when in fix-width apprearance, no need to assign value to table width attr
+              // as when table is created, width attr is null by default, table rendered using layout attr
+              default:
+                break;
+            }
+          }
+          const {
+            width,
+            ...rest
+          } = node.attrs;
+          if (tableWidthCal) {
+            tr.step(new SetAttrsStep(offset, {
+              width: tableWidthCal,
+              ...rest
+            }));
+          }
+        }
+      }
+    });
+    return tr;
+  }
+});
+export { createPlugin };

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/version.json

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

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

@@ -11,6 +11,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
+import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -168,6 +169,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
           var dispatch = _ref7.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
+      }, {
+        name: 'tableAddWidth',
+        plugin: function plugin(_ref8) {
+          var dispatch = _ref8.dispatch;
+          return getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(dispatch, options.fullWidthEnabled || false) : undefined;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: function plugin() {
@@ -196,12 +203,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        popupsMountPoint = _ref8.popupsMountPoint,
-        popupsBoundariesElement = _ref8.popupsBoundariesElement,
-        popupsScrollableElement = _ref8.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        popupsMountPoint = _ref9.popupsMountPoint,
+        popupsBoundariesElement = _ref9.popupsBoundariesElement,
+        popupsScrollableElement = _ref9.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -212,25 +219,25 @@ var tablesPlugin = function tablesPlugin(options, api) {
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        render: function render(_ref9) {
-          var resizingPluginState = _ref9.tableResizingPluginState,
-            stickyHeadersState = _ref9.stickyHeadersState,
-            tablePluginState = _ref9.tablePluginState;
+        render: function render(_ref10) {
+          var resizingPluginState = _ref10.tableResizingPluginState,
+            stickyHeadersState = _ref10.stickyHeadersState,
+            tablePluginState = _ref10.tablePluginState;
           var state = editorView.state;
           var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref10 = tablePluginState,
-            tableNode = _ref10.tableNode,
-            tablePos = _ref10.tablePos,
-            targetCellPosition = _ref10.targetCellPosition,
-            isContextualMenuOpen = _ref10.isContextualMenuOpen,
-            layout = _ref10.layout,
-            tableRef = _ref10.tableRef,
-            pluginConfig = _ref10.pluginConfig,
-            insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref10.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
-            tableWrapperTarget = _ref10.tableWrapperTarget;
+          var _ref11 = tablePluginState,
+            tableNode = _ref11.tableNode,
+            tablePos = _ref11.tablePos,
+            targetCellPosition = _ref11.targetCellPosition,
+            isContextualMenuOpen = _ref11.isContextualMenuOpen,
+            layout = _ref11.layout,
+            tableRef = _ref11.tableRef,
+            pluginConfig = _ref11.pluginConfig,
+            insertColumnButtonIndex = _ref11.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref11.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref11.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref11.isHeaderRowEnabled,
+            tableWrapperTarget = _ref11.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = getBooleanFF('platform.editor.custom-table-width') ? null : isLayoutSupported(state) && options && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -296,8 +303,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

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

@@ -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-add-width.js

@@ -0,0 +1,81 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["width"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+/**
+ * A plugin for scan the document, add width value to table's width attribute when necessary
+ *
+ */
+
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { ReplaceStep } from 'prosemirror-transform';
+var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
+  return new SafePlugin({
+    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+      // When document first load in Confluence, initially it is an empty document
+      // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
+      // what we need to do is to add width attr to all tables in the real document
+      // isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
+      var isReplaceDocumentOperation = transactions.some(function (tr) {
+        if (tr.getMeta('replaceDocument')) {
+          return true;
+        }
+        var hasStepReplacingEntireDocument = tr.steps.some(function (step) {
+          if (!(step instanceof ReplaceStep)) {
+            return false;
+          }
+          var isStepReplacingFromDocStart = step.from === 0;
+          var isStepReplacingUntilTheEndOfDocument = step.to === _oldState.doc.content.size;
+          if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
+            return false;
+          }
+          return true;
+        });
+        return hasStepReplacingEntireDocument;
+      });
+      if (!isReplaceDocumentOperation) {
+        return null;
+      }
+      var tr = newState.tr;
+      var table = newState.schema.nodes.table;
+      newState.doc.forEach(function (node, offset, index) {
+        if (node.type === table) {
+          var width = node.attrs.width;
+          var layout = node.attrs.layout;
+          if (!width && layout) {
+            var tableWidthCal;
+            if (fullWidthEnabled) {
+              tableWidthCal = akEditorFullWidthLayoutWidth;
+            } else {
+              switch (layout) {
+                case 'wide':
+                  tableWidthCal = akEditorWideLayoutWidth;
+                  break;
+                case 'full-width':
+                  tableWidthCal = akEditorFullWidthLayoutWidth;
+                  break;
+                // when in fix-width apprearance, no need to assign value to table width attr
+                // as when table is created, width attr is null by default, table rendered using layout attr
+                default:
+                  break;
+              }
+            }
+            var _node$attrs = node.attrs,
+              _width = _node$attrs.width,
+              rest = _objectWithoutProperties(_node$attrs, _excluded);
+            if (tableWidthCal) {
+              tr.step(new SetAttrsStep(offset, _objectSpread({
+                width: tableWidthCal
+              }, rest)));
+            }
+          }
+        }
+      });
+      return tr;
+    }
+  });
+};
+export { createPlugin };

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/version.json

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

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

@@ -0,0 +1,8 @@
+/**
+ * A plugin for scan the document, add width value to table's width attribute when necessary
+ *
+ */
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<any, any>;
+export { createPlugin };

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

@@ -0,0 +1,8 @@
+/**
+ * A plugin for scan the document, add width value to table's width attribute when necessary
+ *
+ */
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<any, any>;
+export { createPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "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.10.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.9.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.4.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",

package/src/plugins/table/index.tsx

@@ -37,6 +37,7 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
+import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -268,6 +269,16 @@ const tablesPlugin: NextEditorPlugin<
           name: 'tableLocalId',
           plugin: ({ dispatch }) => createTableLocalIdPlugin(dispatch),
         },
+        {
+          name: 'tableAddWidth',
+          plugin: ({ dispatch }) =>
+            getBooleanFF('platform.editor.custom-table-width') && options
+              ? createTableAddWidthPlugin(
+                  dispatch,
+                  options.fullWidthEnabled || false,
+                )
+              : undefined,
+        },
 
         {
           name: 'tableGetEditorViewReferencePlugin',

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-add-width.ts

@@ -0,0 +1,103 @@
+/**
+ * A plugin for scan the document, add width value to table's width attribute when necessary
+ *
+ */
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import {
+  akEditorFullWidthLayoutWidth,
+  akEditorWideLayoutWidth,
+} from '@atlaskit/editor-shared-styles';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { ReplaceStep } from 'prosemirror-transform';
+
+type __ReplaceStep = ReplaceStep & {
+  // Properties `to` and `from` are private attributes of ReplaceStep.
+  to: number;
+  from: number;
+};
+
+const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
+  new SafePlugin({
+    appendTransaction: (transactions, _oldState, newState) => {
+      // When document first load in Confluence, initially it is an empty document
+      // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
+      // what we need to do is to add width attr to all tables in the real document
+      // isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
+      const isReplaceDocumentOperation = transactions.some((tr) => {
+        if (tr.getMeta('replaceDocument')) {
+          return true;
+        }
+
+        const hasStepReplacingEntireDocument = tr.steps.some((step) => {
+          if (!(step instanceof ReplaceStep)) {
+            return false;
+          }
+
+          const isStepReplacingFromDocStart =
+            (step as __ReplaceStep).from === 0;
+          const isStepReplacingUntilTheEndOfDocument =
+            (step as __ReplaceStep).to === _oldState.doc.content.size;
+
+          if (
+            !isStepReplacingFromDocStart ||
+            !isStepReplacingUntilTheEndOfDocument
+          ) {
+            return false;
+          }
+          return true;
+        });
+
+        return hasStepReplacingEntireDocument;
+      });
+
+      if (!isReplaceDocumentOperation) {
+        return null;
+      }
+
+      const tr = newState.tr;
+      const { table } = newState.schema.nodes;
+
+      newState.doc.forEach((node, offset, index) => {
+        if (node.type === table) {
+          const width = node.attrs.width;
+          const layout = node.attrs.layout;
+
+          if (!width && layout) {
+            let tableWidthCal;
+
+            if (fullWidthEnabled) {
+              tableWidthCal = akEditorFullWidthLayoutWidth;
+            } else {
+              switch (layout) {
+                case 'wide':
+                  tableWidthCal = akEditorWideLayoutWidth;
+                  break;
+                case 'full-width':
+                  tableWidthCal = akEditorFullWidthLayoutWidth;
+                  break;
+                // when in fix-width apprearance, no need to assign value to table width attr
+                // as when table is created, width attr is null by default, table rendered using layout attr
+                default:
+                  break;
+              }
+            }
+
+            const { width, ...rest } = node.attrs;
+
+            if (tableWidthCal) {
+              tr.step(
+                new SetAttrsStep(offset, {
+                  width: tableWidthCal,
+                  ...rest,
+                }),
+              );
+            }
+          }
+        }
+      });
+      return tr;
+    },
+  });
+
+export { createPlugin };

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;
 };