@atlaskit/editor-common 74.45.5 → 74.46.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.46.1
+
+### Patch Changes
+
+- [`51e6a0128eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51e6a0128eb) - ED-18969 Implemented relative guideline
+
+## 74.46.0
+
+### Minor Changes
+
+- [`24fc3925d73`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24fc3925d73) - Add a new hook called `usePreset` accesed via `@atlaskit/editor-core/use-preset`. This hook can be used to safely access state and commands from outside the editor using `EditorContext`.
+
 ## 74.45.5
 
 ### Patch Changes

package/dist/cjs/guideline/dynamicGuideline.js

@@ -6,65 +6,93 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.generateDynamicGuidelines = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _mediaSingle = require("../media-single");
 var _constants = require("./constants");
+var _utils2 = require("./utils");
 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 generateDynamicGuidelines = function generateDynamicGuidelines(state, editorWidth) {
   var styles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var selectedNode = state.selection instanceof _state.NodeSelection && state.selection.node;
-  var mediaSingleNode = (0, _utils.findChildren)(state.tr.doc, function (node) {
+  var offset = editorWidth / 2;
+  return (0, _utils.findChildren)(state.tr.doc, function (node) {
     return node.type === state.schema.nodes.mediaSingle;
-  }, false // only top level
-  );
+  }).reduce(function (acc, nodeWithPos, index) {
+    var _acc$relativeGuides, _acc$relativeGuides2;
+    var node = nodeWithPos.node,
+      pos = nodeWithPos.pos;
 
-  var offset = editorWidth / 2;
-  return mediaSingleNode.map(function (_ref, index) {
-    var node = _ref.node;
-    if (selectedNode === node) {
-      return [];
+    // if the current node the selected node
+    // or the node is not using pixel width,
+    // We will skip the node.
+    if (selectedNode === node || node.attrs.widthType !== 'pixel') {
+      return acc;
     }
-    var _node$attrs = node.attrs,
-      layout = _node$attrs.layout,
-      width = _node$attrs.width,
-      widthType = _node$attrs.widthType;
-    var pixelWidth = (0, _mediaSingle.getMediaSinglePixelWidth)(width, editorWidth, widthType);
-    var key = "".concat(_constants.MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(index);
-    switch (layout) {
-      case 'align-start':
-      case 'wrap-left':
-        return _objectSpread({
-          position: {
-            x: (0, _mediaSingle.roundToNearest)(pixelWidth - offset)
-          },
-          key: key
-        }, styles);
-      case 'align-end':
-      case 'wrap-right':
-        return _objectSpread({
-          position: {
-            x: (0, _mediaSingle.roundToNearest)(offset - pixelWidth)
-          },
-          key: key
-        }, styles);
-      case 'center':
-        return [_objectSpread({
-          position: {
-            x: (0, _mediaSingle.roundToNearest)(pixelWidth / 2)
-          },
-          key: "".concat(key, "_right")
-        }, styles), _objectSpread({
-          position: {
-            x: -(0, _mediaSingle.roundToNearest)(pixelWidth / 2)
-          },
-          key: "".concat(key, "_left")
-        }, styles)];
-      // we ignore full-width and wide
-      default:
-        return [];
+    var $pos = state.tr.doc.resolve(pos);
+    if ($pos.parent.type !== state.schema.nodes.doc) {
+      return acc;
     }
-  }).flat();
+    var dimensions = (0, _utils2.getMediaSingleDimensions)(node, editorWidth);
+    if (!dimensions) {
+      return acc;
+    }
+    var width = dimensions.width,
+      height = dimensions.height;
+    var dynamicGuides = [].concat((0, _toConsumableArray2.default)(acc.dynamicGuides), (0, _toConsumableArray2.default)(getDynamicGuides(node.attrs.layout, width, offset, "".concat(_constants.MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(index), styles)));
+    var accRelativeGuidesWidth = ((_acc$relativeGuides = acc.relativeGuides) === null || _acc$relativeGuides === void 0 ? void 0 : _acc$relativeGuides.width) || {};
+    var accRelativeGuidesHeight = ((_acc$relativeGuides2 = acc.relativeGuides) === null || _acc$relativeGuides2 === void 0 ? void 0 : _acc$relativeGuides2.height) || {};
+    var relativeGuidesWidth = _objectSpread(_objectSpread({}, accRelativeGuidesWidth), {}, (0, _defineProperty2.default)({}, width, [].concat((0, _toConsumableArray2.default)(accRelativeGuidesWidth[width] || []), [nodeWithPos])));
+    var relativeGuidesWidthHeight = _objectSpread(_objectSpread({}, accRelativeGuidesHeight), {}, (0, _defineProperty2.default)({}, Math.round(height), [].concat((0, _toConsumableArray2.default)(accRelativeGuidesHeight[height] || []), [nodeWithPos])));
+    return {
+      dynamicGuides: dynamicGuides,
+      relativeGuides: {
+        width: relativeGuidesWidth,
+        height: relativeGuidesWidthHeight
+      }
+    };
+  }, {
+    relativeGuides: {
+      width: {},
+      height: {}
+    },
+    dynamicGuides: []
+  });
 };
-exports.generateDynamicGuidelines = generateDynamicGuidelines;
+exports.generateDynamicGuidelines = generateDynamicGuidelines;
+var getDynamicGuides = function getDynamicGuides(layout, width, offset, key, styles) {
+  switch (layout) {
+    case 'align-start':
+    case 'wrap-left':
+      return [_objectSpread({
+        position: {
+          x: (0, _mediaSingle.roundToNearest)(width - offset)
+        },
+        key: key
+      }, styles)];
+    case 'align-end':
+    case 'wrap-right':
+      return [_objectSpread({
+        position: {
+          x: (0, _mediaSingle.roundToNearest)(offset - width)
+        },
+        key: key
+      }, styles)];
+    case 'center':
+      return [_objectSpread({
+        position: {
+          x: (0, _mediaSingle.roundToNearest)(width / 2)
+        },
+        key: "".concat(key, "_right")
+      }, styles), _objectSpread({
+        position: {
+          x: -(0, _mediaSingle.roundToNearest)(width / 2)
+        },
+        key: "".concat(key, "_left")
+      }, styles)];
+    default:
+      return [];
+  }
+};

package/dist/cjs/guideline/index.js

@@ -69,6 +69,24 @@ Object.defineProperty(exports, "getGuidelinesWithHighlights", {
     return _updateGuideline.getGuidelinesWithHighlights;
   }
 });
+Object.defineProperty(exports, "getMediaSingleDimensions", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getMediaSingleDimensions;
+  }
+});
+Object.defineProperty(exports, "getRelativeGuideSnaps", {
+  enumerable: true,
+  get: function get() {
+    return _relativeGuideline.getRelativeGuideSnaps;
+  }
+});
+Object.defineProperty(exports, "getRelativeGuidelines", {
+  enumerable: true,
+  get: function get() {
+    return _relativeGuideline.getRelativeGuidelines;
+  }
+});
 Object.defineProperty(exports, "isVerticalPosition", {
   enumerable: true,
   get: function get() {
@@ -81,4 +99,5 @@ var _defaultGuideline = require("./defaultGuideline");
 var _updateGuideline = require("./updateGuideline");
 var _constants = require("./constants");
 var _snapping = require("./snapping");
-var _utils = require("./utils");
+var _utils = require("./utils");
+var _relativeGuideline = require("./relativeGuideline");

package/dist/cjs/guideline/relativeGuideline.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getRelativeGuidelines = exports.getRelativeGuideSnaps = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _mediaSingle = require("../media-single");
+var _utils = require("./utils");
+var RELATIVE_GUIDES_GAP = 6;
+var getWidthRelativeGuideline = function getWidthRelativeGuideline(key, view, nodeWithPos, editorWidth, size) {
+  var node = nodeWithPos.node,
+    pos = nodeWithPos.pos;
+  var _view$dom$getBounding = view.dom.getBoundingClientRect(),
+    topOffSet = _view$dom$getBounding.top,
+    viewHeight = _view$dom$getBounding.height;
+  var _view$coordsAtPos = view.coordsAtPos(pos + 1),
+    top = _view$coordsAtPos.top; // media node
+
+  var _ref = size || (0, _utils.getMediaSingleDimensions)(node, editorWidth) || {},
+    width = _ref.width,
+    height = _ref.height;
+  var y = top - topOffSet - RELATIVE_GUIDES_GAP;
+  if (!width || !height || y < 0 || y > viewHeight) {
+    return null;
+  }
+  var start = 0;
+  var end = 0;
+  switch (node.attrs.layout) {
+    case 'align-start':
+    case 'wrap-left':
+      start = -editorWidth / 2;
+      end = start + width;
+      break;
+    case 'align-end':
+    case 'wrap-right':
+      end = editorWidth / 2;
+      start = end - width;
+      break;
+    case 'center':
+    case 'wide':
+    case 'full-width':
+      end = width / 2;
+      start = -end;
+      break;
+    default:
+  }
+  return {
+    key: key,
+    position: {
+      y: y,
+      x: {
+        start: start,
+        end: end
+      }
+    },
+    active: true,
+    styles: {
+      lineStyle: 'dashed',
+      capStyle: 'line'
+    }
+  };
+};
+var getHeightRelativeGuideline = function getHeightRelativeGuideline(key, view, nodeWithPos, editorWidth, size) {
+  var node = nodeWithPos.node,
+    pos = nodeWithPos.pos;
+  var _view$dom$getBounding2 = view.dom.getBoundingClientRect(),
+    topOffSet = _view$dom$getBounding2.top,
+    viewHeight = _view$dom$getBounding2.height;
+  var _view$coordsAtPos2 = view.coordsAtPos(pos + 1),
+    top = _view$coordsAtPos2.top; // media node
+
+  var _ref2 = size || (0, _utils.getMediaSingleDimensions)(node, editorWidth) || {},
+    width = _ref2.width,
+    height = _ref2.height;
+  if (!width || !height) {
+    return null;
+  }
+  var start = top - topOffSet;
+  var end = start + height;
+  if (end < 0 || start > viewHeight) {
+    return null;
+  }
+  var x = 0;
+  var halfWidth = editorWidth / 2;
+  switch (node.attrs.layout) {
+    case 'align-start':
+    case 'wrap-left':
+      x = width - halfWidth;
+      break;
+    case 'align-end':
+    case 'wrap-right':
+      x = halfWidth;
+      break;
+    case 'center':
+    case 'wide':
+    case 'full-width':
+      x = width / 2;
+      break;
+    default:
+      x = 0;
+  }
+  return {
+    key: key,
+    position: {
+      x: x + RELATIVE_GUIDES_GAP,
+      y: {
+        start: start,
+        end: end
+      }
+    },
+    active: true,
+    styles: {
+      lineStyle: 'dashed',
+      capStyle: 'line'
+    }
+  };
+};
+var getRelativeGuideSnaps = function getRelativeGuideSnaps(relativeGuides, aspectRatio) {
+  var snapsWidthFromMatchingHeight = Object.keys(relativeGuides.height || {}).map(function (heightKey) {
+    var height = Number.parseInt(heightKey);
+    return (0, _mediaSingle.roundToNearest)(height * aspectRatio);
+  });
+  var snapsWidthFromMatchingWidth = Object.keys(relativeGuides.width || {}).map(function (widthKey) {
+    return Number.parseInt(widthKey);
+  });
+  return [].concat((0, _toConsumableArray2.default)(snapsWidthFromMatchingWidth), (0, _toConsumableArray2.default)(snapsWidthFromMatchingHeight));
+};
+exports.getRelativeGuideSnaps = getRelativeGuideSnaps;
+var getRelativeGuidelines = function getRelativeGuidelines(relativeGuides, nodeWithPos, view, editorWidth, size) {
+  var matchWidth = relativeGuides.width ? relativeGuides.width[Math.round(size.width)] : [];
+  var matchHeight = relativeGuides.height ? relativeGuides.height[Math.round(size.height)] : [];
+  var matches = matchWidth || matchHeight;
+  var getRelativeGuideline = matchWidth && getWidthRelativeGuideline || matchHeight && getHeightRelativeGuideline || null;
+  if (matches && getRelativeGuideline) {
+    return [getRelativeGuideline('relative_guide_current', view, nodeWithPos, editorWidth, size)].concat((0, _toConsumableArray2.default)(matches.map(function (nodeWithPos, index) {
+      return getRelativeGuideline("relative_guide_".concat(index), view, nodeWithPos, editorWidth);
+    }))).filter(function (config) {
+      return !!config;
+    });
+  }
+  return [];
+};
+exports.getRelativeGuidelines = getRelativeGuidelines;

package/dist/cjs/keymaps/index.js

@@ -80,7 +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.bindKeymapWithEditorCommand = bindKeymapWithEditorCommand;
 exports.find = exports.escape = exports.enter = exports.deleteKey = exports.cut = exports.ctrlBackSpace = exports.copy = exports.clearFormatting = void 0;
 exports.findKeyMapForBrowser = findKeyMapForBrowser;
 exports.findKeymapByDescription = findKeymapByDescription;
@@ -105,7 +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 _editorCommands = require("../preset/editor-commands");
 var _utils = require("../utils");
 var _consts = require("./consts");
 var _keymap = require("./keymap");
@@ -363,8 +363,8 @@ function bindKeymapWithCommand(shortcut, cmd, keymap) {
   var oldCmd = keymap[shortcut];
   keymap[shortcut] = oldCmd ? combineWithOldCommand(cmd, oldCmd) : cmd;
 }
-function bindKeymapWithPluginCommand(shortcut, cmd, keymap) {
-  bindKeymapWithCommand(shortcut, (0, _pluginCommands.pluginCommandToPMCommand)(cmd), keymap);
+function bindKeymapWithEditorCommand(shortcut, cmd, keymap) {
+  bindKeymapWithCommand(shortcut, (0, _editorCommands.editorCommandToPMCommand)(cmd), keymap);
 }
 function findKeyMapForBrowser(keyMap) {
   if (keyMap) {

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.45.5";
+var packageVersion = "74.46.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/{plugin-commands.js → editor-commands.js}

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.pluginCommandToPMCommand = pluginCommandToPMCommand;
+exports.editorCommandToPMCommand = editorCommandToPMCommand;
 /**
- * Convert a PluginCommand to a standard Prosemirror Command.
- * The preferred approach to dispatching a `PluginCommand` is via the
+ * Convert a EditorCommand to a standard Prosemirror Command.
+ * The preferred approach to dispatching a `EditorCommand` is via the
  * `executeCommand` on `pluginInjectionAPI`. In some cases
  * the type may require a Command until we refactor this out and this
  * function is suitable for those cases.
@@ -14,7 +14,7 @@ exports.pluginCommandToPMCommand = pluginCommandToPMCommand;
  * @param command A plugin command (a function that modifies and returns a `Transaction`)
  * @returns Command
  */
-function pluginCommandToPMCommand(command) {
+function editorCommandToPMCommand(command) {
   return function (_ref, dispatch) {
     var tr = _ref.tr;
     var newTr = command === null || command === void 0 ? void 0 : command({

package/dist/cjs/preset/index.js

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

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

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
-var _pluginCommands = require("./plugin-commands");
+var _editorCommands = require("./editor-commands");
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -125,11 +125,11 @@ var ActionsAPI = /*#__PURE__*/function () {
   }]);
   return ActionsAPI;
 }();
-var PluginCommandsAPI = /*#__PURE__*/function () {
-  function PluginCommandsAPI() {
-    (0, _classCallCheck2.default)(this, PluginCommandsAPI);
+var EditorCommandsAPI = /*#__PURE__*/function () {
+  function EditorCommandsAPI() {
+    (0, _classCallCheck2.default)(this, EditorCommandsAPI);
   }
-  (0, _createClass2.default)(PluginCommandsAPI, [{
+  (0, _createClass2.default)(EditorCommandsAPI, [{
     key: "createAPI",
     value: function createAPI(plugin) {
       if (!plugin || !hasCommands(plugin)) {
@@ -143,7 +143,7 @@ var PluginCommandsAPI = /*#__PURE__*/function () {
       });
     }
   }]);
-  return PluginCommandsAPI;
+  return EditorCommandsAPI;
 }();
 var SharedStateAPI = /*#__PURE__*/function () {
   function SharedStateAPI(_ref4) {
@@ -271,7 +271,7 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
     });
     this.plugins = new Map();
     this.actionsAPI = new ActionsAPI();
-    this.commandsAPI = new PluginCommandsAPI();
+    this.commandsAPI = new EditorCommandsAPI();
     this.getEditorView = getEditorView;
   }
   (0, _createClass2.default)(EditorPluginInjectionAPI, [{
@@ -321,7 +321,7 @@ var EditorPluginInjectionAPI = /*#__PURE__*/function () {
       }
       var state = editorView.state,
         dispatch = editorView.dispatch;
-      return (0, _pluginCommands.pluginCommandToPMCommand)(command)(state, dispatch);
+      return (0, _editorCommands.editorCommandToPMCommand)(command)(state, dispatch);
     }
   }]);
   return EditorPluginInjectionAPI;

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

package/dist/es2019/guideline/dynamicGuideline.js

@@ -1,64 +1,97 @@
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findChildren } from '@atlaskit/editor-prosemirror/utils';
-import { getMediaSinglePixelWidth, roundToNearest } from '../media-single';
+import { roundToNearest } from '../media-single';
 import { MEDIA_DYNAMIC_GUIDELINE_PREFIX } from './constants';
+import { getMediaSingleDimensions } from './utils';
 export const generateDynamicGuidelines = (state, editorWidth, styles = {}) => {
   const selectedNode = state.selection instanceof NodeSelection && state.selection.node;
-  const mediaSingleNode = findChildren(state.tr.doc, node => {
-    return node.type === state.schema.nodes.mediaSingle;
-  }, false // only top level
-  );
-
   const offset = editorWidth / 2;
-  return mediaSingleNode.map(({
-    node
-  }, index) => {
-    if (selectedNode === node) {
-      return [];
+  return findChildren(state.tr.doc, node => node.type === state.schema.nodes.mediaSingle).reduce((acc, nodeWithPos, index) => {
+    var _acc$relativeGuides, _acc$relativeGuides2;
+    const {
+      node,
+      pos
+    } = nodeWithPos;
+
+    // if the current node the selected node
+    // or the node is not using pixel width,
+    // We will skip the node.
+    if (selectedNode === node || node.attrs.widthType !== 'pixel') {
+      return acc;
+    }
+    const $pos = state.tr.doc.resolve(pos);
+    if ($pos.parent.type !== state.schema.nodes.doc) {
+      return acc;
+    }
+    const dimensions = getMediaSingleDimensions(node, editorWidth);
+    if (!dimensions) {
+      return acc;
     }
     const {
-      layout,
       width,
-      widthType
-    } = node.attrs;
-    const pixelWidth = getMediaSinglePixelWidth(width, editorWidth, widthType);
-    const key = `${MEDIA_DYNAMIC_GUIDELINE_PREFIX}${index}`;
-    switch (layout) {
-      case 'align-start':
-      case 'wrap-left':
-        return {
-          position: {
-            x: roundToNearest(pixelWidth - offset)
-          },
-          key,
-          ...styles
-        };
-      case 'align-end':
-      case 'wrap-right':
-        return {
-          position: {
-            x: roundToNearest(offset - pixelWidth)
-          },
-          key,
-          ...styles
-        };
-      case 'center':
-        return [{
-          position: {
-            x: roundToNearest(pixelWidth / 2)
-          },
-          key: `${key}_right`,
-          ...styles
-        }, {
-          position: {
-            x: -roundToNearest(pixelWidth / 2)
-          },
-          key: `${key}_left`,
-          ...styles
-        }];
-      // we ignore full-width and wide
-      default:
-        return [];
-    }
-  }).flat();
+      height
+    } = dimensions;
+    const dynamicGuides = [...acc.dynamicGuides, ...getDynamicGuides(node.attrs.layout, width, offset, `${MEDIA_DYNAMIC_GUIDELINE_PREFIX}${index}`, styles)];
+    const accRelativeGuidesWidth = ((_acc$relativeGuides = acc.relativeGuides) === null || _acc$relativeGuides === void 0 ? void 0 : _acc$relativeGuides.width) || {};
+    const accRelativeGuidesHeight = ((_acc$relativeGuides2 = acc.relativeGuides) === null || _acc$relativeGuides2 === void 0 ? void 0 : _acc$relativeGuides2.height) || {};
+    const relativeGuidesWidth = {
+      ...accRelativeGuidesWidth,
+      [width]: [...(accRelativeGuidesWidth[width] || []), nodeWithPos]
+    };
+    const relativeGuidesWidthHeight = {
+      ...accRelativeGuidesHeight,
+      [Math.round(height)]: [...(accRelativeGuidesHeight[height] || []), nodeWithPos]
+    };
+    return {
+      dynamicGuides,
+      relativeGuides: {
+        width: relativeGuidesWidth,
+        height: relativeGuidesWidthHeight
+      }
+    };
+  }, {
+    relativeGuides: {
+      width: {},
+      height: {}
+    },
+    dynamicGuides: []
+  });
+};
+const getDynamicGuides = (layout, width, offset, key, styles) => {
+  switch (layout) {
+    case 'align-start':
+    case 'wrap-left':
+      return [{
+        position: {
+          x: roundToNearest(width - offset)
+        },
+        key,
+        ...styles
+      }];
+    case 'align-end':
+    case 'wrap-right':
+      return [{
+        position: {
+          x: roundToNearest(offset - width)
+        },
+        key,
+        ...styles
+      }];
+    case 'center':
+      return [{
+        position: {
+          x: roundToNearest(width / 2)
+        },
+        key: `${key}_right`,
+        ...styles
+      }, {
+        position: {
+          x: -roundToNearest(width / 2)
+        },
+        key: `${key}_left`,
+        ...styles
+      }];
+    default:
+      return [];
+  }
 };

package/dist/es2019/guideline/index.js

@@ -4,4 +4,5 @@ export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX, INNER_GRID_GUIDELINE_PREFIX } from './constants';
 export { getGuidelineSnaps, findClosestSnap } from './snapping';
-export { isVerticalPosition, getContainerWidthOrFullEditorWidth, getGuidelineTypeFromKey } from './utils';
+export { isVerticalPosition, getMediaSingleDimensions, getContainerWidthOrFullEditorWidth, getGuidelineTypeFromKey } from './utils';
+export { getRelativeGuideSnaps, getRelativeGuidelines } from './relativeGuideline';