@atlaskit/editor-plugin-table 1.6.8 → 1.6.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.8",
+	"version": "1.6.9",
 	"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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.8",
+	"version": "1.6.9",
 	"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/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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.8",
+	"version": "1.6.9",
 	"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.6.9",
   "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.11.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.10.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.5.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/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 };