@atlaskit/editor-plugin-table 2.1.7 → 2.2.0

package/src/__tests__/unit/undo-redo.ts

@@ -25,6 +25,7 @@ import sendKeyToPm from '@atlaskit/editor-test-helpers/send-key-to-pm';
 import clone from 'lodash/clone';
 import tablePlugin from '../../plugins/table';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
@@ -66,6 +67,7 @@ describe('undo/redo with tables', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add([tablePlugin, { tableOptions }]),
       pluginKey: tablePluginKey,
     });

package/src/__tests__/unit/utils/collapse.ts

@@ -13,6 +13,7 @@ import {
 
 import tablePlugin from '../../../plugins/table';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 import { isTableCollapsible } from '../../../plugins/table/utils/collapse';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
@@ -28,6 +29,7 @@ describe('collapse', () => {
       .add([analyticsPlugin, {}])
       .add(contentInsertionPlugin)
       .add(widthPlugin)
+      .add(guidelinePlugin)
       .add(tablePlugin);
 
     return createEditor({ doc, preset });

package/src/__tests__/unit/utils/nodes.ts

@@ -22,6 +22,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('table merging logic', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -34,6 +35,7 @@ describe('table merging logic', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils/row-controls.ts

@@ -23,6 +23,7 @@ import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 const TABLE_LOCAL_ID = 'test-table-local-id';
 
@@ -44,6 +45,7 @@ describe('table plugin: utils/row-controls.js', () => {
         .add([analyticsPlugin, {}])
         .add(contentInsertionPlugin)
         .add(widthPlugin)
+        .add(guidelinePlugin)
         .add(tablePlugin),
       pluginKey,
     });

package/src/__tests__/unit/utils.ts

@@ -32,6 +32,7 @@ import { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
 import { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { widthPlugin } from '@atlaskit/editor-plugin-width';
+import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 describe('table plugin: utils', () => {
   const createEditor = createProsemirrorEditorFactory();
@@ -40,6 +41,7 @@ describe('table plugin: utils', () => {
     .add([analyticsPlugin, {}])
     .add(contentInsertionPlugin)
     .add(widthPlugin)
+    .add(guidelinePlugin)
     .add(tablePlugin);
 
   const editor = (doc: DocBuilder) =>

package/src/plugins/table/handlers.ts

@@ -1,4 +1,5 @@
 // #region Imports
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { ContentNodeWithPos, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';

package/src/plugins/table/index.tsx

@@ -71,6 +71,7 @@ import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 
 interface TablePluginOptions {
   tableOptions: PluginConfig;
@@ -98,6 +99,7 @@ const tablesPlugin: NextEditorPlugin<
       typeof analyticsPlugin,
       typeof contentInsertionPlugin,
       typeof widthPlugin,
+      typeof guidelinePlugin,
     ];
   }
 > = (options?: TablePluginOptions, api?) => {
@@ -172,13 +174,13 @@ const tablesPlugin: NextEditorPlugin<
               portalProviderAPI,
               eventDispatcher,
               pluginConfig(tableOptions),
-
               defaultGetEditorContainerWidth,
               getEditorFeatureFlags || defaultGetEditorFeatureFlags,
               breakoutEnabled,
               fullWidthEnabled,
               wasFullWidthEnabled,
               editorAnalyticsAPI,
+              api,
             );
           },
         },

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -36,6 +36,7 @@ import {
   TableCssClassName as ClassName,
   ColumnResizingPluginState,
   ShadowEvent,
+  PluginInjectionAPI,
 } from '../types';
 import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -74,6 +75,7 @@ export interface ComponentProps {
   ordering: TableColumnOrdering;
   tableResizingPluginState?: ColumnResizingPluginState;
   getEditorFeatureFlags: GetEditorFeatureFlags;
+  pluginInjectionApi?: PluginInjectionAPI;
 }
 
 interface TableState {
@@ -326,6 +328,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       containerWidth,
       options,
       getPos,
+      pluginInjectionApi,
     } = this.props;
     const { isLoading, showBeforeShadow, showAfterShadow } = this.state;
     const node = getNode();
@@ -406,6 +409,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isFullWidthModeEnabled={options?.isFullWidthModeEnabled}
         isBreakoutEnabled={options?.isBreakoutEnabled}
         isNested={isNested}
+        pluginInjectionApi={pluginInjectionApi}
       >
         {stickyHeadersOptimization && (
           <div

package/src/plugins/table/nodeviews/TableContainer.tsx

@@ -11,17 +11,13 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
+import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 
-import { TableCssClassName as ClassName } from '../types';
+import { PluginInjectionAPI, TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 
-interface GetMarginLeftOpts {
-  lineLength: number;
-  tableWidth: number | 'inherit';
-}
-
-const getMarginLeft = ({ lineLength, tableWidth }: GetMarginLeftOpts) => {
+const getMarginLeft = (lineLength: number, tableWidth: number | 'inherit') => {
   let marginLeft;
   if (tableWidth !== 'inherit' && lineLength) {
     const containerWidth = tableWidth;
@@ -69,6 +65,7 @@ type ResizableTableContainerProps = {
   editorView: EditorView;
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
+  pluginInjectionApi?: PluginInjectionAPI;
 };
 
 export const ResizableTableContainer = ({
@@ -80,9 +77,11 @@ export const ResizableTableContainer = ({
   editorView,
   getPos,
   tableRef,
+  pluginInjectionApi,
 }: PropsWithChildren<ResizableTableContainerProps>) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const innerContainerRef = useRef<HTMLDivElement | null>(null);
+  const marginLeftRef = useRef<number | undefined>(0);
 
   const updateWidth = useCallback(
     (width: number) => {
@@ -90,18 +89,30 @@ export const ResizableTableContainer = ({
         return;
       }
 
-      const marginLeft = getMarginLeft({
-        lineLength,
-        tableWidth: width,
-      });
+      const marginLeft = getMarginLeft(lineLength, width);
+
+      if (marginLeftRef.current !== marginLeft) {
+        marginLeftRef.current = marginLeft;
 
-      if (marginLeft) {
-        containerRef.current.style.marginLeft = `${marginLeft}px`;
+        if (Number.isFinite(marginLeft)) {
+          containerRef.current.style.marginLeft = `${marginLeft}px`;
+        }
       }
     },
     [lineLength],
   );
 
+  const displayGuideline = useCallback(
+    (guidelines: GuidelineConfig[]) => {
+      return (
+        pluginInjectionApi?.dependencies?.guideline?.actions?.displayGuideline(
+          editorView,
+        )({ guidelines }) ?? false
+      );
+    },
+    [pluginInjectionApi, editorView],
+  );
+
   const tableWidth = getTableContainerWidth(node);
 
   // 76 is currently an accepted padding value considering the spacing for resizer handle
@@ -109,16 +120,13 @@ export const ResizableTableContainer = ({
 
   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 (
     <div
-      style={{ marginLeft, width }}
+      style={{ marginLeft: marginLeftRef.current, width }}
       className={ClassName.TABLE_RESIZER_CONTAINER}
       ref={containerRef}
     >
@@ -130,6 +138,7 @@ export const ResizableTableContainer = ({
         getPos={getPos}
         node={node}
         tableRef={tableRef}
+        displayGuideline={displayGuideline}
       >
         <InnerContainer
           ref={innerContainerRef}
@@ -156,6 +165,7 @@ type TableContainerProps = {
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
   isNested: boolean;
+  pluginInjectionApi?: PluginInjectionAPI;
 };
 
 export const TableContainer = ({
@@ -169,6 +179,7 @@ export const TableContainer = ({
   getPos,
   tableRef,
   isNested,
+  pluginInjectionApi,
 }: PropsWithChildren<TableContainerProps>) => {
   if (
     (isFullWidthModeEnabled || isBreakoutEnabled) &&
@@ -184,6 +195,7 @@ export const TableContainer = ({
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
+        pluginInjectionApi={pluginInjectionApi}
       >
         {children}
       </ResizableTableContainer>
@@ -200,10 +212,7 @@ export const TableContainer = ({
       className={className}
       style={{
         width: tableWidth,
-        marginLeft: getMarginLeft({
-          lineLength: lineLength!,
-          tableWidth,
-        }),
+        marginLeft: getMarginLeft(lineLength!, tableWidth),
       }}
     >
       {children}

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -1,12 +1,21 @@
-import React, { PropsWithChildren } from 'react';
+import React, {
+  PropsWithChildren,
+  useCallback,
+  useRef,
+  useMemo,
+  useState,
+} from 'react';
 import { EditorView } from 'prosemirror-view';
 import { Node as PMNode } from 'prosemirror-model';
 import rafSchd from 'raf-schd';
 
 import {
   HandleHeightSizeType,
+  HandleResize,
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
+import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
+import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 
 import {
   scaleTable,
@@ -14,6 +23,9 @@ import {
   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';
 
 interface TableResizerProps {
   width: number;
@@ -23,6 +35,7 @@ interface TableResizerProps {
   getPos: () => number | undefined;
   node: PMNode;
   tableRef: HTMLTableElement;
+  displayGuideline: (guideline: GuidelineConfig[]) => boolean;
 }
 
 const handles = { right: true };
@@ -37,6 +50,7 @@ export const TableResizer = ({
   getPos,
   node,
   tableRef,
+  displayGuideline,
 }: PropsWithChildren<TableResizerProps>) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth =
@@ -60,6 +74,78 @@ export const TableResizer = ({
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  const currentGap = useRef(0);
+  const [snappingEnabled, setSnappingEnabled] = useState(false);
+
+  const updateActiveGuidelines = useCallback(
+    ({ gap, keys }: { gap: number; keys: string[] }) => {
+      if (gap !== currentGap.current) {
+        currentGap.current = gap;
+        displayGuideline(
+          getGuidelinesWithHighlights(
+            gap,
+            TABLE_SNAP_GAP,
+            keys,
+            defaultGuidelines,
+          ),
+        );
+      }
+    },
+    [displayGuideline],
+  );
+
+  const guidelineSnaps = useMemo(
+    () =>
+      snappingEnabled
+        ? {
+            x: defaultGuidelineWidths,
+          }
+        : undefined,
+    [snappingEnabled],
+  );
+
+  const handleResizeStart = useCallback(() => {
+    setSnappingEnabled(displayGuideline(defaultGuidelines));
+    return width;
+  }, [width, displayGuideline]);
+
+  const handleResizeStop = useCallback<HandleResize>(
+    (originalState, delta) => {
+      const newWidth = originalState.width + delta.width;
+      const { state, dispatch } = editorView;
+      const pos = getPos();
+
+      if (typeof pos !== 'number') {
+        return;
+      }
+
+      let tr = state.tr.setNodeMarkup(pos, undefined, {
+        ...node.attrs,
+        width: newWidth,
+      });
+
+      const newNode = tr.doc.nodeAt(pos)!;
+      tr = scaleTable(
+        tableRef,
+        {
+          node: newNode,
+          prevNode: node,
+          start: pos + 1,
+          parentWidth: newWidth,
+        },
+        editorView.domAtPos.bind(editorView),
+      )(tr);
+
+      dispatch(tr);
+
+      // Hide guidelines when resizing stops
+      displayGuideline([]);
+
+      updateWidth(newWidth);
+      return newWidth;
+    },
+    [updateWidth, editorView, getPos, node, tableRef, displayGuideline],
+  );
 
   return (
     <ResizerNext
@@ -68,7 +154,7 @@ export const TableResizer = ({
       handleAlignmentMethod="sticky"
       handleHeightSize={handleHeightSize}
       handleMarginTop={tableHandleMarginTop}
-      handleResizeStart={() => width}
+      handleResizeStart={handleResizeStart}
       handleResize={rafSchd((originalState, delta) => {
         const newWidth = originalState.width + delta.width;
         const pos = getPos();
@@ -87,44 +173,24 @@ export const TableResizer = ({
           editorView.domAtPos.bind(editorView),
         );
 
-        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);
+        updateActiveGuidelines(
+          findClosestSnap(
+            newWidth,
+            defaultGuidelineWidths,
+            defaultGuidelines,
+            TABLE_HIGHLIGHT_GAP,
+          ),
+        );
 
         updateWidth(newWidth);
         return newWidth;
-      }}
+      })}
+      handleResizeStop={handleResizeStop}
       resizeRatio={2}
       minWidth={minColumnWidth}
       maxWidth={maxWidth}
+      snapGap={TABLE_SNAP_GAP}
+      snap={guidelineSnaps}
     >
       {children}
     </ResizerNext>

package/src/plugins/table/nodeviews/table.tsx

@@ -32,6 +32,7 @@ import type { TableColumnOrdering } from '@atlaskit/adf-schema/steps';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { isTableNested } from '../utils';
+import { PluginInjectionAPI } from '../types';
 
 type ForwardRef = (node: HTMLElement | null) => void;
 
@@ -187,6 +188,7 @@ export default class TableView extends ReactNodeView<Props> {
               containerWidth={containerWidth!}
               contentDOM={forwardRef}
               getEditorFeatureFlags={props.getEditorFeatureFlags}
+              pluginInjectionApi={props.pluginInjectionApi}
             />
           );
         }}
@@ -280,6 +282,7 @@ export const createTableView = (
   options: TableOptions,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
+  pluginInjectionApi?: PluginInjectionAPI,
 ): NodeView => {
   const { pluginConfig } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
@@ -298,5 +301,6 @@ export const createTableView = (
     getEditorContainerWidth,
     getEditorFeatureFlags,
     hasIntlContext,
+    pluginInjectionApi,
   }).init();
 };

package/src/plugins/table/nodeviews/types.ts

@@ -7,6 +7,7 @@ import type {
 } 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;
@@ -27,4 +28,5 @@ export interface Props {
   getEditorContainerWidth: GetEditorContainerWidth;
   getEditorFeatureFlags: GetEditorFeatureFlags;
   hasIntlContext: boolean;
+  pluginInjectionApi?: PluginInjectionAPI;
 }

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -3,6 +3,7 @@ import {
   EditorState,
   PluginKey,
   Transaction,
+  // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
   ReadonlyTransaction,
 } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -1,3 +1,4 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { ReadonlyTransaction, Transaction } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';

package/src/plugins/table/pm-plugins/decorations/utils/types.ts

@@ -1,3 +1,4 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { ReadonlyTransaction, Transaction } from 'prosemirror-state';
 import { DecorationSet } from 'prosemirror-view';
 

package/src/plugins/table/pm-plugins/main.ts

@@ -80,6 +80,7 @@ import type {
   GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
 import type { getPosHandler } from '@atlaskit/editor-common/types';
+import type { PluginInjectionAPI } from '../types';
 
 let isBreakoutEnabled: boolean | undefined;
 let isFullWidthModeEnabled: boolean | undefined;
@@ -97,6 +98,7 @@ export const createPlugin = (
   fullWidthModeEnabled?: boolean,
   previousFullWidthModeEnabled?: boolean,
   editorAnalyticsAPI?: EditorAnalyticsAPI,
+  pluginInjectionApi?: PluginInjectionAPI,
 ) => {
   isBreakoutEnabled = breakoutEnabled;
   isFullWidthModeEnabled = fullWidthModeEnabled;
@@ -374,6 +376,7 @@ export const createPlugin = (
             },
             getEditorContainerWidth,
             getEditorFeatureFlags,
+            pluginInjectionApi,
           ),
       },
 

package/src/plugins/table/pm-plugins/table-resizing/plugin-factory.ts

@@ -1,3 +1,4 @@
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { ReadonlyTransaction } from 'prosemirror-state';
 
 import { pluginFactory } from '@atlaskit/editor-common/utils';

package/src/plugins/table/pm-plugins/table-resizing/utils/dom.ts

@@ -118,6 +118,7 @@ export const updateStickyMargins = (table: HTMLElement) => {
 };
 
 export const applyColWidthsToStickyRow = (
+  // @ts-ignore - CCFE error TS6133: 'colGroup' is declared but its value is never read.
   colGroup: HTMLTableColElement | null,
   headerRow: HTMLTableRowElement,
 ) => {

package/src/plugins/table/types.ts

@@ -14,6 +14,8 @@ import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 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 const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -27,6 +29,8 @@ export interface InsertRowOptions {
   moveCursorToInsertedRow: boolean;
 }
 
+export type PluginInjectionAPI = ExtractInjectionAPI<typeof tablePlugin>;
+
 export type InsertRowMethods =
   | INPUT_METHOD.CONTEXT_MENU
   | INPUT_METHOD.BUTTON

package/src/plugins/table/ui/consts.ts

@@ -104,3 +104,6 @@ export const contextualMenuDropdownWidth = 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
+
+export const TABLE_SNAP_GAP = 5;
+export const TABLE_HIGHLIGHT_GAP = 10;

package/src/plugins/table/utils/collapse.ts

@@ -1,4 +1,5 @@
 import { NodeType, NodeRange } from 'prosemirror-model';
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { findWrapping } from 'prosemirror-transform';
 

package/src/plugins/table/utils/decoration.ts

@@ -1,4 +1,5 @@
 import { Node as PmNode } from 'prosemirror-model';
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 import { Selection, Transaction, ReadonlyTransaction } from 'prosemirror-state';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { ContentNodeWithPos } from 'prosemirror-utils';

package/src/plugins/table/utils/guidelines.ts

@@ -0,0 +1,17 @@
+import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
+import {
+  akEditorDefaultLayoutWidth,
+  akEditorWideLayoutWidth,
+  akEditorFullWidthLayoutWidth,
+} from '@atlaskit/editor-shared-styles';
+
+export const defaultGuidelineWidths = [
+  akEditorDefaultLayoutWidth,
+  akEditorWideLayoutWidth,
+  akEditorFullWidthLayoutWidth,
+];
+
+export const defaultGuidelines = createFixedGuidelinesFromLengths(
+  defaultGuidelineWidths,
+) as GuidelineConfig[];