@atlaskit/editor-common 105.8.2 → 105.8.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-common
 
+## 105.8.3
+
+### Patch Changes
+
+- [#158601](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158601)
+  [`7dfac59b4421f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7dfac59b4421f) -
+  ED-27401: Updated layout guidelines
+- Updated dependencies
+
 ## 105.8.2
 
 ### Patch Changes

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "105.8.2";
+var packageVersion = "105.8.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/resizer/BreakoutResizer.js

@@ -93,6 +93,8 @@ var RESIZE_STEP_VALUE = 10;
  * @param root0.editorAnalyticsApi
  * @param root0.displayGapCursor
  * @param root0.onResizeStart
+ * @param root0.dynamicFullWidthGuidelineOffset
+ * @returns BreakoutResizer component
  * @example
  */
 var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
@@ -106,7 +108,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     displayGuidelines = _ref.displayGuidelines,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     displayGapCursor = _ref.displayGapCursor,
-    onResizeStart = _ref.onResizeStart;
+    onResizeStart = _ref.onResizeStart,
+    dynamicFullWidthGuidelineOffset = _ref.dynamicFullWidthGuidelineOffset;
   var _useState = (0, _react.useState)({
       minWidth: undefined,
       maxWidth: undefined,
@@ -120,7 +123,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     setResizingState = _useState2[1];
   var areResizeMetaKeysPressed = (0, _react.useRef)(false);
   var resizerRef = (0, _react.useRef)(null);
-  var _useBreakoutGuideline = (0, _useBreakoutGuidelines.useBreakoutGuidelines)(getEditorWidth, isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true)),
+  var _useBreakoutGuideline = (0, _useBreakoutGuidelines.useBreakoutGuidelines)(getEditorWidth, isResizing && (0, _experiments.editorExperiment)('single_column_layouts', true), dynamicFullWidthGuidelineOffset),
     snaps = _useBreakoutGuideline.snaps,
     currentLayout = _useBreakoutGuideline.currentLayout,
     guidelines = _useBreakoutGuideline.guidelines,

package/dist/cjs/resizer/useBreakoutGuidelines.js

@@ -10,11 +10,22 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var SNAP_GAP = exports.SNAP_GAP = 8;
+var GUIDELINE_KEYS = {
+  lineLength: 'grid',
+  wide: 'wide',
+  fullWidth: 'full_width'
+};
+var CURRENT_LAYOUT_KEYS = {
+  lineLength: 'center',
+  wide: 'wide',
+  fullWidth: 'full-width'
+};
 var roundToNearest = function roundToNearest(value) {
   var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
   return Math.round(value / interval) * interval;
 };
 function useBreakoutGuidelines(getEditorWidth, isResizing) {
+  var dynamicFullWidthGuidelineOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var widthState = getEditorWidth();
   var _useMemo = (0, _react.useMemo)(function () {
       if (!isResizing) {
@@ -24,93 +35,80 @@ function useBreakoutGuidelines(getEditorWidth, isResizing) {
         width = _ref.width,
         lineLength = _ref.lineLength;
       var wide = lineLength ? Math.round(lineLength * _editorSharedStyles.breakoutWideScaleRatio) : undefined;
-      var fullWidth = width ? Math.min(width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2) : undefined;
+      var layoutCalculatedWidth = width ? width - ((0, _editorSharedStyles.akEditorGutterPaddingDynamic)() + dynamicFullWidthGuidelineOffset) * 2 : undefined;
+      var fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth) : undefined;
       return {
         wide: wide,
         fullWidth: fullWidth,
         lineLength: lineLength
       };
-    }, [widthState, isResizing]),
+    }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]),
     lineLength = _useMemo.lineLength,
     wide = _useMemo.wide,
     fullWidth = _useMemo.fullWidth;
-  var snaps = (0, _react.useMemo)(function () {
-    if (!isResizing) {
+
+  // calculate snapping width
+  var defaultSnappingWidths = (0, _react.useMemo)(function () {
+    if (!fullWidth || !wide || !lineLength || fullWidth <= lineLength) {
       return null;
     }
-    var xSnaps = [];
-    if (typeof lineLength === 'number') {
-      xSnaps.push(lineLength);
+    if (fullWidth - wide > SNAP_GAP) {
+      return {
+        lineLength: lineLength,
+        wide: wide,
+        fullWidth: fullWidth
+      };
     }
-    if (typeof wide === 'number') {
-      xSnaps.push(wide);
+    if (fullWidth <= wide && fullWidth - lineLength > SNAP_GAP) {
+      return {
+        lineLength: lineLength,
+        fullWidth: fullWidth
+      };
     }
-    if (typeof fullWidth === 'number') {
-      xSnaps.push(fullWidth - _editorSharedStyles.akEditorGutterPadding);
+    return null;
+  }, [fullWidth, lineLength, wide]);
+  var snaps = (0, _react.useMemo)(function () {
+    if (!isResizing || !defaultSnappingWidths) {
+      return null;
     }
     return {
-      x: xSnaps
+      x: Object.values(defaultSnappingWidths)
     };
-  }, [isResizing, wide, fullWidth, lineLength]);
+  }, [defaultSnappingWidths, isResizing]);
+
+  // calculate guidelines, and calculate which lines are active
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     currentLayout = _useState2[0],
     setCurrentLayout = _useState2[1];
   var guidelines = (0, _react.useMemo)(function () {
     var guidelines = [];
-    if (!isResizing) {
+    if (!defaultSnappingWidths) {
       return guidelines;
     }
-    if (lineLength) {
-      guidelines.push({
-        key: 'grid_left',
-        position: {
-          x: -roundToNearest(lineLength / 2)
-        },
-        active: currentLayout === 'center'
-      });
-      guidelines.push({
-        key: 'grid_right',
-        position: {
-          x: roundToNearest(lineLength / 2)
-        },
-        active: currentLayout === 'center'
-      });
-    }
-    if (wide) {
-      guidelines.push({
-        key: 'wide_left',
-        position: {
-          x: -roundToNearest(wide / 2)
-        },
-        active: currentLayout === 'wide'
-      });
-      guidelines.push({
-        key: 'wide_right',
-        position: {
-          x: roundToNearest(wide / 2)
-        },
-        active: currentLayout === 'wide'
-      });
-    }
-    if (fullWidth) {
-      guidelines.push({
-        key: 'full_width_left',
-        position: {
-          x: -roundToNearest(fullWidth / 2)
-        },
-        active: currentLayout === 'full-width'
-      });
-      guidelines.push({
-        key: 'full_width_right',
-        position: {
-          x: roundToNearest(fullWidth) / 2
-        },
-        active: currentLayout === 'full-width'
-      });
-    }
+    Object.entries(defaultSnappingWidths).map(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      if (value) {
+        guidelines.push({
+          key: "".concat(GUIDELINE_KEYS[key], "_left"),
+          position: {
+            x: -roundToNearest(value / 2)
+          },
+          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
+        });
+        guidelines.push({
+          key: "".concat(GUIDELINE_KEYS[key], "_right"),
+          position: {
+            x: roundToNearest(value / 2)
+          },
+          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
+        });
+      }
+    });
     return guidelines;
-  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  }, [defaultSnappingWidths, currentLayout]);
   var setCurrentWidth = (0, _react.useCallback)(function (newWidth) {
     if (typeof newWidth !== 'number') {
       setCurrentLayout(null);

package/dist/cjs/ui/DropList/index.js

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "105.8.2";
+var packageVersion = "105.8.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "105.8.2";
+const packageVersion = "105.8.3";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/resizer/BreakoutResizer.js

@@ -82,6 +82,8 @@ const RESIZE_STEP_VALUE = 10;
  * @param root0.editorAnalyticsApi
  * @param root0.displayGapCursor
  * @param root0.onResizeStart
+ * @param root0.dynamicFullWidthGuidelineOffset
+ * @returns BreakoutResizer component
  * @example
  */
 const BreakoutResizer = ({
@@ -95,7 +97,8 @@ const BreakoutResizer = ({
   displayGuidelines,
   editorAnalyticsApi,
   displayGapCursor,
-  onResizeStart
+  onResizeStart,
+  dynamicFullWidthGuidelineOffset
 }) => {
   const [{
     minWidth,
@@ -113,7 +116,7 @@ const BreakoutResizer = ({
     currentLayout,
     guidelines,
     setCurrentWidth
-  } = useBreakoutGuidelines(getEditorWidth, isResizing && editorExperiment('single_column_layouts', true));
+  } = useBreakoutGuidelines(getEditorWidth, isResizing && editorExperiment('single_column_layouts', true), dynamicFullWidthGuidelineOffset);
   useEffect(() => {
     if (displayGuidelines) {
       displayGuidelines(guidelines || []);

package/dist/es2019/resizer/useBreakoutGuidelines.js

@@ -1,8 +1,18 @@
 import { useCallback, useMemo, useState } from 'react';
-import { akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 export const SNAP_GAP = 8;
+const GUIDELINE_KEYS = {
+  lineLength: 'grid',
+  wide: 'wide',
+  fullWidth: 'full_width'
+};
+const CURRENT_LAYOUT_KEYS = {
+  lineLength: 'center',
+  wide: 'wide',
+  fullWidth: 'full-width'
+};
 const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
-export function useBreakoutGuidelines(getEditorWidth, isResizing) {
+export function useBreakoutGuidelines(getEditorWidth, isResizing, dynamicFullWidthGuidelineOffset = 0) {
   const widthState = getEditorWidth();
   const {
     lineLength,
@@ -17,87 +27,71 @@ export function useBreakoutGuidelines(getEditorWidth, isResizing) {
       lineLength
     } = widthState || {};
     const wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
-    const fullWidth = width ? Math.min(width - akEditorGutterPaddingDynamic() * 2) : undefined;
+    const layoutCalculatedWidth = width ? width - (akEditorGutterPaddingDynamic() + dynamicFullWidthGuidelineOffset) * 2 : undefined;
+    const fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, akEditorFullWidthLayoutWidth) : undefined;
     return {
       wide,
       fullWidth,
       lineLength
     };
-  }, [widthState, isResizing]);
-  const snaps = useMemo(() => {
-    if (!isResizing) {
+  }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]);
+
+  // calculate snapping width
+  const defaultSnappingWidths = useMemo(() => {
+    if (!fullWidth || !wide || !lineLength || fullWidth <= lineLength) {
       return null;
     }
-    const xSnaps = [];
-    if (typeof lineLength === 'number') {
-      xSnaps.push(lineLength);
+    if (fullWidth - wide > SNAP_GAP) {
+      return {
+        lineLength,
+        wide,
+        fullWidth
+      };
     }
-    if (typeof wide === 'number') {
-      xSnaps.push(wide);
+    if (fullWidth <= wide && fullWidth - lineLength > SNAP_GAP) {
+      return {
+        lineLength,
+        fullWidth
+      };
     }
-    if (typeof fullWidth === 'number') {
-      xSnaps.push(fullWidth - akEditorGutterPadding);
+    return null;
+  }, [fullWidth, lineLength, wide]);
+  const snaps = useMemo(() => {
+    if (!isResizing || !defaultSnappingWidths) {
+      return null;
     }
     return {
-      x: xSnaps
+      x: Object.values(defaultSnappingWidths)
     };
-  }, [isResizing, wide, fullWidth, lineLength]);
+  }, [defaultSnappingWidths, isResizing]);
+
+  // calculate guidelines, and calculate which lines are active
   const [currentLayout, setCurrentLayout] = useState(null);
   const guidelines = useMemo(() => {
     const guidelines = [];
-    if (!isResizing) {
+    if (!defaultSnappingWidths) {
       return guidelines;
     }
-    if (lineLength) {
-      guidelines.push({
-        key: 'grid_left',
-        position: {
-          x: -roundToNearest(lineLength / 2)
-        },
-        active: currentLayout === 'center'
-      });
-      guidelines.push({
-        key: 'grid_right',
-        position: {
-          x: roundToNearest(lineLength / 2)
-        },
-        active: currentLayout === 'center'
-      });
-    }
-    if (wide) {
-      guidelines.push({
-        key: 'wide_left',
-        position: {
-          x: -roundToNearest(wide / 2)
-        },
-        active: currentLayout === 'wide'
-      });
-      guidelines.push({
-        key: 'wide_right',
-        position: {
-          x: roundToNearest(wide / 2)
-        },
-        active: currentLayout === 'wide'
-      });
-    }
-    if (fullWidth) {
-      guidelines.push({
-        key: 'full_width_left',
-        position: {
-          x: -roundToNearest(fullWidth / 2)
-        },
-        active: currentLayout === 'full-width'
-      });
-      guidelines.push({
-        key: 'full_width_right',
-        position: {
-          x: roundToNearest(fullWidth) / 2
-        },
-        active: currentLayout === 'full-width'
-      });
-    }
+    Object.entries(defaultSnappingWidths).map(([key, value]) => {
+      if (value) {
+        guidelines.push({
+          key: `${GUIDELINE_KEYS[key]}_left`,
+          position: {
+            x: -roundToNearest(value / 2)
+          },
+          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
+        });
+        guidelines.push({
+          key: `${GUIDELINE_KEYS[key]}_right`,
+          position: {
+            x: roundToNearest(value / 2)
+          },
+          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
+        });
+      }
+    });
     return guidelines;
-  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  }, [defaultSnappingWidths, currentLayout]);
   const setCurrentWidth = useCallback(newWidth => {
     if (typeof newWidth !== 'number') {
       setCurrentLayout(null);

package/dist/es2019/ui/DropList/index.js

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "105.8.2";
+const packageVersion = "105.8.3";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "105.8.2";
+var packageVersion = "105.8.3";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/resizer/BreakoutResizer.js

@@ -83,6 +83,8 @@ var RESIZE_STEP_VALUE = 10;
  * @param root0.editorAnalyticsApi
  * @param root0.displayGapCursor
  * @param root0.onResizeStart
+ * @param root0.dynamicFullWidthGuidelineOffset
+ * @returns BreakoutResizer component
  * @example
  */
 var BreakoutResizer = function BreakoutResizer(_ref) {
@@ -96,7 +98,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     displayGuidelines = _ref.displayGuidelines,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     displayGapCursor = _ref.displayGapCursor,
-    onResizeStart = _ref.onResizeStart;
+    onResizeStart = _ref.onResizeStart,
+    dynamicFullWidthGuidelineOffset = _ref.dynamicFullWidthGuidelineOffset;
   var _useState = useState({
       minWidth: undefined,
       maxWidth: undefined,
@@ -110,7 +113,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     setResizingState = _useState2[1];
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
-  var _useBreakoutGuideline = useBreakoutGuidelines(getEditorWidth, isResizing && editorExperiment('single_column_layouts', true)),
+  var _useBreakoutGuideline = useBreakoutGuidelines(getEditorWidth, isResizing && editorExperiment('single_column_layouts', true), dynamicFullWidthGuidelineOffset),
     snaps = _useBreakoutGuideline.snaps,
     currentLayout = _useBreakoutGuideline.currentLayout,
     guidelines = _useBreakoutGuideline.guidelines,

package/dist/esm/resizer/useBreakoutGuidelines.js

@@ -1,12 +1,23 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useMemo, useState } from 'react';
-import { akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
 export var SNAP_GAP = 8;
+var GUIDELINE_KEYS = {
+  lineLength: 'grid',
+  wide: 'wide',
+  fullWidth: 'full_width'
+};
+var CURRENT_LAYOUT_KEYS = {
+  lineLength: 'center',
+  wide: 'wide',
+  fullWidth: 'full-width'
+};
 var roundToNearest = function roundToNearest(value) {
   var interval = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.5;
   return Math.round(value / interval) * interval;
 };
 export function useBreakoutGuidelines(getEditorWidth, isResizing) {
+  var dynamicFullWidthGuidelineOffset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   var widthState = getEditorWidth();
   var _useMemo = useMemo(function () {
       if (!isResizing) {
@@ -16,93 +27,80 @@ export function useBreakoutGuidelines(getEditorWidth, isResizing) {
         width = _ref.width,
         lineLength = _ref.lineLength;
       var wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
-      var fullWidth = width ? Math.min(width - akEditorGutterPaddingDynamic() * 2) : undefined;
+      var layoutCalculatedWidth = width ? width - (akEditorGutterPaddingDynamic() + dynamicFullWidthGuidelineOffset) * 2 : undefined;
+      var fullWidth = width && layoutCalculatedWidth ? Math.min(layoutCalculatedWidth, akEditorFullWidthLayoutWidth) : undefined;
       return {
         wide: wide,
         fullWidth: fullWidth,
         lineLength: lineLength
       };
-    }, [widthState, isResizing]),
+    }, [widthState, isResizing, dynamicFullWidthGuidelineOffset]),
     lineLength = _useMemo.lineLength,
     wide = _useMemo.wide,
     fullWidth = _useMemo.fullWidth;
-  var snaps = useMemo(function () {
-    if (!isResizing) {
+
+  // calculate snapping width
+  var defaultSnappingWidths = useMemo(function () {
+    if (!fullWidth || !wide || !lineLength || fullWidth <= lineLength) {
       return null;
     }
-    var xSnaps = [];
-    if (typeof lineLength === 'number') {
-      xSnaps.push(lineLength);
+    if (fullWidth - wide > SNAP_GAP) {
+      return {
+        lineLength: lineLength,
+        wide: wide,
+        fullWidth: fullWidth
+      };
     }
-    if (typeof wide === 'number') {
-      xSnaps.push(wide);
+    if (fullWidth <= wide && fullWidth - lineLength > SNAP_GAP) {
+      return {
+        lineLength: lineLength,
+        fullWidth: fullWidth
+      };
     }
-    if (typeof fullWidth === 'number') {
-      xSnaps.push(fullWidth - akEditorGutterPadding);
+    return null;
+  }, [fullWidth, lineLength, wide]);
+  var snaps = useMemo(function () {
+    if (!isResizing || !defaultSnappingWidths) {
+      return null;
     }
     return {
-      x: xSnaps
+      x: Object.values(defaultSnappingWidths)
     };
-  }, [isResizing, wide, fullWidth, lineLength]);
+  }, [defaultSnappingWidths, isResizing]);
+
+  // calculate guidelines, and calculate which lines are active
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     currentLayout = _useState2[0],
     setCurrentLayout = _useState2[1];
   var guidelines = useMemo(function () {
     var guidelines = [];
-    if (!isResizing) {
+    if (!defaultSnappingWidths) {
       return guidelines;
     }
-    if (lineLength) {
-      guidelines.push({
-        key: 'grid_left',
-        position: {
-          x: -roundToNearest(lineLength / 2)
-        },
-        active: currentLayout === 'center'
-      });
-      guidelines.push({
-        key: 'grid_right',
-        position: {
-          x: roundToNearest(lineLength / 2)
-        },
-        active: currentLayout === 'center'
-      });
-    }
-    if (wide) {
-      guidelines.push({
-        key: 'wide_left',
-        position: {
-          x: -roundToNearest(wide / 2)
-        },
-        active: currentLayout === 'wide'
-      });
-      guidelines.push({
-        key: 'wide_right',
-        position: {
-          x: roundToNearest(wide / 2)
-        },
-        active: currentLayout === 'wide'
-      });
-    }
-    if (fullWidth) {
-      guidelines.push({
-        key: 'full_width_left',
-        position: {
-          x: -roundToNearest(fullWidth / 2)
-        },
-        active: currentLayout === 'full-width'
-      });
-      guidelines.push({
-        key: 'full_width_right',
-        position: {
-          x: roundToNearest(fullWidth) / 2
-        },
-        active: currentLayout === 'full-width'
-      });
-    }
+    Object.entries(defaultSnappingWidths).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        key = _ref3[0],
+        value = _ref3[1];
+      if (value) {
+        guidelines.push({
+          key: "".concat(GUIDELINE_KEYS[key], "_left"),
+          position: {
+            x: -roundToNearest(value / 2)
+          },
+          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
+        });
+        guidelines.push({
+          key: "".concat(GUIDELINE_KEYS[key], "_right"),
+          position: {
+            x: roundToNearest(value / 2)
+          },
+          active: currentLayout === CURRENT_LAYOUT_KEYS[key]
+        });
+      }
+    });
     return guidelines;
-  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  }, [defaultSnappingWidths, currentLayout]);
   var setCurrentWidth = useCallback(function (newWidth) {
     if (typeof newWidth !== 'number') {
       setCurrentLayout(null);

package/dist/esm/ui/DropList/index.js

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "105.8.2";
+var packageVersion = "105.8.3";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/types/resizer/BreakoutResizer.d.ts

@@ -20,6 +20,7 @@ type BreakoutResizerProps = {
     displayGuidelines?: (guidelines: GuidelineConfig[]) => void;
     displayGapCursor: (toggle: boolean) => boolean;
     onResizeStart?: () => void;
+    dynamicFullWidthGuidelineOffset?: number;
 };
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
@@ -38,7 +39,9 @@ type BreakoutResizerProps = {
  * @param root0.editorAnalyticsApi
  * @param root0.displayGapCursor
  * @param root0.onResizeStart
+ * @param root0.dynamicFullWidthGuidelineOffset
+ * @returns BreakoutResizer component
  * @example
  */
-declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, displayGuidelines, editorAnalyticsApi, displayGapCursor, onResizeStart, }: BreakoutResizerProps) => React.JSX.Element;
+declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, displayGuidelines, editorAnalyticsApi, displayGapCursor, onResizeStart, dynamicFullWidthGuidelineOffset, }: BreakoutResizerProps) => React.JSX.Element;
 export { BreakoutResizer };

package/dist/types/resizer/useBreakoutGuidelines.d.ts

@@ -1,8 +1,8 @@
-import type { GuidelineConfig } from '../guideline';
+import { type GuidelineConfig } from '../guideline';
 import type { BreakoutMode, EditorContainerWidth } from '../types';
 import type { Snap } from './types';
 export declare const SNAP_GAP = 8;
-export declare function useBreakoutGuidelines(getEditorWidth: () => EditorContainerWidth | undefined, isResizing: boolean): {
+export declare function useBreakoutGuidelines(getEditorWidth: () => EditorContainerWidth | undefined, isResizing: boolean, dynamicFullWidthGuidelineOffset?: number): {
     snaps: Snap | null;
     currentLayout: BreakoutMode | null;
     guidelines: GuidelineConfig[];

package/dist/types-ts4.5/resizer/BreakoutResizer.d.ts

@@ -20,6 +20,7 @@ type BreakoutResizerProps = {
     displayGuidelines?: (guidelines: GuidelineConfig[]) => void;
     displayGapCursor: (toggle: boolean) => boolean;
     onResizeStart?: () => void;
+    dynamicFullWidthGuidelineOffset?: number;
 };
 /**
  * BreakoutResizer is a common component used to resize nodes that support the 'Breakout' mark, so it requires
@@ -38,7 +39,9 @@ type BreakoutResizerProps = {
  * @param root0.editorAnalyticsApi
  * @param root0.displayGapCursor
  * @param root0.onResizeStart
+ * @param root0.dynamicFullWidthGuidelineOffset
+ * @returns BreakoutResizer component
  * @example
  */
-declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, displayGuidelines, editorAnalyticsApi, displayGapCursor, onResizeStart, }: BreakoutResizerProps) => React.JSX.Element;
+declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, displayGuidelines, editorAnalyticsApi, displayGapCursor, onResizeStart, dynamicFullWidthGuidelineOffset, }: BreakoutResizerProps) => React.JSX.Element;
 export { BreakoutResizer };

package/dist/types-ts4.5/resizer/useBreakoutGuidelines.d.ts

@@ -1,8 +1,8 @@
-import type { GuidelineConfig } from '../guideline';
+import { type GuidelineConfig } from '../guideline';
 import type { BreakoutMode, EditorContainerWidth } from '../types';
 import type { Snap } from './types';
 export declare const SNAP_GAP = 8;
-export declare function useBreakoutGuidelines(getEditorWidth: () => EditorContainerWidth | undefined, isResizing: boolean): {
+export declare function useBreakoutGuidelines(getEditorWidth: () => EditorContainerWidth | undefined, isResizing: boolean, dynamicFullWidthGuidelineOffset?: number): {
     snaps: Snap | null;
     currentLayout: BreakoutMode | null;
     guidelines: GuidelineConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "105.8.2",
+	"version": "105.8.3",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"