@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

package/dist/cjs/utils/snapping.js

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.defaultSnappingWidths = exports.calculateDefaultTablePreserveSnappings = exports.calculateDefaultSnappings = void 0;
+exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.defaultSnappingWidths = exports.calculateDefaultTablePreserveSnappings = exports.calculateDefaultSnappings = exports.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _consts = require("../ui/consts");
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -27,7 +26,7 @@ var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreser
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
+  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -38,18 +37,18 @@ var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreser
   return guides;
 };
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
-
+var PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = exports.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
 // FF TablePreserve for defaultSnappingWidths
-var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(lengthOffset, editorContainerWidth) {
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     innerGuidelines: false,
     breakoutPoints: false
   };
-  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**
- * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ * Returns keys of guidelines that are closest to the table and within the snapGap
  */
 var findClosestSnap = exports.findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guidelines) {
   var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

package/dist/es2019/commands/misc.js

@@ -278,9 +278,9 @@ export const moveCursorBackward = (state, dispatch) => {
   }
 
   /*
-    ensure we're just at a top level paragraph
-    otherwise, perform regular backspace behaviour
-   */
+     ensure we're just at a top level paragraph
+     otherwise, perform regular backspace behaviour
+    */
   const grandparent = $cursor.node($cursor.depth - 1);
   if ($cursor.parent.type !== state.schema.nodes.paragraph || grandparent && grandparent.type !== state.schema.nodes.doc) {
     return false;

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,8 +1,9 @@
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { setTableAlignmentWithTableContentWithPos } from '../commands/misc';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -35,9 +36,37 @@ const leftAlignStyle = {
 };
 const AlignmentTableContainer = ({
   node,
-  children
+  children,
+  pluginInjectionApi,
+  getPos,
+  editorView
 }) => {
   const alignment = node.attrs.layout;
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  useEffect(() => {
+    if (tableState && editorView && getPos) {
+      const {
+        wasFullWidthModeEnabled,
+        isFullWidthModeEnabled
+      } = tableState;
+      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > akEditorDefaultLayoutWidth) {
+        const pos = getPos && getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        const tr = setTableAlignmentWithTableContentWithPos('center', {
+          pos,
+          node
+        })(editorView.state);
+        if (tr) {
+          editorView.dispatch(tr);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorView, tableState, node]);
   const style = useMemo(() => {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
@@ -53,7 +82,10 @@ const AlignmentTableContainer = ({
 const AlignmentTableContainerWrapper = ({
   isTableAlignmentEnabled,
   node,
-  children
+  children,
+  pluginInjectionApi,
+  getPos,
+  editorView
 }) => {
   if (!isTableAlignmentEnabled) {
     return /*#__PURE__*/React.createElement("div", {
@@ -67,7 +99,10 @@ const AlignmentTableContainerWrapper = ({
     }, children);
   }
   return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, children);
 };
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
@@ -89,6 +124,12 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const {
+    isFullWidthModeEnabled
+  } = tableState;
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -145,9 +186,25 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const {
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
-
-  // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  let responsiveContainerWidth = 0;
+  const resizeHandleSpacing = 12;
+  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
+  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
+  // issues when viwport width is less than full width Editor's width. To detect avoid them
+  // we need to use lineLength to defined responsiveWidth instead of containerWidth
+  // (which does not get updated when Mac setting changes) in Full-width editor.
+  if (isFullWidthModeEnabled) {
+    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
+    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
+    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+  } else {
+    // 76 is currently an accepted padding value considering the spacing for resizer handle
+    // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
+    // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
+    // padding left = padding right = akEditorGutterPadding = 32
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 : containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+  }
   let width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -167,6 +224,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     attachAnalyticsEvent,
     displayGapCursor,
     isTableAlignmentEnabled,
+    isFullWidthModeEnabled,
     isTableScalingEnabled,
     isWholeTableInDanger,
     pluginInjectionApi,
@@ -176,7 +234,10 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,

package/dist/es2019/nodeviews/TableResizer.js

@@ -9,6 +9,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
+import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
@@ -18,8 +19,8 @@ import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
-import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../utils/guidelines';
+import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../utils/snapping';
 const RESIZE_STEP_VALUE = 10;
 const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 const handles = {
@@ -36,13 +37,13 @@ const getResizerHandleHeight = tableRef => {
   var _tableRef$clientHeigh;
   const tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
-    - One row table height (minimum possible table height) ~ 45px
-    - Two row table height ~ 90px
-    - Three row table height ~ 134px
-     In the if below we need to use:
-    - > 46 because the height of the table can be a float number like 45.44.
-    - < 96 is the height of large resize handle.
-  */
+     - One row table height (minimum possible table height) ~ 45px
+     - Two row table height ~ 90px
+     - Three row table height ~ 134px
+      In the if below we need to use:
+     - > 46 because the height of the table can be a float number like 45.44.
+     - < 96 is the height of large resize handle.
+   */
   if (tableHeight >= 96) {
     return 'large';
   }
@@ -64,10 +65,26 @@ const getResizerMinWidth = node => {
  * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
  * @param guidelines
  * @param containerWidth editorWidth
+ * @param lineLength
+ * @param isTableScalingEnabled
+ * @param isFullWidthModeEnabled
  */
-const getVisibleGuidelines = (guidelines, containerWidth) => {
+const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableScalingEnabled, isFullWidthModeEnabled) => {
+  let guidelineVisibleAdjustment = TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
+  if (isTableScalingEnabled) {
+    // Notes:
+    // Example: containerWidth = 1244, lineLength = 1180 (used for when editor full width mode is enabled)
+    // Full width/dynamic x coordinate can be float number.
+    // Ex: guideline.position.x can be 590.5. So 590.5 * 2 = 1181 (not 1180).
+    // For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
+    // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
+    const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
+    guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
+    : -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+  }
+  const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(guideline => {
-    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth + TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
 export const TableResizer = ({
@@ -89,7 +106,8 @@ export const TableResizer = ({
   isTableScalingEnabled,
   isTableAlignmentEnabled,
   isWholeTableInDanger,
-  pluginInjectionApi
+  pluginInjectionApi,
+  isFullWidthModeEnabled
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -128,13 +146,15 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
-  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
+    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
+    // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+    isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
     if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
@@ -192,12 +212,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, displayGuideline, onResizeStart, isFullWidthModeEnabled]);
   const handleResize = useCallback((originalState, delta) => {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -217,7 +237,8 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
+    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -226,7 +247,7 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
+    const fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     chainCommands((state, dispatch) => {
@@ -236,7 +257,7 @@ export const TableResizer = ({
     }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     var _node$attrs$localId2, _node$attrs2;

package/dist/es2019/nodeviews/TableRow.js

@@ -294,27 +294,27 @@ export default class TableRow extends TableNodeView {
   isHeaderSticky() {
     var _sentinelTop$rootBoun;
     /*
-    # Overview
-      I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
-      The format of the states are;    {top|bottom}:{in|above|below}
-      ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
-       For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
-      above and out of the viewport
-       This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
-     # States
-      top:in / bottom:in - NOT sticky
-      top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
-      top:in / bottom:below - NOT sticky
-      top:above / bottom:in - STICKY
-      top:above / bottom:above - NOT sticky
-      top:above / bottom:below - STICKY
-      top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
-      top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
-      top:below / bottom:below - NOT sticky
-     # Summary
-      The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
-      is in or below it.
-    */
+      # Overview
+        I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
+        The format of the states are;    {top|bottom}:{in|above|below}
+        ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
+         For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
+        above and out of the viewport
+         This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
+       # States
+        top:in / bottom:in - NOT sticky
+        top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
+        top:in / bottom:below - NOT sticky
+        top:above / bottom:in - STICKY
+        top:above / bottom:above - NOT sticky
+        top:above / bottom:below - STICKY
+        top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
+        top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
+        top:below / bottom:below - NOT sticky
+       # Summary
+        The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
+        is in or below it.
+      */
 
     const {
       top: sentinelTop,

package/dist/es2019/pm-plugins/table-resizing/plugin.js

@@ -43,9 +43,9 @@ export function createPlugin(dispatch, {
           let isColumnKeyboardResizeStarted = false;
           if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
             /*
-              We need to start listening mouse events if column resize started from keyboard.
-              This will allow continue resizing via mouse
-            */
+                    We need to start listening mouse events if column resize started from keyboard.
+                    This will allow continue resizing via mouse
+                  */
             const {
               isKeyboardResize
             } = getTablePluginState(state);

package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js

@@ -76,10 +76,10 @@ export const updateColgroup = (state, tableRef, tableNode, isTableScalingEnabled
   const cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
   const columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
-     updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
-     We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
-     We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
-     * */
+      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
+      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
+      We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
+      * */
   if (isTableScalingEnabled && tableNode) {
     const scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(column => column && !!column.width) // if width is 0, we dont want to apply that.

package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js

@@ -162,9 +162,9 @@ export const scaleTable = (tableRef, options, domAtPos, isTableScalingEnabledOnC
       // We need to do this check to reduce the number of race conditions when working with tables.
       // This metadata is been used in the sendTransaction function in the Collab plugin
       /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
-         scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
-         Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
-       */
+             scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+             Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+           */
       !layoutChanged && tr.setMeta('scaleTable', true);
       return tr;
     }

package/dist/es2019/ui/FloatingContextualMenu/styles.js

@@ -18,58 +18,58 @@ export const elementBeforeIconStyles = css({
 export const tablePopupStyles = (isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`
-  .${ClassName.CONTEXTUAL_SUBMENU} {
-    border-radius: ${"var(--ds-border-radius, 3px)"};
-    background: ${"var(--ds-surface-overlay, white)"};
-    box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
-    display: block;
-    position: absolute;
-    top: 0;
-    left: ${isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}px;
-    padding: ${"var(--ds-space-100, 8px)"};
+	.${ClassName.CONTEXTUAL_SUBMENU} {
+		border-radius: ${"var(--ds-border-radius, 3px)"};
+		background: ${"var(--ds-surface-overlay, white)"};
+		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+		display: block;
+		position: absolute;
+		top: 0;
+		left: ${isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}px;
+		padding: ${"var(--ds-space-100, 8px)"};
 
-    > div {
-      padding: 0;
-    }
-  }
+		> div {
+			padding: 0;
+		}
+	}
 
-  .${ClassName.CONTEXTUAL_MENU_ICON} {
-    display: flex;
+	.${ClassName.CONTEXTUAL_MENU_ICON} {
+		display: flex;
 
-    &::before {
-      content: '';
-      display: block;
-      border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      width: 20px;
-      height: 20px;
-    }
+		&::before {
+			content: '';
+			display: block;
+			border: 1px solid ${tableBackgroundBorderColor};
+			border-radius: ${"var(--ds-border-radius, 3px)"};
+			width: 20px;
+			height: 20px;
+		}
 
-    &::after {
-      content: '›';
-      margin-left: ${"var(--ds-space-050, 4px)"};
-      line-height: 20px;
-      color: ${`var(--ds-icon, ${N90})`};
-    }
-  }
+		&::after {
+			content: '›';
+			margin-left: ${"var(--ds-space-050, 4px)"};
+			line-height: 20px;
+			color: ${`var(--ds-icon, ${N90})`};
+		}
+	}
 
-  .${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
-    display: flex;
+	.${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
+		display: flex;
 
-    &::before {
-      content: '';
-      display: block;
-      border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      width: 14px;
-      height: 14px;
-    }
+		&::before {
+			content: '';
+			display: block;
+			border: 1px solid ${tableBackgroundBorderColor};
+			border-radius: ${"var(--ds-border-radius, 3px)"};
+			width: 14px;
+			height: 14px;
+		}
 
-    &::after {
-      content: '›';
-      margin-left: ${"var(--ds-space-050, 4px)"};
-      line-height: 14px;
-      color: ${`var(--ds-icon, ${N90})`};
-    }
-  }
+		&::after {
+			content: '›';
+			margin-left: ${"var(--ds-space-050, 4px)"};
+			line-height: 14px;
+			color: ${`var(--ds-icon, ${N90})`};
+		}
+	}
 `;

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -15,40 +15,40 @@ export const elementBeforeIconStyles = css({
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const dragMenuBackgroundColorStyles = css`
-  .${ClassName.DRAG_SUBMENU} {
-    border-radius: ${"var(--ds-border-radius, 3px)"};
-    background: ${"var(--ds-surface-overlay, white)"};
-    box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
-    display: block;
-    position: absolute;
-    top: 0;
-    left: ${dragMenuDropdownWidth}px;
-    padding: ${"var(--ds-space-100, 8px)"};
+	.${ClassName.DRAG_SUBMENU} {
+		border-radius: ${"var(--ds-border-radius, 3px)"};
+		background: ${"var(--ds-surface-overlay, white)"};
+		box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+		display: block;
+		position: absolute;
+		top: 0;
+		left: ${dragMenuDropdownWidth}px;
+		padding: ${"var(--ds-space-100, 8px)"};
 
-    > div {
-      padding: 0;
-    }
-  }
+		> div {
+			padding: 0;
+		}
+	}
 
-  .${ClassName.DRAG_SUBMENU_ICON} {
-    display: flex;
+	.${ClassName.DRAG_SUBMENU_ICON} {
+		display: flex;
 
-    &::before {
-      content: '';
-      display: block;
-      border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${"var(--ds-border-radius, 3px)"};
-      width: 14px;
-      height: 14px;
-    }
+		&::before {
+			content: '';
+			display: block;
+			border: 1px solid ${tableBackgroundBorderColor};
+			border-radius: ${"var(--ds-border-radius, 3px)"};
+			width: 14px;
+			height: 14px;
+		}
 
-    &::after {
-      content: '›';
-      margin-left: ${"var(--ds-space-050, 4px)"};
-      line-height: 14px;
-      color: ${`var(--ds-icon, ${N90})`};
-    }
-  }
+		&::after {
+			content: '›';
+			margin-left: ${"var(--ds-space-050, 4px)"};
+			line-height: 14px;
+			color: ${`var(--ds-icon, ${N90})`};
+		}
+	}
 `;
 export const toggleStyles = css({
   display: 'flex',