@atlaskit/editor-plugin-table 22.4.14 → 22.4.16

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

@@ -12,7 +12,6 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
@@ -24,9 +23,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
 };
-var EMPTY_CONTEXT = {};
 var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -46,11 +44,14 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
     selection = _useSharedPluginState.selection;
   var tableMenuContext = (0, _react.useMemo)(function () {
     if (!selection || !tableNode) {
-      return EMPTY_CONTEXT;
+      return {
+        editorView: editorView
+      };
     }
     var tableMap = _tableMap.TableMap.get(tableNode);
     var selectionRect = (0, _utils.getSelectionRect)(selection);
     var cellOps = {
+      editorView: editorView,
       canMergeCells: (0, _merge.canMergeCellSelection)(selection),
       canSplitCell: (0, _splitCell.canSplitCellSelection)(selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -66,13 +67,11 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
       isLastColumn: selectionRect.right === tableMap.width,
       selectedColumnCount: selectionRect.right - selectionRect.left
     });
-  }, [selection, tableNode]);
+  }, [editorView, selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_toolbar.EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
-  }, /*#__PURE__*/_react.default.createElement(_TableMenuContext.TableMenuProvider, {
+  return /*#__PURE__*/_react.default.createElement(_TableMenuContext.TableMenuProvider, {
     value: tableMenuContext
   }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: tableMenuContainerStyles.container,
@@ -80,6 +79,6 @@ var TableMenu = exports.TableMenu = /*#__PURE__*/(0, _react.memo)(function (_ref
   }, /*#__PURE__*/_react.default.createElement(_editorUiControlModel.SurfaceRenderer, {
     surface: surface,
     components: components
-  }))));
+  })));
 });
 TableMenu.displayName = 'TableMenu';

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

@@ -31,7 +31,9 @@ var getSharedItems = exports.getSharedItems = function getSharedItems(_ref) {
       rank: _keys.CELL_ACTION_SECTION_RANK[_keys4.BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, null);
+      return /*#__PURE__*/_react.default.createElement(_BackgroundColorItem.BackgroundColorItem, {
+        api: api
+      });
     }
   }, {
     type: _keys4.CLEAR_CELLS_ITEM.type,

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)(params)), (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)(params)), (0, _toConsumableArray2.default)((0, _getSharedItems.getSharedItems)(params)));
 };

package/dist/cjs/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -10,11 +10,16 @@ require("./BackgroundColorItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _commands = require("../../../../pm-plugins/commands");
+var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
+var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
+var _TableMenuContext = require("../TableMenuContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var colorPaletteColumns = 7;
 var colorPaletteStyles = {
@@ -22,16 +27,37 @@ var colorPaletteStyles = {
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem() {
+var BackgroundColorItem = exports.BackgroundColorItem = function BackgroundColorItem(_ref) {
+  var _useTableMenuContext, _api$analytics2;
+  var api = _ref.api;
+  var _ref2 = (_useTableMenuContext = (0, _TableMenuContext.useTableMenuContext)()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var onClick = (0, _react.useCallback)(function () {}, []);
+  var selectedColor = (0, _react.useMemo)(function () {
+    var _node$attrs;
+    if (!editorView) {
+      return '#ffffff';
+    }
+    var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    var node = targetCellPosition ? editorView.state.doc.nodeAt(targetCellPosition) : null;
+    return (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+  }, [editorView]);
+  var onClick = (0, _react.useCallback)(function (color) {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    (0, _commandsWithAnalytics.setColorWithAnalytics)(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, color, editorView)(editorView.state, editorView.dispatch);
+    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
+  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = (0, _react.useMemo)(function () {
     return {
-      backgroundColor: '#ffffff'
+      backgroundColor: selectedColor
     };
-  }, []);
+  }, [selectedColor]);
   var paletteOptions = (0, _react.useMemo)(function () {
     return {
       palette: _uiColor.cellBackgroundColorPalette,

package/dist/cjs/ui/TableMenu/shared/items/ClearCellsItem.js

@@ -10,17 +10,17 @@ var _reactIntl = require("react-intl");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
-var _toolbar = require("@atlaskit/editor-common/toolbar");
 var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _commands = require("../../../../pm-plugins/commands");
 var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
 var _pluginFactory = require("../../../../pm-plugins/plugin-factory");
 var _TableMenuContext = require("../TableMenuContext");
 var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
   var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
@@ -32,6 +32,7 @@ var ClearCellsItem = exports.ClearCellsItem = function ClearCellsItem(_ref) {
     var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
       targetCellPosition = _getPluginState.targetCellPosition;
     (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(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, targetCellPosition)(editorView.state, editorView.dispatch);
+    (0, _commands.closeActiveTableMenu)()(editorView.state, editorView.dispatch);
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/cjs/ui/toolbar.js

@@ -50,7 +50,8 @@ var _alignment = require("../pm-plugins/utils/alignment");
 var _nodes = require("../pm-plugins/utils/nodes");
 var _selection = require("../pm-plugins/utils/selection");
 var _table = require("../pm-plugins/utils/table");
-var _tableMode = require("../pm-plugins/utils/tableMode");
+var _applyMeasuredWidthToSelectedTable = require("../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table");
+var _isContentModeSupported = require("../pm-plugins/utils/tableMode/is-content-mode-supported");
 var _types = require("../types");
 var _FloatingAlignmentButtons = require("./FloatingAlignmentButtons/FloatingAlignmentButtons");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -459,7 +460,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var isLimitedModeEnabled = (_api$limitedMode$shar = api === null || api === void 0 || (_api$limitedMode = api.limitedMode) === null || _api$limitedMode === void 0 || (_api$limitedMode = _api$limitedMode.sharedState.currentState()) === null || _api$limitedMode === void 0 ? void 0 : _api$limitedMode.enabled) !== null && _api$limitedMode$shar !== void 0 ? _api$limitedMode$shar : false;
         var columnSettingsItems = getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor, isLimitedModeEnabled);
         var colorPicker = !areAnyNewToolbarFlagsEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
-        var fitToContentButton = (0, _tableMode.isContentModeSupported)({
+        var fitToContentButton = (0, _isContentModeSupported.isContentModeSupported)({
           allowColumnResizing: !!pluginState.pluginConfig.allowColumnResizing,
           allowTableResizing: !!pluginState.pluginConfig.allowTableResizing,
           isFullPageEditor: !pluginState.isChromelessEditor && !pluginState.isCommentEditor
@@ -475,7 +476,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           onClick: function onClick(_state, _dispatch, view) {
             if (view) {
-              (0, _tableMode.applyMeasuredWidthToSelectedTable)(view, api !== null && api !== void 0 ? api : undefined);
+              (0, _applyMeasuredWidthToSelectedTable.applyMeasuredWidthToSelectedTable)(view, api !== null && api !== void 0 ? api : undefined);
             }
             return true;
           }

package/dist/es2019/nodeviews/TableComponent.js

@@ -28,7 +28,7 @@ import { getResizeState, updateColgroup } from '../pm-plugins/table-resizing/uti
 import { scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
 import { containsHeaderRow, isTableNested, isTableNestedInMoreThanOneNode, isTableNestedUnderBodiedSyncBlock, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../pm-plugins/utils/nodes';
 import { getAssistiveMessage } from '../pm-plugins/utils/table';
-import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableCssClassName as ClassName } from '../types';
 import { handleMouseOut, handleMouseOver, isTableInFocus, withCellTracking } from '../ui/event-handlers';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';

package/dist/es2019/nodeviews/table.js

@@ -13,7 +13,7 @@ import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-con
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested, tablesHaveDifferentColumnWidths } from '../pm-plugins/utils/nodes';
-import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 const tableAttributes = node => {

package/dist/es2019/nodeviews/toDOM.js

@@ -7,7 +7,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
-import { isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { getAlignmentStyle } from './table-container-styles';
 export const tableNodeSpecWithFixedToDOM = config => {
   const tableNode = config.isNestingSupported ? tableWithNestedTable : table;

package/dist/es2019/pm-plugins/commands/active-table-menu.js

@@ -0,0 +1,39 @@
+import { createCommand, getPluginState } from '../plugin-factory';
+export const closeActiveTableMenu = () => createCommand(state => {
+  const {
+    activeTableMenu
+  } = getPluginState(state);
+  if (!activeTableMenu || activeTableMenu.type === 'none') {
+    return false;
+  }
+  return {
+    type: 'SET_ACTIVE_TABLE_MENU',
+    data: {
+      activeTableMenu: {
+        type: 'none'
+      }
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));
+const isSameActiveTableMenu = (current, next) => {
+  if (!current || current.type !== next.type) {
+    return false;
+  }
+  if (current.type === 'row' || current.type === 'column') {
+    return next.type === current.type && current.index === next.index;
+  }
+  return true;
+};
+export const toggleActiveTableMenu = activeTableMenu => createCommand(state => {
+  const {
+    activeTableMenu: currentActiveTableMenu
+  } = getPluginState(state);
+  return {
+    type: 'SET_ACTIVE_TABLE_MENU',
+    data: {
+      activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
+        type: 'none'
+      } : activeTableMenu
+    }
+  };
+}, tr => tr.setMeta('addToHistory', false));

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

@@ -10,6 +10,7 @@ import { deleteRows } from '../transforms/delete-rows';
 import { mergeCells } from '../transforms/merge';
 import { withEditorAnalyticsAPI, getSelectedCellInfo, getSelectedTableInfo } from '../utils/analytics';
 import { checkIfNumberColumnEnabled } from '../utils/nodes';
+import { toggleActiveTableMenu } from './active-table-menu';
 import { clearMultipleCells } from './clear';
 import { wrapTableInExpand } from './collapse';
 import { changeColumnWidthByStep } from './column-resize';
@@ -20,8 +21,36 @@ import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleC
 import { sortByColumn } from './sort';
 import { splitCell } from './split-cell';
 import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './toggle';
-
-// #region Analytics wrappers
+export const toggleActiveTableMenuWithAnalytics = editorAnalyticsAPI => (direction, index, trigger = 'mouse') => {
+  return withEditorAnalyticsAPI(state => {
+    const {
+      activeTableMenu: previousActiveTableMenu
+    } = getPluginState(state);
+    const isSameActiveMenu = (previousActiveTableMenu === null || previousActiveTableMenu === void 0 ? void 0 : previousActiveTableMenu.type) === direction && previousActiveTableMenu.index === index;
+    if (isSameActiveMenu) {
+      return undefined;
+    }
+    return {
+      action: TABLE_ACTION.DRAG_MENU_OPENED,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        inputMethod: trigger === 'keyboard' ? INPUT_METHOD.KEYBOARD : INPUT_METHOD.MOUSE,
+        direction
+      }
+    };
+  })(editorAnalyticsAPI)((state, dispatch) => {
+    if (dispatch) {
+      toggleActiveTableMenu({
+        type: direction,
+        index,
+        openedBy: trigger
+      })(state, dispatch);
+    }
+    return true;
+  });
+};
 export const emptyMultipleCellsWithAnalytics = editorAnalyticsAPI => (inputMethod, targetCellPosition) => withEditorAnalyticsAPI(({
   selection
 }) => {

package/dist/es2019/pm-plugins/commands/index.js

@@ -4,6 +4,7 @@
 export { hoverColumns, hoverRows, hoverTable, hoverCell, hoverMergedCells, clearHoverSelection, showResizeHandleLine, hideResizeHandleLine, setTableHovered } from './hover';
 export { insertColumn, insertRow, createTable } from './insert';
 export { getNextLayout, toggleContextualMenu, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './toggle';
+export { closeActiveTableMenu, toggleActiveTableMenu } from './active-table-menu';
 export { clearMultipleCells } from './clear';
 export { autoSizeTable, convertFirstRowToHeader, deleteTable, hideInsertColumnOrRowButton, moveCursorBackward, selectColumn, selectColumns, selectRow, selectRows, setCellAttr, setEditorFocus, setMultipleCellAttrs, setTableRef, showInsertColumnButton, showInsertRowButton, transformSliceToAddTableHeaders, triggerUnlessTableHeader, addBoldInEmptyHeaderCells, addResizeHandleDecorations, updateWidthToWidest, setFocusToCellMenu } from './misc';
 export { sortByColumn } from './sort';

package/dist/es2019/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -141,6 +141,8 @@ export const cloneSourceWithAnalytics = editorAnalyticsAPI => (inputMethod, sour
     return true;
   });
 };
+
+// remove when 'platform_editor_table_menu_updates' is cleaned up
 export const toggleDragMenuWithAnalytics = editorAnalyticsAPI => (isDragMenuOpen, direction, index, trigger = 'mouse') => {
   return withEditorAnalyticsAPI(state => {
     const {

package/dist/es2019/pm-plugins/drag-and-drop/plugin.js

@@ -8,6 +8,7 @@ import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-sc
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { closeActiveTableMenu } from '../commands/active-table-menu';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { pluginKey as tablePluginKey } from '../plugin-key';
 import { insertColgroupFromNode } from '../table-resizing/utils/colgroup';
@@ -94,6 +95,9 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
         (_insm$session3 = insm.session) === null || _insm$session3 === void 0 ? void 0 : _insm$session3.startFeature('tableDragAndDrop');
       }
       toggleDragMenu(false)(editorView.state, editorView.dispatch);
+      if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
+        closeActiveTableMenu()(editorView.state, editorView.dispatch);
+      }
       api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag(event) {

package/dist/es2019/pm-plugins/handlers.js

@@ -6,6 +6,7 @@ import { isTextInput } from '@atlaskit/editor-common/utils';
 
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { defaultTableSelection } from './default-table-selection';
 import { pluginKey as tableResizingPluginKey } from './table-resizing/plugin-key';
 import { isTableCollapsible } from './utils/collapse';
@@ -40,9 +41,15 @@ const updateTargetCellPosition = ({
   if (pluginState.targetCellPosition === targetCellPosition) {
     return pluginState;
   }
+
+  // The updated table menu is anchored to the current target cell. When selection moves
+  // to another cell, close the active menu so render state cannot point at a stale anchor.
   return {
     ...pluginState,
-    targetCellPosition
+    targetCellPosition,
+    activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
+      type: 'none'
+    } : pluginState.activeTableMenu
   };
 };
 const updateTableNodePluginState = ({

package/dist/es2019/pm-plugins/main.js

@@ -25,7 +25,8 @@ import { fixTables } from './transforms/fix-tables';
 import { replaceSelectedTable } from './transforms/replace-table';
 import { findControlsHoverDecoration } from './utils/decoration';
 import { transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, transformSliceToRemoveNestedTables, isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from './utils/paste';
-import { applyMeasuredWidthToAllTables, isContentModeSupported } from './utils/tableMode';
+import { applyMeasuredWidthToAllTables } from './utils/tableMode/apply-measured-width-to-all-tables';
+import { isContentModeSupported } from './utils/tableMode/is-content-mode-supported';
 export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
   var _accessibilityUtils;
   const state = createPluginState(dispatch, {

package/dist/es2019/pm-plugins/reducer.js

@@ -34,6 +34,11 @@ export default ((pluginState, action) => {
         ...pluginState,
         isContextualMenuOpen: !pluginState.isContextualMenuOpen
       };
+    case 'SET_ACTIVE_TABLE_MENU':
+      return {
+        ...pluginState,
+        ...action.data
+      };
     case 'SHOW_INSERT_ROW_BUTTON':
       if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
         return pluginState;

package/dist/es2019/pm-plugins/table-width.js

@@ -13,7 +13,7 @@ import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWi
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from './table-resizing/utils/consts';
 import { ALIGN_START } from './utils/alignment';
-import { isContentModeSupported } from './utils/tableMode';
+import { isContentModeSupported } from './utils/tableMode/is-content-mode-supported';
 export const pluginKey = new PluginKey('tableWidthPlugin');
 const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   return new SafePlugin({

package/dist/es2019/pm-plugins/transforms/content-mode.js

@@ -2,10 +2,11 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { updateCellsMarkup } from './table-transform-utils';
-const tableWidth = contentWidth => {
+export const clampToEditorMaxWidth = contentWidth => {
   const maxEditorWidth = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? akEditorMaxLayoutWidth : akEditorFullWidthLayoutWidth;
   return Math.min(maxEditorWidth, contentWidth);
 };
+const tableWidth = clampToEditorMaxWidth;
 export const getTableMeasurement = tableRef => {
   const colWidths = getRenderedColgroupColumnWidths(tableRef);
   const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);

package/dist/es2019/pm-plugins/utils/tableMode/apply-measured-width-to-all-tables.js

@@ -0,0 +1,70 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { hasTableBeenResized } from '@atlaskit/editor-common/table';
+import { applyTableMeasurement, getTableMeasurement } from '../../transforms/content-mode';
+
+/**
+ * Iterates all top-level tables in the document, and for those in content mode,
+ * measures rendered column widths and sets colwidth + table width attributes
+ * in a single batched transaction.
+ */
+export const applyMeasuredWidthToAllTables = (view, pluginInjectionApi) => {
+  const {
+    state: {
+      doc,
+      schema
+    }
+  } = view;
+  let tr = view.state.tr;
+  const {
+    table
+  } = schema.nodes;
+  let modified = false;
+  const measuredTables = [];
+
+  // modify only top-level tables
+  doc.forEach((node, offset) => {
+    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
+      return;
+    }
+    const domNode = view.domAtPos(offset + 1).node;
+    const tableWrapper = domNode instanceof HTMLElement ? domNode.closest(`.${TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP}`) : null;
+    const tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
+    if (!tableRef) {
+      return;
+    }
+    measuredTables.push({
+      node,
+      offset,
+      measurement: getTableMeasurement(tableRef)
+    });
+  });
+  measuredTables.forEach(({
+    node,
+    offset,
+    measurement
+  }) => {
+    tr = applyTableMeasurement(tr, node, measurement, offset);
+    modified = true;
+  });
+  if (modified) {
+    var _pluginInjectionApi$a, _pluginInjectionApi$a2, _pluginInjectionApi$w, _pluginInjectionApi$w2, _pluginInjectionApi$w3;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : (_pluginInjectionApi$a2 = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.attachAnalyticsEvent({
+      action: TABLE_ACTION.FIT_TO_CONTENT_AUTO_CONVERTED,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      actionSubjectId: null,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        editorContainerWidth: (_pluginInjectionApi$w = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : (_pluginInjectionApi$w3 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w3 === void 0 ? void 0 : _pluginInjectionApi$w3.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
+        totalTablesResized: measuredTables.length,
+        measurements: measuredTables.map(({
+          measurement
+        }) => ({
+          tableWidth: measurement.tableWidth,
+          totalColumnCount: measurement.colWidths.length
+        }))
+      }
+    })(tr);
+    view.dispatch(tr.setMeta('addToHistory', false));
+  }
+};

package/dist/es2019/pm-plugins/utils/tableMode/apply-measured-width-to-selected-table.js

@@ -0,0 +1,38 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { applyTableMeasurement } from '../../transforms/content-mode';
+import { measureTableWithAutoLayout } from './measure-table-with-auto-layout';
+
+/**
+ * Used to measure a selected table width with it's content being laid out natively by the browser
+ */
+export const applyMeasuredWidthToSelectedTable = (view, api) => {
+  var _api$width, _api$width$sharedStat, _api$analytics, _api$analytics$action, _api$width$sharedStat2, _api$width2, _api$width2$sharedSta;
+  const tableObject = findTable(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  const {
+    node,
+    pos
+  } = tableObject;
+  const tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+  const editorContainerWidth = api === null || api === void 0 ? void 0 : (_api$width = api.width) === null || _api$width === void 0 ? void 0 : (_api$width$sharedStat = _api$width.sharedState.currentState()) === null || _api$width$sharedStat === void 0 ? void 0 : _api$width$sharedStat.width;
+  const measurement = measureTableWithAutoLayout(tableState.tableRef, editorContainerWidth);
+  const tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
+  api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
+    action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      editorContainerWidth: (_api$width$sharedStat2 = api === null || api === void 0 ? void 0 : (_api$width2 = api.width) === null || _api$width2 === void 0 ? void 0 : (_api$width2$sharedSta = _api$width2.sharedState.currentState()) === null || _api$width2$sharedSta === void 0 ? void 0 : _api$width2$sharedSta.width) !== null && _api$width$sharedStat2 !== void 0 ? _api$width$sharedStat2 : 0,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

package/dist/es2019/pm-plugins/utils/tableMode/is-content-mode-supported.js

@@ -0,0 +1,7 @@
+export const isContentModeSupported = ({
+  allowColumnResizing,
+  allowTableResizing,
+  isFullPageEditor
+}) => {
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};