@atlaskit/editor-plugin-table 7.25.18 → 7.25.20

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.20
+
+### Patch Changes
+
+- [#137344](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137344)
+  [`00c81bdf34c46`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00c81bdf34c46) -
+  [ux] Fixes an issue where tables that existed before "Support Table in Comment" are displayed as
+  centered 760px width tables when FF for Support Table in Comment is enabled.
+
+## 7.25.19
+
+### Patch Changes
+
+- [#136485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136485)
+  [`96d4b8a73c2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/96d4b8a73c2ea) -
+  Refactored table styles so that it is inside the tables plugin and not in the editors critical
+  path.
+
 ## 7.25.18
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -36,6 +36,7 @@ var _tableLocalId = require("./pm-plugins/table-local-id");
 var _tableResizing = require("./pm-plugins/table-resizing");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableWidth = require("./pm-plugins/table-width");
+var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _toDOM = require("./toDOM");
 var _toolbar = require("./toolbar");
@@ -45,6 +46,7 @@ var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteB
 var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
 var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
+var _globalStyles = require("./ui/global-styles");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -289,21 +291,28 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref14.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
+      }, {
+        name: 'tableWidthInCommentFix',
+        plugin: function plugin(_ref15) {
+          var _options$isTableAlign2;
+          var dispatch = _ref15.dispatch;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+        }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref15) {
+        plugin: function plugin(_ref16) {
           var _options$tableResizin;
-          var dispatch = _ref15.dispatch,
-            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+          var dispatch = _ref16.dispatch,
+            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
           return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref16) {
-          var dispatch = _ref16.dispatch,
-            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref17) {
+          var dispatch = _ref17.dispatch,
+            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -334,17 +343,20 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref17) {
-      var editorView = _ref17.editorView,
-        popupsMountPoint = _ref17.popupsMountPoint,
-        popupsBoundariesElement = _ref17.popupsBoundariesElement,
-        popupsScrollableElement = _ref17.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref18) {
+      var _api$featureFlags;
+      var editorView = _ref18.editorView,
+        popupsMountPoint = _ref18.popupsMountPoint,
+        popupsBoundariesElement = _ref18.popupsBoundariesElement,
+        popupsScrollableElement = _ref18.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
-      }, /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
+      }, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
+        featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()
+      }), /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
         plugins: {
           tableAnalyticsPluginState: _pluginKey.pluginKey,
           tablePluginState: _pluginKey2.pluginKey,
@@ -353,32 +365,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref18) {
-          var resizingPluginState = _ref18.tableResizingPluginState,
-            stickyHeadersState = _ref18.stickyHeadersState,
-            tablePluginState = _ref18.tablePluginState,
-            tableWidthPluginState = _ref18.tableWidthPluginState,
-            dragAndDropState = _ref18.dragAndDropState;
+        render: function render(_ref19) {
+          var resizingPluginState = _ref19.tableResizingPluginState,
+            stickyHeadersState = _ref19.stickyHeadersState,
+            tablePluginState = _ref19.tablePluginState,
+            tableWidthPluginState = _ref19.tableWidthPluginState,
+            dragAndDropState = _ref19.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref19 = tablePluginState,
-            tableNode = _ref19.tableNode,
-            tablePos = _ref19.tablePos,
-            targetCellPosition = _ref19.targetCellPosition,
-            isContextualMenuOpen = _ref19.isContextualMenuOpen,
-            tableRef = _ref19.tableRef,
-            pluginConfig = _ref19.pluginConfig,
-            insertColumnButtonIndex = _ref19.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref19.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref19.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref19.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref19.isDragAndDropEnabled,
-            tableWrapperTarget = _ref19.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref19.isCellMenuOpenByKeyboard;
+          var _ref20 = tablePluginState,
+            tableNode = _ref20.tableNode,
+            tablePos = _ref20.tablePos,
+            targetCellPosition = _ref20.targetCellPosition,
+            isContextualMenuOpen = _ref20.isContextualMenuOpen,
+            tableRef = _ref20.tableRef,
+            pluginConfig = _ref20.pluginConfig,
+            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref20.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
+            tableWrapperTarget = _ref20.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -471,8 +483,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref20) {
-        var formatMessage = _ref20.formatMessage;
+      quickInsert: function quickInsert(_ref21) {
+        var formatMessage = _ref21.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

package/dist/cjs/pm-plugins/table-width-in-comment-fix.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _alignment = require("../utils/alignment");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthInCommentFixPlugin');
+var getPluginState = function getPluginState(state) {
+  return state && pluginKey.getState(state);
+};
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, isTableAlignmentEnabled) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          documentHasLoadedOnce: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: function view() {
+      return {
+        update: function update(editorView) {
+          var state = editorView.state;
+          var pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          var documentHasLoadedOnce = pluginState.documentHasLoadedOnce;
+          if (documentHasLoadedOnce) {
+            return;
+          }
+          var table = state.schema.nodes.table;
+          (0, _rafSchd.default)(function () {
+            var tr = editorView.state.tr;
+            var tableWidthAndLayoutUpdated = false;
+            editorView.state.doc.descendants(function (node, pos) {
+              var isTable = node.type === table;
+              var width = node.attrs.width;
+              var layout = node.attrs.layout;
+              if (isTable && width === _editorSharedStyles.akEditorDefaultLayoutWidth && layout === 'default') {
+                tableWidthAndLayoutUpdated = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  width: null,
+                  layout: isTableAlignmentEnabled ? _alignment.ALIGN_START : 'default'
+                }));
+                return false;
+              }
+              // Returning false here because don't need to change nested tables
+              return false;
+            });
+            if (tableWidthAndLayoutUpdated) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            documentHasLoadedOnce: true
+          }));
+        }
+      };
+    }
+  });
+};

package/dist/cjs/ui/global-styles.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GlobalStylesWrapper = void 0;
+var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commonStyles = require("./common-styles");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
+  var featureFlags = _ref.featureFlags;
+  return (0, _platformFeatureFlags.fg)('platform_editor_move_table_styles_to_plugin') ? (0, _react.jsx)(_react.Global, {
+    styles: (0, _commonStyles.tableStyles)({
+      featureFlags: featureFlags
+    })
+  }) : null;
+};

package/dist/es2019/plugin.js

@@ -28,6 +28,7 @@ import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-loc
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
+import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
@@ -37,6 +38,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 const defaultGetEditorFeatureFlags = () => ({});
@@ -277,6 +279,14 @@ const tablesPlugin = ({
           var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
+      }, {
+        name: 'tableWidthInCommentFix',
+        plugin: ({
+          dispatch
+        }) => {
+          var _options$isTableAlign2;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+        }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
@@ -329,11 +339,14 @@ const tablesPlugin = ({
       popupsScrollableElement,
       dispatchAnalyticsEvent
     }) {
+      var _api$featureFlags;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(WithPluginState, {
+      }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+        featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()
+      }), /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,

package/dist/es2019/pm-plugins/table-width-in-comment-fix.js

@@ -0,0 +1,100 @@
+/*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+
+import rafSchedule from 'raf-schd';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { ALIGN_START } from '../utils/alignment';
+export const pluginKey = new PluginKey('tableWidthInCommentFixPlugin');
+const getPluginState = state => state && pluginKey.getState(state);
+const createPlugin = (dispatch, isTableAlignmentEnabled) => {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          documentHasLoadedOnce: false
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta) {
+          const keys = Object.keys(meta);
+          const changed = keys.some(key => {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            const newState = {
+              ...pluginState,
+              ...meta
+            };
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: () => {
+      return {
+        update(editorView) {
+          const {
+            state
+          } = editorView;
+          const pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          const {
+            documentHasLoadedOnce
+          } = pluginState;
+          if (documentHasLoadedOnce) {
+            return;
+          }
+          const {
+            table
+          } = state.schema.nodes;
+          rafSchedule(() => {
+            const tr = editorView.state.tr;
+            let tableWidthAndLayoutUpdated = false;
+            editorView.state.doc.descendants((node, pos) => {
+              const isTable = node.type === table;
+              const width = node.attrs.width;
+              const layout = node.attrs.layout;
+              if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
+                tableWidthAndLayoutUpdated = true;
+                tr.setNodeMarkup(pos, undefined, {
+                  ...node.attrs,
+                  width: null,
+                  layout: isTableAlignmentEnabled ? ALIGN_START : 'default'
+                });
+                return false;
+              }
+              // Returning false here because don't need to change nested tables
+              return false;
+            });
+            if (tableWidthAndLayoutUpdated) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            documentHasLoadedOnce: true
+          }));
+        }
+      };
+    }
+  });
+};
+export { createPlugin };

package/dist/es2019/ui/global-styles.js

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { Global, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { tableStyles } from './common-styles';
+export const GlobalStylesWrapper = ({
+  featureFlags
+}) => {
+  return fg('platform_editor_move_table_styles_to_plugin') ? jsx(Global, {
+    styles: tableStyles({
+      featureFlags
+    })
+  }) : null;
+};

package/dist/esm/plugin.js

@@ -31,6 +31,7 @@ import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-loc
 import { createPlugin as createFlexiResizingPlugin, getPluginState as getFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
+import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
@@ -40,6 +41,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
@@ -282,21 +284,28 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref14.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
+      }, {
+        name: 'tableWidthInCommentFix',
+        plugin: function plugin(_ref15) {
+          var _options$isTableAlign2;
+          var dispatch = _ref15.dispatch;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? createTableWidthInCommentFixPlugin(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+        }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref15) {
+        plugin: function plugin(_ref16) {
           var _options$tableResizin;
-          var dispatch = _ref15.dispatch,
-            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+          var dispatch = _ref16.dispatch,
+            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
           return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref16) {
-          var dispatch = _ref16.dispatch,
-            dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref17) {
+          var dispatch = _ref17.dispatch,
+            dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent);
         }
       }, {
@@ -327,17 +336,20 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref17) {
-      var editorView = _ref17.editorView,
-        popupsMountPoint = _ref17.popupsMountPoint,
-        popupsBoundariesElement = _ref17.popupsBoundariesElement,
-        popupsScrollableElement = _ref17.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref18) {
+      var _api$featureFlags;
+      var editorView = _ref18.editorView,
+        popupsMountPoint = _ref18.popupsMountPoint,
+        popupsBoundariesElement = _ref18.popupsBoundariesElement,
+        popupsScrollableElement = _ref18.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(WithPluginState, {
+      }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
+        featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState()
+      }), /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,
@@ -346,32 +358,32 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref18) {
-          var resizingPluginState = _ref18.tableResizingPluginState,
-            stickyHeadersState = _ref18.stickyHeadersState,
-            tablePluginState = _ref18.tablePluginState,
-            tableWidthPluginState = _ref18.tableWidthPluginState,
-            dragAndDropState = _ref18.dragAndDropState;
+        render: function render(_ref19) {
+          var resizingPluginState = _ref19.tableResizingPluginState,
+            stickyHeadersState = _ref19.stickyHeadersState,
+            tablePluginState = _ref19.tablePluginState,
+            tableWidthPluginState = _ref19.tableWidthPluginState,
+            dragAndDropState = _ref19.dragAndDropState;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
           var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
           var isResizing = isColumnResizing || isTableResizing;
           var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var _ref19 = tablePluginState,
-            tableNode = _ref19.tableNode,
-            tablePos = _ref19.tablePos,
-            targetCellPosition = _ref19.targetCellPosition,
-            isContextualMenuOpen = _ref19.isContextualMenuOpen,
-            tableRef = _ref19.tableRef,
-            pluginConfig = _ref19.pluginConfig,
-            insertColumnButtonIndex = _ref19.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref19.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref19.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref19.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref19.isDragAndDropEnabled,
-            tableWrapperTarget = _ref19.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref19.isCellMenuOpenByKeyboard;
+          var _ref20 = tablePluginState,
+            tableNode = _ref20.tableNode,
+            tablePos = _ref20.tablePos,
+            targetCellPosition = _ref20.targetCellPosition,
+            isContextualMenuOpen = _ref20.isContextualMenuOpen,
+            tableRef = _ref20.tableRef,
+            pluginConfig = _ref20.pluginConfig,
+            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref20.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
+            tableWrapperTarget = _ref20.tableWrapperTarget,
+            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard && fg('platform_editor_a11y_table_context_menu')) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
@@ -464,8 +476,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref20) {
-        var formatMessage = _ref20.formatMessage;
+      quickInsert: function quickInsert(_ref21) {
+        var formatMessage = _ref21.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

package/dist/esm/pm-plugins/table-width-in-comment-fix.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+
+import rafSchedule from 'raf-schd';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { ALIGN_START } from '../utils/alignment';
+export var pluginKey = new PluginKey('tableWidthInCommentFixPlugin');
+var getPluginState = function getPluginState(state) {
+  return state && pluginKey.getState(state);
+};
+var createPlugin = function createPlugin(dispatch, isTableAlignmentEnabled) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          documentHasLoadedOnce: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          var keys = Object.keys(meta);
+          var changed = keys.some(function (key) {
+            return pluginState[key] !== meta[key];
+          });
+          if (changed) {
+            var newState = _objectSpread(_objectSpread({}, pluginState), meta);
+            dispatch(pluginKey, newState);
+            return newState;
+          }
+        }
+        return pluginState;
+      }
+    },
+    view: function view() {
+      return {
+        update: function update(editorView) {
+          var state = editorView.state;
+          var pluginState = getPluginState(state);
+          if (!pluginState) {
+            return;
+          }
+          var documentHasLoadedOnce = pluginState.documentHasLoadedOnce;
+          if (documentHasLoadedOnce) {
+            return;
+          }
+          var table = state.schema.nodes.table;
+          rafSchedule(function () {
+            var tr = editorView.state.tr;
+            var tableWidthAndLayoutUpdated = false;
+            editorView.state.doc.descendants(function (node, pos) {
+              var isTable = node.type === table;
+              var width = node.attrs.width;
+              var layout = node.attrs.layout;
+              if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
+                tableWidthAndLayoutUpdated = true;
+                tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+                  width: null,
+                  layout: isTableAlignmentEnabled ? ALIGN_START : 'default'
+                }));
+                return false;
+              }
+              // Returning false here because don't need to change nested tables
+              return false;
+            });
+            if (tableWidthAndLayoutUpdated) {
+              tr.setMeta('addToHistory', false);
+              editorView.dispatch(tr);
+            }
+          })();
+          editorView.dispatch(state.tr.setMeta(pluginKey, {
+            documentHasLoadedOnce: true
+          }));
+        }
+      };
+    }
+  });
+};
+export { createPlugin };

package/dist/esm/ui/global-styles.js

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { Global, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { tableStyles } from './common-styles';
+export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
+  var featureFlags = _ref.featureFlags;
+  return fg('platform_editor_move_table_styles_to_plugin') ? jsx(Global, {
+    styles: tableStyles({
+      featureFlags: featureFlags
+    })
+  }) : null;
+};

package/dist/types/pm-plugins/table-width-in-comment-fix.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type TableWidthInCommentFixPluginState = {
+    documentHasLoadedOnce: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthInCommentFixPluginState>;
+declare const createPlugin: (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => SafePlugin<{
+    documentHasLoadedOnce: boolean;
+}>;
+export { createPlugin };

package/dist/types/ui/global-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+export declare const GlobalStylesWrapper: ({ featureFlags, }: {
+    featureFlags: FeatureFlags | undefined;
+}) => jsx.JSX.Element | null;

package/dist/types-ts4.5/pm-plugins/table-width-in-comment-fix.d.ts

@@ -0,0 +1,11 @@
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+type TableWidthInCommentFixPluginState = {
+    documentHasLoadedOnce: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthInCommentFixPluginState>;
+declare const createPlugin: (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => SafePlugin<{
+    documentHasLoadedOnce: boolean;
+}>;
+export { createPlugin };

package/dist/types-ts4.5/ui/global-styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { jsx } from '@emotion/react';
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+export declare const GlobalStylesWrapper: ({ featureFlags, }: {
+    featureFlags: FeatureFlags | undefined;
+}) => jsx.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.18",
+	"version": "7.25.20",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -117,6 +117,9 @@
 		"platform_editor_dark_mode_cell_header_color_fix": {
 			"type": "boolean"
 		},
+		"platform_editor_move_table_styles_to_plugin": {
+			"type": "boolean"
+		},
 		"platform_editor_a11y_table_context_menu": {
 			"type": "boolean"
 		},

package/src/plugin.tsx

@@ -72,6 +72,7 @@ import {
 	createPlugin as createTableWidthPlugin,
 	pluginKey as tableWidthPluginKey,
 } from './pm-plugins/table-width';
+import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 import { getToolbarConfig } from './toolbar';
@@ -82,6 +83,7 @@ import FloatingDeleteButton from './ui/FloatingDeleteButton';
 import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './ui/global-styles';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { createTableWithWidth } from './utils';
 
@@ -456,6 +458,16 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 								)
 							: undefined,
 				},
+				{
+					name: 'tableWidthInCommentFix',
+					plugin: ({ dispatch }) =>
+						options?.tableResizingEnabled && options?.isCommentEditor
+							? createTableWidthInCommentFixPlugin(
+									dispatch,
+									options?.isTableAlignmentEnabled ?? false,
+								)
+							: undefined,
+				},
 				// TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
 				{
 					name: 'tableOverflowAnalyticsPlugin',
@@ -515,6 +527,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 					dispatchAnalyticsEvent={dispatchAnalyticsEvent}
 					fallbackComponent={null}
 				>
+					<GlobalStylesWrapper featureFlags={api?.featureFlags?.sharedState.currentState()} />
 					<WithPluginState
 						plugins={{
 							tableAnalyticsPluginState: tableAnalyticsPluginKey,

package/src/pm-plugins/table-width-in-comment-fix.ts

@@ -0,0 +1,113 @@
+/*
+	Existing legacy tables in Comment editor have set attributes:
+	- width = 760
+	- layout = 'default'.
+
+	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
+	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
+	the editor container until a user decided to edit their old comment and set a custom table width themselves.
+
+	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
+	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
+*/
+
+import rafSchedule from 'raf-schd';
+
+import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
+
+import { ALIGN_START } from '../utils/alignment';
+
+type TableWidthInCommentFixPluginState = {
+	documentHasLoadedOnce: boolean;
+};
+
+export const pluginKey = new PluginKey<TableWidthInCommentFixPluginState>(
+	'tableWidthInCommentFixPlugin',
+);
+const getPluginState = (state: EditorState): TableWidthInCommentFixPluginState | undefined | null =>
+	state && pluginKey.getState(state);
+
+const createPlugin = (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => {
+	return new SafePlugin({
+		key: pluginKey,
+		state: {
+			init() {
+				return {
+					documentHasLoadedOnce: false,
+				};
+			},
+			apply(tr, pluginState) {
+				const meta = tr.getMeta(pluginKey);
+				if (meta) {
+					const keys = Object.keys(meta) as Array<keyof TableWidthInCommentFixPluginState>;
+					const changed = keys.some((key) => {
+						return pluginState[key] !== meta[key];
+					});
+
+					if (changed) {
+						const newState = { ...pluginState, ...meta };
+
+						dispatch(pluginKey, newState);
+						return newState;
+					}
+				}
+
+				return pluginState;
+			},
+		},
+		view: () => {
+			return {
+				update(editorView) {
+					const { state } = editorView;
+					const pluginState = getPluginState(state);
+					if (!pluginState) {
+						return;
+					}
+					const { documentHasLoadedOnce } = pluginState;
+
+					if (documentHasLoadedOnce) {
+						return;
+					}
+
+					const { table } = state.schema.nodes;
+					rafSchedule(() => {
+						const tr = editorView.state.tr;
+						let tableWidthAndLayoutUpdated = false;
+						editorView.state.doc.descendants((node, pos) => {
+							const isTable = node.type === table;
+							const width = node.attrs.width;
+							const layout = node.attrs.layout;
+							if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
+								tableWidthAndLayoutUpdated = true;
+								tr.setNodeMarkup(pos, undefined, {
+									...node.attrs,
+									width: null,
+									layout: isTableAlignmentEnabled ? ALIGN_START : 'default',
+								});
+								return false;
+							}
+							// Returning false here because don't need to change nested tables
+							return false;
+						});
+						if (tableWidthAndLayoutUpdated) {
+							tr.setMeta('addToHistory', false);
+							editorView.dispatch(tr);
+						}
+					})();
+
+					editorView.dispatch(
+						state.tr.setMeta(pluginKey, {
+							documentHasLoadedOnce: true,
+						}),
+					);
+				},
+			};
+		},
+	});
+};
+
+export { createPlugin };

package/src/ui/global-styles.tsx

@@ -0,0 +1,21 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { Global, jsx } from '@emotion/react';
+
+import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import { fg } from '@atlaskit/platform-feature-flags';
+
+import { tableStyles } from './common-styles';
+
+export const GlobalStylesWrapper = ({
+	featureFlags,
+}: {
+	featureFlags: FeatureFlags | undefined;
+}) => {
+	return fg('platform_editor_move_table_styles_to_plugin') ? (
+		<Global styles={tableStyles({ featureFlags })} />
+	) : null;
+};