@atlaskit/editor-core 185.2.0 → 185.2.5

package/dist/cjs/nodeviews/getInlineNodeViewProducer.js

@@ -1,227 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getInlineNodeViewProducer = getInlineNodeViewProducer;
-exports.inlineNodeViewClassname = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
-var _react2 = _interopRequireDefault(require("react"));
-var _utils = require("@atlaskit/editor-common/utils");
-var _analytics = require("../plugins/analytics");
-var _consts = require("../plugins/analytics/consts");
-var _ErrorBoundary = require("../ui/ErrorBoundary");
-var _getPerformanceOptions = require("./getPerformanceOptions");
-/** @jsx jsx */
-
-var inlineNodeViewClassname = 'inlineNodeView';
-exports.inlineNodeViewClassname = inlineNodeViewClassname;
-function createNodeView(_ref) {
-  var nodeViewParams = _ref.nodeViewParams,
-    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
-    Component = _ref.Component,
-    extraComponentProps = _ref.extraComponentProps;
-  // We set a variable for the current node which is
-  // used for comparisions when doing updates, before being
-  // overwritten to the updated node.
-  var currentNode = nodeViewParams.node;
-
-  // First we setup the dom element which will be rendered and "tracked" by prosemirror
-  // and also used as a "editor portal" (not react portal) target by the editor
-  // portal provider api, for rendering the Component passed.
-
-  var domRef = document.createElement('span');
-  domRef.contentEditable = 'false';
-  setDomAttrs(nodeViewParams.node, domRef);
-
-  // @see ED-3790
-  // something gets messed up during mutation processing inside of a
-  // nodeView if DOM structure has nested plain "div"s, it doesn't see the
-  // difference between them and it kills the nodeView
-  domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "".concat(inlineNodeViewClassname));
-
-  // This util is shared for tracking rendering, and the ErrorBoundary that
-  // is setup to wrap the Component when rendering
-  // NOTE: This is not a prosemirror dispatch
-  function dispatchAnalyticsEvent(payload) {
-    pmPluginFactoryParams.eventDispatcher.emit(_consts.analyticsEventKey, {
-      payload: payload
-    });
-  }
-
-  // This is called to render the Component into domRef which is inside the
-  // prosemirror View.
-  // Internally it uses the unstable_renderSubtreeIntoContainer api to render,
-  // to the passed dom element (domRef) which means it is automatically
-  // "cleaned up" when you do a "re render".
-  function renderComponent() {
-    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-      currentNode: currentNode,
-      nodeViewParams: nodeViewParams,
-      Component: Component,
-      extraComponentProps: extraComponentProps
-    }), domRef, false,
-    // node views should be rendered with intl context
-    true);
-  }
-  var _getPerformanceOption = (0, _getPerformanceOptions.getPerformanceOptions)(nodeViewParams.view),
-    samplingRate = _getPerformanceOption.samplingRate,
-    slowThreshold = _getPerformanceOption.slowThreshold,
-    trackingEnabled = _getPerformanceOption.trackingEnabled;
-  trackingEnabled && (0, _getPerformanceOptions.startMeasureReactNodeViewRendered)({
-    nodeTypeName: currentNode.type.name
-  });
-
-  // We render the component while creating the node view
-  renderComponent();
-  trackingEnabled && (0, _getPerformanceOptions.stopMeasureReactNodeViewRendered)({
-    nodeTypeName: currentNode.type.name,
-    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-    editorState: nodeViewParams.view.state,
-    samplingRate: samplingRate,
-    slowThreshold: slowThreshold
-  });
-
-  // https://prosemirror.net/docs/ref/#view.NodeView
-  var nodeView = {
-    get dom() {
-      return domRef;
-    },
-    update: function update(nextNode, _decorations) {
-      // Let ProseMirror handle the update if node types are different.
-      // This prevents an issue where it was not possible to select the
-      // inline node view then replace it by entering text - the node
-      // view contents would be deleted but the node view itself would
-      // stay in the view and become uneditable.
-      if (currentNode.type !== nextNode.type) {
-        return false;
-      }
-      // On updates, we only set the new attributes if the type, attributes, and marks
-      // have changed on the node.
-
-      // NOTE: this could mean attrs changes aren't reflected in the dom,
-      // when an attribute key which was previously present is no longer
-      // present.
-      // ie.
-      // -> Original attributes { text: "hello world", color: "red" }
-      // -> Updated attributes { color: "blue" }
-      // in this case, the dom text attribute will not be cleared.
-      //
-      // This may not be an issue with any of our current node schemas.
-      if (!currentNode.sameMarkup(nextNode)) {
-        setDomAttrs(nextNode, domRef);
-      }
-      currentNode = nextNode;
-      renderComponent();
-      return true;
-    },
-    destroy: function destroy() {
-      // When prosemirror destroys the node view, we need to clean up
-      // what we have previously rendered using the editor portal
-      // provider api.
-      pmPluginFactoryParams.portalProviderAPI.remove(domRef);
-      // @ts-expect-error Expect an error as domRef is expected to be
-      // of HTMLSpanElement type however once the node view has
-      // been destroyed no other consumers should still be using it.
-      domRef = undefined;
-    }
-  };
-  return nodeView;
-}
-
-/**
- * Copies the attributes from a ProseMirror Node to a DOM node.
- * @param node The Prosemirror Node from which to source the attributes
- */
-function setDomAttrs(node, element) {
-  Object.keys(node.attrs || {}).forEach(function (attr) {
-    element.setAttribute(attr, node.attrs[attr]);
-  });
-}
-function getPortalChildren(_ref2) {
-  var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-    currentNode = _ref2.currentNode,
-    nodeViewParams = _ref2.nodeViewParams,
-    Component = _ref2.Component,
-    extraComponentProps = _ref2.extraComponentProps;
-  return function portalChildren() {
-    var _currentNode$type$nam, _currentNode$type;
-    //  All inline nodes use `display: inline` to allow for multi-line
-    //  wrapping. This does produce an issue in Chrome where it is not
-    //  possible to click select the position after the node,
-    //  see: https://product-fabric.atlassian.net/browse/ED-12003
-    //  however this is only a problem for node views that use
-    //  `display: inline-block` somewhere within the Component.
-    //  Looking at the below structure, spans with className
-    //  `inlineNodeViewAddZeroWidthSpace` have pseudo elements that
-    //  add a zero width space which fixes the problem.
-    //  Without the additional zero width space before the Component,
-    //  it is not possible to use the keyboard to range select in Safari.
-    //
-    //  Zero width spaces on either side of the Component also prevent
-    //  the cursor from appearing inside the node view on all browsers.
-    //
-    //  Note:
-    //  In future it is worth considering prohibiting the use of `display: inline-block`
-    //  within inline node view Components however would require a sizable
-    //  refactor. A test suite to catch any instances of this is ideal however
-    //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
-
-    return (0, _react.jsx)(_ErrorBoundary.ErrorBoundary, {
-      component: _analytics.ACTION_SUBJECT.REACT_NODE_VIEW,
-      componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : _analytics.ACTION_SUBJECT_ID.UNKNOWN_NODE,
-      dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }, (0, _react.jsx)("span", {
-      "aria-hidden": "true",
-      className: "zeroWidthSpaceContainer"
-    }, (0, _react.jsx)("span", {
-      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
-    }), _utils.ZERO_WIDTH_SPACE), (0, _react.jsx)(Component, (0, _extends2.default)({
-      view: nodeViewParams.view,
-      getPos: nodeViewParams.getPos,
-      node: currentNode
-    }, extraComponentProps)), (0, _react.jsx)("span", {
-      "aria-hidden": "true",
-      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
-    }));
-  };
-}
-
-// https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews
-// The prosemirror EditorProps has a nodeViews key which has the rough shape:
-// type nodeViews: {
-//   [nodeViewName: string]: (node, editorView, getPos, decorations, innerDecorations) => NodeView
-// }
-// So the value of the keys on the nodeViews object, are a function which should return a NodeView.
-// The following type NodeViewProducer, refers to these functions which return a NodeView.
-//
-// So the above type could also be described as
-// type NodeViewProducer = (node, editorView, getPos, decorations, innerDecorations) => NodeView
-// nodeViews: {
-//   [nodeViewName: string]: NodeViewProducer
-// }
-// This return of this function is intended to be the value of a key
-// in a ProseMirror nodeViews object.
-function getInlineNodeViewProducer(_ref3) {
-  var pmPluginFactoryParams = _ref3.pmPluginFactoryParams,
-    Component = _ref3.Component,
-    extraComponentProps = _ref3.extraComponentProps;
-  function nodeViewProducer() {
-    var nodeView = createNodeView({
-      nodeViewParams: {
-        node: arguments.length <= 0 ? undefined : arguments[0],
-        view: arguments.length <= 1 ? undefined : arguments[1],
-        getPos: arguments.length <= 2 ? undefined : arguments[2],
-        decorations: arguments.length <= 3 ? undefined : arguments[3]
-      },
-      pmPluginFactoryParams: pmPluginFactoryParams,
-      Component: Component,
-      extraComponentProps: extraComponentProps
-    });
-    return nodeView;
-  }
-  return nodeViewProducer;
-}

package/dist/cjs/plugins/hyperlink/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

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

@@ -1,152 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _prosemirrorState = require("prosemirror-state");
-var _prosemirrorUtils = require("prosemirror-utils");
-var _messages = _interopRequireDefault(require("../../messages"));
-var _mediaWrapLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-left"));
-var _mediaWrapRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-right"));
-var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
-var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-full-width"));
-var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
-var _alignImageRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-right"));
-var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
-var _richMediaUtils = require("../../utils/rich-media-utils");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _utils = require("../../plugins/analytics/utils");
-var _analytics = require("../../plugins/analytics");
-var _toolbarMessages = require("./toolbar-messages");
-var _utils2 = require("../../utils");
-var alignmentIcons = [{
-  id: 'editor.media.alignLeft',
-  value: 'align-start',
-  icon: _alignImageLeft.default
-}, {
-  id: 'editor.media.alignCenter',
-  value: 'center',
-  icon: _alignImageCenter.default
-}, {
-  id: 'editor.media.alignRight',
-  value: 'align-end',
-  icon: _alignImageRight.default
-}];
-var wrappingIcons = [{
-  id: 'editor.media.wrapLeft',
-  value: 'wrap-left',
-  icon: _mediaWrapLeft.default
-}, {
-  id: 'editor.media.wrapRight',
-  value: 'wrap-right',
-  icon: _mediaWrapRight.default
-}];
-var breakoutIcons = [{
-  value: 'wide',
-  icon: _mediaWide.default
-}, {
-  value: 'full-width',
-  icon: _mediaFullWidth.default
-}];
-var layoutToMessages = {
-  'wrap-left': _toolbarMessages.toolbarMessages.wrapLeft,
-  center: _messages.default.alignImageCenter,
-  'wrap-right': _toolbarMessages.toolbarMessages.wrapRight,
-  wide: _messages.default.layoutWide,
-  'full-width': _messages.default.layoutFullWidth,
-  'align-end': _messages.default.alignImageRight,
-  'align-start': _messages.default.alignImageLeft
-};
-var getNodeWidth = function getNodeWidth(node, schema) {
-  var embedCard = schema.nodes.embedCard;
-  if (node.type === embedCard) {
-    return node.attrs.originalWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH;
-  }
-  return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
-};
-var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi) {
-  return function (state, dispatch) {
-    var _ref = state.selection,
-      node = _ref.node;
-    var previousLayoutType = node.attrs.layout;
-    var mediaSingle = state.schema.nodes.mediaSingle;
-    if (!dispatch) {
-      return false;
-    }
-    var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
-    if (!node || node.type !== nodeType || !widthPluginState) {
-      return false;
-    }
-    var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = (0, _richMediaUtils.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
-    var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
-    tr.setMeta('scrollIntoView', false);
-    // when image captions are enabled, the wrong node gets selected after
-    // setNodeMarkup is called
-    tr.setSelection(_prosemirrorState.NodeSelection.create(tr.doc, state.selection.from));
-    var paragraph = tr.doc.type.schema.nodes.paragraph;
-
-    // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
-    if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && ((0, _utils2.insideTable)(state) || (0, _utils2.isInLayoutColumn)(state))) {
-      tr.insert(state.selection.to, paragraph.createAndFill());
-    }
-    dispatch((0, _utils.addAnalytics)(state, tr, {
-      eventType: _analytics.EVENT_TYPE.TRACK,
-      action: _analytics.ACTION.SELECTED,
-      actionSubject: _analytics.ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
-      attributes: {
-        previousLayoutType: previousLayoutType,
-        currentLayoutType: layout
-      }
-    }));
-    return true;
-  };
-};
-var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi) {
-  return icons.map(function (toolbarItem) {
-    var id = toolbarItem.id,
-      value = toolbarItem.value;
-    return {
-      id: id,
-      type: 'button',
-      icon: toolbarItem.icon,
-      title: intl.formatMessage(layoutToMessages[value]),
-      selected: layout === value,
-      onClick: makeAlign(value, nodeType, widthPluginDependencyApi)
-    };
-  });
-};
-var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
-  var nodes = _ref2.nodes;
-  return (0, _prosemirrorUtils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
-};
-var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, allowResizing, allowResizingInTables) {
-  var allowWrapping = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
-  var allowAlignment = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
-  var selection = state.selection;
-  if (!(selection instanceof _prosemirrorState.NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
-    return [];
-  }
-  var layout = selection.node.attrs.layout;
-  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
-  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
-  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi) : [];
-  var items = [].concat((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(breakOutToolbarItems));
-  return items;
-};
-var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
-  return allowAlignment && allowWrapping ? [{
-    type: 'separator'
-  }] : [];
-};
-var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
-  return !allowResizing && (allowAlignment || allowWrapping) ? [{
-    type: 'separator'
-  }] : [];
-};
-var _default = buildLayoutButtons;
-exports.default = _default;

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

@@ -1,210 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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 _classnames = _interopRequireDefault(require("classnames"));
-var _reResizable = require("re-resizable");
-var _utils = require("@atlaskit/editor-common/utils");
-var _utils2 = require("./utils");
-var _styles = require("@atlaskit/editor-common/styles");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _analytics = require("../../plugins/analytics");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var 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 getWidthFromSnapPoints = function getWidthFromSnapPoints(width, snapPoints) {
-  if (snapPoints.length) {
-    return Math.min(Math.max(width, snapPoints[0]), snapPoints[snapPoints.length - 1]);
-  }
-  return width;
-};
-var Resizer = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(Resizer, _React$Component);
-  var _super = _createSuper(Resizer);
-  function Resizer() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Resizer);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizable", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isResizing: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function (event) {
-      var _this$props = _this.props,
-        _this$props$innerPadd = _this$props.innerPadding,
-        innerPadding = _this$props$innerPadd === void 0 ? 0 : _this$props$innerPadd,
-        highlights = _this$props.highlights,
-        displayGrid = _this$props.displayGrid,
-        layout = _this$props.layout,
-        width = _this$props.width,
-        snapPoints = _this$props.snapPoints;
-
-      // prevent creating a drag event on Firefox
-      event.preventDefault();
-      _this.setState({
-        isResizing: true
-      }, function () {
-        var newHighlights = highlights(width + innerPadding, snapPoints);
-        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, (0, _utils.gridTypeForLayout)(layout), newHighlights);
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (_event, _direction, _elementRef, delta) {
-      var _this$props2 = _this.props,
-        highlights = _this$props2.highlights,
-        calcNewSize = _this$props2.calcNewSize,
-        scaleFactor = _this$props2.scaleFactor,
-        snapPoints = _this$props2.snapPoints,
-        displayGrid = _this$props2.displayGrid,
-        layout = _this$props2.layout,
-        updateSize = _this$props2.updateSize,
-        _this$props2$innerPad = _this$props2.innerPadding,
-        innerPadding = _this$props2$innerPad === void 0 ? 0 : _this$props2$innerPad;
-      var resizable = _this.resizable.current;
-      var isResizing = _this.state.isResizing;
-      if (!resizable || !resizable.state.original || !isResizing) {
-        return;
-      }
-      var newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width * (scaleFactor || 1), snapPoints);
-      var newSize = calcNewSize(newWidth + innerPadding, false);
-      if (newSize.layout !== layout) {
-        updateSize(newSize.width, newSize.layout);
-      }
-      var newHighlights = highlights(newWidth, snapPoints);
-      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, (0, _utils.gridTypeForLayout)(newSize.layout), newHighlights);
-      resizable.updateSize({
-        width: newWidth,
-        height: 'auto'
-      });
-      resizable.setState({
-        isResizing: true
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (_event, _direction, _elementRef, delta) {
-      var _this$props3 = _this.props,
-        highlights = _this$props3.highlights,
-        calcNewSize = _this$props3.calcNewSize,
-        snapPoints = _this$props3.snapPoints,
-        displayGrid = _this$props3.displayGrid,
-        layout = _this$props3.layout,
-        updateSize = _this$props3.updateSize,
-        dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
-        nodeType = _this$props3.nodeType;
-      var resizable = _this.resizable.current;
-      var isResizing = _this.state.isResizing;
-      if (!resizable || !resizable.state.original || !isResizing) {
-        return;
-      }
-      var newWidth = getWidthFromSnapPoints(resizable.state.original.width + delta.width, snapPoints);
-      var snapWidth = (0, _utils2.snapTo)(newWidth, snapPoints);
-      var newSize = calcNewSize(snapWidth, true);
-      var newHighlights = highlights(newWidth, snapPoints);
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent(getResizeAnalyticsEvent(nodeType, newSize.width, newSize.layout));
-      }
-      // show committed grid size
-      displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(newHighlights.length > 0, (0, _utils.gridTypeForLayout)(newSize.layout), newHighlights);
-      _this.setState({
-        isResizing: false
-      }, function () {
-        updateSize(newSize.width, newSize.layout);
-        displayGrid === null || displayGrid === void 0 ? void 0 : displayGrid(false, (0, _utils.gridTypeForLayout)(layout), []);
-      });
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(Resizer, [{
-    key: "render",
-    value: function render() {
-      var handleStyles = {};
-      var handles = {};
-      var handleComponent = {};
-      var _this$props4 = this.props,
-        _this$props4$innerPad = _this$props4.innerPadding,
-        innerPadding = _this$props4$innerPad === void 0 ? 0 : _this$props4$innerPad,
-        width = _this$props4.width,
-        pctWidth = _this$props4.pctWidth,
-        selected = _this$props4.selected,
-        layout = _this$props4.layout,
-        enable = _this$props4.enable,
-        children = _this$props4.children,
-        ratio = _this$props4.ratio,
-        handleComponentFunc = _this$props4.handleComponentFunc;
-      var isResizing = this.state.isResizing;
-      _utils2.handleSides.forEach(function (side) {
-        var _handleStyles$side;
-        handles[side] = "richMedia-resize-handle-".concat(side);
-        handleStyles[side] = (_handleStyles$side = {
-          width: '24px'
-        }, (0, _defineProperty2.default)(_handleStyles$side, side, "".concat(-13 - innerPadding, "px")), (0, _defineProperty2.default)(_handleStyles$side, "zIndex", _editorSharedStyles.akRichMediaResizeZIndex), (0, _defineProperty2.default)(_handleStyles$side, "pointerEvents", 'auto'), _handleStyles$side);
-        var sideHandleComponent = handleComponentFunc && handleComponentFunc(side);
-        if (sideHandleComponent) {
-          handleComponent[side] = sideHandleComponent;
-        }
-      });
-      var className = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), this.props.className, {
-        'is-resizing': isResizing,
-        'not-resized': !pctWidth,
-        'richMedia-selected': selected,
-        'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
-      });
-      var handleWrapperStyle;
-      if (ratio) {
-        handleWrapperStyle = {
-          position: 'absolute',
-          width: '100%',
-          paddingBottom: "".concat(ratio, "%"),
-          top: 0,
-          pointerEvents: 'none'
-        };
-      }
-
-      // Ideally, Resizable would let you pass in the component rather than
-      // the div. For now, we just apply the same styles using CSS
-      return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, {
-        ref: this.resizable,
-        size: {
-          width: width,
-          // just content itself (no paddings)
-          height: 'auto'
-        },
-        className: className,
-        handleClasses: handles,
-        handleStyles: handleStyles,
-        handleWrapperStyle: handleWrapperStyle,
-        handleComponent: handleComponent,
-        enable: enable,
-        onResize: this.handleResize,
-        onResizeStop: this.handleResizeStop,
-        onResizeStart: this.handleResizeStart
-      }, children);
-    }
-  }]);
-  return Resizer;
-}(_react.default.Component);
-exports.default = Resizer;

package/dist/cjs/ui/Resizer/styled.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.wrapperStyle = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
-var _templateObject;
-var wrapperStyle = function wrapperStyle(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), (0, _ui.MediaSingleDimensionHelper)(props));
-};
-exports.wrapperStyle = wrapperStyle;

package/dist/cjs/ui/Resizer/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/cjs/ui/Resizer/utils.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.snapTo = exports.imageAlignmentMap = exports.handleSides = void 0;
-var snapTo = function snapTo(target, points) {
-  return points.length === 0 ?
-  // extreme last case if there are no points somehow
-  target : points.reduce(function (point, closest) {
-    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
-  });
-};
-exports.snapTo = snapTo;
-var handleSides = ['left', 'right'];
-exports.handleSides = handleSides;
-var imageAlignmentMap = {
-  left: 'start',
-  right: 'end'
-};
-exports.imageAlignmentMap = imageAlignmentMap;