@atlaskit/editor-plugin-card 0.1.0

package/dist/esm/nodeviews/datasource.js

@@ -0,0 +1,165 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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 */
+import React from 'react';
+import { css, jsx } from '@emotion/react';
+import PropTypes from 'prop-types';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
+import { DatasourceTableView } from '@atlaskit/link-datasource';
+var containerStyles = css({
+  height: '500px',
+  overflow: 'auto'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DatasourceComponent, _React$PureComponent);
+  var _super = _createSuper(DatasourceComponent);
+  function DatasourceComponent(props) {
+    var _this;
+    _classCallCheck(this, DatasourceComponent);
+    _this = _super.call(this, props);
+    _defineProperty(_assertThisInitialized(_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.
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "getDatasource", function () {
+      return _this.props.node.attrs.datasource;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getTableView", function (datasource) {
+      var views = (datasource || _this.getDatasource()).views;
+      return views.find(function (view) {
+        return view.type === 'table';
+      }) || undefined;
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleColumnChange", function (columnKeys) {
+      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 attrs = _this.props.node.attrs;
+      var views = [{
+        type: 'table',
+        properties: {
+          columns: columnKeys.map(function (key) {
+            return {
+              key: key
+            };
+          })
+        }
+      }];
+      var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, attrs), {}, {
+        datasource: _objectSpread(_objectSpread({}, attrs.datasource), {}, {
+          views: views
+        })
+      }));
+      tr.setMeta('scrollIntoView', false);
+      dispatch(tr);
+    });
+    return _this;
+  }
+  _createClass(DatasourceComponent, [{
+    key: "render",
+    value: function render() {
+      var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+      var datasource = this.getDatasource();
+      var tableView = this.getTableView();
+      if (tableView) {
+        var _tableView$properties;
+        var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref) {
+          var key = _ref.key;
+          return key;
+        });
+
+        // [WS-2307]: we only render card wrapped into a Provider when the value is ready
+        if (cardContext && cardContext.value) {
+          return jsx(cardContext.Provider, {
+            value: cardContext.value
+          }, jsx(DatasourceTableView, {
+            datasourceId: datasource.id,
+            parameters: datasource.parameters,
+            visibleColumnKeys: visibleColumnKeys,
+            onVisibleColumnKeysChange: this.handleColumnChange
+          }));
+        }
+      }
+      return null;
+    }
+  }]);
+  return DatasourceComponent;
+}(React.PureComponent);
+_defineProperty(DatasourceComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(Datasource, _ReactNodeView);
+  var _super2 = _createSuper(Datasource);
+  function Datasource(props) {
+    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
+    var _this2;
+    _classCallCheck(this, Datasource);
+    _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    _defineProperty(_assertThisInitialized(_this2), "calcTableWidth", function (layout, containerWidth) {
+      if (layout === 'center') {
+        return 'inherit';
+      }
+      return calcBreakoutWidthPx(layout, containerWidth);
+    });
+    var sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
+    _this2.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref2) {
+      var nextSharedState = _ref2.nextSharedState;
+      if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
+        _this2.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
+        _this2.update(_this2.node, []); // required to update the width when page is resized.
+      }
+    });
+    return _this2;
+  }
+  _createClass(Datasource, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      domRef.classList.add(SmartCardSharedCssClassName.DATASOURCE_CONTAINER);
+      return domRef;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var attrs = this.node.attrs;
+      var calculatedWidth = this.calcTableWidth(attrs.layout, this.tableWidth);
+      return jsx("div", {
+        className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
+        css: containerStyles,
+        style: {
+          minWidth: calculatedWidth
+        }
+      }, jsx(DatasourceComponent, {
+        node: this.node,
+        view: this.view,
+        getPos: this.getPos
+      }));
+    }
+  }]);
+  return Datasource;
+}(ReactNodeView);

package/dist/esm/nodeviews/embedCard.js

@@ -0,0 +1,389 @@
+import _get from "@babel/runtime/helpers/get";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import PropTypes from 'prop-types';
+import rafSchedule from 'raf-schd';
+import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
+import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+import ResizableEmbedCard from '../ui/ResizableEmbedCard';
+import { Card } from './genericCard';
+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 = 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 = 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 = DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT;
+    var richMediaWrapperHeight = 1;
+    var richMediaWrapperWidth = aspectRatio || defaultAspectRatio;
+    if (heightAlone) {
+      richMediaWrapperHeight = heightAlone;
+      richMediaWrapperWidth = undefined;
+    }
+    return /*#__PURE__*/React.createElement(RichMediaWrapper, _extends({}, 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.createElement(ResizableEmbedCard, _extends({}, 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
+export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(EmbedCardComponent, _React$PureComponent);
+  var _super = _createSuper(EmbedCardComponent);
+  function EmbedCardComponent() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_assertThisInitialized(_this), "embedIframeRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      hasPreview: true
+    });
+    _defineProperty(_assertThisInitialized(_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.
+      }
+    });
+    _defineProperty(_assertThisInitialized(_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(DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_HEIGHT * aspectRatio);
+      }
+
+      // don't dispatch immediately since we might be in the middle of
+      // rendering a nodeview
+      rafSchedule(function () {
+        var pos = _this.getPosSafely();
+        if (pos === undefined) {
+          return;
+        }
+        return view.dispatch(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) {}
+    });
+    _defineProperty(_assertThisInitialized(_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;
+    });
+    _defineProperty(_assertThisInitialized(_this), "getLineLength", function (view, pos, originalLineLength) {
+      if (typeof pos === 'number' && isRichMediaInsideOfBlockNode(view, pos)) {
+        var $pos = view.state.doc.resolve(pos);
+        var domNode = view.nodeDOM($pos.pos);
+        if ($pos.nodeAfter && 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.
+     */
+    _defineProperty(_assertThisInitialized(_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;
+      }
+      rafSchedule(function () {
+        var pos = _this.getPosSafely();
+        if (pos === undefined) {
+          return;
+        }
+        view.dispatch(view.state.tr.step(new SetAttrsStep(pos, {
+          originalHeight: height,
+          originalWidth: width
+        })).setMeta('addToHistory', false));
+      })();
+    });
+    _defineProperty(_assertThisInitialized(_this), "onHeightUpdate", function (height) {
+      _this.setState({
+        liveHeight: height
+      });
+      _this.saveOriginalDimensionsAttributes(height, undefined);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onError", function (_ref2) {
+      var err = _ref2.err;
+      if (err) {
+        throw err;
+      }
+    });
+    return _this;
+  }
+  _createClass(EmbedCardComponent, [{
+    key: "UNSAFE_componentWillMount",
+    value: function UNSAFE_componentWillMount() {
+      var view = this.props.view;
+      var scrollContainer = 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.createElement(SmartCard, {
+        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.createElement(EmbedResizeMessageListener, {
+        embedIframeRef: this.embedIframeRef,
+        onHeightUpdate: this.onHeightUpdate
+      }, /*#__PURE__*/React.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.createElement(React.Fragment, null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+        value: cardContext.value
+      }, cardInner) : null);
+    }
+  }]);
+  return EmbedCardComponent;
+}(React.PureComponent);
+_defineProperty(EmbedCardComponent, "contextTypes", {
+  contextAdapter: PropTypes.object
+});
+var WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
+export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(EmbedCard, _ReactNodeView);
+  var _super2 = _createSuper(EmbedCard);
+  function EmbedCard() {
+    _classCallCheck(this, EmbedCard);
+    return _super2.apply(this, arguments);
+  }
+  _createClass(EmbedCard, [{
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this.node.attrs !== nextNode.attrs) {
+        return true;
+      }
+      return _get(_getPrototypeOf(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.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);

package/dist/esm/nodeviews/genericCard.js

@@ -0,0 +1,111 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
+import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
+import { getPluginState } from '../pm-plugins/util/state';
+import { titleUrlPairFromNode } from '../utils';
+export function Card(SmartCardComponent, UnsupportedComponent) {
+  var _class;
+  return _class = /*#__PURE__*/function (_React$Component) {
+    _inherits(_class, _React$Component);
+    var _super = _createSuper(_class);
+    function _class() {
+      var _this;
+      _classCallCheck(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));
+      _defineProperty(_assertThisInitialized(_this), "state", {
+        isError: false
+      });
+      return _this;
+    }
+    _createClass(_class, [{
+      key: "render",
+      value: function render() {
+        var _getPluginState;
+        var _titleUrlPairFromNode = titleUrlPairFromNode(this.props.node),
+          url = _titleUrlPairFromNode.url;
+        if (url && !isSafeUrl(url)) {
+          return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
+        }
+        if (this.state.isError) {
+          if (url) {
+            return /*#__PURE__*/React.createElement("a", {
+              href: url,
+              onClick: function onClick(e) {
+                e.preventDefault();
+              }
+            }, url);
+          } else {
+            return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
+          }
+        }
+        var cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
+        var editorAppearance = (_getPluginState = getPluginState(this.props.view.state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.editorAppearance;
+        var analyticsEditorAppearance = getAnalyticsEditorAppearance(editorAppearance);
+        return /*#__PURE__*/React.createElement(AnalyticsContext, {
+          data: {
+            attributes: {
+              location: analyticsEditorAppearance
+            },
+            // Below is added for the future implementation of Linking Platform namespaced analytics context
+            location: analyticsEditorAppearance
+          }
+        }, /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
+          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 = titleUrlPairFromNode(node),
+            url = _titleUrlPairFromNode2.url;
+          if (!getPos || typeof getPos === 'boolean') {
+            return;
+          }
+          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.Component), _defineProperty(_class, "contextTypes", {
+    contextAdapter: PropTypes.object
+  }), _class;
+}