@atlaskit/editor-common 102.13.11 → 102.14.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-common
 
+## 102.14.0
+
+### Minor Changes
+
+- [#132381](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132381)
+  [`19e52e77d3cfc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19e52e77d3cfc) -
+  ED-27195 enable guildeline for breakout resizer
+
+### Patch Changes
+
+- [#132269](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132269)
+  [`f6984f0b31c02`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6984f0b31c02) -
+  [ux] Fixed alignment of the icon in OpenButtonOverlay on header link.
+- Updated dependencies
+
 ## 102.13.11
 
 ### 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 = "102.13.11";
+var packageVersion = "102.14.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/resizer/BreakoutResizer.js

@@ -16,6 +16,7 @@ var _analytics = require("../analytics");
 var _styles = require("../styles");
 var _browser = require("../utils/browser");
 var _Resizer = _interopRequireDefault(require("./Resizer"));
+var _useBreakoutGuidelines = require("./useBreakoutGuidelines");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 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 breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
@@ -89,6 +90,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     disabled = _ref.disabled,
     getEditorWidth = _ref.getEditorWidth,
     parentRef = _ref.parentRef,
+    displayGuidelines = _ref.displayGuidelines,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     displayGapCursor = _ref.displayGapCursor;
   var _useState = (0, _react.useState)({
@@ -104,6 +106,16 @@ 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)),
+    snaps = _useBreakoutGuideline.snaps,
+    currentLayout = _useBreakoutGuideline.currentLayout,
+    guidelines = _useBreakoutGuideline.guidelines,
+    setCurrentWidth = _useBreakoutGuideline.setCurrentWidth;
+  (0, _react.useEffect)(function () {
+    if (displayGuidelines) {
+      displayGuidelines(guidelines || []);
+    }
+  }, [displayGuidelines, guidelines]);
 
   // Relying on re-renders caused by selection changes inside/around node
   var isSelectionInNode = (0, _react.useMemo)(function () {
@@ -140,6 +152,12 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
   }, [getEditorWidth, editorView, displayGapCursor]);
+  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
+    if ((0, _experiments.editorExperiment)('single_column_layouts', true)) {
+      var newWidth = originalState.width + delta.width;
+      setCurrentWidth(newWidth);
+    }
+  }, [setCurrentWidth]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
@@ -152,21 +170,29 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     var node = state.doc.nodeAt(pos);
     var newTr = state.tr;
     if (node && breakoutSupportedNodes.includes(node.type.name)) {
-      var newBreakoutWidth = Math.max(newWidth, _editorSharedStyles.akEditorDefaultLayoutWidth);
-      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newBreakoutWidth
-      })]);
-      var breakoutResizePayload = {
-        action: _analytics.ACTION.RESIZED,
-        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
-        eventType: _analytics.EVENT_TYPE.TRACK,
-        attributes: {
-          nodeType: node.type.name,
-          prevWidth: originalState.width,
-          newWidth: newBreakoutWidth
-        }
-      };
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      if (currentLayout && ['wide', 'full-width'].includes(currentLayout) && (0, _experiments.editorExperiment)('single_column_layouts', true)) {
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          mode: currentLayout,
+          width: null
+        })]);
+      } else {
+        var newBreakoutWidth = Math.max(newWidth, _editorSharedStyles.akEditorDefaultLayoutWidth);
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: newBreakoutWidth,
+          mode: null
+        })]);
+        var breakoutResizePayload = {
+          action: _analytics.ACTION.RESIZED,
+          actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            nodeType: node.type.name,
+            prevWidth: originalState.width,
+            newWidth: newBreakoutWidth
+          }
+        };
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      }
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
     displayGapCursor(true);
@@ -176,7 +202,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+    setCurrentWidth(null);
+  }, [getPos, editorView, displayGapCursor, setCurrentWidth, currentLayout, editorAnalyticsApi]);
   var handleEscape = (0, _react.useCallback)(function () {
     editorView === null || editorView === void 0 || editorView.focus();
   }, [editorView]);
@@ -282,6 +309,8 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
       left: true,
       right: true
     },
+    snap: snaps || undefined,
+    snapGap: _useBreakoutGuidelines.SNAP_GAP,
     handleStyles: getHandleStyle(nodeType),
     minWidth: minWidth,
     maxWidth: maxWidth
@@ -290,6 +319,7 @@ var BreakoutResizer = exports.BreakoutResizer = function BreakoutResizer(_ref) {
     style: isResizing ? resizingStyles : defaultStyles,
     handleResizeStart: handleResizeStart,
     handleResizeStop: handleResizeStop,
+    handleResize: handleResize,
     childrenDOMRef: getRef,
     resizeRatio: 2,
     isHandleVisible: isSelectionInNode,

package/dist/cjs/resizer/index.js

@@ -22,5 +22,12 @@ Object.defineProperty(exports, "ignoreResizerMutations", {
     return _BreakoutResizer.ignoreResizerMutations;
   }
 });
+Object.defineProperty(exports, "useBreakoutGuidelines", {
+  enumerable: true,
+  get: function get() {
+    return _useBreakoutGuidelines.useBreakoutGuidelines;
+  }
+});
 var _Resizer = _interopRequireDefault(require("./Resizer"));
-var _BreakoutResizer = require("./BreakoutResizer");
+var _BreakoutResizer = require("./BreakoutResizer");
+var _useBreakoutGuidelines = require("./useBreakoutGuidelines");

package/dist/cjs/resizer/useBreakoutGuidelines.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SNAP_GAP = void 0;
+exports.useBreakoutGuidelines = useBreakoutGuidelines;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var SNAP_GAP = exports.SNAP_GAP = 8;
+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 widthState = getEditorWidth();
+  var _useMemo = (0, _react.useMemo)(function () {
+      if (!isResizing) {
+        return {};
+      }
+      var _ref = widthState || {},
+        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;
+      return {
+        wide: wide,
+        fullWidth: fullWidth,
+        lineLength: lineLength
+      };
+    }, [widthState, isResizing]),
+    lineLength = _useMemo.lineLength,
+    wide = _useMemo.wide,
+    fullWidth = _useMemo.fullWidth;
+  var snaps = (0, _react.useMemo)(function () {
+    if (!isResizing) {
+      return null;
+    }
+    var xSnaps = [];
+    if (typeof lineLength === 'number') {
+      xSnaps.push(lineLength);
+    }
+    if (typeof wide === 'number') {
+      xSnaps.push(wide);
+    }
+    if (typeof fullWidth === 'number') {
+      xSnaps.push(fullWidth - _editorSharedStyles.akEditorGutterPadding);
+    }
+    return {
+      x: xSnaps
+    };
+  }, [isResizing, wide, fullWidth, lineLength]);
+  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) {
+      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'
+      });
+    }
+    return guidelines;
+  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  var setCurrentWidth = (0, _react.useCallback)(function (newWidth) {
+    if (typeof newWidth !== 'number') {
+      setCurrentLayout(null);
+      return;
+    }
+    if (lineLength && Math.abs(newWidth - lineLength) < SNAP_GAP / 2) {
+      setCurrentLayout('center');
+    } else if (wide && Math.abs(newWidth - wide) < SNAP_GAP / 2) {
+      setCurrentLayout('wide');
+    } else if (fullWidth && (Math.abs(newWidth - fullWidth + _editorSharedStyles.akEditorGutterPadding) < SNAP_GAP / 2 || newWidth >= fullWidth)) {
+      setCurrentLayout('full-width');
+    } else {
+      setCurrentLayout(null);
+    }
+  }, [lineLength, wide, fullWidth]);
+  return {
+    snaps: snaps,
+    currentLayout: currentLayout,
+    guidelines: guidelines,
+    setCurrentWidth: setCurrentWidth
+  };
+}

package/dist/cjs/styles/shared/smartCard.js

@@ -9,6 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _smartCard = require("./smart-card");
 var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var DATASOURCE_INNER_CONTAINER_CLASSNAME = exports.DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
@@ -16,7 +17,7 @@ var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = exports.FLOATING_TOOLBAR_LINKPICKER_
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var smartCardStyles = exports.smartCardStyles = function smartCardStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\tinput::selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t\tinput::-moz-selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n          box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER,
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\tinput::selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t\tinput::-moz-selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), _smartCard.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, (0, _platformFeatureFlags.fg)('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n          box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? "[data-inlinecard-button-overlay='icon-wrapper-line-height'] span {\n\t\t\t\tline-height: 0;\n\t\t\t}" : '', _editorSharedStyles.akEditorSelectedNodeClassName, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _smartCard.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _smartCard.SmartCardSharedCssClassName.LOADER_WRAPPER,
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
   (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages') ? 'text' : 'pointer',
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration

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 = "102.13.11";
+var packageVersion = "102.14.0";
 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 = "102.13.11";
+const packageVersion = "102.14.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/resizer/BreakoutResizer.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -7,6 +7,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
 import { browser } from '../utils/browser';
 import Resizer from './Resizer';
+import { SNAP_GAP, useBreakoutGuidelines } from './useBreakoutGuidelines';
 const breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 const getHandleStyle = node => {
   const layoutMarginOffset = 12;
@@ -78,6 +79,7 @@ const BreakoutResizer = ({
   disabled,
   getEditorWidth,
   parentRef,
+  displayGuidelines,
   editorAnalyticsApi,
   displayGapCursor
 }) => {
@@ -92,6 +94,17 @@ const BreakoutResizer = ({
   });
   const areResizeMetaKeysPressed = useRef(false);
   const resizerRef = useRef(null);
+  const {
+    snaps,
+    currentLayout,
+    guidelines,
+    setCurrentWidth
+  } = useBreakoutGuidelines(getEditorWidth, isResizing && editorExperiment('single_column_layouts', true));
+  useEffect(() => {
+    if (displayGuidelines) {
+      displayGuidelines(guidelines || []);
+    }
+  }, [displayGuidelines, guidelines]);
 
   // Relying on re-renders caused by selection changes inside/around node
   const isSelectionInNode = useMemo(() => {
@@ -131,6 +144,12 @@ const BreakoutResizer = ({
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
   }, [getEditorWidth, editorView, displayGapCursor]);
+  const handleResize = useCallback((originalState, delta) => {
+    if (editorExperiment('single_column_layouts', true)) {
+      const newWidth = originalState.width + delta.width;
+      setCurrentWidth(newWidth);
+    }
+  }, [setCurrentWidth]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const pos = getPos();
@@ -147,21 +166,29 @@ const BreakoutResizer = ({
     const node = state.doc.nodeAt(pos);
     const newTr = state.tr;
     if (node && breakoutSupportedNodes.includes(node.type.name)) {
-      const newBreakoutWidth = Math.max(newWidth, akEditorDefaultLayoutWidth);
-      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newBreakoutWidth
-      })]);
-      const breakoutResizePayload = {
-        action: ACTION.RESIZED,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          nodeType: node.type.name,
-          prevWidth: originalState.width,
-          newWidth: newBreakoutWidth
-        }
-      };
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      if (currentLayout && ['wide', 'full-width'].includes(currentLayout) && editorExperiment('single_column_layouts', true)) {
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          mode: currentLayout,
+          width: null
+        })]);
+      } else {
+        const newBreakoutWidth = Math.max(newWidth, akEditorDefaultLayoutWidth);
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: newBreakoutWidth,
+          mode: null
+        })]);
+        const breakoutResizePayload = {
+          action: ACTION.RESIZED,
+          actionSubject: ACTION_SUBJECT.ELEMENT,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            nodeType: node.type.name,
+            prevWidth: originalState.width,
+            newWidth: newBreakoutWidth
+          }
+        };
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      }
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
     displayGapCursor(true);
@@ -171,7 +198,8 @@ const BreakoutResizer = ({
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+    setCurrentWidth(null);
+  }, [getPos, editorView, displayGapCursor, setCurrentWidth, currentLayout, editorAnalyticsApi]);
   const handleEscape = useCallback(() => {
     editorView === null || editorView === void 0 ? void 0 : editorView.focus();
   }, [editorView]);
@@ -275,6 +303,8 @@ const BreakoutResizer = ({
       left: true,
       right: true
     },
+    snap: snaps || undefined,
+    snapGap: SNAP_GAP,
     handleStyles: getHandleStyle(nodeType),
     minWidth: minWidth,
     maxWidth: maxWidth
@@ -283,6 +313,7 @@ const BreakoutResizer = ({
     style: isResizing ? resizingStyles : defaultStyles,
     handleResizeStart: handleResizeStart,
     handleResizeStop: handleResizeStop,
+    handleResize: handleResize,
     childrenDOMRef: getRef,
     resizeRatio: 2,
     isHandleVisible: isSelectionInNode,

package/dist/es2019/resizer/index.js

@@ -2,4 +2,5 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 export { default as ResizerNext } from './Resizer';
-export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
+export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
+export { useBreakoutGuidelines } from './useBreakoutGuidelines';

package/dist/es2019/resizer/useBreakoutGuidelines.js

@@ -0,0 +1,122 @@
+import { useCallback, useMemo, useState } from 'react';
+import { akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+export const SNAP_GAP = 8;
+const roundToNearest = (value, interval = 0.5) => Math.round(value / interval) * interval;
+export function useBreakoutGuidelines(getEditorWidth, isResizing) {
+  const widthState = getEditorWidth();
+  const {
+    lineLength,
+    wide,
+    fullWidth
+  } = useMemo(() => {
+    if (!isResizing) {
+      return {};
+    }
+    const {
+      width,
+      lineLength
+    } = widthState || {};
+    const wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
+    const fullWidth = width ? Math.min(width - akEditorGutterPaddingDynamic() * 2) : undefined;
+    return {
+      wide,
+      fullWidth,
+      lineLength
+    };
+  }, [widthState, isResizing]);
+  const snaps = useMemo(() => {
+    if (!isResizing) {
+      return null;
+    }
+    const xSnaps = [];
+    if (typeof lineLength === 'number') {
+      xSnaps.push(lineLength);
+    }
+    if (typeof wide === 'number') {
+      xSnaps.push(wide);
+    }
+    if (typeof fullWidth === 'number') {
+      xSnaps.push(fullWidth - akEditorGutterPadding);
+    }
+    return {
+      x: xSnaps
+    };
+  }, [isResizing, wide, fullWidth, lineLength]);
+  const [currentLayout, setCurrentLayout] = useState(null);
+  const guidelines = useMemo(() => {
+    const guidelines = [];
+    if (!isResizing) {
+      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'
+      });
+    }
+    return guidelines;
+  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  const setCurrentWidth = useCallback(newWidth => {
+    if (typeof newWidth !== 'number') {
+      setCurrentLayout(null);
+      return;
+    }
+    if (lineLength && Math.abs(newWidth - lineLength) < SNAP_GAP / 2) {
+      setCurrentLayout('center');
+    } else if (wide && Math.abs(newWidth - wide) < SNAP_GAP / 2) {
+      setCurrentLayout('wide');
+    } else if (fullWidth && (Math.abs(newWidth - fullWidth + akEditorGutterPadding) < SNAP_GAP / 2 || newWidth >= fullWidth)) {
+      setCurrentLayout('full-width');
+    } else {
+      setCurrentLayout(null);
+    }
+  }, [lineLength, wide, fullWidth]);
+  return {
+    snaps,
+    currentLayout,
+    guidelines,
+    setCurrentWidth
+  };
+}

package/dist/es2019/styles/shared/smartCard.js

@@ -2,6 +2,7 @@
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SmartCardSharedCssClassName } from './smart-card';
 export const DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
@@ -29,6 +30,10 @@ export const smartCardStyles = () => css`
 			}
 		}
 
+		${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1') ? `[data-inlinecard-button-overlay='icon-wrapper-line-height'] span {
+				line-height: 0;
+			}` : ''}
+
 		&.${akEditorSelectedNodeClassName} .${SmartCardSharedCssClassName.LOADER_WRAPPER} > a {
 			${getSelectionStyles([SelectionStyle.BoxShadow])}
 		}

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 = "102.13.11";
+const packageVersion = "102.14.0";
 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 = "102.13.11";
+var packageVersion = "102.14.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/resizer/BreakoutResizer.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useMemo, useRef, useState, useLayoutEffect } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -8,6 +8,7 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics';
 import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles';
 import { browser } from '../utils/browser';
 import Resizer from './Resizer';
+import { SNAP_GAP, useBreakoutGuidelines } from './useBreakoutGuidelines';
 var breakoutSupportedNodes = ['layoutSection', 'expand', 'codeBlock'];
 var getHandleStyle = function getHandleStyle(node) {
   var layoutMarginOffset = 12;
@@ -79,6 +80,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     disabled = _ref.disabled,
     getEditorWidth = _ref.getEditorWidth,
     parentRef = _ref.parentRef,
+    displayGuidelines = _ref.displayGuidelines,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
     displayGapCursor = _ref.displayGapCursor;
   var _useState = useState({
@@ -94,6 +96,16 @@ 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)),
+    snaps = _useBreakoutGuideline.snaps,
+    currentLayout = _useBreakoutGuideline.currentLayout,
+    guidelines = _useBreakoutGuideline.guidelines,
+    setCurrentWidth = _useBreakoutGuideline.setCurrentWidth;
+  useEffect(function () {
+    if (displayGuidelines) {
+      displayGuidelines(guidelines || []);
+    }
+  }, [displayGuidelines, guidelines]);
 
   // Relying on re-renders caused by selection changes inside/around node
   var isSelectionInNode = useMemo(function () {
@@ -130,6 +142,12 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     });
     dispatch(state.tr.setMeta('is-resizer-resizing', true));
   }, [getEditorWidth, editorView, displayGapCursor]);
+  var handleResize = useCallback(function (originalState, delta) {
+    if (editorExperiment('single_column_layouts', true)) {
+      var newWidth = originalState.width + delta.width;
+      setCurrentWidth(newWidth);
+    }
+  }, [setCurrentWidth]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
@@ -142,21 +160,29 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     var node = state.doc.nodeAt(pos);
     var newTr = state.tr;
     if (node && breakoutSupportedNodes.includes(node.type.name)) {
-      var newBreakoutWidth = Math.max(newWidth, akEditorDefaultLayoutWidth);
-      newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
-        width: newBreakoutWidth
-      })]);
-      var breakoutResizePayload = {
-        action: ACTION.RESIZED,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          nodeType: node.type.name,
-          prevWidth: originalState.width,
-          newWidth: newBreakoutWidth
-        }
-      };
-      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      if (currentLayout && ['wide', 'full-width'].includes(currentLayout) && editorExperiment('single_column_layouts', true)) {
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          mode: currentLayout,
+          width: null
+        })]);
+      } else {
+        var newBreakoutWidth = Math.max(newWidth, akEditorDefaultLayoutWidth);
+        newTr.setNodeMarkup(pos, node.type, node.attrs, [breakout.create({
+          width: newBreakoutWidth,
+          mode: null
+        })]);
+        var breakoutResizePayload = {
+          action: ACTION.RESIZED,
+          actionSubject: ACTION_SUBJECT.ELEMENT,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            nodeType: node.type.name,
+            prevWidth: originalState.width,
+            newWidth: newBreakoutWidth
+          }
+        };
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(breakoutResizePayload)(newTr);
+      }
     }
     newTr.setMeta('is-resizer-resizing', false).setMeta('scrollIntoView', false);
     displayGapCursor(true);
@@ -166,7 +192,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
       minWidth: undefined,
       maxWidth: undefined
     });
-  }, [getPos, editorView, displayGapCursor, editorAnalyticsApi]);
+    setCurrentWidth(null);
+  }, [getPos, editorView, displayGapCursor, setCurrentWidth, currentLayout, editorAnalyticsApi]);
   var handleEscape = useCallback(function () {
     editorView === null || editorView === void 0 || editorView.focus();
   }, [editorView]);
@@ -272,6 +299,8 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
       left: true,
       right: true
     },
+    snap: snaps || undefined,
+    snapGap: SNAP_GAP,
     handleStyles: getHandleStyle(nodeType),
     minWidth: minWidth,
     maxWidth: maxWidth
@@ -280,6 +309,7 @@ var BreakoutResizer = function BreakoutResizer(_ref) {
     style: isResizing ? resizingStyles : defaultStyles,
     handleResizeStart: handleResizeStart,
     handleResizeStop: handleResizeStop,
+    handleResize: handleResize,
     childrenDOMRef: getRef,
     resizeRatio: 2,
     isHandleVisible: isSelectionInNode,

package/dist/esm/resizer/index.js

@@ -2,4 +2,5 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 
 export { default as ResizerNext } from './Resizer';
-export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
+export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
+export { useBreakoutGuidelines } from './useBreakoutGuidelines';

package/dist/esm/resizer/useBreakoutGuidelines.js

@@ -0,0 +1,127 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useMemo, useState } from 'react';
+import { akEditorGutterPadding, akEditorGutterPaddingDynamic, breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+export var SNAP_GAP = 8;
+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 widthState = getEditorWidth();
+  var _useMemo = useMemo(function () {
+      if (!isResizing) {
+        return {};
+      }
+      var _ref = widthState || {},
+        width = _ref.width,
+        lineLength = _ref.lineLength;
+      var wide = lineLength ? Math.round(lineLength * breakoutWideScaleRatio) : undefined;
+      var fullWidth = width ? Math.min(width - akEditorGutterPaddingDynamic() * 2) : undefined;
+      return {
+        wide: wide,
+        fullWidth: fullWidth,
+        lineLength: lineLength
+      };
+    }, [widthState, isResizing]),
+    lineLength = _useMemo.lineLength,
+    wide = _useMemo.wide,
+    fullWidth = _useMemo.fullWidth;
+  var snaps = useMemo(function () {
+    if (!isResizing) {
+      return null;
+    }
+    var xSnaps = [];
+    if (typeof lineLength === 'number') {
+      xSnaps.push(lineLength);
+    }
+    if (typeof wide === 'number') {
+      xSnaps.push(wide);
+    }
+    if (typeof fullWidth === 'number') {
+      xSnaps.push(fullWidth - akEditorGutterPadding);
+    }
+    return {
+      x: xSnaps
+    };
+  }, [isResizing, wide, fullWidth, lineLength]);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentLayout = _useState2[0],
+    setCurrentLayout = _useState2[1];
+  var guidelines = useMemo(function () {
+    var guidelines = [];
+    if (!isResizing) {
+      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'
+      });
+    }
+    return guidelines;
+  }, [isResizing, lineLength, wide, fullWidth, currentLayout]);
+  var setCurrentWidth = useCallback(function (newWidth) {
+    if (typeof newWidth !== 'number') {
+      setCurrentLayout(null);
+      return;
+    }
+    if (lineLength && Math.abs(newWidth - lineLength) < SNAP_GAP / 2) {
+      setCurrentLayout('center');
+    } else if (wide && Math.abs(newWidth - wide) < SNAP_GAP / 2) {
+      setCurrentLayout('wide');
+    } else if (fullWidth && (Math.abs(newWidth - fullWidth + akEditorGutterPadding) < SNAP_GAP / 2 || newWidth >= fullWidth)) {
+      setCurrentLayout('full-width');
+    } else {
+      setCurrentLayout(null);
+    }
+  }, [lineLength, wide, fullWidth]);
+  return {
+    snaps: snaps,
+    currentLayout: currentLayout,
+    guidelines: guidelines,
+    setCurrentWidth: setCurrentWidth
+  };
+}

package/dist/esm/styles/shared/smartCard.js

@@ -4,13 +4,14 @@ var _templateObject;
 import { css } from '@emotion/react';
 import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { SmartCardSharedCssClassName } from './smart-card';
 export var DATASOURCE_INNER_CONTAINER_CLASSNAME = 'datasourceView-content-inner-wrap';
 export var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var smartCardStyles = function smartCardStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\tinput::selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t\tinput::-moz-selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, fg('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n          box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER,
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tmax-width: calc(100% - 20px);\n\t\tvertical-align: top;\n\t\tword-break: break-all;\n\t\t", "\n\t\t.card {\n\t\t\tpadding-left: ", ";\n\t\t\tpadding-right: ", ";\n\t\t\tpadding-top: 0.5em;\n\t\t\tpadding-bottom: 0.5em;\n\t\t\tmargin-bottom: -0.5em;\n\n\t\t\t.", " > a:focus {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t&.", " .", " > a {\n\t\t\t", "\n\t\t}\n\t\t.", " > a {\n\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\tz-index: 1;\n\t\t\tposition: relative;\n\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > a {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t\t/* EDM-1717: box-shadow Safari fix start */\n\t\t\t\tz-index: 2;\n\t\t\t\t/* EDM-1717: box-shadow Safari fix end */\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: ", ";\n\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div {\n\t\t\t", "\n\t\t\tborder-radius: ", ";\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " > div {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", ".", " {\n\t\tmax-width: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: ", ";\n\t\t\tborder-radius: ", ";\n\t\t\tborder: 1px solid ", ";\n\t\t\toverflow: hidden;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", " {\n\t\t\t\t", "\n\n\t\t\t\tinput::selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t\tinput::-moz-selection {\n\t\t\t\t\tbackground-color: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&.danger {\n\t\t\t.", " {\n\t\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\t.", " > div {\n\t\t\tcursor: pointer;\n\t\t\ta {\n\t\t\t\tcursor: ", ";\n\t\t\t}\n\t\t\t&::after {\n\t\t\t\ttransition: box-shadow 0s;\n\t\t\t}\n\t\t}\n\n\t\t&.", " .", " > div::after {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\t.media-card-frame::after {\n\t\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t\t\tbackground: ", " !important;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-right::after,\n\t\t\t.richMedia-resize-handle-left::after {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tpadding: 0;\n\t}\n"])), SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, fg('editor_inline_comments_on_inline_nodes') ? ".card-with-comment {\n          background: ".concat("var(--ds-background-accent-yellow-subtler, #F8E6A0)", ";\n          border-bottom: 2px solid ", "var(--ds-border-accent-yellow, #B38600)", ";\n          box-shadow: ", "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)", ";\n        }") : '', "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1') ? "[data-inlinecard-button-overlay='icon-wrapper-line-height'] span {\n\t\t\t\tline-height: 0;\n\t\t\t}" : '', akEditorSelectedNodeClassName, SmartCardSharedCssClassName.LOADER_WRAPPER, getSelectionStyles([SelectionStyle.BoxShadow]), SmartCardSharedCssClassName.LOADER_WRAPPER, SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, SmartCardSharedCssClassName.LOADER_WRAPPER,
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
   fg('linking_platform_smart_links_in_live_pages') ? 'text' : 'pointer',
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration

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 = "102.13.11";
+var packageVersion = "102.14.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EditorAnalyticsAPI } from '../analytics';
+import { GuidelineConfig } from '../guideline';
 import { type EditorContainerWidth, type getPosHandlerNode } from '../types';
 type BreakoutSupportedNodes = 'layoutSection' | 'expand' | 'codeBlock';
 export declare const ignoreResizerMutations: (mutation: MutationRecord | {
@@ -13,7 +14,7 @@ export declare const ignoreResizerMutations: (mutation: MutationRecord | {
  *
  * use experiment platform_editor_advanced_layouts
  */
-declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, editorAnalyticsApi, displayGapCursor, }: {
+declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, displayGuidelines, editorAnalyticsApi, displayGapCursor, }: {
     editorView: EditorView;
     nodeType: BreakoutSupportedNodes;
     getPos: getPosHandlerNode;
@@ -22,6 +23,7 @@ declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled
     getEditorWidth: () => EditorContainerWidth | undefined;
     parentRef?: HTMLElement | undefined;
     editorAnalyticsApi?: EditorAnalyticsAPI | undefined;
+    displayGuidelines?: ((guidelines: GuidelineConfig[]) => void) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
 }) => React.JSX.Element;
 export { BreakoutResizer };

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

@@ -1,3 +1,4 @@
 export { default as ResizerNext } from './Resizer';
 export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
 export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
+export { useBreakoutGuidelines } from './useBreakoutGuidelines';

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

@@ -0,0 +1,10 @@
+import type { GuidelineConfig } from '../guideline';
+import type { EditorContainerWidth } from '../types';
+import type { Snap } from './types';
+export declare const SNAP_GAP = 8;
+export declare function useBreakoutGuidelines(getEditorWidth: () => EditorContainerWidth | undefined, isResizing: boolean): {
+    snaps: Snap | null;
+    currentLayout: "wide" | "full-width" | "center" | null;
+    guidelines: GuidelineConfig[];
+    setCurrentWidth: (newWidth: number | null) => void;
+};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EditorAnalyticsAPI } from '../analytics';
+import { GuidelineConfig } from '../guideline';
 import { type EditorContainerWidth, type getPosHandlerNode } from '../types';
 type BreakoutSupportedNodes = 'layoutSection' | 'expand' | 'codeBlock';
 export declare const ignoreResizerMutations: (mutation: MutationRecord | {
@@ -13,7 +14,7 @@ export declare const ignoreResizerMutations: (mutation: MutationRecord | {
  *
  * use experiment platform_editor_advanced_layouts
  */
-declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, editorAnalyticsApi, displayGapCursor, }: {
+declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled, getEditorWidth, parentRef, displayGuidelines, editorAnalyticsApi, displayGapCursor, }: {
     editorView: EditorView;
     nodeType: BreakoutSupportedNodes;
     getPos: getPosHandlerNode;
@@ -22,6 +23,7 @@ declare const BreakoutResizer: ({ editorView, nodeType, getPos, getRef, disabled
     getEditorWidth: () => EditorContainerWidth | undefined;
     parentRef?: HTMLElement | undefined;
     editorAnalyticsApi?: EditorAnalyticsAPI | undefined;
+    displayGuidelines?: ((guidelines: GuidelineConfig[]) => void) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
 }) => React.JSX.Element;
 export { BreakoutResizer };

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

@@ -1,3 +1,4 @@
 export { default as ResizerNext } from './Resizer';
 export type { HandleAlignmentMethod, HandleHighlight, HandleSize, HandlePositioning, EnabledHandles, HandleResize, Position, Snap, HandleResizeStart, Dimensions, } from './types';
 export { BreakoutResizer, ignoreResizerMutations } from './BreakoutResizer';
+export { useBreakoutGuidelines } from './useBreakoutGuidelines';

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

@@ -0,0 +1,10 @@
+import type { GuidelineConfig } from '../guideline';
+import type { EditorContainerWidth } from '../types';
+import type { Snap } from './types';
+export declare const SNAP_GAP = 8;
+export declare function useBreakoutGuidelines(getEditorWidth: () => EditorContainerWidth | undefined, isResizing: boolean): {
+    snaps: Snap | null;
+    currentLayout: "wide" | "full-width" | "center" | null;
+    guidelines: GuidelineConfig[];
+    setCurrentWidth: (newWidth: number | null) => void;
+};

package/package.json

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