@atlaskit/editor-core 187.8.11 → 187.9.0

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

@@ -0,0 +1,574 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnwrappedResizableMediaSingleNext = void 0;
+exports.calcOffsetLeft = calcOffsetLeft;
+exports.resizerNextTestId = exports.default = 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"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _mediaClient = require("@atlaskit/media-client");
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils2 = require("@atlaskit/editor-common/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _styled = require("./styled");
+var _resizer = require("@atlaskit/editor-common/resizer");
+var _ResizeLabel = _interopRequireDefault(require("../../../../ui/Resizer/ResizeLabel"));
+var _reactIntlNext = require("react-intl-next");
+var _resizableMediaSingleMessages = require("./resizable-media-single-messages");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _mediaSingle = require("@atlaskit/editor-common/media-single");
+var _guideline = require("@atlaskit/editor-common/guideline");
+var _guidelines = require("./guidelines");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var resizerNextTestId = 'mediaSingle.resizerNext.testid';
+exports.resizerNextTestId = resizerNextTestId;
+function calcOffsetLeft(insideInlineLike, insideLayout, pmViewDom, wrapper) {
+  if (wrapper && insideInlineLike && !insideLayout) {
+    var currentNode = wrapper;
+    var boundingRect = currentNode.getBoundingClientRect();
+    return boundingRect.left - pmViewDom.getBoundingClientRect().left;
+  }
+  return 0;
+}
+
+// TODO: Create new fixed image size event
+var getResizeAnalyticsEvent = function getResizeAnalyticsEvent(type, size, layout) {
+  var actionSubject = type === 'embed' ? _analytics.ACTION_SUBJECT.EMBEDS : _analytics.ACTION_SUBJECT.MEDIA_SINGLE;
+  return {
+    action: _analytics.ACTION.EDITED,
+    actionSubject: actionSubject,
+    actionSubjectId: _analytics.ACTION_SUBJECT_ID.RESIZED,
+    attributes: {
+      size: size,
+      layout: layout
+    },
+    eventType: _analytics.EVENT_TYPE.UI
+  };
+};
+var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ResizableMediaSingleNext, _React$Component);
+  var _super = _createSuper(ResizableMediaSingleNext);
+  function ResizableMediaSingleNext(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, ResizableMediaSingleNext);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewSize", function (newWidth, stop) {
+      var _this$props = _this.props,
+        layout = _this$props.layout,
+        state = _this$props.view.state,
+        containerWidth = _this$props.containerWidth,
+        lineLength = _this$props.lineLength;
+      var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
+      _this.setState({
+        resizedPctWidth: newPct
+      });
+      var newLayout = (0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      if (newPct <= 100) {
+        if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
+          newLayout = layout;
+        }
+        return {
+          width: newPct,
+          layout: newLayout
+        };
+      } else {
+        return {
+          width: _this.props.pctWidth || null,
+          layout: newLayout
+        };
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (width, containerWidth, contentWidth) {
+      if (width <= contentWidth) {
+        return 'center';
+      }
+      if (width < Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth)) {
+        return 'wide';
+      }
+
+      // set full width to be containerWidth - akEditorGutterPadding * 2
+      // instead of containerWidth - akEditorBreakoutPadding,
+      // so that we have image aligned with text
+      return 'full-width';
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcColumnLeftOffset", function () {
+      var offsetLeft = _this.state.offsetLeft;
+      return _this.insideInlineLike ? (0, _ui.calcColumnsFromPx)(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxHeight", function (newWidth) {
+      var _this$props2 = _this.props,
+        _this$props2$width = _this$props2.width,
+        width = _this$props2$width === void 0 ? newWidth : _this$props2$width,
+        height = _this$props2.height;
+      return Math.round(height / width * newWidth);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveWrapper", function (wrapper) {
+      return _this.wrapper = wrapper;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGuideline", function (guidelines) {
+      var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3;
+      var pluginInjectionApi = _this.props.pluginInjectionApi;
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.guideline) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : (_pluginInjectionApi$d3 = _pluginInjectionApi$d2.actions) === null || _pluginInjectionApi$d3 === void 0 ? void 0 : _pluginInjectionApi$d3.displayGuideline(_this.props.view)({
+        guidelines: guidelines
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setIsResizing", function (isResizing) {
+      var _this$props$view = _this.props.view,
+        state = _this$props$view.state,
+        dispatch = _this$props$view.dispatch;
+      var tr = state.tr;
+      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      return dispatch(tr);
+    });
+    var initialWidth = props.mediaSingleWidth || _this.calcInitialWidth();
+    _this.state = {
+      offsetLeft: calcOffsetLeft(_this.insideInlineLike, _this.insideLayout, _this.props.view.dom, undefined),
+      // We default to true until we resolve the file type
+      isVideoFile: true,
+      isResizing: false,
+      size: {
+        width: initialWidth,
+        height: _this.calcPxHeight(initialWidth)
+      }
+    };
+    return _this;
+  }
+
+  /**
+   * Calculate media single node initial width if props.mediaSingleWidth is undefined
+   * (Mainly when switching from lagacy experience to new experience).
+   *
+   * @returns initial width in pixel
+   */
+  (0, _createClass2.default)(ResizableMediaSingleNext, [{
+    key: "calcInitialWidth",
+    value: function calcInitialWidth() {
+      var _this$props3 = this.props,
+        origWidth = _this$props3.width,
+        contentWidth = _this$props3.lineLength,
+        containerWidth = _this$props3.containerWidth;
+      return Math.max(Math.min(origWidth || _ui.DEFAULT_IMAGE_WIDTH, contentWidth || containerWidth || _editorSharedStyles.akEditorDefaultLayoutWidth), _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var offsetLeft = calcOffsetLeft(this.insideInlineLike, this.insideLayout, this.props.view.dom, this.wrapper);
+      if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
+        this.setState({
+          offsetLeft: offsetLeft
+        });
+      }
+
+      // Handle undo, when the actual pctWidth changed,
+      // we sync up with the internal state.
+      if (prevProps.pctWidth !== this.props.pctWidth) {
+        this.setState({
+          resizedPctWidth: this.props.pctWidth
+        });
+      }
+      if (prevState.isResizing !== this.state.isResizing && this.state.isResizing) {
+        var guidelines = this.getDefaultGuidelines();
+        this.displayGuideline(guidelines);
+      }
+      if (prevProps.lineLength === undefined && this.props.lineLength !== undefined && this.props.mediaSingleWidth === null) {
+        // re-initalises size when lineLength becomes defined later
+        // ensures extended experience renders legacy image with the same size as the legacy experience
+        var initialWidth = this.calcInitialWidth();
+        this.setState({
+          size: {
+            width: initialWidth,
+            height: this.calcPxHeight(initialWidth)
+          }
+        });
+      }
+      return true;
+    }
+
+    // check if is inside of layout, table, expand, nestedExpand and list item
+  }, {
+    key: "isNestedNode",
+    value: function isNestedNode() {
+      return !!(this.$pos && this.$pos.parent.type.name !== 'doc');
+    }
+  }, {
+    key: "getDefaultGuidelines",
+    value: function getDefaultGuidelines() {
+      var _this$props4 = this.props,
+        lineLength = _this$props4.lineLength,
+        containerWidth = _this$props4.containerWidth,
+        fullWidthMode = _this$props4.fullWidthMode;
+
+      // disable guidelines for nested media single node
+      return this.isNestedNode() ? [] : (0, _guidelines.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
+    }
+
+    // Calculate width of media nodes for snaps based on dynamic guidelines
+    // TODO:  refactor this later, maybe use state to hold snaps array
+  }, {
+    key: "getSnaps",
+    value: function getSnaps() {
+      var view = this.props.view;
+      var dom = view.dom;
+      var defaultGuidelines = this.getDefaultGuidelines();
+      // disable guidelines for nested media single node
+      var dynamicGuidelines = this.isNestedNode() ? [] : (0, _guidelines.generateDynamicGuidelines)(view);
+      var guidelines = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
+      var mediaSingleSelector = 'div.mediaSingleView-content-wrap.ProseMirror-selectednode';
+      var _dom$getBoundingClien = dom.getBoundingClientRect(),
+        width = _dom$getBoundingClien.width;
+      var halfWidth = width / 2;
+      var selectedMedia = dom.querySelector(mediaSingleSelector);
+      if (selectedMedia) {
+        var pixelWidth = parseFloat(selectedMedia.getAttribute('width') || '') || 0;
+        var layout = selectedMedia.getAttribute('layout');
+        var snap = 0;
+        switch (layout) {
+          case 'align-start':
+          case 'wrap-left':
+            snap = pixelWidth - halfWidth;
+            break;
+          case 'align-end':
+          case 'wrap-right':
+            snap = width - pixelWidth - halfWidth;
+            break;
+          case 'center':
+          case 'wide':
+          case 'full-width':
+            snap = -pixelWidth / 2;
+            break;
+          // we ingnore full-width and wide
+          default:
+            snap = 0;
+        }
+        var snapWidths = (0, _guideline.getSnapWidth)(guidelines, pixelWidth, snap, layout);
+        var snapToWidths = snapWidths.map(function (s) {
+          return s && s.width;
+        });
+
+        // update guidelines
+        if (this.state.isResizing) {
+          var _findClosestSnap = (0, _guideline.findClosestSnap)(this.state.size.width, snapToWidths, snapWidths, _mediaSingle.MEDIA_SINGLE_HIGHLIGHT_GAP),
+            gap = _findClosestSnap.gap,
+            activeGuidelineKeys = _findClosestSnap.keys;
+          this.displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_HIGHLIGHT_GAP, activeGuidelineKeys, guidelines));
+        }
+        return snapToWidths.length > 0 ? {
+          x: snapToWidths
+        } : {};
+      }
+      return {};
+    }
+  }, {
+    key: "wrappedLayout",
+    get: function get() {
+      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
+    }
+  }, {
+    key: "componentDidMount",
+    value: function () {
+      var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var viewMediaClientConfig;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              viewMediaClientConfig = this.props.viewMediaClientConfig;
+              if (!viewMediaClientConfig) {
+                _context.next = 4;
+                break;
+              }
+              _context.next = 4;
+              return this.checkVideoFile(viewMediaClientConfig);
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function componentDidMount() {
+        return _componentDidMount.apply(this, arguments);
+      }
+      return componentDidMount;
+    }()
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (this.props.viewMediaClientConfig !== nextProps.viewMediaClientConfig) {
+        this.checkVideoFile(nextProps.viewMediaClientConfig);
+      }
+    }
+  }, {
+    key: "checkVideoFile",
+    value: function () {
+      var _checkVideoFile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(viewMediaClientConfig) {
+        var $pos, 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;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 3:
+              mediaNode = this.props.view.state.doc.nodeAt($pos.pos + 1);
+              if (!(!mediaNode || !mediaNode.attrs.id)) {
+                _context2.next = 6;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 6:
+              mediaClient = (0, _mediaClient.getMediaClient)(viewMediaClientConfig);
+              _context2.prev = 7;
+              _context2.next = 10;
+              return mediaClient.file.getCurrentState(mediaNode.attrs.id, {
+                collectionName: mediaNode.attrs.collection
+              });
+            case 10:
+              state = _context2.sent;
+              if (state && state.status !== 'error' && state.mediaType === 'image') {
+                this.setState({
+                  isVideoFile: false
+                });
+              }
+              _context2.next = 17;
+              break;
+            case 14:
+              _context2.prev = 14;
+              _context2.t0 = _context2["catch"](7);
+              this.setState({
+                isVideoFile: false
+              });
+            case 17:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this, [[7, 14]]);
+      }));
+      function checkVideoFile(_x) {
+        return _checkVideoFile.apply(this, arguments);
+      }
+      return checkVideoFile;
+    }()
+  }, {
+    key: "$pos",
+    get: function get() {
+      if (typeof this.props.getPos !== 'function') {
+        return null;
+      }
+      var pos = this.props.getPos();
+      if (Number.isNaN(pos) || typeof pos !== 'number') {
+        return null;
+      }
+
+      // need to pass view because we may not get updated props in time
+      return this.props.view.state.doc.resolve(pos);
+    }
+
+    /**
+     * The maxmimum number of grid columns this node can resize to.
+     */
+  }, {
+    key: "gridWidth",
+    get: function get() {
+      var gridSize = this.props.gridSize;
+      return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
+    }
+  }, {
+    key: "insideInlineLike",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var listItem = this.props.view.state.schema.nodes.listItem;
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
+    }
+  }, {
+    key: "insideLayout",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
+      return !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [layoutColumn]);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props5 = this.props,
+        origWidth = _this$props5.width,
+        layout = _this$props5.layout,
+        pctWidth = _this$props5.pctWidth,
+        containerWidth = _this$props5.containerWidth,
+        fullWidthMode = _this$props5.fullWidthMode,
+        selected = _this$props5.selected,
+        children = _this$props5.children,
+        intl = _this$props5.intl;
+      var _this$state = this.state,
+        isResizing = _this$state.isResizing,
+        size = _this$state.size;
+      var enable = {};
+      _ui.handleSides.forEach(function (side) {
+        var oppositeSide = side === 'left' ? 'right' : 'left';
+        enable[side] = _utils2.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
+        if (side === 'left' && _this2.insideInlineLike) {
+          enable[side] = false;
+        }
+      });
+
+      /**
+       * NEW REFACTOR
+       */
+      var roundPixelValue = function roundPixelValue(value) {
+        return Math.round(value);
+      };
+      var getHeightFromNewWidth = function getHeightFromNewWidth(originalWidth, originalHeight, newWidth) {
+        return roundPixelValue(originalHeight / originalWidth * newWidth);
+      };
+      var calculateSizeState = function calculateSizeState(size, delta) {
+        var originalWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+        var originalHeight = arguments.length > 3 ? arguments[3] : undefined;
+        var onResizeStop = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+        var calculatedWidth = roundPixelValue(size.width + delta.width);
+        var calculatedWidthWithLayout = _this2.calcNewSize(calculatedWidth, onResizeStop);
+        var calculatedHeightWithLayout = getHeightFromNewWidth(originalWidth, originalHeight, calculatedWidth);
+        return {
+          width: calculatedWidth,
+          height: calculatedHeightWithLayout,
+          calculatedWidthWithLayout: calculatedWidthWithLayout
+        };
+      };
+      var selectCurrentMediaNode = function selectCurrentMediaNode() {
+        if (!_this2.props.selected && typeof _this2.props.getPos === 'function') {
+          var propPos = _this2.props.getPos();
+          if (propPos !== undefined) {
+            (0, _utils2.setNodeSelection)(_this2.props.view, propPos);
+          }
+        }
+      };
+      var handleResizeStart = function handleResizeStart() {
+        _this2.setState({
+          isResizing: true
+        });
+        selectCurrentMediaNode();
+        _this2.setIsResizing(true);
+
+        // TODO: Update once type updated from editor common resizer
+        return 0;
+      };
+      var handleResize = function handleResize(size, delta) {
+        var _this2$props = _this2.props,
+          originalWidth = _this2$props.width,
+          originalHeight = _this2$props.height,
+          layout = _this2$props.layout,
+          updateSize = _this2$props.updateSize;
+        var _calculateSizeState = calculateSizeState(size, delta, originalWidth, originalHeight),
+          width = _calculateSizeState.width,
+          height = _calculateSizeState.height,
+          calculatedWidthWithLayout = _calculateSizeState.calculatedWidthWithLayout;
+        _this2.setState({
+          size: {
+            width: width,
+            height: height
+          }
+        });
+        if (calculatedWidthWithLayout.layout !== layout) {
+          updateSize(width, calculatedWidthWithLayout.layout);
+        }
+
+        // TODO: Update once type updated from editor common resizer
+        return 0;
+      };
+      var handleResizeStop = function handleResizeStop(size, delta) {
+        var _this2$props2 = _this2.props,
+          originalWidth = _this2$props2.width,
+          originalHeight = _this2$props2.height,
+          updateSize = _this2$props2.updateSize,
+          dispatchAnalyticsEvent = _this2$props2.dispatchAnalyticsEvent,
+          nodeType = _this2$props2.nodeType;
+        var _calculateSizeState2 = calculateSizeState(size, delta, originalWidth, originalHeight, true),
+          width = _calculateSizeState2.width,
+          height = _calculateSizeState2.height,
+          calculatedWidthWithLayout = _calculateSizeState2.calculatedWidthWithLayout;
+        _this2.setIsResizing(false);
+        _this2.displayGuideline([]);
+        if (dispatchAnalyticsEvent) {
+          dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, calculatedWidthWithLayout.width, calculatedWidthWithLayout.layout));
+        }
+        _this2.setState({
+          isResizing: false,
+          size: {
+            width: width,
+            height: height
+          }
+        }, function () {
+          updateSize(width, calculatedWidthWithLayout.layout);
+        });
+
+        // TODO: Update once type updated from editor common resizer
+        return 0;
+      };
+
+      // TODO: Clean up where this lives and how it gets generated
+      var className = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
+        'not-resized': !pctWidth,
+        'richMedia-selected': selected,
+        'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+      });
+      var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
+      var showSizeGuide = selected || isResizing;
+      var label = layout === 'full-width' ? intl.formatMessage(_resizableMediaSingleMessages.messages.fullWidthImage) : "".concat(this.state.size.width, " x ").concat(this.state.size.height);
+      return (0, _react2.jsx)("div", {
+        ref: this.saveWrapper,
+        css: (0, _styled.wrapperStyle)({
+          layout: layout,
+          isResized: !!pctWidth,
+          containerWidth: containerWidth || origWidth,
+          fullWidthMode: fullWidthMode,
+          mediaSingleWidth: this.state.size.width,
+          isNestedNode: this.isNestedNode(),
+          isExtendedResizeExperienceOn: true
+        })
+      }, (0, _react2.jsx)(_resizer.ResizerNext, {
+        minWidth: _mediaSingle.MEDIA_SINGLE_MIN_PIXEL_WIDTH,
+        className: resizerNextClassName,
+        snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
+        enable: enable,
+        width: size.width,
+        handleResizeStart: handleResizeStart,
+        handleResize: handleResize,
+        handleResizeStop: handleResizeStop,
+        snap: this.getSnaps(),
+        resizeRatio: _utils2.nonWrappedLayouts.includes(layout) ? 2 : 1,
+        "data-testid": resizerNextTestId
+      }, showSizeGuide && (0, _react2.jsx)(_ResizeLabel.default, {
+        label: label,
+        containerWidth: this.state.size.width
+      }), children));
+    }
+  }]);
+  return ResizableMediaSingleNext;
+}(_react.default.Component); // for testing purpose
+exports.UnwrappedResizableMediaSingleNext = ResizableMediaSingleNext;
+var _default = (0, _reactIntlNext.injectIntl)(ResizableMediaSingleNext);
+exports.default = _default;

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

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDynamicGuidelines = exports.generateDefaultGuidelines = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _guideline = require("@atlaskit/editor-common/guideline");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var mediaSingleSelector = 'div.mediaSingleView-content-wrap:not(.ProseMirror-selectednode)';
+var getDefaultGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
+  return [-6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6].map(function (val, index) {
+    return {
+      key: "grid_".concat(index),
+      position: {
+        x: val / 12 * editorWidth
+      }
+    };
+  });
+});
+var getWideGuidelines = (0, _memoizeOne.default)(function (editorWidth) {
+  var wideSpacing = editorWidth * _editorSharedStyles.breakoutWideScaleRatio / 2;
+  return [{
+    key: "wide_left",
+    position: {
+      x: -wideSpacing
+    }
+  }, {
+    key: "wide_right",
+    position: {
+      x: wideSpacing
+    }
+  }];
+});
+var getFullWidthGuidelines = (0, _memoizeOne.default)(function (containerWidth) {
+  var fullWidth = Math.min(containerWidth - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth) / 2;
+  return [{
+    key: "full_width_left",
+    position: {
+      x: -fullWidth
+    }
+  }, {
+    key: "full_width_right",
+    position: {
+      x: fullWidth
+    }
+  }];
+});
+var generateDefaultGuidelines = function generateDefaultGuidelines(editorWidth, containerWidth) {
+  var isFullWidthMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var innerGrids = getDefaultGuidelines(editorWidth);
+  var wideGuidelines = !isFullWidthMode ? getWideGuidelines(editorWidth) : [];
+  var fullWidthGuidelines = !isFullWidthMode ? getFullWidthGuidelines(containerWidth) : [];
+  return [].concat((0, _toConsumableArray2.default)(innerGrids), (0, _toConsumableArray2.default)(wideGuidelines), (0, _toConsumableArray2.default)(fullWidthGuidelines));
+};
+exports.generateDefaultGuidelines = generateDefaultGuidelines;
+var generateDynamicGuidelines = function generateDynamicGuidelines(view) {
+  var dom = view.dom;
+  var _dom$getBoundingClien = dom.getBoundingClientRect(),
+    width = _dom$getBoundingClien.width;
+  var halfWidth = width / 2;
+  var keyIdx = 0;
+  var dynamicGuidelines = (0, _toConsumableArray2.default)(dom.querySelectorAll(mediaSingleSelector)).map(function (elem, _index) {
+    var pixelWidthAttr = elem.getAttribute('widthType') === 'pixel' ? elem.getAttribute('width') : '';
+    var pixelWidth = parseFloat(pixelWidthAttr || '');
+    if (Number.isNaN(pixelWidth)) {
+      return [];
+    }
+    var commonStyles = {
+      styles: {
+        lineStyle: 'dashed'
+      },
+      show: false
+    };
+    var key = "".concat(_guideline.MEDIA_DYNAMIC_GUIDELINE_PREFIX).concat(++keyIdx);
+    switch (elem.getAttribute('layout')) {
+      case 'align-start':
+      case 'wrap-left':
+        return _objectSpread({
+          position: {
+            x: pixelWidth - halfWidth
+          },
+          key: key
+        }, commonStyles);
+      case 'align-end':
+      case 'wrap-right':
+        return _objectSpread({
+          position: {
+            x: width - pixelWidth - halfWidth
+          },
+          key: key
+        }, commonStyles);
+      case 'center':
+        return [_objectSpread({
+          position: {
+            x: pixelWidth / 2
+          },
+          key: key
+        }, commonStyles), _objectSpread({
+          position: {
+            x: -pixelWidth / 2
+          },
+          key: key
+        }, commonStyles)];
+      // we ignore full-width and wide
+      default:
+        return [];
+    }
+  }).flat();
+  return dynamicGuidelines;
+};
+exports.generateDynamicGuidelines = generateDynamicGuidelines;