@atlaskit/editor-plugin-card 2.6.2 → 2.6.4

package/dist/es2019/nodeviews/inlineCard.js

@@ -93,7 +93,7 @@ export const InlineCard = /*#__PURE__*/memo(({
 const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 const WrappedInlineCard = Card(InlineCard, UnsupportedInline);
 export function InlineCardNodeView(props) {
-  var _useSharedPluginState, _useSharedPluginState2;
+  var _floatingToolbarState;
   const {
     useAlternativePreloader,
     node,
@@ -105,18 +105,19 @@ export function InlineCardNodeView(props) {
     allowBlockCards,
     enableInlineUpgradeFeatures,
     pluginInjectionApi,
-    onClickCallback
+    onClickCallback,
+    __livePage
   } = props;
   const [isOverlayHovered, setIsOverlayHovered] = useState(false);
-  const floatingToolbarNode = (_useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 ? void 0 : (_useSharedPluginState2 = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.node;
-  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+  const {
+    editorViewModeState,
+    floatingToolbarState
+  } = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorViewMode']);
+  const floatingToolbarNode = floatingToolbarState === null || floatingToolbarState === void 0 ? void 0 : (_floatingToolbarState = floatingToolbarState.configWithNodeInfo) === null || _floatingToolbarState === void 0 ? void 0 : _floatingToolbarState.node;
+  if (__livePage && fg('platform.linking-platform.smart-links-in-live-pages')) {
     const showHoverPreview = floatingToolbarNode !== node;
     const livePagesHoverCardFadeInDelay = 800;
-    return /*#__PURE__*/React.createElement(OverlayWrapper, {
-      targetElementPos: getPos(),
-      view: view,
-      isHoveredCallback: setIsOverlayHovered
-    }, /*#__PURE__*/React.createElement(WrappedInlineCard, {
+    const inlineCard = /*#__PURE__*/React.createElement(WrappedInlineCard, {
       isHovered: isOverlayHovered,
       node: node,
       view: view,
@@ -129,7 +130,12 @@ export function InlineCardNodeView(props) {
       hoverPreviewOptions: {
         fadeInDelay: livePagesHoverCardFadeInDelay
       }
-    }));
+    });
+    return (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? inlineCard : /*#__PURE__*/React.createElement(OverlayWrapper, {
+      targetElementPos: getPos(),
+      view: view,
+      isHoveredCallback: setIsOverlayHovered
+    }, inlineCard);
   }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,

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

@@ -59,7 +59,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
     showUpgradeDiscoverability,
     allowEmbeds,
     allowBlockCards,
-    onClickCallback
+    onClickCallback,
+    // @ts-ignore Temporary solution to check for Live Page editor.
+    __livePage
   } = options;
   const enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
   const inlineCardViewProducer = getInlineNodeViewProducer({
@@ -73,11 +75,14 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
       allowEmbeds,
       allowBlockCards,
       pluginInjectionApi,
-      onClickCallback
+      onClickCallback,
+      __livePage
     },
-    extraNodeViewProps: {
-      stopEvent
-    }
+    ...(__livePage && fg('platform.linking-platform.smart-links-in-live-pages') && {
+      extraNodeViewProps: {
+        stopEvent
+      }
+    })
   });
   return new SafePlugin({
     state: {

package/dist/es2019/toolbar.js

@@ -464,6 +464,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       fallback: [],
       render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
         datasourceId: datasourceId,
+        node: node,
         key: "edit-toolbar-item",
         url: metadata.url,
         intl: intl,

package/dist/es2019/ui/{EditToolbarButton.js → EditToolbarButton/EditToolbarButtonPresentation.js}

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -10,33 +10,21 @@ import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlask
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ButtonItem } from '@atlaskit/menu';
 import { Flex } from '@atlaskit/primitives';
-import { editDatasource } from '../ui/EditDatasourceButton';
-import { focusEditorView, isDatasourceConfigEditable } from '../utils';
-import { CardContextProvider } from './CardContextProvider';
-import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
+import { focusEditorView } from '../../utils';
+import { editDatasource } from '../EditDatasourceButton';
 const dropdownExpandContainer = css({
   margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
 });
-const EditToolbarButtonWithCardContext = props => {
-  var _response$datasourceI;
-  const {
-    cardContext,
-    currentAppearance,
-    editorAnalyticsApi,
-    editorView,
-    intl,
-    onLinkEditClick,
-    url
-  } = props;
-  const {
-    extensionKey,
-    ...response
-  } = useFetchDatasourceInfo({
-    isRegularCardNode: true,
-    url,
-    cardContext
-  });
-  const datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
+const EditToolbarButtonPresentation = ({
+  datasourceId,
+  currentAppearance,
+  editorAnalyticsApi,
+  editVariant,
+  editorView,
+  extensionKey,
+  onLinkEditClick,
+  intl
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef();
   const toggleOpen = () => setIsOpen(open => !open);
@@ -47,25 +35,6 @@ const EditToolbarButtonWithCardContext = props => {
       focusEditorView(editorView);
     }
   }, [editorView, onLinkEditClick]);
-  const editVariant = useMemo(() => {
-    const hasUrl = url !== null && url !== undefined;
-    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
-      if (hasUrl) {
-        return 'edit-link';
-      }
-      return 'none';
-    }
-    if (hasUrl) {
-      var _cardContext$store, _urlState$error;
-      const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
-      if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
-        return 'edit-link';
-      }
-      return 'edit-dropdown';
-    } else {
-      return 'edit-datasource';
-    }
-  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
   const onEditDatasource = useCallback(() => {
     if (editorView && datasourceId) {
       editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
@@ -135,26 +104,4 @@ const EditToolbarButtonWithCardContext = props => {
       return null;
   }
 };
-export const EditToolbarButton = props => {
-  const {
-    currentAppearance,
-    datasourceId,
-    editorAnalyticsApi,
-    editorView,
-    intl,
-    onLinkEditClick,
-    url
-  } = props;
-  return jsx(CardContextProvider, null, ({
-    cardContext
-  }) => jsx(EditToolbarButtonWithCardContext, {
-    datasourceId: datasourceId,
-    url: url,
-    intl: intl,
-    editorAnalyticsApi: editorAnalyticsApi,
-    editorView: editorView,
-    cardContext: cardContext,
-    onLinkEditClick: onLinkEditClick,
-    currentAppearance: currentAppearance
-  }));
-};
+export default EditToolbarButtonPresentation;

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

@@ -0,0 +1,278 @@
+/** @jsx jsx */
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
+import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import { ButtonItem } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex } from '@atlaskit/primitives';
+import { editDatasource } from '../../ui/EditDatasourceButton';
+import { focusEditorView, isDatasourceConfigEditable } from '../../utils';
+import { CardContextProvider } from '../CardContextProvider';
+import { useFetchDatasourceDataInfo } from '../useFetchDatasourceDataInfo';
+import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
+import EditToolbarButtonPresentation from './EditToolbarButtonPresentation';
+const dropdownExpandContainer = css({
+  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+});
+const EditToolbarButtonWithCardContext = props => {
+  var _response$datasourceI;
+  const {
+    cardContext,
+    currentAppearance,
+    editorAnalyticsApi,
+    editorView,
+    intl,
+    onLinkEditClick,
+    url
+  } = props;
+  const {
+    extensionKey,
+    ...response
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
+  const datasourceId = (_response$datasourceI = response.datasourceId) !== null && _response$datasourceI !== void 0 ? _response$datasourceI : props.datasourceId;
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef();
+  const toggleOpen = () => setIsOpen(open => !open);
+  const onClose = () => setIsOpen(false);
+  const onEditLink = useCallback(() => {
+    if (editorView) {
+      onLinkEditClick(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
+    }
+  }, [editorView, onLinkEditClick]);
+  const editVariant = useMemo(() => {
+    const hasUrl = url !== null && url !== undefined;
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      if (hasUrl) {
+        return 'edit-link';
+      }
+      return 'none';
+    }
+    if (hasUrl) {
+      var _cardContext$store, _urlState$error;
+      const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+      if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+        return 'edit-link';
+      }
+      return 'edit-dropdown';
+    } else {
+      return 'edit-datasource';
+    }
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  const onEditDatasource = useCallback(() => {
+    if (editorView && datasourceId) {
+      editDatasource(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
+      focusEditorView(editorView);
+    }
+  }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
+  switch (editVariant) {
+    case 'edit-link':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-link",
+          onClick: onEditLink
+        }, jsx(FormattedMessage, linkToolbarMessages.editLink)), jsx(Separator, null));
+      }
+    case 'edit-datasource':
+      {
+        return jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-datasource",
+          tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
+          onClick: onEditDatasource
+        }, jsx(FormattedMessage, linkToolbarMessages.editDatasourceStandalone)), jsx(Separator, null));
+      }
+    case 'edit-dropdown':
+      {
+        const trigger = jsx(Flex, {
+          gap: "space.050"
+        }, jsx(Button, {
+          testId: "edit-dropdown-trigger",
+          iconAfter: jsx("span", {
+            css: dropdownExpandContainer
+          }, jsx(ExpandIcon, {
+            label: intl.formatMessage(messages.editDropdownTriggerTitle)
+          })),
+          onClick: toggleOpen,
+          selected: isOpen,
+          disabled: false,
+          ariaHasPopup: true
+        }, jsx(FormattedMessage, messages.editDropdownTriggerTitle)), jsx(Separator, null));
+        return jsx(Flex, {
+          ref: containerRef
+        }, jsx(UiDropdown, {
+          mountTo: containerRef.current,
+          isOpen: isOpen,
+          handleClickOutside: onClose,
+          handleEscapeKeydown: onClose,
+          trigger: trigger,
+          scrollableElement: containerRef.current,
+          arrowKeyNavigationProviderOptions: {
+            type: ArrowKeyNavigationType.MENU
+          }
+        }, jsx(ButtonItem, {
+          key: "edit.link",
+          onClick: onEditLink,
+          testId: "edit-dropdown-edit-link-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditLinkTitle)), jsx(ButtonItem, {
+          key: "edit.datasource",
+          onClick: onEditDatasource,
+          testId: "edit-dropdown-edit-datasource-item"
+        }, jsx(FormattedMessage, messages.editDropdownEditDatasourceTitle))));
+      }
+    case 'none':
+    default:
+      return null;
+  }
+};
+const EditToolbarButtonWithUrl = props => {
+  const {
+    cardContext,
+    currentAppearance,
+    editorAnalyticsApi,
+    editorView,
+    intl,
+    onLinkEditClick,
+    url
+  } = props;
+  const {
+    extensionKey,
+    datasourceId
+  } = useFetchDatasourceInfo({
+    isRegularCardNode: true,
+    url,
+    cardContext
+  });
+  const editVariant = useMemo(() => {
+    var _cardContext$store2, _urlState$error2;
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return 'edit-link';
+    }
+    const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.getState()[url];
+    if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error2 = urlState.error) === null || _urlState$error2 === void 0 ? void 0 : _urlState$error2.kind) === 'fatal') {
+      return 'edit-link';
+    }
+    return 'edit-dropdown';
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
+  return jsx(EditToolbarButtonPresentation, {
+    datasourceId: datasourceId,
+    currentAppearance: currentAppearance,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editVariant: editVariant,
+    editorView: editorView,
+    extensionKey: extensionKey,
+    onLinkEditClick: onLinkEditClick,
+    intl: intl
+  });
+};
+const EditToolbarButtonWithDatasourceId = props => {
+  const {
+    currentAppearance,
+    editorAnalyticsApi,
+    editorView,
+    intl,
+    onLinkEditClick,
+    datasourceId,
+    node
+  } = props;
+  const fetchData = useMemo(() => {
+    try {
+      var _attrs$datasource$vie, _attrs$datasource$vie2;
+      const attrs = node.attrs;
+      const parameters = attrs.datasource.parameters;
+      const visibleColumnKeys = (_attrs$datasource$vie = attrs.datasource.views[0]) === null || _attrs$datasource$vie === void 0 ? void 0 : (_attrs$datasource$vie2 = _attrs$datasource$vie.properties) === null || _attrs$datasource$vie2 === void 0 ? void 0 : _attrs$datasource$vie2.columns.map(c => c.key);
+      return {
+        parameters,
+        visibleColumnKeys
+      };
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  }, [node.attrs]);
+  const {
+    extensionKey
+  } = useFetchDatasourceDataInfo({
+    datasourceId,
+    parameters: fetchData === null || fetchData === void 0 ? void 0 : fetchData.parameters,
+    visibleColumnKeys: fetchData === null || fetchData === void 0 ? void 0 : fetchData.visibleColumnKeys
+  });
+  const editVariant = useMemo(() => {
+    if (!datasourceId || !isDatasourceConfigEditable(datasourceId)) {
+      return 'none';
+    }
+    return 'edit-datasource';
+  }, [datasourceId]);
+  return jsx(EditToolbarButtonPresentation, {
+    datasourceId: datasourceId,
+    currentAppearance: currentAppearance,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editVariant: editVariant,
+    editorView: editorView,
+    extensionKey: extensionKey,
+    onLinkEditClick: onLinkEditClick,
+    intl: intl
+  });
+};
+export const EditToolbarButton = props => {
+  const {
+    currentAppearance,
+    datasourceId,
+    editorAnalyticsApi,
+    editorView,
+    intl,
+    onLinkEditClick,
+    url
+  } = props;
+  return jsx(CardContextProvider, null, ({
+    cardContext
+  }) => {
+    if (fg('enable_datasource_nourl_edit_dropdown_datafetch')) {
+      if (props.url) {
+        return jsx(EditToolbarButtonWithUrl, {
+          url: props.url,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          cardContext: cardContext,
+          onLinkEditClick: onLinkEditClick,
+          currentAppearance: currentAppearance
+        });
+      }
+      if (props.datasourceId && props.node) {
+        return jsx(EditToolbarButtonWithDatasourceId, {
+          datasourceId: props.datasourceId,
+          node: props.node,
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          editorView: editorView,
+          onLinkEditClick: onLinkEditClick,
+          currentAppearance: currentAppearance
+        });
+      }
+    }
+    return jsx(EditToolbarButtonWithCardContext, {
+      datasourceId: datasourceId,
+      url: url,
+      intl: intl,
+      editorAnalyticsApi: editorAnalyticsApi,
+      editorView: editorView,
+      cardContext: cardContext,
+      onLinkEditClick: onLinkEditClick,
+      currentAppearance: currentAppearance
+    });
+  });
+};

package/dist/es2019/ui/EditToolbarButton/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/useFetchDatasourceDataInfo.js

@@ -0,0 +1,41 @@
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE, useDatasourceClientExtension } from '@atlaskit/link-client-extension';
+export const useFetchDatasourceDataInfo = ({
+  datasourceId,
+  parameters,
+  visibleColumnKeys
+}) => {
+  const [extensionKey, setExtensionKey] = useState(undefined);
+  const {
+    getDatasourceData
+  } = useDatasourceClientExtension();
+  useEffect(() => {
+    const fetchDatasource = async () => {
+      try {
+        if (!datasourceId || !parameters || !visibleColumnKeys) {
+          return;
+        }
+        const datasourceDataRequest = {
+          parameters,
+          pageSize: DEFAULT_GET_DATASOURCE_DATA_PAGE_SIZE,
+          pageCursor: undefined,
+          fields: visibleColumnKeys,
+          includeSchema: true
+        };
+        const {
+          meta
+        } = await getDatasourceData(datasourceId, datasourceDataRequest, false);
+        setExtensionKey(meta.extensionKey);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+        setExtensionKey(undefined);
+      }
+    };
+    void fetchDatasource();
+  }, [getDatasourceData, visibleColumnKeys, parameters, datasourceId]);
+  return {
+    extensionKey
+  };
+};

package/dist/esm/nodeviews/genericCard.js

@@ -22,7 +22,8 @@ var WithClickHandler = function WithClickHandler(_ref) {
   var pluginInjectionApi = _ref.pluginInjectionApi,
     url = _ref.url,
     onClickCallback = _ref.onClickCallback,
-    children = _ref.children;
+    children = _ref.children,
+    __livePage = _ref.__livePage;
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   var onClick = useCallback(function (event) {
@@ -43,7 +44,7 @@ var WithClickHandler = function WithClickHandler(_ref) {
      *
      * const allowNavigation = isLivePage && !onClickCallback;
      */
-    var _allowNavigation = !onClickCallback;
+    var _allowNavigation = __livePage && !onClickCallback;
     return /*#__PURE__*/React.createElement(React.Fragment, null, children({
       onClick: _allowNavigation ? undefined : onClick
     }));
@@ -112,7 +113,8 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
         }, /*#__PURE__*/React.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
-          url: url
+          url: url,
+          __livePage: this.props.__livePage
         }, function (_ref2) {
           var onClick = _ref2.onClick;
           return /*#__PURE__*/React.createElement(SmartCardComponent, _extends({

package/dist/esm/nodeviews/inlineCard.js

@@ -92,7 +92,7 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
 var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 var WrappedInlineCard = Card(InlineCard, UnsupportedInline);
 export function InlineCardNodeView(props) {
-  var _useSharedPluginState;
+  var _floatingToolbarState;
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
@@ -103,20 +103,20 @@ export function InlineCardNodeView(props) {
     allowBlockCards = props.allowBlockCards,
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
-    onClickCallback = props.onClickCallback;
+    onClickCallback = props.onClickCallback,
+    __livePage = props.__livePage;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOverlayHovered = _useState2[0],
     setIsOverlayHovered = _useState2[1];
-  var floatingToolbarNode = (_useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar']).floatingToolbarState) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.configWithNodeInfo) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.node;
-  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['floatingToolbar', 'editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    floatingToolbarState = _useSharedPluginState.floatingToolbarState;
+  var floatingToolbarNode = floatingToolbarState === null || floatingToolbarState === void 0 || (_floatingToolbarState = floatingToolbarState.configWithNodeInfo) === null || _floatingToolbarState === void 0 ? void 0 : _floatingToolbarState.node;
+  if (__livePage && fg('platform.linking-platform.smart-links-in-live-pages')) {
     var showHoverPreview = floatingToolbarNode !== node;
     var livePagesHoverCardFadeInDelay = 800;
-    return /*#__PURE__*/React.createElement(OverlayWrapper, {
-      targetElementPos: getPos(),
-      view: view,
-      isHoveredCallback: setIsOverlayHovered
-    }, /*#__PURE__*/React.createElement(WrappedInlineCard, {
+    var inlineCard = /*#__PURE__*/React.createElement(WrappedInlineCard, {
       isHovered: isOverlayHovered,
       node: node,
       view: view,
@@ -129,7 +129,12 @@ export function InlineCardNodeView(props) {
       hoverPreviewOptions: {
         fadeInDelay: livePagesHoverCardFadeInDelay
       }
-    }));
+    });
+    return (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? inlineCard : /*#__PURE__*/React.createElement(OverlayWrapper, {
+      targetElementPos: getPos(),
+      view: view,
+      isHoveredCallback: setIsOverlayHovered
+    }, inlineCard);
   }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,

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

@@ -1,5 +1,5 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import rafSchedule from 'raf-schd';
@@ -63,9 +63,10 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
       showUpgradeDiscoverability = options.showUpgradeDiscoverability,
       allowEmbeds = options.allowEmbeds,
       allowBlockCards = options.allowBlockCards,
-      onClickCallback = options.onClickCallback;
+      onClickCallback = options.onClickCallback,
+      __livePage = options.__livePage;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
-    var inlineCardViewProducer = getInlineNodeViewProducer({
+    var inlineCardViewProducer = getInlineNodeViewProducer(_objectSpread({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: InlineCardNodeView,
       extraComponentProps: {
@@ -76,12 +77,14 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
         allowEmbeds: allowEmbeds,
         allowBlockCards: allowBlockCards,
         pluginInjectionApi: pluginInjectionApi,
-        onClickCallback: onClickCallback
-      },
+        onClickCallback: onClickCallback,
+        __livePage: __livePage
+      }
+    }, __livePage && fg('platform.linking-platform.smart-links-in-live-pages') && {
       extraNodeViewProps: {
         stopEvent: stopEvent
       }
-    });
+    }));
     return new SafePlugin({
       state: {
         init: function init() {

package/dist/esm/toolbar.js

@@ -466,6 +466,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       render: function render(editorView) {
         return /*#__PURE__*/React.createElement(EditToolbarButton, {
           datasourceId: datasourceId,
+          node: node,
           key: "edit-toolbar-item",
           url: metadata.url,
           intl: intl,