@atlaskit/editor-core 172.1.1 → 172.2.0

package/dist/esm/plugins/table/toolbar.js

@@ -1,23 +1,23 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import commonMessages from '../../messages';
+import commonMessages from '@atlaskit/editor-common/messages';
 import { clearHoverSelection, hoverTable } from './commands';
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
 import { isReferencedSource } from './utils/referentiality';
-import { INPUT_METHOD } from '../analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import { canMergeCells } from './transforms';
 import { splitCell } from '@atlaskit/editor-tables/utils';
 import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
-import { closestElement } from '../../utils/dom';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar'; // TODO: ED-14403 investigate why these translations don't work
-
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
+// TODO: ED-14403 investigate why these translations don't work
 export var messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',
@@ -45,30 +45,30 @@ export var messages = defineMessages({
     description: 'Wraps table in an expand'
   }
 });
-export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref) {
+export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var options = [{
     id: 'editor.table.headerRow',
     title: formatMessage(messages.headerRow),
-    onClick: toggleHeaderRowWithAnalytics(),
+    onClick: toggleHeaderRowWithAnalytics(editorAnalyticsAPI),
     selected: state.isHeaderRowEnabled,
     hidden: !config.allowHeaderRow
   }, {
     id: 'editor.table.headerColumn',
     title: formatMessage(messages.headerColumn),
-    onClick: toggleHeaderColumnWithAnalytics(),
+    onClick: toggleHeaderColumnWithAnalytics(editorAnalyticsAPI),
     selected: state.isHeaderColumnEnabled,
     hidden: !config.allowHeaderColumn
   }, {
     id: 'editor.table.numberedColumn',
     title: formatMessage(messages.numberedColumn),
-    onClick: toggleNumberColumnWithAnalytics(),
+    onClick: toggleNumberColumnWithAnalytics(editorAnalyticsAPI),
     selected: state.isNumberColumnEnabled,
     hidden: !config.allowNumberColumn
   }, {
     id: 'editor.table.collapseTable',
     title: formatMessage(messages.collapseTable),
-    onClick: wrapTableInExpandWithAnalytics(),
+    onClick: wrapTableInExpandWithAnalytics(editorAnalyticsAPI),
     selected: !!state.isTableCollapsed,
     disabled: !state.canCollapseTable,
     hidden: !config.allowCollapse
@@ -86,7 +86,7 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
 // relay it to the native mobile. Native mobile displays the menu
 // with native widgets. It's enabled via a plugin config.
 
-export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2) {
+export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
   var formatMessage = _ref2.formatMessage;
   var top = initialSelectionRect.top,
       bottom = initialSelectionRect.bottom,
@@ -102,7 +102,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
 
       if (index) {
-        insertColumnWithAnalytics(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
 
       return true;
@@ -117,7 +117,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       var index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.bottom;
 
       if (index) {
-        insertRowWithAnalytics(INPUT_METHOD.FLOATING_TB, {
+        insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, {
           index: index,
           moveCursorToInsertedRow: true
         })(state, dispatch);
@@ -136,7 +136,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       var selectionRect = getClosestSelectionRect(state);
 
       if (selectionRect) {
-        deleteColumnsWithAnalytics(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
 
       return true;
@@ -152,7 +152,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       var selectionRect = getClosestSelectionRect(state);
 
       if (selectionRect) {
-        deleteRowsWithAnalytics(INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
+        deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, selectionRect, false)(state, dispatch);
       }
 
       return true;
@@ -162,13 +162,13 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   }, {
     id: 'editor.table.mergeCells',
     title: formatMessage(ContextualMenuMessages.mergeCells),
-    onClick: mergeCellsWithAnalytics(),
+    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
     selected: false,
     disabled: !canMergeCells(editorState.tr)
   }, {
     id: 'editor.table.splitCell',
     title: formatMessage(ContextualMenuMessages.splitCell),
-    onClick: splitCellWithAnalytics(),
+    onClick: splitCellWithAnalytics(editorAnalyticsAPI),
     selected: false,
     disabled: !splitCell(editorState)
   }, {
@@ -180,7 +180,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       var _getPluginState = getPluginState(state),
           targetCellPosition = _getPluginState.targetCellPosition;
 
-      emptyMultipleCellsWithAnalytics(INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
+      emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
       return true;
     },
     selected: false,
@@ -200,69 +200,71 @@ var getClosestSelectionRect = function getClosestSelectionRect(state) {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
 
-export var getToolbarConfig = function getToolbarConfig(config) {
-  return function (state, intl) {
-    var tableObject = findTable(state.selection);
-    var pluginState = getPluginState(state);
-    var resizeState = tableResizingPluginKey.getState(state);
+export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+  return function (config) {
+    return function (state, intl) {
+      var tableObject = findTable(state.selection);
+      var pluginState = getPluginState(state);
+      var resizeState = tableResizingPluginKey.getState(state);
 
-    if (tableObject && pluginState.editorHasFocus) {
-      var nodeType = state.schema.nodes.table;
-      var menu = getToolbarMenuConfig(config, pluginState, intl);
-      var cellItems = getCellItems(config, state, intl); // Check if we need to show confirm dialog for delete button
+      if (tableObject && pluginState.editorHasFocus) {
+        var nodeType = state.schema.nodes.table;
+        var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
+        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
 
-      var confirmDialog;
-      var localId = tableObject.node.attrs.localId;
+        var confirmDialog;
+        var localId = tableObject.node.attrs.localId;
 
-      if (localId && isReferencedSource(state, localId)) {
-        confirmDialog = {
-          okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
-          message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
-        };
-      }
+        if (localId && isReferencedSource(state, localId)) {
+          confirmDialog = {
+            okButtonLabel: intl.formatMessage(tableMessages.confirmDeleteLinkedModalOKButton),
+            message: intl.formatMessage(tableMessages.confirmDeleteLinkedModalMessage)
+          };
+        }
 
-      var getDomRef = function getDomRef(editorView) {
-        var element;
-        var domAtPos = editorView.domAtPos.bind(editorView);
-        var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
+        var getDomRef = function getDomRef(editorView) {
+          var element;
+          var domAtPos = editorView.domAtPos.bind(editorView);
+          var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
 
-        if (parent) {
-          var tableRef = parent.querySelector('table') || undefined;
+          if (parent) {
+            var tableRef = parent.querySelector('table') || undefined;
 
-          if (tableRef) {
-            element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+            if (tableRef) {
+              element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
+            }
           }
-        }
 
-        return element;
-      };
+          return element;
+        };
 
-      return {
-        title: 'Table floating controls',
-        getDomRef: getDomRef,
-        nodeType: nodeType,
-        offset: [0, 3],
-        items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), [{
-          type: 'extensions-placeholder',
-          separator: 'end'
-        }], _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
-          type: 'separator'
-        }] : []), [{
-          id: 'editor.table.delete',
-          type: 'button',
-          appearance: 'danger',
-          icon: RemoveIcon,
-          onClick: deleteTableWithAnalytics(),
-          disabled: !!resizeState && !!resizeState.dragging,
-          onMouseEnter: hoverTable(true),
-          onMouseLeave: clearHoverSelection(),
-          title: intl.formatMessage(commonMessages.remove),
-          confirmDialog: confirmDialog
-        }])
-      };
-    }
+        return {
+          title: 'Table floating controls',
+          getDomRef: getDomRef,
+          nodeType: nodeType,
+          offset: [0, 3],
+          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), [{
+            type: 'extensions-placeholder',
+            separator: 'end'
+          }], _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
+            type: 'separator'
+          }] : []), [{
+            id: 'editor.table.delete',
+            type: 'button',
+            appearance: 'danger',
+            icon: RemoveIcon,
+            onClick: deleteTableWithAnalytics(editorAnalyticsAPI),
+            disabled: !!resizeState && !!resizeState.dragging,
+            onMouseEnter: hoverTable(true),
+            onMouseLeave: clearHoverSelection(),
+            title: intl.formatMessage(commonMessages.remove),
+            confirmDialog: confirmDialog
+          }])
+        };
+      }
 
-    return;
+      return;
+    };
   };
 };
 
@@ -273,7 +275,7 @@ var separator = function separator(hidden) {
   };
 };
 
-var getCellItems = function getCellItems(pluginConfig, state, _ref3) {
+var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
   var formatMessage = _ref3.formatMessage;
 
   if (pluginConfig.allowCellOptionsInFloatingToolbar) {
@@ -282,7 +284,7 @@ var getCellItems = function getCellItems(pluginConfig, state, _ref3) {
     if (initialSelectionRect) {
       var cellOptions = getToolbarCellOptionsConfig(state, initialSelectionRect, {
         formatMessage: formatMessage
-      });
+      }, getEditorContainerWidth, editorAnalyticsAPI);
       return [cellOptions, separator(cellOptions.hidden)];
     }
   }

package/dist/esm/plugins/table/transforms/column-width.js

@@ -126,47 +126,50 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
  * @returns Updated transaction with rescaled columns for a given table
  */
 
-export var rescaleColumns = function rescaleColumns(table, view) {
-  return function (tr) {
-    // If the table has been not been resized we skip updating the size
-    // of columns here.
-    if (!view || !hasTableBeenResized(table.node)) {
-      return tr;
-    }
+export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
+  return function (table, view) {
+    return function (tr) {
+      // If the table has been not been resized we skip updating the size
+      // of columns here.
+      if (!view || !hasTableBeenResized(table.node)) {
+        return tr;
+      }
 
-    var state = view.state;
-    var domAtPos = view.domAtPos.bind(view);
-    var maybeTable = domAtPos(table.start).node;
-    var tableRef = maybeTable.closest('table');
+      var state = view.state;
+      var domAtPos = view.domAtPos.bind(view);
+      var maybeTable = domAtPos(table.start).node;
+      var tableRef = maybeTable.closest('table');
 
-    if (!tableRef) {
-      return tr;
-    }
+      if (!tableRef) {
+        return tr;
+      }
 
-    var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
-
-    var maxSize = getTableMaxWidth({
-      table: table.node,
-      tableStart: table.start,
-      state: state,
-      layout: layout
-    });
-    var resizeState = getResizeState({
-      minWidth: tableCellMinWidth,
-      table: table.node,
-      start: table.start,
-      tableRef: tableRef,
-      domAtPos: domAtPos,
-      maxSize: maxSize
-    });
-    var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-    var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
-    // we resize the cells to avoid the overflow occuring
-
-    if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-      resizeState = scaleTableTo(resizeState, maxSize);
-    }
+      var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout); // The is the width the table can reach before overflowing
+
+      var maxSize = getTableMaxWidth({
+        table: table.node,
+        tableStart: table.start,
+        state: state,
+        layout: layout,
+        getEditorContainerWidth: getEditorContainerWidth
+      });
+      var resizeState = getResizeState({
+        minWidth: tableCellMinWidth,
+        table: table.node,
+        start: table.start,
+        tableRef: tableRef,
+        domAtPos: domAtPos,
+        maxSize: maxSize
+      });
+      var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
+      var tableDidntPreviouslyOverflow = previousTableWidth <= maxSize; // If the new table width will result in the table going into an overflow state
+      // we resize the cells to avoid the overflow occuring
+
+      if (tableDidntPreviouslyOverflow && resizeState.overflow) {
+        resizeState = scaleTableTo(resizeState, maxSize);
+      }
 
-    return updateColumnWidths(resizeState, table.node, table.start)(tr);
+      return updateColumnWidths(resizeState, table.node, table.start)(tr);
+    };
   };
 };

package/dist/esm/plugins/table/transforms/replace-table.js

@@ -1,9 +1,9 @@
 import { TextSelection } from 'prosemirror-state';
 import { Slice, Fragment } from 'prosemirror-model';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { addAnalytics, TABLE_ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics';
+import { TABLE_ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { getSelectedTableInfo } from '../utils';
-export var replaceSelectedTable = function replaceSelectedTable(state, content, inputMethod) {
+export var replaceSelectedTable = function replaceSelectedTable(state, content, inputMethod, editorAnalyticsAPI) {
   if (isTableSelected(state.selection)) {
     var table = findTable(state.selection);
 
@@ -16,7 +16,7 @@ export var replaceSelectedTable = function replaceSelectedTable(state, content,
           totalRowCount = _getSelectedTableInfo.totalRowCount,
           totalColumnCount = _getSelectedTableInfo.totalColumnCount;
 
-      addAnalytics(state, tr, {
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
         action: TABLE_ACTION.REPLACED,
         actionSubject: ACTION_SUBJECT.TABLE,
         attributes: {
@@ -25,7 +25,7 @@ export var replaceSelectedTable = function replaceSelectedTable(state, content,
           inputMethod: inputMethod
         },
         eventType: EVENT_TYPE.TRACK
-      });
+      })(tr);
       return tr;
     }
   }

package/dist/esm/plugins/table/ui/FloatingContextualButton/index.js

@@ -23,8 +23,8 @@ import { closestElement } from '../../../../utils/dom';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
-import { CONTENT_COMPONENT } from '../../../analytics/types';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../../analytics';
+import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { tableFloatingCellButtonStyles } from './styles';
 import { ErrorBoundary } from '../../../../ui/ErrorBoundary';
 export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {

package/dist/esm/plugins/table/ui/FloatingContextualMenu/ContextualMenu.js

@@ -25,7 +25,7 @@ import cellBackgroundColorPalette from '../../../../ui/ColorPalette/Palettes/cel
 import DropdownMenu from '../../../../ui/DropdownMenu';
 import { shortcutStyle, cellColourPreviewStyles } from '../../../../ui/styles';
 import { closestElement } from '../../../../utils/dom';
-import { INPUT_METHOD } from '../../../analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, distributeColumnsWidthsWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -216,7 +216,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       if (allowDistributeColumns) {
         var _newResizeState$chang;
 
-        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView));
+        var newResizeState = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), _this.props.getEditorContainerWidth);
         var wouldChange = (_newResizeState$chang = newResizeState === null || newResizeState === void 0 ? void 0 : newResizeState.changed) !== null && _newResizeState$chang !== void 0 ? _newResizeState$chang : false;
         items.push({
           content: formatMessage(messages.distributeColumns),
@@ -267,7 +267,9 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
       var item = _ref.item;
       var _this$props2 = _this.props,
           editorView = _this$props2.editorView,
-          selectionRect = _this$props2.selectionRect; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+          selectionRect = _this$props2.selectionRect,
+          editorAnalyticsAPI = _this$props2.editorAnalyticsAPI,
+          getEditorContainerWidth = _this$props2.getEditorContainerWidth; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
 
       var state = editorView.state,
           dispatch = editorView.dispatch;
@@ -277,38 +279,38 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
 
       switch (item.value.name) {
         case 'sort_column_desc':
-          sortColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
+          sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'sort_column_asc':
-          sortColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.ASC)(state, dispatch);
+          sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.ASC)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'merge':
-          mergeCellsWithAnalytics()(state, dispatch);
+          mergeCellsWithAnalytics(editorAnalyticsAPI)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'split':
-          splitCellWithAnalytics()(state, dispatch);
+          splitCellWithAnalytics(editorAnalyticsAPI)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'distribute_columns':
-          var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView));
+          var newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), _this.props.getEditorContainerWidth);
 
           if (newResizeStateWithAnalytics) {
-            distributeColumnsWidthsWithAnalytics(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
+            distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
 
             _this.toggleOpen();
           }
@@ -316,21 +318,21 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
 
         case 'clear':
-          emptyMultipleCellsWithAnalytics(INPUT_METHOD.CONTEXT_MENU, targetCellPosition)(state, dispatch);
+          emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, targetCellPosition)(state, dispatch);
 
           _this.toggleOpen();
 
           break;
 
         case 'insert_column':
-          insertColumnWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(getEditorContainerWidth, editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
 
           _this.toggleOpen();
 
           break;
 
         case 'insert_row':
-          insertRowWithAnalytics(INPUT_METHOD.CONTEXT_MENU, {
+          insertRowWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, {
             index: selectionRect.bottom,
             moveCursorToInsertedRow: true
           })(state, dispatch);
@@ -340,7 +342,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           break;
 
         case 'delete_column':
-          deleteColumnsWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
+          deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch);
 
           _this.toggleOpen();
 
@@ -350,7 +352,7 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
           var _getPluginState3 = getPluginState(state),
               isHeaderRowRequired = _getPluginState3.pluginConfig.isHeaderRowRequired;
 
-          deleteRowsWithAnalytics(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
+          deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect, !!isHeaderRowRequired)(state, dispatch);
 
           _this.toggleOpen();
 
@@ -437,14 +439,16 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setColor", function (color) {
-      var editorView = _this.props.editorView; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
+      var _this$props5 = _this.props,
+          editorView = _this$props5.editorView,
+          editorAnalyticsAPI = _this$props5.editorAnalyticsAPI; // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
 
       var _getPluginState4 = getPluginState(editorView.state),
           targetCellPosition = _getPluginState4.targetCellPosition;
 
       var state = editorView.state,
           dispatch = editorView.dispatch;
-      setColorWithAnalytics(color, targetCellPosition)(state, dispatch);
+      setColorWithAnalytics(editorAnalyticsAPI)(color, targetCellPosition)(state, dispatch);
 
       _this.toggleOpen();
     });
@@ -455,11 +459,11 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _createClass(ContextualMenu, [{
     key: "render",
     value: function render() {
-      var _this$props5 = this.props,
-          isOpen = _this$props5.isOpen,
-          mountPoint = _this$props5.mountPoint,
-          offset = _this$props5.offset,
-          boundariesElement = _this$props5.boundariesElement;
+      var _this$props6 = this.props,
+          isOpen = _this$props6.isOpen,
+          mountPoint = _this$props6.mountPoint,
+          offset = _this$props6.offset,
+          boundariesElement = _this$props6.boundariesElement;
       var items = this.createItems();
 
       if (!items) {

package/dist/esm/plugins/table/ui/FloatingContextualMenu/index.js

@@ -35,7 +35,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
       scrollableElement = _ref.scrollableElement,
       editorView = _ref.editorView,
       isOpen = _ref.isOpen,
-      pluginConfig = _ref.pluginConfig;
+      pluginConfig = _ref.pluginConfig,
+      editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+      getEditorContainerWidth = _ref.getEditorContainerWidth;
 
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   var _getPluginState = getPluginState(editorView.state),
@@ -84,7 +86,9 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     allowMergeCells: pluginConfig.allowMergeCells,
     allowBackgroundColor: pluginConfig.allowBackgroundColor,
     selectionRect: selectionRect,
-    boundariesElement: boundariesElement
+    boundariesElement: boundariesElement,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    getEditorContainerWidth: getEditorContainerWidth
   })));
 };
 

package/dist/esm/plugins/table/ui/FloatingDeleteButton/index.js

@@ -22,12 +22,13 @@ import { createPortal } from 'react-dom';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { closestElement } from '../../../../utils/dom';
-import { INPUT_METHOD } from '../../../analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
-import { getColumnDeleteButtonParams, getColumnsWidths, getRowDeleteButtonParams, getRowHeights } from '../../utils';
+import { getColumnDeleteButtonParams, getRowDeleteButtonParams, getRowHeights } from '../../utils';
+import { getColumnsWidths } from '../../utils/column-controls';
 import tableMessages from '../messages';
 import { stickyRowZIndex } from '../consts';
 import DeleteButton from './DeleteButton';
@@ -122,6 +123,7 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      var editorAnalyticsAPI = _this.props.editorAnalyticsAPI;
       var _this$props$editorVie3 = _this.props.editorView,
           state = _this$props$editorVie3.state,
           dispatch = _this$props$editorVie3.dispatch;
@@ -135,13 +137,13 @@ var FloatingDeleteButton = /*#__PURE__*/function (_Component) {
         switch (_this.state.selectionType) {
           case 'column':
             {
-              deleteColumnsWithAnalytics(INPUT_METHOD.BUTTON, rect)(state, dispatch);
+              deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect)(state, dispatch);
               return;
             }
 
           case 'row':
             {
-              deleteRowsWithAnalytics(INPUT_METHOD.BUTTON, rect, !!isHeaderRowRequired)(state, dispatch);
+              deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect, !!isHeaderRowRequired)(state, dispatch);
               return;
             }
         }