@atlaskit/editor-plugin-card 0.1.0

package/dist/cjs/nodeviews/embedCard.js

@@ -0,0 +1,398 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmbedCardComponent = exports.EmbedCard = void 0;
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _steps = require("@atlaskit/adf-schema/steps");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("@atlaskit/editor-common/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _smartCard = require("@atlaskit/smart-card");
+var _actions = require("../pm-plugins/actions");
+var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
+var _genericCard = require("./genericCard");
+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; } }
+var CardInner = function CardInner(_ref) {
+  var pluginInjectionApi = _ref.pluginInjectionApi,
+    getPosSafely = _ref.getPosSafely,
+    getLineLength = _ref.getLineLength,
+    view = _ref.view,
+    smartCard = _ref.smartCard,
+    eventDispatcher = _ref.eventDispatcher,
+    updateSize = _ref.updateSize,
+    getPos = _ref.getPos,
+    aspectRatio = _ref.aspectRatio,
+    allowResizing = _ref.allowResizing,
+    hasPreview = _ref.hasPreview,
+    heightAlone = _ref.heightAlone,
+    cardProps = _ref.cardProps,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
+    widthState = _useSharedPluginState.widthState;
+  var widthStateLineLength = (widthState === null || widthState === void 0 ? void 0 : widthState.lineLength) || 0;
+  var widthStateWidth = (widthState === null || widthState === void 0 ? void 0 : widthState.width) || 0;
+  var pos = getPosSafely();
+  if (pos === undefined) {
+    return null;
+  }
+  var lineLength = getLineLength(view, pos, widthStateLineLength);
+  var containerWidth = (0, _utils.isRichMediaInsideOfBlockNode)(view, pos) ? lineLength : widthStateWidth;
+  if (!allowResizing || !hasPreview) {
+    // There are two ways `width` and `height` can be defined here:
+    // 1) Either as `heightAlone` as height value and no width
+    // 2) or as `1` for height and aspectRation (defined or a default one) as a width
+    // See above for how aspectRation is calculated.
+    var defaultAspectRatio = _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH / _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT;
+    var richMediaWrapperHeight = 1;
+    var richMediaWrapperWidth = aspectRatio || defaultAspectRatio;
+    if (heightAlone) {
+      richMediaWrapperHeight = heightAlone;
+      richMediaWrapperWidth = undefined;
+    }
+    return /*#__PURE__*/_react.default.createElement(_ui.MediaSingle, (0, _extends2.default)({}, cardProps, {
+      height: richMediaWrapperHeight,
+      width: richMediaWrapperWidth,
+      nodeType: "embedCard",
+      hasFallbackContainer: hasPreview,
+      lineLength: lineLength,
+      containerWidth: containerWidth
+    }), smartCard);
+  }
+  var displayGrid = function displayGrid(visible, gridType, highlight) {
+    var _pluginInjectionApi$d;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.grid.actions) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.displayGrid(view)({
+      visible: visible,
+      gridType: gridType,
+      highlight: highlight
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_ResizableEmbedCard.default, (0, _extends2.default)({}, cardProps, {
+    height: heightAlone,
+    aspectRatio: aspectRatio,
+    view: view,
+    getPos: getPos,
+    lineLength: lineLength,
+    gridSize: 12,
+    containerWidth: containerWidth,
+    displayGrid: displayGrid,
+    updateSize: updateSize,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent
+  }), smartCard);
+};
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(EmbedCardComponent, _React$PureComponent);
+  var _super = _createSuper(EmbedCardComponent);
+  function EmbedCardComponent() {
+    var _this;
+    (0, _classCallCheck2.default)(this, EmbedCardComponent);
+    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), "embedIframeRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      hasPreview: true
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPosSafely", function () {
+      var getPos = _this.props.getPos;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      try {
+        return getPos();
+      } catch (e) {
+        // Can blow up in rare cases, when node has been removed.
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResolve", function (data) {
+      var view = _this.props.view;
+      var title = data.title,
+        url = data.url,
+        aspectRatio = data.aspectRatio;
+      var _this$props$node$attr = _this.props.node.attrs,
+        originalHeight = _this$props$node$attr.originalHeight,
+        originalWidth = _this$props$node$attr.originalWidth;
+      if (aspectRatio && !originalHeight && !originalWidth) {
+        // Assumption here is if ADF already have both height and width set,
+        // we will going to use that later on in this class as aspectRatio
+        // Most likely we dealing with an embed that received aspectRatio via onResolve previously
+        // and now this information already stored in ADF.
+        _this.setState({
+          initialAspectRatio: aspectRatio
+        });
+        _this.saveOriginalDimensionsAttributes(_editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT, _editorSharedStyles.DEFAULT_EMBED_CARD_HEIGHT * aspectRatio);
+      }
+
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      (0, _rafSchd.default)(function () {
+        var pos = _this.getPosSafely();
+        if (pos === undefined) {
+          return;
+        }
+        return view.dispatch((0, _actions.registerCard)({
+          title: title,
+          url: url,
+          pos: pos
+        })(view.state.tr));
+      })();
+      try {
+        var cardContext = _this.context.contextAdapter ? _this.context.contextAdapter.card : undefined;
+        var hasPreview = cardContext && cardContext.value.extractors.getPreview(url, _this.props.platform);
+        if (!hasPreview) {
+          _this.setState({
+            hasPreview: false
+          });
+        }
+      } catch (e) {}
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSize", function (pctWidth, layout) {
+      var _this$props$view = _this.props.view,
+        state = _this$props$view.state,
+        dispatch = _this$props$view.dispatch;
+      var pos = _this.getPosSafely();
+      if (pos === undefined) {
+        return;
+      }
+      var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, _this.props.node.attrs), {}, {
+        width: pctWidth,
+        layout: layout
+      }));
+      tr.setMeta('scrollIntoView', false);
+      dispatch(tr);
+      return true;
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getLineLength", function (view, pos, originalLineLength) {
+      if (typeof pos === 'number' && (0, _utils.isRichMediaInsideOfBlockNode)(view, pos)) {
+        var $pos = view.state.doc.resolve(pos);
+        var domNode = view.nodeDOM($pos.pos);
+        if ($pos.nodeAfter && _utils.floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
+          return domNode.parentElement.offsetWidth;
+        }
+        if (domNode instanceof HTMLElement) {
+          return domNode.offsetWidth;
+        }
+      }
+      return originalLineLength;
+    });
+    /**
+     * Even though render is capable of listening and reacting to iframely wrapper iframe sent `resize` events
+     * it's good idea to store latest actual height in ADF, so that when renderer (well, editor as well) is loading
+     * we will show embed window of appropriate size and avoid unnecessary content jumping.
+     */
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveOriginalDimensionsAttributes", function (height, width) {
+      var view = _this.props.view;
+
+      // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+      var fakeTableResizePluginKey = {
+        key: 'tableFlexiColumnResizing$',
+        getState: function getState(state) {
+          // eslint-disable-next-line
+          return state['tableFlexiColumnResizing$'];
+        }
+      };
+      var fakeTableResizeState = fakeTableResizePluginKey.getState(view.state);
+
+      // We are not updating ADF when this function fired while table is resizing.
+      // Changing ADF in the middle of resize will break table resize plugin logic
+      // (tables will be considered different at the end of the drag and cell size won't be stored)
+      // But this is not a big problem, editor user will be seeing latest height anyway (via updated state)
+      // And even if page to be saved with slightly outdated height, renderer is capable of reading latest height value
+      // when embed loads, and so it won't be a problem.
+      if (fakeTableResizeState !== null && fakeTableResizeState !== void 0 && fakeTableResizeState.dragging) {
+        return;
+      }
+      (0, _rafSchd.default)(function () {
+        var pos = _this.getPosSafely();
+        if (pos === undefined) {
+          return;
+        }
+        view.dispatch(view.state.tr.step(new _steps.SetAttrsStep(pos, {
+          originalHeight: height,
+          originalWidth: width
+        })).setMeta('addToHistory', false));
+      })();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onHeightUpdate", function (height) {
+      _this.setState({
+        liveHeight: height
+      });
+      _this.saveOriginalDimensionsAttributes(height, undefined);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (_ref2) {
+      var err = _ref2.err;
+      if (err) {
+        throw err;
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(EmbedCardComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      var view = this.props.view;
+      var scrollContainer = (0, _ui.findOverflowScrollParent)(view.dom);
+      this.scrollContainer = scrollContainer || undefined;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        node = _this$props.node,
+        cardContext = _this$props.cardContext,
+        platform = _this$props.platform,
+        allowResizing = _this$props.allowResizing,
+        fullWidthMode = _this$props.fullWidthMode,
+        view = _this$props.view,
+        dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent,
+        getPos = _this$props.getPos,
+        pluginInjectionApi = _this$props.pluginInjectionApi;
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        pctWidth = _node$attrs.width,
+        layout = _node$attrs.layout,
+        originalHeight = _node$attrs.originalHeight,
+        originalWidth = _node$attrs.originalWidth;
+      var _this$state = this.state,
+        hasPreview = _this$state.hasPreview,
+        liveHeight = _this$state.liveHeight,
+        initialAspectRatio = _this$state.initialAspectRatio;
+
+      // We don't want to use `originalHeight` when `originalWidth` also present,
+      // since `heightAlone` is defined only when just height is available.
+      var heightAlone = liveHeight !== null && liveHeight !== void 0 ? liveHeight : !originalWidth && originalHeight || undefined;
+      var aspectRatio = !heightAlone && (
+      // No need getting aspectRatio if heightAlone defined already
+      initialAspectRatio ||
+      // If we have initialAspectRatio (coming from iframely) we should go with that
+      originalHeight && originalWidth && originalWidth / originalHeight) ||
+      // If ADF contains both width and height we get ratio from that
+      undefined;
+      var cardProps = {
+        layout: layout,
+        pctWidth: pctWidth,
+        fullWidthMode: fullWidthMode
+      };
+      var smartCard = /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+        key: url,
+        url: url,
+        appearance: "embed",
+        onClick: this.onClick,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        showActions: platform === 'web',
+        isFrameVisible: true,
+        inheritDimensions: true,
+        platform: platform,
+        container: this.scrollContainer,
+        embedIframeRef: this.embedIframeRef
+      });
+      var cardInner = /*#__PURE__*/_react.default.createElement(_smartCard.EmbedResizeMessageListener, {
+        embedIframeRef: this.embedIframeRef,
+        onHeightUpdate: this.onHeightUpdate
+      }, /*#__PURE__*/_react.default.createElement(CardInner, {
+        pluginInjectionApi: pluginInjectionApi,
+        smartCard: smartCard,
+        hasPreview: hasPreview,
+        getPosSafely: this.getPosSafely,
+        view: view,
+        getLineLength: this.getLineLength,
+        eventDispatcher: this.props.eventDispatcher,
+        updateSize: this.updateSize,
+        getPos: getPos,
+        aspectRatio: aspectRatio,
+        allowResizing: allowResizing,
+        heightAlone: heightAlone,
+        cardProps: cardProps,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      }));
+
+      // [WS-2307]: we only render card wrapped into a Provider when the value is ready
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, cardInner) : null);
+    }
+  }]);
+  return EmbedCardComponent;
+}(_react.default.PureComponent);
+exports.EmbedCardComponent = EmbedCardComponent;
+(0, _defineProperty2.default)(EmbedCardComponent, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+});
+var WrappedBlockCard = (0, _genericCard.Card)(EmbedCardComponent, _ui.UnsupportedBlock);
+var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(EmbedCard, _ReactNodeView);
+  var _super2 = _createSuper(EmbedCard);
+  function EmbedCard() {
+    (0, _classCallCheck2.default)(this, EmbedCard);
+    return _super2.apply(this, arguments);
+  }
+  (0, _createClass2.default)(EmbedCard, [{
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this.node.attrs !== nextNode.attrs) {
+        return true;
+      }
+      return (0, _get2.default)((0, _getPrototypeOf2.default)(EmbedCard.prototype), "viewShouldUpdate", this).call(this, nextNode);
+    }
+  }, {
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      if (this.reactComponentProps.platform !== 'mobile') {
+        // workaround Chrome bug in https://product-fabric.atlassian.net/browse/ED-5379
+        // see also: https://github.com/ProseMirror/prosemirror/issues/884
+        domRef.contentEditable = 'true';
+        domRef.setAttribute('spellcheck', 'false');
+      }
+      return domRef;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$reactComponentP = this.reactComponentProps,
+        eventDispatcher = _this$reactComponentP.eventDispatcher,
+        allowResizing = _this$reactComponentP.allowResizing,
+        platform = _this$reactComponentP.platform,
+        fullWidthMode = _this$reactComponentP.fullWidthMode,
+        dispatchAnalyticsEvent = _this$reactComponentP.dispatchAnalyticsEvent,
+        pluginInjectionApi = _this$reactComponentP.pluginInjectionApi;
+      return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
+        node: this.node,
+        view: this.view,
+        eventDispatcher: eventDispatcher,
+        getPos: this.getPos,
+        allowResizing: allowResizing,
+        platform: platform,
+        fullWidthMode: fullWidthMode,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+        pluginInjectionApi: pluginInjectionApi
+      });
+    }
+  }]);
+  return EmbedCard;
+}(_reactNodeView.default);
+exports.EmbedCard = EmbedCard;

package/dist/cjs/nodeviews/genericCard.js

@@ -0,0 +1,118 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = Card;
+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 _propTypes = _interopRequireDefault(require("prop-types"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _utils = require("@atlaskit/editor-common/utils");
+var _doc = require("../pm-plugins/doc");
+var _state = require("../pm-plugins/util/state");
+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; } }
+function Card(SmartCardComponent, UnsupportedComponent) {
+  var _class;
+  return _class = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2.default)(_class, _React$Component);
+    var _super = _createSuper(_class);
+    function _class() {
+      var _this;
+      (0, _classCallCheck2.default)(this, _class);
+      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", {
+        isError: false
+      });
+      return _this;
+    }
+    (0, _createClass2.default)(_class, [{
+      key: "render",
+      value: function render() {
+        var _getPluginState;
+        var _titleUrlPairFromNode = (0, _utils2.titleUrlPairFromNode)(this.props.node),
+          url = _titleUrlPairFromNode.url;
+        if (url && !(0, _adfSchema.isSafeUrl)(url)) {
+          return /*#__PURE__*/_react.default.createElement(UnsupportedComponent, null);
+        }
+        if (this.state.isError) {
+          if (url) {
+            return /*#__PURE__*/_react.default.createElement("a", {
+              href: url,
+              onClick: function onClick(e) {
+                e.preventDefault();
+              }
+            }, url);
+          } else {
+            return /*#__PURE__*/_react.default.createElement(UnsupportedComponent, null);
+          }
+        }
+        var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+        var editorAppearance = (_getPluginState = (0, _state.getPluginState)(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+        var analyticsEditorAppearance = (0, _utils.getAnalyticsEditorAppearance)(editorAppearance);
+        return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+          data: {
+            attributes: {
+              location: analyticsEditorAppearance
+            },
+            // Below is added for the future implementation of Linking Platform namespaced analytics context
+            location: analyticsEditorAppearance
+          }
+        }, /*#__PURE__*/_react.default.createElement(SmartCardComponent, (0, _extends2.default)({
+          key: url,
+          cardContext: cardContext
+        }, this.props)));
+      }
+    }, {
+      key: "componentDidCatch",
+      value: function componentDidCatch(error) {
+        var maybeAPIError = error;
+        // NB: errors received in this component are propagated by the `@atlaskit/smart-card` component.
+        // Depending on the kind of error, the expectation for this component is to either:
+        // (1) Render a blue link whilst retaining `inlineCard` in the ADF (non-fatal errs);
+        // (2) Render a blue link whilst downgrading to `link` in the ADF (fatal errs).
+
+        if (maybeAPIError.kind && maybeAPIError.kind === 'fatal') {
+          var _pluginInjectionApi$d;
+          this.setState({
+            isError: true
+          });
+          var _this$props = this.props,
+            view = _this$props.view,
+            node = _this$props.node,
+            getPos = _this$props.getPos,
+            pluginInjectionApi = _this$props.pluginInjectionApi;
+          var _titleUrlPairFromNode2 = (0, _utils2.titleUrlPairFromNode)(node),
+            url = _titleUrlPairFromNode2.url;
+          if (!getPos || typeof getPos === 'boolean') {
+            return;
+          }
+          (0, _doc.changeSelectedCardToLinkFallback)(undefined, url, true, node, getPos(), pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.dependencies.analytics) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.actions)(view.state, view.dispatch);
+          return null;
+        } else {
+          // Otherwise, render a blue link as fallback (above in render()).
+          this.setState({
+            isError: true
+          });
+        }
+      }
+    }]);
+    return _class;
+  }(_react.default.Component), (0, _defineProperty2.default)(_class, "contextTypes", {
+    contextAdapter: _propTypes.default.object
+  }), _class;
+}

package/dist/cjs/nodeviews/inlineCard.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardComponent = void 0;
+exports.InlineCardNodeView = InlineCardNodeView;
+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 _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _smartCard = require("@atlaskit/smart-card");
+var _actions = require("../pm-plugins/actions");
+var _genericCard = require("./genericCard");
+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 InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
+  (0, _inherits2.default)(InlineCardComponent, _React$PureComponent);
+  var _super = _createSuper(InlineCardComponent);
+  function InlineCardComponent() {
+    var _this;
+    (0, _classCallCheck2.default)(this, InlineCardComponent);
+    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), "onClick", function () {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResolve", function (data) {
+      var _this$props = _this.props,
+        getPos = _this$props.getPos,
+        view = _this$props.view;
+      if (!getPos || typeof getPos === 'boolean') {
+        return;
+      }
+      var title = data.title,
+        url = data.url;
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      (0, _rafSchd.default)(function () {
+        // prosemirror-bump-fix
+        var pos = getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        view.dispatch((0, _actions.registerCard)({
+          title: title,
+          url: url,
+          pos: pos
+        })(view.state.tr));
+      })();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (data) {
+      var url = data.url,
+        err = data.err;
+      if (err) {
+        throw err;
+      }
+      _this.onResolve({
+        url: url
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(InlineCardComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      var view = this.props.view;
+      var scrollContainer = (0, _ui.findOverflowScrollParent)(view.dom);
+      this.scrollContainer = scrollContainer || undefined;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        node = _this$props2.node,
+        cardContext = _this$props2.cardContext,
+        showServerActions = _this$props2.showServerActions,
+        useAlternativePreloader = _this$props2.useAlternativePreloader;
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        data = _node$attrs.data;
+      var card = /*#__PURE__*/_react.default.createElement("span", {
+        className: "card"
+      }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+        key: url,
+        url: url,
+        data: data,
+        appearance: "inline",
+        onClick: this.onClick,
+        container: this.scrollContainer,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+        showServerActions: showServerActions
+      }));
+      // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+      // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+      return cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, card) : data ? card : null;
+    }
+  }]);
+  return InlineCardComponent;
+}(_react.default.PureComponent);
+exports.InlineCardComponent = InlineCardComponent;
+(0, _defineProperty2.default)(InlineCardComponent, "contextTypes", {
+  contextAdapter: _propTypes.default.object
+});
+var WrappedInlineCard = (0, _genericCard.Card)(InlineCardComponent, _ui.UnsupportedInline);
+function InlineCardNodeView(props) {
+  var useAlternativePreloader = props.useAlternativePreloader,
+    node = props.node,
+    view = props.view,
+    getPos = props.getPos,
+    showServerActions = props.showServerActions;
+  return /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
+    node: node,
+    view: view,
+    getPos: getPos,
+    showServerActions: showServerActions,
+    useAlternativePreloader: useAlternativePreloader
+  });
+}