@atlaskit/editor-plugin-card 7.1.0 → 7.2.0

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,28 +1,31 @@
 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';
 const 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
   };
 };
 const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], selector);
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['selection', 'editorViewMode'], selector);
 }, pluginInjectionApi => {
   const {
+    selectionState,
     editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
+  } = useSharedPluginState(pluginInjectionApi, ['selection', 'editorViewMode']);
   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 const InlineCardWithAwareness = /*#__PURE__*/memo(({
@@ -67,11 +70,14 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     }
   }, [isOverlayEnabled]);
   const {
-    mode
+    mode,
+    selection
   } = useSharedState(pluginInjectionApi);
+  const floatingToolbarNode = selection instanceof NodeSelection && selection.node;
+  const showHoverPreview = floatingToolbarNode !== node && fg('platform_editor_preview_panel_linking');
   const innerCardWithOpenButtonOverlay = useMemo(() => {
     var _pluginInjectionApi$a;
-    return /*#__PURE__*/React.createElement(OpenButtonOverlay, {
+    return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
       isVisible: isResolvedViewRendered,
       url: node.attrs.url,
       editorAppearance: editorAppearance,
@@ -88,9 +94,10 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
       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]);
   const innerCardOriginal = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
     node: node,
     view: view,
@@ -102,18 +109,19 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     cardContext: cardContext,
     isHovered: isHovered,
     isPageSSRed: isPageSSRed,
-    pluginInjectionApi: pluginInjectionApi
-  }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi]);
+    pluginInjectionApi: pluginInjectionApi,
+    showHoverPreview: showHoverPreview
+  }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed, pluginInjectionApi, showHoverPreview]);
   const shouldShowOpenButtonOverlay = useMemo(() => {
     const 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]);
   let innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   if (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];
     if (cardState) {
-      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3, _pluginInjectionApi$a2;
       const ari = getObjectAri(cardState.details);
       const name = getObjectName(cardState.details);
       const iconUrl = getObjectIconUrl(cardState.details);
@@ -121,8 +129,11 @@ 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 = () => {
+      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,
@@ -131,9 +142,13 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
           });
         }
       };
-      const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PanelButtonOverlay, {
+      const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
         isVisible: isResolvedViewRendered,
+        url: node.attrs.url,
         editorAppearance: editorAppearance,
+        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,
@@ -146,7 +161,8 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
         cardContext: cardContext,
         isHovered: isHovered,
         isPageSSRed: isPageSSRed,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        showHoverPreview: showHoverPreview
       }));
       innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
     }

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

@@ -5,7 +5,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';
@@ -20,19 +19,6 @@ import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from './utils';
 const LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
-export const ALLOW_EVENTS_CLASSNAME = 'card-plugin-element-allow-events';
-export const stopEvent = event => {
-  if (!fg('linking_platform_smart_links_in_live_pages')) {
-    return false;
-  }
-  const 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(`.${ALLOW_EVENTS_CLASSNAME}`)) {
-    return false;
-  }
-  return true;
-};
 const handleAwarenessOverlay = view => {
   const currentState = getPluginState(view.state);
   const overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -56,8 +42,6 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
     allowEmbeds,
     allowBlockCards,
     onClickCallback,
-    // @ts-ignore Temporary solution to check for Live Page editor.
-    __livePage,
     isPageSSRed,
     CompetitorPrompt
   } = options;
@@ -73,15 +57,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
       allowBlockCards,
       pluginInjectionApi,
       onClickCallback,
-      __livePage,
       isPageSSRed,
       CompetitorPrompt
-    },
-    ...(__livePage && fg('linking_platform_smart_links_in_live_pages') && {
-      extraNodeViewProps: {
-        stopEvent
-      }
-    })
+    }
   });
   return new SafePlugin({
     state: {

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

@@ -11,6 +11,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';
@@ -57,31 +58,33 @@ const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 const ICON_WIDTH = 16;
 const DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
 
-const OpenButtonOverlay = ({
+const HoverLinkOverlay = ({
   children,
   isVisible = false,
   url,
   editorAppearance,
   editorAnalyticsApi,
-  view
+  view,
+  onClick,
+  showPanelButton = false
 }) => {
   const {
     formatMessage
   } = useIntl();
-  const label = formatMessage(cardMessages.openButtonTitle);
+  const label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
   const containerRef = useRef(null);
-  const openButtonRef = useRef(null);
+  const hoverLinkButtonRef = useRef(null);
   const hiddenTextRef = useRef(null);
   const [showLabel, setShowLabel] = useState(true);
   const [isHovered, setHovered] = useState(false);
   const openTextWidthRef = useRef(null);
   useLayoutEffect(() => {
-    var _containerRef$current, _openButtonRef$curren;
+    var _containerRef$current, _hoverLinkButtonRef$c;
     if (!isVisible || !isHovered) {
       return;
     }
     const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
+    const openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
 
     // Get the hidden text width
     if (!openTextWidthRef.current) {
@@ -116,13 +119,19 @@ const OpenButtonOverlay = ({
     }
   };
   const 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');
+    }
   };
-  const handleClick = () => {
-    sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+  const handleClick = event => {
+    if (showPanelButton && onClick) {
+      onClick(event);
+    } else {
+      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+    }
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -140,7 +149,7 @@ const OpenButtonOverlay = ({
       size: "small",
       maxLines: 1
     }, label)), isHovered && jsx(Anchor, {
-      ref: openButtonRef,
+      ref: hoverLinkButtonRef,
       xcss: linkStyles,
       href: url,
       target: "_blank",
@@ -151,7 +160,9 @@ const OpenButtonOverlay = ({
     }, 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",
@@ -160,4 +171,4 @@ const OpenButtonOverlay = ({
     }, label)))
   );
 };
-export default OpenButtonOverlay;
+export default HoverLinkOverlay;

package/dist/esm/nodeviews/genericCard.js

@@ -37,8 +37,7 @@ var WithClickHandler = function WithClickHandler(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     url = _ref.url,
     onClickCallback = _ref.onClickCallback,
-    children = _ref.children,
-    __livePage = _ref.__livePage;
+    children = _ref.children;
   var _useSharedState = useSharedState(pluginInjectionApi),
     mode = _useSharedState.mode;
   var onClick = useCallback(function (event) {
@@ -51,21 +50,6 @@ var WithClickHandler = function WithClickHandler(_ref) {
       } catch (_unused) {}
     }
   }, [url, onClickCallback]);
-  if (fg('linking_platform_smart_links_in_live_pages')) {
-    // Ignored via go/ees007
-    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
-    /**
-     * @todo: Add a check to determine if we're currently in a live page once ED-23920 and plugin
-     * is complete. The logic for which should allow navigation if we're in a live page and no callback
-     * has been provided. E.g.
-     *
-     * const allowNavigation = isLivePage && !onClickCallback;
-     */
-    var _allowNavigation = __livePage && !onClickCallback;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children({
-      onClick: _allowNavigation ? undefined : onClick
-    }));
-  }
 
   // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
   // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
@@ -142,8 +126,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
         }, /*#__PURE__*/React.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
-          url: url,
-          __livePage: this.props.__livePage
+          url: url
         }, function (_ref2) {
           var onClick = _ref2.onClick;
           return /*#__PURE__*/React.createElement(WithCardContext, null, function (cardContext) {

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() {