@atlaskit/editor-plugin-table 7.6.4 → 7.6.6

package/dist/es2019/ui/ui-styles.js

@@ -14,14 +14,14 @@ const InsertLine = cssString => css`
     ${cssString}
   }
 `;
-const Marker = () => css`
-  background-color: ${tableBorderColor};
-  position: absolute;
-  height: ${lineMarkerSize}px;
-  width: ${lineMarkerSize}px;
-  border-radius: 50%;
-  pointer-events: none;
-`;
+const Marker = () => css({
+  backgroundColor: tableBorderColor,
+  position: 'absolute',
+  height: `${lineMarkerSize}px`,
+  width: `${lineMarkerSize}px`,
+  borderRadius: '50%',
+  pointerEvents: 'none'
+});
 export const InsertMarker = cssString => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
     ${Marker()};
@@ -49,6 +49,9 @@ const Button = cssString => css`
   }
   ${cssString}
 `;
+
+// Explicit pixel values required here to ensure classic row controls align correctly
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const HeaderButton = cssString => css`
   .${ClassName.CONTROLS_BUTTON} {
     background: ${tableHeaderCellBackgroundColor};
@@ -214,23 +217,15 @@ export const dragCornerControlButton = () => css`
     position: relative;
   }
 `;
-export const insertColumnButtonWrapper = () => css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(`
+export const insertColumnButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
     width: 2px;
     left: 9px;
-  `)}
-`;
-export const insertRowButtonWrapper = () => css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(`
+  `));
+export const insertRowButtonWrapper = () => css(InsertButton(), InsertButtonHover(), InsertLine(`
     height: 2px;
     top: -11px;
     left: ${tableInsertColumnButtonSize - 1}px;
-  `)}
-`;
+  `));
 export const columnControlsLineMarker = () => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
     table
@@ -324,40 +319,34 @@ const overflowShadowWidhoutDnD = isDragAndDropEnabled => {
 };
 const columnHeaderButton = cssString => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      background: ${tableHeaderCellBackgroundColor};
-      display: block;
-      box-sizing: border-box;
-      padding: 0;
-
-      :focus {
-        outline: none;
+    return css({
+      background: tableHeaderCellBackgroundColor,
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: 0,
+      ':focus': {
+        outline: 'none'
       }
-
-      ${cssString}
-    `;
+    }, cssString);
   } else {
-    return css`
-      background: ${tableHeaderCellBackgroundColor};
-      border: 1px solid ${tableBorderColor};
-      display: block;
-      box-sizing: border-box;
-      padding: 0;
-
-      :focus {
-        outline: none;
+    return css({
+      background: tableHeaderCellBackgroundColor,
+      border: `1px solid ${tableBorderColor}`,
+      display: 'block',
+      boxSizing: 'border-box',
+      padding: 0,
+      ':focus': {
+        outline: 'none'
       }
-
-      ${cssString}
-    `;
+    }, cssString);
   }
 };
-const columnHeaderButtonSelected = () => css`
-  color: ${`var(--ds-text-inverse, ${N0})`};
-  background-color: ${tableToolbarSelectedColor};
-  border-color: ${tableBorderSelectedColor};
-  z-index: ${columnControlsSelectedZIndex};
-`;
+const columnHeaderButtonSelected = () => css({
+  color: `var(--ds-text-inverse, ${N0})`,
+  backgroundColor: tableToolbarSelectedColor,
+  borderColor: tableBorderSelectedColor,
+  zIndex: columnControlsSelectedZIndex
+});
 const getFloatingDotOverrides = () => {
   return getBooleanFF('platform.editor.custom-table-width') ? css`
         tr
@@ -680,6 +669,9 @@ const getLastColumnResizerOverrides = () => {
         }
       ` : '';
 };
+
+// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const resizeHandleOverrides = isDragAndDropEnabled => {
   if (isDragAndDropEnabled) {
     return css`
@@ -786,27 +778,31 @@ export const resizeHandle = isDragAndDropEnabled => css`
 `;
 
 // Drag and Drop: drop target insert line
-const tableCellColumnInsertLineStyles = css`
-  content: ' ';
-  position: absolute;
-  height: calc(100% + ${tableCellBorderWidth * 2}px);
-  width: ${insertLineWidth}px;
-  z-index: ${columnControlsZIndex * 2};
-`;
-const tableCellRowInsertLineStyles = css`
-  content: ' ';
-  position: absolute;
-  left: ${"var(--ds-space-negative-025, -2px)"};
-  height: ${insertLineWidth}px;
-  width: calc(100% + ${tableCellBorderWidth * 2}px);
-  z-index: ${columnControlsZIndex * 2};
-`;
-const insertLineActiveColor = css`
-  background-color: ${tableBorderSelectedColor};
-`;
-const insertLineInactiveColor = css`
-  background-color: ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`};
-`;
+const tableCellColumnInsertLineStyles = css({
+  content: "' '",
+  position: 'absolute',
+  height: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+  width: `${insertLineWidth}px`,
+  zIndex: columnControlsZIndex * 2
+});
+const tableCellRowInsertLineStyles = css({
+  content: "' '",
+  position: 'absolute',
+  left: "var(--ds-space-negative-025, -2px)",
+  height: `${insertLineWidth}px`,
+  width: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+  zIndex: columnControlsZIndex * 2
+});
+const insertLineActiveColor = css({
+  backgroundColor: tableBorderSelectedColor
+});
+const insertLineInactiveColor = css({
+  backgroundColor: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`
+});
+
+// Explicit pixel values required here to ensure correct positioning of line that is show on row
+// or column drag
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {

package/dist/esm/commands/column-resize.js

@@ -1,3 +1,4 @@
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findCellClosestToPos, findCellRectClosestToPos, findTableClosestToPos, getSelectionRect, isSelectionType, nextCell } from '@atlaskit/editor-tables/utils';
@@ -60,25 +61,35 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     return false;
   };
 };
-export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(state, dispatch, view) {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+export var initiateKeyboardColumnResizing = function initiateKeyboardColumnResizing(_ref) {
+  var ariaNotify = _ref.ariaNotify,
+    getIntl = _ref.getIntl;
+  return function (state, dispatch, view) {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+    var selection = state.selection;
+    var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
+    var cell = findCellClosestToPos(selection.$from);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+    }
+    if (selectionRect && cell && view) {
+      return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
+    }
     return false;
-  }
-  var selection = state.selection;
-  var selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
-  var cell = findCellClosestToPos(selection.$from);
-  if (selectionRect && cell && view) {
-    return updateResizeHandleAndStatePosition(selectionRect.top, selectionRect.right, cell.pos)(state, dispatch);
-  }
-  return false;
+  };
 };
-export var activateNextResizeArea = function activateNextResizeArea(direction) {
+export var activateNextResizeArea = function activateNextResizeArea(_ref2) {
+  var direction = _ref2.direction,
+    ariaNotify = _ref2.ariaNotify,
+    getIntl = _ref2.getIntl;
   return function (state, dispatch, view) {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
-    var _ref = getTableResizingPluginState(state) || {},
-      resizeHandlePos = _ref.resizeHandlePos;
+    var _ref3 = getTableResizingPluginState(state) || {},
+      resizeHandlePos = _ref3.resizeHandlePos;
     // If No resizing has initiated, skip to regular handler
     if (!resizeHandlePos) {
       return false;
@@ -101,6 +112,18 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
     }
     var currentCellRect = tableMap.findCell($currentCell.pos - $currentCell.start(-1));
     var $nextCell = nextCell($currentCell, 'horiz', direction);
+    if (ariaNotify && getIntl) {
+      var columnDirection = '';
+      if (direction === 1) {
+        columnDirection = getIntl().formatMessage(messages.columnRightResize);
+      }
+      if (direction === -1) {
+        columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+      }
+      ariaNotify(getIntl().formatMessage(messages.focusedOtherResize, {
+        direction: columnDirection
+      }));
+    }
     if ($nextCell) {
       // we are somewhere in between the side columns of the table
       var offset = $nextCell.pos - $nextCell.start(-1);
@@ -121,8 +144,12 @@ export var activateNextResizeArea = function activateNextResizeArea(direction) {
     return false;
   };
 };
-export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize, getEditorContainerWidth) {
-  var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+export var changeColumnWidthByStep = function changeColumnWidthByStep(_ref4) {
+  var stepSize = _ref4.stepSize,
+    getEditorContainerWidth = _ref4.getEditorContainerWidth,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    ariaNotify = _ref4.ariaNotify,
+    getIntl = _ref4.getIntl;
   return function (state, dispatch, view) {
     var customTr = state.tr;
     var fakeDispatch = function fakeDispatch(tr) {
@@ -184,10 +211,26 @@ export var changeColumnWidthByStep = function changeColumnWidthByStep(stepSize,
     if (dispatch) {
       dispatch(customTr);
     }
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.changedColumnWidth, {
+        width: Math.floor(newResizeState.cols[colIndex].width)
+      }));
+      if (newResizeState.cols.length === colIndex + 1) {
+        if (newResizeState.overflow === true) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+        }
+        if (newResizeState.overflow === false) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+        }
+      }
+    }
     return true;
   };
 };
-export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(originalTr) {
+export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(_ref5) {
+  var ariaNotify = _ref5.ariaNotify,
+    getIntl = _ref5.getIntl,
+    originalTr = _ref5.originalTr;
   return function (state, dispatch) {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
@@ -212,6 +255,9 @@ export var stopKeyboardColumnResizing = function stopKeyboardColumnResizing(orig
     }, function () {
       return customTr.setMeta('scrollIntoView', false);
     })(state, fakeDispatch);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+    }
     if (dispatch) {
       dispatch(customTr);
       return true;

package/dist/esm/commands/go-to-next-cell.js

@@ -10,7 +10,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { stopKeyboardColumnResizing } from './column-resize';
 var TAB_FORWARD_DIRECTION = 1;
 var TAB_BACKWARD_DIRECTION = -1;
-export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
+export var goToNextCell = function goToNextCell(editorAnalyticsAPI, ariaNotify, getIntl) {
   return function (direction) {
     return function (state, dispatch, view) {
       var table = findTable(state.selection);
@@ -21,7 +21,10 @@ export var goToNextCell = function goToNextCell(editorAnalyticsAPI) {
         var _getPluginState;
         var isColumnResizing = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.isKeyboardResize;
         if (isColumnResizing) {
-          stopKeyboardColumnResizing()(state, dispatch, view);
+          stopKeyboardColumnResizing({
+            ariaNotify: ariaNotify,
+            getIntl: getIntl
+          })(state, dispatch, view);
           return true;
         }
       }

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

@@ -184,7 +184,7 @@ export var insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyt
   };
 };
 export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI) {
-  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod) {
+  return function (stepSize, getEditorContainerWidth, isTableScalingEnabled, inputMethod, ariaNotify, getIntl) {
     return withEditorAnalyticsAPI(function (state) {
       var _getSelectedTableInfo2 = getSelectedTableInfo(state.selection),
         table = _getSelectedTableInfo2.table,
@@ -206,7 +206,13 @@ export var changeColumnWidthByStepWithAnalytics = function changeColumnWidthBySt
           totalColumnCount: totalColumnCount
         }
       };
-    })(editorAnalyticsAPI)(changeColumnWidthByStep(stepSize, getEditorContainerWidth, isTableScalingEnabled));
+    })(editorAnalyticsAPI)(changeColumnWidthByStep({
+      stepSize: stepSize,
+      getEditorContainerWidth: getEditorContainerWidth,
+      isTableScalingEnabled: isTableScalingEnabled,
+      ariaNotify: ariaNotify,
+      getIntl: getIntl
+    }));
   };
 };
 export var insertColumnWithAnalytics = function insertColumnWithAnalytics(editorAnalyticsAPI) {

package/dist/esm/nodeviews/ExternalDropTargets.js

@@ -42,6 +42,7 @@ export var ExternalDropTargets = function ExternalDropTargets(_ref) {
       width: getTableWrapperWidth(),
       overflow: 'hidden',
       position: 'absolute',
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       top: "-".concat(dropTargetExtendedWidth - tableMarginTop, "px"),
       pointerEvents: 'auto',
       zIndex: "".concat(dropTargetsZIndex)
@@ -51,6 +52,7 @@ export var ExternalDropTargets = function ExternalDropTargets(_ref) {
     style: {
       display: 'flex',
       // move drop targets based on table wrapper scroll
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
       marginLeft: "-".concat(getScrollOffset(), "px")
     }
   }, colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width, index) {

package/dist/esm/nodeviews/TableComponent.js

@@ -21,7 +21,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
@@ -35,7 +35,6 @@ import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup
 import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableOverflowShadowWidth, tableOverflowShadowWidthWide } from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
@@ -741,7 +740,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         style: {
           visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled ? '1px' : '')
+          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
@@ -760,10 +759,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, allowControls && colControls), stickyScrollbar && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         style: {
-          height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+          height: "var(--ds-space-250, 20px)",
+          // MAX_BROWSER_SCROLLBAR_HEIGHT
           display: 'none',
           // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-          width: isResizing ? '0px' : '100%'
+          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
         }
       }, /*#__PURE__*/React.createElement("div", {
         style: {
@@ -777,14 +777,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         style: {
           position: 'absolute',
-          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? tableOverflowShadowWidthWide : tableOverflowShadowWidth, "px") : '-2px'
+          right: getBooleanFF('platform.editor.custom-table-width') ? "".concat(getBooleanFF('platform.editor.table.increase-shadow-visibility_lh89r') ? "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
+          : "var(--ds-space-100, 8px)" // tableOverflowShadowWidth
+          ) : "var(--ds-space-negative-025, -2px)"
         }
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
         style: {
           visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(topStickyShadowPosition, "px"),
-          paddingBottom: "".concat(isDragAndDropEnabled ? '1px' : '')
+          paddingBottom: "".concat(isDragAndDropEnabled && "var(--ds-space-025, 2px)")
         }
       })), /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,

package/dist/esm/nodeviews/TableResizer.js

@@ -30,7 +30,7 @@ var handles = {
 };
 var handleStyles = {
   right: {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     right: '-14px',
     marginTop: "var(--ds-space-150, 12px)"
   }
@@ -287,6 +287,7 @@ export var TableResizer = function TableResizer(_ref) {
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {
       return;
     }
+    setLocalTableWidth(newWidth);
     handleResizeStop({
       width: width,
       x: 0,

package/dist/esm/plugin.js

@@ -169,14 +169,15 @@ var tablesPlugin = function tablesPlugin(_ref) {
       // plugin as it is currently swallowing backspace events inside tables
       {
         name: 'tableKeymap',
-        plugin: function plugin() {
-          var _ref6 = options || {},
-            dragAndDropEnabled = _ref6.dragAndDropEnabled,
-            _ref6$isTableScalingE = _ref6.isTableScalingEnabled,
-            isTableScalingEnabled = _ref6$isTableScalingE === void 0 ? false : _ref6$isTableScalingE,
-            _ref6$fullWidthEnable = _ref6.fullWidthEnabled,
-            fullWidthEnabled = _ref6$fullWidthEnable === void 0 ? false : _ref6$fullWidthEnable;
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
+        plugin: function plugin(_ref6) {
+          var getIntl = _ref6.getIntl;
+          var _ref7 = options || {},
+            dragAndDropEnabled = _ref7.dragAndDropEnabled,
+            _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
+            isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
+            _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
+            fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable;
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled, api, getIntl);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -186,12 +187,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
-          var _ref7 = options || {},
-            dragAndDropEnabled = _ref7.dragAndDropEnabled;
+          var _ref8 = options || {},
+            dragAndDropEnabled = _ref8.dragAndDropEnabled;
           return tableEditing({
-            reportFixedTable: function reportFixedTable(_ref8) {
-              var tr = _ref8.tr,
-                reason = _ref8.reason;
+            reportFixedTable: function reportFixedTable(_ref9) {
+              var tr = _ref9.tr,
+                reason = _ref9.reason;
               editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
                 action: TABLE_ACTION.FIXED,
                 actionSubject: ACTION_SUBJECT.TABLE,
@@ -207,48 +208,48 @@ var tablesPlugin = function tablesPlugin(_ref) {
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref9) {
-          var dispatch = _ref9.dispatch,
-            eventDispatcher = _ref9.eventDispatcher;
+        plugin: function plugin(_ref10) {
+          var dispatch = _ref10.dispatch,
+            eventDispatcher = _ref10.eventDispatcher;
           return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, function () {
             return [];
           }) : undefined;
         }
       }, {
         name: 'tableDragAndDrop',
-        plugin: function plugin(_ref10) {
-          var dispatch = _ref10.dispatch;
+        plugin: function plugin(_ref11) {
+          var dispatch = _ref11.dispatch;
           return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref11) {
-          var dispatch = _ref11.dispatch;
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
         name: 'tableWidth',
-        plugin: function plugin(_ref12) {
+        plugin: function plugin(_ref13) {
           var _options$fullWidthEna;
-          var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
-            dispatch = _ref12.dispatch;
+          var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
+            dispatch = _ref13.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
-        plugin: function plugin(_ref13) {
+        plugin: function plugin(_ref14) {
           var _options$tableResizin;
-          var dispatch = _ref13.dispatch,
-            dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
+          var dispatch = _ref14.dispatch,
+            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
           return createTableOverflowAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
-        plugin: function plugin(_ref14) {
-          var dispatch = _ref14.dispatch,
-            dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent;
+        plugin: function plugin(_ref15) {
+          var dispatch = _ref15.dispatch,
+            dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
           return getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
@@ -279,12 +280,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref15) {
-      var editorView = _ref15.editorView,
-        popupsMountPoint = _ref15.popupsMountPoint,
-        popupsBoundariesElement = _ref15.popupsBoundariesElement,
-        popupsScrollableElement = _ref15.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref16) {
+      var editorView = _ref16.editorView,
+        popupsMountPoint = _ref16.popupsMountPoint,
+        popupsBoundariesElement = _ref16.popupsBoundariesElement,
+        popupsScrollableElement = _ref16.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref16.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -298,30 +299,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        render: function render(_ref16) {
-          var resizingPluginState = _ref16.tableResizingPluginState,
-            stickyHeadersState = _ref16.stickyHeadersState,
-            tablePluginState = _ref16.tablePluginState,
-            tableWidthPluginState = _ref16.tableWidthPluginState,
-            dragAndDropState = _ref16.dragAndDropState;
+        render: function render(_ref17) {
+          var resizingPluginState = _ref17.tableResizingPluginState,
+            stickyHeadersState = _ref17.stickyHeadersState,
+            tablePluginState = _ref17.tablePluginState,
+            tableWidthPluginState = _ref17.tableWidthPluginState,
+            dragAndDropState = _ref17.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref17 = tablePluginState,
-            tableNode = _ref17.tableNode,
-            tablePos = _ref17.tablePos,
-            targetCellPosition = _ref17.targetCellPosition,
-            isContextualMenuOpen = _ref17.isContextualMenuOpen,
-            layout = _ref17.layout,
-            tableRef = _ref17.tableRef,
-            pluginConfig = _ref17.pluginConfig,
-            insertColumnButtonIndex = _ref17.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref17.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref17.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref17.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref17.isDragAndDropEnabled,
-            tableWrapperTarget = _ref17.tableWrapperTarget;
+          var _ref18 = tablePluginState,
+            tableNode = _ref18.tableNode,
+            tablePos = _ref18.tablePos,
+            targetCellPosition = _ref18.targetCellPosition,
+            isContextualMenuOpen = _ref18.isContextualMenuOpen,
+            layout = _ref18.layout,
+            tableRef = _ref18.tableRef,
+            pluginConfig = _ref18.pluginConfig,
+            insertColumnButtonIndex = _ref18.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref18.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref18.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref18.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref18.isDragAndDropEnabled,
+            tableWrapperTarget = _ref18.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -402,8 +403,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref18) {
-        var formatMessage = _ref18.formatMessage;
+      quickInsert: function quickInsert(_ref19) {
+        var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),