@atlaskit/editor-plugin-table 2.1.7 → 2.2.0

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

@@ -5,10 +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';
-const getMarginLeft = ({
-  lineLength,
-  tableWidth
-}) => {
+const getMarginLeft = (lineLength, tableWidth) => {
   let marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
     const containerWidth = tableWidth;
@@ -41,35 +38,40 @@ export const ResizableTableContainer = ({
   containerWidth,
   editorView,
   getPos,
-  tableRef
+  tableRef,
+  pluginInjectionApi
 }) => {
   const containerRef = useRef(null);
   const innerContainerRef = useRef(null);
+  const marginLeftRef = useRef(0);
   const updateWidth = useCallback(width => {
     if (!containerRef.current || !innerContainerRef.current) {
       return;
     }
-    const marginLeft = getMarginLeft({
-      lineLength,
-      tableWidth: width
-    });
-    if (marginLeft) {
-      containerRef.current.style.marginLeft = `${marginLeft}px`;
+    const marginLeft = getMarginLeft(lineLength, width);
+    if (marginLeftRef.current !== marginLeft) {
+      marginLeftRef.current = marginLeft;
+      if (Number.isFinite(marginLeft)) {
+        containerRef.current.style.marginLeft = `${marginLeft}px`;
+      }
     }
   }, [lineLength]);
+  const displayGuideline = useCallback(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
+    })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
+  }, [pluginInjectionApi, editorView]);
   const tableWidth = getTableContainerWidth(node);
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
   const width = Math.min(tableWidth, responsiveContainerWidth);
-  const marginLeft = getMarginLeft({
-    lineLength,
-    tableWidth: width
-  });
+  marginLeftRef.current = getMarginLeft(lineLength, width);
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   return /*#__PURE__*/React.createElement("div", {
     style: {
-      marginLeft,
+      marginLeft: marginLeftRef.current,
       width
     },
     className: ClassName.TABLE_RESIZER_CONTAINER,
@@ -81,7 +83,8 @@ export const ResizableTableContainer = ({
     editorView: editorView,
     getPos: getPos,
     node: node,
-    tableRef: tableRef
+    tableRef: tableRef,
+    displayGuideline: displayGuideline
   }, /*#__PURE__*/React.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
@@ -101,7 +104,8 @@ export const TableContainer = ({
   editorView,
   getPos,
   tableRef,
-  isNested
+  isNested,
+  pluginInjectionApi
 }) => {
   if ((isFullWidthModeEnabled || isBreakoutEnabled) && getBooleanFF('platform.editor.custom-table-width') && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -111,7 +115,8 @@ export const TableContainer = ({
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,
-      tableRef: tableRef
+      tableRef: tableRef,
+      pluginInjectionApi: pluginInjectionApi
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
@@ -120,10 +125,7 @@ export const TableContainer = ({
     className: className,
     style: {
       width: tableWidth,
-      marginLeft: getMarginLeft({
-        lineLength: lineLength,
-        tableWidth
-      })
+      marginLeft: getMarginLeft(lineLength, tableWidth)
     }
   }, children);
 };

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -1,7 +1,11 @@
-import React from 'react';
+import React, { useCallback, useRef, useMemo, useState } from 'react';
 import rafSchd from 'raf-schd';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WIDTH } from '../pm-plugins/table-resizing/utils';
+import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
+import { findClosestSnap } from '../utils/snapping';
+import { TABLE_SNAP_GAP, TABLE_HIGHLIGHT_GAP } from '../ui/consts';
 const handles = {
   right: true
 };
@@ -14,7 +18,8 @@ export const TableResizer = ({
   editorView,
   getPos,
   node,
-  tableRef
+  tableRef,
+  displayGuideline
 }) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
@@ -33,13 +38,59 @@ export const TableResizer = ({
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  const currentGap = useRef(0);
+  const [snappingEnabled, setSnappingEnabled] = useState(false);
+  const updateActiveGuidelines = useCallback(({
+    gap,
+    keys
+  }) => {
+    if (gap !== currentGap.current) {
+      currentGap.current = gap;
+      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, defaultGuidelines));
+    }
+  }, [displayGuideline]);
+  const guidelineSnaps = useMemo(() => snappingEnabled ? {
+    x: defaultGuidelineWidths
+  } : undefined, [snappingEnabled]);
+  const handleResizeStart = useCallback(() => {
+    setSnappingEnabled(displayGuideline(defaultGuidelines));
+    return width;
+  }, [width, displayGuideline]);
+  const handleResizeStop = useCallback((originalState, delta) => {
+    const newWidth = originalState.width + delta.width;
+    const {
+      state,
+      dispatch
+    } = editorView;
+    const pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    let tr = state.tr.setNodeMarkup(pos, undefined, {
+      ...node.attrs,
+      width: newWidth
+    });
+    const newNode = tr.doc.nodeAt(pos);
+    tr = scaleTable(tableRef, {
+      node: newNode,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView))(tr);
+    dispatch(tr);
+
+    // Hide guidelines when resizing stops
+    displayGuideline([]);
+    updateWidth(newWidth);
+    return newWidth;
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline]);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
-    handleResizeStart: () => width,
+    handleResizeStart: handleResizeStart,
     handleResize: rafSchd((originalState, delta) => {
       const newWidth = originalState.width + delta.width;
       const pos = getPos();
@@ -52,36 +103,15 @@ export const TableResizer = ({
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView));
+      updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
       updateWidth(newWidth);
       return newWidth;
     }),
-    handleResizeStop: (originalState, delta) => {
-      const newWidth = originalState.width + delta.width;
-      const {
-        state,
-        dispatch
-      } = editorView;
-      const pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      let tr = state.tr.setNodeMarkup(pos, undefined, {
-        ...node.attrs,
-        width: newWidth
-      });
-      const newNode = tr.doc.nodeAt(pos);
-      tr = scaleTable(tableRef, {
-        node: newNode,
-        prevNode: node,
-        start: pos + 1,
-        parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView))(tr);
-      dispatch(tr);
-      updateWidth(newWidth);
-      return newWidth;
-    },
+    handleResizeStop: handleResizeStop,
     resizeRatio: 2,
     minWidth: minColumnWidth,
-    maxWidth: maxWidth
+    maxWidth: maxWidth,
+    snapGap: TABLE_SNAP_GAP,
+    snap: guidelineSnaps
   }, children);
 };

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

@@ -112,7 +112,8 @@ export default class TableView extends ReactNodeView {
           getNode: this.getNode,
           containerWidth: containerWidth,
           contentDOM: forwardRef,
-          getEditorFeatureFlags: props.getEditorFeatureFlags
+          getEditorFeatureFlags: props.getEditorFeatureFlags,
+          pluginInjectionApi: props.pluginInjectionApi
         });
       }
     });
@@ -176,7 +177,7 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) => {
   const {
     pluginConfig
   } = getPluginState(view.state);
@@ -198,6 +199,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     tableRenderOptimization,
     getEditorContainerWidth,
     getEditorFeatureFlags,
-    hasIntlContext
+    hasIntlContext,
+    pluginInjectionApi
   }).init();
 };

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

@@ -1,5 +1,8 @@
 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';

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/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.2.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

@@ -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',

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

@@ -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,
@@ -447,7 +448,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);
 };