@atlaskit/editor-plugin-card 7.3.1 → 7.4.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-card
 
+## 7.4.1
+
+### Patch Changes
+
+- [`598cea2432fa9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/598cea2432fa9) -
+  [ux] UI and behaviour updates of the HoverLinkOverlay for the Preview Panels.
+- Updated dependencies
+
+## 7.4.0
+
+### Minor Changes
+
+- [`bd14b2c6330ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd14b2c6330ba) -
+  [https://product-fabric.atlassian.net/browse/ED-28981](ED-28981) - use `CardSSR` component for
+  smart card SSR
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.3.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -19,6 +19,8 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _smartCard = require("@atlaskit/smart-card");
+var _ssr = require("@atlaskit/smart-card/ssr");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _datasource = require("../nodeviews/datasource");
 var _actions = require("../pm-plugins/actions");
 var _utils2 = require("../pm-plugins/utils");
@@ -109,11 +111,23 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
         cardContext = _this$props2.cardContext,
         actionOptions = _this$props2.actionOptions,
         onClick = _this$props2.onClick,
-        CompetitorPrompt = _this$props2.CompetitorPrompt;
+        CompetitorPrompt = _this$props2.CompetitorPrompt,
+        isPageSSRed = _this$props2.isPageSSRed;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         data = _node$attrs.data;
-      var cardInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+      var cardInner = isPageSSRed && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
+        key: url,
+        url: url !== null && url !== void 0 ? url : data.url,
+        container: this.scrollContainer,
+        appearance: "block",
+        onClick: onClick,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        platform: 'web',
+        actionOptions: actionOptions,
+        CompetitorPrompt: CompetitorPrompt
+      }), this.gapCursorSpan()) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
         key: url,
         url: url !== null && url !== void 0 ? url : data.url,
         container: this.scrollContainer,
@@ -191,7 +205,8 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         actionOptions = _this$reactComponentP3.actionOptions,
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
-        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
+        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt,
+        isPageSSRed = _this$reactComponentP3.isPageSSRed;
       return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -200,7 +215,8 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         id: this.id,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        isPageSSRed: isPageSSRed
       });
     }
   }, {
@@ -219,7 +235,8 @@ var blockCardNodeView = exports.blockCardNodeView = function blockCardNodeView(_
     onClickCallback = _ref3.onClickCallback,
     allowDatasource = _ref3.allowDatasource,
     inlineCardViewProducer = _ref3.inlineCardViewProducer,
-    CompetitorPrompt = _ref3.CompetitorPrompt;
+    CompetitorPrompt = _ref3.CompetitorPrompt,
+    isPageSSRed = _ref3.isPageSSRed;
   return function (node, view, getPos, decorations) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -227,7 +244,8 @@ var blockCardNodeView = exports.blockCardNodeView = function blockCardNodeView(_
       actionOptions: actionOptions,
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     };
     var isDatasource = (0, _utils2.isDatasourceNode)(node);
     if (isDatasource) {

package/dist/cjs/nodeviews/embedCard.js

@@ -25,6 +25,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _smartCard = require("@atlaskit/smart-card");
+var _ssr = require("@atlaskit/smart-card/ssr");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../pm-plugins/actions");
 var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
@@ -311,7 +312,8 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         pluginInjectionApi = _this$props.pluginInjectionApi,
         actionOptions = _this$props.actionOptions,
         onClick = _this$props.onClick,
-        CompetitorPrompt = _this$props.CompetitorPrompt;
+        CompetitorPrompt = _this$props.CompetitorPrompt,
+        isPageSSRed = _this$props.isPageSSRed;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         pctWidth = _node$attrs.width,
@@ -338,7 +340,21 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         pctWidth: pctWidth,
         fullWidthMode: fullWidthMode
       };
-      var smartCard = /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+      var smartCard = isPageSSRed && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
+        key: url,
+        url: url,
+        appearance: "embed",
+        onClick: onClick,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        frameStyle: "show",
+        inheritDimensions: true,
+        platform: 'web',
+        container: this.scrollContainer,
+        embedIframeRef: this.embedIframeRef,
+        actionOptions: actionOptions,
+        CompetitorPrompt: CompetitorPrompt
+      }) : /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
         key: url,
         url: url,
         appearance: "embed",
@@ -395,7 +411,8 @@ var EmbedOrBlockCardComponent = exports.EmbedOrBlockCardComponent = function Emb
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   }) : /*#__PURE__*/_react.default.createElement(EmbedCardComponent, {
     id: props.id,
     node: props.node,
@@ -413,7 +430,8 @@ var EmbedOrBlockCardComponent = exports.EmbedOrBlockCardComponent = function Emb
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   });
 };
 var WrappedEmbedCardWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
@@ -469,7 +487,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         dispatchAnalyticsEvent = _this$reactComponentP3.dispatchAnalyticsEvent,
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
-        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
+        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt,
+        isPageSSRed = _this$reactComponentP3.isPageSSRed;
       return /*#__PURE__*/_react.default.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
@@ -481,7 +500,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         id: this.id,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        isPageSSRed: isPageSSRed
       });
     }
   }, {
@@ -500,7 +520,8 @@ var embedCardNodeView = exports.embedCardNodeView = function embedCardNodeView(_
     pluginInjectionApi = _ref4.pluginInjectionApi,
     actionOptions = _ref4.actionOptions,
     onClickCallback = _ref4.onClickCallback,
-    CompetitorPrompt = _ref4.CompetitorPrompt;
+    CompetitorPrompt = _ref4.CompetitorPrompt,
+    isPageSSRed = _ref4.isPageSSRed;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher,
@@ -513,7 +534,8 @@ var embedCardNodeView = exports.embedCardNodeView = function embedCardNodeView(_
       pluginInjectionApi: pluginInjectionApi,
       actionOptions: actionOptions,
       onClickCallback: onClickCallback,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     };
     return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
   };

package/dist/cjs/nodeviews/inlineCard.js

@@ -18,7 +18,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _utils = require("../pm-plugins/utils");
@@ -111,8 +110,7 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
     exposure: true
   }) ? handleOnClick : propsOnClick;
   var card = (0, _react.useMemo)(function () {
-    // Should be removed when the platform_editor_smart_card_otp experiment is rolled out
-    if (isPageSSRed && url && !(0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+    if (isPageSSRed && url) {
       return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
         key: url,
         url: url,

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -17,6 +17,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _AwarenessWrapper = require("../ui/AwarenessWrapper");
+var _PreviewInvoker = require("../ui/preview/PreviewInvoker");
 var _inlineCard = require("./inlineCard");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var selector = function selector(states) {
@@ -94,6 +95,7 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
     mode = _useSharedState.mode,
     selection = _useSharedState.selection;
   var floatingToolbarNode = selection instanceof _state.NodeSelection && selection.node;
+  // This is a prop to show Hover card, Hover card should be shown only in Live View and Classic Renderer (note when only Editor controls enabled we don't show in Live view)
   var showHoverPreview = floatingToolbarNode !== node && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
   var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     var _pluginInjectionApi$a;
@@ -114,10 +116,9 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       cardContext: cardContext,
       isHovered: isHovered,
       isPageSSRed: isPageSSRed,
-      pluginInjectionApi: pluginInjectionApi,
-      showHoverPreview: showHoverPreview
+      pluginInjectionApi: pluginInjectionApi
     }));
-  }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi, showHoverPreview]);
+  }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi]);
   var innerCardOriginal = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
       node: node,
@@ -131,19 +132,20 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       isHovered: isHovered,
       isPageSSRed: isPageSSRed,
       pluginInjectionApi: pluginInjectionApi,
-      showHoverPreview: showHoverPreview
+      showHoverPreview: false
     });
-  }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
+  }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
   var shouldShowOpenButtonOverlay = (0, _react.useMemo)(function () {
     var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
     return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking'));
   }, [mode, editorAppearance]);
   var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
-  if ((0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
+  if (mode === 'view' && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
     var _cardContext$value;
-    var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[node.attrs.url];
+    var url = node.attrs.url;
+    var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[url];
     if (cardState) {
-      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
       var ari = (0, _smartCard.getObjectAri)(cardState.details);
       var name = (0, _smartCard.getObjectName)(cardState.details);
       var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState.details);
@@ -151,42 +153,73 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
         ari: ari
       }));
       var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
-      var handleOpenGlancePanelClick = function handleOpenGlancePanelClick(event) {
-        if (openPreviewPanel && isPanelAvailable) {
-          // Prevent anchor default behaviour(click to open the anchor link)
-          // When glance panel is available, let openPreviewPanel handle it
-          event.preventDefault();
-          openPreviewPanel({
-            url: node.attrs.url,
-            ari: ari,
-            name: name || '',
-            iconUrl: iconUrl
+      var isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
+      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_PreviewInvoker.PreviewInvoker, {
+        url: url,
+        appearance: "inline"
+      }, function (_ref2) {
+        var canPreview = _ref2.canPreview,
+          invokePreview = _ref2.invokePreview;
+        var isPreviewModalAvailable = Boolean(canPreview && invokePreview);
+        // In view mode we show HoverLinkOverlay only with if preview mode or panel is available
+        // otherwise a use can click on smartlink itself to open the link in a new tab.
+        var isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
+        if (isPreviewAvailable) {
+          var _pluginInjectionApi$a2;
+          return /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
+            isVisible: isResolvedViewRendered,
+            url: url,
+            compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
+            editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
+            view: view,
+            showPanelButton: isPreviewAvailable,
+            showPanelButtonIcon: isPreviewAvailable && isPreviewPanelAvailable ? 'panel' : 'modal',
+            onClick: function onClick(event) {
+              if (isPreviewPanelAvailable) {
+                event.preventDefault();
+                openPreviewPanel === null || openPreviewPanel === void 0 || openPreviewPanel({
+                  url: url,
+                  ari: ari || '',
+                  name: name || '',
+                  iconUrl: iconUrl
+                });
+              } else if (isPreviewModalAvailable) {
+                event.preventDefault();
+                invokePreview === null || invokePreview === void 0 || invokePreview();
+              }
+            }
+          }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
+            node: node,
+            view: view,
+            getPos: getPos,
+            useAlternativePreloader: useAlternativePreloader,
+            actionOptions: actionOptions,
+            onResolve: onResolve,
+            onClick: onClick,
+            cardContext: cardContext,
+            isHovered: isHovered,
+            isPageSSRed: isPageSSRed,
+            pluginInjectionApi: pluginInjectionApi,
+            showHoverPreview: mode === 'view' && showHoverPreview
+          }));
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
+            node: node,
+            view: view,
+            getPos: getPos,
+            useAlternativePreloader: useAlternativePreloader,
+            actionOptions: actionOptions,
+            onResolve: onResolve,
+            onClick: onClick,
+            cardContext: cardContext,
+            isHovered: isHovered,
+            isPageSSRed: isPageSSRed,
+            pluginInjectionApi: pluginInjectionApi,
+            showHoverPreview: mode === 'view' && showHoverPreview
           });
         }
-      };
-      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
-        isVisible: isResolvedViewRendered,
-        url: node.attrs.url,
-        compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
-        editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
-        view: view,
-        showPanelButton: !!isPanelAvailable,
-        onClick: handleOpenGlancePanelClick
-      }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
-        node: node,
-        view: view,
-        getPos: getPos,
-        useAlternativePreloader: useAlternativePreloader,
-        actionOptions: actionOptions,
-        onResolve: onResolve,
-        onClick: onClick,
-        cardContext: cardContext,
-        isHovered: isHovered,
-        isPageSSRed: isPageSSRed,
-        pluginInjectionApi: pluginInjectionApi,
-        showHoverPreview: showHoverPreview
-      }));
-      innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
+      });
+      innerCard = innerCardWithPanelButtonOverlay;
     }
   }
   var getPosFunction = typeof getPos === 'function' ? getPos : undefined;

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

@@ -33,7 +33,7 @@ var loaderWrapperStyles = (0, _react2.css)({
   }
 });
 var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref) {
-  var _cardContext$value, _cardContext$value3;
+  var _cardContext$value2;
   var cardContext = _ref.cardContext,
     children = _ref.children,
     getPos = _ref.getPos,
@@ -85,10 +85,8 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
-  var isPreviewPanelAvailable = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
-  var shouldShowGlancePanel = (isPreviewPanelAvailable || false) && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
   var cardWithOverlay = (0, _react.useMemo)(function () {
-    if (shouldShowLinkOverlay && !shouldShowGlancePanel && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if (shouldShowLinkOverlay && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
       return (0, _react2.jsx)(_InlineCardOverlay.default, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -102,11 +100,11 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var isInline = appearance === 'inline';
   var placeholderUniqId = linkPosition || 0;
   return (0, _react.useMemo)(function () {
-    var _cardContext$value2;
+    var _cardContext$value;
     return (0, _react2.jsx)("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -117,7 +115,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       "data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
     }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: {
-        attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
+        attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
     }, (0, _react2.jsx)(_Pulse.DiscoveryPulse, {
       localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -127,5 +125,5 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       testId: "link-discovery-pulse",
       isInline: isInline
     }, cardWithOverlay)));
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
 };

package/dist/cjs/ui/preview/PreviewInvoker.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewInvoker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _hooks = require("@atlaskit/smart-card/hooks");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var PreviewInvoker = exports.PreviewInvoker = function PreviewInvoker(_ref) {
+  var url = _ref.url,
+    appearance = _ref.appearance,
+    children = _ref.children;
+  var actions = (0, _hooks.useSmartLinkActions)({
+    url: url,
+    appearance: appearance
+  });
+  var preview = (0, _react.useMemo)(function () {
+    return actions.find(function (action) {
+      return action.id === 'preview-content';
+    });
+  }, [actions]);
+  var invokePreview = (0, _react.useCallback)(function () {
+    try {
+      preview === null || preview === void 0 || preview.invoke();
+    } catch (_unused) {}
+  }, [preview]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
+    canPreview: !!preview,
+    invokePreview: invokePreview
+  }));
+};

package/dist/es2019/nodeviews/blockCard.js

@@ -6,6 +6,8 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { Card as SmartCard } from '@atlaskit/smart-card';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Datasource } from '../nodeviews/datasource';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../pm-plugins/utils';
@@ -90,13 +92,25 @@ export class BlockCardComponent extends React.PureComponent {
       cardContext,
       actionOptions,
       onClick,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.props;
     const {
       url,
       data
     } = node.attrs;
-    const cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
+    const cardInner = isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardSSR, {
+      key: url,
+      url: url !== null && url !== void 0 ? url : data.url,
+      container: this.scrollContainer,
+      appearance: "block",
+      onClick: onClick,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      platform: 'web',
+      actionOptions: actionOptions,
+      CompetitorPrompt: CompetitorPrompt
+    }), this.gapCursorSpan()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
       key: url,
       url: url !== null && url !== void 0 ? url : data.url,
       container: this.scrollContainer,
@@ -154,7 +168,8 @@ export class BlockCard extends ReactNodeView {
       actionOptions,
       pluginInjectionApi,
       onClickCallback,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
@@ -164,7 +179,8 @@ export class BlockCard extends ReactNodeView {
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
       id: this.id,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     });
   }
   destroy() {
@@ -180,7 +196,8 @@ export const blockCardNodeView = ({
   onClickCallback,
   allowDatasource,
   inlineCardViewProducer,
-  CompetitorPrompt
+  CompetitorPrompt,
+  isPageSSRed
 }) => (node, view, getPos, decorations) => {
   const {
     portalProviderAPI,
@@ -190,7 +207,8 @@ export const blockCardNodeView = ({
     actionOptions,
     pluginInjectionApi,
     onClickCallback: onClickCallback,
-    CompetitorPrompt
+    CompetitorPrompt,
+    isPageSSRed
   };
   const isDatasource = isDatasourceNode(node);
   if (isDatasource) {

package/dist/es2019/nodeviews/embedCard.js

@@ -12,6 +12,7 @@ import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-
 import { akEditorFullPageNarrowBreakout, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -300,7 +301,8 @@ export class EmbedCardComponent extends React.PureComponent {
       pluginInjectionApi,
       actionOptions,
       onClick,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.props;
     const {
       url,
@@ -330,7 +332,21 @@ export class EmbedCardComponent extends React.PureComponent {
       pctWidth,
       fullWidthMode
     };
-    const smartCard = /*#__PURE__*/React.createElement(SmartCard, {
+    const smartCard = isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/React.createElement(CardSSR, {
+      key: url,
+      url: url,
+      appearance: "embed",
+      onClick: onClick,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      frameStyle: "show",
+      inheritDimensions: true,
+      platform: 'web',
+      container: this.scrollContainer,
+      embedIframeRef: this.embedIframeRef,
+      actionOptions: actionOptions,
+      CompetitorPrompt: CompetitorPrompt
+    }) : /*#__PURE__*/React.createElement(SmartCard, {
       key: url,
       url: url,
       appearance: "embed",
@@ -386,7 +402,8 @@ export const EmbedOrBlockCardComponent = props => {
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   }) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
     id: props.id,
     node: props.node,
@@ -404,7 +421,8 @@ export const EmbedOrBlockCardComponent = props => {
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   });
 };
 const WrappedEmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardComponent, EmbedCardComponent);
@@ -442,7 +460,8 @@ export class EmbedCard extends ReactNodeView {
       dispatchAnalyticsEvent,
       pluginInjectionApi,
       onClickCallback,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
       node: this.node,
@@ -455,7 +474,8 @@ export class EmbedCard extends ReactNodeView {
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
       id: this.id,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     });
   }
   destroy() {
@@ -471,7 +491,8 @@ export const embedCardNodeView = ({
   pluginInjectionApi,
   actionOptions,
   onClickCallback,
-  CompetitorPrompt
+  CompetitorPrompt,
+  isPageSSRed
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
@@ -486,7 +507,8 @@ export const embedCardNodeView = ({
     pluginInjectionApi,
     actionOptions,
     onClickCallback: onClickCallback,
-    CompetitorPrompt
+    CompetitorPrompt,
+    isPageSSRed
   };
   return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
 };