@atlaskit/editor-plugin-table 2.1.7 → 2.3.0

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/pm-plugins/{table-add-width.js → table-width.js}

@@ -4,22 +4,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPlugin = void 0;
+exports.pluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _steps = require("@atlaskit/adf-schema/steps");
 var _prosemirrorTransform = require("prosemirror-transform");
+var _prosemirrorState = require("prosemirror-state");
 var _excluded = ["width"];
 /**
- * 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
  */
 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 createPlugin = function createPlugin(fullWidthEnabled) {
+var pluginKey = new _prosemirrorState.PluginKey('tableWidthPlugin');
+exports.pluginKey = pluginKey;
+var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
   return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          resizing: false
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta && meta.resizing !== pluginState.resizing) {
+          var newState = {
+            resizing: meta.resizing
+          };
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return pluginState;
+      }
+    },
     appendTransaction: function 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/cjs/plugins/table/toolbar.js

@@ -13,6 +13,7 @@ var _commands = require("./commands");
 var _commandsWithAnalytics = require("./commands-with-analytics");
 var _pluginFactory = require("./pm-plugins/plugin-factory");
 var _tableResizing = require("./pm-plugins/table-resizing");
+var _tableWidth = require("./pm-plugins/table-width");
 var _types = require("./types");
 var _utils = require("./utils");
 var _utils2 = require("@atlaskit/editor-common/utils");
@@ -302,7 +303,11 @@ var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editor
       var tableObject = (0, _utils3.findTable)(state.selection);
       var pluginState = (0, _pluginFactory.getPluginState)(state);
       var resizeState = _tableResizing.pluginKey.getState(state);
-      if (tableObject && pluginState.editorHasFocus) {
+      var tableWidthState = _tableWidth.pluginKey.getState(state);
+
+      // We don't want to show floating toolbar while resizing the table
+      var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
+      if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var _ref3 = getEditorFeatureFlags() || {},

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.3.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

@@ -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';
@@ -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',
@@ -155,8 +155,13 @@ const tablesPlugin = (options, api) => {
           dispatch
         }) => createTableLocalIdPlugin(dispatch)
       }, {
-        name: 'tableAddWidth',
-        plugin: () => getBooleanFF('platform.editor.custom-table-width') && options ? createTableAddWidthPlugin(options.fullWidthEnabled || false) : undefined
+        name: 'tableWidth',
+        plugin: ({
+          dispatch
+        }) => {
+          var _options$fullWidthEna;
+          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',
         plugin: () => {
@@ -199,18 +204,22 @@ const tablesPlugin = (options, api) => {
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
           tablePluginState: pluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
         render: ({
           tableResizingPluginState: resizingPluginState,
           stickyHeadersState,
-          tablePluginState
+          tablePluginState,
+          tableWidthPluginState
         }) => {
           const {
             state
           } = editorView;
-          const isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
+          const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+          const isResizing = isColumnResizing || isTableResizing;
           const {
             tableNode,
             tablePos,
@@ -240,7 +249,7 @@ const 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,
@@ -267,17 +276,17 @@ const 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,

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

@@ -376,7 +376,7 @@ class TableComponent extends React.Component {
     const {
       view,
       getNode,
-      tableResizingPluginState,
+      isResizing,
       allowControls = true,
       isHeaderRowEnabled,
       ordering,
@@ -384,7 +384,8 @@ class TableComponent extends React.Component {
       tableActive,
       containerWidth,
       options,
-      getPos
+      getPos,
+      pluginInjectionApi
     } = this.props;
     const {
       isLoading,
@@ -404,7 +405,6 @@ class TableComponent extends React.Component {
       tableOverflowShadowsOptimization
     } = this.props.getEditorFeatureFlags();
     const tableRef = this.table || undefined;
-    const isResizing = !!tableResizingPluginState && !!tableResizingPluginState.dragging;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
 
     //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
@@ -452,7 +452,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"

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,12 @@
-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 { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
+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 +19,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 +39,70 @@ 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(() => {
+    const {
+      dispatch,
+      state: {
+        tr
+      }
+    } = editorView;
+    dispatch(tr.setMeta(tableWidthPluginKey, {
+      resizing: true
+    }));
+    setSnappingEnabled(displayGuideline(defaultGuidelines));
+    return width;
+  }, [width, displayGuideline, editorView]);
+  const handleResizeStop = useCallback((originalState, delta) => {
+    const newWidth = originalState.width + delta.width;
+    const {
+      state,
+      dispatch
+    } = editorView;
+    const pos = getPos();
+    let tr = state.tr.setMeta(tableWidthPluginKey, {
+      resizing: false
+    });
+    if (typeof pos === 'number') {
+      tr = 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 +115,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

@@ -7,6 +7,7 @@ import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
@@ -83,6 +84,7 @@ export default class TableView extends ReactNodeView {
       plugins: {
         pluginState: pluginKey,
         tableResizingPluginState: tableResizingPluginKey,
+        tableWidthPluginState: tableWidthPluginKey,
         widthPlugin: fakePluginKey,
         mediaState: fakeMediaPluginKey
       },
@@ -90,12 +92,15 @@ export default class TableView extends ReactNodeView {
       render: pluginStates => {
         const {
           tableResizingPluginState,
+          tableWidthPluginState,
           pluginState,
           // containerWidth,
           mediaState
         } = pluginStates;
-        const tableActive = props.getPos() === pluginState.tablePos;
         const containerWidth = props.getEditorContainerWidth();
+        const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+        const isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
+        const tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
         return /*#__PURE__*/React.createElement(TableComponent, {
           view: props.view,
           allowColumnResizing: props.allowColumnResizing,
@@ -108,11 +113,12 @@ export default class TableView extends ReactNodeView {
           isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
           tableActive: tableActive,
           ordering: pluginState.ordering,
-          tableResizingPluginState: tableResizingPluginState,
+          isResizing: isResizing,
           getNode: this.getNode,
           containerWidth: containerWidth,
           contentDOM: forwardRef,
-          getEditorFeatureFlags: props.getEditorFeatureFlags
+          getEditorFeatureFlags: props.getEditorFeatureFlags,
+          pluginInjectionApi: props.pluginInjectionApi
         });
       }
     });
@@ -176,7 +182,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 +204,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     tableRenderOptimization,
     getEditorContainerWidth,
     getEditorFeatureFlags,
-    hasIntlContext
+    hasIntlContext,
+    pluginInjectionApi
   }).init();
 };