@atlaskit/editor-plugin-table 2.1.7 → 2.3.0

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,10 @@ import {
   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';
 
 interface TableResizerProps {
   width: number;
@@ -23,6 +36,7 @@ interface TableResizerProps {
   getPos: () => number | undefined;
   node: PMNode;
   tableRef: HTMLTableElement;
+  displayGuideline: (guideline: GuidelineConfig[]) => boolean;
 }
 
 const handles = { right: true };
@@ -37,6 +51,7 @@ export const TableResizer = ({
   getPos,
   node,
   tableRef,
+  displayGuideline,
 }: PropsWithChildren<TableResizerProps>) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth =
@@ -60,6 +75,84 @@ 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(() => {
+    const {
+      dispatch,
+      state: { tr },
+    } = editorView;
+    dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
+
+    setSnappingEnabled(displayGuideline(defaultGuidelines));
+    return width;
+  }, [width, displayGuideline, editorView]);
+
+  const handleResizeStop = useCallback<HandleResize>(
+    (originalState, delta) => {
+      const newWidth = originalState.width + delta.width;
+      const { state, dispatch } = editorView;
+      const pos = getPos();
+
+      let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
+
+      if (typeof pos === 'number') {
+        tr = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          width: newWidth,
+        });
+
+        const newNode = tr.doc.nodeAt(pos)!;
+        tr = scaleTable(
+          tableRef,
+          {
+            node: newNode,
+            prevNode: node,
+            start: pos + 1,
+            parentWidth: newWidth,
+          },
+          editorView.domAtPos.bind(editorView),
+        )(tr);
+      }
+
+      dispatch(tr);
+
+      // Hide guidelines when resizing stops
+      displayGuideline([]);
+
+      updateWidth(newWidth);
+      return newWidth;
+    },
+    [updateWidth, editorView, getPos, node, tableRef, displayGuideline],
+  );
 
   return (
     <ResizerNext
@@ -68,7 +161,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 +180,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

@@ -24,6 +24,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';
@@ -32,6 +33,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;
 
@@ -156,6 +158,7 @@ export default class TableView extends ReactNodeView<Props> {
         plugins={{
           pluginState: pluginKey,
           tableResizingPluginState: tableResizingPluginKey,
+          tableWidthPluginState: tableWidthPluginKey,
           widthPlugin: fakePluginKey,
           mediaState: fakeMediaPluginKey,
         }}
@@ -163,12 +166,20 @@ export default class TableView extends ReactNodeView<Props> {
         render={(pluginStates) => {
           const {
             tableResizingPluginState,
+            tableWidthPluginState,
             pluginState,
             // containerWidth,
             mediaState,
           } = pluginStates;
-          const tableActive = props.getPos() === pluginState!.tablePos;
           const containerWidth = props.getEditorContainerWidth();
+
+          const isTableResizing = tableWidthPluginState?.resizing;
+          const isResizing = Boolean(
+            tableResizingPluginState?.dragging || isTableResizing,
+          );
+          const tableActive =
+            props.getPos() === pluginState!.tablePos && !isTableResizing;
+
           return (
             <TableComponent
               view={props.view}
@@ -182,11 +193,12 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
-              tableResizingPluginState={tableResizingPluginState}
+              isResizing={isResizing}
               getNode={this.getNode}
               containerWidth={containerWidth!}
               contentDOM={forwardRef}
               getEditorFeatureFlags={props.getEditorFeatureFlags}
+              pluginInjectionApi={props.pluginInjectionApi}
             />
           );
         }}
@@ -280,6 +292,7 @@ export const createTableView = (
   options: TableOptions,
   getEditorContainerWidth: GetEditorContainerWidth,
   getEditorFeatureFlags: GetEditorFeatureFlags,
+  pluginInjectionApi?: PluginInjectionAPI,
 ): NodeView => {
   const { pluginConfig } = getPluginState(view.state);
   const { allowColumnResizing } = getPluginConfig(pluginConfig);
@@ -298,5 +311,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,12 +3,14 @@ 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';
 import { DecorationSet } from 'prosemirror-view';
 
 import { pluginKey as tablePluginKey } from '../plugin-key';
+import { pluginKey as tableWidthPluginKey } from '../table-width';
 
 import {
   buildColumnControlsDecorations,
@@ -24,8 +26,20 @@ export const handleDocOrSelectionChanged = (
   tr: Transaction | ReadonlyTransaction,
   decorationSet: DecorationSet,
   oldState: EditorState,
+  newState: EditorState,
 ): DecorationSet => {
-  if (tr.docChanged || tr.selection instanceof CellSelection) {
+  const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
+  const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
+  const 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,
       tr,
@@ -52,16 +66,25 @@ export const createPlugin = () => {
     state: {
       init: () => DecorationSet.empty,
 
-      apply: (tr, decorationSet, oldState) => {
+      apply: (tr, decorationSet, oldState, newState) => {
         let pluginState = decorationSet;
         const 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/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/pm-plugins/{table-add-width.ts → table-width.ts}

@@ -1,6 +1,7 @@
 /**
- * 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 {
@@ -9,6 +10,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { ReplaceStep } from 'prosemirror-transform';
+import { PluginKey } from 'prosemirror-state';
+import { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 
 type __ReplaceStep = ReplaceStep & {
   // Properties `to` and `from` are private attributes of ReplaceStep.
@@ -16,8 +19,35 @@ type __ReplaceStep = ReplaceStep & {
   from: number;
 };
 
-const createPlugin = (fullWidthEnabled: boolean) =>
+type TableWidthPluginState = {
+  resizing: boolean;
+};
+
+export const pluginKey = new PluginKey<TableWidthPluginState>(
+  'tableWidthPlugin',
+);
+
+const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
   new SafePlugin({
+    key: pluginKey,
+    state: {
+      init() {
+        return {
+          resizing: false,
+        };
+      },
+      apply(tr, pluginState) {
+        const meta = tr.getMeta(pluginKey);
+        if (meta && meta.resizing !== pluginState.resizing) {
+          const newState = { resizing: meta.resizing };
+
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+
+        return pluginState;
+      },
+    },
     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/src/plugins/table/toolbar.tsx

@@ -44,6 +44,7 @@ import {
 } 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 {
   ToolbarMenuConfig,
   ToolbarMenuState,
@@ -440,7 +441,12 @@ export const getToolbarConfig =
     const tableObject = findTable(state.selection);
     const pluginState = getPluginState(state);
     const resizeState = tableResizingPluginKey.getState(state);
-    if (tableObject && pluginState.editorHasFocus) {
+    const tableWidthState = tableWidthPluginKey.getState(state);
+
+    // We don't want to show floating toolbar while resizing the table
+    const isWidthResizing = tableWidthState?.resizing;
+
+    if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
       const nodeType = state.schema.nodes.table;
       const menu = getToolbarMenuConfig(
         config,

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[];