@atlaskit/editor-common 74.46.0 → 74.46.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.46.2
+
+### Patch Changes
+
+- [`72e552fe076`](https://bitbucket.org/atlassian/atlassian-frontend/commits/72e552fe076) - [ux] ED-17954: Fix inline node selections for mentions and emojis in iOS. Previously, the visually hidden assistive text would also be shown as a selection in iOS which would often make the selection look larger than the actual node itself.
+
+## 74.46.1
+
+### Patch Changes
+
+- [`51e6a0128eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51e6a0128eb) - ED-18969 Implemented relative guideline
+
 ## 74.46.0
 
 ### Minor 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/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.46.0";
+var packageVersion = "74.46.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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.46.0";
+var packageVersion = "74.46.2";
 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';

package/dist/es2019/guideline/relativeGuideline.js

@@ -0,0 +1,143 @@
+import { roundToNearest } from '../media-single';
+import { getMediaSingleDimensions } from './utils';
+const RELATIVE_GUIDES_GAP = 6;
+const getWidthRelativeGuideline = (key, view, nodeWithPos, editorWidth, size) => {
+  const {
+    node,
+    pos
+  } = nodeWithPos;
+  const {
+    top: topOffSet,
+    height: viewHeight
+  } = view.dom.getBoundingClientRect();
+  const {
+    top
+  } = view.coordsAtPos(pos + 1); // media node
+
+  const {
+    width,
+    height
+  } = size || getMediaSingleDimensions(node, editorWidth) || {};
+  const y = top - topOffSet - RELATIVE_GUIDES_GAP;
+  if (!width || !height || y < 0 || y > viewHeight) {
+    return null;
+  }
+  let start = 0;
+  let 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,
+    position: {
+      y,
+      x: {
+        start,
+        end
+      }
+    },
+    active: true,
+    styles: {
+      lineStyle: 'dashed',
+      capStyle: 'line'
+    }
+  };
+};
+const getHeightRelativeGuideline = (key, view, nodeWithPos, editorWidth, size) => {
+  const {
+    node,
+    pos
+  } = nodeWithPos;
+  const {
+    top: topOffSet,
+    height: viewHeight
+  } = view.dom.getBoundingClientRect();
+  const {
+    top
+  } = view.coordsAtPos(pos + 1); // media node
+
+  const {
+    width,
+    height
+  } = size || getMediaSingleDimensions(node, editorWidth) || {};
+  if (!width || !height) {
+    return null;
+  }
+  const start = top - topOffSet;
+  const end = start + height;
+  if (end < 0 || start > viewHeight) {
+    return null;
+  }
+  let x = 0;
+  const 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,
+    position: {
+      x: x + RELATIVE_GUIDES_GAP,
+      y: {
+        start,
+        end
+      }
+    },
+    active: true,
+    styles: {
+      lineStyle: 'dashed',
+      capStyle: 'line'
+    }
+  };
+};
+export const getRelativeGuideSnaps = (relativeGuides, aspectRatio) => {
+  const snapsWidthFromMatchingHeight = Object.keys(relativeGuides.height || {}).map(heightKey => {
+    const height = Number.parseInt(heightKey);
+    return roundToNearest(height * aspectRatio);
+  });
+  const snapsWidthFromMatchingWidth = Object.keys(relativeGuides.width || {}).map(widthKey => {
+    return Number.parseInt(widthKey);
+  });
+  return [...snapsWidthFromMatchingWidth, ...snapsWidthFromMatchingHeight];
+};
+export const getRelativeGuidelines = (relativeGuides, nodeWithPos, view, editorWidth, size) => {
+  const matchWidth = relativeGuides.width ? relativeGuides.width[Math.round(size.width)] : [];
+  const matchHeight = relativeGuides.height ? relativeGuides.height[Math.round(size.height)] : [];
+  const matches = matchWidth || matchHeight;
+  const getRelativeGuideline = matchWidth && getWidthRelativeGuideline || matchHeight && getHeightRelativeGuideline || null;
+  if (matches && getRelativeGuideline) {
+    return [getRelativeGuideline('relative_guide_current', view, nodeWithPos, editorWidth, size), ...matches.map((nodeWithPos, index) => {
+      return getRelativeGuideline(`relative_guide_${index}`, view, nodeWithPos, editorWidth);
+    })].filter(config => !!config);
+  }
+  return [];
+};

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "74.46.0";
+const packageVersion = "74.46.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

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

package/dist/esm/guideline/dynamicGuideline.js

@@ -1,62 +1,90 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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) { _defineProperty(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; }
 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 var generateDynamicGuidelines = function generateDynamicGuidelines(state, editorWidth) {
   var styles = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var selectedNode = state.selection instanceof NodeSelection && state.selection.node;
-  var mediaSingleNode = findChildren(state.tr.doc, function (node) {
+  var offset = editorWidth / 2;
+  return 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 = getMediaSinglePixelWidth(width, editorWidth, widthType);
-    var key = "".concat(MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(index);
-    switch (layout) {
-      case 'align-start':
-      case 'wrap-left':
-        return _objectSpread({
-          position: {
-            x: roundToNearest(pixelWidth - offset)
-          },
-          key: key
-        }, styles);
-      case 'align-end':
-      case 'wrap-right':
-        return _objectSpread({
-          position: {
-            x: roundToNearest(offset - pixelWidth)
-          },
-          key: key
-        }, styles);
-      case 'center':
-        return [_objectSpread({
-          position: {
-            x: roundToNearest(pixelWidth / 2)
-          },
-          key: "".concat(key, "_right")
-        }, styles), _objectSpread({
-          position: {
-            x: -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 = getMediaSingleDimensions(node, editorWidth);
+    if (!dimensions) {
+      return acc;
+    }
+    var width = dimensions.width,
+      height = dimensions.height;
+    var dynamicGuides = [].concat(_toConsumableArray(acc.dynamicGuides), _toConsumableArray(getDynamicGuides(node.attrs.layout, width, offset, "".concat(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), {}, _defineProperty({}, width, [].concat(_toConsumableArray(accRelativeGuidesWidth[width] || []), [nodeWithPos])));
+    var relativeGuidesWidthHeight = _objectSpread(_objectSpread({}, accRelativeGuidesHeight), {}, _defineProperty({}, Math.round(height), [].concat(_toConsumableArray(accRelativeGuidesHeight[height] || []), [nodeWithPos])));
+    return {
+      dynamicGuides: dynamicGuides,
+      relativeGuides: {
+        width: relativeGuidesWidth,
+        height: relativeGuidesWidthHeight
+      }
+    };
+  }, {
+    relativeGuides: {
+      width: {},
+      height: {}
+    },
+    dynamicGuides: []
+  });
+};
+var getDynamicGuides = function getDynamicGuides(layout, width, offset, key, styles) {
+  switch (layout) {
+    case 'align-start':
+    case 'wrap-left':
+      return [_objectSpread({
+        position: {
+          x: roundToNearest(width - offset)
+        },
+        key: key
+      }, styles)];
+    case 'align-end':
+    case 'wrap-right':
+      return [_objectSpread({
+        position: {
+          x: roundToNearest(offset - width)
+        },
+        key: key
+      }, styles)];
+    case 'center':
+      return [_objectSpread({
+        position: {
+          x: roundToNearest(width / 2)
+        },
+        key: "".concat(key, "_right")
+      }, styles), _objectSpread({
+        position: {
+          x: -roundToNearest(width / 2)
+        },
+        key: "".concat(key, "_left")
+      }, styles)];
+    default:
+      return [];
+  }
 };

package/dist/esm/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';

package/dist/esm/guideline/relativeGuideline.js

@@ -0,0 +1,136 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { roundToNearest } from '../media-single';
+import { getMediaSingleDimensions } from './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 || 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 || 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'
+    }
+  };
+};
+export var getRelativeGuideSnaps = function getRelativeGuideSnaps(relativeGuides, aspectRatio) {
+  var snapsWidthFromMatchingHeight = Object.keys(relativeGuides.height || {}).map(function (heightKey) {
+    var height = Number.parseInt(heightKey);
+    return roundToNearest(height * aspectRatio);
+  });
+  var snapsWidthFromMatchingWidth = Object.keys(relativeGuides.width || {}).map(function (widthKey) {
+    return Number.parseInt(widthKey);
+  });
+  return [].concat(_toConsumableArray(snapsWidthFromMatchingWidth), _toConsumableArray(snapsWidthFromMatchingHeight));
+};
+export 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(_toConsumableArray(matches.map(function (nodeWithPos, index) {
+      return getRelativeGuideline("relative_guide_".concat(index), view, nodeWithPos, editorWidth);
+    }))).filter(function (config) {
+      return !!config;
+    });
+  }
+  return [];
+};

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { _defineProperty(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 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.46.0";
+var packageVersion = "74.46.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.46.0";
+var packageVersion = "74.46.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/guideline/dynamicGuideline.d.ts

@@ -1,27 +1,6 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { GuidelineConfig } from './types';
-export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number, styles?: Omit<GuidelineConfig, 'key' | 'position'>) => ({
-    styles?: {
-        capStyle?: "line" | undefined;
-        lineStyle?: "dashed" | "solid" | undefined;
-        color?: import("@atlaskit/tokens").CSSToken | undefined;
-    } | undefined;
-    show?: boolean | undefined;
-    active?: boolean | undefined;
-    position: {
-        x: number;
-    };
-    key: string;
-} | {
-    styles?: {
-        capStyle?: "line" | undefined;
-        lineStyle?: "dashed" | "solid" | undefined;
-        color?: import("@atlaskit/tokens").CSSToken | undefined;
-    } | undefined;
-    show?: boolean | undefined;
-    active?: boolean | undefined;
-    position: {
-        x: number;
-    };
-    key: string;
-})[];
+import type { GuidelineConfig, GuidelineStyles, RelativeGuides } from './types';
+export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number, styles?: GuidelineStyles) => {
+    dynamicGuides: GuidelineConfig[];
+    relativeGuides: RelativeGuides;
+};

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

@@ -3,6 +3,7 @@ export { createFixedGuidelinesFromLengths, createGuidesFromLengths, } from './fi
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX, INNER_GRID_GUIDELINE_PREFIX, } from './constants';
-export type { WidthTypes, Position, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, VerticalPosition, HorizontalPosition, GuidelineSnap, GuidelineSnapsReference, GuidelineTypes, } from './types';
+export type { WidthTypes, Position, GuidelineStyles, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, VerticalPosition, HorizontalPosition, RelativeGuides, GuidelineSnap, GuidelineSnapsReference, GuidelineTypes, } from './types';
 export { getGuidelineSnaps, findClosestSnap } from './snapping';
-export { isVerticalPosition, getContainerWidthOrFullEditorWidth, getGuidelineTypeFromKey, } from './utils';
+export { isVerticalPosition, getMediaSingleDimensions, getContainerWidthOrFullEditorWidth, getGuidelineTypeFromKey, } from './utils';
+export { getRelativeGuideSnaps, getRelativeGuidelines, } from './relativeGuideline';

package/dist/types/guideline/relativeGuideline.d.ts

@@ -0,0 +1,8 @@
+import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { GuidelineConfig, RelativeGuides } from './types';
+export declare const getRelativeGuideSnaps: (relativeGuides: RelativeGuides, aspectRatio: number) => number[];
+export declare const getRelativeGuidelines: (relativeGuides: RelativeGuides, nodeWithPos: NodeWithPos, view: EditorView, editorWidth: number, size: {
+    width: number;
+    height: number;
+}) => GuidelineConfig[];

package/dist/types/guideline/types.d.ts

@@ -1,3 +1,4 @@
+import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CSSToken } from '@atlaskit/tokens';
 export type WidthTypes = 'percentage' | 'pixel';
@@ -19,9 +20,7 @@ export type HorizontalPosition = {
     y: number;
 };
 export type Position = VerticalPosition | HorizontalPosition;
-export type GuidelineConfig = {
-    key: string;
-    position: Position;
+export type GuidelineStyles = {
     active?: boolean;
     show?: boolean;
     styles?: {
@@ -30,6 +29,10 @@ export type GuidelineConfig = {
         color?: CSSToken;
     };
 };
+export type GuidelineConfig = {
+    key: string;
+    position: Position;
+} & GuidelineStyles;
 export type GuidelinePluginState = {
     guidelines: GuidelineConfig[];
 };
@@ -49,3 +52,11 @@ export type GuidelineSnapsReference = {
     guidelineReference: GuidelineSnap[];
 };
 export type GuidelineTypes = 'default' | 'temporary' | 'relative' | 'none';
+export type RelativeGuides = {
+    width?: {
+        [key: number]: NodeWithPos[];
+    };
+    height?: {
+        [key: number]: NodeWithPos[];
+    };
+};

package/dist/types-ts4.5/guideline/dynamicGuideline.d.ts

@@ -1,27 +1,6 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { GuidelineConfig } from './types';
-export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number, styles?: Omit<GuidelineConfig, 'key' | 'position'>) => ({
-    styles?: {
-        capStyle?: "line" | undefined;
-        lineStyle?: "dashed" | "solid" | undefined;
-        color?: import("@atlaskit/tokens").CSSToken | undefined;
-    } | undefined;
-    show?: boolean | undefined;
-    active?: boolean | undefined;
-    position: {
-        x: number;
-    };
-    key: string;
-} | {
-    styles?: {
-        capStyle?: "line" | undefined;
-        lineStyle?: "dashed" | "solid" | undefined;
-        color?: import("@atlaskit/tokens").CSSToken | undefined;
-    } | undefined;
-    show?: boolean | undefined;
-    active?: boolean | undefined;
-    position: {
-        x: number;
-    };
-    key: string;
-})[];
+import type { GuidelineConfig, GuidelineStyles, RelativeGuides } from './types';
+export declare const generateDynamicGuidelines: (state: EditorState, editorWidth: number, styles?: GuidelineStyles) => {
+    dynamicGuides: GuidelineConfig[];
+    relativeGuides: RelativeGuides;
+};

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

@@ -3,6 +3,7 @@ export { createFixedGuidelinesFromLengths, createGuidesFromLengths, } from './fi
 export { generateDefaultGuidelines } from './defaultGuideline';
 export { getGuidelinesWithHighlights } from './updateGuideline';
 export { MEDIA_DYNAMIC_GUIDELINE_PREFIX, INNER_GRID_GUIDELINE_PREFIX, } from './constants';
-export type { WidthTypes, Position, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, VerticalPosition, HorizontalPosition, GuidelineSnap, GuidelineSnapsReference, GuidelineTypes, } from './types';
+export type { WidthTypes, Position, GuidelineStyles, GuidelineConfig, GuidelinePluginState, GuidelinePluginOptions, DisplayGuideline, DisplayGrid, VerticalPosition, HorizontalPosition, RelativeGuides, GuidelineSnap, GuidelineSnapsReference, GuidelineTypes, } from './types';
 export { getGuidelineSnaps, findClosestSnap } from './snapping';
-export { isVerticalPosition, getContainerWidthOrFullEditorWidth, getGuidelineTypeFromKey, } from './utils';
+export { isVerticalPosition, getMediaSingleDimensions, getContainerWidthOrFullEditorWidth, getGuidelineTypeFromKey, } from './utils';
+export { getRelativeGuideSnaps, getRelativeGuidelines, } from './relativeGuideline';

package/dist/types-ts4.5/guideline/relativeGuideline.d.ts

@@ -0,0 +1,8 @@
+import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { GuidelineConfig, RelativeGuides } from './types';
+export declare const getRelativeGuideSnaps: (relativeGuides: RelativeGuides, aspectRatio: number) => number[];
+export declare const getRelativeGuidelines: (relativeGuides: RelativeGuides, nodeWithPos: NodeWithPos, view: EditorView, editorWidth: number, size: {
+    width: number;
+    height: number;
+}) => GuidelineConfig[];

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

@@ -1,3 +1,4 @@
+import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CSSToken } from '@atlaskit/tokens';
 export type WidthTypes = 'percentage' | 'pixel';
@@ -19,9 +20,7 @@ export type HorizontalPosition = {
     y: number;
 };
 export type Position = VerticalPosition | HorizontalPosition;
-export type GuidelineConfig = {
-    key: string;
-    position: Position;
+export type GuidelineStyles = {
     active?: boolean;
     show?: boolean;
     styles?: {
@@ -30,6 +29,10 @@ export type GuidelineConfig = {
         color?: CSSToken;
     };
 };
+export type GuidelineConfig = {
+    key: string;
+    position: Position;
+} & GuidelineStyles;
 export type GuidelinePluginState = {
     guidelines: GuidelineConfig[];
 };
@@ -49,3 +52,11 @@ export type GuidelineSnapsReference = {
     guidelineReference: GuidelineSnap[];
 };
 export type GuidelineTypes = 'default' | 'temporary' | 'relative' | 'none';
+export type RelativeGuides = {
+    width?: {
+        [key: number]: NodeWithPos[];
+    };
+    height?: {
+        [key: number]: NodeWithPos[];
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "74.46.0",
+  "version": "74.46.2",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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