@atlaskit/editor-plugin-card 7.2.7 → 7.3.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/editor-plugin-card
 
+## 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
+
+- [#198611](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198611)
+  [`a608f23cb3d4e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a608f23cb3d4e) -
+  [https://product-fabric.atlassian.net/browse/ED-28628](ED-28628) - add SSR support for smart cards
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.2.7
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCard.js

@@ -18,6 +18,7 @@ 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");
@@ -110,7 +111,8 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
     exposure: true
   }) ? handleOnClick : propsOnClick;
   var card = (0, _react.useMemo)(function () {
-    if (isPageSSRed && url) {
+    // 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)) {
       return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
         key: url,
         url: url,

package/dist/cjs/nodeviews/lazy-block-card.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.lazyBlockCardView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _blockCard = require("./blockCard");
 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" != (0, _typeof2.default)(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 lazyBlockCardView = exports.lazyBlockCardView = function lazyBlockCardView(props) {
-  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
+  var isPageSSRed = props.isPageSSRed;
+  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || isPageSSRed && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
     return (0, _blockCard.blockCardNodeView)(props);
   }
   return (0, _lazyNodeView.withLazyLoading)({

package/dist/cjs/nodeviews/lazy-embed-card.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.lazyEmbedCardView = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _embedCard = require("./embedCard");
 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" != (0, _typeof2.default)(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 lazyEmbedCardView = exports.lazyEmbedCardView = function lazyEmbedCardView(props) {
-  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
+  var isPageSSRed = props.isPageSSRed;
+  if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || isPageSSRed && (0, _expValEquals.expValEquals)('platform_editor_smart_card_otp', 'isEnabled', true)) {
     return (0, _embedCard.embedCardNodeView)(props);
   }
   return (0, _lazyNodeView.withLazyLoading)({

package/dist/cjs/nodeviews/lazy-inline-card.js

@@ -11,7 +11,8 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 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" != (0, _typeof2.default)(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 lazyInlineCardView = exports.lazyInlineCardView = function lazyInlineCardView(props) {
-  var isPageSSRed = props.isPageSSRed || false;
+  var _props$isPageSSRed = props.isPageSSRed,
+    isPageSSRed = _props$isPageSSRed === void 0 ? false : _props$isPageSSRed;
   if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || isPageSSRed) {
     return (0, _inlineCard.inlineCardNodeView)(props);
   }

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

@@ -244,6 +244,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             onClickCallback: onClickCallback,
             allowDatasource: options.allowDatasource,
             inlineCardViewProducer: inlineCardViewProducer,
+            isPageSSRed: isPageSSRed,
             CompetitorPrompt: options.CompetitorPrompt
           }),
           embedCard: (0, _lazyEmbedCard.lazyEmbedCardView)({
@@ -253,6 +254,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             pluginInjectionApi: pluginInjectionApi,
             actionOptions: actionOptions,
             onClickCallback: options.onClickCallback,
+            isPageSSRed: isPageSSRed,
             CompetitorPrompt: options.CompetitorPrompt
           })
         }

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/inlineCard.js

@@ -8,6 +8,7 @@ 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';
@@ -106,7 +107,8 @@ export const InlineCard = /*#__PURE__*/memo(({
     exposure: true
   }) ? handleOnClick : propsOnClick;
   const card = useMemo(() => {
-    if (isPageSSRed && url) {
+    // 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)) {
       return /*#__PURE__*/React.createElement(CardSSR, {
         key: url,
         url: url,

package/dist/es2019/nodeviews/lazy-block-card.js

@@ -1,8 +1,12 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { blockCardNodeView } from './blockCard';
 export const lazyBlockCardView = props => {
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
+  const {
+    isPageSSRed
+  } = props;
+  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
     return blockCardNodeView(props);
   }
   return withLazyLoading({

package/dist/es2019/nodeviews/lazy-embed-card.js

@@ -1,8 +1,12 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { embedCardNodeView } from './embedCard';
 export const lazyEmbedCardView = props => {
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
+  const {
+    isPageSSRed
+  } = props;
+  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
     return embedCardNodeView(props);
   }
   return withLazyLoading({

package/dist/es2019/nodeviews/lazy-inline-card.js

@@ -2,7 +2,9 @@ import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { inlineCardNodeView } from './inlineCard';
 export const lazyInlineCardView = props => {
-  const isPageSSRed = props.isPageSSRed || false;
+  const {
+    isPageSSRed = false
+  } = props;
   if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed) {
     return inlineCardNodeView(props);
   }

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

@@ -241,6 +241,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           onClickCallback,
           allowDatasource: options.allowDatasource,
           inlineCardViewProducer,
+          isPageSSRed,
           CompetitorPrompt: options.CompetitorPrompt
         }),
         embedCard: lazyEmbedCardView({
@@ -250,6 +251,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           pluginInjectionApi,
           actionOptions,
           onClickCallback: options.onClickCallback,
+          isPageSSRed,
           CompetitorPrompt: options.CompetitorPrompt
         })
       },

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

package/dist/esm/nodeviews/inlineCard.js

@@ -8,6 +8,7 @@ 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';
@@ -99,7 +100,8 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
     exposure: true
   }) ? handleOnClick : propsOnClick;
   var card = useMemo(function () {
-    if (isPageSSRed && url) {
+    // 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)) {
       return /*#__PURE__*/React.createElement(CardSSR, {
         key: url,
         url: url,

package/dist/esm/nodeviews/lazy-block-card.js

@@ -1,8 +1,10 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { blockCardNodeView } from './blockCard';
 export var lazyBlockCardView = function lazyBlockCardView(props) {
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
+  var isPageSSRed = props.isPageSSRed;
+  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
     return blockCardNodeView(props);
   }
   return withLazyLoading({

package/dist/esm/nodeviews/lazy-embed-card.js

@@ -1,8 +1,10 @@
 import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { embedCardNodeView } from './embedCard';
 export var lazyEmbedCardView = function lazyEmbedCardView(props) {
-  if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
+  var isPageSSRed = props.isPageSSRed;
+  if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed && expValEquals('platform_editor_smart_card_otp', 'isEnabled', true)) {
     return embedCardNodeView(props);
   }
   return withLazyLoading({

package/dist/esm/nodeviews/lazy-inline-card.js

@@ -2,7 +2,8 @@ import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { inlineCardNodeView } from './inlineCard';
 export var lazyInlineCardView = function lazyInlineCardView(props) {
-  var isPageSSRed = props.isPageSSRed || false;
+  var _props$isPageSSRed = props.isPageSSRed,
+    isPageSSRed = _props$isPageSSRed === void 0 ? false : _props$isPageSSRed;
   if (editorExperiment('platform_editor_exp_lazy_node_views', false) || isPageSSRed) {
     return inlineCardNodeView(props);
   }

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

@@ -237,6 +237,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             onClickCallback: onClickCallback,
             allowDatasource: options.allowDatasource,
             inlineCardViewProducer: inlineCardViewProducer,
+            isPageSSRed: isPageSSRed,
             CompetitorPrompt: options.CompetitorPrompt
           }),
           embedCard: lazyEmbedCardView({
@@ -246,6 +247,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             pluginInjectionApi: pluginInjectionApi,
             actionOptions: actionOptions,
             onClickCallback: options.onClickCallback,
+            isPageSSRed: isPageSSRed,
             CompetitorPrompt: options.CompetitorPrompt
           })
         }

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

@@ -0,0 +1,71 @@
+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 var OpenPreviewPanelToolbarButton = function OpenPreviewPanelToolbarButton(_ref) {
+  var node = _ref.node,
+    intl = _ref.intl;
+  var _useSmartLinkContext = 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 = getObjectAri(cardState.details);
+    var name = getObjectName(cardState.details);
+    var iconUrl = 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(linkMessages.openPreviewPanel);
+    var 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/esm/ui/toolbar.js

@@ -39,6 +39,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 var removeCard = function removeCard(editorAnalyticsApi) {
   return commandWithMetadata(function (state, dispatch) {
@@ -321,7 +322,18 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         testId: 'link-toolbar-edit-link-button',
         onClick: getEditLinkCallback(editorAnalyticsApi, true)
       }];
-      var toolbarItems = isNewEditorToolbarDisabled ? [].concat(editItems, commentItems, [{
+      var openPreviewPanelItems = fg('platform_editor_preview_panel_linking') ? [{
+        type: 'custom',
+        fallback: [],
+        render: function render() {
+          return /*#__PURE__*/React.createElement(OpenPreviewPanelToolbarButton, {
+            node: node,
+            intl: intl,
+            editorAnalyticsApi: editorAnalyticsApi
+          });
+        }
+      }] : [];
+      var toolbarItems = isNewEditorToolbarDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: LinkExternalIcon,
@@ -358,7 +370,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(commonMessages.remove),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-      }]) : [].concat(editButtonItems, _toConsumableArray(fg('platform_editor_controls_patch_15') ? [].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }]) : [].concat(openPreviewPanelItems, editButtonItems, _toConsumableArray(fg('platform_editor_controls_patch_15') ? [].concat(_toConsumableArray(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
         type: 'separator',
         fullHeight: true
       }]) : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{

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

@@ -13,19 +13,19 @@ export declare class BlockCardComponent extends React.PureComponent<SmartCardPro
         id?: string;
     });
     onResolve: (data: {
-        url?: string | undefined;
-        title?: string | undefined;
+        url?: string;
+        title?: string;
     }) => void;
     componentWillUnmount(): void;
     private removeCardDispatched;
     private removeCard;
     gapCursorSpan: () => React.JSX.Element | undefined;
     onError: ({ err }: {
-        err?: Error | undefined;
+        err?: Error;
     }) => void;
     render(): React.JSX.Element;
 }
-export type BlockCardNodeViewProps = Pick<SmartCardProps, 'actionOptions' | 'pluginInjectionApi' | 'onClickCallback' | 'CompetitorPrompt'>;
+export type BlockCardNodeViewProps = Pick<SmartCardProps, 'actionOptions' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
     private id;
     unsubscribe: (() => void) | undefined;
@@ -43,6 +43,7 @@ export interface BlockCardNodeViewProperties {
     onClickCallback: BlockCardNodeViewProps['onClickCallback'];
     allowDatasource: boolean | undefined;
     inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
+    isPageSSRed: BlockCardNodeViewProps['isPageSSRed'];
     CompetitorPrompt?: React.ComponentType<{
         sourceUrl: string;
         linkType?: string;

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

@@ -32,7 +32,7 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
     handleColumnResize: (key: string, width: number) => void;
     handleWrappedColumnChange: (key: string, shouldWrap: boolean) => void;
     onError: ({ err }: {
-        err?: Error | undefined;
+        err?: Error;
     }) => void;
     private getColumnsInfo;
     render(): jsx.JSX.Element | null;