@atlaskit/editor-plugin-card 7.3.0 → 7.4.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-card
 
+## 7.4.0
+
+### Minor Changes
+
+- [`bd14b2c6330ba`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd14b2c6330ba) -
+  [https://product-fabric.atlassian.net/browse/ED-28981](ED-28981) - use `CardSSR` component for
+  smart card SSR
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.3.1
+
+### Patch Changes
+
+- [`a32e07a545f72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a32e07a545f72) -
+  [ux] Adds 'Open preview panel' button to the smartlink toolbar when the panel is supported.
+- Updated dependencies
+
 ## 7.3.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -19,6 +19,8 @@ var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/rea
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _smartCard = require("@atlaskit/smart-card");
+var _ssr = require("@atlaskit/smart-card/ssr");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _datasource = require("../nodeviews/datasource");
 var _actions = require("../pm-plugins/actions");
 var _utils2 = require("../pm-plugins/utils");
@@ -109,11 +111,23 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
         cardContext = _this$props2.cardContext,
         actionOptions = _this$props2.actionOptions,
         onClick = _this$props2.onClick,
-        CompetitorPrompt = _this$props2.CompetitorPrompt;
+        CompetitorPrompt = _this$props2.CompetitorPrompt,
+        isPageSSRed = _this$props2.isPageSSRed;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         data = _node$attrs.data;
-      var cardInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+      var cardInner = isPageSSRed && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
+        key: url,
+        url: url !== null && url !== void 0 ? url : data.url,
+        container: this.scrollContainer,
+        appearance: "block",
+        onClick: onClick,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        platform: 'web',
+        actionOptions: actionOptions,
+        CompetitorPrompt: CompetitorPrompt
+      }), this.gapCursorSpan()) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
         key: url,
         url: url !== null && url !== void 0 ? url : data.url,
         container: this.scrollContainer,
@@ -191,7 +205,8 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         actionOptions = _this$reactComponentP3.actionOptions,
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
-        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
+        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt,
+        isPageSSRed = _this$reactComponentP3.isPageSSRed;
       return /*#__PURE__*/_react.default.createElement(WrappedBlockCard, {
         node: this.node,
         view: this.view,
@@ -200,7 +215,8 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         id: this.id,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        isPageSSRed: isPageSSRed
       });
     }
   }, {
@@ -219,7 +235,8 @@ var blockCardNodeView = exports.blockCardNodeView = function blockCardNodeView(_
     onClickCallback = _ref3.onClickCallback,
     allowDatasource = _ref3.allowDatasource,
     inlineCardViewProducer = _ref3.inlineCardViewProducer,
-    CompetitorPrompt = _ref3.CompetitorPrompt;
+    CompetitorPrompt = _ref3.CompetitorPrompt,
+    isPageSSRed = _ref3.isPageSSRed;
   return function (node, view, getPos, decorations) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
@@ -227,7 +244,8 @@ var blockCardNodeView = exports.blockCardNodeView = function blockCardNodeView(_
       actionOptions: actionOptions,
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     };
     var isDatasource = (0, _utils2.isDatasourceNode)(node);
     if (isDatasource) {

package/dist/cjs/nodeviews/embedCard.js

@@ -25,6 +25,7 @@ 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 _ssr = require("@atlaskit/smart-card/ssr");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../pm-plugins/actions");
 var _ResizableEmbedCard = _interopRequireDefault(require("../ui/ResizableEmbedCard"));
@@ -311,7 +312,8 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         pluginInjectionApi = _this$props.pluginInjectionApi,
         actionOptions = _this$props.actionOptions,
         onClick = _this$props.onClick,
-        CompetitorPrompt = _this$props.CompetitorPrompt;
+        CompetitorPrompt = _this$props.CompetitorPrompt,
+        isPageSSRed = _this$props.isPageSSRed;
       var _node$attrs = node.attrs,
         url = _node$attrs.url,
         pctWidth = _node$attrs.width,
@@ -338,7 +340,21 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         pctWidth: pctWidth,
         fullWidthMode: fullWidthMode
       };
-      var smartCard = /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+      var smartCard = isPageSSRed && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
+        key: url,
+        url: url,
+        appearance: "embed",
+        onClick: onClick,
+        onResolve: this.onResolve,
+        onError: this.onError,
+        frameStyle: "show",
+        inheritDimensions: true,
+        platform: 'web',
+        container: this.scrollContainer,
+        embedIframeRef: this.embedIframeRef,
+        actionOptions: actionOptions,
+        CompetitorPrompt: CompetitorPrompt
+      }) : /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
         key: url,
         url: url,
         appearance: "embed",
@@ -395,7 +411,8 @@ var EmbedOrBlockCardComponent = exports.EmbedOrBlockCardComponent = function Emb
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   }) : /*#__PURE__*/_react.default.createElement(EmbedCardComponent, {
     id: props.id,
     node: props.node,
@@ -413,7 +430,8 @@ var EmbedOrBlockCardComponent = exports.EmbedOrBlockCardComponent = function Emb
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   });
 };
 var WrappedEmbedCardWithCondition = (0, _platformFeatureFlagsReact.componentWithCondition)(function () {
@@ -469,7 +487,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         dispatchAnalyticsEvent = _this$reactComponentP3.dispatchAnalyticsEvent,
         pluginInjectionApi = _this$reactComponentP3.pluginInjectionApi,
         onClickCallback = _this$reactComponentP3.onClickCallback,
-        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt;
+        CompetitorPrompt = _this$reactComponentP3.CompetitorPrompt,
+        isPageSSRed = _this$reactComponentP3.isPageSSRed;
       return /*#__PURE__*/_react.default.createElement(WrappedEmbedCard, {
         node: this.node,
         view: this.view,
@@ -481,7 +500,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         id: this.id,
-        CompetitorPrompt: CompetitorPrompt
+        CompetitorPrompt: CompetitorPrompt,
+        isPageSSRed: isPageSSRed
       });
     }
   }, {
@@ -500,7 +520,8 @@ var embedCardNodeView = exports.embedCardNodeView = function embedCardNodeView(_
     pluginInjectionApi = _ref4.pluginInjectionApi,
     actionOptions = _ref4.actionOptions,
     onClickCallback = _ref4.onClickCallback,
-    CompetitorPrompt = _ref4.CompetitorPrompt;
+    CompetitorPrompt = _ref4.CompetitorPrompt,
+    isPageSSRed = _ref4.isPageSSRed;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher,
@@ -513,7 +534,8 @@ var embedCardNodeView = exports.embedCardNodeView = function embedCardNodeView(_
       pluginInjectionApi: pluginInjectionApi,
       actionOptions: actionOptions,
       onClickCallback: onClickCallback,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     };
     return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
   };

package/dist/cjs/nodeviews/inlineCard.js

@@ -18,7 +18,6 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
-var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _utils = require("../pm-plugins/utils");
@@ -111,8 +110,7 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
     exposure: true
   }) ? handleOnClick : propsOnClick;
   var card = (0, _react.useMemo)(function () {
-    // Should be removed when the platform_editor_smart_card_otp experiment is rolled out
-    if (isPageSSRed && url && !(0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
+    if (isPageSSRed && url) {
       return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
         key: url,
         url: url,

package/dist/cjs/ui/OpenPreviewButton/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OpenPreviewPanelToolbarButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
+var _ui = require("@atlaskit/editor-common/ui");
+var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
+var _linkProvider = require("@atlaskit/link-provider");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _smartCard = require("@atlaskit/smart-card");
+var OpenPreviewPanelToolbarButton = exports.OpenPreviewPanelToolbarButton = function OpenPreviewPanelToolbarButton(_ref) {
+  var node = _ref.node,
+    intl = _ref.intl;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    store = _useSmartLinkContext.store,
+    isPreviewPanelAvailable = _useSmartLinkContext.isPreviewPanelAvailable,
+    openPreviewPanel = _useSmartLinkContext.openPreviewPanel;
+  var url = node.attrs.url;
+  var cardState = store === null || store === void 0 ? void 0 : store.getState()[url];
+  if (cardState) {
+    var ari = (0, _smartCard.getObjectAri)(cardState.details);
+    var name = (0, _smartCard.getObjectName)(cardState.details);
+    var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState.details);
+    var isPanelAvailable = ari && (isPreviewPanelAvailable === null || isPreviewPanelAvailable === void 0 ? void 0 : isPreviewPanelAvailable({
+      ari: ari
+    }));
+    var handleOpenGlancePanelClick = function handleOpenGlancePanelClick() {
+      if (openPreviewPanel && isPanelAvailable) {
+        openPreviewPanel({
+          url: url,
+          ari: ari,
+          name: name || '',
+          iconUrl: iconUrl
+        });
+      }
+    };
+    var title = intl.formatMessage(_messages.linkMessages.openPreviewPanel);
+    var icon = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)() ? /*#__PURE__*/_react.default.createElement(_panelRight.default, {
+      label: "",
+      spacing: "spacious"
+    }) :
+    /*#__PURE__*/
+    // This is a hack required for Jira until areToolbarFlagsEnabled are enabled to ensure the icon has padding
+    // Padding is removed when areToolbarFlagsEnabed for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
+    _react.default.createElement(_compiled.Inline, {
+      as: "span",
+      space: "space.050",
+      alignBlock: "center"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      "aria-hidden": true,
+      role: "presentation"
+    }), /*#__PURE__*/_react.default.createElement(_panelRight.default, {
+      label: "",
+      spacing: "spacious"
+    }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      as: "span",
+      "aria-hidden": true,
+      role: "presentation"
+    }));
+    if (openPreviewPanel && isPanelAvailable) {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
+        gap: "space.050"
+      }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+        testId: "open-preview-panel-floating-toolbar-button",
+        onClick: handleOpenGlancePanelClick,
+        icon: icon,
+        title: title
+      }));
+    }
+  }
+  return null;
+};

package/dist/cjs/ui/toolbar.js

@@ -45,6 +45,7 @@ var _HyperlinkToolbarAppearance = require("./HyperlinkToolbarAppearance");
 var _HyperlinkToolbarAppearanceDropdown = require("./HyperlinkToolbarAppearanceDropdown");
 var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
 var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
+var _OpenPreviewButton = require("./OpenPreviewButton");
 var _ToolbarViewedEvent = require("./ToolbarViewedEvent");
 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); }
 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; }
@@ -330,7 +331,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         testId: 'link-toolbar-edit-link-button',
         onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
       }];
-      var toolbarItems = isNewEditorToolbarDisabled ? [].concat(editItems, commentItems, [{
+      var openPreviewPanelItems = (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking') ? [{
+        type: 'custom',
+        fallback: [],
+        render: function render() {
+          return /*#__PURE__*/_react.default.createElement(_OpenPreviewButton.OpenPreviewPanelToolbarButton, {
+            node: node,
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi
+          });
+        }
+      }] : [];
+      var toolbarItems = isNewEditorToolbarDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: _linkExternal.default,
@@ -367,7 +379,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(_messages.default.remove),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-      }]) : [].concat(editButtonItems, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') ? [].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }]) : [].concat(openPreviewPanelItems, editButtonItems, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') ? [].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'separator',
         fullHeight: true
       }]) : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{

package/dist/es2019/nodeviews/blockCard.js

@@ -6,6 +6,8 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { Card as SmartCard } from '@atlaskit/smart-card';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { Datasource } from '../nodeviews/datasource';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../pm-plugins/utils';
@@ -90,13 +92,25 @@ export class BlockCardComponent extends React.PureComponent {
       cardContext,
       actionOptions,
       onClick,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.props;
     const {
       url,
       data
     } = node.attrs;
-    const cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
+    const cardInner = isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardSSR, {
+      key: url,
+      url: url !== null && url !== void 0 ? url : data.url,
+      container: this.scrollContainer,
+      appearance: "block",
+      onClick: onClick,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      platform: 'web',
+      actionOptions: actionOptions,
+      CompetitorPrompt: CompetitorPrompt
+    }), this.gapCursorSpan()) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
       key: url,
       url: url !== null && url !== void 0 ? url : data.url,
       container: this.scrollContainer,
@@ -154,7 +168,8 @@ export class BlockCard extends ReactNodeView {
       actionOptions,
       pluginInjectionApi,
       onClickCallback,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedBlockCard, {
       node: this.node,
@@ -164,7 +179,8 @@ export class BlockCard extends ReactNodeView {
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
       id: this.id,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     });
   }
   destroy() {
@@ -180,7 +196,8 @@ export const blockCardNodeView = ({
   onClickCallback,
   allowDatasource,
   inlineCardViewProducer,
-  CompetitorPrompt
+  CompetitorPrompt,
+  isPageSSRed
 }) => (node, view, getPos, decorations) => {
   const {
     portalProviderAPI,
@@ -190,7 +207,8 @@ export const blockCardNodeView = ({
     actionOptions,
     pluginInjectionApi,
     onClickCallback: onClickCallback,
-    CompetitorPrompt
+    CompetitorPrompt,
+    isPageSSRed
   };
   const isDatasource = isDatasourceNode(node);
   if (isDatasource) {

package/dist/es2019/nodeviews/embedCard.js

@@ -12,6 +12,7 @@ import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-
 import { akEditorFullPageNarrowBreakout, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
+import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
@@ -300,7 +301,8 @@ export class EmbedCardComponent extends React.PureComponent {
       pluginInjectionApi,
       actionOptions,
       onClick,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.props;
     const {
       url,
@@ -330,7 +332,21 @@ export class EmbedCardComponent extends React.PureComponent {
       pctWidth,
       fullWidthMode
     };
-    const smartCard = /*#__PURE__*/React.createElement(SmartCard, {
+    const smartCard = isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true) ? /*#__PURE__*/React.createElement(CardSSR, {
+      key: url,
+      url: url,
+      appearance: "embed",
+      onClick: onClick,
+      onResolve: this.onResolve,
+      onError: this.onError,
+      frameStyle: "show",
+      inheritDimensions: true,
+      platform: 'web',
+      container: this.scrollContainer,
+      embedIframeRef: this.embedIframeRef,
+      actionOptions: actionOptions,
+      CompetitorPrompt: CompetitorPrompt
+    }) : /*#__PURE__*/React.createElement(SmartCard, {
       key: url,
       url: url,
       appearance: "embed",
@@ -386,7 +402,8 @@ export const EmbedOrBlockCardComponent = props => {
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   }) : /*#__PURE__*/React.createElement(EmbedCardComponent, {
     id: props.id,
     node: props.node,
@@ -404,7 +421,8 @@ export const EmbedOrBlockCardComponent = props => {
     smartCard: props.smartCard,
     hasPreview: props.hasPreview,
     liveHeight: props.liveHeight,
-    initialAspectRatio: props.initialAspectRatio
+    initialAspectRatio: props.initialAspectRatio,
+    isPageSSRed: props.isPageSSRed
   });
 };
 const WrappedEmbedCardWithCondition = componentWithCondition(() => expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true), EmbedOrBlockCardComponent, EmbedCardComponent);
@@ -442,7 +460,8 @@ export class EmbedCard extends ReactNodeView {
       dispatchAnalyticsEvent,
       pluginInjectionApi,
       onClickCallback,
-      CompetitorPrompt
+      CompetitorPrompt,
+      isPageSSRed
     } = this.reactComponentProps;
     return /*#__PURE__*/React.createElement(WrappedEmbedCard, {
       node: this.node,
@@ -455,7 +474,8 @@ export class EmbedCard extends ReactNodeView {
       pluginInjectionApi: pluginInjectionApi,
       onClickCallback: onClickCallback,
       id: this.id,
-      CompetitorPrompt: CompetitorPrompt
+      CompetitorPrompt: CompetitorPrompt,
+      isPageSSRed: isPageSSRed
     });
   }
   destroy() {
@@ -471,7 +491,8 @@ export const embedCardNodeView = ({
   pluginInjectionApi,
   actionOptions,
   onClickCallback,
-  CompetitorPrompt
+  CompetitorPrompt,
+  isPageSSRed
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
@@ -486,7 +507,8 @@ export const embedCardNodeView = ({
     pluginInjectionApi,
     actionOptions,
     onClickCallback: onClickCallback,
-    CompetitorPrompt
+    CompetitorPrompt,
+    isPageSSRed
   };
   return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
 };

package/dist/es2019/nodeviews/inlineCard.js

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

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

@@ -0,0 +1,73 @@
+import React from 'react';
+import { linkMessages } from '@atlaskit/editor-common/messages';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import PanelRightIcon from '@atlaskit/icon/core/panel-right';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+import { Inline, Box, Flex } from '@atlaskit/primitives/compiled';
+import { getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
+export const OpenPreviewPanelToolbarButton = ({
+  node,
+  intl
+}) => {
+  const {
+    store,
+    isPreviewPanelAvailable,
+    openPreviewPanel
+  } = useSmartLinkContext();
+  const url = node.attrs.url;
+  const cardState = store === null || store === void 0 ? void 0 : store.getState()[url];
+  if (cardState) {
+    const ari = getObjectAri(cardState.details);
+    const name = getObjectName(cardState.details);
+    const iconUrl = getObjectIconUrl(cardState.details);
+    const isPanelAvailable = ari && (isPreviewPanelAvailable === null || isPreviewPanelAvailable === void 0 ? void 0 : isPreviewPanelAvailable({
+      ari
+    }));
+    const handleOpenGlancePanelClick = () => {
+      if (openPreviewPanel && isPanelAvailable) {
+        openPreviewPanel({
+          url,
+          ari,
+          name: name || '',
+          iconUrl
+        });
+      }
+    };
+    const title = intl.formatMessage(linkMessages.openPreviewPanel);
+    const icon = areToolbarFlagsEnabled() ? /*#__PURE__*/React.createElement(PanelRightIcon, {
+      label: "",
+      spacing: "spacious"
+    }) :
+    /*#__PURE__*/
+    // This is a hack required for Jira until areToolbarFlagsEnabled are enabled to ensure the icon has padding
+    // Padding is removed when areToolbarFlagsEnabed for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
+    React.createElement(Inline, {
+      as: "span",
+      space: "space.050",
+      alignBlock: "center"
+    }, /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      "aria-hidden": true,
+      role: "presentation"
+    }), /*#__PURE__*/React.createElement(PanelRightIcon, {
+      label: "",
+      spacing: "spacious"
+    }), /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      "aria-hidden": true,
+      role: "presentation"
+    }));
+    if (openPreviewPanel && isPanelAvailable) {
+      return /*#__PURE__*/React.createElement(Flex, {
+        gap: "space.050"
+      }, /*#__PURE__*/React.createElement(Button, {
+        testId: "open-preview-panel-floating-toolbar-button",
+        onClick: handleOpenGlancePanelClick,
+        icon: icon,
+        title: title
+      }));
+    }
+  }
+  return null;
+};

package/dist/es2019/ui/toolbar.js

@@ -35,6 +35,7 @@ import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
 import { getCustomHyperlinkAppearanceDropdown } from './HyperlinkToolbarAppearanceDropdown';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 import { getLinkAppearanceDropdown } from './LinkToolbarAppearanceDropdown';
+import { OpenPreviewPanelToolbarButton } from './OpenPreviewButton';
 import { ToolbarViewedEvent } from './ToolbarViewedEvent';
 export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
@@ -320,7 +321,16 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       testId: 'link-toolbar-edit-link-button',
       onClick: getEditLinkCallback(editorAnalyticsApi, true)
     }];
-    const toolbarItems = isNewEditorToolbarDisabled ? [...editItems, ...commentItems, {
+    const openPreviewPanelItems = fg('platform_editor_preview_panel_linking') ? [{
+      type: 'custom',
+      fallback: [],
+      render: () => /*#__PURE__*/React.createElement(OpenPreviewPanelToolbarButton, {
+        node: node,
+        intl: intl,
+        editorAnalyticsApi: editorAnalyticsApi
+      })
+    }] : [];
+    const toolbarItems = isNewEditorToolbarDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -357,7 +367,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       title: intl.formatMessage(commonMessages.remove),
       onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-    }] : [...editButtonItems, ...(fg('platform_editor_controls_patch_15') ? [...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
+    }] : [...openPreviewPanelItems, ...editButtonItems, ...(fg('platform_editor_controls_patch_15') ? [...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
       type: 'separator',
       fullHeight: true
     }] : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), {