@atlaskit/editor-plugin-card 7.3.1 → 7.4.1

package/dist/es2019/nodeviews/inlineCard.js

@@ -8,7 +8,6 @@ import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-co
 import { fg } from '@atlaskit/platform-feature-flags';
 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import { getAwarenessProps } from '../pm-plugins/utils';
@@ -107,8 +106,7 @@ export const InlineCard = /*#__PURE__*/memo(({
     exposure: true
   }) ? handleOnClick : propsOnClick;
   const card = useMemo(() => {
-    // Should be removed when the platform_editor_smart_card_otp experiment is rolled out
-    if (isPageSSRed && url && !expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+    if (isPageSSRed && url) {
       return /*#__PURE__*/React.createElement(CardSSR, {
         key: url,
         url: url,

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -8,6 +8,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
+import { PreviewInvoker } from '../ui/preview/PreviewInvoker';
 import { InlineCard } from './inlineCard';
 const selector = states => {
   var _states$editorViewMod, _states$selectionStat;
@@ -74,6 +75,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     selection
   } = useSharedState(pluginInjectionApi);
   const floatingToolbarNode = selection instanceof 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)
   const showHoverPreview = floatingToolbarNode !== node && fg('platform_editor_preview_panel_linking');
   const innerCardWithOpenButtonOverlay = useMemo(() => {
     var _pluginInjectionApi$a;
@@ -94,10 +96,9 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
       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]);
   const innerCardOriginal = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
     node: node,
     view: view,
@@ -110,18 +111,19 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     isHovered: isHovered,
     isPageSSRed: isPageSSRed,
     pluginInjectionApi: pluginInjectionApi,
-    showHoverPreview: showHoverPreview
-  }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
+    showHoverPreview: false
+  }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
   const shouldShowOpenButtonOverlay = useMemo(() => {
     const shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
     return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (editorExperiment('platform_editor_controls', 'variant1') || fg('platform_editor_preview_panel_linking'));
   }, [mode, editorAppearance]);
   let innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
-  if (fg('platform_editor_preview_panel_linking')) {
+  if (mode === 'view' && fg('platform_editor_preview_panel_linking')) {
     var _cardContext$value, _cardContext$value$st;
-    const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[node.attrs.url];
+    const url = node.attrs.url;
+    const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[url];
     if (cardState) {
-      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
       const ari = getObjectAri(cardState.details);
       const name = getObjectName(cardState.details);
       const iconUrl = getObjectIconUrl(cardState.details);
@@ -129,42 +131,74 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
         ari
       }));
       const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
-      const 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,
-            name: name || '',
-            iconUrl
+      const isPreviewPanelAvailable = Boolean(openPreviewPanel && isPanelAvailable);
+      const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PreviewInvoker, {
+        url: url,
+        appearance: "inline"
+      }, ({
+        canPreview,
+        invokePreview
+      }) => {
+        const 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.
+        const isPreviewAvailable = isPreviewPanelAvailable || isPreviewModalAvailable;
+        if (isPreviewAvailable) {
+          var _pluginInjectionApi$a2;
+          return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
+            isVisible: isResolvedViewRendered,
+            url: url,
+            compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
+            editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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: event => {
+              if (isPreviewPanelAvailable) {
+                event.preventDefault();
+                openPreviewPanel === null || openPreviewPanel === void 0 ? void 0 : openPreviewPanel({
+                  url,
+                  ari: ari || '',
+                  name: name || '',
+                  iconUrl
+                });
+              } else if (isPreviewModalAvailable) {
+                event.preventDefault();
+                invokePreview === null || invokePreview === void 0 ? void 0 : invokePreview();
+              }
+            }
+          }, /*#__PURE__*/React.createElement(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.createElement(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
           });
         }
-      };
-      const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
-        isVisible: isResolvedViewRendered,
-        url: node.attrs.url,
-        compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
-        editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
-        view: view,
-        showPanelButton: !!isPanelAvailable,
-        onClick: handleOpenGlancePanelClick
-      }, /*#__PURE__*/React.createElement(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;
     }
   }
   const getPosFunction = typeof getPos === 'function' ? getPos : undefined;

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

@@ -38,7 +38,7 @@ export const AwarenessWrapper = ({
   url,
   appearance
 }) => {
-  var _cardContext$value, _cardContext$value3;
+  var _cardContext$value2;
   const [isHovered, setIsHovered] = useState(false);
   const linkPosition = useMemo(() => {
     if (!getPos || typeof getPos === 'boolean') {
@@ -75,10 +75,8 @@ export const AwarenessWrapper = ({
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
-  const isPreviewPanelAvailable = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
-  const shouldShowGlancePanel = (isPreviewPanelAvailable || false) && fg('platform_editor_preview_panel_linking');
   const cardWithOverlay = useMemo(() => {
-    if (shouldShowLinkOverlay && !shouldShowGlancePanel && !editorExperiment('platform_editor_controls', 'variant1')) {
+    if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_preview_panel_linking')) {
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -88,11 +86,11 @@ export const AwarenessWrapper = ({
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   const isInline = appearance === 'inline';
   const placeholderUniqId = linkPosition || 0;
   return useMemo(() => {
-    var _cardContext$value2;
+    var _cardContext$value;
     return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -103,7 +101,7 @@ export const AwarenessWrapper = ({
       "data-ssr-placeholder-replace": `awareness-wrapper-${placeholderUniqId}`
     }, jsx(AnalyticsContext, {
       data: {
-        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
+        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
       }
     }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -113,5 +111,5 @@ export const AwarenessWrapper = ({
       testId: "link-discovery-pulse",
       isInline: isInline
     }, cardWithOverlay)));
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? 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 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
 };

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

@@ -0,0 +1,22 @@
+import React, { useCallback, useMemo } from 'react';
+import { useSmartLinkActions } from '@atlaskit/smart-card/hooks';
+export const PreviewInvoker = ({
+  url,
+  appearance,
+  children
+}) => {
+  const actions = useSmartLinkActions({
+    url,
+    appearance
+  });
+  const preview = useMemo(() => actions.find(action => action.id === 'preview-content'), [actions]);
+  const invokePreview = useCallback(() => {
+    try {
+      preview === null || preview === void 0 ? void 0 : preview.invoke();
+    } catch {}
+  }, [preview]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+    canPreview: !!preview,
+    invokePreview
+  }));
+};

package/dist/esm/nodeviews/blockCard.js

@@ -15,6 +15,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 as _removeCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../pm-plugins/utils';
@@ -103,11 +105,23 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
+      var 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,
@@ -185,7 +199,8 @@ export var 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.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -194,7 +209,8 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         id: this.id,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        isPageSSRed: isPageSSRed
       });
     }
   }, {
@@ -213,7 +229,8 @@ export var blockCardNodeView = function blockCardNodeView(_ref3) {
     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;
@@ -221,7 +238,8 @@ export var blockCardNodeView = function blockCardNodeView(_ref3) {
       actionOptions: actionOptions,
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     };
     var isDatasource = isDatasourceNode(node);
     if (isDatasource) {

package/dist/esm/nodeviews/embedCard.js

@@ -23,6 +23,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 as _removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -304,7 +305,8 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         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,
@@ -331,7 +333,21 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         pctWidth: pctWidth,
         fullWidthMode: fullWidthMode
       };
-      var smartCard = /*#__PURE__*/React.createElement(SmartCard, {
+      var 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",
@@ -388,7 +404,8 @@ export var EmbedOrBlockCardComponent = function 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,
@@ -406,7 +423,8 @@ export var EmbedOrBlockCardComponent = function EmbedOrBlockCardComponent(props)
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   });
 };
 var WrappedEmbedCardWithCondition = componentWithCondition(function () {
@@ -462,7 +480,8 @@ export var 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.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
@@ -474,7 +493,8 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         id: this.id,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        isPageSSRed: isPageSSRed
       });
     }
   }, {
@@ -493,7 +513,8 @@ export var embedCardNodeView = function embedCardNodeView(_ref4) {
     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,
@@ -506,7 +527,8 @@ export var embedCardNodeView = function embedCardNodeView(_ref4) {
       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/esm/nodeviews/inlineCard.js

@@ -8,7 +8,6 @@ import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-co
 import { fg } from '@atlaskit/platform-feature-flags';
 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import { getAwarenessProps } from '../pm-plugins/utils';
@@ -100,8 +99,7 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
     exposure: true
   }) ? handleOnClick : propsOnClick;
   var card = useMemo(function () {
-    // Should be removed when the platform_editor_smart_card_otp experiment is rolled out
-    if (isPageSSRed && url && !expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
+    if (isPageSSRed && url) {
       return /*#__PURE__*/React.createElement(CardSSR, {
         key: url,
         url: url,

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -9,6 +9,7 @@ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
+import { PreviewInvoker } from '../ui/preview/PreviewInvoker';
 import { InlineCard } from './inlineCard';
 var selector = function selector(states) {
   var _states$editorViewMod, _states$selectionStat;
@@ -85,6 +86,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
     mode = _useSharedState.mode,
     selection = _useSharedState.selection;
   var floatingToolbarNode = selection instanceof 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 && fg('platform_editor_preview_panel_linking');
   var innerCardWithOpenButtonOverlay = useMemo(function () {
     var _pluginInjectionApi$a;
@@ -105,10 +107,9 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       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 = useMemo(function () {
     return /*#__PURE__*/React.createElement(InlineCard, {
       node: node,
@@ -122,19 +123,20 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       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 = useMemo(function () {
     var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
     return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (editorExperiment('platform_editor_controls', 'variant1') || fg('platform_editor_preview_panel_linking'));
   }, [mode, editorAppearance]);
   var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
-  if (fg('platform_editor_preview_panel_linking')) {
+  if (mode === 'view' && 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 = getObjectAri(cardState.details);
       var name = getObjectName(cardState.details);
       var iconUrl = getObjectIconUrl(cardState.details);
@@ -142,42 +144,73 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
         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.createElement(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.createElement(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.createElement(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.createElement(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.createElement(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.createElement(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;