@atlaskit/editor-plugin-table 2.1.7 → 2.3.0

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

@@ -1,13 +1,25 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from 'prosemirror-state';
+import { PluginKey
+
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+} from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { pluginKey as tableWidthPluginKey } from '../table-width';
 import { buildColumnControlsDecorations, maybeUpdateColumnControlsSelectedDecoration } from './utils';
 export const pluginKey = new PluginKey('tableDecorationsPlugin');
 export const getDecorations = state => pluginKey.getState(state);
-export const handleDocOrSelectionChanged = (tr, decorationSet, oldState) => {
-  if (tr.docChanged || tr.selection instanceof CellSelection) {
+export const handleDocOrSelectionChanged = (tr, decorationSet, oldState, newState) => {
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
+  const isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
+  const wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
+  const changedResizing = isResizing !== wasResizing;
+
+  // Remove column controls when resizing
+  if (isResizing) {
+    return DecorationSet.empty;
+  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet,
       tr
@@ -27,15 +39,15 @@ export const createPlugin = () => {
   return new SafePlugin({
     state: {
       init: () => DecorationSet.empty,
-      apply: (tr, decorationSet, oldState) => {
+      apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const meta = tr.getMeta(tablePluginKey);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
-          return handleDocOrSelectionChanged(tr, pluginState, oldState);
+          return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }
         return pluginState;
       }

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -1,3 +1,5 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../../types';

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

@@ -24,7 +24,7 @@ import { isHeaderRowRequired } from '../utils/paste';
 let isBreakoutEnabled;
 let isFullWidthModeEnabled;
 let wasFullWidthModeEnabled;
-export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI) => {
+export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) => {
   var _window;
   isBreakoutEnabled = breakoutEnabled;
   isFullWidthModeEnabled = fullWidthModeEnabled;
@@ -232,7 +232,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
           isBreakoutEnabled,
           isFullWidthModeEnabled,
           wasFullWidthModeEnabled
-        }, getEditorContainerWidth, getEditorFeatureFlags)
+        }, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi)
       },
       handleDOMEvents: {
         focus: handleFocus,

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

@@ -1,3 +1,5 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';

package/dist/es2019/plugins/table/pm-plugins/{table-add-width.js → table-width.js}

@@ -1,12 +1,34 @@
 /**
- * A plugin for scan the document, add width value to table's width attribute when necessary
- *
+ * A plugin for handle table custom widths
+ * Has login to scan the document, add width value to table's width attribute when necessary
+ * Also holds resizing state to hide / show table controls
  */
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReplaceStep } from 'prosemirror-transform';
-const createPlugin = fullWidthEnabled => new SafePlugin({
+import { PluginKey } from 'prosemirror-state';
+export const pluginKey = new PluginKey('tableWidthPlugin');
+const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
+  key: pluginKey,
+  state: {
+    init() {
+      return {
+        resizing: false
+      };
+    },
+    apply(tr, pluginState) {
+      const meta = tr.getMeta(pluginKey);
+      if (meta && meta.resizing !== pluginState.resizing) {
+        const newState = {
+          resizing: meta.resizing
+        };
+        dispatch(pluginKey, newState);
+        return newState;
+      }
+      return pluginState;
+    }
+  },
   appendTransaction: (transactions, _oldState, newState) => {
     // When document first load in Confluence, initially it is an empty document
     // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.

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

@@ -7,6 +7,7 @@ import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescend
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { TableCssClassName } from './types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 import { isReferencedSource, getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
@@ -294,7 +295,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   const tableObject = findTable(state.selection);
   const pluginState = getPluginState(state);
   const resizeState = tableResizingPluginKey.getState(state);
-  if (tableObject && pluginState.editorHasFocus) {
+  const tableWidthState = tableWidthPluginKey.getState(state);
+
+  // We don't want to show floating toolbar while resizing the table
+  const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
+  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     const {

package/dist/es2019/plugins/table/ui/consts.js

@@ -62,4 +62,6 @@ export const contextualMenuTriggerSize = 16;
 export const contextualMenuDropdownWidth = 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
-export const stickyHeaderBorderBottomWidth = 1;
+export const stickyHeaderBorderBottomWidth = 1;
+export const TABLE_SNAP_GAP = 5;
+export const TABLE_HIGHLIGHT_GAP = 10;

package/dist/es2019/plugins/table/utils/collapse.js

@@ -1,4 +1,6 @@
 import { NodeRange } from 'prosemirror-model';
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 import { findWrapping } from 'prosemirror-transform';
 import { findTable } from '@atlaskit/editor-tables/utils';
 const bail = () => ({

package/dist/es2019/plugins/table/utils/decoration.js

@@ -1,3 +1,5 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { Decoration } from 'prosemirror-view';

package/dist/es2019/plugins/table/utils/guidelines.js

@@ -0,0 +1,4 @@
+import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
+import { akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+export const defaultGuidelineWidths = [akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth];
+export const defaultGuidelines = createFixedGuidelinesFromLengths(defaultGuidelineWidths);

package/dist/es2019/plugins/table/utils/snapping.js

@@ -0,0 +1,27 @@
+/**
+ * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ */
+export const findClosestSnap = (currentWidth, snapWidths, guidelines, snapGap = 0) => {
+  const closestGapIndex = snapWidths.reduce((prev, curr, index) => Math.abs(curr - currentWidth) < Math.abs(snapWidths[prev] - currentWidth) ? index : prev, 0);
+  const gap = Math.abs(snapWidths[closestGapIndex] - currentWidth);
+  if (gap < snapGap) {
+    const snappingWidth = Math.round(snapWidths[closestGapIndex]);
+    const guidelineKeys = guidelines.reduce((acc, guideline) => {
+      // NOTE: The snap points are based on the guidelines, however their formatted as a length value whereas the guidelines
+      // are point based. The point base x coords are calculated by halving the lengths. This means we can convert the
+      // point base position to length by simply multiplying by 2.
+      if (Math.round(Math.abs(guideline.position.x) * 2) === snappingWidth) {
+        acc.push(guideline.key);
+      }
+      return acc;
+    }, []);
+    return {
+      gap,
+      keys: guidelineKeys
+    };
+  }
+  return {
+    gap,
+    keys: []
+  };
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.1.7",
+	"version": "2.3.0",
 	"sideEffects": false
 }

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // #region Imports
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';

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

@@ -11,7 +11,7 @@ import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
-import { createPlugin as createTableAddWidthPlugin } from './pm-plugins/table-add-width';
+import { pluginKey as tableWidthPluginKey, createPlugin as createTableWidthPlugin } from './pm-plugins/table-width';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -96,7 +96,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             breakoutEnabled = _ref2.breakoutEnabled,
             tableOptions = _ref2.tableOptions,
             getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
-          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
+          return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',
@@ -165,9 +165,11 @@ var tablesPlugin = function tablesPlugin(options, api) {
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
-        name: 'tableAddWidth',
-        plugin: function plugin() {
-          return getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(options.fullWidthEnabled || false) : undefined;
+        name: 'tableWidth',
+        plugin: function plugin(_ref8) {
+          var _options$fullWidthEna;
+          var dispatch = _ref8.dispatch;
+          return getBooleanFF('platform.editor.custom-table-width') ? createTableWidthPlugin(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
@@ -197,12 +199,12 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref8) {
-      var editorView = _ref8.editorView,
-        popupsMountPoint = _ref8.popupsMountPoint,
-        popupsBoundariesElement = _ref8.popupsBoundariesElement,
-        popupsScrollableElement = _ref8.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref9) {
+      var editorView = _ref9.editorView,
+        popupsMountPoint = _ref9.popupsMountPoint,
+        popupsBoundariesElement = _ref9.popupsBoundariesElement,
+        popupsScrollableElement = _ref9.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -210,28 +212,32 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tablePluginState: pluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        render: function render(_ref9) {
-          var resizingPluginState = _ref9.tableResizingPluginState,
-            stickyHeadersState = _ref9.stickyHeadersState,
-            tablePluginState = _ref9.tablePluginState;
+        render: function render(_ref10) {
+          var resizingPluginState = _ref10.tableResizingPluginState,
+            stickyHeadersState = _ref10.stickyHeadersState,
+            tablePluginState = _ref10.tablePluginState,
+            tableWidthPluginState = _ref10.tableWidthPluginState;
           var state = editorView.state;
-          var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref10 = tablePluginState,
-            tableNode = _ref10.tableNode,
-            tablePos = _ref10.tablePos,
-            targetCellPosition = _ref10.targetCellPosition,
-            isContextualMenuOpen = _ref10.isContextualMenuOpen,
-            layout = _ref10.layout,
-            tableRef = _ref10.tableRef,
-            pluginConfig = _ref10.pluginConfig,
-            insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref10.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
-            tableWrapperTarget = _ref10.tableWrapperTarget;
+          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 _ref11 = tablePluginState,
+            tableNode = _ref11.tableNode,
+            tablePos = _ref11.tablePos,
+            targetCellPosition = _ref11.targetCellPosition,
+            isContextualMenuOpen = _ref11.isContextualMenuOpen,
+            layout = _ref11.layout,
+            tableRef = _ref11.tableRef,
+            pluginConfig = _ref11.pluginConfig,
+            insertColumnButtonIndex = _ref11.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref11.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref11.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref11.isHeaderRowEnabled,
+            tableWrapperTarget = _ref11.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = getBooleanFF('platform.editor.custom-table-width') ? null : isLayoutSupported(state) && options && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -245,7 +251,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             stickyHeader: stickyHeader,
             editorAnalyticsAPI: editorAnalyticsAPI
           }) : null;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorView: editorView,
             tableNode: tableNode,
@@ -272,17 +278,17 @@ var tablesPlugin = function tablesPlugin(options, api) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth
-          }), /*#__PURE__*/React.createElement(FloatingContextualMenu, {
+          }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
             targetCellPosition: targetCellPosition,
-            isOpen: Boolean(isContextualMenuOpen),
+            isOpen: Boolean(isContextualMenuOpen) && !isResizing,
             pluginConfig: pluginConfig,
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
-          }), allowControls && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+          }), allowControls && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,
@@ -297,8 +303,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -378,7 +378,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props8 = this.props,
         view = _this$props8.view,
         getNode = _this$props8.getNode,
-        tableResizingPluginState = _this$props8.tableResizingPluginState,
+        isResizing = _this$props8.isResizing,
         _this$props8$allowCon = _this$props8.allowControls,
         allowControls = _this$props8$allowCon === void 0 ? true : _this$props8$allowCon,
         isHeaderRowEnabled = _this$props8.isHeaderRowEnabled,
@@ -387,7 +387,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableActive = _this$props8.tableActive,
         containerWidth = _this$props8.containerWidth,
         options = _this$props8.options,
-        getPos = _this$props8.getPos;
+        getPos = _this$props8.getPos,
+        pluginInjectionApi = _this$props8.pluginInjectionApi;
       var _this$state = this.state,
         isLoading = _this$state.isLoading,
         showBeforeShadow = _this$state.showBeforeShadow,
@@ -403,7 +404,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
         tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
       var tableRef = this.table || undefined;
-      var isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
 
       //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
@@ -447,7 +447,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerWidth: containerWidth,
         isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.isFullWidthModeEnabled,
         isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
-        isNested: isNested
+        isNested: isNested,
+        pluginInjectionApi: pluginInjectionApi
       }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -5,9 +5,7 @@ import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-var getMarginLeft = function getMarginLeft(_ref) {
-  var lineLength = _ref.lineLength,
-    tableWidth = _ref.tableWidth;
+var getMarginLeft = function getMarginLeft(lineLength, tableWidth) {
   var marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
     var containerWidth = tableWidth;
@@ -17,11 +15,11 @@ var getMarginLeft = function getMarginLeft(_ref) {
   }
   return marginLeft;
 };
-export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var className = _ref2.className,
-    style = _ref2.style,
-    node = _ref2.node,
-    children = _ref2.children;
+export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    node = _ref.node,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     style: style,
@@ -31,42 +29,47 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     "data-test-id": "table-container"
   }, children);
 });
-export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
-  var children = _ref3.children,
-    className = _ref3.className,
-    node = _ref3.node,
-    lineLength = _ref3.lineLength,
-    containerWidth = _ref3.containerWidth,
-    editorView = _ref3.editorView,
-    getPos = _ref3.getPos,
-    tableRef = _ref3.tableRef;
+export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className,
+    node = _ref2.node,
+    lineLength = _ref2.lineLength,
+    containerWidth = _ref2.containerWidth,
+    editorView = _ref2.editorView,
+    getPos = _ref2.getPos,
+    tableRef = _ref2.tableRef,
+    pluginInjectionApi = _ref2.pluginInjectionApi;
   var containerRef = useRef(null);
   var innerContainerRef = useRef(null);
+  var marginLeftRef = useRef(0);
   var updateWidth = useCallback(function (width) {
     if (!containerRef.current || !innerContainerRef.current) {
       return;
     }
-    var marginLeft = getMarginLeft({
-      lineLength: lineLength,
-      tableWidth: width
-    });
-    if (marginLeft) {
-      containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+    var marginLeft = getMarginLeft(lineLength, width);
+    if (marginLeftRef.current !== marginLeft) {
+      marginLeftRef.current = marginLeft;
+      if (Number.isFinite(marginLeft)) {
+        containerRef.current.style.marginLeft = "".concat(marginLeft, "px");
+      }
     }
   }, [lineLength]);
+  var displayGuideline = useCallback(function (guidelines) {
+    var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4;
+    return (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.guideline) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : (_pluginInjectionApi$d4 = _pluginInjectionApi$d3.actions) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : _pluginInjectionApi$d4.displayGuideline(editorView)({
+      guidelines: guidelines
+    })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
+  }, [pluginInjectionApi, editorView]);
   var tableWidth = getTableContainerWidth(node);
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
-  var marginLeft = getMarginLeft({
-    lineLength: lineLength,
-    tableWidth: width
-  });
+  marginLeftRef.current = getMarginLeft(lineLength, width);
   var maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      marginLeft: marginLeft,
+      marginLeft: marginLeftRef.current,
       width: width
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
@@ -78,26 +81,28 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     editorView: editorView,
     getPos: getPos,
     node: node,
-    tableRef: tableRef
+    tableRef: tableRef,
+    displayGuideline: displayGuideline
   }, /*#__PURE__*/React.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
     node: node
   }, children)));
 };
-export var TableContainer = function TableContainer(_ref4) {
-  var children = _ref4.children,
-    node = _ref4.node,
-    className = _ref4.className,
-    _ref4$containerWidth = _ref4.containerWidth,
-    lineLength = _ref4$containerWidth.lineLength,
-    editorWidth = _ref4$containerWidth.width,
-    isFullWidthModeEnabled = _ref4.isFullWidthModeEnabled,
-    isBreakoutEnabled = _ref4.isBreakoutEnabled,
-    editorView = _ref4.editorView,
-    getPos = _ref4.getPos,
-    tableRef = _ref4.tableRef,
-    isNested = _ref4.isNested;
+export var TableContainer = function TableContainer(_ref3) {
+  var children = _ref3.children,
+    node = _ref3.node,
+    className = _ref3.className,
+    _ref3$containerWidth = _ref3.containerWidth,
+    lineLength = _ref3$containerWidth.lineLength,
+    editorWidth = _ref3$containerWidth.width,
+    isFullWidthModeEnabled = _ref3.isFullWidthModeEnabled,
+    isBreakoutEnabled = _ref3.isBreakoutEnabled,
+    editorView = _ref3.editorView,
+    getPos = _ref3.getPos,
+    tableRef = _ref3.tableRef,
+    isNested = _ref3.isNested,
+    pluginInjectionApi = _ref3.pluginInjectionApi;
   if ((isFullWidthModeEnabled || isBreakoutEnabled) && getBooleanFF('platform.editor.custom-table-width') && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
@@ -106,7 +111,8 @@ export var TableContainer = function TableContainer(_ref4) {
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,
-      tableRef: tableRef
+      tableRef: tableRef,
+      pluginInjectionApi: pluginInjectionApi
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
@@ -115,10 +121,7 @@ export var TableContainer = function TableContainer(_ref4) {
     className: className,
     style: {
       width: tableWidth,
-      marginLeft: getMarginLeft({
-        lineLength: lineLength,
-        tableWidth: tableWidth
-      })
+      marginLeft: getMarginLeft(lineLength, tableWidth)
     }
   }, children);
 };