@atlaskit/editor-plugin-table 22.4.12 → 22.4.13

package/dist/es2019/ui/TableMenu/column/items/HeaderColumnToggleItem.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
+import { toggleHeaderColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Header column toggle is only visible when the first column is the entire
  * selection.
@@ -13,20 +15,53 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
  * `ColumnBackgroundSection` (which drops its leading separator alongside)
  * can stay in lockstep with this rule without redefining it.
  */
-export const shouldShowHeaderColumnToggle = tableMenuContext => (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn) === true && tableMenuContext.selectedColumnCount === 1;
-export const HeaderColumnToggleItem = () => {
+export const shouldShowHeaderColumnToggle = ({
+  isFirstColumn,
+  isHeaderColumnAllowed,
+  selectedColumnCount
+}) => isHeaderColumnAllowed === true && isFirstColumn === true && selectedColumnCount === 1;
+export const HeaderColumnToggleItem = props => {
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
   const tableMenuContext = useTableMenuContext();
+  const {
+    isHeaderColumnAllowed,
+    isHeaderColumnEnabled
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState, _states$tableState$pl, _states$tableState2;
+    return {
+      isHeaderColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : (_states$tableState$pl = _states$tableState.pluginConfig) === null || _states$tableState$pl === void 0 ? void 0 : _states$tableState$pl.allowHeaderColumn,
+      isHeaderColumnEnabled: (_states$tableState2 = states.tableState) === null || _states$tableState2 === void 0 ? void 0 : _states$tableState2.isHeaderColumnEnabled
+    };
+  });
   const {
     formatMessage
   } = useIntl();
   const label = formatMessage(messages.headerColumn);
-  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    toggleHeaderColumnWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(editorView.state, editorView.dispatch);
+  };
+  if (!shouldShowHeaderColumnToggle({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  })) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemAfter: /*#__PURE__*/React.createElement(Toggle, {
       label: label,
-      isChecked: false
+      isChecked: !!isHeaderColumnEnabled,
+      onChange: handleClick
     })
   }, label);
 };

package/dist/es2019/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { moveColumnLeft, tooltip } from '@atlaskit/editor-common/keymaps';
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
+import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
+import { TABLE_COLUMN } from '../../shared/consts';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+const shouldShowMoveColumnLeft = isFirstColumn => !isFirstColumn;
+export const MoveColumnLeftItem = props => {
+  var _tableMenuContext$sel, _tooltip;
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
+  const tableMenuContext = useTableMenuContext();
+  const {
+    tableNode
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState;
+    return {
+      tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+    };
+  });
+  const selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
+  const {
+    formatMessage
+  } = useIntl();
+  const handleClick = () => {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.left - 1)(editorView.state, editorView.dispatch);
+  };
+  if (!tableNode || !shouldShowMoveColumnLeft(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn)) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/React.createElement(TableColumnMoveLeftIcon, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = tooltip(moveColumnLeft)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(messages.moveColumnLeft, {
+    0: selectedColumnCount
+  }));
+};

package/dist/es2019/ui/TableMenu/column/items/MoveColumnRightItem.js

@@ -1,14 +1,55 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export const MoveColumnRightItem = () => {
-  var _tooltip;
+import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { getSelectedColumnIndexes } from '../../../../pm-plugins/utils/selection';
+import { TABLE_COLUMN } from '../../shared/consts';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
+const shouldShowMoveColumnRight = isLastColumn => !isLastColumn;
+export const MoveColumnRightItem = props => {
+  var _tableMenuContext$sel, _tooltip;
+  const {
+    api
+  } = props;
+  const {
+    editorView
+  } = useEditorToolbar();
+  const tableMenuContext = useTableMenuContext();
+  const {
+    tableNode
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState;
+    return {
+      tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+    };
+  });
+  const selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   const {
     formatMessage
   } = useIntl();
+  const handleClick = () => {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    moveSourceWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, getPluginState(editorView.state).getIntl)(INPUT_METHOD.TABLE_CONTEXT_MENU, TABLE_COLUMN, getSelectedColumnIndexes(selectionRect), selectionRect.right)(editorView.state, editorView.dispatch);
+  };
+  if (!tableNode || !shouldShowMoveColumnRight(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isLastColumn)) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableColumnMoveRightIcon, {
       color: "currentColor",
       label: "",
@@ -18,6 +59,6 @@ export const MoveColumnRightItem = () => {
       shortcut: (_tooltip = tooltip(moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(messages.moveColumnRight, {
-    0: 1
+    0: selectedColumnCount
   }));
 };

package/dist/es2019/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -1,14 +1,37 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-export const SortDecreasingItem = () => {
+export const SortDecreasingItem = ({
+  api
+}) => {
+  const {
+    editorView
+  } = useEditorToolbar();
   const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    const columnIndex = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (columnIndex === undefined) {
+      return;
+    }
+    sortColumnWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.DESC)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowDownIcon, {
       color: "currentColor",

package/dist/es2019/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -1,14 +1,37 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-export const SortIncreasingItem = () => {
+export const SortIncreasingItem = ({
+  api
+}) => {
+  const {
+    editorView
+  } = useEditorToolbar();
   const tableMenuContext = useTableMenuContext();
   const {
     formatMessage
   } = useIntl();
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    const columnIndex = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (columnIndex === undefined) {
+      return;
+    }
+    sortColumnWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, SortOrder.ASC)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/React.createElement(ArrowUpIcon, {
       color: "currentColor",

package/dist/es2019/ui/TableMenu/column/keys.js

@@ -56,6 +56,10 @@ export const ADD_COLUMN_RIGHT_ITEM = {
   type: 'menu-item',
   key: 'add-column-right'
 };
+export const MOVE_COLUMN_LEFT_ITEM = {
+  type: 'menu-item',
+  key: 'move-column-left'
+};
 export const MOVE_COLUMN_RIGHT_ITEM = {
   type: 'menu-item',
   key: 'move-column-right'
@@ -84,8 +88,9 @@ export const COLUMN_SORT_SECTION_RANK = {
 export const COLUMN_ADD_SECTION_RANK = {
   [ADD_COLUMN_LEFT_ITEM.key]: 100,
   [ADD_COLUMN_RIGHT_ITEM.key]: 200,
-  [MOVE_COLUMN_RIGHT_ITEM.key]: 300,
-  [DISTRIBUTE_COLUMNS_ITEM.key]: 400
+  [MOVE_COLUMN_LEFT_ITEM.key]: 300,
+  [MOVE_COLUMN_RIGHT_ITEM.key]: 400,
+  [DISTRIBUTE_COLUMNS_ITEM.key]: 500
 };
 export const COLUMN_DANGER_SECTION_RANK = {
   [CLEAR_CELLS_ITEM.key]: 100,

package/dist/es2019/ui/TableMenu/shared/getTableMenuComponents.js

@@ -2,4 +2,4 @@ import { getCellMenuComponents } from '../cell/getCellMenuComponents';
 import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
-export const getTableMenuComponents = params => [...getRowMenuComponents(params), ...getColumnMenuComponents(), ...getCellMenuComponents(), ...getSharedItems(params)];
+export const getTableMenuComponents = params => [...getRowMenuComponents(params), ...getColumnMenuComponents(params), ...getCellMenuComponents(), ...getSharedItems(params)];

package/dist/esm/tablePlugin.js

@@ -116,6 +116,9 @@ var tablePlugin = function tablePlugin(_ref) {
         isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
         isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
         isNumberColumnEnabled: tablePluginState.isNumberColumnEnabled,
+        isCommentEditor: tablePluginState.isCommentEditor,
+        isTableScalingEnabled: tablePluginState.isTableScalingEnabled,
+        isTableFixedColumnWidthsOptionEnabled: isTableFixedColumnWidthsOptionEnabled,
         ordering: tablePluginState.ordering,
         isResizing: !!(tableResizingPluginState !== null && tableResizingPluginState !== void 0 && tableResizingPluginState.dragging || tableWidthResizingPluginState !== null && tableWidthResizingPluginState !== void 0 && tableWidthResizingPluginState.resizing),
         isTableResizing: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.resizing,

package/dist/esm/ui/TableMenu/column/getColumnMenuComponents.js

@@ -7,11 +7,13 @@ import { ColumnToggleSection } from './items/ColumnToggleSection';
 import { DeleteColumnItem } from './items/DeleteColumnItem';
 import { DistributeColumnsItem } from './items/DistributeColumnsItem';
 import { HeaderColumnToggleItem } from './items/HeaderColumnToggleItem';
+import { MoveColumnLeftItem } from './items/MoveColumnLeftItem';
 import { MoveColumnRightItem } from './items/MoveColumnRightItem';
 import { SortDecreasingItem } from './items/SortDecreasingItem';
 import { SortIncreasingItem } from './items/SortIncreasingItem';
-import { COLUMN_MENU, COLUMN_TOGGLE_SECTION, COLUMN_BACKGROUND_SECTION, COLUMN_SORT_SECTION, COLUMN_ADD_SECTION, COLUMN_DANGER_SECTION, COLUMN_SECTION_RANK, HEADER_COLUMN_TOGGLE_ITEM, SORT_INCREASING_ITEM, SORT_DECREASING_ITEM, ADD_COLUMN_LEFT_ITEM, ADD_COLUMN_RIGHT_ITEM, MOVE_COLUMN_RIGHT_ITEM, DISTRIBUTE_COLUMNS_ITEM, DELETE_COLUMN_ITEM, COLUMN_TOGGLE_SECTION_RANK, COLUMN_SORT_SECTION_RANK, COLUMN_ADD_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from './keys';
-export var getColumnMenuComponents = function getColumnMenuComponents() {
+import { COLUMN_MENU, COLUMN_TOGGLE_SECTION, COLUMN_BACKGROUND_SECTION, COLUMN_SORT_SECTION, COLUMN_ADD_SECTION, COLUMN_DANGER_SECTION, COLUMN_SECTION_RANK, HEADER_COLUMN_TOGGLE_ITEM, SORT_INCREASING_ITEM, SORT_DECREASING_ITEM, ADD_COLUMN_LEFT_ITEM, ADD_COLUMN_RIGHT_ITEM, MOVE_COLUMN_LEFT_ITEM, MOVE_COLUMN_RIGHT_ITEM, DISTRIBUTE_COLUMNS_ITEM, DELETE_COLUMN_ITEM, COLUMN_TOGGLE_SECTION_RANK, COLUMN_SORT_SECTION_RANK, COLUMN_ADD_SECTION_RANK, COLUMN_DANGER_SECTION_RANK } from './keys';
+export var getColumnMenuComponents = function getColumnMenuComponents(_ref) {
+  var api = _ref.api;
   return [
   // --- Menu surface ---
   {
@@ -28,7 +30,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/React.createElement(ColumnToggleSection, null, props.children);
+      return /*#__PURE__*/React.createElement(ColumnToggleSection, {
+        api: api
+      }, props.children);
     }
   }, {
     type: HEADER_COLUMN_TOGGLE_ITEM.type,
@@ -39,7 +43,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_TOGGLE_SECTION_RANK[HEADER_COLUMN_TOGGLE_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(HeaderColumnToggleItem, null);
+      return /*#__PURE__*/React.createElement(HeaderColumnToggleItem, {
+        api: api
+      });
     }
   },
   // --- Background color section ---
@@ -52,7 +58,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
     }],
     component: function component(props) {
-      return /*#__PURE__*/React.createElement(ColumnBackgroundSection, null, props.children);
+      return /*#__PURE__*/React.createElement(ColumnBackgroundSection, {
+        api: api
+      }, props.children);
     }
   },
   // --- Sort section ---
@@ -78,7 +86,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_SORT_SECTION_RANK[SORT_INCREASING_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(SortIncreasingItem, null);
+      return /*#__PURE__*/React.createElement(SortIncreasingItem, {
+        api: api
+      });
     }
   }, {
     type: SORT_DECREASING_ITEM.type,
@@ -89,7 +99,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_SORT_SECTION_RANK[SORT_DECREASING_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(SortDecreasingItem, null);
+      return /*#__PURE__*/React.createElement(SortDecreasingItem, {
+        api: api
+      });
     }
   },
   // --- Add / Move section ---
@@ -115,7 +127,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_LEFT_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(AddColumnLeftItem, null);
+      return /*#__PURE__*/React.createElement(AddColumnLeftItem, {
+        api: api
+      });
     }
   }, {
     type: ADD_COLUMN_RIGHT_ITEM.type,
@@ -126,7 +140,22 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_RIGHT_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(AddColumnRightItem, null);
+      return /*#__PURE__*/React.createElement(AddColumnRightItem, {
+        api: api
+      });
+    }
+  }, {
+    type: MOVE_COLUMN_LEFT_ITEM.type,
+    key: MOVE_COLUMN_LEFT_ITEM.key,
+    parents: [{
+      type: COLUMN_ADD_SECTION.type,
+      key: COLUMN_ADD_SECTION.key,
+      rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_LEFT_ITEM.key]
+    }],
+    component: function component() {
+      return /*#__PURE__*/React.createElement(MoveColumnLeftItem, {
+        api: api
+      });
     }
   }, {
     type: MOVE_COLUMN_RIGHT_ITEM.type,
@@ -137,7 +166,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_RIGHT_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(MoveColumnRightItem, null);
+      return /*#__PURE__*/React.createElement(MoveColumnRightItem, {
+        api: api
+      });
     }
   }, {
     type: DISTRIBUTE_COLUMNS_ITEM.type,
@@ -148,7 +179,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_ADD_SECTION_RANK[DISTRIBUTE_COLUMNS_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(DistributeColumnsItem, null);
+      return /*#__PURE__*/React.createElement(DistributeColumnsItem, {
+        api: api
+      });
     }
   },
   // --- Danger section (Clear cells, Delete column) ---
@@ -174,7 +207,9 @@ export var getColumnMenuComponents = function getColumnMenuComponents() {
       rank: COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(DeleteColumnItem, null);
+      return /*#__PURE__*/React.createElement(DeleteColumnItem, {
+        api: api
+      });
     }
   }];
 };

package/dist/esm/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -1,13 +1,46 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var AddColumnLeftItem = function AddColumnLeftItem() {
+import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export var AddColumnLeftItem = function AddColumnLeftItem(_ref) {
   var _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var tableState = states.tableState;
+      return {
+        isCommentEditor: tableState === null || tableState === void 0 ? void 0 : tableState.isCommentEditor,
+        isTableFixedColumnWidthsOptionEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableFixedColumnWidthsOptionEnabled,
+        isTableScalingEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableScalingEnabled
+      };
+    }),
+    isCommentEditor = _useSharedPluginState.isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled = _useSharedPluginState.isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled = _useSharedPluginState.isTableScalingEnabled;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (index === undefined) {
+      return;
+    }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    insertColumnWithAnalytics(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableColumnAddLeftIcon, {
       color: "currentColor",
       label: "",

package/dist/esm/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -1,13 +1,46 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
+import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
-export var AddColumnRightItem = function AddColumnRightItem() {
+import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export var AddColumnRightItem = function AddColumnRightItem(_ref) {
   var _tooltip;
+  var api = _ref.api;
+  var _useEditorToolbar = useEditorToolbar(),
+    editorView = _useEditorToolbar.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var tableState = states.tableState;
+      return {
+        isCommentEditor: tableState === null || tableState === void 0 ? void 0 : tableState.isCommentEditor,
+        isTableFixedColumnWidthsOptionEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableFixedColumnWidthsOptionEnabled,
+        isTableScalingEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isTableScalingEnabled
+      };
+    }),
+    isCommentEditor = _useSharedPluginState.isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled = _useSharedPluginState.isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled = _useSharedPluginState.isTableScalingEnabled;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = getSelectionRect(editorView.state.selection);
+    var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
+    if (index === undefined) {
+      return;
+    }
+    var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    insertColumnWithAnalytics(api, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(INPUT_METHOD.TABLE_CONTEXT_MENU, index)(editorView.state, editorView.dispatch, editorView);
+  };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableColumnAddRightIcon, {
       color: "currentColor",
       label: "",

package/dist/esm/ui/TableMenu/column/items/ColumnBackgroundSection.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
@@ -10,9 +11,21 @@ import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
  * the very top of the menu.
  */
 export var ColumnBackgroundSection = function ColumnBackgroundSection(_ref) {
-  var children = _ref.children;
+  var api = _ref.api,
+    children = _ref.children;
   var tableMenuContext = useTableMenuContext();
-  var hasSeparator = shouldShowHeaderColumnToggle(tableMenuContext);
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        isHeaderColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowHeaderColumn
+      };
+    }),
+    isHeaderColumnAllowed = _useSharedPluginState.isHeaderColumnAllowed;
+  var hasSeparator = shouldShowHeaderColumnToggle({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed: isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  });
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator
   }, children);

package/dist/esm/ui/TableMenu/column/items/ColumnToggleSection.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
@@ -9,9 +10,21 @@ import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
  * empty wrapper (and so the section below can drop its leading separator).
  */
 export var ColumnToggleSection = function ColumnToggleSection(_ref) {
-  var children = _ref.children;
+  var api = _ref.api,
+    children = _ref.children;
   var tableMenuContext = useTableMenuContext();
-  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        isHeaderColumnAllowed: (_states$tableState = states.tableState) === null || _states$tableState === void 0 || (_states$tableState = _states$tableState.pluginConfig) === null || _states$tableState === void 0 ? void 0 : _states$tableState.allowHeaderColumn
+      };
+    }),
+    isHeaderColumnAllowed = _useSharedPluginState.isHeaderColumnAllowed;
+  if (!shouldShowHeaderColumnToggle({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed: isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  })) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, null, children);