@atlaskit/editor-plugin-card 7.1.0 → 7.2.1

package/dist/es2019/nodeviews/embedCard.js

@@ -7,11 +7,15 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
-import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
+import { BlockCardComponent } from './blockCard';
 import { Card } from './genericCard';
 const selector = states => {
   var _states$widthState, _states$widthState2, _states$editorDisable;
@@ -40,7 +44,6 @@ const CardInner = ({
   getLineLength,
   view,
   smartCard,
-  eventDispatcher,
   updateSize,
   getPos,
   aspectRatio,
@@ -363,7 +366,49 @@ export class EmbedCardComponent extends React.PureComponent {
     }));
   }
 }
-const WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
+export const EmbedOrBlockCardComponent = props => {
+  const width = useSharedPluginStateSelector(props.pluginInjectionApi, 'width.width');
+  const viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? /*#__PURE__*/React.createElement(BlockCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  }) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  });
+};
+const WrappedEmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardComponent, EmbedCardComponent);
+const WrappedEmbedCard = Card(WrappedEmbedCardWithCondition, UnsupportedBlock);
 export class EmbedCard extends ReactNodeView {
   constructor(...args) {
     super(...args);
@@ -399,7 +444,7 @@ export class EmbedCard extends ReactNodeView {
       onClickCallback,
       CompetitorPrompt
     } = this.reactComponentProps;
-    return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+    return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
       node: this.node,
       view: this.view,
       eventDispatcher: eventDispatcher,

package/dist/es2019/nodeviews/genericCard.js

@@ -31,8 +31,7 @@ const WithClickHandler = ({
   pluginInjectionApi,
   url,
   onClickCallback,
-  children,
-  __livePage
+  children
 }) => {
   const {
     mode
@@ -47,21 +46,6 @@ const WithClickHandler = ({
       } catch {}
     }
   }, [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;
-     */
-    const 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.
@@ -130,8 +114,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       }, /*#__PURE__*/React.createElement(WithClickHandler, {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
-        url: url,
-        __livePage: this.props.__livePage
+        url: url
       }, ({
         onClick
       }) => /*#__PURE__*/React.createElement(WithCardContext, null, cardContext => /*#__PURE__*/React.createElement(SmartCardComponent, _extends({

package/dist/es2019/nodeviews/inlineCard.js

@@ -1,19 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
@@ -148,7 +145,6 @@ export const InlineCard = /*#__PURE__*/memo(({
   }, card) : data ? card : null;
 });
 const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
-const WrappedInlineCard = Card(InlineCard, UnsupportedInline);
 const selector = states => {
   var _states$editorViewMod, _states$selectionStat;
   return {
@@ -186,53 +182,17 @@ export function InlineCardNodeView(props) {
     enableInlineUpgradeFeatures,
     pluginInjectionApi,
     onClickCallback,
-    __livePage,
     isPageSSRed,
     CompetitorPrompt
   } = props;
-  const [isOverlayHovered, setIsOverlayHovered] = useState(false);
   const {
-    mode,
-    selection
+    mode
   } = useSharedState(pluginInjectionApi);
-  const floatingToolbarNode = selection instanceof NodeSelection && selection.node;
   const url = node.attrs.url;
   const CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
     sourceUrl: url,
     linkType: "inline"
   }) : null;
-  if (__livePage && fg('linking_platform_smart_links_in_live_pages')) {
-    const showHoverPreview = floatingToolbarNode !== node;
-    const livePagesHoverCardFadeInDelay = 800;
-    const 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: event => {
-        var _pluginInjectionApi$a2;
-        handleNavigation({
-          fireAnalyticsEvent: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions.fireAnalyticsEvent,
-          onClickCallback,
-          url,
-          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/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/es2019/ui/toolbar.js

@@ -23,6 +23,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';
@@ -141,7 +142,13 @@ export const floatingToolbar = (cardOptions, lpLinkPicker, linkPickerOptions, pl
         if (isEmbedCard) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          return element.querySelector(`.${richMediaClassName}`);
+          const richMediaElement = element.querySelector(`.${richMediaClassName}`);
+          if (!expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+            return richMediaElement;
+          }
+          if (richMediaElement) {
+            return richMediaElement;
+          }
         }
         return element;
       },

package/dist/esm/nodeviews/embedCard.js

@@ -18,11 +18,15 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedBlock } from '@atlaskit/editor-common/ui';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
-import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { registerCard, removeCard as _removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
+import { BlockCardComponent } from './blockCard';
 import { Card } from './genericCard';
 var selector = function selector(states) {
   var _states$widthState, _states$widthState2, _states$editorDisable;
@@ -50,7 +54,6 @@ var CardInner = function CardInner(_ref) {
     getLineLength = _ref.getLineLength,
     view = _ref.view,
     smartCard = _ref.smartCard,
-    eventDispatcher = _ref.eventDispatcher,
     updateSize = _ref.updateSize,
     getPos = _ref.getPos,
     aspectRatio = _ref.aspectRatio,
@@ -365,7 +368,51 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
     }
   }]);
 }(React.PureComponent);
-var WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
+export var EmbedOrBlockCardComponent = function EmbedOrBlockCardComponent(props) {
+  var width = useSharedPluginStateSelector(props.pluginInjectionApi, 'width.width');
+  var viewAsBlockCard = width && width <= akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? /*#__PURE__*/React.createElement(BlockCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  }) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
+    id: props.id,
+    node: props.node,
+    view: props.view,
+    getPos: props.getPos,
+    pluginInjectionApi: props.pluginInjectionApi,
+    actionOptions: props.actionOptions,
+    onClick: props.onClick,
+    CompetitorPrompt: props.CompetitorPrompt,
+    allowResizing: props.allowResizing,
+    fullWidthMode: props.fullWidthMode,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    eventDispatcher: props.eventDispatcher,
+    cardContext: props.cardContext,
+    smartCard: props.smartCard,
+    hasPreview: props.hasPreview,
+    liveHeight: props.liveHeight,
+    initialAspectRatio: props.initialAspectRatio
+  });
+};
+var WrappedEmbedCardWithCondition = componentWithCondition(function () {
+  return expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardComponent, EmbedCardComponent);
+var WrappedEmbedCard = Card(WrappedEmbedCardWithCondition, UnsupportedBlock);
 export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   function EmbedCard() {
     var _this2;
@@ -416,7 +463,7 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
         CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
-      return /*#__PURE__*/React.createElement(WrappedBlockCard, {
+      return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
         eventDispatcher: eventDispatcher,

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