@atlaskit/editor-common 74.32.1 → 74.34.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 74.34.0
+
+### Minor Changes
+
+- [`1944b35b538`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1944b35b538) - move common utilities to editor-common, to help with decoupling block-type plugin
+
+### Patch Changes
+
+- Updated dependencies
+
+## 74.33.0
+
+### Minor Changes
+
+- [`936c30f8dc9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/936c30f8dc9) - support new image resize experience under feature flag
+
 ## 74.32.1
 
 ### Patch Changes

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -17,12 +18,15 @@ var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/edito
 var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
 var _mediaWrapLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-left"));
 var _mediaWrapRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-right"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _coreUtils = require("../../core-utils");
 var _messages = _interopRequireWildcard(require("../../messages"));
 var _utils2 = require("../../utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 // 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`.
 var alignmentIcons = [{
@@ -84,7 +88,10 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    var newAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    _objectSpread(_objectSpread({}, node.attrs), {}, {
+      layout: layout
+    }) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
     var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
     tr.setMeta('scrollIntoView', false);
     // when image captions are enabled, the wrong node gets selected after
@@ -113,18 +120,26 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
     return true;
   };
 };
-var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) {
+var getToolbarLayout = function getToolbarLayout(layout) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && _utils2.nonWrappedLayouts.includes(layout)) {
+    return 'center';
+  }
+  return layout;
+};
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) {
   return icons.map(function (toolbarItem) {
     var id = toolbarItem.id,
       value = toolbarItem.value;
-    return {
+    return _objectSpread({
       id: id,
       type: 'button',
       icon: toolbarItem.icon,
       title: intl.formatMessage(layoutToMessages[value]),
-      selected: layout === value,
+      selected: getToolbarLayout(layout) === value,
       onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
-    };
+    }, isChangingLayoutDisabled && {
+      disabled: value !== 'center'
+    });
   });
 };
 var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
@@ -134,13 +149,14 @@ var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2,
 var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
   var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
   var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+  var isChangingLayoutDisabled = arguments.length > 9 ? arguments[9] : undefined;
   var selection = state.selection;
   if (!(selection instanceof _state.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
     return [];
   }
   var layout = selection.node.attrs.layout;
-  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
-  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi, isChangingLayoutDisabled) : [];
   var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
   var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
   return items;

package/dist/cjs/guideline/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "createGuidesFromLengths", {
     return _fixedGuideline.createGuidesFromLengths;
   }
 });
+Object.defineProperty(exports, "findClosestSnap", {
+  enumerable: true,
+  get: function get() {
+    return _snapping.findClosestSnap;
+  }
+});
 Object.defineProperty(exports, "generateDefaultGuidelines", {
   enumerable: true,
   get: function get() {
@@ -45,6 +51,12 @@ Object.defineProperty(exports, "getGuidelinesWithHighlights", {
     return _updateGuideline.getGuidelinesWithHighlights;
   }
 });
+Object.defineProperty(exports, "getSnapWidth", {
+  enumerable: true,
+  get: function get() {
+    return _snapping.getSnapWidth;
+  }
+});
 Object.defineProperty(exports, "isVerticalPosition", {
   enumerable: true,
   get: function get() {
@@ -56,4 +68,5 @@ var _fixedGuideline = require("./fixedGuideline");
 var _defaultGuideline = require("./defaultGuideline");
 var _updateGuideline = require("./updateGuideline");
 var _constants = require("./constants");
+var _snapping = require("./snapping");
 var _utils = require("./utils");

package/dist/cjs/keymaps/index.js

@@ -88,6 +88,12 @@ exports.findShortcutByKeymap = findShortcutByKeymap;
 exports.forwardDelete = void 0;
 exports.getAriaKeyshortcuts = getAriaKeyshortcuts;
 exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = void 0;
+Object.defineProperty(exports, "keymap", {
+  enumerable: true,
+  get: function get() {
+    return _keymap.keymap;
+  }
+});
 exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
 exports.makeKeymap = makeKeymap;
 exports.toggleUnderline = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = exports.toggleOrderedList = exports.toggleItalic = 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.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.setNormalText = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRight = exports.moveLeft = exports.moveDown = void 0;
@@ -100,6 +106,7 @@ var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _utils = require("../utils");
 var _consts = require("./consts");
+var _keymap = require("./keymap");
 var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -239,7 +246,7 @@ var arrowKeysMap = {
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
 };
-var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"));
+var tooltipShortcutStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 ", ";\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"), "var(--ds-space-025, 2px)");
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {

package/dist/cjs/keymaps/keymap.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keymap = keymap;
+var _w3cKeyname = require("w3c-keyname");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _safePlugin = require("../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
+ */
+function keymap(bindings) {
+  return new _safePlugin.SafePlugin({
+    props: {
+      handleKeyDown: function handleKeyDown(view, event) {
+        var name = (0, _w3cKeyname.keyName)(event);
+        var 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: _w3cKeyname.base[event.keyCode],
+            code: event.code,
+            ctrlKey: true
+          });
+        }
+        return (0, _keymap.keydownHandler)(bindings)(view, keyboardEvent);
+      }
+    }
+  });
+}

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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 = "74.32.1";
+var packageVersion = "74.34.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.richMediaClassName = exports.mediaSingleSharedStyle = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject;
 var richMediaClassName = 'rich-media-item';
 exports.richMediaClassName = richMediaClassName;
 var wrappedMediaBreakoutPoint = 410;
-var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: 12px;\n    margin-bottom: 12px;\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: 12px;\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  @media all and (max-width: ", "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }\n"])), richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, wrappedMediaBreakoutPoint);
+var mediaSingleSharedStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  li .", " {\n    margin: 0;\n  }\n\n  /* Hack for chrome to fix media single position\n     inside a list when media is the first child */\n  &.ua-chrome li > .mediaSingleView-content-wrap::before {\n    content: '';\n    display: block;\n    height: 0;\n  }\n\n  &.ua-firefox {\n    .mediaSingleView-content-wrap {\n      user-select: none;\n    }\n\n    .captionView-content-wrap {\n      user-select: text;\n    }\n  }\n\n  .mediaSingleView-content-wrap[layout='center'] {\n    clear: both;\n  }\n\n  table .", " {\n    margin-top: ", ";\n    margin-bottom: ", ";\n    clear: both;\n\n    &.image-wrap-left,\n    &.image-wrap-right {\n      clear: none;\n\n      &:first-child {\n        margin-top: ", ";\n      }\n    }\n  }\n\n  .", ".image-wrap-right\n    + .", ".image-wrap-left {\n    clear: both;\n  }\n\n  .", ".image-wrap-left\n    + .", ".image-wrap-right,\n    .", ".image-wrap-right\n    + .", ".image-wrap-left,\n    .", ".image-wrap-left\n    + .", ".image-wrap-left,\n    .", ".image-wrap-right\n    + .", ".image-wrap-right {\n    margin-right: 0;\n    margin-left: 0;\n  }\n\n  ", "\n"])), richMediaClassName, richMediaClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && "@media all and (max-width: ".concat(wrappedMediaBreakoutPoint, "px) {\n    div.mediaSingleView-content-wrap[layout='wrap-left'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-left'],\n    div.mediaSingleView-content-wrap[layout='wrap-right'],\n    div.mediaSingleView-content-wrap[data-layout='wrap-right'] {\n      float: none;\n      overflow: auto;\n      margin: 12px 0;\n    }\n  }"));
 exports.mediaSingleSharedStyle = mediaSingleSharedStyle;

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

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.32.1";
+var packageVersion = "74.34.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IMAGE_AND_BORDER_ADJUSTMENT = exports.DEFAULT_IMAGE_WIDTH = exports.DEFAULT_IMAGE_HEIGHT = void 0;
 exports.default = MediaSingle;
-exports.shouldAddDefaultWrappedWidth = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -14,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _constants = require("../../media-single/constants");
 var _utils = require("../../media-single/utils");
-var _grid = require("./grid");
+var _richMediaUtils = require("../../utils/rich-media-utils");
 var _styled = require("./styled");
 /** @jsx jsx */
 
@@ -29,10 +28,6 @@ var DEFAULT_IMAGE_HEIGHT = 200;
 exports.DEFAULT_IMAGE_HEIGHT = DEFAULT_IMAGE_HEIGHT;
 var IMAGE_AND_BORDER_ADJUSTMENT = 2;
 exports.IMAGE_AND_BORDER_ADJUSTMENT = IMAGE_AND_BORDER_ADJUSTMENT;
-var shouldAddDefaultWrappedWidth = function shouldAddDefaultWrappedWidth(layout, width, lineLength) {
-  return _grid.wrappedLayouts.indexOf(layout) > -1 && lineLength && width && width > 0.5 * lineLength;
-};
-exports.shouldAddDefaultWrappedWidth = shouldAddDefaultWrappedWidth;
 function MediaSingle(_ref) {
   var layout = _ref.layout,
     width = _ref.width,
@@ -55,7 +50,7 @@ function MediaSingle(_ref) {
   var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
   var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
   var children = _react.default.Children.toArray(propsChildren);
-  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
+  if (!mediaSingleWidth && (0, _richMediaUtils.shouldAddDefaultWrappedWidth)(layout, width, editorWidth)) {
     // if width is not available, set to half of editor width
     mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
   }

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

@@ -13,6 +13,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 _utils = require("../../utils");
 var _breakout = require("../../utils/breakout");
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -87,6 +88,24 @@ function calcMaxWidth(layout, containerWidth) {
       return '100%';
   }
 }
+var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullWidthMode) {
+  if (fullWidthMode) {
+    return '100%';
+  }
+  // There is always padding for renderer, so we don't need padding for it
+  var fullWidthPadding = _editorSharedStyles.akEditorGutterPadding * 2;
+  return "".concat(Math.min(containerWidth - fullWidthPadding, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px");
+};
+var calcMaxWidthWhenResizing = function calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode) {
+  if (isNestedNode) {
+    return '100%';
+  }
+  // non-nested node can resize up to full width
+  return getEffectiveFullWidth(containerWidth, fullWidthMode);
+};
+var calcMaxWidthWhenNotResizing = function calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth) {
+  return "".concat(Math.min(mediaSingleWidth, containerWidth - _editorSharedStyles.akEditorGutterPadding * 2), "px");
+};
 function calcMargin(layout) {
   switch (layout) {
     case 'wrap-right':
@@ -119,8 +138,11 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     layout = _ref.layout,
     pctWidth = _ref.pctWidth,
     mediaSingleWidth = _ref.mediaSingleWidth,
-    width = _ref.width;
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), float(layout), calcMargin(layout), isImageAligned(layout));
+    width = _ref.width,
+    isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
+    _ref$isNestedNode = _ref.isNestedNode,
+    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode;
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* For nested rich media items, set max-width to 100% */\n  tr &,\n  [data-layout-column] &,\n  [data-node-type='expand'] & {\n    max-width: 100%;\n  }\n\n  width: ", ";\n  ", "\n  max-width: ", ";\n  &[class*='is-resizing'] {\n    ", "\n  }\n\n  /* Handles responsiveness of non-nested, not-resizing nodes in editor */\n  &[class*='not-resizing'] {\n    ", "\n  }\n\n  float: ", ";\n  margin: ", ";\n  ", ";\n\n  &:not(.is-resizing) {\n    transition: width 100ms ease-in;\n  }\n"])), mediaSingleWidth || pctWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized), layout === 'full-width' && (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 100%;\n  "]))), calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "max-width: ".concat(calcMaxWidthWhenResizing(containerWidth, fullWidthMode, isNestedNode), ";\n\n    ").concat(_utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    .new-file-experience-wrapper {\n      box-shadow: none;\n    }"), !isNestedNode && "max-width: ".concat(layout !== 'full-width' && mediaSingleWidth && calcMaxWidthWhenNotResizing(containerWidth, mediaSingleWidth), ";\n\n    ").concat(_utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    // override min-width to counteract max-width set in old experience\n    ").concat(layout === 'full-width' && "min-width: ".concat(getEffectiveFullWidth(containerWidth, fullWidthMode), " !important;"), ";"), float(layout), calcMargin(layout), isImageAligned(layout));
 };
 exports.MediaSingleDimensionHelper = MediaSingleDimensionHelper;
 var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {

package/dist/cjs/ui/index.js

@@ -347,12 +347,6 @@ Object.defineProperty(exports, "sharedExpandStyles", {
     return _Expand.sharedExpandStyles;
   }
 });
-Object.defineProperty(exports, "shouldAddDefaultWrappedWidth", {
-  enumerable: true,
-  get: function get() {
-    return _MediaSingle.shouldAddDefaultWrappedWidth;
-  }
-});
 Object.defineProperty(exports, "snapTo", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/commands.js

@@ -4,11 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.walkPrevNode = exports.walkNextNode = exports.isEmptySelectionAtStart = exports.isEmptySelectionAtEnd = exports.insertContentDeleteRange = exports.filterCommand = exports.deleteEmptyParagraphAndMoveBlockUp = void 0;
+exports.atTheBeginningOfDoc = atTheBeginningOfDoc;
+exports.atTheEndOfDoc = atTheEndOfDoc;
+exports.createNewParagraphBelow = exports.createNewParagraphAbove = void 0;
+exports.createParagraphNear = createParagraphNear;
+exports.insertContentDeleteRange = exports.filterCommand = exports.filter = exports.deleteEmptyParagraphAndMoveBlockUp = void 0;
+exports.insertNewLine = insertNewLine;
+exports.walkPrevNode = exports.walkNextNode = exports.isEmptySelectionAtStart = exports.isEmptySelectionAtEnd = exports.insertNewLineWithAnalytics = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _analytics = require("../analytics");
+var _editorAnalytics = require("../editor-analytics");
 var _selection = require("../selection");
 var _editorCoreUtils = require("./editor-core-utils");
+var _nodes = require("./nodes");
 var filter = function filter(predicates, cmd) {
   return function (state, dispatch, view) {
     if (!Array.isArray(predicates)) {
@@ -29,7 +39,7 @@ var filter = function filter(predicates, cmd) {
  *
  * @param $startPos Position to start walking from.
  */
-exports.filterCommand = filter;
+exports.filterCommand = exports.filter = filter;
 var walkNextNode = function walkNextNode($startPos) {
   var $pos = $startPos;
 
@@ -63,6 +73,162 @@ var walkPrevNode = function walkPrevNode($startPos) {
     foundNode: $pos.pos > 0
   };
 };
+exports.walkPrevNode = walkPrevNode;
+function insertNewLine() {
+  return function (state, dispatch) {
+    var $from = state.selection.$from;
+    var parent = $from.parent;
+    var hardBreak = state.schema.nodes.hardBreak;
+    if (hardBreak) {
+      var hardBreakNode = hardBreak.createChecked();
+      if (parent && parent.type.validContent(_model.Fragment.from(hardBreakNode))) {
+        if (dispatch) {
+          dispatch(state.tr.replaceSelectionWith(hardBreakNode, false));
+        }
+        return true;
+      }
+    }
+    if (state.selection instanceof _state.TextSelection) {
+      if (dispatch) {
+        dispatch(state.tr.insertText('\n'));
+      }
+      return true;
+    }
+    return false;
+  };
+}
+var insertNewLineWithAnalytics = function insertNewLineWithAnalytics(editorAnalyticsAPI) {
+  return (0, _editorAnalytics.withAnalytics)(editorAnalyticsAPI, {
+    action: _analytics.ACTION.INSERTED,
+    actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINE_BREAK,
+    eventType: _analytics.EVENT_TYPE.TRACK
+  })(insertNewLine());
+};
+exports.insertNewLineWithAnalytics = insertNewLineWithAnalytics;
+var createNewParagraphAbove = function createNewParagraphAbove(state, dispatch) {
+  var append = false;
+  if (!canMoveUp(state) && canCreateParagraphNear(state)) {
+    createParagraphNear(append)(state, dispatch);
+    return true;
+  }
+  return false;
+};
+exports.createNewParagraphAbove = createNewParagraphAbove;
+var createNewParagraphBelow = function createNewParagraphBelow(state, dispatch) {
+  var append = true;
+  if (!canMoveDown(state) && canCreateParagraphNear(state)) {
+    createParagraphNear(append)(state, dispatch);
+    return true;
+  }
+  return false;
+};
+exports.createNewParagraphBelow = createNewParagraphBelow;
+function canCreateParagraphNear(state) {
+  var $from = state.selection.$from;
+  var node = $from.node($from.depth);
+  var insideCodeBlock = !!node && node.type === state.schema.nodes.codeBlock;
+  var isNodeSelection = state.selection instanceof _state.NodeSelection;
+  return $from.depth > 1 || isNodeSelection || insideCodeBlock;
+}
+function createParagraphNear() {
+  var append = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  return function (state, dispatch) {
+    var paragraph = state.schema.nodes.paragraph;
+    if (!paragraph) {
+      return false;
+    }
+    var insertPos;
+    if (state.selection instanceof _state.TextSelection) {
+      if (topLevelNodeIsEmptyTextBlock(state)) {
+        return false;
+      }
+      insertPos = getInsertPosFromTextBlock(state, append);
+    } else {
+      insertPos = getInsertPosFromNonTextBlock(state, append);
+    }
+    var tr = state.tr.insert(insertPos, paragraph.createAndFill());
+    tr.setSelection(_state.TextSelection.create(tr.doc, insertPos + 1));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+}
+function getInsertPosFromTextBlock(state, append) {
+  var _state$selection = state.selection,
+    $from = _state$selection.$from,
+    $to = _state$selection.$to;
+  var pos;
+  if (!append) {
+    pos = $from.start(0);
+  } else {
+    pos = $to.end(0);
+  }
+  return pos;
+}
+function getInsertPosFromNonTextBlock(state, append) {
+  var _state$selection2 = state.selection,
+    $from = _state$selection2.$from,
+    $to = _state$selection2.$to;
+  var nodeAtSelection = state.selection instanceof _state.NodeSelection && state.doc.nodeAt(state.selection.$anchor.pos);
+  var isMediaSelection = nodeAtSelection && nodeAtSelection.type.name === 'mediaGroup';
+  var pos;
+  if (!append) {
+    // The start position is different with text block because it starts from 0
+    pos = $from.start($from.depth);
+    // The depth is different with text block because it starts from 0
+    pos = $from.depth > 0 && !isMediaSelection ? pos - 1 : pos;
+  } else {
+    pos = $to.end($to.depth);
+    pos = $to.depth > 0 && !isMediaSelection ? pos + 1 : pos;
+  }
+  return pos;
+}
+function topLevelNodeIsEmptyTextBlock(state) {
+  var topLevelNode = state.selection.$from.node(1);
+  return topLevelNode.isTextblock && topLevelNode.type !== state.schema.nodes.codeBlock && topLevelNode.nodeSize === 2;
+}
+function canMoveUp(state) {
+  var selection = state.selection;
+  /**
+   * If there's a media element on the selection it will use a gap cursor to move
+   */
+  if (selection instanceof _state.NodeSelection && (0, _nodes.isMediaNode)(selection.node)) {
+    return true;
+  }
+  if (selection instanceof _state.TextSelection) {
+    if (!selection.empty) {
+      return true;
+    }
+  }
+  return !atTheBeginningOfDoc(state);
+}
+function canMoveDown(state) {
+  var selection = state.selection;
+
+  /**
+   * If there's a media element on the selection it will use a gap cursor to move
+   */
+  if (selection instanceof _state.NodeSelection && (0, _nodes.isMediaNode)(selection.node)) {
+    return true;
+  }
+  if (selection instanceof _state.TextSelection) {
+    if (!selection.empty) {
+      return true;
+    }
+  }
+  return !atTheEndOfDoc(state);
+}
+function atTheEndOfDoc(state) {
+  var selection = state.selection,
+    doc = state.doc;
+  return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth;
+}
+function atTheBeginningOfDoc(state) {
+  var selection = state.selection;
+  return selection.$from.pos === selection.$from.depth;
+}
 
 /**
  * If the selection is empty, is inside a paragraph node and `canNextNodeMoveUp` is true then delete current paragraph
@@ -71,15 +237,14 @@ var walkPrevNode = function walkPrevNode($startPos) {
  * @param canNextNodeMoveUp check if node directly after the selection is able to be brought up to selection
  * @returns PM Command
  */
-exports.walkPrevNode = walkPrevNode;
 var deleteEmptyParagraphAndMoveBlockUp = function deleteEmptyParagraphAndMoveBlockUp(canNextNodeMoveUp) {
   return function (state, dispatch, view) {
-    var _state$selection = state.selection,
-      _state$selection$$fro = _state$selection.$from,
-      pos = _state$selection$$fro.pos,
-      parent = _state$selection$$fro.parent,
-      $head = _state$selection.$head,
-      empty = _state$selection.empty,
+    var _state$selection3 = state.selection,
+      _state$selection3$$fr = _state$selection3.$from,
+      pos = _state$selection3$$fr.pos,
+      parent = _state$selection3$$fr.parent,
+      $head = _state$selection3.$head,
+      empty = _state$selection3.empty,
       tr = state.tr,
       doc = state.doc;
     var _walkNextNode = walkNextNode($head),
@@ -113,16 +278,16 @@ var insertContentDeleteRange = function insertContentDeleteRange(tr, getSelectio
 };
 exports.insertContentDeleteRange = insertContentDeleteRange;
 var isEmptySelectionAtStart = function isEmptySelectionAtStart(state) {
-  var _state$selection2 = state.selection,
-    empty = _state$selection2.empty,
-    $from = _state$selection2.$from;
+  var _state$selection4 = state.selection,
+    empty = _state$selection4.empty,
+    $from = _state$selection4.$from;
   return empty && ($from.parentOffset === 0 || state.selection instanceof _selection.GapCursorSelection);
 };
 exports.isEmptySelectionAtStart = isEmptySelectionAtStart;
 var isEmptySelectionAtEnd = function isEmptySelectionAtEnd(state) {
-  var _state$selection3 = state.selection,
-    empty = _state$selection3.empty,
-    $from = _state$selection3.$from;
+  var _state$selection5 = state.selection,
+    empty = _state$selection5.empty,
+    $from = _state$selection5.$from;
   return empty && ($from.end() === $from.pos || state.selection instanceof _selection.GapCursorSelection);
 };
 exports.isEmptySelectionAtEnd = isEmptySelectionAtEnd;