@atlaskit/editor-plugin-table 22.4.12 → 22.4.14

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoveColumnLeftItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _tableColumnMoveLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-left"));
+var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _consts = require("../../shared/consts");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var shouldShowMoveColumnLeft = function shouldShowMoveColumnLeft(isFirstColumn) {
+  return !isFirstColumn;
+};
+var MoveColumnLeftItem = exports.MoveColumnLeftItem = function MoveColumnLeftItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+      };
+    }),
+    tableNode = _useSharedPluginState.tableNode;
+  var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_COLUMN, (0, _selection.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
+    elemBefore: /*#__PURE__*/_react.default.createElement(_tableColumnMoveLeft.default, {
+      color: "currentColor",
+      label: "",
+      size: "small"
+    }),
+    elemAfter: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveColumnLeft)) !== null && _tooltip !== void 0 ? _tooltip : ''
+    })
+  }, formatMessage(_messages.tableMessages.moveColumnLeft, {
+    0: selectedColumnCount
+  }));
+};

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

@@ -7,14 +7,53 @@ Object.defineProperty(exports, "__esModule", {
 exports.MoveColumnRightItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
-var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRightItem() {
-  var _tooltip;
+var _commandsWithAnalytics = require("../../../../pm-plugins/drag-and-drop/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _selection = require("../../../../pm-plugins/utils/selection");
+var _consts = require("../../shared/consts");
+var _TableMenuContext = require("../../shared/TableMenuContext");
+var shouldShowMoveColumnRight = function shouldShowMoveColumnRight(isLastColumn) {
+  return !isLastColumn;
+};
+var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRightItem(props) {
+  var _tableMenuContext$sel, _tooltip;
+  var api = props.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
+      var _states$tableState;
+      return {
+        tableNode: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.tableNode
+      };
+    }),
+    tableNode = _useSharedPluginState.tableNode;
+  var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics, _api$accessibilityUti;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    if (!selectionRect) {
+      return;
+    }
+    (0, _commandsWithAnalytics.moveSourceWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify, (0, _pluginFactory.getPluginState)(editorView.state).getIntl)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, _consts.TABLE_COLUMN, (0, _selection.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.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TableColumnMoveRightIcon, {
       color: "currentColor",
       label: "",
@@ -24,6 +63,6 @@ var MoveColumnRightItem = exports.MoveColumnRightItem = function MoveColumnRight
       shortcut: (_tooltip = (0, _keymaps.tooltip)(_keymaps.moveColumnRight)) !== null && _tooltip !== void 0 ? _tooltip : ''
     })
   }, formatMessage(_messages.tableMessages.moveColumnRight, {
-    0: 1
+    0: selectedColumnCount
   }));
 };

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

@@ -7,14 +7,35 @@ Object.defineProperty(exports, "__esModule", {
 exports.SortDecreasingItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _customSteps = require("@atlaskit/custom-steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
-var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingItem() {
+var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingItem(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var columnIndex = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (columnIndex === undefined) {
+      return;
+    }
+    (0, _commandsWithAnalytics.sortColumnWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, _customSteps.TableSortOrder.DESC)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ArrowDownIcon, {
       color: "currentColor",

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

@@ -7,14 +7,35 @@ Object.defineProperty(exports, "__esModule", {
 exports.SortIncreasingItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
+var _customSteps = require("@atlaskit/custom-steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _TableMenuContext = require("../../shared/TableMenuContext");
-var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingItem() {
+var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingItem(_ref) {
+  var api = _ref.api;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    var selectionRect = (0, _utils.getSelectionRect)(editorView.state.selection);
+    var columnIndex = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (columnIndex === undefined) {
+      return;
+    }
+    (0, _commandsWithAnalytics.sortColumnWithAnalytics)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, columnIndex, _customSteps.TableSortOrder.ASC)(editorView.state, editorView.dispatch);
+  };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    onClick: handleClick,
     isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ArrowUpIcon, {
       color: "currentColor",

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SORT_INCREASING_ITEM = exports.SORT_DECREASING_ITEM = exports.MOVE_COLUMN_RIGHT_ITEM = exports.HEADER_COLUMN_TOGGLE_ITEM = exports.DISTRIBUTE_COLUMNS_ITEM = exports.DELETE_COLUMN_ITEM = exports.COLUMN_TOGGLE_SECTION_RANK = exports.COLUMN_TOGGLE_SECTION = exports.COLUMN_SORT_SECTION_RANK = exports.COLUMN_SORT_SECTION = exports.COLUMN_SECTION_RANK = exports.COLUMN_MENU = exports.COLUMN_DANGER_SECTION_RANK = exports.COLUMN_DANGER_SECTION = exports.COLUMN_BACKGROUND_SECTION_RANK = exports.COLUMN_BACKGROUND_SECTION = exports.COLUMN_ADD_SECTION_RANK = exports.COLUMN_ADD_SECTION = exports.ADD_COLUMN_RIGHT_ITEM = exports.ADD_COLUMN_LEFT_ITEM = void 0;
+exports.SORT_INCREASING_ITEM = exports.SORT_DECREASING_ITEM = exports.MOVE_COLUMN_RIGHT_ITEM = exports.MOVE_COLUMN_LEFT_ITEM = exports.HEADER_COLUMN_TOGGLE_ITEM = exports.DISTRIBUTE_COLUMNS_ITEM = exports.DELETE_COLUMN_ITEM = exports.COLUMN_TOGGLE_SECTION_RANK = exports.COLUMN_TOGGLE_SECTION = exports.COLUMN_SORT_SECTION_RANK = exports.COLUMN_SORT_SECTION = exports.COLUMN_SECTION_RANK = exports.COLUMN_MENU = exports.COLUMN_DANGER_SECTION_RANK = exports.COLUMN_DANGER_SECTION = exports.COLUMN_BACKGROUND_SECTION_RANK = exports.COLUMN_BACKGROUND_SECTION = exports.COLUMN_ADD_SECTION_RANK = exports.COLUMN_ADD_SECTION = exports.ADD_COLUMN_RIGHT_ITEM = exports.ADD_COLUMN_LEFT_ITEM = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _keys = require("../shared/keys");
 // --- Menu surface ---
@@ -57,6 +57,10 @@ var ADD_COLUMN_RIGHT_ITEM = exports.ADD_COLUMN_RIGHT_ITEM = {
   type: 'menu-item',
   key: 'add-column-right'
 };
+var MOVE_COLUMN_LEFT_ITEM = exports.MOVE_COLUMN_LEFT_ITEM = {
+  type: 'menu-item',
+  key: 'move-column-left'
+};
 var MOVE_COLUMN_RIGHT_ITEM = exports.MOVE_COLUMN_RIGHT_ITEM = {
   type: 'menu-item',
   key: 'move-column-right'
@@ -75,5 +79,5 @@ var DELETE_COLUMN_ITEM = exports.DELETE_COLUMN_ITEM = {
 var COLUMN_TOGGLE_SECTION_RANK = exports.COLUMN_TOGGLE_SECTION_RANK = (0, _defineProperty2.default)({}, HEADER_COLUMN_TOGGLE_ITEM.key, 100);
 var COLUMN_BACKGROUND_SECTION_RANK = exports.COLUMN_BACKGROUND_SECTION_RANK = (0, _defineProperty2.default)({}, _keys.BACKGROUND_COLOR_ITEM.key, 100);
 var COLUMN_SORT_SECTION_RANK = exports.COLUMN_SORT_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, SORT_INCREASING_ITEM.key, 100), SORT_DECREASING_ITEM.key, 200);
-var COLUMN_ADD_SECTION_RANK = exports.COLUMN_ADD_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ADD_COLUMN_LEFT_ITEM.key, 100), ADD_COLUMN_RIGHT_ITEM.key, 200), MOVE_COLUMN_RIGHT_ITEM.key, 300), DISTRIBUTE_COLUMNS_ITEM.key, 400);
+var COLUMN_ADD_SECTION_RANK = exports.COLUMN_ADD_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ADD_COLUMN_LEFT_ITEM.key, 100), ADD_COLUMN_RIGHT_ITEM.key, 200), MOVE_COLUMN_LEFT_ITEM.key, 300), MOVE_COLUMN_RIGHT_ITEM.key, 400), DISTRIBUTE_COLUMNS_ITEM.key, 500);
 var COLUMN_DANGER_SECTION_RANK = exports.COLUMN_DANGER_SECTION_RANK = (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _keys.CLEAR_CELLS_ITEM.key, 100), DELETE_COLUMN_ITEM.key, 200);

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

@@ -11,5 +11,5 @@ var _getColumnMenuComponents = require("../column/getColumnMenuComponents");
 var _getRowMenuComponents = require("../row/getRowMenuComponents");
 var _getSharedItems = require("./getSharedItems");
 var getTableMenuComponents = exports.getTableMenuComponents = function getTableMenuComponents(params) {
-  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)()), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)(params)));
+  return [].concat((0, _toConsumableArray2.default)((0, _getRowMenuComponents.getRowMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getColumnMenuComponents.getColumnMenuComponents)(params)), (0, _toConsumableArray2.default)((0, _getCellMenuComponents.getCellMenuComponents)()), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)(params)));
 };

package/dist/es2019/nodeviews/TableComponent.js

@@ -8,6 +8,7 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { NodeViewContentHole } from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
 import { isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -19,7 +20,7 @@ import { autoSizeTable, clearHoverSelection, setTableRef } from '../pm-plugins/c
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers/plugin-key';
 import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
-import { insertColgroupFromNode, hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
+import { hasTableBeenResized, insertColgroupFromNode } from '../pm-plugins/table-resizing/utils/colgroup';
 import { COLUMN_MIN_WIDTH, TABLE_EDITOR_MARGIN, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { getLayoutSize, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -71,6 +72,21 @@ class TableComponent extends React.Component {
       this.props.view.dispatch(tr);
     });
     _defineProperty(this, "lastSetTableRef", null);
+    _defineProperty(this, "setWrapperRef", elem => {
+      this.wrapper = elem;
+      if (!elem) {
+        return;
+      }
+      this.props.contentDOM(elem);
+      const tableElement = elem.querySelector('table');
+      if (tableElement !== this.table) {
+        this.table = tableElement;
+        this.observeTable(this.table);
+        if (this.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || this.props.tableActive) && this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
+          setTableRef(this.table)(this.props.view.state, this.props.view.dispatch);
+        }
+      }
+    });
     _defineProperty(this, "onStickyState", state => {
       const pos = this.props.getPos();
       if (!isValidPosition(pos, this.props.view.state)) {
@@ -919,26 +935,12 @@ class TableComponent extends React.Component {
         var _this$wrapper4;
         return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
       }
-    }), /*#__PURE__*/React.createElement("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    }), /*#__PURE__*/React.createElement(NodeViewContentHole
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- existing table wrapper class required for legacy styling hooks
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: classnames(ClassName.TABLE_NODE_WRAPPER),
-      ref: elem => {
-        this.wrapper = elem;
-        if (elem) {
-          this.props.contentDOM(elem);
-          const tableElement = elem.querySelector('table');
-          if (tableElement !== this.table) {
-            this.table = tableElement;
-            this.observeTable(this.table);
-
-            // // Update tableRef in plugin state when table is properly mounted
-            // // At this point, both table and wrapper are in DOM with correct parent-child relationship
-            if (this.table && (!expValEquals('platform_editor_table_ref_optimisation', 'isEnabled', true) || this.props.tableActive) && this.props.view && !expValEquals('platform_editor_fix_editor_unhandled_type_errors', 'isEnabled', true) && (expValEquals('platform_editor_table_update_table_ref', 'isEnabled', true) || fg('platform_editor_enable_table_update_ref_atlas'))) {
-              setTableRef(this.table)(this.props.view.state, this.props.view.dispatch);
-            }
-          }
-        }
-      }
+      ref: this.setWrapperRef
     }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,

package/dist/es2019/tablePlugin.js

@@ -113,6 +113,9 @@ const tablePlugin = ({
         isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
         isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
         isNumberColumnEnabled: tablePluginState.isNumberColumnEnabled,
+        isCommentEditor: tablePluginState.isCommentEditor,
+        isTableScalingEnabled: tablePluginState.isTableScalingEnabled,
+        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/es2019/ui/TableMenu/column/getColumnMenuComponents.js

@@ -7,11 +7,14 @@ 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 const 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 const getColumnMenuComponents = ({
+  api
+}) => [
 // --- Menu surface ---
 {
   type: COLUMN_MENU.type,
@@ -26,7 +29,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_MENU.key,
     rank: COLUMN_SECTION_RANK[COLUMN_TOGGLE_SECTION.key]
   }],
-  component: props => /*#__PURE__*/React.createElement(ColumnToggleSection, null, props.children)
+  component: props => /*#__PURE__*/React.createElement(ColumnToggleSection, {
+    api: api
+  }, props.children)
 }, {
   type: HEADER_COLUMN_TOGGLE_ITEM.type,
   key: HEADER_COLUMN_TOGGLE_ITEM.key,
@@ -35,7 +40,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_TOGGLE_SECTION.key,
     rank: COLUMN_TOGGLE_SECTION_RANK[HEADER_COLUMN_TOGGLE_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(HeaderColumnToggleItem, null)
+  component: () => /*#__PURE__*/React.createElement(HeaderColumnToggleItem, {
+    api: api
+  })
 },
 // --- Background color section ---
 {
@@ -46,7 +53,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_MENU.key,
     rank: COLUMN_SECTION_RANK[COLUMN_BACKGROUND_SECTION.key]
   }],
-  component: props => /*#__PURE__*/React.createElement(ColumnBackgroundSection, null, props.children)
+  component: props => /*#__PURE__*/React.createElement(ColumnBackgroundSection, {
+    api: api
+  }, props.children)
 },
 // --- Sort section ---
 {
@@ -68,7 +77,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_SORT_SECTION.key,
     rank: COLUMN_SORT_SECTION_RANK[SORT_INCREASING_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(SortIncreasingItem, null)
+  component: () => /*#__PURE__*/React.createElement(SortIncreasingItem, {
+    api: api
+  })
 }, {
   type: SORT_DECREASING_ITEM.type,
   key: SORT_DECREASING_ITEM.key,
@@ -77,7 +88,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_SORT_SECTION.key,
     rank: COLUMN_SORT_SECTION_RANK[SORT_DECREASING_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(SortDecreasingItem, null)
+  component: () => /*#__PURE__*/React.createElement(SortDecreasingItem, {
+    api: api
+  })
 },
 // --- Add / Move section ---
 {
@@ -99,7 +112,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_ADD_SECTION.key,
     rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_LEFT_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(AddColumnLeftItem, null)
+  component: () => /*#__PURE__*/React.createElement(AddColumnLeftItem, {
+    api: api
+  })
 }, {
   type: ADD_COLUMN_RIGHT_ITEM.type,
   key: ADD_COLUMN_RIGHT_ITEM.key,
@@ -108,7 +123,20 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_ADD_SECTION.key,
     rank: COLUMN_ADD_SECTION_RANK[ADD_COLUMN_RIGHT_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(AddColumnRightItem, null)
+  component: () => /*#__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: () => /*#__PURE__*/React.createElement(MoveColumnLeftItem, {
+    api: api
+  })
 }, {
   type: MOVE_COLUMN_RIGHT_ITEM.type,
   key: MOVE_COLUMN_RIGHT_ITEM.key,
@@ -117,7 +145,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_ADD_SECTION.key,
     rank: COLUMN_ADD_SECTION_RANK[MOVE_COLUMN_RIGHT_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(MoveColumnRightItem, null)
+  component: () => /*#__PURE__*/React.createElement(MoveColumnRightItem, {
+    api: api
+  })
 }, {
   type: DISTRIBUTE_COLUMNS_ITEM.type,
   key: DISTRIBUTE_COLUMNS_ITEM.key,
@@ -126,7 +156,9 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_ADD_SECTION.key,
     rank: COLUMN_ADD_SECTION_RANK[DISTRIBUTE_COLUMNS_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(DistributeColumnsItem, null)
+  component: () => /*#__PURE__*/React.createElement(DistributeColumnsItem, {
+    api: api
+  })
 },
 // --- Danger section (Clear cells, Delete column) ---
 {
@@ -148,5 +180,7 @@ export const getColumnMenuComponents = () => [
     key: COLUMN_DANGER_SECTION.key,
     rank: COLUMN_DANGER_SECTION_RANK[DELETE_COLUMN_ITEM.key]
   }],
-  component: () => /*#__PURE__*/React.createElement(DeleteColumnItem, null)
+  component: () => /*#__PURE__*/React.createElement(DeleteColumnItem, {
+    api: api
+  })
 }];

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

@@ -1,14 +1,50 @@
 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 const AddColumnLeftItem = () => {
+import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export const AddColumnLeftItem = ({
+  api
+}) => {
   var _tooltip;
+  const {
+    editorView
+  } = useEditorToolbar();
   const {
     formatMessage
   } = useIntl();
+  const {
+    isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    const 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
+    };
+  });
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.left;
+    if (index === undefined) {
+      return;
+    }
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    insertColumnWithAnalytics(api, api === null || api === void 0 ? 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/es2019/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -1,14 +1,50 @@
 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 const AddColumnRightItem = () => {
+import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+export const AddColumnRightItem = ({
+  api
+}) => {
   var _tooltip;
+  const {
+    editorView
+  } = useEditorToolbar();
   const {
     formatMessage
   } = useIntl();
+  const {
+    isCommentEditor,
+    isTableFixedColumnWidthsOptionEnabled,
+    isTableScalingEnabled
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    const 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
+    };
+  });
+  const handleClick = () => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    const selectionRect = getSelectionRect(editorView.state.selection);
+    const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
+    if (index === undefined) {
+      return;
+    }
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+    insertColumnWithAnalytics(api, api === null || api === void 0 ? 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/es2019/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,10 +11,23 @@ import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
  * the very top of the menu.
  */
 export const ColumnBackgroundSection = ({
+  api,
   children
 }) => {
   const tableMenuContext = useTableMenuContext();
-  const hasSeparator = shouldShowHeaderColumnToggle(tableMenuContext);
+  const {
+    isHeaderColumnAllowed
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState, _states$tableState$pl;
+    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
+    };
+  });
+  const hasSeparator = shouldShowHeaderColumnToggle({
+    isFirstColumn: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.isFirstColumn,
+    isHeaderColumnAllowed,
+    selectedColumnCount: tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount
+  });
   return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
     hasSeparator: hasSeparator
   }, children);

package/dist/es2019/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,10 +10,23 @@ import { shouldShowHeaderColumnToggle } from './HeaderColumnToggleItem';
  * empty wrapper (and so the section below can drop its leading separator).
  */
 export const ColumnToggleSection = ({
+  api,
   children
 }) => {
   const tableMenuContext = useTableMenuContext();
-  if (!shouldShowHeaderColumnToggle(tableMenuContext)) {
+  const {
+    isHeaderColumnAllowed
+  } = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], states => {
+    var _states$tableState, _states$tableState$pl;
+    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
+    };
+  });
+  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(ToolbarDropdownItemSection, null, children);