@atlaskit/editor-plugin-table 7.25.6 → 7.25.8

package/dist/es2019/nodeviews/TableContainer.js

@@ -9,6 +9,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
+import { getAlignmentStyle } from './table-container-styles';
 import { TableResizer } from './TableResizer';
 export const InnerContainer = /*#__PURE__*/forwardRef(({
   className,
@@ -29,14 +30,6 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-testid": "table-container"
   }, children);
 });
-const centerAlignStyle = {
-  display: 'flex',
-  justifyContent: 'center'
-};
-const leftAlignStyle = {
-  display: 'flex',
-  justifyContent: 'flex-start'
-};
 const AlignmentTableContainer = ({
   node,
   children,
@@ -73,7 +66,7 @@ const AlignmentTableContainer = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorView, tableState, node]);
   const style = useMemo(() => {
-    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+    return getAlignmentStyle(alignment);
   }, [alignment]);
   return (
     /*#__PURE__*/

package/dist/es2019/nodeviews/TableResizer.js

@@ -325,7 +325,7 @@ export const TableResizer = ({
         prevNode: node,
         start: pos + 1,
         parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, shouldUseIncreasedScalingPercent || false)(tr);
+      }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false)(tr);
       const scaledNode = tr.doc.nodeAt(pos);
       (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,

package/dist/es2019/nodeviews/table-container-styles.js

@@ -0,0 +1,10 @@
+import { ALIGN_START } from '../utils/alignment';
+const centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+const leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+export const getAlignmentStyle = alignment => alignment === ALIGN_START ? leftAlignStyle : centerAlignStyle;

package/dist/es2019/plugin.js

@@ -191,7 +191,7 @@ const tablesPlugin = ({
           } = pluginConfig(tableOptions);
           return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -212,7 +212,7 @@ const tablesPlugin = ({
             isCommentEditor = false,
             tableResizingEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -402,7 +402,8 @@ const tablesPlugin = ({
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor
+            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
+            api: api
           }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -414,7 +415,8 @@ const tablesPlugin = ({
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
             isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
+            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+            api: api
           }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
@@ -431,7 +433,8 @@ const tablesPlugin = ({
             pluginConfig: pluginConfig,
             isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            ariaNotifyPlugin: ariaNotifyPlugin
+            ariaNotifyPlugin: ariaNotifyPlugin,
+            api: api
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
@@ -441,7 +444,8 @@ const tablesPlugin = ({
             scrollableElement: popupsScrollableElement,
             stickyHeaders: stickyHeader,
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorAnalyticsAPI: editorAnalyticsAPI
+            editorAnalyticsAPI: editorAnalyticsAPI,
+            api: api
           }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableResizingEnabled) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
             target: resizingTableRef,
             content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
@@ -491,7 +495,7 @@ const tablesPlugin = ({
           return tr;
         }
       }],
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

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

@@ -8,7 +8,7 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isTableResizingEnabled) {
+export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
@@ -21,12 +21,12 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
   // Add row/column shortcuts
   bindKeymapWithCommand(addRowBefore.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfter.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnBefore.common, addColumnBeforeCommand(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfter.common, addColumnAfterCommand(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   bindKeymapWithCommand(addRowBeforeVO.common, addRowAroundSelection(editorAnalyticsAPI)('TOP'), list);
   bindKeymapWithCommand(addRowAfterVO.common, addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'), list);
-  bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-  bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnBeforeVO.common, addColumnBeforeCommand(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+  bindKeymapWithCommand(addColumnAfterVO.common, addColumnAfterCommand(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   if (dragAndDropEnabled) {
     // Move row/column shortcuts
     /**
@@ -42,8 +42,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(moveColumnRight.common, moveSourceWithAnalyticsViaShortcut(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)('table-column', 1), list);
 
     // Delete row/column shortcuts
-    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
-    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
+    bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent), list);
   }
   bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing({
     ariaNotify: ariaNotifyPlugin,
@@ -59,8 +59,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     ariaNotify: ariaNotifyPlugin,
     getIntl: getIntl
   }), list);
-  bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
-  bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+  bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
+  bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
   bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
     ariaNotify: ariaNotifyPlugin,
     getIntl: getIntl

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

@@ -77,7 +77,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           tableWithFixedColumnWidthsOption = false
         } = getEditorFeatureFlags();
         // "fixTables" removes empty rows as we don't allow that in schema
-        const updatedTr = handleCut(tr, oldState, newState, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent);
+        const updatedTr = handleCut(tr, oldState, newState, pluginInjectionApi, editorAnalyticsAPI, editorViewRef || undefined, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent);
         return fixTables(updatedTr) || updatedTr;
       }
       if (transactions.find(tr => tr.docChanged)) {

package/dist/es2019/pm-plugins/table-resizing/commands.js

@@ -8,7 +8,8 @@ export const evenColumns = ({
   resizeState,
   table,
   start,
-  event
+  event,
+  api
 }) => (state, dispatch) => {
   if (!isTableSelected(state.selection)) {
     return false;
@@ -22,7 +23,7 @@ export const evenColumns = ({
   const now = Date.now();
   if (lastClick && now - lastClick.time < 500 && isClickNear(event, lastClick)) {
     const newState = evenAllColumnsWidths(resizeState);
-    setLastClick(null, tr => updateColumnWidths(newState, table, start)(tr))(state, dispatch);
+    setLastClick(null, tr => updateColumnWidths(newState, table, start, api)(tr))(state, dispatch);
     return true;
   }
   setLastClick({
@@ -32,9 +33,9 @@ export const evenColumns = ({
   })(state, dispatch);
   return false;
 };
-export const distributeColumnsWidths = (newResizeState, table) => (state, dispatch) => {
+export const distributeColumnsWidths = (newResizeState, table, api) => (state, dispatch) => {
   if (dispatch) {
-    const tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
+    const tr = updateColumnWidths(newResizeState, table.node, table.start, api)(state.tr);
     tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS
     });

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -14,7 +14,7 @@ import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 import { scaleResizeState } from './utils/resize-column';
-export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
+export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
   const {
     state,
     dispatch
@@ -79,7 +79,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     resizeState,
     table: originalTable,
     start,
-    event
+    event,
+    api
   })(state, dispatch)) {
     finish(event);
     return true;
@@ -183,7 +184,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
             lineLength,
             isTableAlignmentEnabled
           });
-          tr = updateColumnWidths(newResizeState, table, start)(tr);
+          tr = updateColumnWidths(newResizeState, table, start, api)(tr);
 
           // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
           const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.maxSize);
@@ -213,7 +214,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
           }
         } else {
           const newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, shouldUseIncreasedScalingPercent);
-          tr = updateColumnWidths(newResizeState, table, start)(tr);
+          tr = updateColumnWidths(newResizeState, table, start, api)(tr);
         }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -9,7 +9,7 @@ import { pluginKey } from './plugin-key';
 import { getResizeCellPos } from './utils';
 export function createPlugin(dispatch, {
   lastColumnResizable = true
-}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
+}, getEditorContainerWidth, getEditorFeatureFlags, api, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
   return new SafePlugin({
     key: pluginKey,
     state: createPluginState(dispatch, {
@@ -51,7 +51,7 @@ export function createPlugin(dispatch, {
             isColumnKeyboardResizeStarted = isKeyboardResize;
           }
           if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
-            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
+            if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
               const {
                 state,
                 dispatch

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -135,7 +135,7 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => tr => {
+export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false) => tr => {
   if (!tableRef) {
     return tr;
   }
@@ -162,7 +162,7 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnC
     resizeState = scale(tableRef, options, domAtPos, isTableScalingEnabledOnCurrentTable, shouldUseIncreasedScalingPercent);
   }
   if (resizeState) {
-    tr = updateColumnWidths(resizeState, node, start)(tr);
+    tr = updateColumnWidths(resizeState, node, start, api)(tr);
     if (tr.docChanged) {
       tr.setMeta('scrollIntoView', false);
       // TODO: ED-8995

package/dist/es2019/toDOM.js

@@ -1,6 +1,8 @@
+import kebabCase from 'lodash/kebabCase';
 import { table } from '@atlaskit/adf-schema';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 export const tableNodeSpecWithFixedToDOM = config => {
   if (!fg('platform_editor_lazy-node-views')) {
@@ -10,6 +12,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
     ...table,
     toDOM: node => {
       const editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
+      const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
       const attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
@@ -55,7 +58,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
       }
       const tableResizingDiv = ['div', {
         'data-testid': 'table-alignment-container',
-        style: 'display: flex; justify-content: center;'
+        style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
         style: `width: ${node.attrs.width}px`

package/dist/es2019/toolbar.js

@@ -115,7 +115,7 @@ export const getToolbarMenuConfig = (config, state, {
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
+}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
   var _pluginState$pluginCo, _pluginState$pluginCo2;
   const {
     top,
@@ -133,7 +133,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
       const selectionRect = getClosestSelectionRect(state);
       const index = selectionRect === null || selectionRect === void 0 ? void 0 : selectionRect.right;
       if (index) {
-        insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
+        insertColumnWithAnalytics(api, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, index)(state, dispatch, view);
       }
       return true;
     },
@@ -171,7 +171,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     onClick: (state, dispatch, view) => {
       const selectionRect = getClosestSelectionRect(state);
       if (selectionRect) {
-        deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
+        deleteColumnsWithAnalytics(editorAnalyticsAPI, api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(INPUT_METHOD.FLOATING_TB, selectionRect)(state, dispatch, view);
       }
       return true;
     },
@@ -221,7 +221,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
     const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
     const distributeColumnWidths = (state, dispatch) => {
       if (newResizeStateWithAnalytics) {
-        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
         return true;
       }
       return false;
@@ -326,7 +326,7 @@ export const getClosestSelectionOrTableRect = state => {
   const tableRect = new Rect(0, 0, map.width, map.height);
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
 };
-export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
+export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
@@ -359,8 +359,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
     const alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
     const isCellBackgroundDuplicated = getEditorFeatureFlags().tableDuplicateCellColouring || false;
-    const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
-    const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
+    const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
+    const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
     const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
 
     // Check if we need to show confirm dialog for delete button
@@ -440,24 +440,24 @@ const separator = hidden => {
 };
 const getCellItems = (state, view, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
+}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
   const initialSelectionRect = getClosestSelectionRect(state);
   if (initialSelectionRect) {
     const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
       formatMessage
-    }, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
+    }, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
     return [cellOptions, separator(cellOptions.hidden)];
   }
   return [];
 };
-export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => (state, dispatch, editorView) => {
+export const getDistributeConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => (state, dispatch, editorView) => {
   const selectionOrTableRect = getClosestSelectionOrTableRect(state);
   if (!editorView || !selectionOrTableRect) {
     return false;
   }
   const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
   if (newResizeStateWithAnalytics) {
-    distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+    distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
     return true;
   }
   return false;
@@ -467,7 +467,7 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI,
 // fixed column button should be in this function call in the future
 const getColumnSettingItems = (editorState, editorView, {
   formatMessage
-}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
+}, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
   var _newResizeStateWithAn2, _pluginState$pluginCo3;
   const pluginState = getPluginState(editorState);
   const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
@@ -483,7 +483,7 @@ const getColumnSettingItems = (editorState, editorView, {
       type: 'button',
       title: formatMessage(messages.distributeColumns),
       icon: DistributeColumnIcon,
-      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view),
+      onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view),
       disabled: !wouldChange
     });
   }

package/dist/es2019/transforms/column-width.js

@@ -5,7 +5,6 @@ import { getTableContainerElementWidth, getTableElementWidth, hasTableBeenResize
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
-
 /**
  * Given a new ResizeState object, create a transaction that replaces and updates the table node based on new state.
  * @param resizeState
@@ -13,7 +12,7 @@ import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
  * @param start
  * @returns
  */
-export const updateColumnWidths = (resizeState, table, start) => tr => {
+export const updateColumnWidths = (resizeState, table, start, _api) => tr => {
   const map = TableMap.get(table);
   const updatedCellsAttrs = {};
 
@@ -87,7 +86,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumns = (isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => (table, view) => tr => {
+export const rescaleColumns = (isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, api) => (table, view) => tr => {
   if (!view) {
     return tr;
   }
@@ -160,7 +159,7 @@ export const rescaleColumns = (isTableScalingEnabled = false, isTableFixedColumn
       tableWidth: previousTableInfo.width,
       overflow: wasTableInOverflow
     };
-    return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+    return updateColumnWidths(minWidthResizeState, table.node, table.start, api)(tr);
   }
   let resizeState = getResizeState({
     minWidth: tableCellMinWidth,
@@ -179,5 +178,5 @@ export const rescaleColumns = (isTableScalingEnabled = false, isTableFixedColumn
   if (!wasTableInOverflow && resizeState.overflow || resizeState.tableWidth < resizeState.maxSize) {
     resizeState = scaleTableTo(resizeState, previousTableInfo.possibleMaxWidth);
   }
-  return updateColumnWidths(resizeState, table.node, table.start)(tr);
+  return updateColumnWidths(resizeState, table.node, table.start, api)(tr);
 };

package/dist/es2019/transforms/delete-columns.js

@@ -192,7 +192,7 @@ function fixRowSpans(table) {
   }
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
-export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => tr => {
+export const deleteColumns = (rect, allowCustomStep, api, view, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => tr => {
   let updatedTr = tr;
   updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
     name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
@@ -204,7 +204,7 @@ export const deleteColumns = (rect, allowCustomStep, view, isTableScalingEnabled
   }
   const table = findTable(updatedTr.selection);
   if (table) {
-    updatedTr = rescaleColumns(isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(table, view)(updatedTr);
+    updatedTr = rescaleColumns(isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, api)(table, view)(updatedTr);
   }
   return updatedTr;
 };

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -546,7 +546,7 @@ export class ContextualMenu extends Component {
         case 'distribute_columns':
           const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, tableWithFixedColumnWidthsOption);
           if (newResizeStateWithAnalytics) {
-            distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
+            distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, this.props.api)(INPUT_METHOD.CONTEXT_MENU, newResizeStateWithAnalytics)(state, dispatch);
             this.toggleOpen();
           }
           break;
@@ -555,7 +555,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'insert_column':
-          insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
+          insertColumnWithAnalytics(this.props.api, editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'insert_row':
@@ -566,7 +566,7 @@ export class ContextualMenu extends Component {
           this.toggleOpen();
           break;
         case 'delete_column':
-          deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
+          deleteColumnsWithAnalytics(editorAnalyticsAPI, this.props.api, isTableScalingEnabled, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
           this.toggleOpen();
           break;
         case 'delete_row':

package/dist/es2019/ui/FloatingContextualMenu/index.js

@@ -23,7 +23,8 @@ const FloatingContextualMenu = ({
   getEditorContainerWidth,
   getEditorFeatureFlags,
   isCellMenuOpenByKeyboard,
-  isCommentEditor
+  isCommentEditor,
+  api
 }) => {
   // TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
   const {
@@ -78,7 +79,8 @@ const FloatingContextualMenu = ({
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
     isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-    isCommentEditor: isCommentEditor
+    isCommentEditor: isCommentEditor,
+    api: api
   })));
 };
 FloatingContextualMenu.displayName = 'FloatingContextualMenu';

package/dist/es2019/ui/FloatingDeleteButton/index.js

@@ -108,7 +108,7 @@ class FloatingDeleteButton extends Component {
         switch (this.state.selectionType) {
           case 'column':
             {
-              deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect)(state, dispatch, this.props.editorView);
+              deleteColumnsWithAnalytics(editorAnalyticsAPI, this.props.api)(INPUT_METHOD.BUTTON, rect)(state, dispatch, this.props.editorView);
               return;
             }
           case 'row':

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -179,6 +179,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   tableNode,
   targetCellPosition,
   getEditorContainerWidth,
+  api,
   editorAnalyticsAPI,
   pluginConfig,
   intl: {
@@ -212,7 +213,7 @@ export const DragMenu = /*#__PURE__*/React.memo(({
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCellsInTable = (_tableMap$hasMergedCe = tableMap === null || tableMap === void 0 ? void 0 : tableMap.hasMergedCells()) !== null && _tableMap$hasMergedCe !== void 0 ? _tableMap$hasMergedCe : false;
   const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
-  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder, ariaNotifyPlugin);
+  const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, hasMergedCellsInTable, editorView, api, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI, pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.isHeaderRowRequired, isTableScalingEnabled, tableDuplicateCellColouring, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, tableSortColumnReorder, ariaNotifyPlugin);
   const {
     menuItems,
     menuCallback

package/dist/es2019/ui/FloatingDragMenu/index.js

@@ -21,7 +21,8 @@ const FloatingDragMenu = ({
   pluginConfig,
   isTableScalingEnabled,
   getEditorFeatureFlags,
-  ariaNotifyPlugin
+  ariaNotifyPlugin,
+  api
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -76,7 +77,8 @@ const FloatingDragMenu = ({
     shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
     isTableFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
     tableSortColumnReorder: tableSortColumnReorder,
-    ariaNotifyPlugin: ariaNotifyPlugin
+    ariaNotifyPlugin: ariaNotifyPlugin,
+    api: api
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingInsertButton/index.js

@@ -193,7 +193,7 @@ export class FloatingInsertButton extends React.Component {
         state,
         dispatch
       } = editorView;
-      insertColumnWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
+      insertColumnWithAnalytics(this.props.api, editorAnalyticsAPI, isTableScalingEnabled, tableDuplicateCellColouring, tableWithFixedColumnWidthsOption, shouldUseIncreasedScalingPercent)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
     }
   }
 }