@atlaskit/editor-common 102.13.10 → 102.14.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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
+
+- [#133639](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133639)
+  [`371bad9b8ae73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/371bad9b8ae73) -
+  [ux] Increase the space between column drag handle and the Text Formatting toolbar.
+
 ## 102.13.10
 
 ### Patch Changes

package/dist/cjs/keymaps/index.js

@@ -102,8 +102,8 @@ Object.defineProperty(exports, "keymap", {
 exports.makeKeyMapArrayWithCommon = makeKeyMapArrayWithCommon;
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
-exports.splitListItem = exports.splitCodeBlock = exports.space = exports.showElementDragHandle = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectNode = exports.selectColumn = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
-exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHighlightPalette = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = void 0;
+exports.splitCodeBlock = exports.space = exports.showElementDragHandle = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectNode = exports.selectColumn = exports.redoAlt = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
+exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = exports.toggleHighlightPalette = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = void 0;
 exports.tooltip = tooltip;
 exports.undo = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -158,6 +158,7 @@ var moveLeft = exports.moveLeft = makeKeyMapWithCommon('Move left', 'ArrowLeft')
 var moveRight = exports.moveRight = makeKeyMapWithCommon('Move right', 'ArrowRight');
 var indentList = exports.indentList = makeKeyMapWithCommon('Indent List', 'Tab');
 var outdentList = exports.outdentList = makeKeyMapWithCommon('Outdent List', 'Shift-Tab');
+var redoAlt = exports.redoAlt = makeKeyMapWithCommon('Redo', 'Mod-y');
 var redo = exports.redo = makeKeymap('Redo', 'Ctrl-y', 'Mod-Shift-z');
 var openHelp = exports.openHelp = makeKeyMapWithCommon('Open Help', 'Mod-/');
 var addLink = exports.addLink = makeKeyMapWithCommon('Link', 'Mod-k');

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

package/dist/cjs/utils/calculate-toolbar-position.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionAboveSelection = void 0;
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var MAXIMUM_BROWSER_SCROLLBAR_WIDTH = 20;
 
 /*
@@ -160,6 +161,7 @@ var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, too
 };
 var cellSelectionToolbarCffsetTop = 10;
 var scrollbarWidth = 20;
+var offsetTopOnColumnSelection = 4;
 var calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionOnCellSelection = function calculateToolbarPositionOnCellSelection(toolbarTitle) {
   return function (editorView, nextPos) {
     var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
@@ -224,6 +226,12 @@ var calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionOn
       } else {
         left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
       }
+
+      // When column is selected, adjust top position to ensure that the toolbar does not
+      // touch column drag handle
+      if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
+        top = top - offsetTopOnColumnSelection;
+      }
     }
     var adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
     if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {

package/dist/es2019/keymaps/index.js

@@ -44,6 +44,7 @@ export const moveLeft = makeKeyMapWithCommon('Move left', 'ArrowLeft');
 export const moveRight = makeKeyMapWithCommon('Move right', 'ArrowRight');
 export const indentList = makeKeyMapWithCommon('Indent List', 'Tab');
 export const outdentList = makeKeyMapWithCommon('Outdent List', 'Shift-Tab');
+export const redoAlt = makeKeyMapWithCommon('Redo', 'Mod-y');
 export const redo = makeKeymap('Redo', 'Ctrl-y', 'Mod-Shift-z');
 export const openHelp = makeKeyMapWithCommon('Open Help', 'Mod-/');
 export const addLink = makeKeyMapWithCommon('Link', 'Mod-k');

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.10";
+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';