@atlaskit/editor-plugin-card 0.1.0

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

@@ -0,0 +1,121 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LayoutButton = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _utils = require("@atlaskit/editor-common/utils");
+var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
+var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
+var _colors = require("@atlaskit/theme/colors");
+var _actions = require("../../pm-plugins/actions");
+var _utils2 = require("./utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; } /** @jsx jsx */
+var toolbarButtonWrapperStyles = (0, _react2.css)({
+  background: "".concat("var(--ds-background-neutral, ".concat(_colors.N20A, ")")),
+  color: "".concat("var(--ds-icon, ".concat(_colors.N300, ")")),
+  ':hover': {
+    background: "".concat("var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")")),
+    color: "var(--ds-icon, white)".concat(" !important")
+  }
+});
+var LayoutButton = function LayoutButton(_ref) {
+  var onLayoutChange = _ref.onLayoutChange,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'center' : _ref$layout,
+    formatMessage = _ref.intl.formatMessage,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    targetElement = _ref.targetElement,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'datasource-table-layout-button' : _ref$testId;
+  var handleClick = (0, _react.useCallback)(function () {
+    onLayoutChange && onLayoutChange((0, _utils.getNextBreakoutMode)(layout));
+  }, [layout, onLayoutChange]);
+  var title = (0, _react.useMemo)(function () {
+    return formatMessage((0, _utils.getTitle)(layout));
+  }, [formatMessage, layout]);
+  if (!targetElement) {
+    return null;
+  }
+  return (0, _react2.jsx)(_ui.Popup, {
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetElement,
+    alignY: "start",
+    alignX: "end",
+    forcePlacement: true,
+    stick: true,
+    ariaLabel: title
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+    testId: testId,
+    css: toolbarButtonWrapperStyles,
+    title: title,
+    onClick: handleClick,
+    iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_collapse.default, {
+      label: title
+    }) : (0, _react2.jsx)(_expand.default, {
+      label: title
+    })
+  }));
+};
+exports.LayoutButton = LayoutButton;
+var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
+  var _node$attrs, _node$attrs2;
+  var editorView = _ref2.editorView,
+    mountPoint = _ref2.mountPoint,
+    scrollableElement = _ref2.scrollableElement,
+    boundariesElement = _ref2.boundariesElement,
+    intl = _ref2.intl,
+    api = _ref2.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['card']),
+    cardState = _useSharedPluginState.cardState;
+  var _getDatasource = (0, _utils2.getDatasource)(editorView),
+    node = _getDatasource.node,
+    pos = _getDatasource.pos;
+  var _ref3 = cardState !== null && cardState !== void 0 ? cardState : {},
+    datasourceTableRef = _ref3.datasourceTableRef,
+    _ref3$layout = _ref3.layout,
+    layout = _ref3$layout === void 0 ? (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || 'center' : _ref3$layout;
+  var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
+  var onLayoutChange = function onLayoutChange(layout) {
+    if (pos === undefined) {
+      return;
+    }
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
+      layout: layout
+    }));
+    tr.setMeta('scrollIntoView', false);
+    dispatch((0, _actions.setCardLayout)(layout)(tr));
+  };
+  if (!isDatasource) {
+    return null;
+  }
+  return (0, _react2.jsx)(LayoutButton, {
+    mountPoint: mountPoint,
+    scrollableElement: scrollableElement,
+    boundariesElement: boundariesElement,
+    targetElement: datasourceTableRef,
+    layout: layout,
+    onLayoutChange: onLayoutChange,
+    intl: intl
+  });
+};
+var _default = (0, _reactIntlNext.injectIntl)(LayoutButtonWrapper);
+exports.default = _default;

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

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

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDatasource = void 0;
+var _prosemirrorUtils = require("prosemirror-utils");
+var getDatasource = function getDatasource(editorView) {
+  var _findSelectedNodeOfTy;
+  var _editorView$state = editorView.state,
+    selection = _editorView$state.selection,
+    schema = _editorView$state.schema;
+  var blockCard = schema.nodes.blockCard;
+  return (_findSelectedNodeOfTy = (0, _prosemirrorUtils.findSelectedNodeOfType)([blockCard])(selection)) !== null && _findSelectedNodeOfTy !== void 0 ? _findSelectedNodeOfTy : {
+    node: undefined,
+    pos: undefined
+  };
+};
+exports.getDatasource = getDatasource;

package/dist/cjs/ui/LinkToolbarAppearance.js

@@ -0,0 +1,152 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkToolbarAppearance = 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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _prosemirrorModel = require("prosemirror-model");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _card = require("@atlaskit/editor-common/card");
+var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _utils = require("@atlaskit/editor-common/utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+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; } }
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(LinkToolbarAppearance, _React$Component);
+  var _super = _createSuper(LinkToolbarAppearance);
+  function LinkToolbarAppearance() {
+    var _this;
+    (0, _classCallCheck2.default)(this, LinkToolbarAppearance);
+    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), "renderDropdown", function (view, cardContext) {
+      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3;
+      var _this$props = _this.props,
+        url = _this$props.url,
+        intl = _this$props.intl,
+        currentAppearance = _this$props.currentAppearance,
+        editorState = _this$props.editorState,
+        allowEmbeds = _this$props.allowEmbeds,
+        _this$props$allowBloc = _this$props.allowBlockCards,
+        allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
+        platform = _this$props.platform,
+        editorAnalyticsApi = _this$props.editorAnalyticsApi,
+        cardActions = _this$props.cardActions;
+      var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
+      var defaultCommand = function defaultCommand() {
+        return false;
+      };
+      if (url) {
+        var _cardContext$store, _urlState$error;
+        var urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+        if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+          return null;
+        }
+      }
+      var isBlockCardLinkSupportedInParent = allowBlockCards ? (0, _utils.isSupportedInParent)(editorState, _prosemirrorModel.Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance) : false;
+      var isEmbedCardLinkSupportedInParent = allowEmbeds ? (0, _utils.isSupportedInParent)(editorState, _prosemirrorModel.Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
+      var embedOption = allowEmbeds && preview && {
+        appearance: 'embed',
+        title: intl.formatMessage(_messages.cardMessages.embed),
+        onClick: (_cardActions$setSelec = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('embed', editorAnalyticsApi)) !== null && _cardActions$setSelec !== void 0 ? _cardActions$setSelec : defaultCommand,
+        selected: currentAppearance === 'embed',
+        hidden: false,
+        testId: 'embed-appearance',
+        disabled: !isEmbedCardLinkSupportedInParent,
+        tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
+      };
+      var blockCardOption = allowBlockCards && {
+        appearance: 'block',
+        title: intl.formatMessage(_messages.cardMessages.block),
+        onClick: (_cardActions$setSelec2 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('block', editorAnalyticsApi)) !== null && _cardActions$setSelec2 !== void 0 ? _cardActions$setSelec2 : defaultCommand,
+        selected: currentAppearance === 'block',
+        testId: 'block-appearance',
+        disabled: !isBlockCardLinkSupportedInParent,
+        tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
+      };
+      var options = [{
+        title: intl.formatMessage(_messages.cardMessages.url),
+        onClick: (0, _card.commandWithMetadata)((_cardActions$changeSe = cardActions === null || cardActions === void 0 ? void 0 : cardActions.changeSelectedCardToLink(url, url, true, undefined, undefined, editorAnalyticsApi)) !== null && _cardActions$changeSe !== void 0 ? _cardActions$changeSe : defaultCommand, {
+          action: _analytics.ACTION.CHANGED_TYPE
+        }),
+        selected: !currentAppearance,
+        testId: 'url-appearance'
+      }, {
+        appearance: 'inline',
+        title: intl.formatMessage(_messages.cardMessages.inline),
+        onClick: (_cardActions$setSelec3 = cardActions === null || cardActions === void 0 ? void 0 : cardActions.setSelectedCardAppearance('inline', editorAnalyticsApi)) !== null && _cardActions$setSelec3 !== void 0 ? _cardActions$setSelec3 : defaultCommand,
+        selected: currentAppearance === 'inline',
+        testId: 'inline-appearance'
+      }];
+      var dispatchCommand = function dispatchCommand(fn) {
+        fn && fn(editorState, view && view.dispatch);
+        // Refocus the view to ensure the editor has focus
+        if (view && !view.hasFocus()) {
+          view.focus();
+        }
+      };
+      if (blockCardOption) {
+        options.push(blockCardOption);
+      }
+      if (embedOption) {
+        options.push(embedOption);
+      }
+      return /*#__PURE__*/_react.default.createElement(_card.LinkToolbarButtonGroup, {
+        key: "link-toolbar-button-group",
+        options: options.map(function (option) {
+          return (0, _card.getButtonGroupOption)(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
+            onClick: (0, _card.commandWithMetadata)(option.onClick, {
+              inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
+            })
+          }));
+        })
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(LinkToolbarAppearance, [{
+    key: "render",
+    value: function render() {
+      var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+      var editorView = this.props.editorView;
+      return this.renderDropdown(editorView, cardContext && cardContext.value);
+    }
+  }]);
+  return LinkToolbarAppearance;
+}(_react.default.Component);
+exports.LinkToolbarAppearance = LinkToolbarAppearance;
+(0, _defineProperty2.default)(LinkToolbarAppearance, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+});
+var getUnavailableMessage = function getUnavailableMessage(state, intl) {
+  try {
+    var parentNode = state.selection.$from.node(1);
+    var parentName = intl.formatMessage(_messages.default[parentNode.type.name]);
+    var tooltip = intl.formatMessage(_messages.cardMessages.displayOptionUnavailableInParentNode, {
+      node: parentName
+    });
+    return tooltip;
+  } catch (e) {
+    return intl.formatMessage(_messages.cardMessages.displayOptionUnavailableInParentNode, {
+      node: intl.formatMessage(_messages.default.defaultBlockNode)
+    });
+  }
+};

package/dist/cjs/ui/ResizableEmbedCard.js

@@ -0,0 +1,364 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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 _prosemirrorUtils = require("prosemirror-utils");
+var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _smartCard = require("@atlaskit/smart-card");
+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; }
+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 */
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ResizableEmbedCard, _React$Component);
+  var _super = _createSuper(ResizableEmbedCard);
+  function ResizableEmbedCard() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ResizableEmbedCard);
+    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), "state", {
+      offsetLeft: _this.calcOffsetLeft()
+    });
+    (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;
+      var newPct = (0, _ui.calcPctFromPx)(newWidth, _this.props.lineLength) * 100;
+      _this.setState({
+        resizedPctWidth: newPct
+      });
+      var newLayout = (0, _prosemirrorUtils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newPct, newWidth);
+      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 (pct, width) {
+      if (pct <= 100) {
+        return 'center';
+      }
+      if (width <= _this.wideLayoutWidth) {
+        return 'wide';
+      }
+      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), "calcPxWidth", function (useLayout) {
+      var _this$props2 = _this.props,
+        layout = _this$props2.layout,
+        pctWidth = _this$props2.pctWidth,
+        lineLength = _this$props2.lineLength,
+        containerWidth = _this$props2.containerWidth,
+        fullWidthMode = _this$props2.fullWidthMode,
+        getPos = _this$props2.getPos,
+        state = _this$props2.view.state;
+      var resizedPctWidth = _this.state.resizedPctWidth;
+      var pos = typeof getPos === 'function' ? getPos() : undefined;
+      return (0, _ui.calcMediaPxWidth)({
+        origWidth: _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
+        origHeight: _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT,
+        pctWidth: pctWidth,
+        state: state,
+        containerWidth: {
+          width: containerWidth,
+          lineLength: lineLength
+        },
+        isFullWidthModeEnabled: fullWidthMode,
+        layout: useLayout || layout,
+        pos: pos,
+        resizedPctWidth: resizedPctWidth
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "highlights", function (newWidth, snapPoints) {
+      var snapWidth = (0, _ui.snapTo)(newWidth, snapPoints);
+      var _this$props$view$stat = _this.props.view.state.schema.nodes,
+        layoutColumn = _this$props$view$stat.layoutColumn,
+        table = _this$props$view$stat.table,
+        expand = _this$props$view$stat.expand,
+        nestedExpand = _this$props$view$stat.nestedExpand;
+      if (_this.$pos && !!(0, _prosemirrorUtils.findParentNodeOfTypeClosestToPos)(_this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+        return [];
+      }
+      if (snapWidth > _this.wideLayoutWidth) {
+        return ['full-width'];
+      }
+      var _this$props3 = _this.props,
+        layout = _this$props3.layout,
+        lineLength = _this$props3.lineLength,
+        gridSize = _this$props3.gridSize;
+      var columns = (0, _ui.calcColumnsFromPx)(snapWidth, lineLength, gridSize);
+      var columnWidth = Math.round(columns);
+      var highlight = [];
+      if (layout === 'wrap-left' || layout === 'align-start') {
+        highlight.push(0, columnWidth);
+      } else if (layout === 'wrap-right' || layout === 'align-end') {
+        highlight.push(gridSize, gridSize - columnWidth);
+      } else if (_this.insideInlineLike) {
+        highlight.push(Math.round(columns + _this.calcColumnLeftOffset()));
+      } else {
+        highlight.push(Math.floor((gridSize - columnWidth) / 2), Math.ceil((gridSize + columnWidth) / 2));
+      }
+      return highlight;
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(ResizableEmbedCard, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var offsetLeft = this.calcOffsetLeft();
+      if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
+        this.setState({
+          offsetLeft: offsetLeft
+        });
+      }
+    }
+  }, {
+    key: "wrappedLayout",
+    get: function get() {
+      return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (this.props.layout !== nextProps.layout) {
+        this.checkLayout(this.props.layout, nextProps.layout);
+      }
+    }
+
+    /**
+     * When returning to center layout from a wrapped/aligned layout, it might actually
+     * be wide or full-width
+     */
+  }, {
+    key: "checkLayout",
+    value: function checkLayout(oldLayout, newLayout) {
+      var resizedPctWidth = this.state.resizedPctWidth;
+      if (_ui.wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+        var layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
+        this.props.updateSize(resizedPctWidth, layout);
+      }
+    }
+  }, {
+    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: "calcOffsetLeft",
+    value: function calcOffsetLeft() {
+      var offsetLeft = 0;
+      if (this.wrapper && this.insideInlineLike) {
+        var currentNode = this.wrapper;
+        var boundingRect = currentNode.getBoundingClientRect();
+        var pmRect = this.props.view.dom.getBoundingClientRect();
+        offsetLeft = boundingRect.left - pmRect.left;
+      }
+      return offsetLeft;
+    }
+  }, {
+    key: "wideLayoutWidth",
+    get: function get() {
+      var lineLength = this.props.lineLength;
+      if (lineLength) {
+        return Math.ceil(lineLength * _editorSharedStyles.breakoutWideScaleRatio);
+      } else {
+        return _editorSharedStyles.akEditorWideLayoutWidth;
+      }
+    }
+  }, {
+    key: "calcSnapPoints",
+    value: function calcSnapPoints() {
+      var offsetLeft = this.state.offsetLeft;
+      var _this$props4 = this.props,
+        containerWidth = _this$props4.containerWidth,
+        lineLength = _this$props4.lineLength;
+      var snapTargets = [];
+      for (var i = 0; i < this.gridWidth; i++) {
+        snapTargets.push((0, _ui.calcPxFromColumns)(i, lineLength, this.gridWidth) - offsetLeft);
+      }
+      // full width
+      snapTargets.push(lineLength - offsetLeft);
+      var minimumWidth = (0, _ui.calcPxFromColumns)(this.wrappedLayout || this.insideInlineLike ? 1 : 2, lineLength, this.props.gridSize);
+      var snapPoints = snapTargets.filter(function (width) {
+        return width >= minimumWidth;
+      });
+      var $pos = this.$pos;
+      if (!$pos) {
+        return snapPoints;
+      }
+      var isTopLevel = $pos.parent.type.name === 'doc';
+      if (isTopLevel) {
+        snapPoints.push(this.wideLayoutWidth);
+        var fullWidthPoint = containerWidth - _editorSharedStyles.akEditorBreakoutPadding;
+        if (fullWidthPoint > this.wideLayoutWidth) {
+          snapPoints.push(fullWidthPoint);
+        }
+      }
+      return snapPoints;
+    }
+  }, {
+    key: "insideInlineLike",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var listItem = this.props.view.state.schema.nodes.listItem;
+      return !!(0, _prosemirrorUtils.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
+    }
+  }, {
+    key: "getHeightDefiningComponent",
+    value:
+    /**
+     * Previously height of the box was controlled with paddingTop/paddingBottom trick inside Wrapper.
+     * It allowed height to be defined by a given percent ratio and so absolute value was defined by actual width.
+     * Also, it was part of styled component, which was fine because it was static through out life time of component.
+     *
+     * Now, two things changed:
+     * 1. If `height` is present we take it as actual height of the box, and hence we don't need
+     * (or even can't have, due to lack of width value) paddingTop trick.
+     * 2. Since `height` can be changing through out life time of a component, we can't have it as part of styled component,
+     * and hence we use `style` prop.
+     */
+    function getHeightDefiningComponent() {
+      var _this$props5 = this.props,
+        height = _this$props5.height,
+        aspectRatio = _this$props5.aspectRatio;
+      var heightDefiningStyles;
+      if (height) {
+        heightDefiningStyles = {
+          height: "".concat(height, "px")
+        };
+      } else {
+        // paddingBottom css trick defines ratio of `iframe height (y) + header (32)` to `width (x)`,
+        // where is `aspectRatio` defines iframe aspectRatio alone
+        // So, visually:
+        //
+        //            x
+        //       ┌──────────┐
+        //       │  header  │ 32
+        //       ├──────────┤
+        //       │          │
+        //       │  iframe  │ y
+        //       │          │
+        //       └──────────┘
+        //
+        // aspectRatio = x / y
+        // paddingBottom = (y + 32) / x
+        // which can be achieved with css calc() as (1 / (x/y)) * 100)% + 32px
+        heightDefiningStyles = {
+          paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ").concat(_smartCard.embedHeaderHeight, "px)")
+        };
+      }
+      return (0, _react2.jsx)("span", {
+        "data-testid": 'resizable-embed-card-height-definer',
+        style: _objectSpread({
+          display: 'block',
+          /* Fixes extra padding problem in Firefox */
+          fontSize: 0,
+          lineHeight: 0
+        }, heightDefiningStyles)
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props6 = this.props,
+        layout = _this$props6.layout,
+        pctWidth = _this$props6.pctWidth,
+        containerWidth = _this$props6.containerWidth,
+        fullWidthMode = _this$props6.fullWidthMode,
+        children = _this$props6.children;
+      var initialWidth = this.calcPxWidth() - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+      var enable = {};
+      _ui.handleSides.forEach(function (side) {
+        var oppositeSide = side === 'left' ? 'right' : 'left';
+        enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
+        if (side === 'left' && _this2.insideInlineLike) {
+          enable[side] = false;
+        }
+      });
+
+      /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
+      return (0, _react2.jsx)("div", {
+        css: _styles.embedSpacingStyles,
+        "data-testid": "resizable-embed-card-spacing"
+      }, (0, _react2.jsx)("div", {
+        css: (0, _ui.wrapperStyle)({
+          layout: layout,
+          isResized: !!pctWidth,
+          containerWidth: containerWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
+          fullWidthMode: fullWidthMode
+        })
+      }, (0, _react2.jsx)(_ui.Resizer, (0, _extends2.default)({}, this.props, {
+        width: initialWidth // Starting or initial width of embed <iframe> itself.
+        ,
+        enable: enable,
+        calcNewSize: this.calcNewSize,
+        snapPoints: this.calcSnapPoints(),
+        scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
+        highlights: this.highlights,
+        innerPadding: _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide,
+        nodeType: "embed"
+      }), children, this.getHeightDefiningComponent())));
+      /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
+    }
+  }]);
+  return ResizableEmbedCard;
+}(_react.default.Component);
+exports.default = ResizableEmbedCard;
+(0, _defineProperty2.default)(ResizableEmbedCard, "defaultProps", {
+  aspectRatio: _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH / _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT
+});