@atlaskit/editor-plugin-card 2.3.2 → 2.3.4

package/dist/es2019/nodeviews/inlineCard.js

@@ -1,11 +1,92 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { UnsupportedInline } from '@atlaskit/editor-common/ui';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
+import React, { memo, useCallback, useMemo } from 'react';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+import OverlayWrapper from '../ui/ConfigureOverlay';
+import { getAwarenessProps } from '../utils';
 import { Card } from './genericCard';
 import { InlineCardWithAwareness } from './inlineCardWithAwareness';
+export const InlineCard = /*#__PURE__*/memo(({
+  node,
+  cardContext,
+  actionOptions,
+  showServerActions,
+  useAlternativePreloader,
+  view,
+  getPos,
+  onClick,
+  onResolve: onRes,
+  isHovered
+}) => {
+  const {
+    url,
+    data
+  } = node.attrs;
+  const scrollContainer = useMemo(() => findOverflowScrollParent(view.dom) || undefined, [view.dom]);
+  const onResolve = useCallback(data => {
+    if (!getPos || typeof getPos === 'boolean') {
+      return;
+    }
+    const {
+      title,
+      url
+    } = data;
+    // don't dispatch immediately since we might be in the middle of
+    // rendering a nodeview
+    rafSchedule(() => {
+      // prosemirror-bump-fix
+      const pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      const tr = view.state.tr;
+      registerCard({
+        title,
+        url,
+        pos
+      })(tr);
+      onRes === null || onRes === void 0 ? void 0 : onRes(tr, title);
+      view.dispatch(tr);
+    })();
+  }, [getPos, view, onRes]);
+  const onError = useCallback(data => {
+    const {
+      url,
+      err
+    } = data;
+    if (err) {
+      throw err;
+    }
+    onResolve({
+      url
+    });
+  }, [onResolve]);
+  const card = useMemo(() => /*#__PURE__*/React.createElement(SmartCard, {
+    key: url,
+    url: url,
+    data: data,
+    appearance: "inline",
+    onClick: onClick,
+    container: scrollContainer,
+    onResolve: onResolve,
+    onError: onError,
+    inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+    actionOptions: actionOptions,
+    showServerActions: showServerActions,
+    isHovered: isHovered
+  }), [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
+
+  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+    value: cardContext.value
+  }, card) : data ? card : null;
+});
 const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
+const WrappedInlineCard = Card(InlineCard, UnsupportedInline);
 export function InlineCardNodeView(props) {
   const {
     useAlternativePreloader,
@@ -20,6 +101,20 @@ export function InlineCardNodeView(props) {
     pluginInjectionApi,
     onClickCallback
   } = props;
+  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+    return /*#__PURE__*/React.createElement(OverlayWrapper, {
+      targetElementPos: getPos(),
+      view: view
+    }, /*#__PURE__*/React.createElement(WrappedInlineCard, {
+      node: node,
+      view: view,
+      getPos: getPos,
+      actionOptions: actionOptions,
+      showServerActions: showServerActions,
+      useAlternativePreloader: useAlternativePreloader,
+      onClickCallback: onClickCallback
+    }));
+  }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,
@@ -30,16 +125,4 @@ export function InlineCardNodeView(props) {
     pluginInjectionApi: pluginInjectionApi,
     onClickCallback: onClickCallback
   }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards)));
-}
-const getAwarenessProps = (editorState, getPos, allowEmbeds, allowBlockCards) => {
-  var _editorState$selectio, _editorState$selectio2, _editorState$selectio3;
-  const linkPosition = getPos && typeof getPos() === 'number' ? getPos() : undefined;
-  const canBeUpgradedToEmbed = !!linkPosition && allowEmbeds ? isEmbedSupportedAtPosition(linkPosition, editorState, 'inline') : false;
-  const canBeUpgradedToBlock = !!linkPosition && allowBlockCards ? isBlockSupportedAtPosition(linkPosition, editorState, 'inline') : false;
-  const isSelected = editorState.selection instanceof NodeSelection && ((_editorState$selectio = editorState.selection) === null || _editorState$selectio === void 0 ? void 0 : (_editorState$selectio2 = _editorState$selectio.node) === null || _editorState$selectio2 === void 0 ? void 0 : _editorState$selectio2.type) === editorState.schema.nodes.inlineCard && ((_editorState$selectio3 = editorState.selection) === null || _editorState$selectio3 === void 0 ? void 0 : _editorState$selectio3.from) === getPos();
-  return {
-    isPulseEnabled: canBeUpgradedToEmbed,
-    isOverlayEnabled: canBeUpgradedToEmbed || canBeUpgradedToBlock,
-    isSelected
-  };
-};
+}

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,10 +1,8 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
-import rafSchedule from 'raf-schd';
-import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { Card as SmartCard } from '@atlaskit/smart-card';
-import { registerCard, registerRemoveOverlay } from '../pm-plugins/actions';
+import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
-const InlineCard = ({
+import { InlineCard } from './inlineCard';
+export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   node,
   cardContext,
   actionOptions,
@@ -12,63 +10,21 @@ const InlineCard = ({
   useAlternativePreloader,
   view,
   getPos,
-  isOverlayEnabled,
-  isPulseEnabled,
   pluginInjectionApi,
-  isSelected = false,
-  onClick
+  onClick,
+  isPulseEnabled,
+  isOverlayEnabled,
+  isSelected
 }) => {
-  const {
-    url,
-    data
-  } = node.attrs;
   const [isHovered, setIsHovered] = useState(false);
   const [isInserted, setIsInserted] = useState(false);
   const [isResolvedViewRendered, setIsResolvedViewRendered] = useState(false);
-  const scrollContainer = useMemo(() => findOverflowScrollParent(view.dom) || undefined, [view.dom]);
-  const onResolve = useCallback(data => {
-    if (!getPos || typeof getPos === 'boolean') {
-      return;
-    }
-    const {
-      title,
-      url
-    } = data;
-    // don't dispatch immediately since we might be in the middle of
-    // rendering a nodeview
-    rafSchedule(() => {
-      // prosemirror-bump-fix
-      const pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      const tr = view.state.tr;
-      registerCard({
-        title,
-        url,
-        pos
-      })(tr);
-      registerRemoveOverlay(() => setIsInserted(false))(tr);
-      view.dispatch(tr);
-    })();
+  const onResolve = useCallback((tr, title) => {
+    registerRemoveOverlay(() => setIsInserted(false))(tr);
     if (title) {
       setIsResolvedViewRendered(true);
     }
-  }, [view, getPos]);
-  const onError = useCallback(data => {
-    const {
-      url,
-      err
-    } = data;
-    if (err) {
-      throw err;
-    }
-    onResolve({
-      url
-    });
-  }, [onResolve]);
-
-  // Begin Upgrade Awareness related code
+  }, []);
   const markMostRecentlyInsertedLink = useCallback(isLinkMostRecentlyInserted => {
     if (isOverlayEnabled) {
       setIsInserted(isLinkMostRecentlyInserted);
@@ -79,49 +35,35 @@ const InlineCard = ({
       setIsHovered(isHovered);
     }
   }, [isOverlayEnabled]);
-  //  End Upgrade Awareness related code
-
-  const innerCard = useMemo(() => /*#__PURE__*/React.createElement(SmartCard, {
-    key: url,
-    url: url,
-    data: data,
-    appearance: "inline",
-    onClick: onClick,
-    container: scrollContainer,
-    onResolve: onResolve,
-    onError: onError,
-    inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+  const innerCard = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
+    node: node,
+    view: view,
+    getPos: getPos,
+    useAlternativePreloader: useAlternativePreloader,
     actionOptions: actionOptions,
     showServerActions: showServerActions,
+    onResolve: onResolve,
+    onClick: onClick,
+    cardContext: cardContext,
     isHovered: isHovered
-  }), [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
-  const card = useMemo(() => {
-    return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
-      isOverlayEnabled: isOverlayEnabled,
-      isPulseEnabled: isPulseEnabled,
-      cardContext: cardContext,
-      getPos: getPos,
-      isHovered: isHovered,
-      isInserted: isInserted,
-      url: url,
-      isSelected: isSelected,
-      isResolvedViewRendered: isResolvedViewRendered,
-      markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
-      pluginInjectionApi: pluginInjectionApi,
-      setOverlayHoveredStyles: setOverlayHoveredStyles,
-      view: view
-    }, innerCard) :
-    /*#__PURE__*/
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    React.createElement("span", {
-      className: "card"
-    }, innerCard);
-  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, view]);
-
-  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
-  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
-    value: cardContext.value
-  }, card) : data ? card : null;
-};
-export const InlineCardWithAwareness = /*#__PURE__*/memo(InlineCard);
+  }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, showServerActions, useAlternativePreloader, view]);
+  return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
+    isOverlayEnabled: isOverlayEnabled,
+    isPulseEnabled: isPulseEnabled,
+    cardContext: cardContext,
+    getPos: getPos,
+    isHovered: isHovered,
+    isInserted: isInserted,
+    url: node.attrs.url,
+    isSelected: isSelected,
+    isResolvedViewRendered: isResolvedViewRendered,
+    markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
+    pluginInjectionApi: pluginInjectionApi,
+    setOverlayHoveredStyles: setOverlayHoveredStyles
+  }, innerCard) :
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  React.createElement("span", {
+    className: "card"
+  }, innerCard);
+});

package/dist/es2019/toolbar.js

@@ -13,8 +13,8 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import CogIcon from '@atlaskit/icon/glyph/editor/settings';
 import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { changeSelectedCardToText } from '../src/pm-plugins/doc';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { changeSelectedCardToText } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
 import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
 import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
@@ -200,7 +200,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
-  const isDatasource = getBooleanFF('platform.linking-platform.editor-datasource-typeguards') ? isDatasourceNode(node) : currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
+  const isDatasource = fg('platform.linking-platform.editor-datasource-typeguards') ? isDatasourceNode(node) : currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
   const shouldRenderDatasourceToolbar = isDatasource &&
   // not showing toolbar in mobile for now since not sure what our plans are for it
   platform !== 'mobile' && cardOptions.allowDatasource && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : (_node$attrs2$datasour = _node$attrs2.datasource) === null || _node$attrs2$datasour === void 0 ? void 0 : _node$attrs2$datasour.id);
@@ -220,7 +220,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     const {
       inlineCard
     } = state.schema.nodes;
-    const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && platform !== 'mobile' && cardOptions.allowDatasource;
+    const isEditDropdownEnabled = platform !== 'mobile' && cardOptions.allowDatasource && fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
     const editItems = isEditDropdownEnabled ? [{
       type: 'custom',
       fallback: [],
@@ -297,7 +297,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     // This code will be executed only for appearances such as "inline", "block" & "embed"
     // For url appearance, please see HyperlinkToolbarAppearanceProps
     if (currentAppearance) {
-      const showDatasourceAppearance = getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && allowDatasource && url;
+      const showDatasourceAppearance = allowDatasource && url && fg('platform.linking-platform.enable-datasource-appearance-toolbar');
       toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), {
         type: 'custom',
         fallback: [],
@@ -329,7 +329,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         type: 'separator'
       });
     }
-    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
+    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource && !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
     if (shouldShowDatasourceEditButton) {
       toolbarItems.unshift({
         type: 'custom',
@@ -364,8 +364,8 @@ export const getHyperlinkToolbarSettingsButton = (intl, editorAnalyticsApi, user
     type: 'button',
     icon: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
-    onClick: getBooleanFF('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined),
-    href: getBooleanFF('platform.editor.card.inject-settings-button') ? userPreferencesLink || getLinkPreferencesURLFromENV() : getLinkPreferencesURLFromENV(),
+    onClick: fg('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined),
+    href: fg('platform.editor.card.inject-settings-button') ? userPreferencesLink || getLinkPreferencesURLFromENV() : getLinkPreferencesURLFromENV(),
     target: '_blank'
   };
 };
@@ -375,7 +375,7 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
     type: 'button',
     icon: CogIcon,
     title: intl.formatMessage(linkToolbarMessages.settingsLink),
-    onClick: getBooleanFF('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined)
+    onClick: fg('platform.editor.card.inject-settings-button') ? openLinkSettings(editorAnalyticsApi, userPreferencesLink) : openLinkSettings(editorAnalyticsApi, undefined)
   };
 };
 export const getSettingsButtonGroup = (intl, editorAnalyticsApi, userPreferencesLink) => {
@@ -386,7 +386,7 @@ export const getSettingsButtonGroup = (intl, editorAnalyticsApi, userPreferences
 const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, platform) => {
   var _node$attrs3;
   const toolbarItems = [];
-  if (isDatasourceConfigEditable(datasourceId) && !getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+  if (isDatasourceConfigEditable(datasourceId) && !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
     toolbarItems.push({
       id: 'editor.edit.datasource',
       type: 'button',
@@ -407,12 +407,12 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     }
     if (
     // FF that controls visibily of the additional toolbar buttons
-    !getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    !fg('platform.linking-platform.enable-datasource-appearance-toolbar')) {
       return false;
     }
 
     // FF to enable additional toolbar buttons based on if the datasource is configurable or not
-    return getBooleanFF('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !isDatasourceConfigEditable(datasourceId);
+    return fg('platform.linking-platform.datasource-enable-toolbar-buttons-for-all-datasources') ? true : !isDatasourceConfigEditable(datasourceId);
   };
   if (canShowAppearanceSwitch()) {
     const {
@@ -458,7 +458,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       type: 'separator'
     });
   }
-  if (getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
+  if (fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
     toolbarItems.push({
       type: 'custom',
       fallback: [],
@@ -517,7 +517,7 @@ export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDis
 };
 export const getStartingToolbarItems = (options, api) => {
   return (intl, link, providerFactory, onEditLink, metadata) => {
-    const isEditDropdownEnabled = getBooleanFF('platform.linking-platform.enable-datasource-edit-dropdown-toolbar') && options.platform !== 'mobile' && options.allowDatasource;
+    const isEditDropdownEnabled = options.platform !== 'mobile' && options.allowDatasource && fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
     const editLinkItem = isEditDropdownEnabled ? [{
       type: 'custom',
       fallback: [],
@@ -580,7 +580,7 @@ export const getStartingToolbarItems = (options, api) => {
   };
 };
 export const getEndingToolbarItems = (options, api) => (intl, link) => {
-  if (getBooleanFF('platform.editor.card.inject-settings-button')) {
+  if (fg('platform.editor.card.inject-settings-button')) {
     /**
      * Require either provider to be supplied (controls link preferences)
      * Or explicit user preferences config in order to enable button

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

@@ -4,11 +4,9 @@ import { useCallback, useEffect, useMemo, 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 { AnalyticsContext } from '@atlaskit/analytics-next';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDiscoverability';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
-import OverlayWrapper from '../ConfigureOverlay';
 import InlineCardOverlay from '../InlineCardOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // editor adds a standard line-height that is bigger than an inline smart link
@@ -31,8 +29,7 @@ export const AwarenessWrapper = ({
   markMostRecentlyInsertedLink,
   pluginInjectionApi,
   setOverlayHoveredStyles,
-  url,
-  view
+  url
 }) => {
   var _cardContext$value2;
   const [isHovered, setIsHovered] = useState(false);
@@ -72,12 +69,6 @@ export const AwarenessWrapper = ({
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   const cardWithOverlay = useMemo(() => {
-    if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
-      return jsx(OverlayWrapper, {
-        targetElementPos: linkPosition,
-        view: view
-      }, children);
-    }
     if (shouldShowLinkOverlay) {
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
@@ -88,7 +79,7 @@ export const AwarenessWrapper = ({
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, view, linkPosition, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
     return (

package/dist/es2019/utils.js

@@ -2,7 +2,7 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { getResolvedAttributes } from '@atlaskit/link-analytics/resolved-attributes';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID, JIRA_LIST_OF_LINKS_DATASOURCE_ID } from '@atlaskit/link-datasource';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { pluginKey } from './pm-plugins/plugin-key';
 export const appearanceForNodeType = spec => {
   if (spec.name === 'inlineCard') {
@@ -68,7 +68,7 @@ export const getResolvedAttributesFromStore = (url, display, store) => {
 };
 export const isDatasourceConfigEditable = datasourceId => {
   const datasourcesWithConfigModal = [JIRA_LIST_OF_LINKS_DATASOURCE_ID, ASSETS_LIST_OF_LINKS_DATASOURCE_ID];
-  if (getBooleanFF('platform.linking-platform.datasource.enable-confluence-search-modal')) {
+  if (fg('platform.linking-platform.datasource.enable-confluence-search-modal')) {
     datasourcesWithConfigModal.push(CONFLUENCE_SEARCH_DATASOURCE_ID);
   }
   return datasourcesWithConfigModal.includes(datasourceId);
@@ -118,4 +118,17 @@ export const focusEditorView = editorView => {
   if (!editorView.hasFocus()) {
     editorView.focus();
   }
+};
+export const getAwarenessProps = (editorState, getPos, allowEmbeds, allowBlockCards) => {
+  var _editorState$selectio, _editorState$selectio2, _editorState$selectio3;
+  const getPosFunction = typeof getPos !== 'boolean' ? getPos : undefined;
+  const linkPosition = getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction();
+  const canBeUpgradedToEmbed = !!linkPosition && allowEmbeds ? isEmbedSupportedAtPosition(linkPosition, editorState, 'inline') : false;
+  const canBeUpgradedToBlock = !!linkPosition && allowBlockCards ? isBlockSupportedAtPosition(linkPosition, editorState, 'inline') : false;
+  const isSelected = editorState.selection instanceof NodeSelection && ((_editorState$selectio = editorState.selection) === null || _editorState$selectio === void 0 ? void 0 : (_editorState$selectio2 = _editorState$selectio.node) === null || _editorState$selectio2 === void 0 ? void 0 : _editorState$selectio2.type) === editorState.schema.nodes.inlineCard && ((_editorState$selectio3 = editorState.selection) === null || _editorState$selectio3 === void 0 ? void 0 : _editorState$selectio3.from) === (getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction());
+  return {
+    isPulseEnabled: canBeUpgradedToEmbed,
+    isOverlayEnabled: canBeUpgradedToEmbed || canBeUpgradedToBlock,
+    isSelected
+  };
 };

package/dist/esm/nodeviews/genericCard.js

@@ -14,7 +14,7 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getAnalyticsEditorAppearance } from '@atlaskit/editor-common/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { changeSelectedCardToLinkFallback } from '../pm-plugins/doc';
 import { getPluginState } from '../pm-plugins/util/state';
 import { titleUrlPairFromNode } from '../utils';
@@ -97,7 +97,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
             // Below is added for the future implementation of Linking Platform namespaced analytics context
             location: analyticsEditorAppearance
           }
-        }, getBooleanFF('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/React.createElement(WithClickHandler, {
+        }, fg('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/React.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
           url: url

package/dist/esm/nodeviews/inlineCard.js

@@ -1,11 +1,90 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import { UnsupportedInline } from '@atlaskit/editor-common/ui';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
+import React, { memo, useCallback, useMemo } from 'react';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+import OverlayWrapper from '../ui/ConfigureOverlay';
+import { getAwarenessProps } from '../utils';
 import { Card } from './genericCard';
 import { InlineCardWithAwareness } from './inlineCardWithAwareness';
+export var InlineCard = /*#__PURE__*/memo(function (_ref) {
+  var node = _ref.node,
+    cardContext = _ref.cardContext,
+    actionOptions = _ref.actionOptions,
+    showServerActions = _ref.showServerActions,
+    useAlternativePreloader = _ref.useAlternativePreloader,
+    view = _ref.view,
+    getPos = _ref.getPos,
+    onClick = _ref.onClick,
+    onRes = _ref.onResolve,
+    isHovered = _ref.isHovered;
+  var _node$attrs = node.attrs,
+    url = _node$attrs.url,
+    data = _node$attrs.data;
+  var scrollContainer = useMemo(function () {
+    return findOverflowScrollParent(view.dom) || undefined;
+  }, [view.dom]);
+  var onResolve = useCallback(function (data) {
+    if (!getPos || typeof getPos === 'boolean') {
+      return;
+    }
+    var title = data.title,
+      url = data.url;
+    // don't dispatch immediately since we might be in the middle of
+    // rendering a nodeview
+    rafSchedule(function () {
+      // prosemirror-bump-fix
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      var tr = view.state.tr;
+      registerCard({
+        title: title,
+        url: url,
+        pos: pos
+      })(tr);
+      onRes === null || onRes === void 0 || onRes(tr, title);
+      view.dispatch(tr);
+    })();
+  }, [getPos, view, onRes]);
+  var onError = useCallback(function (data) {
+    var url = data.url,
+      err = data.err;
+    if (err) {
+      throw err;
+    }
+    onResolve({
+      url: url
+    });
+  }, [onResolve]);
+  var card = useMemo(function () {
+    return /*#__PURE__*/React.createElement(SmartCard, {
+      key: url,
+      url: url,
+      data: data,
+      appearance: "inline",
+      onClick: onClick,
+      container: scrollContainer,
+      onResolve: onResolve,
+      onError: onError,
+      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+      actionOptions: actionOptions,
+      showServerActions: showServerActions,
+      isHovered: isHovered
+    });
+  }, [data, isHovered, onError, onResolve, scrollContainer, url, useAlternativePreloader, actionOptions, showServerActions, onClick]);
+
+  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+    value: cardContext.value
+  }, card) : data ? card : null;
+});
 var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
+var WrappedInlineCard = Card(InlineCard, UnsupportedInline);
 export function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
@@ -18,6 +97,20 @@ export function InlineCardNodeView(props) {
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
     onClickCallback = props.onClickCallback;
+  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+    return /*#__PURE__*/React.createElement(OverlayWrapper, {
+      targetElementPos: getPos(),
+      view: view
+    }, /*#__PURE__*/React.createElement(WrappedInlineCard, {
+      node: node,
+      view: view,
+      getPos: getPos,
+      actionOptions: actionOptions,
+      showServerActions: showServerActions,
+      useAlternativePreloader: useAlternativePreloader,
+      onClickCallback: onClickCallback
+    }));
+  }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,
@@ -28,16 +121,4 @@ export function InlineCardNodeView(props) {
     pluginInjectionApi: pluginInjectionApi,
     onClickCallback: onClickCallback
   }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards)));
-}
-var getAwarenessProps = function getAwarenessProps(editorState, getPos, allowEmbeds, allowBlockCards) {
-  var _editorState$selectio, _editorState$selectio2;
-  var linkPosition = getPos && typeof getPos() === 'number' ? getPos() : undefined;
-  var canBeUpgradedToEmbed = !!linkPosition && allowEmbeds ? isEmbedSupportedAtPosition(linkPosition, editorState, 'inline') : false;
-  var canBeUpgradedToBlock = !!linkPosition && allowBlockCards ? isBlockSupportedAtPosition(linkPosition, editorState, 'inline') : false;
-  var isSelected = editorState.selection instanceof NodeSelection && ((_editorState$selectio = editorState.selection) === null || _editorState$selectio === void 0 || (_editorState$selectio = _editorState$selectio.node) === null || _editorState$selectio === void 0 ? void 0 : _editorState$selectio.type) === editorState.schema.nodes.inlineCard && ((_editorState$selectio2 = editorState.selection) === null || _editorState$selectio2 === void 0 ? void 0 : _editorState$selectio2.from) === getPos();
-  return {
-    isPulseEnabled: canBeUpgradedToEmbed,
-    isOverlayEnabled: canBeUpgradedToEmbed || canBeUpgradedToBlock,
-    isSelected: isSelected
-  };
-};
+}