@atlaskit/editor-plugin-table 7.16.1 → 7.16.2

package/dist/esm/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';
@@ -134,11 +134,23 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBack
     return true;
   };
 };
-export var createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled) {
+export var createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return function (state, dispatch) {
     var table = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
     if (dispatch) {
-      dispatch(safeInsert(table)(state.tr).scrollIntoView());
+      var tr = safeInsert(table)(state.tr).scrollIntoView();
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === 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/esm/nodeviews/TableComponent.js

@@ -645,7 +645,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,
@@ -754,7 +755,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.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -62,6 +62,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     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/esm/nodeviews/TableContainer.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -21,19 +21,57 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-export var ResizableTableContainer = /*#__PURE__*/React.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 = useMemo(function () {
+    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+  }, [alignment]);
+  return /*#__PURE__*/React.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.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
+    node: node
+  }, children);
+};
+export var ResizableTableContainer = /*#__PURE__*/React.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 = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var _useState = useState(false),
@@ -122,11 +160,9 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     onResizeStop: onResizeStop
   };
   var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
+  return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    node: node
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,
@@ -146,21 +182,22 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     node: node
   }, children))));
 });
-export var 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;
+export var 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.createElement(ResizableTableContainer, {
       className: className,
@@ -173,7 +210,8 @@ export var TableContainer = function TableContainer(_ref3) {
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
-      isWholeTableInDanger: isWholeTableInDanger
+      isWholeTableInDanger: isWholeTableInDanger,
+      isTableAlignmentEnabled: isTableAlignmentEnabled
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {

package/dist/esm/nodeviews/table.js

@@ -169,7 +169,7 @@ var TableView = /*#__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,
@@ -201,8 +201,9 @@ var TableView = /*#__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,
@@ -277,7 +278,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(ReactNodeView);
 export { TableView as default };
-export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) {
+export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled) {
   var _getPluginState2 = getPluginState(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
@@ -302,7 +303,9 @@ export var createTableView = function createTableView(node, view, getPos, portal
       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/esm/plugin.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
@@ -103,7 +106,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;
         };
@@ -428,13 +435,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(createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
+            var tableNode = 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: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.TABLE,
               attributes: {
-                inputMethod: INPUT_METHOD.QUICK_INSERT
+                inputMethod: INPUT_METHOD.QUICK_INSERT,
+                localId: tableNode.attrs.localId
               },
               eventType: EVENT_TYPE.TRACK
             })(tr);

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

@@ -1,25 +1,13 @@
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { createTable, goToNextCell, moveCursorBackward } from '../commands';
+import { goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
-import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
+import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-import { withEditorAnalyticsAPI } from '../utils/analytics';
-var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
-  return withEditorAnalyticsAPI({
-    action: ACTION.INSERTED,
-    actionSubject: ACTION_SUBJECT.DOCUMENT,
-    actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-    attributes: {
-      inputMethod: INPUT_METHOD.SHORTCUT
-    },
-    eventType: EVENT_TYPE.TRACK
-  })(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
-};
 export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
@@ -30,7 +18,7 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   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, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, !!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/main.js

@@ -253,7 +253,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       },
       nodeViews: {
         table: function table(node, view, getPos) {
-          return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi);
+          return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
         },
         tableRow: function tableRow(node, view, getPos) {
           return new TableRow(node, view, getPos, eventDispatcher);

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

@@ -1,4 +1,5 @@
-import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -7,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) => 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;

package/dist/types/nodeviews/TableComponent.d.ts

@@ -23,6 +23,7 @@ export interface ComponentProps {
     isMediaFullscreen?: boolean;
     isDragAndDropEnabled?: boolean;
     isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
     tableActive: boolean;
     ordering?: TableColumnOrdering;
     isResizing?: boolean;

package/dist/types/nodeviews/TableContainer.d.ts

@@ -24,25 +24,27 @@ type ResizableTableContainerProps = {
     tableRef: HTMLTableElement;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
-    isTableScalingEnabled?: boolean;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
+    isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, isTableScalingEnabled, tableWrapperHeight, isWholeTableInDanger, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
     containerWidth: EditorContainerWidth;
-    isTableResizingEnabled: boolean | undefined;
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
-    isTableScalingEnabled?: boolean;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
+    isTableResizingEnabled: boolean | undefined;
+    isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, isTableResizingEnabled, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isTableScalingEnabled, isWholeTableInDanger, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/nodeviews/table.d.ts

@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
 export {};

package/dist/types/nodeviews/types.d.ts

@@ -12,6 +12,7 @@ export type TableOptions = {
     isTableResizingEnabled?: boolean;
     isDragAndDropEnabled?: boolean;
     isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
 };
 export interface Props {
     node: PmNode;

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

@@ -1,4 +1,5 @@
-import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -7,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) => 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;

package/dist/types-ts4.5/nodeviews/TableComponent.d.ts

@@ -23,6 +23,7 @@ export interface ComponentProps {
     isMediaFullscreen?: boolean;
     isDragAndDropEnabled?: boolean;
     isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
     tableActive: boolean;
     ordering?: TableColumnOrdering;
     isResizing?: boolean;

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -24,25 +24,27 @@ type ResizableTableContainerProps = {
     tableRef: HTMLTableElement;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
-    isTableScalingEnabled?: boolean;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
+    isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, isTableScalingEnabled, tableWrapperHeight, isWholeTableInDanger, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
     containerWidth: EditorContainerWidth;
-    isTableResizingEnabled: boolean | undefined;
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
-    isTableScalingEnabled?: boolean;
     tableWrapperHeight?: number;
     isWholeTableInDanger?: boolean;
+    isTableResizingEnabled: boolean | undefined;
+    isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, isTableResizingEnabled, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isTableScalingEnabled, isWholeTableInDanger, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/table.d.ts

@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: LegacyPortalProviderAPI | PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
 export {};

package/dist/types-ts4.5/nodeviews/types.d.ts

@@ -12,6 +12,7 @@ export type TableOptions = {
     isTableResizingEnabled?: boolean;
     isDragAndDropEnabled?: boolean;
     isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
 };
 export interface Props {
     node: PmNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.1",
+  "version": "7.16.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^36.8.0",
-    "@atlaskit/button": "^17.14.0",
+    "@atlaskit/button": "^17.15.0",
     "@atlaskit/custom-steps": "^0.2.0",
     "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-palette": "1.6.0",
@@ -43,16 +43,16 @@
     "@atlaskit/editor-prosemirror": "4.0.1",
     "@atlaskit/editor-shared-styles": "^2.11.0",
     "@atlaskit/editor-tables": "^2.7.0",
-    "@atlaskit/icon": "^22.2.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/menu": "^2.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^6.2.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/commands/insert.ts

@@ -1,14 +1,12 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/custom-steps';
-import type {
-  EditorAnalyticsAPI,
-  INPUT_METHOD,
-} from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } 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 type { Command, EditorCommand } from '@atlaskit/editor-common/types';
@@ -203,22 +201,32 @@ export const insertRow =
     return true;
   };
 
-export const createTable =
-  (
-    isTableScalingEnabled?: boolean,
-    isFullWidthModeEnabled?: boolean,
-  ): Command =>
-  (state, dispatch) => {
-    const table = createTableWithWidth(
-      isTableScalingEnabled,
-      isFullWidthModeEnabled,
-    )(state.schema);
+export const createTable = (
+  isTableScalingEnabled?: boolean,
+  isFullWidthModeEnabled?: boolean,
+  editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
+): Command => (state, dispatch) => {
+  const table = createTableWithWidth(
+    isTableScalingEnabled,
+    isFullWidthModeEnabled,
+  )(state.schema);
 
-    if (dispatch) {
-      dispatch(safeInsert(table)(state.tr).scrollIntoView());
+  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);
     }
-    return true;
-  };
+    dispatch(tr);
+  }
+  
+  return true;
+}
 
 export const insertTableWithSize =
   (

package/src/nodeviews/TableComponent.tsx

@@ -104,6 +104,7 @@ export interface ComponentProps {
   isMediaFullscreen?: boolean;
   isDragAndDropEnabled?: boolean;
   isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
   tableActive: boolean;
   ordering?: TableColumnOrdering;
   isResizing?: boolean;
@@ -687,6 +688,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isDragAndDropEnabled,
       getEditorFeatureFlags,
       isTableScalingEnabled, // here we can use options.isTableScalingEnabled
+      isTableAlignmentEnabled
     } = this.props;
 
     let {
@@ -820,6 +822,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isResizing={isResizing}
         isTableScalingEnabled={isTableScalingEnabled}
         isWholeTableInDanger={isWholeTableInDanger}
+        isTableAlignmentEnabled={isTableAlignmentEnabled}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -106,6 +106,7 @@ export const TableComponentWithSharedState = ({
       isHeaderColumnEnabled={isHeaderColumnEnabled}
       isDragAndDropEnabled={options?.isDragAndDropEnabled}
       isTableScalingEnabled={options?.isTableScalingEnabled}
+      isTableAlignmentEnabled={options?.isTableAlignmentEnabled}
       tableActive={tableActive}
       ordering={ordering}
       isResizing={isResizing}