@atlaskit/editor-plugin-table 7.16.3 → 7.16.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 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
+
+-   [#102667](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102667)
+    [`ab69107b7352`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ab69107b7352) -
+    Force placeholder drag handle to be positioned in first column to avoid overflow
+
 ## 7.16.3
 
 ### 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/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -126,6 +126,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
     var _rowHeights$reduce, _colWidths$reduce;
     var isHover = type === 'hover';
+    var isPlaceholder = appearance === 'placeholder';
     var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
       return sum + cur;
     }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
@@ -147,7 +148,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         width: '100%',
         position: 'relative'
       },
-      "data-testid": "table-floating-column-".concat(isHover ? colIndex : selectedColIndexes[0], "-drag-handle")
+      "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
@@ -172,10 +173,13 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     if (!tableActive) {
       return null;
     }
+    var selectedAppearance = isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
+    handles.push(generateHandleByType('selected', selectedAppearance,
+    // always position placeholder in first column to avoid overflow issues
+    selectedAppearance === 'placeholder' ? '1 / span 1' : "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
     if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
       handles.push(generateHandleByType('hover', 'default', "".concat(colIndex + 1, " / span 1"), colIndexes));
     }

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/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -126,6 +126,7 @@ export const ColumnControls = ({
   const generateHandleByType = (type, appearance, gridColumn, indexes) => {
     var _rowHeights$reduce, _colWidths$reduce;
     const isHover = type === 'hover';
+    const isPlaceholder = appearance === 'placeholder';
     const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     const previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce((sum, v, i) => sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0), 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
@@ -143,7 +144,7 @@ export const ColumnControls = ({
         width: '100%',
         position: 'relative'
       },
-      "data-testid": `table-floating-column-${isHover ? colIndex : selectedColIndexes[0]}-drag-handle`
+      "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
@@ -168,10 +169,13 @@ export const ColumnControls = ({
     if (!tableActive) {
       return null;
     }
+    const selectedAppearance = isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`, selectedColIndexes));
+    handles.push(generateHandleByType('selected', selectedAppearance,
+    // always position placeholder in first column to avoid overflow issues
+    selectedAppearance === 'placeholder' ? '1 / span 1' : `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`, selectedColIndexes));
     if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
       handles.push(generateHandleByType('hover', 'default', `${colIndex + 1} / span 1`, colIndexes));
     }

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,