@atlaskit/editor-plugin-table 7.16.0 → 7.16.2

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.2
+
+### Patch Changes
+
+-   [#101820](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101820)
+    [`d6a194ef42d7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d6a194ef42d7) -
+    Add new left alignment to table container in editor, based on layout node attribute
+-   Updated dependencies
+
+## 7.16.1
+
+### Patch Changes
+
+-   [#101355](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101355)
+    [`040f4ffe7af0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/040f4ffe7af0) -
+    Add analytic event to table alignment command
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
 ## 7.16.0
 
 ### Minor Changes

package/dist/cjs/commands/insert.js

@@ -143,11 +143,23 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     return true;
   };
 };
-var createTable = exports.createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled) {
+var createTable = exports.createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return function (state, dispatch) {
     var table = (0, _utils3.createTableWithWidth)(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
     if (dispatch) {
-      dispatch((0, _utils.safeInsert)(table)(state.tr).scrollIntoView());
+      var tr = (0, _utils.safeInsert)(table)(state.tr).scrollIntoView();
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: _analytics.ACTION.INSERTED,
+          actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+          attributes: {
+            inputMethod: _analytics.INPUT_METHOD.SHORTCUT
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        })(tr);
+      }
+      dispatch(tr);
     }
     return true;
   };

package/dist/cjs/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -586,4 +586,18 @@ var updateWidthToWidest = exports.updateWidthToWidest = function updateWidthToWi
       }
     };
   });
+};
+var setTableAlignment = exports.setTableAlignment = function setTableAlignment(newAlignment) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var tableObject = (0, _utils2.findTable)(tr.selection);
+    if (!tableObject) {
+      return null;
+    }
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
+      layout: newAlignment
+    });
+    tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

package/dist/cjs/commands-with-analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTableInExpandWithAnalytics = exports.toggleTableLockWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
+exports.wrapTableInExpandWithAnalytics = exports.toggleTableLockWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -537,4 +537,27 @@ var toggleTableLockWithAnalytics = exports.toggleTableLockWithAnalytics = functi
     })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)(_displayMode.setTableDisplayMode));
   };
 };
-// #endregion
+var setTableAlignmentWithAnalytics = exports.setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI) {
+  return function (newAlignment, previousAlignment, inputMethod) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
+      var _getSelectedTableInfo14 = (0, _utils2.getSelectedTableInfo)(state.selection),
+        table = _getSelectedTableInfo14.table,
+        totalRowCount = _getSelectedTableInfo14.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo14.totalColumnCount;
+      return {
+        action: _analytics.TABLE_ACTION.CHANGED_ALIGNMENT,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
+          newAlignment: newAlignment,
+          previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
+          totalRowCount: totalRowCount,
+          totalColumnCount: totalColumnCount,
+          inputMethod: inputMethod
+        }
+      };
+    })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)((0, _misc.setTableAlignment)(newAlignment)));
+  };
+};

package/dist/cjs/nodeviews/TableComponent.js

@@ -652,7 +652,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         pluginInjectionApi = _this$props11.pluginInjectionApi,
         isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props11.isTableScalingEnabled;
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
+        isTableAlignmentEnabled = _this$props11.isTableAlignmentEnabled;
       var _this$props12 = this.props,
         isInDanger = _this$props12.isInDanger,
         hoveredRows = _this$props12.hoveredRows,
@@ -761,7 +762,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
         isTableScalingEnabled: isTableScalingEnabled,
-        isWholeTableInDanger: isWholeTableInDanger
+        isWholeTableInDanger: isWholeTableInDanger,
+        isTableAlignmentEnabled: isTableAlignmentEnabled
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -69,6 +69,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     isHeaderColumnEnabled: isHeaderColumnEnabled,
     isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
     tableActive: tableActive,
     ordering: ordering,
     isResizing: isResizing,

package/dist/cjs/nodeviews/TableContainer.js

@@ -31,19 +31,57 @@ var InnerContainer = exports.InnerContainer = /*#__PURE__*/(0, _react.forwardRef
     "data-testid": "table-container"
   }, children);
 });
-var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref2) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    node = _ref2.node,
-    containerWidth = _ref2.containerWidth,
-    editorView = _ref2.editorView,
-    getPos = _ref2.getPos,
-    tableRef = _ref2.tableRef,
-    isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi,
-    isTableScalingEnabled = _ref2.isTableScalingEnabled,
-    tableWrapperHeight = _ref2.tableWrapperHeight,
-    isWholeTableInDanger = _ref2.isWholeTableInDanger;
+var centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+var leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
+  var node = _ref2.node,
+    children = _ref2.children;
+  var alignment = node.attrs.layout;
+  var style = (0, _react.useMemo)(function () {
+    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+  }, [alignment]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "table-alignment-container",
+    style: style
+  }, children);
+};
+var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
+  var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
+    node = _ref3.node,
+    children = _ref3.children;
+  if (!isTableAlignmentEnabled) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement(AlignmentTableContainer, {
+    node: node
+  }, children);
+};
+var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    node = _ref4.node,
+    containerWidth = _ref4.containerWidth,
+    editorView = _ref4.editorView,
+    getPos = _ref4.getPos,
+    tableRef = _ref4.tableRef,
+    isResizing = _ref4.isResizing,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    tableWrapperHeight = _ref4.tableWrapperHeight,
+    isWholeTableInDanger = _ref4.isWholeTableInDanger,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled;
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var _useState = (0, _react.useState)(false),
@@ -132,11 +170,9 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     onResizeStop: onResizeStop
   };
   var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
+  return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    node: node
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: tableWidthRef.current,
@@ -156,21 +192,22 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     node: node
   }, children))));
 });
-var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
-  var children = _ref3.children,
-    node = _ref3.node,
-    className = _ref3.className,
-    editorWidth = _ref3.containerWidth.width,
-    isTableResizingEnabled = _ref3.isTableResizingEnabled,
-    editorView = _ref3.editorView,
-    getPos = _ref3.getPos,
-    tableRef = _ref3.tableRef,
-    isNested = _ref3.isNested,
-    tableWrapperHeight = _ref3.tableWrapperHeight,
-    isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi,
-    isTableScalingEnabled = _ref3.isTableScalingEnabled,
-    isWholeTableInDanger = _ref3.isWholeTableInDanger;
+var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
+  var children = _ref5.children,
+    node = _ref5.node,
+    className = _ref5.className,
+    editorWidth = _ref5.containerWidth.width,
+    editorView = _ref5.editorView,
+    getPos = _ref5.getPos,
+    tableRef = _ref5.tableRef,
+    isNested = _ref5.isNested,
+    tableWrapperHeight = _ref5.tableWrapperHeight,
+    isResizing = _ref5.isResizing,
+    pluginInjectionApi = _ref5.pluginInjectionApi,
+    isWholeTableInDanger = _ref5.isWholeTableInDanger,
+    isTableResizingEnabled = _ref5.isTableResizingEnabled,
+    isTableScalingEnabled = _ref5.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -183,7 +220,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
-      isWholeTableInDanger: isWholeTableInDanger
+      isWholeTableInDanger: isWholeTableInDanger,
+      isTableAlignmentEnabled: isTableAlignmentEnabled
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement(InnerContainer, {

package/dist/cjs/nodeviews/table.js

@@ -176,7 +176,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         },
         editorView: props.view,
         render: function render(pluginStates) {
-          var _props$options;
+          var _props$options, _props$options2;
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
             tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
@@ -208,8 +208,9 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
-            isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled sams as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
+            isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
             ,
+            isTableAlignmentEnabled: (_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.isTableAlignmentEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,
@@ -283,7 +284,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return TableView;
 }(_reactNodeView.default);
-var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
@@ -308,7 +309,9 @@ var createTableView = exports.createTableView = function createTableView(node, v
       wasFullWidthModeEnabled: wasFullWidthModeEnabled,
       isTableResizingEnabled: isTableResizingEnabled,
       isDragAndDropEnabled: isDragAndDropEnabled,
-      isTableScalingEnabled: isTableScalingEnabled // same as options.isTableScalingEnabled
+      isTableScalingEnabled: isTableScalingEnabled,
+      // same as options.isTableScalingEnabled
+      isTableAlignmentEnabled: isTableAlignmentEnabled
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/cjs/plugin.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -45,6 +46,8 @@ var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertB
 var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
 var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
 var _utils2 = require("./utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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 defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
@@ -110,7 +113,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             node: node,
             options: {
               selectNodeInserted: false,
-              analyticsPayload: analyticsPayload
+              analyticsPayload: _objectSpread(_objectSpread({}, analyticsPayload), {}, {
+                attributes: _objectSpread(_objectSpread({}, analyticsPayload.attributes), {}, {
+                  localId: node.attrs.localId
+                })
+              })
             }
           })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
         };
@@ -120,10 +127,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
       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)
     },
     nodes: function nodes() {
-      var tableNode = options !== null && options !== void 0 && options.isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') ? _adfSchema.tableStage0 : _adfSchema.table;
       return [{
         name: 'table',
-        node: tableNode
+        node: _adfSchema.table
       }, {
         name: 'tableHeader',
         node: _adfSchema.tableHeader
@@ -436,13 +442,15 @@ 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 tr = insert((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)(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, 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,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
               attributes: {
-                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT
+                inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+                localId: tableNode.attrs.localId
               },
               eventType: _analytics.EVENT_TYPE.TRACK
             })(tr);

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

@@ -15,18 +15,6 @@ var _commandsWithAnalytics = require("../commands-with-analytics");
 var _columnResize = require("../commands/column-resize");
 var _insert = require("../commands/insert");
 var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
-var _analytics2 = require("../utils/analytics");
-var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
-  return (0, _analytics2.withEditorAnalyticsAPI)({
-    action: _analytics.ACTION.INSERTED,
-    actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
-    actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
-    attributes: {
-      inputMethod: _analytics.INPUT_METHOD.SHORTCUT
-    },
-    eventType: _analytics.EVENT_TYPE.TRACK
-  })(editorAnalyticsAPI)((0, _commands2.createTable)(isTableScalingEnabled, isFullWidthModeEnabled));
-};
 function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -37,7 +25,7 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
   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, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, (0, _insert.createTable)(isTableScalingEnabled, !!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/main.js

@@ -260,7 +260,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       },
       nodeViews: {
         table: function table(node, view, getPos) {
-          return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi);
+          return (0, _table.createTableView)(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
         },
         tableRow: function tableRow(node, view, getPos) {
           return new _TableRow.default(node, view, getPos, eventDispatcher);

package/dist/cjs/toolbar.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
@@ -38,10 +37,11 @@ var _types = require("./types");
 var _FloatingAlignmentButtons = require("./ui/FloatingAlignmentButtons/FloatingAlignmentButtons");
 var _icons = require("./ui/icons");
 var _utils4 = require("./utils");
+var _alignment = require("./utils/alignment");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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; } /** @jsx jsx */
+/** @jsx jsx */
+
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var optionItem = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
@@ -331,7 +331,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var alignmentMenu;
         var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
-        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl) : [];
+        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI) : [];
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -595,7 +595,7 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6) {
+var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI) {
   var formatMessage = _ref6.formatMessage;
   var tableObject = (0, _utils3.findTable)(editorState.selection);
   if (!tableObject) {
@@ -620,13 +620,14 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
     var id = alignmentIcon.id,
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
+    var currentLayout = tableObject.node.attrs.layout;
     return {
       id: id,
       type: 'button',
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
-      selected: tableObject.node.attrs.layout === value,
-      onClick: alignTable(value)
+      selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
+      onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB)
     };
   });
   var alignmentItemOptions = {
@@ -649,27 +650,9 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
   }];
   return alignmentToolbarItem;
 };
-var alignTable = function alignTable(nextLayoutValue) {
-  return function (state, dispatch) {
-    var tableObject = (0, _utils3.findTable)(state.selection);
-    if (!tableObject || !dispatch) {
-      return false;
-    }
-    var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
-      layout: nextLayoutValue
-    });
-    var tr = state.tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs);
-    tr.setMeta('scrollIntoView', false);
-
-    // TODO - insert analytics here for layout selection
-
-    dispatch(tr);
-    return true;
-  };
-};
 var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons, selectedNode) {
   var selectedAlignment = selectedNode.attrs.layout;
   return alignmentIcons.find(function (icon) {
-    return icon.value === (selectedNode.attrs.layout === 'default' ? 'center' : selectedAlignment);
+    return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
   });
 };

package/dist/cjs/utils/alignment.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normaliseAlignment = void 0;
+/**
+ * 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';
+};

package/dist/es2019/commands/insert.js

@@ -1,6 +1,6 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/custom-steps';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -119,10 +119,22 @@ export const insertRow = (row, moveCursorToTheNewRow, isCellBackgroundDuplicated
   }
   return true;
 };
-export const createTable = (isTableScalingEnabled, isFullWidthModeEnabled) => (state, dispatch) => {
+export const createTable = (isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) => (state, dispatch) => {
   const table = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
   if (dispatch) {
-    dispatch(safeInsert(table)(state.tr).scrollIntoView());
+    const tr = safeInsert(table)(state.tr).scrollIntoView();
+    if (editorAnalyticsAPI) {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: ACTION.INSERTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+        attributes: {
+          inputMethod: INPUT_METHOD.SHORTCUT
+        },
+        eventType: EVENT_TYPE.TRACK
+      })(tr);
+    }
+    dispatch(tr);
   }
   return true;
 };

package/dist/es2019/commands/misc.js

@@ -549,4 +549,18 @@ export const updateWidthToWidest = widthToWidest => createCommand(state => {
       }
     }
   };
-});
+});
+export const setTableAlignment = newAlignment => ({
+  tr
+}) => {
+  const tableObject = findTable(tr.selection);
+  if (!tableObject) {
+    return null;
+  }
+  const nextTableAttrs = {
+    ...tableObject.node.attrs,
+    layout: newAlignment
+  };
+  tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+  return tr;
+};

package/dist/es2019/commands-with-analytics.js

@@ -9,7 +9,7 @@ import { changeColumnWidthByStep } from './commands/column-resize';
 import { deleteColumnsCommand } from './commands/delete';
 import { setTableDisplayMode } from './commands/display-mode';
 import { insertColumn, insertRow } from './commands/insert';
-import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs } from './commands/misc';
+import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setTableAlignment } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
 import { getNextLayout, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './commands/toggle';
@@ -490,4 +490,24 @@ export const toggleTableLockWithAnalytics = editorAnalyticsAPI => (displayMode,
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
-// #endregion
+export const setTableAlignmentWithAnalytics = editorAnalyticsAPI => (newAlignment, previousAlignment, inputMethod) => withEditorAnalyticsAPI(state => {
+  const {
+    table,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.CHANGED_ALIGNMENT,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
+      newAlignment,
+      previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
+      totalRowCount,
+      totalColumnCount,
+      inputMethod
+    }
+  };
+})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));