@atlaskit/editor-plugin-table 2.1.7 → 2.2.0

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

@@ -1,10 +1,15 @@
 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 { 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 +22,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 +41,60 @@ 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 () {
+    setSnappingEnabled(displayGuideline(defaultGuidelines));
+    return width;
+  }, [width, displayGuideline]);
+  var handleResizeStop = 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 = 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 +107,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

@@ -133,7 +133,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             getNode: _this3.getNode,
             containerWidth: containerWidth,
             contentDOM: forwardRef,
-            getEditorFeatureFlags: props.getEditorFeatureFlags
+            getEditorFeatureFlags: props.getEditorFeatureFlags,
+            pluginInjectionApi: props.pluginInjectionApi
           });
         }
       });
@@ -202,7 +203,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 +222,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,5 +1,8 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from 'prosemirror-state';
+import { PluginKey
+
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+} from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
 import { pluginKey as tablePluginKey } from '../plugin-key';

package/dist/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/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.2.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 { ColumnResizingPluginState, ShadowEvent, PluginInjectionAPI } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import type { TableOptions } from './types';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
@@ -25,6 +25,7 @@ export interface ComponentProps {
     ordering: TableColumnOrdering;
     tableResizingPluginState?: ColumnResizingPluginState;
     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/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/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;

package/dist/types-ts4.5/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 { ColumnResizingPluginState, ShadowEvent, PluginInjectionAPI } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import type { TableOptions } from './types';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
@@ -25,6 +25,7 @@ export interface ComponentProps {
     ordering: TableColumnOrdering;
     tableResizingPluginState?: ColumnResizingPluginState;
     getEditorFeatureFlags: GetEditorFeatureFlags;
+    pluginInjectionApi?: PluginInjectionAPI;
 }
 interface TableState {
     scroll: number;

package/dist/types-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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-ts4.5/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.1.7",
+  "version": "2.2.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.2.0",
-    "@atlaskit/editor-common": "^74.21.0",
+    "@atlaskit/editor-common": "^74.22.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",
@@ -64,6 +64,7 @@
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
+    "@atlaskit/editor-plugin-guideline": "^0.3.4",
     "@atlaskit/editor-plugin-hyperlink": "^0.1.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",