@atlaskit/editor-core 187.29.2 → 187.29.4

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-core
 
+## 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
+
+- [`9650cf173e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9650cf173e5) - Fix bug where if mediaSingle node is first item in document it is treated as video
+
 ## 187.29.2
 
 ### 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

@@ -185,8 +185,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({
@@ -372,7 +374,7 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     get: function get() {
       var pos = this.pos;
       // need to pass view because we may not get updated props in time
-      return pos && this.props.view.state.doc.resolve(pos);
+      return pos === null ? pos : this.props.view.state.doc.resolve(pos);
     }
   }, {
     key: "aspectRatio",
@@ -430,50 +432,49 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
     key: "checkVideoFile",
     value: function () {
       var _checkVideoFile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(viewMediaClientConfig) {
-        var $pos, mediaNode, mediaClient, state;
+        var mediaNode, mediaClient, state;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              $pos = this.$pos;
-              if (!(!$pos || !viewMediaClientConfig)) {
-                _context2.next = 3;
+              if (!(this.pos === null || !viewMediaClientConfig)) {
+                _context2.next = 2;
                 break;
               }
               return _context2.abrupt("return");
-            case 3:
-              mediaNode = this.props.view.state.doc.nodeAt($pos.pos + 1);
+            case 2:
+              mediaNode = this.props.view.state.doc.nodeAt(this.pos + 1);
               if (!(!mediaNode || !mediaNode.attrs.id)) {
-                _context2.next = 6;
+                _context2.next = 5;
                 break;
               }
               return _context2.abrupt("return");
-            case 6:
+            case 5:
               mediaClient = (0, _mediaClient.getMediaClient)(viewMediaClientConfig);
-              _context2.prev = 7;
-              _context2.next = 10;
+              _context2.prev = 6;
+              _context2.next = 9;
               return mediaClient.file.getCurrentState(mediaNode.attrs.id, {
                 collectionName: mediaNode.attrs.collection
               });
-            case 10:
+            case 9:
               state = _context2.sent;
               if (state && state.status !== 'error' && state.mediaType === 'image') {
                 this.setState({
                   isVideoFile: false
                 });
               }
-              _context2.next = 17;
+              _context2.next = 16;
               break;
-            case 14:
-              _context2.prev = 14;
-              _context2.t0 = _context2["catch"](7);
+            case 13:
+              _context2.prev = 13;
+              _context2.t0 = _context2["catch"](6);
               this.setState({
                 isVideoFile: false
               });
-            case 17:
+            case 16:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[7, 14]]);
+        }, _callee2, this, [[6, 13]]);
       }));
       function checkVideoFile(_x) {
         return _checkVideoFile.apply(this, arguments);
@@ -538,7 +539,8 @@ var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
         handleResizeStop: this.handleResizeStop,
         snap: this.state.snaps,
         resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
-        "data-testid": resizerNextTestId
+        "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.2";
+var version = "187.29.4";
 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

@@ -165,8 +165,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({
@@ -326,7 +328,7 @@ class ResizableMediaSingleNext extends React.Component {
   get $pos() {
     const pos = this.pos;
     // need to pass view because we may not get updated props in time
-    return pos && this.props.view.state.doc.resolve(pos);
+    return pos === null ? pos : this.props.view.state.doc.resolve(pos);
   }
   get aspectRatio() {
     const {
@@ -377,11 +379,10 @@ class ResizableMediaSingleNext extends React.Component {
     return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
   }
   async checkVideoFile(viewMediaClientConfig) {
-    const $pos = this.$pos;
-    if (!$pos || !viewMediaClientConfig) {
+    if (this.pos === null || !viewMediaClientConfig) {
       return;
     }
-    const mediaNode = this.props.view.state.doc.nodeAt($pos.pos + 1);
+    const mediaNode = this.props.view.state.doc.nodeAt(this.pos + 1);
     if (!mediaNode || !mediaNode.attrs.id) {
       return;
     }
@@ -458,7 +459,8 @@ class ResizableMediaSingleNext extends React.Component {
       handleResizeStop: this.handleResizeStop,
       snap: this.state.snaps,
       resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
-      "data-testid": resizerNextTestId
+      "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.2";
+export const version = "187.29.4";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };