@atlaskit/editor-core 187.23.2 → 187.24.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-core
 
+## 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
+
+- [`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`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 187.23.2
 
 ### Patch Changes

package/dist/cjs/create-editor/ReactEditorViewInternal.js

@@ -87,7 +87,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ReactEditorView, _React$Component);
   var _super = _createSuper(ReactEditorView);
   function ReactEditorView(props, context) {
-    var _props$editorProps, _props$editorProps$pe, _props$editorProps$pe2;
+    var _props$setEditorApi, _props$editorProps, _props$editorProps$pe, _props$editorProps$pe2;
     var _this;
     (0, _classCallCheck2.default)(this, ReactEditorView);
     _this = _super.call(this, props, context);
@@ -536,6 +536,7 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       getEditorState: _this.getEditorState,
       getEditorView: _this.getEditorView
     });
+    (_props$setEditorApi = props.setEditorApi) === null || _props$setEditorApi === void 0 ? void 0 : _props$setEditorApi.call(props, _this.pluginInjectionAPI.api());
     _this.eventDispatcher = new _eventDispatcher.EventDispatcher();
     _this.dispatch = (0, _eventDispatcher.createDispatch)(_this.eventDispatcher);
     _this.errorReporter = (0, _createEditor.createErrorReporter)(props.editorProps.errorReporterHandler);

package/dist/cjs/editor-next/editor-internal.js

@@ -18,6 +18,7 @@ var _featureFlagsFromProps = require("../create-editor/feature-flags-from-props"
 var _ReactEditorViewNext = _interopRequireDefault(require("../create-editor/ReactEditorViewNext"));
 var _contextAdapter = require("../nodeviews/context-adapter");
 var _EditorContext = _interopRequireDefault(require("../ui/EditorContext"));
+var _context = require("../presets/context");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
 var _useMeasureEditorMountTime = _interopRequireDefault(require("./hooks/useMeasureEditorMountTime"));
 var _useProviderFactory = _interopRequireDefault(require("./hooks/useProviderFactory"));
@@ -57,6 +58,7 @@ function EditorInternalWithoutHooks(_ref) {
     onEditorDestroyed = _ref.onEditorDestroyed,
     preset = _ref.preset;
   var Component = (0, _createEditor.getUiComponent)(props.appearance);
+  var setEditorApi = (0, _context.useSetPresetContext)();
   var overriddenEditorProps = _objectSpread(_objectSpread({}, props), {}, {
     onSave: props.onSave ? handleSave : undefined,
     // noop all analytic events, even if a handler is still passed.
@@ -101,6 +103,7 @@ function EditorInternalWithoutHooks(_ref) {
         onEditorDestroyed: onEditorDestroyed,
         disabled: props.disabled,
         preset: preset,
+        setEditorApi: setEditorApi,
         render: function render(_ref2) {
           var _props$featureFlags, _props$featureFlags2;
           var editor = _ref2.editor,

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/plugins/text-color/commands/toggle-color.js

@@ -27,7 +27,7 @@ var toggleColor = function toggleColor(color) {
         color: color
       });
       state.tr.scrollIntoView();
-      (0, _preset.pluginCommandToPMCommand)((0, _mark.toggleMark)(textColor, {
+      (0, _preset.editorCommandToPMCommand)((0, _mark.toggleMark)(textColor, {
         color: color
       }))(state, dispatch);
     }

package/dist/cjs/presets/context.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSetPresetContext = exports.usePresetContext = exports.PresetContextProvider = exports.EditorAPIContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EditorAPIContext = /*#__PURE__*/_react.default.createContext({});
+exports.EditorAPIContext = EditorAPIContext;
+var PresetContextProvider = function PresetContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    editorApi = _useState2[0],
+    setEditorApi = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(EditorAPIContext.Provider, {
+    value: {
+      editorApi: editorApi,
+      setEditorApi: setEditorApi
+    }
+  }, children);
+};
+exports.PresetContextProvider = PresetContextProvider;
+var usePresetContext = function usePresetContext() {
+  var _useContext = (0, _react.useContext)(EditorAPIContext),
+    editorApi = _useContext.editorApi;
+  return editorApi;
+};
+exports.usePresetContext = usePresetContext;
+var useSetPresetContext = function useSetPresetContext() {
+  var _useContext2 = (0, _react.useContext)(EditorAPIContext),
+    setEditorApi = _useContext2.setEditorApi;
+  return setEditorApi;
+};
+exports.useSetPresetContext = useSetPresetContext;

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

@@ -14,6 +14,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _actions = _interopRequireDefault(require("../../actions"));
+var _context = require("../../presets/context");
 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; } }
 var EditorContext = /*#__PURE__*/_react.default.createContext({});
@@ -43,7 +44,7 @@ var LegacyEditorContext = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return /*#__PURE__*/_react.default.createElement(EditorContext.Provider, {
         value: this.getChildContext()
-      }, this.props.children);
+      }, /*#__PURE__*/_react.default.createElement(_context.PresetContextProvider, null, this.props.children));
     }
   }]);
   return LegacyEditorContext;

package/dist/cjs/use-preset.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePreset = usePreset;
+var _react = require("react");
+var _context = require("./presets/context");
+/**
+ * Creates a preset.
+ *
+ * Takes an input function that returns a preset (and memoizes it) depending
+ * on the dependency array provided.
+ *
+ * Returns a pluginInjectionApi in order to apply actions and subscribe to plugin
+ * changes outside of the editor.
+ *
+ * @param createPreset
+ * @param dependencies
+ * @returns PresetAPI ({ pluginInjectionApi, preset, actionBuilder })
+ *
+ * Example:
+ * ```ts
+ * function ExampleEditor() {
+ *   const { preset, editorApi } = usePreset(() =>
+ *     new EditorPresetBuilder().add(plugin1).add(plugin2)
+ *   , []);
+ *
+ *   // Can execute typesafe commands based on plugin1 or 2
+ *   const runCommand = () => editorApi.executeCommand(
+ *     editorApi.dependencies.plugin1.commands.doSomething()
+ *   )
+ *   return (
+ *     <>
+ *       <Editor preset={preset} />
+ *       <Button onClick={runCommand}>Run command</Button>
+ *     </>
+ *   )
+ * }
+ * ```
+ */
+function usePreset(createPreset, dependencies) {
+  var editorApi = (0, _context.usePresetContext)();
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  var preset = (0, _react.useMemo)(createPreset, dependencies);
+  return {
+    editorApi: editorApi,
+    preset: preset
+  };
+}

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.23.2";
+var version = "187.24.1";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/create-editor/ReactEditorViewInternal.js

@@ -86,7 +86,7 @@ export class ReactEditorView extends React.Component {
     return ((_this$props$editorPro3 = this.props.editorProps) === null || _this$props$editorPro3 === void 0 ? void 0 : (_this$props$editorPro4 = _this$props$editorPro3.performanceTracking) === null || _this$props$editorPro4 === void 0 ? void 0 : (_this$props$editorPro5 = _this$props$editorPro4.transactionTracking) === null || _this$props$editorPro5 === void 0 ? void 0 : _this$props$editorPro5.enabled) === false;
   }
   constructor(props, context) {
-    var _props$editorProps, _props$editorProps$pe, _props$editorProps$pe2;
+    var _props$setEditorApi, _props$editorProps, _props$editorProps$pe, _props$editorProps$pe2;
     super(props, context);
     _defineProperty(this, "editorRef", /*#__PURE__*/React.createRef());
     // ProseMirror is instantiated prior to the initial React render cycle,
@@ -532,6 +532,7 @@ export class ReactEditorView extends React.Component {
       getEditorState: this.getEditorState,
       getEditorView: this.getEditorView
     });
+    (_props$setEditorApi = props.setEditorApi) === null || _props$setEditorApi === void 0 ? void 0 : _props$setEditorApi.call(props, this.pluginInjectionAPI.api());
     this.eventDispatcher = new EventDispatcher();
     this.dispatch = createDispatch(this.eventDispatcher);
     this.errorReporter = createErrorReporter(props.editorProps.errorReporterHandler);

package/dist/es2019/editor-next/editor-internal.js

@@ -10,6 +10,7 @@ import { createFeatureFlagsFromProps } from '../create-editor/feature-flags-from
 import ReactEditorView from '../create-editor/ReactEditorViewNext';
 import { ContextAdapter } from '../nodeviews/context-adapter';
 import EditorContext from '../ui/EditorContext';
+import { useSetPresetContext } from '../presets/context';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import useMeasureEditorMountTime from './hooks/useMeasureEditorMountTime';
 import useProviderFactory from './hooks/useProviderFactory';
@@ -51,6 +52,7 @@ export function EditorInternalWithoutHooks({
 }) {
   var _props$performanceTra, _props$performanceTra2, _props$performanceTra3, _props$performanceTra4;
   const Component = getUiComponent(props.appearance);
+  const setEditorApi = useSetPresetContext();
   const overriddenEditorProps = {
     ...props,
     onSave: props.onSave ? handleSave : undefined,
@@ -95,6 +97,7 @@ export function EditorInternalWithoutHooks({
       onEditorDestroyed: onEditorDestroyed,
       disabled: props.disabled,
       preset: preset,
+      setEditorApi: setEditorApi,
       render: ({
         editor,
         view,

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/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/plugins/text-color/commands/toggle-color.js

@@ -1,7 +1,7 @@
 import { toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { getDisabledState } from '../utils/disabled';
-import { pluginCommandToPMCommand } from '@atlaskit/editor-common/preset';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 export const toggleColor = color => (state, dispatch) => {
   const {
     textColor
@@ -22,7 +22,7 @@ export const toggleColor = color => (state, dispatch) => {
       color
     });
     state.tr.scrollIntoView();
-    pluginCommandToPMCommand(toggleMark(textColor, {
+    editorCommandToPMCommand(toggleMark(textColor, {
       color
     }))(state, dispatch);
   }

package/dist/es2019/presets/context.js

@@ -0,0 +1,25 @@
+import React, { useState, useContext } from 'react';
+export const EditorAPIContext = /*#__PURE__*/React.createContext({});
+export const PresetContextProvider = ({
+  children
+}) => {
+  const [editorApi, setEditorApi] = useState();
+  return /*#__PURE__*/React.createElement(EditorAPIContext.Provider, {
+    value: {
+      editorApi,
+      setEditorApi
+    }
+  }, children);
+};
+export const usePresetContext = () => {
+  const {
+    editorApi
+  } = useContext(EditorAPIContext);
+  return editorApi;
+};
+export const useSetPresetContext = () => {
+  const {
+    setEditorApi
+  } = useContext(EditorAPIContext);
+  return setEditorApi;
+};