@atlaskit/editor-plugin-table 7.16.4 → 7.16.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.6
+
+### Patch Changes
+
+-   [#102478](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102478)
+    [`3378951608b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3378951608b0) -
+    [ED-23332] Update adf-schema package to 36.10.1
+-   Updated dependencies
+
+## 7.16.5
+
+### Patch Changes
+
+-   [#102210](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102210)
+    [`fe0d7aa7668a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fe0d7aa7668a) -
+    Set layout attribute for tables to align-left when inserted in full width editor
+
 ## 7.16.4
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -143,9 +143,13 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     return true;
   };
 };
-var createTable = exports.createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
+var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return function (state, dispatch) {
-    var table = (0, _utils3.createTableWithWidth)(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
+    var table = (0, _utils3.createTableWithWidth)({
+      isTableScalingEnabled: isTableScalingEnabled,
+      isTableAlignmentEnabled: isTableAlignmentEnabled,
+      isFullWidthModeEnabled: isFullWidthModeEnabled
+    })(state.schema);
     if (dispatch) {
       var tr = (0, _utils.safeInsert)(table)(state.tr).scrollIntoView();
       if (editorAnalyticsAPI) {
@@ -164,13 +168,18 @@ var createTable = exports.createTable = function createTable(isTableScalingEnabl
     return true;
   };
 };
-var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, editorAnalyticsAPI) {
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
-      var tableNode = (0, _utils3.createTableWithWidth)(isTableScalingEnabled, isFullWidthModeEnabled, {
-        rowsCount: rowsCount,
-        colsCount: colsCount
+      var tableNode = (0, _utils3.createTableWithWidth)({
+        isTableScalingEnabled: isTableScalingEnabled,
+        isFullWidthModeEnabled: isFullWidthModeEnabled,
+        isTableAlignmentEnabled: isTableAlignmentEnabled,
+        createTableProps: {
+          rowsCount: rowsCount,
+          colsCount: colsCount
+        }
       })(tr.doc.type.schema);
       var newTr = (0, _utils.safeInsert)(tableNode)(tr).scrollIntoView();
       if (inputMethod) {

package/dist/cjs/plugin.js

@@ -106,7 +106,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
           var _api$contentInsertion, _api$contentInsertion2;
-          var node = (0, _utils2.createTableWithWidth)(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled)(state.schema);
+          var node = (0, _utils2.createTableWithWidth)({
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+            isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+            isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled
+          })(state.schema);
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
             state: state,
             dispatch: dispatch,
@@ -124,7 +128,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
       return [{
@@ -192,9 +196,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dragAndDropEnabled = _ref7.dragAndDropEnabled,
             _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
             isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
+            _ref7$isTableAlignmen = _ref7.isTableAlignmentEnabled,
+            isTableAlignmentEnabled = _ref7$isTableAlignmen === void 0 ? false : _ref7$isTableAlignmen,
             _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
             fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -252,10 +258,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref13) {
-          var _options$fullWidthEna, _options$isTableScali;
+          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
           var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
             dispatch = _ref13.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) : undefined;
+          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) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -442,7 +448,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var _api$table;
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-            var tableNode = (0, _utils2.createTableWithWidth)(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema);
+            var tableNode = (0, _utils2.createTableWithWidth)({
+              isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+              isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+              isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled
+            })(state.schema);
             var tr = insert(tableNode);
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,

package/dist/cjs/pm-plugins/keymap.js

@@ -18,14 +18,15 @@ var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with
 function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
-  var pluginInjectionApi = arguments.length > 5 ? arguments[5] : undefined;
-  var getIntl = arguments.length > 6 ? arguments[6] : undefined;
+  var isTableAlignmentEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var isFullWidthEnabled = arguments.length > 5 ? arguments[5] : undefined;
+  var pluginInjectionApi = arguments.length > 6 ? arguments[6] : undefined;
+  var getIntl = arguments.length > 7 ? arguments[7] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.previousCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, (0, _insert.createTable)(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, (0, _insert.createTable)(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, (0, _commands.chainCommands)((0, _commandsWithAnalytics.deleteTableIfSelectedWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD), (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD)), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, _commands2.moveCursorBackward, list);
 

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

@@ -14,6 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _alignment = require("../utils/alignment");
 var _utils2 = require("./table-resizing/utils");
 var _excluded = ["width"];
 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; }
@@ -23,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Also holds resizing state to hide / show table controls
  */
 var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
-var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) {
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
@@ -96,8 +97,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
       var referentialityTr = transactions.find(function (tr) {
         return tr.getMeta('referentialityTableInserted');
       });
-      var shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
-      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
+      var shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
+      var shouldPatchTableAlignment = fullWidthEnabled && isTableAlignmentEnabled;
+      if (!isReplaceDocumentOperation && (!shouldPatchTableWidth && !shouldPatchTableAlignment || !referentialityTr)) {
         return null;
       }
       var table = newState.schema.nodes.table;
@@ -157,10 +159,15 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
       }
       if (referentialityTr) {
         referentialityTr.steps.forEach(function (step) {
-          step.getMap().forEach(function (oldStart, oldEnd, newStart, newEnd) {
+          step.getMap().forEach(function (_, __, newStart, newEnd) {
             newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
-              if (node.type === table && node.attrs.width !== _utils2.TABLE_MAX_WIDTH) {
-                tr.setNodeAttribute(pos, 'width', _utils2.TABLE_MAX_WIDTH);
+              if (node.type === table) {
+                if (shouldPatchTableWidth && node.attrs.width !== _utils2.TABLE_MAX_WIDTH) {
+                  tr.setNodeAttribute(pos, 'width', _utils2.TABLE_MAX_WIDTH);
+                }
+                if (shouldPatchTableAlignment) {
+                  tr.setNodeAttribute(pos, 'layout', _alignment.ALIGN_START);
+                }
               }
             });
           });

package/dist/cjs/utils/alignment.js

@@ -3,11 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.normaliseAlignment = void 0;
+exports.normaliseAlignment = exports.ALIGN_START = exports.ALIGN_CENTER = void 0;
+var ALIGN_START = exports.ALIGN_START = 'align-start';
+var ALIGN_CENTER = exports.ALIGN_CENTER = 'center';
+
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 var normaliseAlignment = exports.normaliseAlignment = function normaliseAlignment(layout) {
-  return layout === 'center' || layout === 'align-start' ? layout : 'center';
+  return layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
 };

package/dist/cjs/utils/create.js

@@ -10,16 +10,21 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../pm-plugins/table-resizing/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; }
 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; }
-var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, createTableProps) {
+var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(_ref) {
+  var isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
+    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
+    createTableProps = _ref.createTableProps;
   return function (schema) {
+    var attrsOverrides = {};
     if (isTableScalingEnabled && isFullWidthModeEnabled) {
-      return (0, _utils.createTable)(_objectSpread({
-        schema: schema,
-        tableWidth: _utils2.TABLE_MAX_WIDTH
-      }, createTableProps));
+      attrsOverrides.tableWidth = _utils2.TABLE_MAX_WIDTH;
     }
-    return (0, _utils.createTable)(_objectSpread({
+    if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+      attrsOverrides.layout = 'align-start';
+    }
+    return (0, _utils.createTable)(_objectSpread(_objectSpread({
       schema: schema
-    }, createTableProps));
+    }, createTableProps), attrsOverrides));
   };
 };

package/dist/es2019/commands/insert.js

@@ -119,8 +119,12 @@ export const insertRow = (row, moveCursorToTheNewRow, isCellBackgroundDuplicated
   }
   return true;
 };
-export const createTable = (isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) => (state, dispatch) => {
-  const table = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
+export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) => (state, dispatch) => {
+  const table = createTableWithWidth({
+    isTableScalingEnabled,
+    isTableAlignmentEnabled,
+    isFullWidthModeEnabled
+  })(state.schema);
   if (dispatch) {
     const tr = safeInsert(table)(state.tr).scrollIntoView();
     if (editorAnalyticsAPI) {
@@ -138,13 +142,18 @@ export const createTable = (isTableScalingEnabled, isFullWidthModeEnabled, edito
   }
   return true;
 };
-export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnabled, editorAnalyticsAPI) => (rowsCount, colsCount, inputMethod) => {
+export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI) => (rowsCount, colsCount, inputMethod) => {
   return ({
     tr
   }) => {
-    const tableNode = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, {
-      rowsCount: rowsCount,
-      colsCount: colsCount
+    const tableNode = createTableWithWidth({
+      isTableScalingEnabled,
+      isFullWidthModeEnabled,
+      isTableAlignmentEnabled,
+      createTableProps: {
+        rowsCount: rowsCount,
+        colsCount: colsCount
+      }
     })(tr.doc.type.schema);
     const newTr = safeInsert(tableNode)(tr).scrollIntoView();
     if (inputMethod) {

package/dist/es2019/plugin.js

@@ -94,7 +94,11 @@ const tablesPlugin = ({
     actions: {
       insertTable: analyticsPayload => (state, dispatch) => {
         var _api$contentInsertion, _api$contentInsertion2, _api$contentInsertion3;
-        const node = createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled)(state.schema);
+        const node = createTableWithWidth({
+          isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+          isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+          isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled
+        })(state.schema);
         return (_api$contentInsertion = api === null || api === void 0 ? void 0 : (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 ? void 0 : (_api$contentInsertion3 = _api$contentInsertion2.actions) === null || _api$contentInsertion3 === void 0 ? void 0 : _api$contentInsertion3.insert({
           state,
           dispatch,
@@ -113,7 +117,7 @@ const tablesPlugin = ({
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes() {
       return [{
@@ -184,9 +188,10 @@ const tablesPlugin = ({
           const {
             dragAndDropEnabled,
             isTableScalingEnabled = false,
+            isTableAlignmentEnabled = false,
             fullWidthEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -244,8 +249,8 @@ const tablesPlugin = ({
           dispatchAnalyticsEvent,
           dispatch
         }) => {
-          var _options$fullWidthEna, _options$isTableScali;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false) : undefined;
+          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
+          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) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -435,7 +440,11 @@ const tablesPlugin = ({
           var _api$table;
           // see comment on tablesPlugin.getSharedState on usage
           const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-          const tableNode = createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema);
+          const tableNode = createTableWithWidth({
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+            isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+            isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled
+          })(state.schema);
           const tr = insert(tableNode);
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,

package/dist/es2019/pm-plugins/keymap.js

@@ -8,13 +8,13 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

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

@@ -11,9 +11,10 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { ALIGN_START } from '../utils/alignment';
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export const pluginKey = new PluginKey('tableWidthPlugin');
-const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) => {
+const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) => {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -87,8 +88,9 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
         return hasStepReplacingEntireDocument;
       });
       const referentialityTr = transactions.find(tr => tr.getMeta('referentialityTableInserted'));
-      const shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
-      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
+      const shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
+      const shouldPatchTableAlignment = fullWidthEnabled && isTableAlignmentEnabled;
+      if (!isReplaceDocumentOperation && (!shouldPatchTableWidth && !shouldPatchTableAlignment || !referentialityTr)) {
         return null;
       }
       const {
@@ -152,10 +154,15 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
       }
       if (referentialityTr) {
         referentialityTr.steps.forEach(step => {
-          step.getMap().forEach((oldStart, oldEnd, newStart, newEnd) => {
+          step.getMap().forEach((_, __, newStart, newEnd) => {
             newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
-              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
-                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              if (node.type === table) {
+                if (shouldPatchTableWidth && node.attrs.width !== TABLE_MAX_WIDTH) {
+                  tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+                }
+                if (shouldPatchTableAlignment) {
+                  tr.setNodeAttribute(pos, 'layout', ALIGN_START);
+                }
               }
             });
           });

package/dist/es2019/utils/alignment.js

@@ -1,5 +1,8 @@
+export const ALIGN_START = 'align-start';
+export const ALIGN_CENTER = 'center';
+
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
-export const normaliseAlignment = layout => layout === 'center' || layout === 'align-start' ? layout : 'center';
+export const normaliseAlignment = layout => layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;

package/dist/es2019/utils/create.js

@@ -1,15 +1,21 @@
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-export const createTableWithWidth = (isTableScalingEnabled, isFullWidthModeEnabled, createTableProps) => schema => {
+export const createTableWithWidth = ({
+  isTableScalingEnabled,
+  isTableAlignmentEnabled,
+  isFullWidthModeEnabled,
+  createTableProps
+}) => schema => {
+  const attrsOverrides = {};
   if (isTableScalingEnabled && isFullWidthModeEnabled) {
-    return createTable({
-      schema,
-      tableWidth: TABLE_MAX_WIDTH,
-      ...createTableProps
-    });
+    attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
+  }
+  if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+    attrsOverrides.layout = 'align-start';
   }
   return createTable({
     schema,
-    ...createTableProps
+    ...createTableProps,
+    ...attrsOverrides
   });
 };

package/dist/esm/commands/insert.js

@@ -134,9 +134,13 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBack
     return true;
   };
 };
-export var createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
+export var createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return function (state, dispatch) {
-    var table = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
+    var table = createTableWithWidth({
+      isTableScalingEnabled: isTableScalingEnabled,
+      isTableAlignmentEnabled: isTableAlignmentEnabled,
+      isFullWidthModeEnabled: isFullWidthModeEnabled
+    })(state.schema);
     if (dispatch) {
       var tr = safeInsert(table)(state.tr).scrollIntoView();
       if (editorAnalyticsAPI) {
@@ -155,13 +159,18 @@ export var createTable = function createTable(isTableScalingEnabled, isFullWidth
     return true;
   };
 };
-export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, editorAnalyticsAPI) {
+export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
-      var tableNode = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, {
-        rowsCount: rowsCount,
-        colsCount: colsCount
+      var tableNode = createTableWithWidth({
+        isTableScalingEnabled: isTableScalingEnabled,
+        isFullWidthModeEnabled: isFullWidthModeEnabled,
+        isTableAlignmentEnabled: isTableAlignmentEnabled,
+        createTableProps: {
+          rowsCount: rowsCount,
+          colsCount: colsCount
+        }
       })(tr.doc.type.schema);
       var newTr = safeInsert(tableNode)(tr).scrollIntoView();
       if (inputMethod) {

package/dist/esm/plugin.js

@@ -99,7 +99,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
           var _api$contentInsertion, _api$contentInsertion2;
-          var node = createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled)(state.schema);
+          var node = createTableWithWidth({
+            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+            isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+            isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled
+          })(state.schema);
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
             state: state,
             dispatch: dispatch,
@@ -117,7 +121,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
       return [{
@@ -185,9 +189,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dragAndDropEnabled = _ref7.dragAndDropEnabled,
             _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
             isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
+            _ref7$isTableAlignmen = _ref7.isTableAlignmentEnabled,
+            isTableAlignmentEnabled = _ref7$isTableAlignmen === void 0 ? false : _ref7$isTableAlignmen,
             _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
             fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable;
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -245,10 +251,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref13) {
-          var _options$fullWidthEna, _options$isTableScali;
+          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
           var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
             dispatch = _ref13.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) : undefined;
+          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) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -435,7 +441,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var _api$table;
             // see comment on tablesPlugin.getSharedState on usage
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-            var tableNode = createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema);
+            var tableNode = createTableWithWidth({
+              isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+              isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+              isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled
+            })(state.schema);
             var tr = insert(tableNode);
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: ACTION.INSERTED,

package/dist/esm/pm-plugins/keymap.js

@@ -11,14 +11,15 @@ import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/
 export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
-  var pluginInjectionApi = arguments.length > 5 ? arguments[5] : undefined;
-  var getIntl = arguments.length > 6 ? arguments[6] : undefined;
+  var isTableAlignmentEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var isFullWidthEnabled = arguments.length > 5 ? arguments[5] : undefined;
+  var pluginInjectionApi = arguments.length > 6 ? arguments[6] : undefined;
+  var getIntl = arguments.length > 7 ? arguments[7] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

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

@@ -16,9 +16,10 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { ALIGN_START } from '../utils/alignment';
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export var pluginKey = new PluginKey('tableWidthPlugin');
-var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) {
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -91,8 +92,9 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
       var referentialityTr = transactions.find(function (tr) {
         return tr.getMeta('referentialityTableInserted');
       });
-      var shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
-      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
+      var shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
+      var shouldPatchTableAlignment = fullWidthEnabled && isTableAlignmentEnabled;
+      if (!isReplaceDocumentOperation && (!shouldPatchTableWidth && !shouldPatchTableAlignment || !referentialityTr)) {
         return null;
       }
       var table = newState.schema.nodes.table;
@@ -152,10 +154,15 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
       }
       if (referentialityTr) {
         referentialityTr.steps.forEach(function (step) {
-          step.getMap().forEach(function (oldStart, oldEnd, newStart, newEnd) {
+          step.getMap().forEach(function (_, __, newStart, newEnd) {
             newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
-              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
-                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              if (node.type === table) {
+                if (shouldPatchTableWidth && node.attrs.width !== TABLE_MAX_WIDTH) {
+                  tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+                }
+                if (shouldPatchTableAlignment) {
+                  tr.setNodeAttribute(pos, 'layout', ALIGN_START);
+                }
               }
             });
           });

package/dist/esm/utils/alignment.js

@@ -1,7 +1,10 @@
+export var ALIGN_START = 'align-start';
+export var ALIGN_CENTER = 'center';
+
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 export var normaliseAlignment = function normaliseAlignment(layout) {
-  return layout === 'center' || layout === 'align-start' ? layout : 'center';
+  return layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
 };

package/dist/esm/utils/create.js

@@ -3,16 +3,21 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-export var createTableWithWidth = function createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, createTableProps) {
+export var createTableWithWidth = function createTableWithWidth(_ref) {
+  var isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
+    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
+    createTableProps = _ref.createTableProps;
   return function (schema) {
+    var attrsOverrides = {};
     if (isTableScalingEnabled && isFullWidthModeEnabled) {
-      return createTable(_objectSpread({
-        schema: schema,
-        tableWidth: TABLE_MAX_WIDTH
-      }, createTableProps));
+      attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
     }
-    return createTable(_objectSpread({
+    if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+      attrsOverrides.layout = 'align-start';
+    }
+    return createTable(_objectSpread(_objectSpread({
       schema: schema
-    }, createTableProps));
+    }, createTableProps), attrsOverrides));
   };
 };

package/dist/types/commands/insert.d.ts

@@ -8,5 +8,5 @@ export declare const addColumnBefore: (isTableScalingEnabled?: boolean) => Comma
 export declare const addColumnAfter: (isTableScalingEnabled?: boolean) => Command;
 export declare const insertColumn: (isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
-export declare const createTable: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
-export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
 export default keymapPlugin;

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

@@ -13,7 +13,7 @@ type TableWidthPluginState = {
     tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
     resizing: boolean;
     tableLocalId: string;
     tableRef: null;

package/dist/types/utils/alignment.d.ts

@@ -1,5 +1,7 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
 import type { AlignmentOptions } from '../types';
+export declare const ALIGN_START = "align-start";
+export declare const ALIGN_CENTER = "center";
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')

package/dist/types/utils/create.d.ts

@@ -1,5 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, createTableProps?: {
-    rowsCount?: number;
-    colsCount?: number;
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, createTableProps, }: {
+    isTableScalingEnabled?: boolean | undefined;
+    isTableAlignmentEnabled?: boolean | undefined;
+    isFullWidthModeEnabled?: boolean | undefined;
+    createTableProps?: {
+        rowsCount?: number | undefined;
+        colsCount?: number | undefined;
+    } | undefined;
 }) => (schema: Schema) => import("prosemirror-model").Node;

package/dist/types-ts4.5/commands/insert.d.ts

@@ -8,5 +8,5 @@ export declare const addColumnBefore: (isTableScalingEnabled?: boolean) => Comma
 export declare const addColumnAfter: (isTableScalingEnabled?: boolean) => Command;
 export declare const insertColumn: (isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
-export declare const createTable: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
-export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
 export default keymapPlugin;

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

@@ -13,7 +13,7 @@ type TableWidthPluginState = {
     tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
     resizing: boolean;
     tableLocalId: string;
     tableRef: null;

package/dist/types-ts4.5/utils/alignment.d.ts

@@ -1,5 +1,7 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
 import type { AlignmentOptions } from '../types';
+export declare const ALIGN_START = "align-start";
+export declare const ALIGN_CENTER = "center";
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')

package/dist/types-ts4.5/utils/create.d.ts

@@ -1,5 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, createTableProps?: {
-    rowsCount?: number;
-    colsCount?: number;
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, createTableProps, }: {
+    isTableScalingEnabled?: boolean | undefined;
+    isTableAlignmentEnabled?: boolean | undefined;
+    isFullWidthModeEnabled?: boolean | undefined;
+    createTableProps?: {
+        rowsCount?: number | undefined;
+        colsCount?: number | undefined;
+    } | undefined;
 }) => (schema: Schema) => import("prosemirror-model").Node;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.4",
+  "version": "7.16.6",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,10 +28,10 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.8.0",
-    "@atlaskit/button": "^17.15.0",
+    "@atlaskit/adf-schema": "^36.10.7",
+    "@atlaskit/button": "^17.16.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^80.4.0",
+    "@atlaskit/editor-common": "^81.0.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",

package/src/commands/insert.ts

@@ -201,37 +201,42 @@ export const insertRow =
     return true;
   };
 
-export const createTable = (
-  isTableScalingEnabled?: boolean,
-  isFullWidthModeEnabled?: boolean,
-  editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
-): Command => (state, dispatch) => {
-  const table = createTableWithWidth(
-    isTableScalingEnabled,
-    isFullWidthModeEnabled,
-  )(state.schema);
+export const createTable =
+  (
+    isTableScalingEnabled?: boolean,
+    isTableAlignmentEnabled?: boolean,
+    isFullWidthModeEnabled?: boolean,
+    editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
+  ): Command =>
+  (state, dispatch) => {
+    const table = createTableWithWidth({
+      isTableScalingEnabled,
+      isTableAlignmentEnabled,
+      isFullWidthModeEnabled,
+    })(state.schema);
 
-  if (dispatch) {
-    const tr = safeInsert(table)(state.tr).scrollIntoView();
-    if (editorAnalyticsAPI) {
-      editorAnalyticsAPI?.attachAnalyticsEvent({
+    if (dispatch) {
+      const tr = safeInsert(table)(state.tr).scrollIntoView();
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI?.attachAnalyticsEvent({
           action: ACTION.INSERTED,
           actionSubject: ACTION_SUBJECT.DOCUMENT,
           actionSubjectId: ACTION_SUBJECT_ID.TABLE,
           attributes: { inputMethod: INPUT_METHOD.SHORTCUT },
           eventType: EVENT_TYPE.TRACK,
-      })(tr);
+        })(tr);
+      }
+      dispatch(tr);
     }
-    dispatch(tr);
-  }
-  
-  return true;
-}
+
+    return true;
+  };
 
 export const insertTableWithSize =
   (
     isFullWidthModeEnabled?: boolean,
     isTableScalingEnabled?: boolean,
+    isTableAlignmentEnabled?: boolean,
     editorAnalyticsAPI?: EditorAnalyticsAPI,
   ) =>
   (
@@ -240,14 +245,15 @@ export const insertTableWithSize =
     inputMethod?: INPUT_METHOD.PICKER,
   ): EditorCommand => {
     return ({ tr }) => {
-      const tableNode = createTableWithWidth(
+      const tableNode = createTableWithWidth({
         isTableScalingEnabled,
         isFullWidthModeEnabled,
-        {
+        isTableAlignmentEnabled,
+        createTableProps: {
           rowsCount: rowsCount,
           colsCount: colsCount,
         },
-      )(tr.doc.type.schema);
+      })(tr.doc.type.schema);
 
       const newTr = safeInsert(tableNode)(tr).scrollIntoView();
       if (inputMethod) {

package/src/plugin.tsx

@@ -199,10 +199,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
       insertTable:
         (analyticsPayload): Command =>
         (state, dispatch) => {
-          const node = createTableWithWidth(
-            options?.isTableScalingEnabled,
-            options?.fullWidthEnabled,
-          )(state.schema);
+          const node = createTableWithWidth({
+            isTableScalingEnabled: options?.isTableScalingEnabled,
+            isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
+            isFullWidthModeEnabled: options?.fullWidthEnabled,
+          })(state.schema);
 
           return (
             api?.contentInsertion?.actions?.insert({
@@ -229,6 +230,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
       insertTableWithSize: insertTableWithSize(
         options?.fullWidthEnabled,
         options?.isTableScalingEnabled,
+        options?.isTableAlignmentEnabled,
         api?.analytics?.actions,
       ),
     },
@@ -318,6 +320,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             const {
               dragAndDropEnabled,
               isTableScalingEnabled = false,
+              isTableAlignmentEnabled = false,
               fullWidthEnabled = false,
             } = options || ({} as TablePluginOptions);
             return keymapPlugin(
@@ -325,6 +328,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               editorAnalyticsAPI,
               dragAndDropEnabled,
               isTableScalingEnabled,
+              isTableAlignmentEnabled,
               fullWidthEnabled,
               api,
               getIntl,
@@ -401,6 +405,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
                   options?.isTableScalingEnabled ?? false,
+                  options?.isTableAlignmentEnabled ?? false,
                 )
               : undefined,
         },
@@ -644,10 +649,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             // see comment on tablesPlugin.getSharedState on usage
             const tableState = api?.table?.sharedState.currentState();
 
-            const tableNode = createTableWithWidth(
-              options?.isTableScalingEnabled,
-              tableState?.isFullWidthModeEnabled,
-            )(state.schema);
+            const tableNode = createTableWithWidth({
+              isTableScalingEnabled: options?.isTableScalingEnabled,
+              isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
+              isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
+            })(state.schema);
 
             const tr = insert(tableNode);
 

package/src/pm-plugins/keymap.ts

@@ -57,6 +57,7 @@ export function keymapPlugin(
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
   dragAndDropEnabled?: boolean,
   isTableScalingEnabled = false,
+  isTableAlignmentEnabled = false,
   isFullWidthEnabled?: boolean,
   pluginInjectionApi?: PluginInjectionAPIWithA11y,
   getIntl?: () => IntlShape,
@@ -80,6 +81,7 @@ export function keymapPlugin(
     toggleTable.common!,
     createTable(
       isTableScalingEnabled,
+      isTableAlignmentEnabled,
       !!isFullWidthEnabled,
       editorAnalyticsAPI,
     ),

package/src/pm-plugins/table-width.ts

@@ -23,6 +23,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { ALIGN_START } from '../utils/alignment';
+
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 
 type __ReplaceStep = ReplaceStep & {
@@ -46,6 +48,7 @@ const createPlugin = (
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   fullWidthEnabled: boolean,
   isTableScalingEnabled: boolean,
+  isTableAlignmentEnabled: boolean,
 ) => {
   return new SafePlugin({
     key: pluginKey,
@@ -133,11 +136,14 @@ const createPlugin = (
         tr.getMeta('referentialityTableInserted'),
       );
 
-      const shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
+      const shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
+      const shouldPatchTableAlignment =
+        fullWidthEnabled && isTableAlignmentEnabled;
 
       if (
         !isReplaceDocumentOperation &&
-        (!shouldPatchTable || !referentialityTr)
+        ((!shouldPatchTableWidth && !shouldPatchTableAlignment) ||
+          !referentialityTr)
       ) {
         return null;
       }
@@ -206,10 +212,18 @@ const createPlugin = (
 
       if (referentialityTr) {
         referentialityTr.steps.forEach((step) => {
-          step.getMap().forEach((oldStart, oldEnd, newStart, newEnd) => {
+          step.getMap().forEach((_, __, newStart, newEnd) => {
             newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
-              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
-                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              if (node.type === table) {
+                if (
+                  shouldPatchTableWidth &&
+                  node.attrs.width !== TABLE_MAX_WIDTH
+                ) {
+                  tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+                }
+                if (shouldPatchTableAlignment) {
+                  tr.setNodeAttribute(pos, 'layout', ALIGN_START);
+                }
               }
             });
           });

package/src/utils/alignment.ts

@@ -2,9 +2,12 @@ import type { TableLayout } from '@atlaskit/adf-schema';
 
 import type { AlignmentOptions } from '../types';
 
+export const ALIGN_START = 'align-start';
+export const ALIGN_CENTER = 'center';
+
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 export const normaliseAlignment = (layout: TableLayout): AlignmentOptions =>
-  layout === 'center' || layout === 'align-start' ? layout : 'center';
+  layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;

package/src/utils/create.ts

@@ -1,27 +1,41 @@
+import type { TableAttributes } from '@atlaskit/adf-schema';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { createTable } from '@atlaskit/editor-tables/utils';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 
+type CreateTableOverrides = {
+  tableWidth?: TableAttributes['width'];
+  layout?: TableAttributes['layout'];
+};
+
 export const createTableWithWidth =
-  (
-    isTableScalingEnabled?: boolean,
-    isFullWidthModeEnabled?: boolean,
+  ({
+    isTableScalingEnabled,
+    isTableAlignmentEnabled,
+    isFullWidthModeEnabled,
+    createTableProps,
+  }: {
+    isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
+    isFullWidthModeEnabled?: boolean;
     createTableProps?: {
       rowsCount?: number;
       colsCount?: number;
-    },
-  ) =>
+    };
+  }) =>
   (schema: Schema) => {
+    const attrsOverrides: CreateTableOverrides = {};
     if (isTableScalingEnabled && isFullWidthModeEnabled) {
-      return createTable({
-        schema,
-        tableWidth: TABLE_MAX_WIDTH,
-        ...createTableProps,
-      });
+      attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
+    }
+    if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+      attrsOverrides.layout = 'align-start';
     }
+
     return createTable({
       schema,
       ...createTableProps,
+      ...attrsOverrides,
     });
   };