@atlaskit/editor-plugin-table 2.1.7 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 2.2.0
+
+### Minor Changes
+
+- [`464745a92e6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/464745a92e6) - [ux] Updated the Editor Table plugin to use the new guidelines plugin when custom-table-widths FF is enabled
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.1.7
 
 ### Patch Changes

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

@@ -16,6 +16,7 @@ var _steps = require("@atlaskit/adf-schema/steps");
 var _nodes = require("./utils/nodes");
 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) { (0, _defineProperty2.default)(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
 // #endregion
 var nextTableSorting = function nextTableSorting(tr, table) {
   var tableSortStep = tr.steps.find(function (step) {

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

@@ -103,7 +103,7 @@ var tablesPlugin = function tablesPlugin(options, api) {
             breakoutEnabled = _ref2.breakoutEnabled,
             tableOptions = _ref2.tableOptions,
             getEditorFeatureFlags = _ref2.getEditorFeatureFlags;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, breakoutEnabled, fullWidthEnabled, wasFullWidthEnabled, editorAnalyticsAPI, api);
         }
       }, {
         name: 'tablePMColResizing',

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

@@ -393,7 +393,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,
@@ -453,7 +454,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.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

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

@@ -14,9 +14,7 @@ var _TableResizer = require("./TableResizer");
 var _utils = require("../pm-plugins/table-resizing/utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-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;
@@ -26,11 +24,11 @@ var getMarginLeft = function getMarginLeft(_ref) {
   }
   return marginLeft;
 };
-var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var className = _ref2.className,
-    style = _ref2.style,
-    node = _ref2.node,
-    children = _ref2.children;
+var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    style = _ref.style,
+    node = _ref.node,
+    children = _ref.children;
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     style: style,
@@ -41,42 +39,47 @@ var InnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   }, children);
 });
 exports.InnerContainer = InnerContainer;
-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;
+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 = (0, _react.useRef)(null);
   var innerContainerRef = (0, _react.useRef)(null);
+  var marginLeftRef = (0, _react.useRef)(0);
   var updateWidth = (0, _react.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 = (0, _react.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 = (0, _nodeWidth.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, _utils.TABLE_MAX_WIDTH);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginLeft: marginLeft,
+      marginLeft: marginLeftRef.current,
       width: width
     },
     className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
@@ -88,7 +91,8 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
     editorView: editorView,
     getPos: getPos,
     node: node,
-    tableRef: tableRef
+    tableRef: tableRef,
+    displayGuideline: displayGuideline
   }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     ref: innerContainerRef,
     className: className,
@@ -96,19 +100,20 @@ var ResizableTableContainer = function ResizableTableContainer(_ref3) {
   }, children)));
 };
 exports.ResizableTableContainer = ResizableTableContainer;
-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;
+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) && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -117,7 +122,8 @@ var TableContainer = function TableContainer(_ref4) {
       containerWidth: editorWidth,
       editorView: editorView,
       getPos: getPos,
-      tableRef: tableRef
+      tableRef: tableRef,
+      pluginInjectionApi: pluginInjectionApi
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';
@@ -126,10 +132,7 @@ var TableContainer = function TableContainer(_ref4) {
     className: className,
     style: {
       width: tableWidth,
-      marginLeft: getMarginLeft({
-        lineLength: lineLength,
-        tableWidth: tableWidth
-      })
+      marginLeft: getMarginLeft(lineLength, tableWidth)
     }
   }, children);
 };

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

@@ -1,15 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableResizer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _guideline = require("@atlaskit/editor-common/guideline");
 var _utils = require("../pm-plugins/table-resizing/utils");
+var _guidelines = require("../utils/guidelines");
+var _snapping = require("../utils/snapping");
+var _consts = require("../ui/consts");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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) { (0, _defineProperty2.default)(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; }
 var handles = {
@@ -24,7 +32,8 @@ var TableResizer = function TableResizer(_ref) {
     editorView = _ref.editorView,
     getPos = _ref.getPos,
     node = _ref.node,
-    tableRef = _ref.tableRef;
+    tableRef = _ref.tableRef,
+    displayGuideline = _ref.displayGuideline;
   var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
@@ -42,15 +51,60 @@ var TableResizer = function TableResizer(_ref) {
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  var currentGap = (0, _react.useRef)(0);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    snappingEnabled = _useState2[0],
+    setSnappingEnabled = _useState2[1];
+  var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
+    var gap = _ref2.gap,
+      keys = _ref2.keys;
+    if (gap !== currentGap.current) {
+      currentGap.current = gap;
+      displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, _guidelines.defaultGuidelines));
+    }
+  }, [displayGuideline]);
+  var guidelineSnaps = (0, _react.useMemo)(function () {
+    return snappingEnabled ? {
+      x: _guidelines.defaultGuidelineWidths
+    } : undefined;
+  }, [snappingEnabled]);
+  var handleResizeStart = (0, _react.useCallback)(function () {
+    setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
+    return width;
+  }, [width, displayGuideline]);
+  var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+      width: newWidth
+    }));
+    var newNode = tr.doc.nodeAt(pos);
+    tr = (0, _utils.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.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
-    handleResizeStart: function handleResizeStart() {
-      return width;
-    },
+    handleResizeStart: handleResizeStart,
     handleResize: (0, _rafSchd.default)(function (originalState, delta) {
       var newWidth = originalState.width + delta.width;
       var pos = getPos();
@@ -63,34 +117,16 @@ var TableResizer = function TableResizer(_ref) {
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView));
+      updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
       updateWidth(newWidth);
       return newWidth;
     }),
-    handleResizeStop: function handleResizeStop(originalState, delta) {
-      var newWidth = originalState.width + delta.width;
-      var state = editorView.state,
-        dispatch = editorView.dispatch;
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
-        width: newWidth
-      }));
-      var newNode = tr.doc.nodeAt(pos);
-      tr = (0, _utils.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: _consts.TABLE_SNAP_GAP,
+    snap: guidelineSnaps
   }, children);
 };
 exports.TableResizer = TableResizer;

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

@@ -140,7 +140,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             getNode: _this3.getNode,
             containerWidth: containerWidth,
             contentDOM: forwardRef,
-            getEditorFeatureFlags: props.getEditorFeatureFlags
+            getEditorFeatureFlags: props.getEditorFeatureFlags,
+            pluginInjectionApi: props.pluginInjectionApi
           });
         }
       });
@@ -209,7 +210,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(_reactNodeView.default);
 exports.default = TableView;
-var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) {
+var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig;
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
@@ -228,7 +229,8 @@ var createTableView = function createTableView(node, view, getPos, portalProvide
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
-    hasIntlContext: hasIntlContext
+    hasIntlContext: hasIntlContext,
+    pluginInjectionApi: pluginInjectionApi
   }).init();
 };
 exports.createTableView = createTableView;

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

@@ -9,6 +9,8 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../../types");
 var _decoration = require("../../../utils/decoration");
 var _composeDecorations = require("./compose-decorations");
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 var isColumnSelected = function isColumnSelected(tr) {
   return tr.selection instanceof _cellSelection.CellSelection && tr.selection.isColSelection();
 };

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

@@ -31,7 +31,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var isBreakoutEnabled;
 var isFullWidthModeEnabled;
 var wasFullWidthModeEnabled;
-var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI) {
+var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, breakoutEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, editorAnalyticsAPI, pluginInjectionApi) {
   var _window;
   isBreakoutEnabled = breakoutEnabled;
   isFullWidthModeEnabled = fullWidthModeEnabled;
@@ -236,7 +236,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
             isBreakoutEnabled: isBreakoutEnabled,
             isFullWidthModeEnabled: isFullWidthModeEnabled,
             wasFullWidthModeEnabled: wasFullWidthModeEnabled
-          }, getEditorContainerWidth, getEditorFeatureFlags);
+          }, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi);
         }
       }),
       handleDOMEvents: {

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

@@ -10,7 +10,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _pluginKey = require("./plugin-key");
 var _reducer = _interopRequireDefault(require("./reducer"));
 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) { (0, _defineProperty2.default)(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; }
+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) { (0, _defineProperty2.default)(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; } // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 function mapping(tr, pluginState) {
   if (pluginState && pluginState.resizeHandlePos !== null) {
     return _objectSpread(_objectSpread({}, pluginState), {}, {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedColor = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedColor = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_GAP = void 0;
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -104,4 +104,8 @@ exports.stickyRowZIndex = stickyRowZIndex;
 var stickyRowOffsetTop = 8;
 exports.stickyRowOffsetTop = stickyRowOffsetTop;
 var stickyHeaderBorderBottomWidth = 1;
-exports.stickyHeaderBorderBottomWidth = stickyHeaderBorderBottomWidth;
+exports.stickyHeaderBorderBottomWidth = stickyHeaderBorderBottomWidth;
+var TABLE_SNAP_GAP = 5;
+exports.TABLE_SNAP_GAP = TABLE_SNAP_GAP;
+var TABLE_HIGHLIGHT_GAP = 10;
+exports.TABLE_HIGHLIGHT_GAP = TABLE_HIGHLIGHT_GAP;

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

@@ -7,6 +7,8 @@ exports.isTableCollapsible = exports.collapseSelectedTable = void 0;
 var _prosemirrorModel = require("prosemirror-model");
 var _prosemirrorTransform = require("prosemirror-transform");
 var _utils = require("@atlaskit/editor-tables/utils");
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 var bail = function bail() {
   return {
     tableIsCollapsible: false

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

@@ -11,6 +11,8 @@ var _utils = require("@atlaskit/editor-tables/utils");
 var _prosemirrorView = require("prosemirror-view");
 var _utils2 = require("@atlaskit/editor-common/utils");
 var _types = require("../types");
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
 var filterDecorationByKey = function filterDecorationByKey(key, decorationSet) {
   return decorationSet.find(undefined, undefined, function (spec) {
     return spec.key.indexOf(key) > -1;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultGuidelines = exports.defaultGuidelineWidths = void 0;
+var _guideline = require("@atlaskit/editor-common/guideline");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var defaultGuidelineWidths = [_editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorWideLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth];
+exports.defaultGuidelineWidths = defaultGuidelineWidths;
+var defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)(defaultGuidelineWidths);
+exports.defaultGuidelines = defaultGuidelines;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findClosestSnap = void 0;
+/**
+ * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ */
+var findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guidelines) {
+  var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var closestGapIndex = snapWidths.reduce(function (prev, curr, index) {
+    return Math.abs(curr - currentWidth) < Math.abs(snapWidths[prev] - currentWidth) ? index : prev;
+  }, 0);
+  var gap = Math.abs(snapWidths[closestGapIndex] - currentWidth);
+  if (gap < snapGap) {
+    var snappingWidth = Math.round(snapWidths[closestGapIndex]);
+    var guidelineKeys = guidelines.reduce(function (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: gap,
+      keys: guidelineKeys
+    };
+  }
+  return {
+    gap: gap,
+    keys: []
+  };
+};
+exports.findClosestSnap = findClosestSnap;

package/dist/cjs/version.json

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

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

@@ -1,4 +1,5 @@
 // #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/es2019/plugins/table/index.js

@@ -94,7 +94,7 @@ const tablesPlugin = (options, api) => {
             tableOptions,
             getEditorFeatureFlags
           } = options || {};
-          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/es2019/plugins/table/nodeviews/TableComponent.js

@@ -384,7 +384,8 @@ class TableComponent extends React.Component {
       tableActive,
       containerWidth,
       options,
-      getPos
+      getPos,
+      pluginInjectionApi
     } = this.props;
     const {
       isLoading,
@@ -452,7 +453,8 @@ class TableComponent extends 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"