@atlaskit/editor-core 187.29.3 → 187.30.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-core
 
+## 187.30.0
+
+### Minor Changes
+
+- [`7f45581d141`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f45581d141) - ED-19630 fixed guideline alignment issue.
+
+### Patch Changes
+
+- [`1e4b853a636`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e4b853a636) - ED-19411 added guideline test, fixed invalid cursor location issue.
+- Updated dependencies
+
+## 187.29.4
+
+### Patch Changes
+
+- [`8595f0ddc4b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8595f0ddc4b) - Always show resizer handles when mediaSingle node is selected
+- [`1af653a9630`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1af653a9630) - ED-19433 Initial scaffold for editor-plugin-type-ahead
+- [`2f7d7be2983`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2f7d7be2983) - [ux] ED-19438 Added dark mode icons for headings 1 to 6
+- [`1b917526a9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1b917526a9f) - [ux] add convert to pixels cta in pixel entry for legacy experience
+- Updated dependencies
+
 ## 187.29.3
 
 ### Patch Changes

package/dist/cjs/plugins/media/nodeviews/mediaSingle.js

@@ -24,7 +24,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodes = require("../../../utils/nodes");
 var _utils2 = require("../../../utils");
-var _mediaSingle = require("../utils/media-single");
 var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
 var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
 var _main = require("../pm-plugins/main");
@@ -40,7 +39,7 @@ var _CaptionPlaceholder = _interopRequireDefault(require("../ui/CaptionPlacehold
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _captions = require("../commands/captions");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _mediaSingle2 = require("@atlaskit/editor-common/media-single");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
@@ -251,42 +250,6 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       }
       (0, _captions.insertAndSelectCaptionFromMediaSinglePos)(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(getPos(), node)(view.state, view.dispatch);
     });
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, includeMoreParentNodeTypes) {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      if ((0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
-        var $pos = view.state.doc.resolve(pos);
-        var domNode = view.nodeDOM($pos.pos);
-        if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
-          return domNode.parentElement.offsetWidth;
-        }
-        if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
-        }
-      }
-      return null;
-    });
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLengthNext", function (view, pos) {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      var $pos = view.state.doc.resolve(pos);
-      if ($pos && $pos.parent.type.name !== 'doc') {
-        return (0, _mediaSingle.getParentWidthForNestedMediaSingleNode)($pos, view);
-      }
-      return null;
-    });
     return _this;
   }
   (0, _createClass2.default)(MediaSingleNode, [{
@@ -376,19 +339,19 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           stateWidth = _this$state.width,
           stateHeight = _this$state.height;
         if (width === null) {
-          width = stateWidth || _mediaSingle2.DEFAULT_IMAGE_WIDTH;
+          width = stateWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
         }
         if (height === null) {
-          height = stateHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
+          height = stateHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT;
         }
       }
       if (!width || !height) {
-        width = _mediaSingle2.DEFAULT_IMAGE_WIDTH;
-        height = _mediaSingle2.DEFAULT_IMAGE_HEIGHT;
+        width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
+        height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
       }
       var isSelected = selected();
-      var contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-      var contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
+      var contentWidthForLegacyExperience = (0, _mediaSingle.getMaxWidthForNestedNode)(view, getPos()) || lineLength;
+      var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, getPos()) || lineLength;
       var mediaSingleProps = {
         layout: layout,
         width: width,
@@ -398,7 +361,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         pctWidth: mediaSingleWidthAttribute,
         fullWidthMode: fullWidthMode,
         hasFallbackContainer: false,
-        mediaSingleWidth: (0, _mediaSingle2.calcMediaSinglePixelWidth)({
+        mediaSingleWidth: (0, _mediaSingle.calcMediaSinglePixelWidth)({
           width: mediaSingleWidthAttribute,
           widthType: widthType,
           origWidth: width,
@@ -407,7 +370,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
           // thus we use the legecy value (exclude table as container node)
           contentWidth: contentWidthForLegacyExperience,
           containerWidth: containerWidth,
-          gutterOffset: _mediaSingle2.MEDIA_SINGLE_GUTTER_SIZE
+          gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
         })
       };
       var resizableMediaSingleProps = _objectSpread({

package/dist/cjs/plugins/media/toolbar/index.js

@@ -288,18 +288,20 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           var _selectedMediaNode$at = selectedMediaNode.attrs,
             mediaWidth = _selectedMediaNode$at.width,
             mediaHeight = _selectedMediaNode$at.height;
+          var isLegacy = widthType !== 'pixel';
           var pixelWidth = (0, _mediaSingle.calcMediaSinglePixelWidth)({
             width: singleMediaWidth,
             widthType: widthType,
             origWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             layout: layout,
-            contentWidth: contentWidth,
+            contentWidth: (0, _mediaSingle.getMaxWidthForNestedNode)(editorView, selectedMediaSingleNode.pos) || contentWidth,
             containerWidth: containerWidth,
             gutterOffset: _mediaSingle.MEDIA_SINGLE_GUTTER_SIZE
           });
           return /*#__PURE__*/_react.default.createElement(_PixelEntry.PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+            showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || _mediaSingle.DEFAULT_IMAGE_HEIGHT,
             validate: function validate(value) {
@@ -314,6 +316,17 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 width: width,
                 widthType: 'pixel'
               }));
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+              dispatch(tr);
+            },
+            onMigrate: function onMigrate() {
+              var tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, _objectSpread(_objectSpread({}, selectedMediaSingleNode.node.attrs), {}, {
+                width: pixelWidth,
+                widthType: 'pixel'
+              }));
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(_state2.NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
               dispatch(tr);
             }
           });

package/dist/cjs/plugins/media/ui/PixelEntry/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = void 0;
+var PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';
+exports.PIXELENTRY_MIGRATION_BUTTON_TESTID = PIXELENTRY_MIGRATION_BUTTON_TESTID;

package/dist/cjs/plugins/media/ui/PixelEntry/index.js

@@ -16,6 +16,7 @@ var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _form = _interopRequireWildcard(require("@atlaskit/form"));
 var _styles = require("./styles");
 var _messages = require("./messages");
+var _constants = require("./constants");
 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; }
 /** @jsx jsx */
@@ -26,7 +27,9 @@ var PixelEntry = function PixelEntry(_ref) {
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
     validate = _ref.validate,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    showMigration = _ref.showMigration,
+    onMigrate = _ref.onMigrate;
   var ratioWidth = (0, _react2.useMemo)(function () {
     return mediaHeight / mediaWidth;
   }, [mediaHeight, mediaWidth]);
@@ -96,6 +99,16 @@ var PixelEntry = function PixelEntry(_ref) {
       }
     };
   }, [ratioHeight, ratioWidth]);
+  if (showMigration) {
+    return (0, _react.jsx)(_tooltip.default, {
+      content: formatMessage(_messages.messages.migrationButtonTooltip)
+    }, (0, _react.jsx)(_button.default, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: _constants.PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(_messages.messages.migrationButtonText)));
+  }
   return (0, _react.jsx)("div", {
     css: _styles.pixelEntryForm
   }, (0, _react.jsx)(_form.default, {

package/dist/cjs/plugins/media/ui/PixelEntry/messages.js

@@ -35,6 +35,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.media.pixelEntry.submitButtonText',
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
+  },
+  migrationButtonText: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
+    defaultMessage: 'Convert to pixels',
+    description: 'The text give to the button used to covert to pixels for legacy experience'
+  },
+  migrationButtonTooltip: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
+    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
+    description: 'The tooltip displayed on the migration button'
   }
 });
 exports.messages = messages;

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

@@ -36,6 +36,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 resizerNextTestId = 'mediaSingle.resizerNext.testid';
 exports.resizerNextTestId = resizerNextTestId;
+var handleComponent = {
+  left: (0, _react2.jsx)("div", {
+    "data-testid": "richMedia-resize-handle-left-elem",
+    contentEditable: false
+  }),
+  right: (0, _react2.jsx)("div", {
+    "data-testid": "richMedia-resize-handle-right-elem",
+    contentEditable: false
+  })
+};
 var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResizableMediaSingleNext, _React$Component);
   var _super = _createSuper(ResizableMediaSingleNext);
@@ -153,11 +163,18 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
       return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
     }));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
+      var _this$props$pluginInj5, _this$props$pluginInj6, _this$props$pluginInj7, _this$props$pluginInj8;
+      var guidelinePluginState = (_this$props$pluginInj5 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.dependencies) === null || _this$props$pluginInj6 === void 0 ? void 0 : (_this$props$pluginInj7 = _this$props$pluginInj6.guideline) === null || _this$props$pluginInj7 === void 0 ? void 0 : (_this$props$pluginInj8 = _this$props$pluginInj7.sharedState) === null || _this$props$pluginInj8 === void 0 ? void 0 : _this$props$pluginInj8.currentState();
+      var _ref = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
+          top: 0,
+          left: 0
+        },
+        topOffset = _ref.top;
       var $pos = _this.$pos;
       var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
         node: $pos.nodeAfter,
         pos: $pos.pos
-      }, _this.props.view, _this.props.lineLength, _this.state.size) : [];
+      }, _this.props.view, _this.props.lineLength, topOffset, _this.state.size) : [];
       return relativeGuides;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateActiveGuidelines", function () {
@@ -185,8 +202,10 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectCurrentMediaNode", function () {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      var pos = _this.pos;
-      pos && (0, _utils2.setNodeSelection)(_this.props.view, pos);
+      if (_this.pos === null) {
+        return;
+      }
+      (0, _utils2.setNodeSelection)(_this.props.view, _this.pos);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function () {
       _this.setState({
@@ -413,7 +432,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "isNestedNode",
     value: function isNestedNode() {
       var $pos = this.$pos;
-      return !!($pos && $pos.parent.type !== $pos.parent.type.schema.nodes.doc);
+      return !!($pos && $pos.depth !== 0);
     }
   }, {
     key: "getDefaultGuidelines",
@@ -537,7 +556,9 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
-        "data-testid": resizerNextTestId
+        handleComponent: handleComponent,
+        "data-testid": resizerNextTestId,
+        isHandleVisible: selected
       }, children));
     }
   }]);

package/dist/cjs/plugins/type-ahead/index.js

@@ -118,6 +118,7 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
     cancel: cancel
   });
 });
+
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

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

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -5,10 +5,9 @@ import { jsx } from '@emotion/react';
 import React, { Component } from 'react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
-import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
-import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
@@ -24,7 +23,7 @@ import CaptionPlaceholder from '../ui/CaptionPlaceholder';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
@@ -177,42 +176,6 @@ export default class MediaSingleNode extends Component {
       }
       insertAndSelectCaptionFromMediaSinglePos(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.analytics) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions)(getPos(), node)(view.state, view.dispatch);
     });
-    /**
-     * Get parent width for a nested media single node
-     * @param view Editor view
-     * @param pos node position
-     */
-    _defineProperty(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      if (isRichMediaInsideOfBlockNode(view, pos)) {
-        const $pos = view.state.doc.resolve(pos);
-        const domNode = view.nodeDOM($pos.pos);
-        if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
-          return domNode.parentElement.offsetWidth;
-        }
-        if (domNode instanceof HTMLElement) {
-          return domNode.offsetWidth;
-        }
-      }
-      return null;
-    });
-    /**
-     * Get parent width for a nested media single node for new experience
-     * @param view Editor view
-     * @param pos node position
-     */
-    _defineProperty(this, "getLineLengthNext", (view, pos) => {
-      if (typeof pos !== 'number') {
-        return null;
-      }
-      const $pos = view.state.doc.resolve(pos);
-      if ($pos && $pos.parent.type.name !== 'doc') {
-        return getParentWidthForNestedMediaSingleNode($pos, view);
-      }
-      return null;
-    });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.mediaProvider !== this.props.mediaProvider) {
@@ -294,8 +257,8 @@ export default class MediaSingleNode extends Component {
       height = DEFAULT_IMAGE_HEIGHT;
     }
     const isSelected = selected();
-    const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-    const contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
+    const contentWidthForLegacyExperience = getMaxWidthForNestedNode(view, getPos()) || lineLength;
+    const contentWidth = getMaxWidthForNestedNodeNext(view, getPos()) || lineLength;
     const mediaSingleProps = {
       layout,
       width,

package/dist/es2019/plugins/media/toolbar/index.js

@@ -25,7 +25,7 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth, getMaxWidthForNestedNode } from '@atlaskit/editor-common/media-single';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
@@ -293,18 +293,20 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             width: mediaWidth,
             height: mediaHeight
           } = selectedMediaNode.attrs;
+          const isLegacy = widthType !== 'pixel';
           const pixelWidth = calcMediaSinglePixelWidth({
             width: singleMediaWidth,
             widthType,
             origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             layout,
-            contentWidth,
+            contentWidth: getMaxWidthForNestedNode(editorView, selectedMediaSingleNode.pos) || contentWidth,
             containerWidth,
             gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
           });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
             width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
+            showMigration: !pluginState.isResizing && isLegacy,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: value => {
@@ -321,6 +323,18 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 width,
                 widthType: 'pixel'
               });
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
+              dispatch(tr);
+            },
+            onMigrate: () => {
+              const tr = state.tr.setNodeMarkup(selectedMediaSingleNode.pos, undefined, {
+                ...selectedMediaSingleNode.node.attrs,
+                width: pixelWidth,
+                widthType: 'pixel'
+              });
+              tr.setMeta('scrollIntoView', false);
+              tr.setSelection(NodeSelection.create(tr.doc, selectedMediaSingleNode.pos));
               dispatch(tr);
             }
           });

package/dist/es2019/plugins/media/ui/PixelEntry/constants.js

@@ -0,0 +1 @@
+export const PIXELENTRY_MIGRATION_BUTTON_TESTID = 'pixel-entry-convert-pixels-btn';

package/dist/es2019/plugins/media/ui/PixelEntry/index.js

@@ -8,6 +8,7 @@ import Button from '@atlaskit/button';
 import Form, { Field } from '@atlaskit/form';
 import { pixelSizingInput, pixelSizingLabel, pixelSizingWidthInput, pixelSizingHeightInput, pixelSizingWrapper, pixelEntryForm, pixelEntryHiddenSubmit } from './styles';
 import { messages } from './messages';
+import { PIXELENTRY_MIGRATION_BUTTON_TESTID } from './constants';
 export const PixelEntry = ({
   width,
   mediaWidth,
@@ -16,7 +17,9 @@ export const PixelEntry = ({
   validate,
   intl: {
     formatMessage
-  }
+  },
+  showMigration,
+  onMigrate
 }) => {
   const ratioWidth = useMemo(() => {
     return mediaHeight / mediaWidth;
@@ -79,6 +82,16 @@ export const PixelEntry = ({
         }
     }
   }, [ratioHeight, ratioWidth]);
+  if (showMigration) {
+    return jsx(Tooltip, {
+      content: formatMessage(messages.migrationButtonTooltip)
+    }, jsx(Button, {
+      appearance: "warning",
+      spacing: "compact",
+      onClick: onMigrate,
+      testId: PIXELENTRY_MIGRATION_BUTTON_TESTID
+    }, formatMessage(messages.migrationButtonText)));
+  }
   return jsx("div", {
     css: pixelEntryForm
   }, jsx(Form, {

package/dist/es2019/plugins/media/ui/PixelEntry/messages.js

@@ -29,5 +29,15 @@ export const messages = defineMessages({
     id: 'fabric.editor.media.pixelEntry.submitButtonText',
     defaultMessage: 'Submit',
     description: 'The text give to the hidden submit button'
+  },
+  migrationButtonText: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonText',
+    defaultMessage: 'Convert to pixels',
+    description: 'The text give to the button used to covert to pixels for legacy experience'
+  },
+  migrationButtonTooltip: {
+    id: 'fabric.editor.media.pixelEntry.migrationButtonTooltip',
+    defaultMessage: 'Migrate from percentage to fixed pixel sizing',
+    description: 'The tooltip displayed on the migration button'
   }
 });

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

@@ -18,6 +18,16 @@ 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';
+const handleComponent = {
+  left: jsx("div", {
+    "data-testid": "richMedia-resize-handle-left-elem",
+    contentEditable: false
+  }),
+  right: jsx("div", {
+    "data-testid": "richMedia-resize-handle-right-elem",
+    contentEditable: false
+  })
+};
 class ResizableMediaSingleNext extends React.Component {
   constructor(props) {
     super(props);
@@ -136,11 +146,19 @@ class ResizableMediaSingleNext extends React.Component {
       return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
     }));
     _defineProperty(this, "getRelativeGuides", () => {
+      var _this$props$pluginInj5, _this$props$pluginInj6, _this$props$pluginInj7, _this$props$pluginInj8;
+      const guidelinePluginState = (_this$props$pluginInj5 = this.props.pluginInjectionApi) === null || _this$props$pluginInj5 === void 0 ? void 0 : (_this$props$pluginInj6 = _this$props$pluginInj5.dependencies) === null || _this$props$pluginInj6 === void 0 ? void 0 : (_this$props$pluginInj7 = _this$props$pluginInj6.guideline) === null || _this$props$pluginInj7 === void 0 ? void 0 : (_this$props$pluginInj8 = _this$props$pluginInj7.sharedState) === null || _this$props$pluginInj8 === void 0 ? void 0 : _this$props$pluginInj8.currentState();
+      const {
+        top: topOffset
+      } = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
+        top: 0,
+        left: 0
+      };
       const $pos = this.$pos;
       const relativeGuides = $pos && $pos.nodeAfter && this.state.size.width ? getRelativeGuidelines(this.state.relativeGuides, {
         node: $pos.nodeAfter,
         pos: $pos.pos
-      }, this.props.view, this.props.lineLength, this.state.size) : [];
+      }, this.props.view, this.props.lineLength, topOffset, this.state.size) : [];
       return relativeGuides;
     });
     _defineProperty(this, "updateActiveGuidelines", (width = 0, guidelines, guidelineSnapsReference) => {
@@ -165,8 +183,10 @@ class ResizableMediaSingleNext extends React.Component {
     });
     _defineProperty(this, "selectCurrentMediaNode", () => {
       // TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
-      const pos = this.pos;
-      pos && setNodeSelection(this.props.view, pos);
+      if (this.pos === null) {
+        return;
+      }
+      setNodeSelection(this.props.view, this.pos);
     });
     _defineProperty(this, "handleResizeStart", () => {
       this.setState({
@@ -364,7 +384,7 @@ class ResizableMediaSingleNext extends React.Component {
   // check if is inside of layout, table, expand, nestedExpand and list item
   isNestedNode() {
     const $pos = this.$pos;
-    return !!($pos && $pos.parent.type !== $pos.parent.type.schema.nodes.doc);
+    return !!($pos && $pos.depth !== 0);
   }
   getDefaultGuidelines() {
     const {
@@ -457,7 +477,9 @@ class ResizableMediaSingleNext extends React.Component {
       handleResizeStop: this.handleResizeStop,
       snap: this.state.snaps,
       resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-      "data-testid": resizerNextTestId
+      handleComponent: handleComponent,
+      "data-testid": resizerNextTestId,
+      isHandleVisible: selected
     }, children));
   }
 }

package/dist/es2019/plugins/type-ahead/index.js

@@ -102,6 +102,7 @@ const TypeAheadMenu = /*#__PURE__*/React.memo(({
     cancel: cancel
   });
 });
+
 /**
  *
  * Revamped typeahead using decorations instead of the `typeAheadQuery` mark

package/dist/es2019/version-wrapper.js

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