@atlaskit/editor-common 74.5.2 → 74.7.0

package/dist/cjs/react-node-view/getInlineNodeViewProducer.js

@@ -0,0 +1,225 @@
+"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 = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _analytics = require("../analytics");
+var _ErrorBoundary = require("../ui/ErrorBoundary");
+var _utils = require("../utils");
+/** @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(_utils.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, _utils.getPerformanceOptions)(nodeViewParams.view),
+    samplingRate = _getPerformanceOption.samplingRate,
+    slowThreshold = _getPerformanceOption.slowThreshold,
+    trackingEnabled = _getPerformanceOption.trackingEnabled;
+  trackingEnabled && (0, _utils.startMeasureReactNodeViewRendered)({
+    nodeTypeName: currentNode.type.name
+  });
+
+  // We render the component while creating the node view
+  renderComponent();
+  trackingEnabled && (0, _utils.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, _react2.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, _react2.jsx)("span", {
+      "aria-hidden": "true",
+      className: "zeroWidthSpaceContainer"
+    }, (0, _react2.jsx)("span", {
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
+    }), _utils.ZERO_WIDTH_SPACE), (0, _react2.jsx)(Component, (0, _extends2.default)({
+      view: nodeViewParams.view,
+      getPos: nodeViewParams.getPos,
+      node: currentNode
+    }, extraComponentProps)), (0, _react2.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/react-node-view/index.js

@@ -5,6 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+Object.defineProperty(exports, "getInlineNodeViewProducer", {
+  enumerable: true,
+  get: function get() {
+    return _getInlineNodeViewProducer.getInlineNodeViewProducer;
+  }
+});
+Object.defineProperty(exports, "inlineNodeViewClassname", {
+  enumerable: true,
+  get: function get() {
+    return _getInlineNodeViewProducer.inlineNodeViewClassname;
+  }
+});
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -15,6 +27,7 @@ var _eventDispatcher = require("../event-dispatcher");
 var _ErrorBoundary = require("../ui/ErrorBoundary");
 var _utils = require("../utils");
 var _analytics2 = require("../utils/analytics");
+var _getInlineNodeViewProducer = require("./getInlineNodeViewProducer");
 var ReactNodeView = /*#__PURE__*/function () {
   function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
     var _this = this;

package/dist/cjs/{ui/Resizer/index.js → resizer/Resizer.js}

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _classnames3 = _interopRequireDefault(require("classnames"));
 var _reResizable = require("re-resizable");
-var _resizer = require("../../styles/shared/resizer");
+var _resizer = require("../styles/shared/resizer");
 function ResizerNext(props) {
   var _classnames, _classnames2;
   var resizable = _react.default.useRef(null);
@@ -19,7 +19,9 @@ function ResizerNext(props) {
     _props$handlerHeightS = props.handlerHeightSize,
     handlerHeightSize = _props$handlerHeightS === void 0 ? 'medium' : _props$handlerHeightS,
     _props$handleAlignmen = props.handleAlignmentMethod,
-    handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen;
+    handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
+    _props$resizeRatio = props.resizeRatio,
+    resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio;
   var onResizeStart = _react.default.useCallback(function (event) {
     // prevent creating a drag event on Firefox
     event.preventDefault();
@@ -90,6 +92,7 @@ function ResizerNext(props) {
     ,
     onResizeStart: onResizeStart,
     onResize: onResize,
-    onResizeStop: onResizeStop
+    onResizeStop: onResizeStop,
+    resizeRatio: resizeRatio
   }, props.children);
 }

package/dist/cjs/{resizer.js → resizer/index.js}

@@ -10,4 +10,4 @@ Object.defineProperty(exports, "ResizerNext", {
     return _Resizer.default;
   }
 });
-var _Resizer = _interopRequireDefault(require("./ui/Resizer"));
+var _Resizer = _interopRequireDefault(require("./Resizer"));

package/dist/cjs/resizer/utils.js

@@ -0,0 +1,21 @@
+"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;

package/dist/cjs/styles/shared/resizer.js

@@ -41,5 +41,5 @@ var resizerHandlerClassName = {
   large: resizerHandlerLargeClassName
 };
 exports.resizerHandlerClassName = resizerHandlerClassName;
-var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n  }\n\n  .", ", .", " {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n"])), resizerItemClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName);
+var resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: flex;\n    visibility: hidden;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  .", " {\n    align-items: flex-end;\n  }\n\n  .", " {\n    align-items: flex-start;\n  }\n\n  .", "::after,\n    .", "::after {\n    content: ' ';\n    display: flex;\n    width: 3px;\n    height: 64px;\n\n    border-radius: 6px;\n  }\n\n  .", ":hover\n    .", ",\n    .", ":hover\n    .", " {\n    visibility: visible;\n  }\n\n  .", ":hover\n    .", "::after,\n    .", ":hover\n    .", "::after {\n    background: ", ";\n  }\n\n  .", "\n    .", "::after,\n    .", "\n    .", "::after,\n    .", "\n    .", ":hover::after,\n    .", "\n    .", ":hover::after,\n    .", ".is-resizing\n    .", "::after,\n    .", ".is-resizing\n    .", "::after {\n    background: ", ";\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 64px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 43px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    height: 96px;\n  }\n\n  .", ".", "::after,\n    .", ".", "::after {\n    position: sticky;\n    top: 10px;\n    bottom: 10px;\n  }\n"])), resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerHandleRightClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, "var(--ds-border, ".concat(_colors.N60, ")"), akEditorSelectedNodeClassName, resizerHandleRightClassName, akEditorSelectedNodeClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, resizerItemClassName, resizerHandleRightClassName, resizerItemClassName, resizerHandleLeftClassName, "var(--ds-border-focused, ".concat(_colors.B200, ")"), resizerHandleRightClassName, resizerHandlerClassName.medium, resizerHandleLeftClassName, resizerHandlerClassName.medium, resizerHandleRightClassName, resizerHandlerClassName.small, resizerHandleLeftClassName, resizerHandlerClassName.small, resizerHandleRightClassName, resizerHandlerClassName.large, resizerHandleLeftClassName, resizerHandlerClassName.large, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleLeftClassName, resizerHandleStickyClassName);
 exports.resizerStyles = resizerStyles;

package/dist/cjs/styles/shared/table.js

@@ -49,7 +49,8 @@ var TableSharedCssClassName = {
   TABLE_CELL_WRAPPER: _adfSchema.tableCellSelector,
   TABLE_HEADER_CELL_WRAPPER: _adfSchema.tableHeaderSelector,
   TABLE_ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls-wrapper"),
-  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration")
+  TABLE_COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
+  TABLE_RESIZER_CONTAINER: "".concat(_adfSchema.tablePrefixSelector, "-resizer-container")
 };
 exports.TableSharedCssClassName = TableSharedCssClassName;
 var tableSharedStyle = function tableSharedStyle(props) {
@@ -98,12 +99,12 @@ var calcTableWidth = function calcTableWidth(layout, containerWidth) {
   var addControllerPadding = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   switch (layout) {
     case 'full-width':
-      return containerWidth ? "".concat(Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorFullWidthLayoutWidth), "px") : "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px");
+      return containerWidth ? Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorFullWidthLayoutWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
     case 'wide':
       if (containerWidth) {
-        return "".concat(Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorWideLayoutWidth), "px");
+        return Math.min(containerWidth - (addControllerPadding ? _editorSharedStyles.akEditorBreakoutPadding : 0), _editorSharedStyles.akEditorWideLayoutWidth);
       }
-      return "".concat(_editorSharedStyles.akEditorWideLayoutWidth, "px");
+      return _editorSharedStyles.akEditorWideLayoutWidth;
     default:
       return 'inherit';
   }

package/dist/cjs/types/hyperlink.js

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

package/dist/cjs/types/resizable-media-single.js

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

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

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 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 packageName = "@atlaskit/editor-common";
-var packageVersion = "74.5.2";
+var packageVersion = "74.7.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/LinkSearch/const.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = exports.LINKPICKER_HEIGHT_IN_PX = void 0;
+var RECENT_SEARCH_WIDTH_IN_PX = 420;
+exports.RECENT_SEARCH_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
+var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
+exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX;
+var RECENT_SEARCH_HEIGHT_IN_PX = 360;
+exports.RECENT_SEARCH_HEIGHT_IN_PX = RECENT_SEARCH_HEIGHT_IN_PX;
+var LINKPICKER_HEIGHT_IN_PX = 570;
+exports.LINKPICKER_HEIGHT_IN_PX = LINKPICKER_HEIGHT_IN_PX;

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

@@ -0,0 +1,210 @@
+"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 _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _analytics = require("../../analytics");
+var _styles = require("../../styles");
+var _utils = require("../../utils");
+var _utils2 = require("./utils");
+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/ResizerLegacy/styled.js

@@ -0,0 +1,15 @@
+"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 _styled = require("../MediaSingle/styled");
+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, _styled.MediaSingleDimensionHelper)(props));
+};
+exports.wrapperStyle = wrapperStyle;

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

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

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

@@ -0,0 +1,21 @@
+"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;