@atlaskit/editor-plugin-card 7.1.0 → 7.2.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/editor-plugin-card
 
+## 7.2.1
+
+### Patch Changes
+
+- [#185241](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185241)
+  [`0d1bffce3fedd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d1bffce3fedd) -
+  [ux] View embed as block card when page width smaller or equal to 600px
+- Updated dependencies
+
+## 7.2.0
+
+### Minor Changes
+
+- [#189119](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189119)
+  [`3422f57cf2b75`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3422f57cf2b75) -
+  Removing linking_platform_smart_links_in_live_pages FF
+
+### Patch Changes
+
+- [#187274](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187274)
+  [`06b83ebb34346`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/06b83ebb34346) -
+  [ux] ED-28390 platformise open hover button
+- [#187671](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187671)
+  [`f0b9b62ce032f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0b9b62ce032f) -
+  [ux] ED-28547: Added hover card when hover smartlinks
+- Updated dependencies
+
 ## 7.1.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/embedCard.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedCardNodeView = exports.EmbedCardComponent = exports.EmbedCard = void 0;
+exports.embedCardNodeView = exports.EmbedOrBlockCardComponent = exports.EmbedCardComponent = exports.EmbedCard = void 0;
 var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -20,11 +20,15 @@ var _steps = require("@atlaskit/adf-schema/steps");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _smartCard = require("@atlaskit/smart-card");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../pm-plugins/actions");
 var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
+var _blockCard = require("./blockCard");
 var _genericCard = require("./genericCard");
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 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; }
@@ -57,7 +61,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,
@@ -372,7 +375,51 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
     }
   }]);
 }(_react.default.PureComponent);
-var WrappedBlockCard = (0, _genericCard.Card)(EmbedCardComponent, _ui.UnsupportedBlock);
+var EmbedOrBlockCardComponent = exports.EmbedOrBlockCardComponent = function EmbedOrBlockCardComponent(props) {
+  var width = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(props.pluginInjectionApi, 'width.width');
+  var viewAsBlockCard = width && width <= _editorSharedStyles.akEditorFullPageNarrowBreakout;
+  return viewAsBlockCard ? /*#__PURE__*/_react.default.createElement(_blockCard.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.default.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 = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
+  return (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true);
+}, EmbedOrBlockCardComponent, EmbedCardComponent);
+var WrappedEmbedCard = (0, _genericCard.Card)(WrappedEmbedCardWithCondition, _ui.UnsupportedBlock);
 var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
   function EmbedCard() {
     var _this2;
@@ -423,7 +470,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
         CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
-      return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
+      return /*#__PURE__*/_react.default.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
         eventDispatcher: eventDispatcher,

package/dist/cjs/nodeviews/genericCard.js

@@ -46,8 +46,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 = (0, _react.useCallback)(function (event) {
@@ -60,21 +59,6 @@ var WithClickHandler = function WithClickHandler(_ref) {
       } catch (_unused) {}
     }
   }, [url, onClickCallback]);
-  if ((0, _platformFeatureFlags.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.default.createElement(_react.default.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.
@@ -151,8 +135,7 @@ function Card(SmartCardComponent, UnsupportedComponent) {
         }, /*#__PURE__*/_react.default.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
-          url: url,
-          __livePage: this.props.__livePage
+          url: url
         }, function (_ref2) {
           var onClick = _ref2.onClick;
           return /*#__PURE__*/_react.default.createElement(_WithCardContext.WithCardContext, null, function (cardContext) {

package/dist/cjs/nodeviews/inlineCard.js

@@ -9,22 +9,18 @@ exports.InlineCard = void 0;
 exports.InlineCardNodeView = InlineCardNodeView;
 exports.inlineCardNodeView = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _v = _interopRequireDefault(require("uuid/v4"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _link = require("@atlaskit/editor-common/link");
 var _ui = require("@atlaskit/editor-common/ui");
-var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _utils = require("../pm-plugins/utils");
-var _ConfigureOverlay = _interopRequireDefault(require("../ui/ConfigureOverlay"));
 var _toolbar = require("../ui/toolbar");
 var _genericCard = require("./genericCard");
 var _inlineCardWithAwareness = require("./inlineCardWithAwareness");
@@ -153,7 +149,6 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
   }, card) : data ? card : null;
 });
 var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
-var WrappedInlineCard = (0, _genericCard.Card)(InlineCard, _ui.UnsupportedInline);
 var selector = function selector(states) {
   var _states$editorViewMod, _states$selectionStat;
   return {
@@ -189,54 +184,15 @@ function InlineCardNodeView(props) {
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
     onClickCallback = props.onClickCallback,
-    __livePage = props.__livePage,
     isPageSSRed = props.isPageSSRed,
     CompetitorPrompt = props.CompetitorPrompt;
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOverlayHovered = _useState2[0],
-    setIsOverlayHovered = _useState2[1];
   var _useSharedState = useSharedState(pluginInjectionApi),
-    mode = _useSharedState.mode,
-    selection = _useSharedState.selection;
-  var floatingToolbarNode = selection instanceof _state.NodeSelection && selection.node;
+    mode = _useSharedState.mode;
   var url = node.attrs.url;
   var CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/_react.default.createElement(CompetitorPrompt, {
     sourceUrl: url,
     linkType: "inline"
   }) : null;
-  if (__livePage && (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages')) {
-    var showHoverPreview = floatingToolbarNode !== node;
-    var livePagesHoverCardFadeInDelay = 800;
-    var inlineCard = /*#__PURE__*/_react.default.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ConfigureOverlay.default, {
-      targetElementPos: getPos(),
-      view: view,
-      isHoveredCallback: setIsOverlayHovered,
-      onOpenLinkClick: function onOpenLinkClick(event) {
-        var _pluginInjectionApi$a2;
-        (0, _link.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), (0, _platformFeatureFlags.fg)('prompt_whiteboard_competitor_link_gate') && CompetitorPromptComponent);
-  }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
     node: node,
     view: view,

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -9,29 +9,32 @@ exports.InlineCardWithAwareness = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _AwarenessWrapper = require("../ui/AwarenessWrapper");
-var _OpenButtonOverlay = _interopRequireDefault(require("../ui/OpenButtonOverlay"));
-var _PanelButtonOverlay = _interopRequireDefault(require("../ui/PanelButtonOverlay"));
+var _HoverLinkOverlay = _interopRequireDefault(require("../ui/HoverLinkOverlay"));
 var _inlineCard = require("./inlineCard");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var selector = function selector(states) {
-  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 = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorViewMode'], selector);
+  return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['selection', 'editorViewMode'], selector);
 }, function (pluginInjectionApi) {
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+  var _useSharedPluginState = (0, _hooks.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
   };
 });
 var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0, _react.memo)(function (_ref) {
@@ -88,10 +91,13 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
     }
   }, [isOverlayEnabled]);
   var _useSharedState = useSharedState(pluginInjectionApi),
-    mode = _useSharedState.mode;
+    mode = _useSharedState.mode,
+    selection = _useSharedState.selection;
+  var floatingToolbarNode = selection instanceof _state.NodeSelection && selection.node;
+  var showHoverPreview = floatingToolbarNode !== node && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
   var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     var _pluginInjectionApi$a;
-    return /*#__PURE__*/_react.default.createElement(_OpenButtonOverlay.default, {
+    return /*#__PURE__*/_react.default.createElement(_HoverLinkOverlay.default, {
       isVisible: isResolvedViewRendered,
       url: node.attrs.url,
       editorAppearance: editorAppearance,
@@ -108,9 +114,10 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       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 = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
       node: node,
@@ -123,19 +130,20 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       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 = (0, _react.useMemo)(function () {
     var shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
-    return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+    return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking'));
   }, [mode, editorAppearance]);
   var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   if ((0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
     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 = (0, _smartCard.getObjectAri)(cardState.details);
       var name = (0, _smartCard.getObjectName)(cardState.details);
       var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState.details);
@@ -143,8 +151,11 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
         ari: ari
       }));
       var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
-      var handleOpenGlancePanelClick = function handleOpenGlancePanelClick() {
+      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,
@@ -153,9 +164,13 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
           });
         }
       };
-      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_PanelButtonOverlay.default, {
+      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_HoverLinkOverlay.default, {
         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.default.createElement(_inlineCard.InlineCard, {
         node: node,
@@ -168,7 +183,8 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
         cardContext: cardContext,
         isHovered: isHovered,
         isPageSSRed: isPageSSRed,
-        pluginInjectionApi: pluginInjectionApi
+        pluginInjectionApi: pluginInjectionApi,
+        showHoverPreview: showHoverPreview
       }));
       innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
     }

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

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stopEvent = exports.createPlugin = exports.ALLOW_EVENTS_CLASSNAME = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
@@ -14,7 +14,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _linkingCommon = require("@atlaskit/linking-common");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _inlineCard = require("../nodeviews/inlineCard");
 var _lazyBlockCard = require("../nodeviews/lazy-block-card");
 var _lazyEmbedCard = require("../nodeviews/lazy-embed-card");
@@ -31,19 +30,6 @@ var _utils3 = require("./utils");
 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) { (0, _defineProperty2.default)(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; }
 var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
-var ALLOW_EVENTS_CLASSNAME = exports.ALLOW_EVENTS_CLASSNAME = 'card-plugin-element-allow-events';
-var stopEvent = exports.stopEvent = function stopEvent(event) {
-  if (!(0, _platformFeatureFlags.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 = (0, _state2.getPluginState)(view.state);
   var overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -67,11 +53,10 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
       allowEmbeds = options.allowEmbeds,
       allowBlockCards = options.allowBlockCards,
       onClickCallback = options.onClickCallback,
-      __livePage = options.__livePage,
       isPageSSRed = options.isPageSSRed,
       CompetitorPrompt = options.CompetitorPrompt;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability;
-    var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)(_objectSpread({
+    var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: _inlineCard.InlineCardNodeView,
       extraComponentProps: {
@@ -82,15 +67,10 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
         allowBlockCards: allowBlockCards,
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
-        __livePage: __livePage,
         isPageSSRed: isPageSSRed,
         CompetitorPrompt: CompetitorPrompt
       }
-    }, __livePage && (0, _platformFeatureFlags.fg)('linking_platform_smart_links_in_live_pages') && {
-      extraNodeViewProps: {
-        stopEvent: stopEvent
-      }
-    }));
+    });
     return new _safePlugin.SafePlugin({
       state: {
         init: function init() {

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

@@ -13,6 +13,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
 var _primitives = require("@atlaskit/primitives");
 var _toolbar = require("../toolbar");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -72,19 +73,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 = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
-  var label = formatMessage(_messages.cardMessages.openButtonTitle);
+  var label = showPanelButton ? formatMessage(_messages.cardMessages.panelButtonTitle) : formatMessage(_messages.cardMessages.openButtonTitle);
   var containerRef = (0, _react.useRef)(null);
-  var openButtonRef = (0, _react.useRef)(null);
+  var hoverLinkButtonRef = (0, _react.useRef)(null);
   var hiddenTextRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -96,12 +100,12 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     setHovered = _useState4[1];
   var openTextWidthRef = (0, _react.useRef)(null);
   (0, _react.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) {
@@ -136,13 +140,19 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }
   };
   var handleDoubleClick = function handleDoubleClick() {
-    sendVisitLinkAnalytics(_analytics.INPUT_METHOD.DOUBLE_CLICK);
+    if (!showPanelButton) {
+      sendVisitLinkAnalytics(_analytics.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(_analytics.INPUT_METHOD.BUTTON);
+  var handleClick = function handleClick(event) {
+    if (showPanelButton && onClick) {
+      onClick(event);
+    } else {
+      sendVisitLinkAnalytics(_analytics.INPUT_METHOD.BUTTON);
+    }
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -164,7 +174,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       size: "small",
       maxLines: 1
     }, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
-      ref: openButtonRef,
+      ref: hoverLinkButtonRef,
       xcss: linkStyles,
       href: url,
       target: "_blank",
@@ -175,7 +185,9 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }, (0, _react2.jsx)(_primitives.Box, {
       xcss: iconWrapperStyles,
       "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-    }, (0, _react2.jsx)(_linkExternal.default, {
+    }, showPanelButton ? (0, _react2.jsx)(_panelRight.default, {
+      label: ""
+    }) : (0, _react2.jsx)(_linkExternal.default, {
       label: ""
     })), showLabel && (0, _react2.jsx)(_primitives.Text, {
       size: "small",
@@ -184,4 +196,4 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }, label)))
   );
 };
-var _default = exports.default = OpenButtonOverlay;
+var _default = exports.default = HoverLinkOverlay;

package/dist/cjs/ui/toolbar.js

@@ -33,6 +33,7 @@ var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/
 var _settingsEditorSettings = _interopRequireDefault(require("@atlaskit/icon/core/migration/settings--editor-settings"));
 var _settings = _interopRequireDefault(require("@atlaskit/icon/core/settings"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -147,7 +148,13 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOpt
         if (isEmbedCard) {
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          return element.querySelector(".".concat(_styles.richMediaClassName));
+          var richMediaElement = element.querySelector(".".concat(_styles.richMediaClassName));
+          if (!(0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+            return richMediaElement;
+          }
+          if (richMediaElement) {
+            return richMediaElement;
+          }
         }
         return element;
       },