@atlaskit/editor-common 74.32.1 → 74.34.0

package/dist/cjs/utils/editor-core-utils.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isElementInTableCell = exports.extractSliceFromStep = void 0;
+exports.extractSliceFromStep = void 0;
+exports.filterChildrenBetween = filterChildrenBetween;
+exports.isElementInTableCell = void 0;
 exports.isEmptyParagraph = isEmptyParagraph;
 exports.isValidPosition = exports.isTextSelection = exports.isLastItemMediaGroup = exports.isInLayoutColumn = void 0;
 exports.nonNullable = nonNullable;
-exports.setNodeSelection = void 0;
+exports.setNodeSelection = exports.removeBlockMarks = void 0;
 exports.setTextSelection = setTextSelection;
 exports.stepAddsOneOf = stepAddsOneOf;
 exports.stepHasSlice = void 0;
@@ -103,4 +105,52 @@ exports.isValidPosition = isValidPosition;
 var isInLayoutColumn = function isInLayoutColumn(state) {
   return (0, _utils.hasParentNodeOfType)(state.schema.nodes.layoutSection)(state.selection);
 };
-exports.isInLayoutColumn = isInLayoutColumn;
+exports.isInLayoutColumn = isInLayoutColumn;
+function filterChildrenBetween(doc, from, to, predicate) {
+  var results = [];
+  doc.nodesBetween(from, to, function (node, pos, parent) {
+    if (predicate(node, pos, parent)) {
+      results.push({
+        node: node,
+        pos: pos
+      });
+    }
+  });
+  return results;
+}
+var removeBlockMarks = function removeBlockMarks(state, marks) {
+  var selection = state.selection,
+    schema = state.schema;
+  var tr = state.tr;
+
+  // Marks might not exist in Schema
+  var marksToRemove = marks.filter(Boolean);
+  if (marksToRemove.length === 0) {
+    return undefined;
+  }
+
+  /** Saves an extra dispatch */
+  var blockMarksExists = false;
+  var hasMark = function hasMark(mark) {
+    return marksToRemove.indexOf(mark.type) > -1;
+  };
+  /**
+   * When you need to toggle the selection
+   * when another type which does not allow alignment is applied
+   */
+  state.doc.nodesBetween(selection.from, selection.to, function (node, pos) {
+    if (node.type === schema.nodes.paragraph && node.marks.some(hasMark)) {
+      blockMarksExists = true;
+      var resolvedPos = state.doc.resolve(pos);
+      var withoutBlockMarks = node.marks.filter(not(hasMark));
+      tr = tr.setNodeMarkup(resolvedPos.pos, undefined, node.attrs, withoutBlockMarks);
+    }
+  });
+  return blockMarksExists ? tr : undefined;
+};
+exports.removeBlockMarks = removeBlockMarks;
+var not = function not(fn) {
+  return function (arg) {
+    return !fn(arg);
+  };
+};

package/dist/cjs/utils/index.js

@@ -226,6 +226,36 @@ Object.defineProperty(exports, "createCompareNodes", {
     return _compareNodes.createCompareNodes;
   }
 });
+Object.defineProperty(exports, "createNewParagraphAbove", {
+  enumerable: true,
+  get: function get() {
+    return _commands.createNewParagraphAbove;
+  }
+});
+Object.defineProperty(exports, "createNewParagraphBelow", {
+  enumerable: true,
+  get: function get() {
+    return _commands.createNewParagraphBelow;
+  }
+});
+Object.defineProperty(exports, "createParagraphNear", {
+  enumerable: true,
+  get: function get() {
+    return _commands.createParagraphNear;
+  }
+});
+Object.defineProperty(exports, "createRule", {
+  enumerable: true,
+  get: function get() {
+    return _inputRules.createRule;
+  }
+});
+Object.defineProperty(exports, "createWrappingJoinRule", {
+  enumerable: true,
+  get: function get() {
+    return _inputRules.createWrappingJoinRule;
+  }
+});
 Object.defineProperty(exports, "deleteEmptyParagraphAndMoveBlockUp", {
   enumerable: true,
   get: function get() {
@@ -238,6 +268,12 @@ Object.defineProperty(exports, "extractSliceFromStep", {
     return _editorCoreUtils.extractSliceFromStep;
   }
 });
+Object.defineProperty(exports, "filterChildrenBetween", {
+  enumerable: true,
+  get: function get() {
+    return _editorCoreUtils.filterChildrenBetween;
+  }
+});
 Object.defineProperty(exports, "filterCommand", {
   enumerable: true,
   get: function get() {
@@ -454,6 +490,12 @@ Object.defineProperty(exports, "insertContentDeleteRange", {
     return _commands.insertContentDeleteRange;
   }
 });
+Object.defineProperty(exports, "insertNewLineWithAnalytics", {
+  enumerable: true,
+  get: function get() {
+    return _commands.insertNewLineWithAnalytics;
+  }
+});
 Object.defineProperty(exports, "isBulletList", {
   enumerable: true,
   get: function get() {
@@ -694,6 +736,12 @@ Object.defineProperty(exports, "nonNullable", {
     return _editorCoreUtils.nonNullable;
   }
 });
+Object.defineProperty(exports, "nonWrappedLayouts", {
+  enumerable: true,
+  get: function get() {
+    return _richMediaUtils.nonWrappedLayouts;
+  }
+});
 Object.defineProperty(exports, "normalizeUrl", {
   enumerable: true,
   get: function get() {
@@ -719,6 +767,12 @@ Object.defineProperty(exports, "processRawValue", {
     return _document.processRawValue;
   }
 });
+Object.defineProperty(exports, "removeBlockMarks", {
+  enumerable: true,
+  get: function get() {
+    return _editorCoreUtils.removeBlockMarks;
+  }
+});
 Object.defineProperty(exports, "removeConnectedNodes", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/input-rules.js

@@ -4,8 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.inputRuleWithAnalytics = void 0;
+exports.inputRuleWithAnalytics = exports.createWrappingJoinRule = exports.createRule = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _history = require("@atlaskit/editor-prosemirror/history");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
+var _analytics = require("../analytics");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // Roughly based on atlassian-frontend/packages/editor/editor-core/src/utils/input-rules.ts but with the Editor Analytics API that's injected in plugins
@@ -23,4 +26,47 @@ var inputRuleWithAnalytics = function inputRuleWithAnalytics(getPayload, analyti
     });
   };
 };
-exports.inputRuleWithAnalytics = inputRuleWithAnalytics;
+exports.inputRuleWithAnalytics = inputRuleWithAnalytics;
+var createWrappingJoinRule = function createWrappingJoinRule(_ref) {
+  var match = _ref.match,
+    nodeType = _ref.nodeType,
+    getAttrs = _ref.getAttrs,
+    joinPredicate = _ref.joinPredicate;
+  var handler = function handler(state, match, start, end) {
+    var attrs = (getAttrs instanceof Function ? getAttrs(match) : getAttrs) || {};
+    var tr = state.tr;
+    var fixedStart = Math.max(start, 1);
+    tr.delete(fixedStart, end);
+    var $start = tr.doc.resolve(fixedStart);
+    var range = $start.blockRange();
+    var wrapping = range && (0, _transform.findWrapping)(range, nodeType, attrs);
+    if (!wrapping || !range) {
+      return null;
+    }
+    var parentNodePosMapped = tr.mapping.map(range.start);
+    var parentNode = tr.doc.nodeAt(parentNodePosMapped);
+    var lastWrap = wrapping[wrapping.length - 1];
+    if (parentNode && lastWrap) {
+      var allowedMarks = lastWrap.type.allowedMarks(parentNode.marks) || [];
+      tr.setNodeMarkup(parentNodePosMapped, parentNode.type, parentNode.attrs, allowedMarks);
+    }
+    tr.wrap(range, wrapping);
+    var before = tr.doc.resolve(fixedStart - 1).nodeBefore;
+    if (before && before.type === nodeType && (0, _transform.canJoin)(tr.doc, fixedStart - 1) && (!joinPredicate || joinPredicate(match, before, _analytics.JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST.JOINED_TO_LIST_ABOVE))) {
+      tr.join(fixedStart - 1);
+    }
+    return tr;
+  };
+  return createRule(match, handler);
+};
+exports.createWrappingJoinRule = createWrappingJoinRule;
+var createRule = function createRule(match, handler) {
+  return {
+    match: match,
+    handler: handler,
+    onHandlerApply: function onHandlerApply(_state, tr) {
+      (0, _history.closeHistory)(tr);
+    }
+  };
+};
+exports.createRule = createRule;

package/dist/cjs/utils/rich-media-utils.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.alignAttributes = void 0;
 exports.calculateSnapPoints = calculateSnapPoints;
-exports.nonWrappedLayouts = exports.isRichMediaInsideOfBlockNode = exports.floatingLayouts = void 0;
+exports.shouldAddDefaultWrappedWidth = exports.nonWrappedLayouts = exports.isRichMediaInsideOfBlockNode = exports.floatingLayouts = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _MediaSingle = require("../ui/MediaSingle");
 var _grid = require("../ui/MediaSingle/grid");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
+  return _grid.wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
+};
+exports.shouldAddDefaultWrappedWidth = shouldAddDefaultWrappedWidth;
 var nonWrappedLayouts = ['center', 'wide', 'full-width'];
 exports.nonWrappedLayouts = nonWrappedLayouts;
 var floatingLayouts = ['wrap-left', 'wrap-right'];
@@ -40,7 +43,7 @@ var alignAttributes = function alignAttributes(layout, oldAttrs) {
   var newLayoutIsNonWrapped = nonWrappedLayouts.indexOf(layout) > -1;
   var newLayoutIsWrapped = _grid.wrappedLayouts.indexOf(layout) > -1;
   var oldLayoutIsWrapped = _grid.wrappedLayouts.indexOf(oldLayout) > -1;
-  if (oldLayoutIsNonWrapped && (0, _MediaSingle.shouldAddDefaultWrappedWidth)(layout, originalWidth, lineLength)) {
+  if (oldLayoutIsNonWrapped && shouldAddDefaultWrappedWidth(layout, originalWidth, lineLength)) {
     // 'full-width' or 'wide' or 'center' -> 'wrap-left' or 'wrap-right' or 'align-end' or 'align-start'
     if (!width || width >= 100 || oldLayout !== 'center' // == 'full-width' or 'wide'
     ) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "74.32.1",
+	"version": "74.34.0",
 	"sideEffects": false
 }

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -8,10 +8,11 @@ import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
 import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { insideTable } from '../../core-utils';
 import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
-import { alignAttributes, isInLayoutColumn } from '../../utils';
+import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../utils';
 
 // Workaround as we don't want to import this package into `editor-common`
 // We'll get type errors if this gets out of sync with `editor-plugin-width`.
@@ -81,7 +82,12 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
       return false;
     }
     const nodeWidth = getNodeWidth(node, state.schema);
-    const newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    const newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ?
+    // with extended experience, change alignment does not change media single width
+    {
+      ...node.attrs,
+      layout
+    } : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
     const tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
     tr.setMeta('scrollIntoView', false);
     // when image captions are enabled, the wrong node gets selected after
@@ -120,7 +126,13 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
     return true;
   };
 };
-const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) => icons.map(toolbarItem => {
+const getToolbarLayout = layout => {
+  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
+    return 'center';
+  }
+  return layout;
+};
+const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) => icons.map(toolbarItem => {
   const {
     id,
     value
@@ -130,8 +142,11 @@ const mapIconsToToolbarItem = (icons, layout, intl, nodeType, widthPluginDepende
     type: 'button',
     icon: toolbarItem.icon,
     title: intl.formatMessage(layoutToMessages[value]),
-    selected: layout === value,
-    onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
+    selected: getToolbarLayout(layout) === value,
+    onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi),
+    ...(isChangingLayoutDisabled && {
+      disabled: value !== 'center'
+    })
   };
 });
 const shouldHideLayoutToolbar = (selection, {
@@ -139,7 +154,7 @@ const shouldHideLayoutToolbar = (selection, {
 }, allowResizingInTables) => {
   return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand, ...(allowResizingInTables ? [] : [nodes.table])].filter(Boolean))(selection);
 };
-const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true) => {
+const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables, allowWrapping = true, allowAlignment = true, isChangingLayoutDisabled) => {
   const {
     selection
   } = state;
@@ -149,8 +164,8 @@ const buildLayoutButtons = (state, intl, nodeType, widthPluginDependencyApi, ana
   const {
     layout
   } = selection.node.attrs;
-  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
-  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  const alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
+  const wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
   const breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
   const items = [...alignmentToolbarItems, ...getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping), ...wrappingToolbarItems, ...getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing), ...breakOutToolbarItems];
   return items;

package/dist/es2019/guideline/index.js

@@ -3,4 +3,5 @@ export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fix
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
+export { getSnapWidth, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth } from './utils';

package/dist/es2019/keymaps/index.js

@@ -77,7 +77,7 @@ const arrowKeysMap = {
 const tooltipShortcutStyle = css`
   border-radius: 2px;
   background-color: ${`var(--ds-background-inverse-subtle, ${N400})`};
-  padding: 0 2px;
+  padding: 0 ${"var(--ds-space-025, 2px)"};
 
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
@@ -205,4 +205,5 @@ export function findKeyMapForBrowser(keyMap) {
   }
   return;
 }
-export { DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from './consts';
+export { DOWN, HEADING_KEYS, KEY_0, KEY_1, KEY_2, KEY_3, KEY_4, KEY_5, KEY_6, LEFT, RIGHT, UP } from './consts';
+export { keymap } from './keymap';

package/dist/es2019/keymaps/keymap.js

@@ -0,0 +1,33 @@
+import { base, keyName } from 'w3c-keyname';
+import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
+import { SafePlugin } from '../safe-plugin';
+
+/**
+ * A workaround for mostly Cyrillic but should have a positive affect
+ * on other languages / layouts. Attempts a similar approach to OS X.
+ * @see ED-7310
+ * @see https://github.com/ProseMirror/prosemirror/issues/957
+ * @param bindings
+ */
+export function keymap(bindings) {
+  return new SafePlugin({
+    props: {
+      handleKeyDown(view, event) {
+        const name = keyName(event);
+        let keyboardEvent = event;
+        if (event.ctrlKey && name.length === 1 &&
+        // Check the unicode of the character to
+        // assert that its not an ASCII character.
+        // These are characters outside Latin's range.
+        /[^\u0000-\u007f]/.test(name)) {
+          keyboardEvent = new KeyboardEvent('keydown', {
+            key: base[event.keyCode],
+            code: event.code,
+            ctrlKey: true
+          });
+        }
+        return keydownHandler(bindings)(view, keyboardEvent);
+      }
+    }
+  });
+}

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 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 = "74.32.1";
+const packageVersion = "74.34.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/styles/shared/media-single.js

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const richMediaClassName = 'rich-media-item';
 const wrappedMediaBreakoutPoint = 410;
 const mediaSingleSharedStyle = css`
@@ -29,8 +30,8 @@ const mediaSingleSharedStyle = css`
   }
 
   table .${richMediaClassName} {
-    margin-top: 12px;
-    margin-bottom: 12px;
+    margin-top: ${"var(--ds-space-150, 12px)"};
+    margin-bottom: ${"var(--ds-space-150, 12px)"};
     clear: both;
 
     &.image-wrap-left,
@@ -38,7 +39,7 @@ const mediaSingleSharedStyle = css`
       clear: none;
 
       &:first-child {
-        margin-top: 12px;
+        margin-top: ${"var(--ds-space-150, 12px)"};
       }
     }
   }
@@ -60,7 +61,7 @@ const mediaSingleSharedStyle = css`
     margin-left: 0;
   }
 
-  @media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
+  ${!getBooleanFF('platform.editor.media.extended-resize-experience') && `@media all and (max-width: ${wrappedMediaBreakoutPoint}px) {
     div.mediaSingleView-content-wrap[layout='wrap-left'],
     div.mediaSingleView-content-wrap[data-layout='wrap-left'],
     div.mediaSingleView-content-wrap[layout='wrap-right'],
@@ -69,6 +70,6 @@ const mediaSingleSharedStyle = css`
       overflow: auto;
       margin: 12px 0;
     }
-  }
+  }`}
 `;
 export { mediaSingleSharedStyle, richMediaClassName };

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

@@ -8,7 +8,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "74.32.1";
+const packageVersion = "74.34.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
 import { getMediaSinglePixelWidth } from '../../media-single/utils';
-import { wrappedLayouts } from './grid';
+import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
 import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
 export const DEFAULT_IMAGE_WIDTH = 250;
 export const DEFAULT_IMAGE_HEIGHT = 200;
@@ -15,9 +15,6 @@ export const DEFAULT_IMAGE_HEIGHT = 200;
     Read more: https://product-fabric.atlassian.net/browse/MEX-2481
 */
 export const IMAGE_AND_BORDER_ADJUSTMENT = 2;
-export const shouldAddDefaultWrappedWidth = (layout, width, lineLength) => {
-  return wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
-};
 export default function MediaSingle({
   layout,
   width,

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

@@ -1,7 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
 function float(layout) {
   switch (layout) {
@@ -69,6 +70,24 @@ function calcMaxWidth(layout, containerWidth) {
       return '100%';
   }
 }
+const getEffectiveFullWidth = (containerWidth, fullWidthMode) => {
+  if (fullWidthMode) {
+    return '100%';
+  }
+  // There is always padding for renderer, so we don't need padding for it
+  const fullWidthPadding = akEditorGutterPadding * 2;
+  return `${Math.min(containerWidth - fullWidthPadding, akEditorFullWidthLayoutWidth)}px`;
+};
+const calcMaxWidthWhenResizing = (containerWidth, fullWidthMode, isNestedNode) => {
+  if (isNestedNode) {
+    return '100%';
+  }
+  // non-nested node can resize up to full width
+  return getEffectiveFullWidth(containerWidth, fullWidthMode);
+};
+const calcMaxWidthWhenNotResizing = (containerWidth, mediaSingleWidth) => {
+  return `${Math.min(mediaSingleWidth, containerWidth - akEditorGutterPadding * 2)}px`;
+};
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -100,7 +119,9 @@ export const MediaSingleDimensionHelper = ({
   layout,
   pctWidth,
   mediaSingleWidth,
-  width
+  width,
+  isExtendedResizeExperienceOn,
+  isNestedNode = false
 }) => css`
   /* For nested rich media items, set max-width to 100% */
   tr &,
@@ -114,6 +135,28 @@ export const MediaSingleDimensionHelper = ({
     min-width: 100%;
   `}
   max-width: ${calcMaxWidth(layout, containerWidth)};
+  &[class*='is-resizing'] {
+    ${isExtendedResizeExperienceOn && `max-width: ${calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode)};
+
+    ${nonWrappedLayouts.includes(layout) && `margin-left: 50%;
+      transform: translateX(-50%);`}
+
+    .new-file-experience-wrapper {
+      box-shadow: none;
+    }`}
+  }
+
+  /* Handles responsiveness of non-nested, not-resizing nodes in editor */
+  &[class*='not-resizing'] {
+    ${!isNestedNode && `max-width: ${layout !== 'full-width' && mediaSingleWidth && calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth)};
+
+    ${nonWrappedLayouts.includes(layout) && `margin-left: 50%;
+      transform: translateX(-50%);`}
+
+    // override min-width to counteract max-width set in old experience
+    ${layout === 'full-width' && `min-width: ${getEffectiveFullWidth(containerWidth, fullWidthMode)} !important;`};`}
+  }
+
   float: ${float(layout)};
   margin: ${calcMargin(layout)};
   ${isImageAligned(layout)};

package/dist/es2019/ui/index.js

@@ -1,5 +1,5 @@
 export { default as Caption } from './Caption';
-export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT, shouldAddDefaultWrappedWidth } from './MediaSingle';
+export { default as MediaSingle, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, IMAGE_AND_BORDER_ADJUSTMENT } from './MediaSingle';
 export { MediaSingleDimensionHelper } from './MediaSingle/styled';
 export { layoutSupportsWidth, calcPxFromColumns, calcPctFromPx, calcPxFromPct, calcColumnsFromPx, snapToGrid, calcMediaPxWidth, wrappedLayouts } from './MediaSingle/grid';
 export { mediaLinkStyle } from './MediaSingle/link';