@atlaskit/editor-plugin-table 22.4.14 → 22.4.16

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

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

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

@@ -3,26 +3,55 @@ import "./BackgroundColorItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../TableMenuContext';
 const colorPaletteColumns = 7;
 const colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-export const BackgroundColorItem = () => {
+export const BackgroundColorItem = ({
+  api
+}) => {
+  var _useTableMenuContext, _api$analytics2;
+  const {
+    editorView
+  } = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {};
   const {
     formatMessage
   } = useIntl();
-  const onClick = useCallback(() => {}, []);
+  const selectedColor = useMemo(() => {
+    var _node$attrs;
+    if (!editorView) {
+      return '#ffffff';
+    }
+    const {
+      targetCellPosition
+    } = getPluginState(editorView.state);
+    const node = targetCellPosition ? editorView.state.doc.nodeAt(targetCellPosition) : null;
+    return hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+  }, [editorView]);
+  const onClick = useCallback(color => {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    setColorWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  }, [api === null || api === void 0 ? 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
   const colorPreviewStyle = useMemo(() => ({
-    backgroundColor: '#ffffff'
-  }), []);
+    backgroundColor: selectedColor
+  }), [selectedColor]);
   const paletteOptions = useMemo(() => {
     return {
       palette: cellBackgroundColorPalette,

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

@@ -3,8 +3,8 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { useTableMenuContext } from '../TableMenuContext';
@@ -12,10 +12,10 @@ export const ClearCellsItem = ({
   api
 }) => {
   var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
+  const tableMenuContext = useTableMenuContext();
   const {
     editorView
-  } = useEditorToolbar();
-  const tableMenuContext = useTableMenuContext();
+  } = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {};
   const {
     formatMessage
   } = useIntl();
@@ -29,6 +29,7 @@ export const ClearCellsItem = ({
       targetCellPosition
     } = getPluginState(editorView.state);
     emptyMultipleCellsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,

package/dist/es2019/ui/toolbar.js

@@ -44,7 +44,8 @@ import { normaliseAlignment } from '../pm-plugins/utils/alignment';
 import { isTableNested } from '../pm-plugins/utils/nodes';
 import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../pm-plugins/utils/selection';
 import { getMergedCellsPositions } from '../pm-plugins/utils/table';
-import { applyMeasuredWidthToSelectedTable, isContentModeSupported } from '../pm-plugins/utils/tableMode';
+import { applyMeasuredWidthToSelectedTable } from '../pm-plugins/utils/tableMode/apply-measured-width-to-selected-table';
+import { isContentModeSupported } from '../pm-plugins/utils/tableMode/is-content-mode-supported';
 import { TableCssClassName } from '../types';
 import { FloatingAlignmentButtons } from './FloatingAlignmentButtons/FloatingAlignmentButtons';
 export const getToolbarMenuConfig = (config, state, {

package/dist/esm/nodeviews/TableComponent.js

@@ -41,7 +41,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/esm/nodeviews/table.js

@@ -23,7 +23,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';
 var tableAttributes = function tableAttributes(node) {

package/dist/esm/nodeviews/toDOM.js

@@ -12,7 +12,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 var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;

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

@@ -0,0 +1,45 @@
+import { createCommand, getPluginState } from '../plugin-factory';
+export var closeActiveTableMenu = function closeActiveTableMenu() {
+  return createCommand(function (state) {
+    var _getPluginState = getPluginState(state),
+      activeTableMenu = _getPluginState.activeTableMenu;
+    if (!activeTableMenu || activeTableMenu.type === 'none') {
+      return false;
+    }
+    return {
+      type: 'SET_ACTIVE_TABLE_MENU',
+      data: {
+        activeTableMenu: {
+          type: 'none'
+        }
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+var isSameActiveTableMenu = function 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 var toggleActiveTableMenu = function toggleActiveTableMenu(activeTableMenu) {
+  return createCommand(function (state) {
+    var _getPluginState2 = getPluginState(state),
+      currentActiveTableMenu = _getPluginState2.activeTableMenu;
+    return {
+      type: 'SET_ACTIVE_TABLE_MENU',
+      data: {
+        activeTableMenu: isSameActiveTableMenu(currentActiveTableMenu, activeTableMenu) ? {
+          type: 'none'
+        } : activeTableMenu
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};

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

@@ -13,6 +13,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';
@@ -23,8 +24,38 @@ import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleC
 import { sortByColumn } from './sort';
 import { splitCell } from './split-cell';
 import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './toggle';
-
-// #region Analytics wrappers
+export var toggleActiveTableMenuWithAnalytics = function toggleActiveTableMenuWithAnalytics(editorAnalyticsAPI) {
+  return function (direction, index) {
+    var trigger = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'mouse';
+    return withEditorAnalyticsAPI(function (state) {
+      var _getPluginState = getPluginState(state),
+        previousActiveTableMenu = _getPluginState.activeTableMenu;
+      var 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: direction
+        }
+      };
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        toggleActiveTableMenu({
+          type: direction,
+          index: index,
+          openedBy: trigger
+        })(state, dispatch);
+      }
+      return true;
+    });
+  };
+};
 export var emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnalytics(editorAnalyticsAPI) {
   return function (inputMethod, targetCellPosition) {
     return withEditorAnalyticsAPI(function (_ref) {
@@ -189,8 +220,8 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
         table = _getSelectedTableInfo2.table,
         totalRowCount = _getSelectedTableInfo2.totalRowCount,
         totalColumnCount = _getSelectedTableInfo2.totalColumnCount;
-      var _getPluginState = getPluginState(state),
-        colIndex = _getPluginState.hoveredCell.colIndex;
+      var _getPluginState2 = getPluginState(state),
+        colIndex = _getPluginState2.hoveredCell.colIndex;
       return {
         action: TABLE_ACTION.COLUMN_RESIZED,
         actionSubject: ACTION_SUBJECT.TABLE,
@@ -310,8 +341,8 @@ export var deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = function delete
     }
     var selectionType = getTableSelectionType(selection);
     if (selectionType === 'row') {
-      var _getPluginState2 = getPluginState(state),
-        pluginConfig = _getPluginState2.pluginConfig;
+      var _getPluginState3 = getPluginState(state),
+        pluginConfig = _getPluginState3.pluginConfig;
       var isHeaderRowRequired = pluginConfig.isHeaderRowRequired || false;
       return deleteRowsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT, rect, isHeaderRowRequired)(state, dispatch);
     } else if (selectionType === 'column') {
@@ -355,8 +386,8 @@ export var toggleHeaderRowWithAnalytics = function toggleHeaderRowWithAnalytics(
     var _getSelectedTableInfo7 = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo7.totalRowCount,
       totalColumnCount = _getSelectedTableInfo7.totalColumnCount;
-    var _getPluginState3 = getPluginState(state),
-      isHeaderRowEnabled = _getPluginState3.isHeaderRowEnabled;
+    var _getPluginState4 = getPluginState(state),
+      isHeaderRowEnabled = _getPluginState4.isHeaderRowEnabled;
     return {
       action: TABLE_ACTION.TOGGLED_HEADER_ROW,
       actionSubject: ACTION_SUBJECT.TABLE,
@@ -375,8 +406,8 @@ export var toggleHeaderColumnWithAnalytics = function toggleHeaderColumnWithAnal
     var _getSelectedTableInfo8 = getSelectedTableInfo(state.selection),
       totalRowCount = _getSelectedTableInfo8.totalRowCount,
       totalColumnCount = _getSelectedTableInfo8.totalColumnCount;
-    var _getPluginState4 = getPluginState(state),
-      isHeaderColumnEnabled = _getPluginState4.isHeaderColumnEnabled;
+    var _getPluginState5 = getPluginState(state),
+      isHeaderColumnEnabled = _getPluginState5.isHeaderColumnEnabled;
     return {
       action: TABLE_ACTION.TOGGLED_HEADER_COLUMN,
       actionSubject: ACTION_SUBJECT.TABLE,

package/dist/esm/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/esm/pm-plugins/drag-and-drop/commands-with-analytics.js

@@ -146,6 +146,8 @@ export var cloneSourceWithAnalytics = function cloneSourceWithAnalytics(editorAn
     });
   };
 };
+
+// remove when 'platform_editor_table_menu_updates' is cleaned up
 export var toggleDragMenuWithAnalytics = function toggleDragMenuWithAnalytics(editorAnalyticsAPI) {
   return function (isDragMenuOpen, direction, index) {
     var trigger = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'mouse';

package/dist/esm/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';
@@ -87,6 +88,9 @@ var destroyFn = function destroyFn(editorView, editorAnalyticsAPI, isTableScalin
         (_insm$session3 = insm.session) === null || _insm$session3 === 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 || api.core.actions.execute(api === null || api === void 0 || (_api$userIntent = api.userIntent) === null || _api$userIntent === void 0 ? void 0 : _api$userIntent.commands.setCurrentUserIntent('dragging'));
     },
     onDrag: function onDrag(event) {

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

@@ -9,6 +9,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';
@@ -43,8 +44,14 @@ var updateTargetCellPosition = function updateTargetCellPosition(_ref) {
     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 _objectSpread(_objectSpread({}, pluginState), {}, {
-      targetCellPosition: targetCellPosition
+      targetCellPosition: targetCellPosition,
+      activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
+        type: 'none'
+      } : pluginState.activeTableMenu
     });
   };
 };

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

@@ -28,7 +28,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 var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
   var _accessibilityUtils;
   var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({

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

@@ -26,6 +26,8 @@ export default (function (pluginState, action) {
       return _objectSpread(_objectSpread({}, pluginState), {}, {
         isContextualMenuOpen: !pluginState.isContextualMenuOpen
       });
+    case 'SET_ACTIVE_TABLE_MENU':
+      return _objectSpread(_objectSpread({}, pluginState), action.data);
     case 'SHOW_INSERT_ROW_BUTTON':
       if (action.data.insertRowButtonIndex === pluginState.insertRowButtonIndex) {
         return pluginState;

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

@@ -18,7 +18,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 var pluginKey = new PluginKey('tableWidthPlugin');
 var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   return new SafePlugin({

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

@@ -5,10 +5,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';
-var tableWidth = function tableWidth(contentWidth) {
+export var clampToEditorMaxWidth = function clampToEditorMaxWidth(contentWidth) {
   var maxEditorWidth = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? akEditorMaxLayoutWidth : akEditorFullWidthLayoutWidth;
   return Math.min(maxEditorWidth, contentWidth);
 };
+var tableWidth = clampToEditorMaxWidth;
 export var getTableMeasurement = function getTableMeasurement(tableRef) {
   var colWidths = getRenderedColgroupColumnWidths(tableRef);
   var totalContentWidth = colWidths.reduce(function (acc, current) {

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

@@ -0,0 +1,65 @@
+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 var applyMeasuredWidthToAllTables = function applyMeasuredWidthToAllTables(view, pluginInjectionApi) {
+  var _view$state = view.state,
+    doc = _view$state.doc,
+    schema = _view$state.schema;
+  var tr = view.state.tr;
+  var table = schema.nodes.table;
+  var modified = false;
+  var measuredTables = [];
+
+  // modify only top-level tables
+  doc.forEach(function (node, offset) {
+    if (node.type !== table || hasTableBeenResized(node) && node.attrs.layout !== 'align-start') {
+      return;
+    }
+    var domNode = view.domAtPos(offset + 1).node;
+    var tableWrapper = domNode instanceof HTMLElement ? domNode.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP)) : null;
+    var tableRef = tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.querySelector('table');
+    if (!tableRef) {
+      return;
+    }
+    measuredTables.push({
+      node: node,
+      offset: offset,
+      measurement: getTableMeasurement(tableRef)
+    });
+  });
+  measuredTables.forEach(function (_ref) {
+    var node = _ref.node,
+      offset = _ref.offset,
+      measurement = _ref.measurement;
+    tr = applyTableMeasurement(tr, node, measurement, offset);
+    modified = true;
+  });
+  if (modified) {
+    var _pluginInjectionApi$a, _pluginInjectionApi$w, _pluginInjectionApi$w2;
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 || (_pluginInjectionApi$a = _pluginInjectionApi$a.actions) === null || _pluginInjectionApi$a === void 0 || _pluginInjectionApi$a.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 || (_pluginInjectionApi$w2 = pluginInjectionApi.width) === null || _pluginInjectionApi$w2 === void 0 || (_pluginInjectionApi$w2 = _pluginInjectionApi$w2.sharedState.currentState()) === null || _pluginInjectionApi$w2 === void 0 ? void 0 : _pluginInjectionApi$w2.width) !== null && _pluginInjectionApi$w !== void 0 ? _pluginInjectionApi$w : 0,
+        totalTablesResized: measuredTables.length,
+        measurements: measuredTables.map(function (_ref2) {
+          var measurement = _ref2.measurement;
+          return {
+            tableWidth: measurement.tableWidth,
+            totalColumnCount: measurement.colWidths.length
+          };
+        })
+      }
+    })(tr);
+    view.dispatch(tr.setMeta('addToHistory', false));
+  }
+};

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

@@ -0,0 +1,36 @@
+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 var applyMeasuredWidthToSelectedTable = function applyMeasuredWidthToSelectedTable(view, api) {
+  var _api$width, _api$analytics, _api$width$sharedStat, _api$width2;
+  var tableObject = findTable(view.state.selection);
+  if (!tableObject) {
+    return;
+  }
+  var node = tableObject.node,
+    pos = tableObject.pos;
+  var tableState = api === null || api === void 0 ? void 0 : api.table.sharedState.currentState();
+  if (!(tableState !== null && tableState !== void 0 && tableState.tableRef)) {
+    return;
+  }
+  var editorContainerWidth = api === null || api === void 0 || (_api$width = api.width) === null || _api$width === void 0 || (_api$width = _api$width.sharedState.currentState()) === null || _api$width === void 0 ? void 0 : _api$width.width;
+  var measurement = measureTableWithAutoLayout(tableState.tableRef, editorContainerWidth);
+  var tr = applyTableMeasurement(view.state.tr, node, measurement, pos);
+  api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent({
+    action: TABLE_ACTION.FIT_TO_CONTENT_ON_DEMAND,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      editorContainerWidth: (_api$width$sharedStat = api === null || api === void 0 || (_api$width2 = api.width) === null || _api$width2 === void 0 || (_api$width2 = _api$width2.sharedState.currentState()) === null || _api$width2 === void 0 ? void 0 : _api$width2.width) !== null && _api$width$sharedStat !== void 0 ? _api$width$sharedStat : 0,
+      tableWidth: measurement.tableWidth,
+      totalColumnCount: measurement.colWidths.length
+    }
+  })(tr);
+  view.dispatch(tr);
+};

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

@@ -0,0 +1,6 @@
+export var isContentModeSupported = function isContentModeSupported(_ref) {
+  var allowColumnResizing = _ref.allowColumnResizing,
+    allowTableResizing = _ref.allowTableResizing,
+    isFullPageEditor = _ref.isFullPageEditor;
+  return allowColumnResizing && allowTableResizing && isFullPageEditor;
+};

package/dist/esm/pm-plugins/utils/tableMode/measure-table-with-auto-layout.js

@@ -0,0 +1,107 @@
+import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getTableMeasurement } from '../../transforms/content-mode';
+import { restoreResizerContainer, runSmartAdjust } from './smart-adjust/run-smart-adjust';
+export var measureTableWithAutoLayout = function measureTableWithAutoLayout(tableRef, editorContainerWidth) {
+  var cols = Array.from(tableRef.querySelectorAll(':scope > colgroup > col'));
+  var contentWrap = tableRef.closest(".".concat(TableSharedCssClassName.TABLE_VIEW_CONTENT_WRAP));
+  var resizerContainer = contentWrap === null || contentWrap === void 0 ? void 0 : contentWrap.querySelector(".".concat(TableSharedCssClassName.TABLE_RESIZER_CONTAINER));
+  var resizerItem = resizerContainer === null || resizerContainer === void 0 ? void 0 : resizerContainer.querySelector('.resizer-item.display-handle');
+  var prevTableWidth = tableRef.style.width;
+  var prevTableLayout = tableRef.style.tableLayout;
+  var prevColWidths = cols.map(function (col) {
+    return col.style.width;
+  });
+  var prevResizerItemWidth = resizerItem === null || resizerItem === void 0 ? void 0 : resizerItem.style.width;
+  tableRef.style.width = '';
+  tableRef.style.tableLayout = 'auto';
+  cols.forEach(function (col) {
+    return col.style.width = '';
+  });
+  if (fg('platform_editor_table_fit_to_content_smart_adjust')) {
+    var hadTableSticky = tableRef.classList.contains(TableSharedCssClassName.TABLE_STICKY);
+    var prevTableMarginTop = tableRef.style.marginTop;
+    if (hadTableSticky) {
+      tableRef.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+    }
+    if (prevTableMarginTop) {
+      tableRef.style.marginTop = '';
+    }
+    var stickyRows = Array.from(tableRef.querySelectorAll("tr.sticky, tr.".concat(TableSharedCssClassName.TABLE_NATIVE_STICKY)));
+    var prevStickyRowState = stickyRows.map(function (row) {
+      return {
+        row: row,
+        hadSticky: row.classList.contains('sticky'),
+        hadNative: row.classList.contains(TableSharedCssClassName.TABLE_NATIVE_STICKY),
+        width: row.style.width,
+        top: row.style.top,
+        position: row.style.position,
+        gridTemplateColumns: row.style.gridTemplateColumns
+      };
+    });
+    stickyRows.forEach(function (row) {
+      row.classList.remove('sticky');
+      row.classList.remove(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+      row.style.width = '';
+      row.style.top = '';
+      row.style.position = '';
+      row.style.gridTemplateColumns = '';
+    });
+    try {
+      return runSmartAdjust(tableRef, resizerContainer, resizerItem, editorContainerWidth);
+    } finally {
+      tableRef.style.width = prevTableWidth;
+      tableRef.style.tableLayout = prevTableLayout;
+      cols.forEach(function (col, i) {
+        return col.style.width = prevColWidths[i];
+      });
+      if (hadTableSticky) {
+        tableRef.classList.add(TableSharedCssClassName.TABLE_STICKY);
+      }
+      if (prevTableMarginTop) {
+        tableRef.style.marginTop = prevTableMarginTop;
+      }
+      prevStickyRowState.forEach(function (state) {
+        if (state.hadSticky) {
+          state.row.classList.add('sticky');
+        }
+        if (state.hadNative) {
+          state.row.classList.add(TableSharedCssClassName.TABLE_NATIVE_STICKY);
+        }
+        if (state.width) {
+          state.row.style.width = state.width;
+        }
+        if (state.top) {
+          state.row.style.top = state.top;
+        }
+        if (state.position) {
+          state.row.style.position = state.position;
+        }
+        if (state.gridTemplateColumns) {
+          state.row.style.gridTemplateColumns = state.gridTemplateColumns;
+        }
+      });
+      restoreResizerContainer(resizerContainer);
+      if (resizerItem) {
+        resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+      }
+    }
+  }
+  if (resizerContainer) {
+    resizerContainer.style.width = 'var(--ak-editor-table-width)';
+    resizerContainer.style.setProperty('--ak-editor-table-width', 'max-content');
+  }
+  if (resizerItem) {
+    resizerItem.style.width = 'max-content';
+  }
+  var measurement = getTableMeasurement(tableRef);
+  tableRef.style.width = prevTableWidth;
+  tableRef.style.tableLayout = prevTableLayout;
+  cols.forEach(function (col, i) {
+    return col.style.width = prevColWidths[i];
+  });
+  if (resizerItem) {
+    resizerItem.style.width = prevResizerItemWidth !== null && prevResizerItemWidth !== void 0 ? prevResizerItemWidth : '';
+  }
+  return measurement;
+};

package/dist/esm/pm-plugins/utils/tableMode/smart-adjust/constants.js

@@ -0,0 +1,4 @@
+/** Each column's max width is `MAX × (usableWidth / numCols)`. */
+export var EVEN_SHARE_RATIO = {
+  MAX: 2
+};