@atlaskit/editor-common 74.37.0 → 74.38.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-common
 
+## 74.38.1
+
+### Patch Changes
+
+- [`4cbae03c15c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4cbae03c15c) - Set maxWidth for ResizerNext to stop lable updating when reaching max width
+
+## 74.38.0
+
+### Minor Changes
+
+- [`a675f834911`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a675f834911) - Introduce `commands` optional parameter to `NextEditorPlugin`. It can be used similarly to `actions` in `NextEditorPlugin` but `commands` must adhere to the type of `PluginCommand`:
+
+  ```ts
+  type PluginCommand = ({ tr }: { tr: Transaction }) => Transaction | null;
+  ```
+
+  `PluginCommand`s are specifically used for code that is executed to modify a Transaction. They should be used in preference to the existing prosemirror `Command` type.
+
+### Patch Changes
+
+- [`3bbe8f91f34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3bbe8f91f34) - refactor ResizableMediaSingleNext around guidelines and snapping
+
 ## 74.37.0
 
 ### Minor Changes

package/dist/cjs/guideline/constants.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MEDIA_DYNAMIC_GUIDELINE_PREFIX = void 0;
+exports.MEDIA_DYNAMIC_GUIDELINE_PREFIX = exports.INNER_GRID_GUIDELINE_PREFIX = void 0;
 var MEDIA_DYNAMIC_GUIDELINE_PREFIX = 'media_';
-exports.MEDIA_DYNAMIC_GUIDELINE_PREFIX = MEDIA_DYNAMIC_GUIDELINE_PREFIX;
+exports.MEDIA_DYNAMIC_GUIDELINE_PREFIX = MEDIA_DYNAMIC_GUIDELINE_PREFIX;
+var INNER_GRID_GUIDELINE_PREFIX = 'grid_';
+exports.INNER_GRID_GUIDELINE_PREFIX = INNER_GRID_GUIDELINE_PREFIX;

package/dist/cjs/guideline/defaultGuideline.js

@@ -8,19 +8,20 @@ exports.generateDefaultGuidelines = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _mediaSingle = require("../media-single");
 var _utils = require("./utils");
 var getDefaultGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
   return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map(function (val, index) {
     return {
       key: "grid_".concat(index),
       position: {
-        x: val / 12 * editorWidth
+        x: (0, _mediaSingle.roundToNearest)(val / 12 * editorWidth)
       }
     };
   });
 });
 var getWideGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
-  var wideSpacing = editorWidth * _editorSharedStyles.breakoutWideScaleRatio / 2;
+  var wideSpacing = (0, _mediaSingle.roundToNearest)(editorWidth * _editorSharedStyles.breakoutWideScaleRatio / 2);
   return [{
     key: "wide_left",
     position: {
@@ -34,7 +35,7 @@ var getWideGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
   }];
 });
 var getFullWidthGuidelines = (0, _memoizeOne.default)(function (containerWidth) {
-  var fullWidth = (0, _utils.getContainerWidthOrFullEditorWidth)(containerWidth);
+  var fullWidth = (0, _mediaSingle.roundToNearest)((0, _utils.getContainerWidthOrFullEditorWidth)(containerWidth));
   return [{
     key: "full_width_left",
     position: {

package/dist/cjs/guideline/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "INNER_GRID_GUIDELINE_PREFIX", {
+  enumerable: true,
+  get: function get() {
+    return _constants.INNER_GRID_GUIDELINE_PREFIX;
+  }
+});
 Object.defineProperty(exports, "MEDIA_DYNAMIC_GUIDELINE_PREFIX", {
   enumerable: true,
   get: function get() {
@@ -45,16 +51,16 @@ Object.defineProperty(exports, "getContainerWidthOrFullEditorWidth", {
     return _utils.getContainerWidthOrFullEditorWidth;
   }
 });
-Object.defineProperty(exports, "getGuidelinesWithHighlights", {
+Object.defineProperty(exports, "getGuidelineSnaps", {
   enumerable: true,
   get: function get() {
-    return _updateGuideline.getGuidelinesWithHighlights;
+    return _snapping.getGuidelineSnaps;
   }
 });
-Object.defineProperty(exports, "getSnapWidth", {
+Object.defineProperty(exports, "getGuidelinesWithHighlights", {
   enumerable: true,
   get: function get() {
-    return _snapping.getSnapWidth;
+    return _updateGuideline.getGuidelinesWithHighlights;
   }
 });
 Object.defineProperty(exports, "isVerticalPosition", {

package/dist/cjs/guideline/snapping.js

@@ -1,27 +1,31 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSnapWidth = exports.findClosestSnap = void 0;
-var _mediaSingle = require("../media-single");
+exports.getGuidelineSnaps = exports.findClosestSnap = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _constants = require("./constants");
+var _utils = require("./utils");
 /**
  * Returns keys of guidelines that are closest to the image and withthin the snapGap.
  * If both default and dynamic guidelines present, only returns default guidelines
  */
-var findClosestSnap = function findClosestSnap(mediaSingleWidth, snapArray, snapTo) {
+var findClosestSnap = function findClosestSnap(mediaSingleWidth, snapArray, guidelineSnaps) {
   var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   var closestGapIndex = snapArray.reduce(function (prev, curr, index) {
     return Math.abs(curr - mediaSingleWidth) < Math.abs(snapArray[prev] - mediaSingleWidth) ? index : prev;
   }, 0);
   var gap = Math.abs(snapArray[closestGapIndex] - mediaSingleWidth);
   if (gap < snapGap) {
-    var snappingWidth = Math.round(snapTo[closestGapIndex].width);
+    var snappingWidth = snapArray[closestGapIndex];
     var guidelineKeys = [];
-    snapTo.forEach(function (s) {
-      if (Math.round(Math.abs(s.width)) === snappingWidth) {
-        guidelineKeys.push(s.guidelineKey);
+    // find wich guideline have the matching snap width
+    guidelineSnaps.forEach(function (gs) {
+      if (gs.width === snappingWidth) {
+        guidelineKeys.push(gs.guidelineKey);
       }
     });
     var defaultGuidelineKeys = guidelineKeys.filter(function (guidelineKey) {
@@ -39,37 +43,45 @@ var findClosestSnap = function findClosestSnap(mediaSingleWidth, snapArray, snap
     keys: []
   };
 };
-
-/**
- * Get snapping widths and respective guideline keys
- */
 exports.findClosestSnap = findClosestSnap;
-var getSnapWidth = function getSnapWidth(guidelines, mediaSingleWidth, snap, layout) {
-  return guidelines.map(function (guideline) {
-    var _guideline$position;
-    var positionX = (_guideline$position = guideline.position) !== null && _guideline$position !== void 0 && _guideline$position.x && typeof guideline.position.x === 'number' ? guideline.position.x : 0;
-    if (layout === _mediaSingle.MediaSingleLayout.CENTER || layout === _mediaSingle.MediaSingleLayout.WIDE || layout === _mediaSingle.MediaSingleLayout.FULL_WIDTH) {
-      return {
-        guidelineKey: guideline.key,
-        width: mediaSingleWidth + (snap - positionX) * 2
-      };
-    } else if (layout === _mediaSingle.MediaSingleLayout.ALIGN_END || layout === _mediaSingle.MediaSingleLayout.WRAP_RIGHT) {
+var getGuidelineSnaps = (0, _memoizeOne.default)(function (guidelines, editorWidth) {
+  var layout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'center';
+  var offset = editorWidth / 2;
+  var getPositionX = function getPositionX(position) {
+    return (0, _utils.isVerticalPosition)(position) ? position.x : 0;
+  };
+  var calcXSnaps = function calcXSnaps(guidelineReference) {
+    var snapsWidth = guidelineReference.filter(function (g) {
+      return g.width > 0;
+    }).map(function (g) {
+      return g.width;
+    });
+    var uniqueSnapWidth = (0, _toConsumableArray2.default)(new Set(snapsWidth));
+    return snapsWidth.length ? uniqueSnapWidth : undefined;
+  };
+  var guidelinesSnapsReference = guidelines.map(function (guideline) {
+    var positionX = getPositionX(guideline.position);
+    if (['align-end', 'wrap-right'].includes(layout)) {
       return {
         guidelineKey: guideline.key,
-        width: mediaSingleWidth + (snap - positionX)
+        width: offset - positionX
       };
-    } else if (layout === _mediaSingle.MediaSingleLayout.ALIGN_START || layout === _mediaSingle.MediaSingleLayout.WRAP_LEFT) {
+    } else if (['align-start', 'wrap-left'].includes(layout)) {
       return {
         guidelineKey: guideline.key,
-        width: mediaSingleWidth + positionX - snap
+        width: positionX + offset
       };
     }
     return {
-      guidelineKey: '',
-      width: 0
+      guidelineKey: guideline.key,
+      width: Math.abs(positionX) * 2
     };
-  }).filter(function (guideline) {
-    return guideline.guidelineKey !== '';
   });
-};
-exports.getSnapWidth = getSnapWidth;
+  return {
+    guidelineReference: guidelinesSnapsReference,
+    snaps: {
+      x: calcXSnaps(guidelinesSnapsReference)
+    }
+  };
+});
+exports.getGuidelineSnaps = getGuidelineSnaps;

package/dist/cjs/keymaps/index.js

@@ -80,6 +80,7 @@ Object.defineProperty(exports, "UP", {
 });
 exports.backspace = exports.altPaste = exports.alignLeft = exports.addRowBefore = exports.addRowAfter = exports.addLink = exports.addInlineComment = exports.addColumnBefore = exports.addColumnAfter = exports.addAltText = void 0;
 exports.bindKeymapWithCommand = bindKeymapWithCommand;
+exports.bindKeymapWithPluginCommand = bindKeymapWithPluginCommand;
 exports.find = exports.escape = exports.enter = exports.deleteKey = exports.cut = exports.ctrlBackSpace = exports.copy = exports.clearFormatting = void 0;
 exports.findKeyMapForBrowser = findKeyMapForBrowser;
 exports.findKeymapByDescription = findKeymapByDescription;
@@ -104,6 +105,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+var _pluginCommands = require("../preset/plugin-commands");
 var _utils = require("../utils");
 var _consts = require("./consts");
 var _keymap = require("./keymap");
@@ -352,15 +354,17 @@ function makeKeyMapWithCommon(description, common) {
   var mac = common.replace(/Mod/i, 'Cmd');
   return makeKeymap(description, windows, mac, common);
 }
+function combineWithOldCommand(cmd, oldCmd) {
+  return function (state, dispatch, editorView) {
+    return oldCmd(state, dispatch) || cmd(state, dispatch, editorView);
+  };
+}
 function bindKeymapWithCommand(shortcut, cmd, keymap) {
   var oldCmd = keymap[shortcut];
-  var newCmd = cmd;
-  if (keymap[shortcut]) {
-    newCmd = function newCmd(state, dispatch, editorView) {
-      return oldCmd(state, dispatch) || cmd(state, dispatch, editorView);
-    };
-  }
-  keymap[shortcut] = newCmd;
+  keymap[shortcut] = oldCmd ? combineWithOldCommand(cmd, oldCmd) : cmd;
+}
+function bindKeymapWithPluginCommand(shortcut, cmd, keymap) {
+  bindKeymapWithCommand(shortcut, (0, _pluginCommands.pluginCommandToPMCommand)(cmd), keymap);
 }
 function findKeyMapForBrowser(keyMap) {
   if (keyMap) {

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

@@ -97,7 +97,7 @@ var calcLegacyWideWidth = function calcLegacyWideWidth(containerWidth, origWidth
 };
 
 /**
- * Calculate maximum width allowed for media single in new experience
+ * Calculate maximum width allowed for media single node in fix-width editor in new experience
  * @param containerWidth width of editor container
  */
 var calcMediaSingleMaxWidth = function calcMediaSingleMaxWidth(containerWidth) {

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.37.0";
+var packageVersion = "74.38.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/preset/index.js

@@ -15,5 +15,12 @@ Object.defineProperty(exports, "EditorPresetBuilder", {
     return _builder.EditorPresetBuilder;
   }
 });
+Object.defineProperty(exports, "pluginCommandToPMCommand", {
+  enumerable: true,
+  get: function get() {
+    return _pluginCommands.pluginCommandToPMCommand;
+  }
+});
 var _builder = require("./builder");
-var _pluginInjectionApi = require("./plugin-injection-api");
+var _pluginInjectionApi = require("./plugin-injection-api");
+var _pluginCommands = require("./plugin-commands");

package/dist/cjs/preset/plugin-commands.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginCommandToPMCommand = pluginCommandToPMCommand;
+function pluginCommandToPMCommand(command) {
+  return function (_ref, dispatch) {
+    var tr = _ref.tr;
+    var newTr = command === null || command === void 0 ? void 0 : command({
+      tr: tr
+    });
+    if (newTr) {
+      dispatch === null || dispatch === void 0 ? void 0 : dispatch(newTr);
+      return true;
+    }
+    return false;
+  };
+}

package/dist/cjs/preset/plugin-injection-api.js

@@ -22,6 +22,9 @@ function hasGetSharedState(plugin) {
 function hasActions(plugin) {
   return (0, _typeof2.default)(plugin.actions) === 'object';
 }
+function hasCommands(plugin) {
+  return (0, _typeof2.default)(plugin.commands) === 'object';
+}
 var filterPluginsWithListeners = function filterPluginsWithListeners(_ref) {
   var listeners = _ref.listeners,
     plugins = _ref.plugins;
@@ -121,6 +124,26 @@ var ActionsAPI = /*#__PURE__*/function () {
   }]);
   return ActionsAPI;
 }();
+var PluginCommandsAPI = /*#__PURE__*/function () {
+  function PluginCommandsAPI() {
+    (0, _classCallCheck2.default)(this, PluginCommandsAPI);
+  }
+  (0, _createClass2.default)(PluginCommandsAPI, [{
+    key: "createAPI",
+    value: function createAPI(plugin) {
+      if (!plugin || !hasCommands(plugin)) {
+        return {};
+      }
+      return new Proxy(plugin.commands || {}, {
+        get: function get(target, prop, receiver) {
+          // We will be able to track perfomance here
+          return Reflect.get(target, prop);
+        }
+      });
+    }
+  }]);
+  return PluginCommandsAPI;
+}();
 var SharedStateAPI = /*#__PURE__*/function () {
   function SharedStateAPI(_ref4) {
     var getEditorState = _ref4.getEditorState;
@@ -246,12 +269,14 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
     });
     this.plugins = new Map();
     this.actionsAPI = new ActionsAPI();
+    this.commandsAPI = new PluginCommandsAPI();
   }
   (0, _createClass2.default)(EditorPluginInjectionAPI, [{
     key: "api",
     value: function api() {
       var sharedStateAPI = this.sharedStateAPI,
         actionsAPI = this.actionsAPI,
+        commandsAPI = this.commandsAPI,
         getPluginByName = this.getPluginByName;
       var dependencies = new Proxy({}, {
         get: function get(target, prop, receiver) {
@@ -270,9 +295,11 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
           }
           var sharedState = sharedStateAPI.createAPI(plugin);
           var actions = actionsAPI.createAPI(plugin);
+          var commands = commandsAPI.createAPI(plugin);
           var proxyCoreAPI = {
             sharedState: sharedState,
-            actions: actions
+            actions: actions,
+            commands: commands
           };
           return proxyCoreAPI;
         }

package/dist/cjs/types/plugin-command.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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.37.0";
+var packageVersion = "74.38.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -95,16 +95,6 @@ var getEffectiveFullWidth = function getEffectiveFullWidth(containerWidth, fullW
   }
   return "".concat((0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth), "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':
@@ -141,7 +131,7 @@ var MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
     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));
+  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\n  ", "\n\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 && "&[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  }"), !isNestedNode && "".concat(_utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n\n    // override min-width to counteract max-width set by ResizerNext inline style\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/utils/rich-media-utils.js

@@ -21,7 +21,7 @@ var nonWrappedLayouts = ['center', 'wide', 'full-width'];
 exports.nonWrappedLayouts = nonWrappedLayouts;
 var floatingLayouts = ['wrap-left', 'wrap-right'];
 exports.floatingLayouts = floatingLayouts;
-var isRichMediaInsideOfBlockNode = function isRichMediaInsideOfBlockNode(view, pos) {
+var isRichMediaInsideOfBlockNode = function isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes) {
   if (typeof pos !== 'number' || isNaN(pos) || !view) {
     return false;
   }
@@ -29,8 +29,11 @@ var isRichMediaInsideOfBlockNode = function isRichMediaInsideOfBlockNode(view, p
   var _view$state$schema$no = view.state.schema.nodes,
     expand = _view$state$schema$no.expand,
     nestedExpand = _view$state$schema$no.nestedExpand,
-    layoutColumn = _view$state$schema$no.layoutColumn;
-  return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [expand, nestedExpand, layoutColumn]);
+    layoutColumn = _view$state$schema$no.layoutColumn,
+    tableCell = _view$state$schema$no.tableCell,
+    listItem = _view$state$schema$no.listItem;
+  var parentNodeTypes = [expand, nestedExpand, layoutColumn];
+  return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, includeMoreParentNodeTypes ? [].concat(parentNodeTypes, [tableCell, listItem]) : parentNodeTypes);
 };
 exports.isRichMediaInsideOfBlockNode = isRichMediaInsideOfBlockNode;
 var alignAttributes = function alignAttributes(layout, oldAttrs) {

package/dist/cjs/version.json

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

package/dist/es2019/guideline/constants.js

@@ -1 +1,2 @@
-export const MEDIA_DYNAMIC_GUIDELINE_PREFIX = 'media_';
+export const MEDIA_DYNAMIC_GUIDELINE_PREFIX = 'media_';
+export const INNER_GRID_GUIDELINE_PREFIX = 'grid_';

package/dist/es2019/guideline/defaultGuideline.js

@@ -1,16 +1,17 @@
 import memoizeOne from 'memoize-one';
 import { breakoutWideScaleRatio } from '@atlaskit/editor-shared-styles';
+import { roundToNearest } from '../media-single';
 import { getContainerWidthOrFullEditorWidth } from './utils';
 const getDefaultGuidelines = memoizeOne(editorWidth => {
   return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map((val, index) => ({
     key: `grid_${index}`,
     position: {
-      x: val / 12 * editorWidth
+      x: roundToNearest(val / 12 * editorWidth)
     }
   }));
 });
 const getWideGuidelines = memoizeOne(editorWidth => {
-  const wideSpacing = editorWidth * breakoutWideScaleRatio / 2;
+  const wideSpacing = roundToNearest(editorWidth * breakoutWideScaleRatio / 2);
   return [{
     key: `wide_left`,
     position: {
@@ -24,7 +25,7 @@ const getWideGuidelines = memoizeOne(editorWidth => {
   }];
 });
 const getFullWidthGuidelines = memoizeOne(containerWidth => {
-  const fullWidth = getContainerWidthOrFullEditorWidth(containerWidth);
+  const fullWidth = roundToNearest(getContainerWidthOrFullEditorWidth(containerWidth));
   return [{
     key: `full_width_left`,
     position: {

package/dist/es2019/guideline/index.js

@@ -2,6 +2,6 @@ export { generateDynamicGuidelines } from './dynamicGuideline';
 export { createFixedGuidelinesFromLengths, createGuidesFromLengths } from './fixedGuideline';
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
-export { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
-export { getSnapWidth, findClosestSnap } from './snapping';
+export { MEDIA_DYNAMIC_GUIDELINE_PREFIX, INNER_GRID_GUIDELINE_PREFIX } from './constants';
+export { getGuidelineSnaps, findClosestSnap } from './snapping';
 export { isVerticalPosition, getContainerWidthOrFullEditorWidth } from './utils';

package/dist/es2019/guideline/snapping.js

@@ -1,18 +1,21 @@
-import { MediaSingleLayout } from '../media-single';
+import memoizeOne from 'memoize-one';
 import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
+import { isVerticalPosition } from './utils';
+
 /**
  * Returns keys of guidelines that are closest to the image and withthin the snapGap.
  * If both default and dynamic guidelines present, only returns default guidelines
  */
-export const findClosestSnap = (mediaSingleWidth, snapArray, snapTo, snapGap = 0) => {
+export const findClosestSnap = (mediaSingleWidth, snapArray, guidelineSnaps, snapGap = 0) => {
   const closestGapIndex = snapArray.reduce((prev, curr, index) => Math.abs(curr - mediaSingleWidth) < Math.abs(snapArray[prev] - mediaSingleWidth) ? index : prev, 0);
   const gap = Math.abs(snapArray[closestGapIndex] - mediaSingleWidth);
   if (gap < snapGap) {
-    const snappingWidth = Math.round(snapTo[closestGapIndex].width);
+    const snappingWidth = snapArray[closestGapIndex];
     let guidelineKeys = [];
-    snapTo.forEach(s => {
-      if (Math.round(Math.abs(s.width)) === snappingWidth) {
-        guidelineKeys.push(s.guidelineKey);
+    // find wich guideline have the matching snap width
+    guidelineSnaps.forEach(gs => {
+      if (gs.width === snappingWidth) {
+        guidelineKeys.push(gs.guidelineKey);
       }
     });
     const defaultGuidelineKeys = guidelineKeys.filter(guidelineKey => !guidelineKey.startsWith(MEDIA_DYNAMIC_GUIDELINE_PREFIX));
@@ -28,33 +31,38 @@ export const findClosestSnap = (mediaSingleWidth, snapArray, snapTo, snapGap = 0
     keys: []
   };
 };
-
-/**
- * Get snapping widths and respective guideline keys
- */
-export const getSnapWidth = (guidelines, mediaSingleWidth, snap, layout) => {
-  return guidelines.map(guideline => {
-    var _guideline$position;
-    const positionX = (_guideline$position = guideline.position) !== null && _guideline$position !== void 0 && _guideline$position.x && typeof guideline.position.x === 'number' ? guideline.position.x : 0;
-    if (layout === MediaSingleLayout.CENTER || layout === MediaSingleLayout.WIDE || layout === MediaSingleLayout.FULL_WIDTH) {
-      return {
-        guidelineKey: guideline.key,
-        width: mediaSingleWidth + (snap - positionX) * 2
-      };
-    } else if (layout === MediaSingleLayout.ALIGN_END || layout === MediaSingleLayout.WRAP_RIGHT) {
+export const getGuidelineSnaps = memoizeOne((guidelines, editorWidth, layout = 'center') => {
+  const offset = editorWidth / 2;
+  const getPositionX = position => {
+    return isVerticalPosition(position) ? position.x : 0;
+  };
+  const calcXSnaps = guidelineReference => {
+    const snapsWidth = guidelineReference.filter(g => g.width > 0).map(g => g.width);
+    const uniqueSnapWidth = [...new Set(snapsWidth)];
+    return snapsWidth.length ? uniqueSnapWidth : undefined;
+  };
+  const guidelinesSnapsReference = guidelines.map(guideline => {
+    const positionX = getPositionX(guideline.position);
+    if (['align-end', 'wrap-right'].includes(layout)) {
       return {
         guidelineKey: guideline.key,
-        width: mediaSingleWidth + (snap - positionX)
+        width: offset - positionX
       };
-    } else if (layout === MediaSingleLayout.ALIGN_START || layout === MediaSingleLayout.WRAP_LEFT) {
+    } else if (['align-start', 'wrap-left'].includes(layout)) {
       return {
         guidelineKey: guideline.key,
-        width: mediaSingleWidth + positionX - snap
+        width: positionX + offset
       };
     }
     return {
-      guidelineKey: '',
-      width: 0
+      guidelineKey: guideline.key,
+      width: Math.abs(positionX) * 2
     };
-  }).filter(guideline => guideline.guidelineKey !== '');
-};
+  });
+  return {
+    guidelineReference: guidelinesSnapsReference,
+    snaps: {
+      x: calcXSnaps(guidelinesSnapsReference)
+    }
+  };
+});

package/dist/es2019/keymaps/index.js

@@ -2,6 +2,7 @@
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
 import { N400 } from '@atlaskit/theme/colors';
+import { pluginCommandToPMCommand } from '../preset/plugin-commands';
 import { browser } from '../utils';
 export const addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
 export const navToEditorToolbar = makeKeyMapWithCommon('Navigate to editor toolbar', 'Alt-F9');
@@ -186,15 +187,17 @@ export function makeKeyMapWithCommon(description, common) {
   const mac = common.replace(/Mod/i, 'Cmd');
   return makeKeymap(description, windows, mac, common);
 }
+function combineWithOldCommand(cmd, oldCmd) {
+  return (state, dispatch, editorView) => {
+    return oldCmd(state, dispatch) || cmd(state, dispatch, editorView);
+  };
+}
 export function bindKeymapWithCommand(shortcut, cmd, keymap) {
   const oldCmd = keymap[shortcut];
-  let newCmd = cmd;
-  if (keymap[shortcut]) {
-    newCmd = (state, dispatch, editorView) => {
-      return oldCmd(state, dispatch) || cmd(state, dispatch, editorView);
-    };
-  }
-  keymap[shortcut] = newCmd;
+  keymap[shortcut] = oldCmd ? combineWithOldCommand(cmd, oldCmd) : cmd;
+}
+export function bindKeymapWithPluginCommand(shortcut, cmd, keymap) {
+  bindKeymapWithCommand(shortcut, pluginCommandToPMCommand(cmd), keymap);
 }
 export function findKeyMapForBrowser(keyMap) {
   if (keyMap) {

package/dist/es2019/media-single/utils.js

@@ -84,7 +84,7 @@ const calcLegacyWideWidth = (containerWidth, origWidth, contentWidth) => {
 };
 
 /**
- * Calculate maximum width allowed for media single in new experience
+ * Calculate maximum width allowed for media single node in fix-width editor in new experience
  * @param containerWidth width of editor container
  */
 export const calcMediaSingleMaxWidth = containerWidth => {