@atlaskit/editor-plugin-table 2.1.7 → 2.3.0

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

@@ -1,10 +1,16 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; }
-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';
 var handles = {
   right: true
 };
@@ -17,7 +23,8 @@ export 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 = getColgroupChildrenLength(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
@@ -35,15 +42,67 @@ export var TableResizer = function TableResizer(_ref) {
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  var currentGap = useRef(0);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    snappingEnabled = _useState2[0],
+    setSnappingEnabled = _useState2[1];
+  var updateActiveGuidelines = useCallback(function (_ref2) {
+    var gap = _ref2.gap,
+      keys = _ref2.keys;
+    if (gap !== currentGap.current) {
+      currentGap.current = gap;
+      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, defaultGuidelines));
+    }
+  }, [displayGuideline]);
+  var guidelineSnaps = useMemo(function () {
+    return snappingEnabled ? {
+      x: defaultGuidelineWidths
+    } : undefined;
+  }, [snappingEnabled]);
+  var handleResizeStart = useCallback(function () {
+    var dispatch = editorView.dispatch,
+      tr = editorView.state.tr;
+    dispatch(tr.setMeta(tableWidthPluginKey, {
+      resizing: true
+    }));
+    setSnappingEnabled(displayGuideline(defaultGuidelines));
+    return width;
+  }, [width, displayGuideline, editorView]);
+  var handleResizeStop = useCallback(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var pos = getPos();
+    var tr = state.tr.setMeta(tableWidthPluginKey, {
+      resizing: false
+    });
+    if (typeof pos === 'number') {
+      tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
+        width: newWidth
+      }));
+      var 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: function handleResizeStart() {
-      return width;
-    },
+    handleResizeStart: handleResizeStart,
     handleResize: rafSchd(function (originalState, delta) {
       var newWidth = originalState.width + delta.width;
       var pos = getPos();
@@ -56,33 +115,15 @@ export var TableResizer = function TableResizer(_ref) {
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView));
+      updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, 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 = 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/esm/plugins/table/nodeviews/table.js

@@ -18,6 +18,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';
@@ -107,16 +108,20 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         plugins: {
           pluginState: pluginKey,
           tableResizingPluginState: tableResizingPluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           widthPlugin: fakePluginKey,
           mediaState: fakeMediaPluginKey
         },
         editorView: props.view,
         render: function render(pluginStates) {
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
+            tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
             mediaState = pluginStates.mediaState;
-          var tableActive = props.getPos() === pluginState.tablePos;
           var containerWidth = props.getEditorContainerWidth();
+          var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
+          var isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
+          var tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
           return /*#__PURE__*/React.createElement(TableComponent, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,
@@ -129,11 +134,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
-            tableResizingPluginState: tableResizingPluginState,
+            isResizing: isResizing,
             getNode: _this3.getNode,
             containerWidth: containerWidth,
             contentDOM: forwardRef,
-            getEditorFeatureFlags: props.getEditorFeatureFlags
+            getEditorFeatureFlags: props.getEditorFeatureFlags,
+            pluginInjectionApi: props.pluginInjectionApi
           });
         }
       });
@@ -202,7 +208,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(ReactNodeView);
 export { TableView as default };
-export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags) {
+export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, options, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
   var _getPluginState2 = getPluginState(view.state),
     pluginConfig = _getPluginState2.pluginConfig;
   var _getPluginConfig = getPluginConfig(pluginConfig),
@@ -221,6 +227,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
     tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
-    hasIntlContext: hasIntlContext
+    hasIntlContext: hasIntlContext,
+    pluginInjectionApi: pluginInjectionApi
   }).init();
 };

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

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

package/dist/esm/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/esm/plugins/table/pm-plugins/main.js

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

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

@@ -1,6 +1,8 @@
 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; }
+// @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/esm/plugins/table/pm-plugins/{table-add-width.js → table-width.js}

@@ -4,15 +4,37 @@ var _excluded = ["width"];
 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; }
 /**
- * A plugin for scan the document, add width value to table's width attribute when necessary
- *
+ * A plugin for handle table custom widths
+ * Has login to scan the document, add width value to table's width attribute when necessary
+ * Also holds resizing state to hide / show table controls
  */
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReplaceStep } from 'prosemirror-transform';
-var createPlugin = function createPlugin(fullWidthEnabled) {
+import { PluginKey } from 'prosemirror-state';
+export var pluginKey = new PluginKey('tableWidthPlugin');
+var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
   return new 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/esm/plugins/table/toolbar.js

@@ -7,6 +7,7 @@ import { clearHoverSelection, hoverTable, hoverColumns, hoverRows, removeDescend
 import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
+import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { TableCssClassName } from './types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from './utils';
 import { isReferencedSource, getChildrenInfo as _getChildrenInfo, getNodeName } from '@atlaskit/editor-common/utils';
@@ -293,7 +294,11 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       var tableObject = findTable(state.selection);
       var pluginState = getPluginState(state);
       var resizeState = tableResizingPluginKey.getState(state);
-      if (tableObject && pluginState.editorHasFocus) {
+      var tableWidthState = tableWidthPluginKey.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/esm/plugins/table/ui/consts.js

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

package/dist/esm/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';
 var bail = function bail() {

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

@@ -1,4 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+// @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/esm/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 var defaultGuidelineWidths = [akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth];
+export var defaultGuidelines = createFixedGuidelinesFromLengths(defaultGuidelineWidths);

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

@@ -0,0 +1,30 @@
+/**
+ * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ */
+export 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: []
+  };
+};

package/dist/esm/version.json

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

package/dist/types/plugins/table/index.d.ts

@@ -6,6 +6,7 @@ import type { GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-c
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 interface TablePluginOptions {
     tableOptions: PluginConfig;
     breakoutEnabled?: boolean;
@@ -24,7 +25,8 @@ declare const tablesPlugin: NextEditorPlugin<'table', {
     dependencies: [
         typeof analyticsPlugin,
         typeof contentInsertionPlugin,
-        typeof widthPlugin
+        typeof widthPlugin,
+        typeof guidelinePlugin
     ];
 }>;
 export default tablesPlugin;

package/dist/types/plugins/table/nodeviews/TableComponent.d.ts

@@ -4,7 +4,7 @@ import { EditorView } from 'prosemirror-view';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { ColumnResizingPluginState, ShadowEvent } from '../types';
+import { PluginInjectionAPI, ShadowEvent } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import type { TableOptions } from './types';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
@@ -23,8 +23,9 @@ export interface ComponentProps {
     isMediaFullscreen?: boolean;
     tableActive: boolean;
     ordering: TableColumnOrdering;
-    tableResizingPluginState?: ColumnResizingPluginState;
+    isResizing?: boolean;
     getEditorFeatureFlags: GetEditorFeatureFlags;
+    pluginInjectionApi?: PluginInjectionAPI;
 }
 interface TableState {
     scroll: number;

package/dist/types/plugins/table/nodeviews/TableContainer.d.ts

@@ -2,6 +2,7 @@ import React, { PropsWithChildren } from 'react';
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import { PluginInjectionAPI } from '../types';
 type InnerContainerProps = {
     className: string;
     style?: {
@@ -21,8 +22,9 @@ type ResizableTableContainerProps = {
     editorView: EditorView;
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
+    pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
+export declare const ResizableTableContainer: ({ children, className, node, lineLength, containerWidth, editorView, getPos, tableRef, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -33,6 +35,7 @@ type TableContainerProps = {
     getPos: () => number | undefined;
     tableRef: HTMLTableElement;
     isNested: boolean;
+    pluginInjectionApi?: PluginInjectionAPI;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isFullWidthModeEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isFullWidthModeEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { EditorView } from 'prosemirror-view';
 import { Node as PMNode } from 'prosemirror-model';
+import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
@@ -9,6 +10,7 @@ interface TableResizerProps {
     getPos: () => number | undefined;
     node: PMNode;
     tableRef: HTMLTableElement;
+    displayGuideline: (guideline: GuidelineConfig[]) => boolean;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/dist/types/plugins/table/nodeviews/table.d.ts

@@ -7,6 +7,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { Props, TableOptions } from './types';
+import { PluginInjectionAPI } from '../types';
 type ForwardRef = (node: HTMLElement | null) => void;
 export default class TableView extends ReactNodeView<Props> {
     private table;
@@ -30,5 +31,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: TableOptions, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, options: TableOptions, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, pluginInjectionApi?: PluginInjectionAPI) => NodeView;
 export {};

package/dist/types/plugins/table/nodeviews/types.d.ts

@@ -3,6 +3,7 @@ import { EditorView } from 'prosemirror-view';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import type { PluginInjectionAPI } from '../types';
 export type TableOptions = {
     isBreakoutEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
@@ -21,4 +22,5 @@ export interface Props {
     getEditorContainerWidth: GetEditorContainerWidth;
     getEditorFeatureFlags: GetEditorFeatureFlags;
     hasIntlContext: boolean;
+    pluginInjectionApi?: PluginInjectionAPI;
 }

package/dist/types/plugins/table/pm-plugins/decorations/plugin.d.ts

@@ -3,5 +3,5 @@ import { EditorState, PluginKey, Transaction, ReadonlyTransaction } from 'prosem
 import { DecorationSet } from 'prosemirror-view';
 export declare const pluginKey: PluginKey<any>;
 export declare const getDecorations: (state: EditorState) => DecorationSet;
-export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState) => DecorationSet;
+export declare const handleDocOrSelectionChanged: (tr: Transaction | ReadonlyTransaction, decorationSet: DecorationSet, oldState: EditorState, newState: EditorState) => DecorationSet;
 export declare const createPlugin: () => SafePlugin<any>;

package/dist/types/plugins/table/pm-plugins/main.d.ts

@@ -5,4 +5,5 @@ import { PluginConfig } from '../types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => SafePlugin<import("../types").TablePluginState>;
+import type { PluginInjectionAPI } from '../types';
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, breakoutEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI) => SafePlugin<import("../types").TablePluginState>;

package/dist/types/plugins/table/pm-plugins/table-width.d.ts

@@ -0,0 +1,16 @@
+/**
+ * A plugin for handle table custom widths
+ * Has login to scan the document, add width value to table's width attribute when necessary
+ * Also holds resizing state to hide / show table controls
+ */
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+type TableWidthPluginState = {
+    resizing: boolean;
+};
+export declare const pluginKey: PluginKey<TableWidthPluginState>;
+declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<{
+    resizing: boolean;
+}>;
+export { createPlugin };

package/dist/types/plugins/table/types.d.ts

@@ -6,6 +6,8 @@ import { IntlShape } from 'react-intl-next';
 import { TableLayout } from '@atlaskit/adf-schema';
 import { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type tablePlugin from './index';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
 export type PermittedLayoutsDescriptor = TableLayout[] | 'all';
@@ -19,6 +21,7 @@ export interface InsertRowOptions {
     index: number;
     moveCursorToInsertedRow: boolean;
 }
+export type PluginInjectionAPI = ExtractInjectionAPI<typeof tablePlugin>;
 export type InsertRowMethods = INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB;
 export interface PluginConfig {
     advanced?: boolean;

package/dist/types/plugins/table/ui/consts.d.ts

@@ -38,3 +38,5 @@ export declare const contextualMenuDropdownWidth = 180;
 export declare const stickyRowZIndex: number;
 export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
+export declare const TABLE_SNAP_GAP = 5;
+export declare const TABLE_HIGHLIGHT_GAP = 10;

package/dist/types/plugins/table/utils/guidelines.d.ts

@@ -0,0 +1,3 @@
+import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+export declare const defaultGuidelineWidths: number[];
+export declare const defaultGuidelines: GuidelineConfig[];

package/dist/types/plugins/table/utils/snapping.d.ts

@@ -0,0 +1,8 @@
+import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+/**
+ * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ */
+export declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number) => {
+    gap: number;
+    keys: string[];
+};

package/dist/types-ts4.5/plugins/table/index.d.ts

@@ -6,6 +6,7 @@ import type { GetEditorFeatureFlags, NextEditorPlugin } from '@atlaskit/editor-c
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 interface TablePluginOptions {
     tableOptions: PluginConfig;
     breakoutEnabled?: boolean;
@@ -24,7 +25,8 @@ declare const tablesPlugin: NextEditorPlugin<'table', {
     dependencies: [
         typeof analyticsPlugin,
         typeof contentInsertionPlugin,
-        typeof widthPlugin
+        typeof widthPlugin,
+        typeof guidelinePlugin
     ];
 }>;
 export default tablesPlugin;