@atlaskit/editor-common 110.31.0 → 110.32.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-common
 
+## 110.32.1
+
+### Patch Changes
+
+- [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
+  EDITOR-2791 bump adf-schema
+- Updated dependencies
+
+## 110.32.0
+
+### Minor Changes
+
+- [`81ac927e830b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81ac927e830b5) -
+  [ux] EDITOR-2866: Add max-width support and guideline wiring for node custom resizers
+
+### Patch Changes
+
+- [`98517a05bfada`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98517a05bfada) -
+  fix styling for full-width and wide media single
+- Updated dependencies
+
+## 110.31.1
+
+### Patch Changes
+
+- [`b14a5fc14cf22`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b14a5fc14cf22) -
+  [ux] EDITOR-2606 copy sync block from renderer should flatten out content instead of creating new
+  reference
+
 ## 110.31.0
 
 ### Minor Changes

package/dist/cjs/messages/breakout.js

@@ -6,6 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  maxWidthLabel: {
+    id: 'fabric.editor.breakoutMaxWidthLabel',
+    defaultMessage: 'Max-width',
+    description: 'Resize current element to max-width mode'
+  },
   fullWidthLabel: {
     id: 'fabric.editor.breakoutFullWidthLabel',
     defaultMessage: 'Full-width',

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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 = "110.30.2";
+var packageVersion = "110.32.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/resizer/ResizerBreakoutModeLabel.js

@@ -34,6 +34,8 @@ var ResizerBreakoutModeLabel = exports.ResizerBreakoutModeLabel = function Resiz
     formatMessage = _useIntl.formatMessage;
   var message = _react.default.useMemo(function () {
     switch (breakoutLayout) {
+      case 'max':
+        return formatMessage(_messages.breakoutMessages.maxWidthLabel);
       case 'full-width':
         return formatMessage(_messages.breakoutMessages.fullWidthLabel);
       case 'wide':

package/dist/cjs/selection/index.js

@@ -58,6 +58,12 @@ Object.defineProperty(exports, "atTheEndOfDoc", {
   }
 });
 exports.createSelectionClickHandler = createSelectionClickHandler;
+Object.defineProperty(exports, "deleteSelectedRange", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.deleteSelectedRange;
+  }
+});
 Object.defineProperty(exports, "endPositionOfParent", {
   enumerable: true,
   get: function get() {

package/dist/cjs/selection/utils.js

@@ -7,10 +7,12 @@ exports.atTheBeginningOfBlock = atTheBeginningOfBlock;
 exports.atTheBeginningOfDoc = atTheBeginningOfDoc;
 exports.atTheEndOfBlock = atTheEndOfBlock;
 exports.atTheEndOfDoc = atTheEndOfDoc;
+exports.deleteSelectedRange = void 0;
 exports.endPositionOfParent = endPositionOfParent;
 exports.isSelectionAtStartOfNode = exports.isSelectionAtEndOfNode = exports.expandSelectionBounds = void 0;
 exports.startPositionOfParent = startPositionOfParent;
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _selection = require("./gap-cursor/selection");
 var isSelectionAtStartOfNode = exports.isSelectionAtStartOfNode = function isSelectionAtStartOfNode($pos, parentNode) {
   if (!parentNode) {
@@ -123,4 +125,27 @@ var expandSelectionBounds = exports.expandSelectionBounds = function expandSelec
     $anchor: $anchor === $from ? $expandedFrom : $expandedTo,
     $head: $head === $to ? $expandedTo : $expandedFrom
   };
+};
+
+/**
+ * Delete what is selected in the given transaction.
+ * @param tr the transaction to delete the selection from
+ * @returns the updated transaction
+ */
+var deleteSelectedRange = exports.deleteSelectedRange = function deleteSelectedRange(tr) {
+  var selection = tr.selection;
+  var from = selection.$from.pos;
+  var to = selection.$to.pos;
+  if (selection instanceof _state.TextSelection) {
+    from = from - 1;
+    to = to + 1;
+  } else if ((0, _utils.isTableSelected)(selection)) {
+    var table = (0, _utils.findTable)(selection);
+    if (table) {
+      from = table.pos;
+      to = table.pos + table.node.nodeSize;
+    }
+  }
+  tr.deleteRange(from, to);
+  return tr;
 };

package/dist/cjs/transforms/index.js

@@ -153,16 +153,16 @@ Object.defineProperty(exports, "transformSliceToRemoveOpenNestedExpand", {
     return _expand.transformSliceToRemoveOpenNestedExpand;
   }
 });
-Object.defineProperty(exports, "transformTaskListToBlockNodes", {
+Object.defineProperty(exports, "transformSyncBlock", {
   enumerable: true,
   get: function get() {
-    return _listTransforms.transformTaskListToBlockNodes;
+    return _syncBlock.transformSyncBlock;
   }
 });
-Object.defineProperty(exports, "transformToNewReferenceSyncBlock", {
+Object.defineProperty(exports, "transformTaskListToBlockNodes", {
   enumerable: true,
   get: function get() {
-    return _syncBlock.transformToNewReferenceSyncBlock;
+    return _listTransforms.transformTaskListToBlockNodes;
   }
 });
 Object.defineProperty(exports, "transformToTaskList", {

package/dist/cjs/transforms/sync-block.js

@@ -4,34 +4,56 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transformToNewReferenceSyncBlock = void 0;
+exports.transformSyncBlock = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _slice = require("../utils/slice");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var transformToNewReferenceSyncBlock = exports.transformToNewReferenceSyncBlock = function transformToNewReferenceSyncBlock(slice, schema) {
+var transformSyncBlockNode = function transformSyncBlockNode(node, schema, isFromEditor) {
+  // if copying from renderer, flatten out the content and remove the sync block
+  if (!isFromEditor) {
+    return node.content;
+  }
+
+  // sync blocks need a unique localId to function correctly
+  var newAttrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
+    localId: _adfSchema.uuid.generate()
+  });
+  return schema.nodes.syncBlock.create(newAttrs, null, (0, _toConsumableArray2.default)(node.marks));
+};
+var transformBodiedSyncBlockNode = function transformBodiedSyncBlockNode(node, schema, isFromEditor) {
+  // if copying from renderer, flatten out the content and remove the bodied sync block
+  if (!isFromEditor) {
+    return node.content;
+  }
+
+  // bodied sync blocks need a unique localId and convert to a reference sync block
+  // when converting we want to be specific about attributes and marks we carry over
+  var newAttrs = {
+    resourceId: node.attrs.resourceId,
+    localId: _adfSchema.uuid.generate()
+  };
+  var newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(function (mark) {
+    var _schema$nodes$syncBlo;
+    return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
+  }) : node.marks; // schema.nodes.syncBlock.markSet is null meaning all marks are allowed
+
+  return schema.nodes.syncBlock.create(newAttrs, null, newMarks);
+};
+
+/**
+ * If we are copying from editor, transform the copied source or reference sync block to a new reference sync block
+ * Otherwise, (e.g. if copying from renderer), flatten out the content and remove the sync block
+ */
+var transformSyncBlock = exports.transformSyncBlock = function transformSyncBlock(slice, schema, pasteSource) {
+  var isFromEditor = pasteSource === 'fabric-editor';
   slice = (0, _slice.mapSlice)(slice, function (node) {
-    // sync blocks need a unique localId to function correctly
     if (node.type === schema.nodes.syncBlock) {
-      var newAttrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
-        localId: _adfSchema.uuid.generate()
-      });
-      return schema.nodes.syncBlock.create(newAttrs, null, (0, _toConsumableArray2.default)(node.marks));
+      return transformSyncBlockNode(node, schema, isFromEditor);
     } else if (node.type === schema.nodes.bodiedSyncBlock) {
-      // bodied sync blocks need a unique localId and convert to a reference sync block
-      // when converting we want to be specific about attributes and marks we carry over
-      var _newAttrs = {
-        resourceId: node.attrs.resourceId,
-        localId: _adfSchema.uuid.generate()
-      };
-      var newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(function (mark) {
-        var _schema$nodes$syncBlo;
-        return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
-      }) : node.marks; // schema.nodes.syncBlock.markSet is null meaning all marks are allowed
-
-      return schema.nodes.syncBlock.create(_newAttrs, null, newMarks);
+      return transformBodiedSyncBlockNode(node, schema, isFromEditor);
     }
     return node;
   });

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

@@ -24,7 +24,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 = "110.30.2";
+var packageVersion = "110.32.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/ui/MediaSingle/styled.js

@@ -15,6 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils = require("../../utils");
 var _breakout = require("../../utils/breakout");
 var _excluded = ["children"];
@@ -154,6 +155,16 @@ function calcMargin(layout) {
       return '24px auto';
   }
 }
+function calcMaxCssForPercentageTypeMedia(layout) {
+  switch (layout) {
+    case 'wide':
+      return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width))";
+    case 'full-width':
+      return "min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width))";
+    default:
+      return 'var(--ak-editor-max-container-width)';
+  }
+}
 function isImageAligned(layout) {
   switch (layout) {
     case 'align-end':
@@ -219,10 +230,11 @@ var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function M
     isInRenderer = _ref$isInRenderer === void 0 ? false : _ref$isInRenderer;
   var calculatedWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension));
   var calculatedMaxWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? "".concat(containerWidth, "px") : calcMaxWidth(layout, containerWidth));
+  var cssMaxWidth = isExtendedResizeExperienceOn ? 'var(--ak-editor-max-container-width)' : calcMaxCssForPercentageTypeMedia(layout);
 
   // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* For nested rich media items, set max-width to 100% */\n\t\ttr &,\n\t\t[data-layout-column] &,\n\t\t[data-node-type='expand'] &,\n\t\t[data-panel-type] &,\n\t\tli & {\n\t\t\tmax-width: 100%;\n\t\t}\n\n\t\twidth: ", ";\n\t\t", "\n\n\t\t", "\n\t\t\n\t\t", "\n\n\t\t&:not(.is-resizing) {\n\t\t\ttransition: width 100ms ease-in;\n\t\t}\n\n\t\tfloat: ", ";\n\t\tmargin: ", ";\n\n\t\t&[class*='not-resizing'] {\n\t\t\t", "\n\t\t}\n\n\t\t", ";\n\t"])), calculatedWidth, layout === 'full-width' &&
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* For nested rich media items, set max-width to 100% */\n\t\ttr &,\n\t\t[data-layout-column] &,\n\t\t[data-node-type='expand'] &,\n\t\t[data-panel-type] &,\n\t\tli & {\n\t\t\tmax-width: 100%;\n\t\t}\n\n\t\twidth: ", ";\n\t\t", "\n\n\t\t", "\n\n\t\t", "\n\n\t\t&:not(.is-resizing) {\n\t\t\ttransition: width 100ms ease-in;\n\t\t}\n\n\t\tfloat: ", ";\n\t\tmargin: ", ";\n\n\t\t&[class*='not-resizing'] {\n\t\t\t", "\n\t\t}\n\n\t\t", ";\n\t"])), calculatedWidth, layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */
@@ -233,7 +245,7 @@ var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function M
     '@container ak-renderer-wrapper (min-width: 1px)': {
       maxWidth: '100cqw'
     }
-  }) : "max-width: ".concat(calculatedMaxWidth, ";"), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout));
+  }) : (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? "max-width: ".concat(cssMaxWidth, ";") : "max-width: ".concat(calculatedMaxWidth, ";"), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,

package/dist/cjs/ui-react/with-react-editor-view-outer-listeners.js

@@ -18,7 +18,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ReactEditorViewContext = _interopRequireDefault(require("./ReactEditorViewContext"));
-var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab", "captureClick"];
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "handleBackspaceDeleteKeydown", "closeOnTab", "captureClick"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -70,6 +70,8 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeOnTab) {
         // The menus should be closed when the tab is pressed as it takes the focus out of the menu
         _this.props.handleEscapeKeydown(evt);
+      } else if ((evt.code === 'Delete' || evt.code === 'Backspace') && _this.props.handleBackspaceDeleteKeydown) {
+        _this.props.handleBackspaceDeleteKeydown(evt);
       }
     });
     return _this;
@@ -86,7 +88,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         document.addEventListener('click', this.handleClick, options);
       }
-      if (this.props.handleEscapeKeydown) {
+      if (this.props.handleEscapeKeydown || this.props.handleBackspaceDeleteKeydown) {
         var _this$props$editorRef;
         // Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
         // Ignored via go/ees005
@@ -111,7 +113,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         document.removeEventListener('click', this.handleClick, options);
       }
-      if (this.props.handleEscapeKeydown) {
+      if (this.props.handleEscapeKeydown || this.props.handleBackspaceDeleteKeydown) {
         var _this$props$editorRef2;
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -141,6 +143,7 @@ function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
       handleEnterKeydown = _ref.handleEnterKeydown,
       handleEscapeKeydown = _ref.handleEscapeKeydown,
+      handleBackspaceDeleteKeydown = _ref.handleBackspaceDeleteKeydown,
       closeOnTab = _ref.closeOnTab,
       captureClick = _ref.captureClick,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -174,6 +177,7 @@ function withReactEditorViewOuterListeners(Component) {
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
         handleEscapeKeydown: handleEscapeKeydown,
+        handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
         closeOnTab: closeOnTab,
         captureClick: captureClick
       }, /*#__PURE__*/_react.default.createElement(Component

package/dist/es2019/messages/breakout.js

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
+  maxWidthLabel: {
+    id: 'fabric.editor.breakoutMaxWidthLabel',
+    defaultMessage: 'Max-width',
+    description: 'Resize current element to max-width mode'
+  },
   fullWidthLabel: {
     id: 'fabric.editor.breakoutFullWidthLabel',
     defaultMessage: 'Full-width',

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

package/dist/es2019/resizer/ResizerBreakoutModeLabel.js

@@ -29,6 +29,8 @@ export const ResizerBreakoutModeLabel = ({
   } = useIntl();
   const message = React.useMemo(() => {
     switch (breakoutLayout) {
+      case 'max':
+        return formatMessage(messages.maxWidthLabel);
       case 'full-width':
         return formatMessage(messages.fullWidthLabel);
       case 'wide':

package/dist/es2019/selection/index.js

@@ -12,7 +12,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
 export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
 export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
 export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
-export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
+export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
 export function getNodeSelectionAnalyticsPayload(selection) {
   if (selection instanceof NodeSelection) {
     return {

package/dist/es2019/selection/utils.js

@@ -1,4 +1,5 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { GapCursorSelection } from './gap-cursor/selection';
 export const isSelectionAtStartOfNode = ($pos, parentNode) => {
   if (!parentNode) {
@@ -123,4 +124,27 @@ export const expandSelectionBounds = ($anchor, $head) => {
     $anchor: $anchor === $from ? $expandedFrom : $expandedTo,
     $head: $head === $to ? $expandedTo : $expandedFrom
   };
+};
+
+/**
+ * Delete what is selected in the given transaction.
+ * @param tr the transaction to delete the selection from
+ * @returns the updated transaction
+ */
+export const deleteSelectedRange = tr => {
+  const selection = tr.selection;
+  let from = selection.$from.pos;
+  let to = selection.$to.pos;
+  if (selection instanceof TextSelection) {
+    from = from - 1;
+    to = to + 1;
+  } else if (isTableSelected(selection)) {
+    const table = findTable(selection);
+    if (table) {
+      from = table.pos;
+      to = table.pos + table.node.nodeSize;
+    }
+  }
+  tr.deleteRange(from, to);
+  return tr;
 };

package/dist/es2019/transforms/index.js

@@ -8,4 +8,4 @@ export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToC
 export { transformSliceToDecisionList } from './decision-list';
 export { transformListStructure, transformBetweenListTypes, transformListRecursively, transformToTaskList, transformTaskListToBlockNodes, getFormattedNode } from './list-transforms';
 export { isBulletOrOrderedList, isTaskList, getSupportedListTypesSet, convertBlockToInlineContent } from './list-utils';
-export { transformToNewReferenceSyncBlock } from './sync-block';
+export { transformSyncBlock } from './sync-block';

package/dist/es2019/transforms/sync-block.js

@@ -1,27 +1,49 @@
 import { uuid } from '@atlaskit/adf-schema';
 import { mapSlice } from '../utils/slice';
-export const transformToNewReferenceSyncBlock = (slice, schema) => {
+const transformSyncBlockNode = (node, schema, isFromEditor) => {
+  // if copying from renderer, flatten out the content and remove the sync block
+  if (!isFromEditor) {
+    return node.content;
+  }
+
+  // sync blocks need a unique localId to function correctly
+  const newAttrs = {
+    ...node.attrs,
+    localId: uuid.generate()
+  };
+  return schema.nodes.syncBlock.create(newAttrs, null, [...node.marks]);
+};
+const transformBodiedSyncBlockNode = (node, schema, isFromEditor) => {
+  // if copying from renderer, flatten out the content and remove the bodied sync block
+  if (!isFromEditor) {
+    return node.content;
+  }
+
+  // bodied sync blocks need a unique localId and convert to a reference sync block
+  // when converting we want to be specific about attributes and marks we carry over
+  const newAttrs = {
+    resourceId: node.attrs.resourceId,
+    localId: uuid.generate()
+  };
+  const newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(mark => {
+    var _schema$nodes$syncBlo;
+    return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
+  }) : node.marks; // schema.nodes.syncBlock.markSet is null meaning all marks are allowed
+
+  return schema.nodes.syncBlock.create(newAttrs, null, newMarks);
+};
+
+/**
+ * If we are copying from editor, transform the copied source or reference sync block to a new reference sync block
+ * Otherwise, (e.g. if copying from renderer), flatten out the content and remove the sync block
+ */
+export const transformSyncBlock = (slice, schema, pasteSource) => {
+  const isFromEditor = pasteSource === 'fabric-editor';
   slice = mapSlice(slice, node => {
-    // sync blocks need a unique localId to function correctly
     if (node.type === schema.nodes.syncBlock) {
-      const newAttrs = {
-        ...node.attrs,
-        localId: uuid.generate()
-      };
-      return schema.nodes.syncBlock.create(newAttrs, null, [...node.marks]);
+      return transformSyncBlockNode(node, schema, isFromEditor);
     } else if (node.type === schema.nodes.bodiedSyncBlock) {
-      // bodied sync blocks need a unique localId and convert to a reference sync block
-      // when converting we want to be specific about attributes and marks we carry over
-      const newAttrs = {
-        resourceId: node.attrs.resourceId,
-        localId: uuid.generate()
-      };
-      const newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(mark => {
-        var _schema$nodes$syncBlo;
-        return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
-      }) : node.marks; // schema.nodes.syncBlock.markSet is null meaning all marks are allowed
-
-      return schema.nodes.syncBlock.create(newAttrs, null, newMarks);
+      return transformBodiedSyncBlockNode(node, schema, isFromEditor);
     }
     return node;
   });

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "110.30.2";
+const packageVersion = "110.32.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/ui/MediaSingle/styled.js

@@ -8,6 +8,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -132,6 +133,16 @@ function calcMargin(layout) {
       return '24px auto';
   }
 }
+function calcMaxCssForPercentageTypeMedia(layout) {
+  switch (layout) {
+    case 'wide':
+      return `min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width))`;
+    case 'full-width':
+      return `min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width))`;
+    default:
+      return 'var(--ak-editor-max-container-width)';
+  }
+}
 function isImageAligned(layout) {
   switch (layout) {
     case 'align-end':
@@ -195,6 +206,7 @@ export const MediaSingleDimensionHelper = ({
 }) => {
   const calculatedWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? `${mediaSingleWidth || width}px` : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension));
   const calculatedMaxWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? `${containerWidth}px` : calcMaxWidth(layout, containerWidth));
+  const cssMaxWidth = isExtendedResizeExperienceOn ? 'var(--ak-editor-max-container-width)' : calcMaxCssForPercentageTypeMedia(layout);
 
   // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
@@ -222,8 +234,8 @@ export const MediaSingleDimensionHelper = ({
     '@container ak-renderer-wrapper (min-width: 1px)': {
       maxWidth: '100cqw'
     }
-  }) : `max-width: ${calculatedMaxWidth};`}
-		
+  }) : expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? `max-width: ${cssMaxWidth};` : `max-width: ${calculatedMaxWidth};`}
+
 		${isExtendedResizeExperienceOn && `&[class*='is-resizing'] {
     .new-file-experience-wrapper {
       box-shadow: none !important;

package/dist/es2019/ui-react/with-react-editor-view-outer-listeners.js

@@ -44,6 +44,8 @@ class WithOutsideClick extends PureComponent {
       } else if (evt.code === 'Tab' && this.props.handleEscapeKeydown && this.props.closeOnTab) {
         // The menus should be closed when the tab is pressed as it takes the focus out of the menu
         this.props.handleEscapeKeydown(evt);
+      } else if ((evt.code === 'Delete' || evt.code === 'Backspace') && this.props.handleBackspaceDeleteKeydown) {
+        this.props.handleBackspaceDeleteKeydown(evt);
       }
     });
   }
@@ -56,7 +58,7 @@ class WithOutsideClick extends PureComponent {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       document.addEventListener('click', this.handleClick, options);
     }
-    if (this.props.handleEscapeKeydown) {
+    if (this.props.handleEscapeKeydown || this.props.handleBackspaceDeleteKeydown) {
       var _this$props$editorRef;
       // Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
       // Ignored via go/ees005
@@ -79,7 +81,7 @@ class WithOutsideClick extends PureComponent {
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
       document.removeEventListener('click', this.handleClick, options);
     }
-    if (this.props.handleEscapeKeydown) {
+    if (this.props.handleEscapeKeydown || this.props.handleBackspaceDeleteKeydown) {
       var _this$props$editorRef2;
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -106,6 +108,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     handleClickOutside,
     handleEnterKeydown,
     handleEscapeKeydown,
+    handleBackspaceDeleteKeydown,
     closeOnTab,
     captureClick,
     ...props
@@ -137,6 +140,7 @@ export default function withReactEditorViewOuterListeners(Component) {
       handleClickOutside: handleClickOutside,
       handleEnterKeydown: handleEnterKeydown,
       handleEscapeKeydown: handleEscapeKeydown,
+      handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
       closeOnTab: closeOnTab,
       captureClick: captureClick
     }, /*#__PURE__*/React.createElement(Component

package/dist/esm/messages/breakout.js

@@ -1,5 +1,10 @@
 import { defineMessages } from 'react-intl-next';
 export var messages = defineMessages({
+  maxWidthLabel: {
+    id: 'fabric.editor.breakoutMaxWidthLabel',
+    defaultMessage: 'Max-width',
+    description: 'Resize current element to max-width mode'
+  },
   fullWidthLabel: {
     id: 'fabric.editor.breakoutFullWidthLabel',
     defaultMessage: 'Full-width',

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

package/dist/esm/resizer/ResizerBreakoutModeLabel.js

@@ -27,6 +27,8 @@ export var ResizerBreakoutModeLabel = function ResizerBreakoutModeLabel(_ref) {
     formatMessage = _useIntl.formatMessage;
   var message = React.useMemo(function () {
     switch (breakoutLayout) {
+      case 'max':
+        return formatMessage(messages.maxWidthLabel);
       case 'full-width':
         return formatMessage(messages.fullWidthLabel);
       case 'wide':

package/dist/esm/selection/index.js

@@ -12,7 +12,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
 export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
 export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
 export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
-export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
+export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent } from './utils';
 export function getNodeSelectionAnalyticsPayload(selection) {
   if (selection instanceof NodeSelection) {
     return {

package/dist/esm/selection/utils.js

@@ -1,4 +1,5 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { GapCursorSelection } from './gap-cursor/selection';
 export var isSelectionAtStartOfNode = function isSelectionAtStartOfNode($pos, parentNode) {
   if (!parentNode) {
@@ -111,4 +112,27 @@ export var expandSelectionBounds = function expandSelectionBounds($anchor, $head
     $anchor: $anchor === $from ? $expandedFrom : $expandedTo,
     $head: $head === $to ? $expandedTo : $expandedFrom
   };
+};
+
+/**
+ * Delete what is selected in the given transaction.
+ * @param tr the transaction to delete the selection from
+ * @returns the updated transaction
+ */
+export var deleteSelectedRange = function deleteSelectedRange(tr) {
+  var selection = tr.selection;
+  var from = selection.$from.pos;
+  var to = selection.$to.pos;
+  if (selection instanceof TextSelection) {
+    from = from - 1;
+    to = to + 1;
+  } else if (isTableSelected(selection)) {
+    var table = findTable(selection);
+    if (table) {
+      from = table.pos;
+      to = table.pos + table.node.nodeSize;
+    }
+  }
+  tr.deleteRange(from, to);
+  return tr;
 };

package/dist/esm/transforms/index.js

@@ -8,4 +8,4 @@ export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToC
 export { transformSliceToDecisionList } from './decision-list';
 export { transformListStructure, transformBetweenListTypes, transformListRecursively, transformToTaskList, transformTaskListToBlockNodes, getFormattedNode } from './list-transforms';
 export { isBulletOrOrderedList, isTaskList, getSupportedListTypesSet, convertBlockToInlineContent } from './list-utils';
-export { transformToNewReferenceSyncBlock } from './sync-block';
+export { transformSyncBlock } from './sync-block';

package/dist/esm/transforms/sync-block.js

@@ -4,27 +4,49 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { uuid } from '@atlaskit/adf-schema';
 import { mapSlice } from '../utils/slice';
-export var transformToNewReferenceSyncBlock = function transformToNewReferenceSyncBlock(slice, schema) {
+var transformSyncBlockNode = function transformSyncBlockNode(node, schema, isFromEditor) {
+  // if copying from renderer, flatten out the content and remove the sync block
+  if (!isFromEditor) {
+    return node.content;
+  }
+
+  // sync blocks need a unique localId to function correctly
+  var newAttrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
+    localId: uuid.generate()
+  });
+  return schema.nodes.syncBlock.create(newAttrs, null, _toConsumableArray(node.marks));
+};
+var transformBodiedSyncBlockNode = function transformBodiedSyncBlockNode(node, schema, isFromEditor) {
+  // if copying from renderer, flatten out the content and remove the bodied sync block
+  if (!isFromEditor) {
+    return node.content;
+  }
+
+  // bodied sync blocks need a unique localId and convert to a reference sync block
+  // when converting we want to be specific about attributes and marks we carry over
+  var newAttrs = {
+    resourceId: node.attrs.resourceId,
+    localId: uuid.generate()
+  };
+  var newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(function (mark) {
+    var _schema$nodes$syncBlo;
+    return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
+  }) : node.marks; // schema.nodes.syncBlock.markSet is null meaning all marks are allowed
+
+  return schema.nodes.syncBlock.create(newAttrs, null, newMarks);
+};
+
+/**
+ * If we are copying from editor, transform the copied source or reference sync block to a new reference sync block
+ * Otherwise, (e.g. if copying from renderer), flatten out the content and remove the sync block
+ */
+export var transformSyncBlock = function transformSyncBlock(slice, schema, pasteSource) {
+  var isFromEditor = pasteSource === 'fabric-editor';
   slice = mapSlice(slice, function (node) {
-    // sync blocks need a unique localId to function correctly
     if (node.type === schema.nodes.syncBlock) {
-      var newAttrs = _objectSpread(_objectSpread({}, node.attrs), {}, {
-        localId: uuid.generate()
-      });
-      return schema.nodes.syncBlock.create(newAttrs, null, _toConsumableArray(node.marks));
+      return transformSyncBlockNode(node, schema, isFromEditor);
     } else if (node.type === schema.nodes.bodiedSyncBlock) {
-      // bodied sync blocks need a unique localId and convert to a reference sync block
-      // when converting we want to be specific about attributes and marks we carry over
-      var _newAttrs = {
-        resourceId: node.attrs.resourceId,
-        localId: uuid.generate()
-      };
-      var newMarks = schema.nodes.syncBlock.markSet ? node.marks.filter(function (mark) {
-        var _schema$nodes$syncBlo;
-        return (_schema$nodes$syncBlo = schema.nodes.syncBlock.markSet) === null || _schema$nodes$syncBlo === void 0 ? void 0 : _schema$nodes$syncBlo.includes(mark.type);
-      }) : node.marks; // schema.nodes.syncBlock.markSet is null meaning all marks are allowed
-
-      return schema.nodes.syncBlock.create(_newAttrs, null, newMarks);
+      return transformBodiedSyncBlockNode(node, schema, isFromEditor);
     }
     return node;
   });

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "110.30.2";
+var packageVersion = "110.32.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/esm/ui/MediaSingle/styled.js

@@ -12,6 +12,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { akEditorDefaultLayoutWidth, akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
@@ -144,6 +145,16 @@ function calcMargin(layout) {
       return '24px auto';
   }
 }
+function calcMaxCssForPercentageTypeMedia(layout) {
+  switch (layout) {
+    case 'wide':
+      return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width))";
+    case 'full-width':
+      return "min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width))";
+    default:
+      return 'var(--ak-editor-max-container-width)';
+  }
+}
 function isImageAligned(layout) {
   switch (layout) {
     case 'align-end':
@@ -209,10 +220,11 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     isInRenderer = _ref$isInRenderer === void 0 ? false : _ref$isInRenderer;
   var calculatedWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension));
   var calculatedMaxWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? "".concat(containerWidth, "px") : calcMaxWidth(layout, containerWidth));
+  var cssMaxWidth = isExtendedResizeExperienceOn ? 'var(--ak-editor-max-container-width)' : calcMaxCssForPercentageTypeMedia(layout);
 
   // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t/* For nested rich media items, set max-width to 100% */\n\t\ttr &,\n\t\t[data-layout-column] &,\n\t\t[data-node-type='expand'] &,\n\t\t[data-panel-type] &,\n\t\tli & {\n\t\t\tmax-width: 100%;\n\t\t}\n\n\t\twidth: ", ";\n\t\t", "\n\n\t\t", "\n\t\t\n\t\t", "\n\n\t\t&:not(.is-resizing) {\n\t\t\ttransition: width 100ms ease-in;\n\t\t}\n\n\t\tfloat: ", ";\n\t\tmargin: ", ";\n\n\t\t&[class*='not-resizing'] {\n\t\t\t", "\n\t\t}\n\n\t\t", ";\n\t"])), calculatedWidth, layout === 'full-width' &&
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t/* For nested rich media items, set max-width to 100% */\n\t\ttr &,\n\t\t[data-layout-column] &,\n\t\t[data-node-type='expand'] &,\n\t\t[data-panel-type] &,\n\t\tli & {\n\t\t\tmax-width: 100%;\n\t\t}\n\n\t\twidth: ", ";\n\t\t", "\n\n\t\t", "\n\n\t\t", "\n\n\t\t&:not(.is-resizing) {\n\t\t\ttransition: width 100ms ease-in;\n\t\t}\n\n\t\tfloat: ", ";\n\t\tmargin: ", ";\n\n\t\t&[class*='not-resizing'] {\n\t\t\t", "\n\t\t}\n\n\t\t", ";\n\t"])), calculatedWidth, layout === 'full-width' &&
   /* This causes issues for new experience where we don't strip layout attributes
    when copying top-level node and pasting into a table/layout,
    because full-width layout will remain, causing node to be edge-to-edge */
@@ -223,7 +235,7 @@ export var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref
     '@container ak-renderer-wrapper (min-width: 1px)': {
       maxWidth: '100cqw'
     }
-  }) : "max-width: ".concat(calculatedMaxWidth, ";"), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout));
+  }) : expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) ? "max-width: ".concat(cssMaxWidth, ";") : "max-width: ".concat(calculatedMaxWidth, ";"), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout));
 };
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
   var hasFallbackContainer = _ref2.hasFallbackContainer,

package/dist/esm/ui-react/with-react-editor-view-outer-listeners.js

@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab", "captureClick"];
+var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "handleBackspaceDeleteKeydown", "closeOnTab", "captureClick"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { PureComponent, useCallback, useEffect, useRef, useState } from 'react';
@@ -60,6 +60,8 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
       } else if (evt.code === 'Tab' && _this.props.handleEscapeKeydown && _this.props.closeOnTab) {
         // The menus should be closed when the tab is pressed as it takes the focus out of the menu
         _this.props.handleEscapeKeydown(evt);
+      } else if ((evt.code === 'Delete' || evt.code === 'Backspace') && _this.props.handleBackspaceDeleteKeydown) {
+        _this.props.handleBackspaceDeleteKeydown(evt);
       }
     });
     return _this;
@@ -76,7 +78,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         document.addEventListener('click', this.handleClick, options);
       }
-      if (this.props.handleEscapeKeydown) {
+      if (this.props.handleEscapeKeydown || this.props.handleBackspaceDeleteKeydown) {
         var _this$props$editorRef;
         // Attached event to the menu so that 'ESC' events from the opened menu also will be handled.
         // Ignored via go/ees005
@@ -101,7 +103,7 @@ var WithOutsideClick = /*#__PURE__*/function (_PureComponent) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         document.removeEventListener('click', this.handleClick, options);
       }
-      if (this.props.handleEscapeKeydown) {
+      if (this.props.handleEscapeKeydown || this.props.handleBackspaceDeleteKeydown) {
         var _this$props$editorRef2;
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -131,6 +133,7 @@ export default function withReactEditorViewOuterListeners(Component) {
     var handleClickOutside = _ref.handleClickOutside,
       handleEnterKeydown = _ref.handleEnterKeydown,
       handleEscapeKeydown = _ref.handleEscapeKeydown,
+      handleBackspaceDeleteKeydown = _ref.handleBackspaceDeleteKeydown,
       closeOnTab = _ref.closeOnTab,
       captureClick = _ref.captureClick,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -164,6 +167,7 @@ export default function withReactEditorViewOuterListeners(Component) {
         handleClickOutside: handleClickOutside,
         handleEnterKeydown: handleEnterKeydown,
         handleEscapeKeydown: handleEscapeKeydown,
+        handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
         closeOnTab: closeOnTab,
         captureClick: captureClick
       }, /*#__PURE__*/React.createElement(Component

package/dist/types/messages/breakout.d.ts

@@ -1,4 +1,9 @@
 export declare const messages: {
+    maxWidthLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     fullWidthLabel: {
         id: string;
         defaultMessage: string;

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

@@ -11,7 +11,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
 export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
 export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
 export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
-export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
+export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
 export declare function getNodeSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
 export declare function getAllSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
 export declare function getCellSelectionAnalyticsPayload(state: EditorState): AnalyticsEventPayload | undefined;

package/dist/types/selection/utils.d.ts

@@ -1,5 +1,5 @@
 import type { ResolvedPos, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const isSelectionAtStartOfNode: ($pos: ResolvedPos, parentNode?: PMNode) => boolean;
 export declare const isSelectionAtEndOfNode: ($pos: ResolvedPos, parentNode?: PMNode) => boolean;
 export declare function atTheEndOfDoc(state: EditorState): boolean;
@@ -18,3 +18,9 @@ export declare const expandSelectionBounds: ($anchor: ResolvedPos, $head: Resolv
     $anchor: ResolvedPos;
     $head: ResolvedPos;
 };
+/**
+ * Delete what is selected in the given transaction.
+ * @param tr the transaction to delete the selection from
+ * @returns the updated transaction
+ */
+export declare const deleteSelectedRange: (tr: Transaction) => Transaction;

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

@@ -5,5 +5,5 @@ export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToC
 export { transformSliceToDecisionList } from './decision-list';
 export { transformListStructure, transformBetweenListTypes, transformListRecursively, transformToTaskList, transformTaskListToBlockNodes, getFormattedNode, } from './list-transforms';
 export { isBulletOrOrderedList, isTaskList, getSupportedListTypesSet, convertBlockToInlineContent, } from './list-utils';
-export { transformToNewReferenceSyncBlock } from './sync-block';
+export { transformSyncBlock } from './sync-block';
 export type { TransformContext, TransformFunction } from './list-types';

package/dist/types/transforms/sync-block.d.ts

@@ -1,2 +1,7 @@
 import type { Schema, Slice } from '@atlaskit/editor-prosemirror/model';
-export declare const transformToNewReferenceSyncBlock: (slice: Slice, schema: Schema) => Slice;
+import type { PasteSource } from '../analytics';
+/**
+ * If we are copying from editor, transform the copied source or reference sync block to a new reference sync block
+ * Otherwise, (e.g. if copying from renderer), flatten out the content and remove the sync block
+ */
+export declare const transformSyncBlock: (slice: Slice, schema: Schema, pasteSource: PasteSource) => Slice;

package/dist/types/types/breakout.d.ts

@@ -1 +1 @@
-export type BreakoutMode = 'wide' | 'full-width' | 'center';
+export type BreakoutMode = 'wide' | 'full-width' | 'max' | 'center';

package/dist/types/ui/MediaSingle/styled.d.ts

@@ -60,6 +60,7 @@ export interface MediaSingleWrapperProps {
     fullWidthMode?: boolean;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
     isExtendedResizeExperienceOn?: boolean;
+    isInRenderer?: boolean;
     isInsideOfInlineExtension?: boolean;
     isNestedNode?: boolean;
     isResized?: boolean;
@@ -72,7 +73,6 @@ export interface MediaSingleWrapperProps {
      */
     pctWidth?: number;
     width?: number;
-    isInRenderer?: boolean;
 }
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still

package/dist/types/ui-react/with-react-editor-view-outer-listeners.d.ts

@@ -9,6 +9,7 @@ export interface WithOutsideClickProps {
      */
     captureClick?: boolean;
     closeOnTab?: boolean;
+    handleBackspaceDeleteKeydown?: SimpleEventHandler<KeyboardEvent>;
     handleClickOutside?: SimpleEventHandler<MouseEvent>;
     handleEnterKeydown?: SimpleEventHandler<KeyboardEvent>;
     handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;

package/dist/types/utils/breakout.d.ts

@@ -59,7 +59,7 @@ export declare function calculateBreakoutStyles({ mode, widthStateLineLength, wi
     justifyContent?: undefined;
 };
 export declare function calcBreakoutWidthPx(mode: BreakoutMarkAttrs['mode'], widthStateWidth?: number, padding?: number): number;
-export declare const getNextBreakoutMode: (currentMode?: BreakoutMode) => BreakoutMode;
+export declare const getNextBreakoutMode: (currentMode?: BreakoutMode) => Exclude<BreakoutMode, "max">;
 export declare const getTitle: (layout?: BreakoutMode) => {
     id: string;
     defaultMessage: string;

package/dist/types-ts4.5/messages/breakout.d.ts

@@ -1,4 +1,9 @@
 export declare const messages: {
+    maxWidthLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     fullWidthLabel: {
         id: string;
         defaultMessage: string;

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

@@ -11,7 +11,7 @@ export { isIgnored } from './gap-cursor/utils/is-ignored';
 export { isValidTargetNode } from './gap-cursor/utils/is-valid-target-node';
 export { setGapCursorSelection } from './gap-cursor/utils/setGapCursorSelection';
 export { hideCaretModifier, gapCursorStyles } from './gap-cursor/styles';
-export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
+export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, deleteSelectedRange, endPositionOfParent, expandSelectionBounds, isSelectionAtEndOfNode, isSelectionAtStartOfNode, startPositionOfParent, } from './utils';
 export declare function getNodeSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
 export declare function getAllSelectionAnalyticsPayload(selection: Selection): AnalyticsEventPayload | undefined;
 export declare function getCellSelectionAnalyticsPayload(state: EditorState): AnalyticsEventPayload | undefined;

package/dist/types-ts4.5/selection/utils.d.ts

@@ -1,5 +1,5 @@
 import type { ResolvedPos, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const isSelectionAtStartOfNode: ($pos: ResolvedPos, parentNode?: PMNode) => boolean;
 export declare const isSelectionAtEndOfNode: ($pos: ResolvedPos, parentNode?: PMNode) => boolean;
 export declare function atTheEndOfDoc(state: EditorState): boolean;
@@ -18,3 +18,9 @@ export declare const expandSelectionBounds: ($anchor: ResolvedPos, $head: Resolv
     $anchor: ResolvedPos;
     $head: ResolvedPos;
 };
+/**
+ * Delete what is selected in the given transaction.
+ * @param tr the transaction to delete the selection from
+ * @returns the updated transaction
+ */
+export declare const deleteSelectedRange: (tr: Transaction) => Transaction;

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

@@ -5,5 +5,5 @@ export { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToC
 export { transformSliceToDecisionList } from './decision-list';
 export { transformListStructure, transformBetweenListTypes, transformListRecursively, transformToTaskList, transformTaskListToBlockNodes, getFormattedNode, } from './list-transforms';
 export { isBulletOrOrderedList, isTaskList, getSupportedListTypesSet, convertBlockToInlineContent, } from './list-utils';
-export { transformToNewReferenceSyncBlock } from './sync-block';
+export { transformSyncBlock } from './sync-block';
 export type { TransformContext, TransformFunction } from './list-types';

package/dist/types-ts4.5/transforms/sync-block.d.ts

@@ -1,2 +1,7 @@
 import type { Schema, Slice } from '@atlaskit/editor-prosemirror/model';
-export declare const transformToNewReferenceSyncBlock: (slice: Slice, schema: Schema) => Slice;
+import type { PasteSource } from '../analytics';
+/**
+ * If we are copying from editor, transform the copied source or reference sync block to a new reference sync block
+ * Otherwise, (e.g. if copying from renderer), flatten out the content and remove the sync block
+ */
+export declare const transformSyncBlock: (slice: Slice, schema: Schema, pasteSource: PasteSource) => Slice;

package/dist/types-ts4.5/types/breakout.d.ts

@@ -1 +1 @@
-export type BreakoutMode = 'wide' | 'full-width' | 'center';
+export type BreakoutMode = 'wide' | 'full-width' | 'max' | 'center';

package/dist/types-ts4.5/ui/MediaSingle/styled.d.ts

@@ -60,6 +60,7 @@ export interface MediaSingleWrapperProps {
     fullWidthMode?: boolean;
     innerRef?: ((elem: HTMLDivElement) => void) | RefObject<HTMLDivElement>;
     isExtendedResizeExperienceOn?: boolean;
+    isInRenderer?: boolean;
     isInsideOfInlineExtension?: boolean;
     isNestedNode?: boolean;
     isResized?: boolean;
@@ -72,7 +73,6 @@ export interface MediaSingleWrapperProps {
      */
     pctWidth?: number;
     width?: number;
-    isInRenderer?: boolean;
 }
 /**
  * Can't use `.attrs` to handle highly dynamic styles because we are still

package/dist/types-ts4.5/ui-react/with-react-editor-view-outer-listeners.d.ts

@@ -9,6 +9,7 @@ export interface WithOutsideClickProps {
      */
     captureClick?: boolean;
     closeOnTab?: boolean;
+    handleBackspaceDeleteKeydown?: SimpleEventHandler<KeyboardEvent>;
     handleClickOutside?: SimpleEventHandler<MouseEvent>;
     handleEnterKeydown?: SimpleEventHandler<KeyboardEvent>;
     handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;

package/dist/types-ts4.5/utils/breakout.d.ts

@@ -59,7 +59,7 @@ export declare function calculateBreakoutStyles({ mode, widthStateLineLength, wi
     justifyContent?: undefined;
 };
 export declare function calcBreakoutWidthPx(mode: BreakoutMarkAttrs['mode'], widthStateWidth?: number, padding?: number): number;
-export declare const getNextBreakoutMode: (currentMode?: BreakoutMode) => BreakoutMode;
+export declare const getNextBreakoutMode: (currentMode?: BreakoutMode) => Exclude<BreakoutMode, "max">;
 export declare const getTitle: (layout?: BreakoutMode) => {
     id: string;
     defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "110.31.0",
+	"version": "110.32.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/activity-provider": "^2.5.0",
-		"@atlaskit/adf-schema": "^51.3.2",
+		"@atlaskit/adf-schema": "^51.4.0",
 		"@atlaskit/adf-utils": "^19.26.0",
 		"@atlaskit/afm-i18n-platform-editor-editor-common": "2.10.0",
 		"@atlaskit/analytics-listeners": "^9.1.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.9.0",
+		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.17.0",
 		"@atlaskit/editor-toolbar-model": "^0.2.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-datasource": "^4.30.0",
 		"@atlaskit/link-picker": "^3.16.0",
-		"@atlaskit/media-card": "^79.7.0",
+		"@atlaskit/media-card": "^79.8.0",
 		"@atlaskit/media-client": "^35.6.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
@@ -73,7 +73,7 @@
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/profilecard": "^24.21.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/react-ufo": "^4.14.0",
+		"@atlaskit/react-ufo": "^4.15.0",
 		"@atlaskit/section-message": "^8.9.0",
 		"@atlaskit/smart-card": "^43.7.0",
 		"@atlaskit/smart-user-picker": "^8.4.0",
@@ -84,7 +84,7 @@
 		"@atlaskit/theme": "^21.0.0",
 		"@atlaskit/tmp-editor-statsig": "^13.38.0",
 		"@atlaskit/tokens": "^8.0.0",
-		"@atlaskit/tooltip": "^20.8.0",
+		"@atlaskit/tooltip": "^20.9.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/width-detector": "^5.0.0",
 		"@babel/runtime": "^7.0.0",