@atlaskit/editor-plugin-card 7.1.0 → 7.2.1

package/dist/esm/nodeviews/inlineCard.js

@@ -1,20 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import rafSchedule from 'raf-schd';
 import uuid from 'uuid/v4';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { handleNavigation } from '@atlaskit/editor-common/link';
 import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import { getAwarenessProps } from '../pm-plugins/utils';
-import OverlayWrapper from '../ui/ConfigureOverlay';
 import { visitCardLinkAnalytics } from '../ui/toolbar';
 import { Card } from './genericCard';
 import { InlineCardWithAwareness } from './inlineCardWithAwareness';
@@ -142,7 +138,6 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
   }, card) : data ? card : null;
 });
 var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
-var WrappedInlineCard = Card(InlineCard, UnsupportedInline);
 var selector = function selector(states) {
   var _states$editorViewMod, _states$selectionStat;
   return {
@@ -178,54 +173,15 @@ export function InlineCardNodeView(props) {
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
     onClickCallback = props.onClickCallback,
-    __livePage = props.__livePage,
     isPageSSRed = props.isPageSSRed,
     CompetitorPrompt = props.CompetitorPrompt;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOverlayHovered = _useState2[0],
-    setIsOverlayHovered = _useState2[1];
   var _useSharedState = useSharedState(pluginInjectionApi),
-    mode = _useSharedState.mode,
-    selection = _useSharedState.selection;
-  var floatingToolbarNode = selection instanceof NodeSelection && selection.node;
+    mode = _useSharedState.mode;
   var url = node.attrs.url;
   var CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
     sourceUrl: url,
     linkType: "inline"
   }) : null;
-  if (__livePage && fg('linking_platform_smart_links_in_live_pages')) {
-    var showHoverPreview = floatingToolbarNode !== node;
-    var livePagesHoverCardFadeInDelay = 800;
-    var inlineCard = /*#__PURE__*/React.createElement(WrappedInlineCard, {
-      isHovered: isOverlayHovered,
-      node: node,
-      view: view,
-      getPos: getPos,
-      actionOptions: actionOptions,
-      useAlternativePreloader: useAlternativePreloader,
-      onClickCallback: onClickCallback,
-      showHoverPreview: showHoverPreview,
-      hoverPreviewOptions: {
-        fadeInDelay: livePagesHoverCardFadeInDelay
-      },
-      isPageSSRed: isPageSSRed
-    });
-    return mode === 'view' ? inlineCard : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverlayWrapper, {
-      targetElementPos: getPos(),
-      view: view,
-      isHoveredCallback: setIsOverlayHovered,
-      onOpenLinkClick: function onOpenLinkClick(event) {
-        var _pluginInjectionApi$a2;
-        handleNavigation({
-          fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.fireAnalyticsEvent,
-          onClickCallback: onClickCallback,
-          url: url,
-          event: event
-        });
-      }
-    }, inlineCard), fg('prompt_whiteboard_competitor_link_gate') && CompetitorPromptComponent);
-  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,28 +1,31 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
 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 OpenButtonOverlay from '../ui/OpenButtonOverlay';
-import PanelButtonOverlay from '../ui/PanelButtonOverlay';
+import HoverLinkOverlay from '../ui/HoverLinkOverlay';
 import { InlineCard } from './inlineCard';
 var selector = function selector(states) {
-  var _states$editorViewMod;
+  var _states$editorViewMod, _states$selectionStat;
   return {
-    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+    selection: (_states$selectionStat = states.selectionState) === null || _states$selectionStat === void 0 ? void 0 : _states$selectionStat.selection
   };
 };
 var useSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], selector);
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['selection', 'editorViewMode'], selector);
 }, function (pluginInjectionApi) {
-  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['selection', 'editorViewMode']),
+    selectionState = _useSharedPluginState.selectionState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   return {
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
+    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection
   };
 });
 export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
@@ -79,10 +82,13 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
     }
   }, [isOverlayEnabled]);
   var _useSharedState = useSharedState(pluginInjectionApi),
-    mode = _useSharedState.mode;
+    mode = _useSharedState.mode,
+    selection = _useSharedState.selection;
+  var floatingToolbarNode = selection instanceof NodeSelection && selection.node;
+  var showHoverPreview = floatingToolbarNode !== node && fg('platform_editor_preview_panel_linking');
   var innerCardWithOpenButtonOverlay = useMemo(function () {
     var _pluginInjectionApi$a;
-    return /*#__PURE__*/React.createElement(OpenButtonOverlay, {
+    return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
       isVisible: isResolvedViewRendered,
       url: node.attrs.url,
       editorAppearance: editorAppearance,
@@ -99,9 +105,10 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       cardContext: cardContext,
       isHovered: isHovered,
       isPageSSRed: isPageSSRed,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      showHoverPreview: showHoverPreview
     }));
-  }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi]);
+  }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed, pluginInjectionApi, showHoverPreview]);
   var innerCardOriginal = useMemo(function () {
     return /*#__PURE__*/React.createElement(InlineCard, {
       node: node,
@@ -114,19 +121,20 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       cardContext: cardContext,
       isHovered: isHovered,
       isPageSSRed: isPageSSRed,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      showHoverPreview: showHoverPreview
     });
-  }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
+  }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
   var shouldShowOpenButtonOverlay = useMemo(function () {
     var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
-    return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && editorExperiment('platform_editor_controls', 'variant1');
+    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')) {
     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];
     if (cardState) {
-      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
       var ari = getObjectAri(cardState.details);
       var name = getObjectName(cardState.details);
       var iconUrl = getObjectIconUrl(cardState.details);
@@ -134,8 +142,11 @@ 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() {
+      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,
@@ -144,9 +155,13 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
           });
         }
       };
-      var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PanelButtonOverlay, {
+      var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
         isVisible: isResolvedViewRendered,
+        url: node.attrs.url,
         editorAppearance: editorAppearance,
+        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,
@@ -159,7 +174,8 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
         cardContext: cardContext,
         isHovered: isHovered,
         isPageSSRed: isPageSSRed,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        showHoverPreview: showHoverPreview
       }));
       innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
     }

package/dist/esm/pm-plugins/main.js

@@ -1,5 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import rafSchedule from 'raf-schd';
@@ -9,7 +9,6 @@ import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/st
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
 import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
 import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
@@ -24,19 +23,6 @@ import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from './utils';
 var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
-export var ALLOW_EVENTS_CLASSNAME = 'card-plugin-element-allow-events';
-export var stopEvent = function stopEvent(event) {
-  if (!fg('linking_platform_smart_links_in_live_pages')) {
-    return false;
-  }
-  var target = event.target;
-  // Stop events from propogating to prose-mirror and selecting the node and/or
-  // opening the toolbar, unless a parent of the target has a defined className
-  if (target instanceof HTMLElement && target.closest(".".concat(ALLOW_EVENTS_CLASSNAME))) {
-    return false;
-  }
-  return true;
-};
 var handleAwarenessOverlay = function handleAwarenessOverlay(view) {
   var currentState = getPluginState(view.state);
   var overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -60,11 +46,10 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
       allowEmbeds = options.allowEmbeds,
       allowBlockCards = options.allowBlockCards,
       onClickCallback = options.onClickCallback,
-      __livePage = options.__livePage,
       isPageSSRed = options.isPageSSRed,
       CompetitorPrompt = options.CompetitorPrompt;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability;
-    var inlineCardViewProducer = getInlineNodeViewProducer(_objectSpread({
+    var inlineCardViewProducer = getInlineNodeViewProducer({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: InlineCardNodeView,
       extraComponentProps: {
@@ -75,15 +60,10 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
         allowBlockCards: allowBlockCards,
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
-        __livePage: __livePage,
         isPageSSRed: isPageSSRed,
         CompetitorPrompt: CompetitorPrompt
       }
-    }, __livePage && fg('linking_platform_smart_links_in_live_pages') && {
-      extraNodeViewProps: {
-        stopEvent: stopEvent
-      }
-    }));
+    });
     return new SafePlugin({
       state: {
         init: function init() {

package/dist/esm/ui/{OpenButtonOverlay → HoverLinkOverlay}/index.js

@@ -12,6 +12,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { cardMessages } from '@atlaskit/editor-common/messages';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import PanelRightIcon from '@atlaskit/icon/core/panel-right';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
 import { visitCardLinkAnalytics } from '../toolbar';
@@ -58,19 +59,22 @@ var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 var ICON_WIDTH = 16;
 var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
 
-var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
+var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
     url = _ref.url,
     editorAppearance = _ref.editorAppearance,
     editorAnalyticsApi = _ref.editorAnalyticsApi,
-    view = _ref.view;
+    view = _ref.view,
+    onClick = _ref.onClick,
+    _ref$showPanelButton = _ref.showPanelButton,
+    showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var label = formatMessage(cardMessages.openButtonTitle);
+  var label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
   var containerRef = useRef(null);
-  var openButtonRef = useRef(null);
+  var hoverLinkButtonRef = useRef(null);
   var hiddenTextRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -82,12 +86,12 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     setHovered = _useState4[1];
   var openTextWidthRef = useRef(null);
   useLayoutEffect(function () {
-    var _containerRef$current, _openButtonRef$curren;
+    var _containerRef$current, _hoverLinkButtonRef$c;
     if (!isVisible || !isHovered) {
       return;
     }
     var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
+    var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
 
     // Get the hidden text width
     if (!openTextWidthRef.current) {
@@ -122,13 +126,19 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }
   };
   var handleDoubleClick = function handleDoubleClick() {
-    sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
+    if (!showPanelButton) {
+      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
 
-    // Double click opens the link in a new tab
-    window.open(url, '_blank');
+      // Double click opens the link in a new tab
+      window.open(url, '_blank');
+    }
   };
-  var handleClick = function handleClick() {
-    sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+  var handleClick = function handleClick(event) {
+    if (showPanelButton && onClick) {
+      onClick(event);
+    } else {
+      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+    }
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -150,7 +160,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       size: "small",
       maxLines: 1
     }, label)), isHovered && jsx(Anchor, {
-      ref: openButtonRef,
+      ref: hoverLinkButtonRef,
       xcss: linkStyles,
       href: url,
       target: "_blank",
@@ -161,7 +171,9 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }, jsx(Box, {
       xcss: iconWrapperStyles,
       "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-    }, jsx(LinkExternalIcon, {
+    }, showPanelButton ? jsx(PanelRightIcon, {
+      label: ""
+    }) : jsx(LinkExternalIcon, {
       label: ""
     })), showLabel && jsx(Text, {
       size: "small",
@@ -170,4 +182,4 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }, label)))
   );
 };
-export default OpenButtonOverlay;
+export default HoverLinkOverlay;

package/dist/esm/ui/toolbar.js

@@ -27,6 +27,7 @@ import OpenIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
 import CogIcon from '@atlaskit/icon/core/migration/settings--editor-settings';
 import SettingsIcon from '@atlaskit/icon/core/settings';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changeSelectedCardToText } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -138,7 +139,13 @@ export var floatingToolbar = function floatingToolbar(cardOptions, lpLinkPicker,
         if (isEmbedCard) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          return element.querySelector(".".concat(richMediaClassName));
+          var richMediaElement = element.querySelector(".".concat(richMediaClassName));
+          if (!expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+            return richMediaElement;
+          }
+          if (richMediaElement) {
+            return richMediaElement;
+          }
         }
         return element;
       },

package/dist/types/nodeviews/embedCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
@@ -43,6 +43,7 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
     private removeCard;
     render(): React.JSX.Element;
 }
+export declare const EmbedOrBlockCardComponent: (props: ComponentProps<typeof EmbedCardComponent>) => React.JSX.Element;
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'onClickCallback' | 'CompetitorPrompt'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     private id;

package/dist/types/nodeviews/inlineCard.d.ts

@@ -5,7 +5,7 @@ import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from './genericCard';
 import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
 export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick: propsOnClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, pluginInjectionApi, }: SmartCardProps) => React.JSX.Element | null>;
-export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage' | 'isPageSSRed' | 'CompetitorPrompt'>;
+export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
 /**
  *
  * @param props

package/dist/types/pm-plugins/main.d.ts

@@ -2,6 +2,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { cardPlugin } from '../index';
 import type { CardPluginOptions, CardPluginState } from '../types';
-export declare const ALLOW_EVENTS_CLASSNAME = "card-plugin-element-allow-events";
-export declare const stopEvent: (event: Event) => boolean;
 export declare const createPlugin: (options: CardPluginOptions, pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<CardPluginState>;

package/dist/types/ui/HoverLinkOverlay/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { HoverLinkOverlayProps } from './types';
+declare const HoverLinkOverlay: ({ children, isVisible, url, editorAppearance, editorAnalyticsApi, view, onClick, showPanelButton, }: React.PropsWithChildren<HoverLinkOverlayProps>) => jsx.JSX.Element;
+export default HoverLinkOverlay;

package/dist/types/ui/{OpenButtonOverlay → HoverLinkOverlay}/types.d.ts

@@ -2,10 +2,12 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorAppearance } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export type OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
     isVisible?: boolean;
     url: string;
     editorAppearance?: EditorAppearance;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     view?: EditorView;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    showPanelButton?: boolean;
 };

package/dist/types/ui/datasourceErrorBoundary.d.ts

@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
         error: Error | APIError;
     };
     componentDidCatch(error: Error | APIError): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }

package/dist/types-ts4.5/nodeviews/embedCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
@@ -43,6 +43,7 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
     private removeCard;
     render(): React.JSX.Element;
 }
+export declare const EmbedOrBlockCardComponent: (props: ComponentProps<typeof EmbedCardComponent>) => React.JSX.Element;
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'onClickCallback' | 'CompetitorPrompt'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     private id;

package/dist/types-ts4.5/nodeviews/inlineCard.d.ts

@@ -5,7 +5,7 @@ import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from './genericCard';
 import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
 export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick: propsOnClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, pluginInjectionApi, }: SmartCardProps) => React.JSX.Element | null>;
-export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage' | 'isPageSSRed' | 'CompetitorPrompt'>;
+export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
 /**
  *
  * @param props

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -2,6 +2,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { cardPlugin } from '../index';
 import type { CardPluginOptions, CardPluginState } from '../types';
-export declare const ALLOW_EVENTS_CLASSNAME = "card-plugin-element-allow-events";
-export declare const stopEvent: (event: Event) => boolean;
 export declare const createPlugin: (options: CardPluginOptions, pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<CardPluginState>;

package/dist/types-ts4.5/ui/HoverLinkOverlay/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { HoverLinkOverlayProps } from './types';
+declare const HoverLinkOverlay: ({ children, isVisible, url, editorAppearance, editorAnalyticsApi, view, onClick, showPanelButton, }: React.PropsWithChildren<HoverLinkOverlayProps>) => jsx.JSX.Element;
+export default HoverLinkOverlay;

package/dist/types-ts4.5/ui/{OpenButtonOverlay → HoverLinkOverlay}/types.d.ts

@@ -2,10 +2,12 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorAppearance } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export type OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
     isVisible?: boolean;
     url: string;
     editorAppearance?: EditorAppearance;
     editorAnalyticsApi?: EditorAnalyticsAPI;
     view?: EditorView;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    showPanelButton?: boolean;
 };

package/dist/types-ts4.5/ui/datasourceErrorBoundary.d.ts

@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
         error: Error | APIError;
     };
     componentDidCatch(error: Error | APIError): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "7.1.0",
+	"version": "7.2.1",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/frontend-utilities": "^3.1.0",
-		"@atlaskit/icon": "^27.5.0",
+		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-analytics": "^10.0.0",
 		"@atlaskit/link-client-extension": "^5.0.0",
@@ -58,10 +58,11 @@
 		"@atlaskit/linking-types": "^14.0.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.2.0",
 		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/smart-card": "^40.4.0",
+		"@atlaskit/smart-card": "^40.5.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.9.0",
+		"@atlaskit/tmp-editor-statsig": "^9.12.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -71,7 +72,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.9.0",
+		"@atlaskit/editor-common": "^107.12.0",
 		"@atlaskit/link-provider": "^3.4.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -116,9 +117,6 @@
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
 		},
-		"linking_platform_smart_links_in_live_pages": {
-			"type": "boolean"
-		},
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},