@atlaskit/editor-core 187.24.0 → 187.24.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-core
 
+## 187.24.2
+
+### Patch Changes
+
+- [`8efc1dfc706`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8efc1dfc706) - ED-19330 create editor-list-plugin
+- Updated dependencies
+
+## 187.24.1
+
+### Patch Changes
+
+- [`5c3064cffe3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c3064cffe3) - Remove a selection hack for Chrome 88 to improve foucs/blur performance
+- [`51e6a0128eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51e6a0128eb) - ED-18969 Implemented relative guideline
+
 ## 187.24.0
 
 ### Minor Changes

package/dist/cjs/plugins/base/index.js

@@ -8,6 +8,7 @@ exports.isChromeWithSelectionBug = exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _history = require("@atlaskit/editor-prosemirror/history");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("@atlaskit/editor-common/utils");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _filterSteps = _interopRequireDefault(require("./pm-plugins/filter-steps"));
@@ -97,7 +98,7 @@ var basePlugin = function basePlugin(options, api) {
           }
         });
       }
-      if (isChromeWithSelectionBug) {
+      if (isChromeWithSelectionBug && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.disable-chrome-88-selection-fix_uk53m')) {
         plugins.push({
           name: 'fixChrome88SelectionPlugin',
           plugin: function plugin() {

package/dist/cjs/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizerNextTestId = exports.default = void 0;
+exports.resizerNextTestId = exports.default = exports.ResizableMediaSingleNext = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -43,22 +43,27 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     var _this;
     (0, _classCallCheck2.default)(this, ResizableMediaSingleNext);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "guidelines", []);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lastSnappedGuidelineKeys", []);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getAllGuidelines", function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateGuidelines", function () {
       var _this$props = _this.props,
         view = _this$props.view,
         lineLength = _this$props.lineLength;
       var defaultGuidelines = _this.getDefaultGuidelines();
+      var _generateDynamicGuide = (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
+          styles: {
+            lineStyle: 'dashed'
+          },
+          show: false
+        }),
+        relativeGuides = _generateDynamicGuide.relativeGuides,
+        dynamicGuides = _generateDynamicGuide.dynamicGuides;
+
       // disable guidelines for nested media single node
-      var dynamicGuidelines = _this.isNestedNode() ? [] : (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
-        styles: {
-          lineStyle: 'dashed'
-        },
-        show: false
+      var dynamicGuidelines = _this.isNestedNode() ? [] : dynamicGuides;
+      _this.setState({
+        relativeGuides: relativeGuides,
+        guidelines: [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines))
       });
-      var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
-      return guidelines;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
       var _this$props2 = _this.props,
@@ -67,7 +72,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
-      var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
+      var newPct = (0, _ui.calcPctFromPx)(newWidth, lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
       });
@@ -149,6 +154,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
     }));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
+      var relativeGuides = _this.$pos && _this.$pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
+        node: _this.$pos.nodeAfter,
+        pos: _this.$pos.pos
+      }, _this.props.view, _this.props.lineLength, _this.state.size) : [];
+      return relativeGuides;
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateActiveGuidelines", function () {
       var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var guidelines = arguments.length > 1 ? arguments[1] : undefined;
@@ -158,7 +170,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           gap = _findClosestSnap.gap,
           activeGuidelineKeys = _findClosestSnap.keys;
         _this.lastSnappedGuidelineKeys = activeGuidelineKeys;
-        _this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+        var relativeGuidelines = activeGuidelineKeys.length ? [] : _this.getRelativeGuides();
+        _this.displayGuideline([].concat((0, _toConsumableArray2.default)((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), (0, _toConsumableArray2.default)(relativeGuidelines)));
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "roundPixelValue", function (value) {
@@ -221,7 +234,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setIsResizing(true);
       _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
-      _this.guidelines = _this.getAllGuidelines();
+      _this.updateGuidelines();
       return 0;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", (0, _throttle.default)(function (size, delta) {
@@ -235,14 +248,17 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         width = _this$calculateSizeSt.width,
         height = _this$calculateSizeSt.height,
         calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
-      var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.guidelines, lineLength, layout);
-      _this.updateActiveGuidelines(width, _this.guidelines, guidelineSnaps);
+      var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.state.guidelines, lineLength, layout);
+      _this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
+      var relativeSnaps = (0, _guideline.getRelativeGuideSnaps)(_this.state.relativeGuides, _this.aspectRatio);
       _this.setState({
         size: {
           width: width,
           height: height
         },
-        snaps: guidelineSnaps.snaps
+        snaps: {
+          x: [].concat((0, _toConsumableArray2.default)(guidelineSnaps.snaps.x || []), (0, _toConsumableArray2.default)(relativeSnaps))
+        }
       });
       _this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
@@ -265,7 +281,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           width: width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
-          snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.guidelines),
+          snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
           parentNode: _this.getParentNodeTypeNameFromCurrentPositionNode()
         });
         if (event) {
@@ -294,7 +310,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         width: initialWidth,
         height: _this.calcPxHeight(initialWidth)
       },
-      snaps: {}
+      snaps: {},
+      relativeGuides: {},
+      guidelines: []
     };
     return _this;
   }
@@ -413,6 +431,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         this.checkVideoFile(nextProps.viewMediaClientConfig);
       }
     }
+  }, {
+    key: "aspectRatio",
+    get: function get() {
+      var _this$props8 = this.props,
+        width = _this$props8.width,
+        height = _this$props8.height;
+      if (width) {
+        return width / height;
+      }
+      // TODO handle this case
+      return 1;
+    }
   }, {
     key: "checkVideoFile",
     value: function () {
@@ -515,15 +545,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var _this$props8 = this.props,
-        origWidth = _this$props8.width,
-        layout = _this$props8.layout,
-        pctWidth = _this$props8.pctWidth,
-        containerWidth = _this$props8.containerWidth,
-        fullWidthMode = _this$props8.fullWidthMode,
-        selected = _this$props8.selected,
-        children = _this$props8.children,
-        lineLength = _this$props8.lineLength;
+      var _this$props9 = this.props,
+        origWidth = _this$props9.width,
+        layout = _this$props9.layout,
+        pctWidth = _this$props9.pctWidth,
+        containerWidth = _this$props9.containerWidth,
+        fullWidthMode = _this$props9.fullWidthMode,
+        selected = _this$props9.selected,
+        children = _this$props9.children,
+        lineLength = _this$props9.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;
@@ -573,5 +603,6 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   }]);
   return ResizableMediaSingleNext;
 }(_react.default.Component);
+exports.ResizableMediaSingleNext = ResizableMediaSingleNext;
 var _default = ResizableMediaSingleNext;
 exports.default = _default;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.24.0";
+var version = "187.24.2";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/plugins/base/index.js

@@ -1,5 +1,6 @@
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { browser } from '@atlaskit/editor-common/utils';
 import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import filterStepsPlugin from './pm-plugins/filter-steps';
@@ -74,7 +75,7 @@ const basePlugin = (options, api) => {
           plugin: () => scrollGutter(options.allowScrollGutter)
         });
       }
-      if (isChromeWithSelectionBug) {
+      if (isChromeWithSelectionBug && !getBooleanFF('platform.editor.disable-chrome-88-selection-fix_uk53m')) {
         plugins.push({
           name: 'fixChrome88SelectionPlugin',
           plugin: () => fixChrome88SelectionPlugin()

package/dist/es2019/plugins/list/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { orderedList, orderedListWithOrder, bulletList, listItem } from '@atlaskit/adf-schema';
+import { bulletList, listItem, orderedList, orderedListWithOrder } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymapPlugin from './pm-plugins/keymap';
 import { listMessages as messages } from '@atlaskit/editor-common/messages';
-import { ACTION, EVENT_TYPE, INPUT_METHOD, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
-import { tooltip, toggleBulletList, toggleOrderedList } from '../../keymaps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../analytics';
+import { toggleBulletList, toggleOrderedList, tooltip } from '../../keymaps';
 import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
 /*
   Toolbar buttons to bullet and ordered list can be found in

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -12,32 +12,38 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
 import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey } from '@atlaskit/editor-common/guideline';
+import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
-class ResizableMediaSingleNext extends React.Component {
+export class ResizableMediaSingleNext extends React.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "guidelines", []);
     _defineProperty(this, "lastSnappedGuidelineKeys", []);
-    _defineProperty(this, "getAllGuidelines", () => {
+    _defineProperty(this, "updateGuidelines", () => {
       const {
         view,
         lineLength
       } = this.props;
       const defaultGuidelines = this.getDefaultGuidelines();
-      // disable guidelines for nested media single node
-      const dynamicGuidelines = this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
+      const {
+        relativeGuides,
+        dynamicGuides
+      } = generateDynamicGuidelines(view.state, lineLength, {
         styles: {
           lineStyle: 'dashed'
         },
         show: false
       });
-      const guidelines = [...defaultGuidelines, ...dynamicGuidelines];
-      return guidelines;
+
+      // disable guidelines for nested media single node
+      const dynamicGuidelines = this.isNestedNode() ? [] : dynamicGuides;
+      this.setState({
+        relativeGuides,
+        guidelines: [...defaultGuidelines, ...dynamicGuidelines]
+      });
     });
     _defineProperty(this, "calcNewSize", (newWidth, stop) => {
       const {
@@ -49,7 +55,7 @@ class ResizableMediaSingleNext extends React.Component {
         lineLength,
         fullWidthMode
       } = this.props;
-      const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
+      const newPct = calcPctFromPx(newWidth, lineLength) * 100;
       this.setState({
         resizedPctWidth: newPct
       });
@@ -135,6 +141,13 @@ class ResizableMediaSingleNext extends React.Component {
       }
       return calcMediaSingleMaxWidth(containerWidth);
     }));
+    _defineProperty(this, "getRelativeGuides", () => {
+      const relativeGuides = this.$pos && this.$pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
+        node: this.$pos.nodeAfter,
+        pos: this.$pos.pos
+      }, this.props.view, this.props.lineLength, this.state.size) : [];
+      return relativeGuides;
+    });
     _defineProperty(this, "updateActiveGuidelines", (width = 0, guidelines, guidelineSnapsReference) => {
       if (guidelineSnapsReference.snaps.x) {
         const {
@@ -142,7 +155,8 @@ class ResizableMediaSingleNext extends React.Component {
           keys: activeGuidelineKeys
         } = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
         this.lastSnappedGuidelineKeys = activeGuidelineKeys;
-        this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+        const relativeGuidelines = activeGuidelineKeys.length ? [] : this.getRelativeGuides();
+        this.displayGuideline([...getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines), ...relativeGuidelines]);
       }
     });
     _defineProperty(this, "roundPixelValue", value => Math.round(value));
@@ -199,7 +213,7 @@ class ResizableMediaSingleNext extends React.Component {
       this.setIsResizing(true);
       this.updateSizeInPluginState(this.state.size.width);
       // re-calucate guidelines
-      this.guidelines = this.getAllGuidelines();
+      this.updateGuidelines();
       return 0;
     });
     _defineProperty(this, "handleResize", throttle((size, delta) => {
@@ -215,14 +229,17 @@ class ResizableMediaSingleNext extends React.Component {
         height,
         calculatedWidthWithLayout
       } = this.calculateSizeState(size, delta, originalWidth, originalHeight);
-      const guidelineSnaps = getGuidelineSnaps(this.guidelines, lineLength, layout);
-      this.updateActiveGuidelines(width, this.guidelines, guidelineSnaps);
+      const guidelineSnaps = getGuidelineSnaps(this.state.guidelines, lineLength, layout);
+      this.updateActiveGuidelines(width, this.state.guidelines, guidelineSnaps);
+      const relativeSnaps = getRelativeGuideSnaps(this.state.relativeGuides, this.aspectRatio);
       this.setState({
         size: {
           width,
           height
         },
-        snaps: guidelineSnaps.snaps
+        snaps: {
+          x: [...(guidelineSnaps.snaps.x || []), ...relativeSnaps]
+        }
       });
       this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
@@ -247,7 +264,7 @@ class ResizableMediaSingleNext extends React.Component {
           width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
-          snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.guidelines),
+          snapType: getGuidelineTypeFromKey(this.lastSnappedGuidelineKeys, this.state.guidelines),
           parentNode: this.getParentNodeTypeNameFromCurrentPositionNode()
         });
         if (event) {
@@ -276,7 +293,9 @@ class ResizableMediaSingleNext extends React.Component {
         width: initialWidth,
         height: this.calcPxHeight(initialWidth)
       },
-      snaps: {}
+      snaps: {},
+      relativeGuides: {},
+      guidelines: []
     };
   }
 
@@ -365,6 +384,17 @@ class ResizableMediaSingleNext extends React.Component {
       this.checkVideoFile(nextProps.viewMediaClientConfig);
     }
   }
+  get aspectRatio() {
+    const {
+      width,
+      height
+    } = this.props;
+    if (width) {
+      return width / height;
+    }
+    // TODO handle this case
+    return 1;
+  }
   async checkVideoFile(viewMediaClientConfig) {
     const $pos = this.$pos;
     if (!$pos || !viewMediaClientConfig) {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.24.0";
+export const version = "187.24.2";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/plugins/base/index.js

@@ -3,6 +3,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; }
 import { baseKeymap } from '@atlaskit/editor-prosemirror/commands';
 import { history } from '@atlaskit/editor-prosemirror/history';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { browser } from '@atlaskit/editor-common/utils';
 import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import filterStepsPlugin from './pm-plugins/filter-steps';
@@ -89,7 +90,7 @@ var basePlugin = function basePlugin(options, api) {
           }
         });
       }
-      if (isChromeWithSelectionBug) {
+      if (isChromeWithSelectionBug && !getBooleanFF('platform.editor.disable-chrome-88-selection-fix_uk53m')) {
         plugins.push({
           name: 'fixChrome88SelectionPlugin',
           plugin: function plugin() {

package/dist/esm/plugins/list/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { orderedList, orderedListWithOrder, bulletList, listItem } from '@atlaskit/adf-schema';
+import { bulletList, listItem, orderedList, orderedListWithOrder } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymapPlugin from './pm-plugins/keymap';
 import { listMessages as messages } from '@atlaskit/editor-common/messages';
-import { ACTION, EVENT_TYPE, INPUT_METHOD, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
-import { tooltip, toggleBulletList, toggleOrderedList } from '../../keymaps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../analytics';
+import { toggleBulletList, toggleOrderedList, tooltip } from '../../keymaps';
 import { IconList, IconListNumber } from '@atlaskit/editor-common/quick-insert';
 /*
   Toolbar buttons to bullet and ordered list can be found in

package/dist/esm/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -23,35 +23,40 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
 import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
-import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey } from '@atlaskit/editor-common/guideline';
+import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps, getGuidelineTypeFromKey, getRelativeGuideSnaps, getRelativeGuidelines } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import throttle from 'lodash/throttle';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export var resizerNextTestId = 'mediaSingle.resizerNext.testid';
-var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
+export var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   _inherits(ResizableMediaSingleNext, _React$Component);
   var _super = _createSuper(ResizableMediaSingleNext);
   function ResizableMediaSingleNext(props) {
     var _this;
     _classCallCheck(this, ResizableMediaSingleNext);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "guidelines", []);
     _defineProperty(_assertThisInitialized(_this), "lastSnappedGuidelineKeys", []);
-    _defineProperty(_assertThisInitialized(_this), "getAllGuidelines", function () {
+    _defineProperty(_assertThisInitialized(_this), "updateGuidelines", function () {
       var _this$props = _this.props,
         view = _this$props.view,
         lineLength = _this$props.lineLength;
       var defaultGuidelines = _this.getDefaultGuidelines();
+      var _generateDynamicGuide = generateDynamicGuidelines(view.state, lineLength, {
+          styles: {
+            lineStyle: 'dashed'
+          },
+          show: false
+        }),
+        relativeGuides = _generateDynamicGuide.relativeGuides,
+        dynamicGuides = _generateDynamicGuide.dynamicGuides;
+
       // disable guidelines for nested media single node
-      var dynamicGuidelines = _this.isNestedNode() ? [] : generateDynamicGuidelines(view.state, lineLength, {
-        styles: {
-          lineStyle: 'dashed'
-        },
-        show: false
+      var dynamicGuidelines = _this.isNestedNode() ? [] : dynamicGuides;
+      _this.setState({
+        relativeGuides: relativeGuides,
+        guidelines: [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines))
       });
-      var guidelines = [].concat(_toConsumableArray(defaultGuidelines), _toConsumableArray(dynamicGuidelines));
-      return guidelines;
     });
     _defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
       var _this$props2 = _this.props,
@@ -60,7 +65,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props2.containerWidth,
         lineLength = _this$props2.lineLength,
         fullWidthMode = _this$props2.fullWidthMode;
-      var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
+      var newPct = calcPctFromPx(newWidth, lineLength) * 100;
       _this.setState({
         resizedPctWidth: newPct
       });
@@ -142,6 +147,13 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       }
       return calcMediaSingleMaxWidth(containerWidth);
     }));
+    _defineProperty(_assertThisInitialized(_this), "getRelativeGuides", function () {
+      var relativeGuides = _this.$pos && _this.$pos.nodeAfter && _this.state.size.width ? getRelativeGuidelines(_this.state.relativeGuides, {
+        node: _this.$pos.nodeAfter,
+        pos: _this.$pos.pos
+      }, _this.props.view, _this.props.lineLength, _this.state.size) : [];
+      return relativeGuides;
+    });
     _defineProperty(_assertThisInitialized(_this), "updateActiveGuidelines", function () {
       var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var guidelines = arguments.length > 1 ? arguments[1] : undefined;
@@ -151,7 +163,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           gap = _findClosestSnap.gap,
           activeGuidelineKeys = _findClosestSnap.keys;
         _this.lastSnappedGuidelineKeys = activeGuidelineKeys;
-        _this.displayGuideline(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines));
+        var relativeGuidelines = activeGuidelineKeys.length ? [] : _this.getRelativeGuides();
+        _this.displayGuideline([].concat(_toConsumableArray(getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), _toConsumableArray(relativeGuidelines)));
       }
     });
     _defineProperty(_assertThisInitialized(_this), "roundPixelValue", function (value) {
@@ -214,7 +227,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       _this.setIsResizing(true);
       _this.updateSizeInPluginState(_this.state.size.width);
       // re-calucate guidelines
-      _this.guidelines = _this.getAllGuidelines();
+      _this.updateGuidelines();
       return 0;
     });
     _defineProperty(_assertThisInitialized(_this), "handleResize", throttle(function (size, delta) {
@@ -228,14 +241,17 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         width = _this$calculateSizeSt.width,
         height = _this$calculateSizeSt.height,
         calculatedWidthWithLayout = _this$calculateSizeSt.calculatedWidthWithLayout;
-      var guidelineSnaps = getGuidelineSnaps(_this.guidelines, lineLength, layout);
-      _this.updateActiveGuidelines(width, _this.guidelines, guidelineSnaps);
+      var guidelineSnaps = getGuidelineSnaps(_this.state.guidelines, lineLength, layout);
+      _this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
+      var relativeSnaps = getRelativeGuideSnaps(_this.state.relativeGuides, _this.aspectRatio);
       _this.setState({
         size: {
           width: width,
           height: height
         },
-        snaps: guidelineSnaps.snaps
+        snaps: {
+          x: [].concat(_toConsumableArray(guidelineSnaps.snaps.x || []), _toConsumableArray(relativeSnaps))
+        }
       });
       _this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
@@ -258,7 +274,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
           width: width,
           layout: calculatedWidthWithLayout.layout,
           widthType: 'pixel',
-          snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.guidelines),
+          snapType: getGuidelineTypeFromKey(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
           parentNode: _this.getParentNodeTypeNameFromCurrentPositionNode()
         });
         if (event) {
@@ -287,7 +303,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         width: initialWidth,
         height: _this.calcPxHeight(initialWidth)
       },
-      snaps: {}
+      snaps: {},
+      relativeGuides: {},
+      guidelines: []
     };
     return _this;
   }
@@ -406,6 +424,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         this.checkVideoFile(nextProps.viewMediaClientConfig);
       }
     }
+  }, {
+    key: "aspectRatio",
+    get: function get() {
+      var _this$props8 = this.props,
+        width = _this$props8.width,
+        height = _this$props8.height;
+      if (width) {
+        return width / height;
+      }
+      // TODO handle this case
+      return 1;
+    }
   }, {
     key: "checkVideoFile",
     value: function () {
@@ -508,15 +538,15 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this3 = this;
-      var _this$props8 = this.props,
-        origWidth = _this$props8.width,
-        layout = _this$props8.layout,
-        pctWidth = _this$props8.pctWidth,
-        containerWidth = _this$props8.containerWidth,
-        fullWidthMode = _this$props8.fullWidthMode,
-        selected = _this$props8.selected,
-        children = _this$props8.children,
-        lineLength = _this$props8.lineLength;
+      var _this$props9 = this.props,
+        origWidth = _this$props9.width,
+        layout = _this$props9.layout,
+        pctWidth = _this$props9.pctWidth,
+        containerWidth = _this$props9.containerWidth,
+        fullWidthMode = _this$props9.fullWidthMode,
+        selected = _this$props9.selected,
+        children = _this$props9.children,
+        lineLength = _this$props9.lineLength;
       var _this$state = this.state,
         isResizing = _this$state.isResizing,
         size = _this$state.size;

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.24.0";
+export var version = "187.24.2";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/types/plugins/list/index.d.ts

@@ -1,13 +1,3 @@
-import type { NextEditorPlugin } from '../../types';
-import type { ListPluginOptions } from './types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
-import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { OptionalPlugin } from '@atlaskit/editor-common/types';
-declare const listPlugin: NextEditorPlugin<'list', {
-    pluginConfiguration: ListPluginOptions | undefined;
-    dependencies: [
-        typeof featureFlagsPlugin,
-        OptionalPlugin<typeof analyticsPlugin>
-    ];
-}>;
+import type { ListPlugin } from '@atlaskit/editor-plugin-list';
+declare const listPlugin: ListPlugin;
 export default listPlugin;

package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -5,7 +5,7 @@ import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema'
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { Props } from './types';
 import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
-import type { GuidelineConfig, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
+import type { GuidelineConfig, RelativeGuides, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
     offsetLeft: number;
     isVideoFile: boolean;
@@ -13,11 +13,12 @@ type State = {
     isResizing: boolean;
     size: Dimensions;
     snaps: Snap;
+    relativeGuides: RelativeGuides;
+    guidelines: GuidelineConfig[];
 };
 export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
-declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
-    private guidelines;
+export declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
     constructor(props: ResizableMediaSingleNextProps);
     /**
@@ -30,10 +31,11 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     componentDidUpdate(prevProps: Props): boolean;
     isNestedNode(): boolean;
     private getDefaultGuidelines;
-    private getAllGuidelines;
+    private updateGuidelines;
     get wrappedLayout(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    get aspectRatio(): number;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
     calcNewSize: (newWidth: number, stop: boolean) => {
         width: number | null;
@@ -55,6 +57,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private setIsResizing;
     private updateSizeInPluginState;
     private calcMaxWidth;
+    private getRelativeGuides;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
     roundPixelValue: (value: number) => number;
     getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;

package/dist/types-ts4.5/plugins/list/index.d.ts

@@ -1,13 +1,3 @@
-import type { NextEditorPlugin } from '../../types';
-import type { ListPluginOptions } from './types';
-import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
-import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
-import type { OptionalPlugin } from '@atlaskit/editor-common/types';
-declare const listPlugin: NextEditorPlugin<'list', {
-    pluginConfiguration: ListPluginOptions | undefined;
-    dependencies: [
-        typeof featureFlagsPlugin,
-        OptionalPlugin<typeof analyticsPlugin>
-    ];
-}>;
+import type { ListPlugin } from '@atlaskit/editor-plugin-list';
+declare const listPlugin: ListPlugin;
 export default listPlugin;

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -5,7 +5,7 @@ import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema'
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { Props } from './types';
 import type { Dimensions, HandleResize, HandleResizeStart, Position, Snap } from '@atlaskit/editor-common/resizer';
-import type { GuidelineConfig, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
+import type { GuidelineConfig, RelativeGuides, GuidelineSnapsReference } from '@atlaskit/editor-common/guideline';
 type State = {
     offsetLeft: number;
     isVideoFile: boolean;
@@ -13,11 +13,12 @@ type State = {
     isResizing: boolean;
     size: Dimensions;
     snaps: Snap;
+    relativeGuides: RelativeGuides;
+    guidelines: GuidelineConfig[];
 };
 export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
 type ResizableMediaSingleNextProps = Props;
-declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
-    private guidelines;
+export declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
     private lastSnappedGuidelineKeys;
     constructor(props: ResizableMediaSingleNextProps);
     /**
@@ -30,10 +31,11 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     componentDidUpdate(prevProps: Props): boolean;
     isNestedNode(): boolean;
     private getDefaultGuidelines;
-    private getAllGuidelines;
+    private updateGuidelines;
     get wrappedLayout(): boolean;
     componentDidMount(): Promise<void>;
     UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    get aspectRatio(): number;
     checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
     calcNewSize: (newWidth: number, stop: boolean) => {
         width: number | null;
@@ -55,6 +57,7 @@ declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSin
     private setIsResizing;
     private updateSizeInPluginState;
     private calcMaxWidth;
+    private getRelativeGuides;
     updateActiveGuidelines: (width: number | undefined, guidelines: GuidelineConfig[], guidelineSnapsReference: GuidelineSnapsReference) => void;
     roundPixelValue: (value: number) => number;
     getHeightFromNewWidth: (originalWidth: number, originalHeight: number, newWidth: number) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.24.0",
+  "version": "187.24.2",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/analytics-next-stable-react-context": "1.0.1",
     "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/avatar-group": "^9.3.0",
+    "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/button": "^16.9.0",
     "@atlaskit/calendar": "^13.2.0",
     "@atlaskit/checkbox": "^12.6.0",
@@ -72,6 +72,7 @@
     "@atlaskit/editor-plugin-guideline": "^0.3.4",
     "@atlaskit/editor-plugin-hyperlink": "^0.3.0",
     "@atlaskit/editor-plugin-image-upload": "^0.1.0",
+    "@atlaskit/editor-plugin-list": "^0.1.0",
     "@atlaskit/editor-plugin-table": "^2.9.0",
     "@atlaskit/editor-plugin-text-formatting": "^0.2.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
@@ -143,7 +144,7 @@
     "@af/editor-libra": "*",
     "@af/integration-testing": "*",
     "@atlaskit/code": "^14.6.0",
-    "@atlaskit/collab-provider": "9.10.1",
+    "@atlaskit/collab-provider": "9.11.0",
     "@atlaskit/dropdown-menu": "^11.11.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
     "@atlaskit/editor-plugin-table": "^2.9.0",
@@ -248,6 +249,9 @@
       "type": "boolean",
       "referenceOnly": "true"
     },
+    "platform.editor.disable-chrome-88-selection-fix_uk53m": {
+      "type": "boolean"
+    },
     "platform.linking-platform.datasource-jira_issues": {
       "type": "boolean",
       "referenceOnly": "true"

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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