@atlaskit/editor-plugin-card 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-card
 
+## 0.13.0
+
+### Minor Changes
+
+- [#42692](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42692) [`755bedc2db1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/755bedc2db1) - [ux] Added functionality for Inline Card pulse that should surface only on the first inserted link of the day.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.12.2
 
 ### Patch Changes

package/dist/cjs/common/hooks/useLinkUpgradeDiscoverability.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _localStorage = require("../local-storage");
+var useLinkUpgradeDiscoverability = function useLinkUpgradeDiscoverability(_ref) {
+  var _cardContext$store, _pluginInjectionApi$c2;
+  var url = _ref.url,
+    linkPosition = _ref.linkPosition,
+    cardContext = _ref.cardContext,
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    isPulseEnabled = _ref.isPulseEnabled,
+    isOverlayEnabled = _ref.isOverlayEnabled;
+  var _useState = (0, _react.useState)(cardContext === null || cardContext === void 0 || (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    urlState = _useState2[0],
+    setUrlState = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var _cardContext$store2;
+    var unsubscribe = cardContext === null || cardContext === void 0 || (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.subscribe(function () {
+      var _cardContext$store3;
+      setUrlState(cardContext === null || cardContext === void 0 || (_cardContext$store3 = cardContext.store) === null || _cardContext$store3 === void 0 ? void 0 : _cardContext$store3.getState()[url]);
+    });
+    return function () {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, url]);
+  var canBeUpgradedToEmbed = (0, _react.useMemo)(function () {
+    var _cardContext$extracto;
+    var isResolved = (urlState === null || urlState === void 0 ? void 0 : urlState.status) === 'resolved';
+    return isResolved && !!(cardContext !== null && cardContext !== void 0 && (_cardContext$extracto = cardContext.extractors) !== null && _cardContext$extracto !== void 0 && _cardContext$extracto.getPreview(url, 'web'));
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.extractors, url, urlState === null || urlState === void 0 ? void 0 : urlState.status]);
+  var shouldShowLinkPulse = (0, _react.useMemo)(function () {
+    var _pluginInjectionApi$c;
+    var isKeyDiscovered = (0, _localStorage.isLocalStorageKeyDiscovered)(_localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
+    var awarenessCandidatePosition = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c === void 0 || (_pluginInjectionApi$c = _pluginInjectionApi$c.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.inlineCardAwarenessCandidatePosition;
+    return isPulseEnabled && !isKeyDiscovered && linkPosition === awarenessCandidatePosition && canBeUpgradedToEmbed;
+  }, [canBeUpgradedToEmbed, isPulseEnabled, linkPosition, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.card) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.sharedState]);
+  var shouldShowLinkOverlay = (urlState === null || urlState === void 0 ? void 0 : urlState.status) === 'resolved' && isOverlayEnabled;
+  var shouldShowToolbarPulse = (0, _react.useMemo)(function () {
+    return isPulseEnabled && !(0, _localStorage.isLocalStorageKeyDiscovered)(_localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR) && canBeUpgradedToEmbed;
+  }, [canBeUpgradedToEmbed, isPulseEnabled]);
+  return {
+    shouldShowToolbarPulse: shouldShowToolbarPulse,
+    shouldShowLinkPulse: shouldShowLinkPulse,
+    shouldShowLinkOverlay: shouldShowLinkOverlay
+  };
+};
+var _default = exports.default = useLinkUpgradeDiscoverability;

package/dist/cjs/common/local-storage.js

@@ -3,10 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.markLocalStorageKeyDiscovered = exports.isLocalStorageKeyDiscovered = exports.LOCAL_STORAGE_DISCOVERED_KEY = exports.LOCAL_STORAGE_CLIENT_KEY = void 0;
+exports.markLocalStorageKeyDiscovered = exports.isLocalStorageKeyDiscovered = exports.ONE_DAY_IN_MILLISECONDS = exports.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR = exports.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = exports.LOCAL_STORAGE_DISCOVERED_KEY = exports.LOCAL_STORAGE_CLIENT_KEY = void 0;
 var _frontendUtilities = require("@atlaskit/frontend-utilities");
 var LOCAL_STORAGE_CLIENT_KEY = exports.LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-card';
 var LOCAL_STORAGE_DISCOVERED_KEY = exports.LOCAL_STORAGE_DISCOVERED_KEY = 'discovered';
+var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = exports.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+var LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR = exports.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR = 'link-toolbar-button-group';
+var ONE_DAY_IN_MILLISECONDS = exports.ONE_DAY_IN_MILLISECONDS = 86400000;
 var storageClient = new _frontendUtilities.StorageClient(LOCAL_STORAGE_CLIENT_KEY);
 var isLocalStorageKeyDiscovered = exports.isLocalStorageKeyDiscovered = function isLocalStorageKeyDiscovered(key) {
   var localStorageValue = storageClient.getItem(key);

package/dist/cjs/common/pulse/index.js

@@ -14,16 +14,20 @@ var DiscoveryPulse = exports.DiscoveryPulse = function DiscoveryPulse(_ref) {
   var children = _ref.children,
     localStorageKey = _ref.localStorageKey,
     isDiscovered = _ref.isDiscovered,
-    localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs;
+    localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs,
+    _ref$discoveryMode = _ref.discoveryMode,
+    discoveryMode = _ref$discoveryMode === void 0 ? 'iteration' : _ref$discoveryMode;
   var discovered = isDiscovered || (0, _localStorage.isLocalStorageKeyDiscovered)(localStorageKey);
   var onDiscovery = (0, _react.useCallback)(function () {
     if (!discovered) {
       (0, _localStorage.markLocalStorageKeyDiscovered)(localStorageKey, localStorageKeyExpirationInMs);
     }
   }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
-  return /*#__PURE__*/_react.default.createElement(_linkingCommon.Pulse, {
-    onAnimationIteration: onDiscovery,
+  var pulseProps = {
+    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+    onAnimationIteration: discoveryMode === 'iteration' ? onDiscovery : undefined,
     isDiscovered: discovered
-  }, children);
+  };
+  return /*#__PURE__*/_react.default.createElement(_linkingCommon.Pulse, pulseProps, children);
 };
 var _default = exports.default = _linkingCommon.Pulse;

package/dist/cjs/nodeviews/inlineCard.js

@@ -20,6 +20,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _actions = require("../pm-plugins/actions");
+var _utils = require("../utils");
 var _genericCard = require("./genericCard");
 var _inlineCardWithAwareness = require("./inlineCardWithAwareness");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -123,13 +124,34 @@ function InlineCardNodeView(props) {
     node = props.node,
     view = props.view,
     getPos = props.getPos,
-    showServerActions = props.showServerActions;
-  var WrappedCard = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher') ? WrappedInlineCardWithAwareness : WrappedInlineCard;
-  return /*#__PURE__*/_react.default.createElement(WrappedCard, {
+    showServerActions = props.showServerActions,
+    allowEmbeds = props.allowEmbeds,
+    allowBlockCards = props.allowBlockCards,
+    enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
+    pluginInjectionApi = props.pluginInjectionApi;
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher')) {
+    return /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
+      node: node,
+      view: view,
+      getPos: getPos,
+      showServerActions: showServerActions,
+      useAlternativePreloader: useAlternativePreloader
+    });
+  }
+  var editorState = view.state;
+  var linkPosition = getPos && typeof getPos() === 'number' ? getPos() : undefined;
+  var canBeUpgradedToEmbed = !!linkPosition && allowEmbeds ? (0, _utils.isEmbedSupportedAtPosition)(linkPosition, editorState, 'inline') : false;
+  var canBeUpgradedToBlock = !!linkPosition && allowBlockCards ? (0, _utils.isBlockSupportedAtPosition)(linkPosition, editorState, 'inline') : false;
+  var isPulseEnabled = enableInlineUpgradeFeatures && canBeUpgradedToEmbed;
+  var isOverlayEnabled = enableInlineUpgradeFeatures && (canBeUpgradedToEmbed || canBeUpgradedToBlock);
+  return /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, {
     node: node,
     view: view,
     getPos: getPos,
     showServerActions: showServerActions,
-    useAlternativePreloader: useAlternativePreloader
+    useAlternativePreloader: useAlternativePreloader,
+    isOverlayEnabled: isOverlayEnabled,
+    isPulseEnabled: isPulseEnabled,
+    pluginInjectionApi: pluginInjectionApi
   });
 }

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -1,30 +1,41 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineCardWithAwareness = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _smartCard = require("@atlaskit/smart-card");
+var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../common/hooks/useLinkUpgradeDiscoverability"));
+var _localStorage = require("../common/local-storage");
+var _pulse = require("../common/pulse");
 var _actions = require("../pm-plugins/actions");
 var _InlineCardOverlay = _interopRequireDefault(require("../ui/InlineCardOverlay"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+// editor adds a standard line-height that is bigger than an inline smart link
+// due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
+var loaderWrapperStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '.loader-wrapper': {
+    lineHeight: 'normal'
+  }
+});
 var InlineCard = function InlineCard(_ref) {
   var node = _ref.node,
     cardContext = _ref.cardContext,
     showServerActions = _ref.showServerActions,
     useAlternativePreloader = _ref.useAlternativePreloader,
     view = _ref.view,
-    getPos = _ref.getPos;
-  var scrollContainer = (0, _react.useMemo)(function () {
-    return (0, _ui.findOverflowScrollParent)(view.dom) || undefined;
-  }, [view.dom]);
+    getPos = _ref.getPos,
+    isOverlayEnabled = _ref.isOverlayEnabled,
+    isPulseEnabled = _ref.isPulseEnabled,
+    pluginInjectionApi = _ref.pluginInjectionApi;
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
@@ -35,7 +46,25 @@ var InlineCard = function InlineCard(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOverlayVisible = _useState2[0],
     setIsOverlayVisible = _useState2[1];
-  var onClick = function onClick() {};
+  var linkPosition = (0, _react.useMemo)(function () {
+    if (!getPos || typeof getPos === 'boolean') {
+      return undefined;
+    }
+    var pos = getPos();
+    return typeof pos === 'number' ? pos : undefined;
+  }, [getPos]);
+  var _useLinkUpgradeDiscov = (0, _useLinkUpgradeDiscoverability.default)({
+      url: url,
+      linkPosition: linkPosition || -1,
+      cardContext: cardContext === null || cardContext === void 0 ? void 0 : cardContext.value,
+      pluginInjectionApi: pluginInjectionApi,
+      isOverlayEnabled: isOverlayEnabled,
+      isPulseEnabled: isPulseEnabled
+    }),
+    shouldShowLinkPulse = _useLinkUpgradeDiscov.shouldShowLinkPulse;
+  var scrollContainer = (0, _react.useMemo)(function () {
+    return (0, _ui.findOverflowScrollParent)(view.dom) || undefined;
+  }, [view.dom]);
   var onResolve = (0, _react.useCallback)(function (data) {
     if (!getPos || typeof getPos === 'boolean') {
       return;
@@ -67,32 +96,53 @@ var InlineCard = function InlineCard(_ref) {
       url: url
     });
   }, [onResolve]);
-  var card = /*#__PURE__*/_react.default.createElement("span", {
-    className: "card",
-    onMouseEnter: function onMouseEnter() {
-      return setIsOverlayVisible(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setIsOverlayVisible(false);
-    }
-  }, /*#__PURE__*/_react.default.createElement(_InlineCardOverlay.default, {
-    isVisible: isOverlayVisible,
-    url: url
-  }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
-    key: url,
-    url: url,
-    data: data,
-    appearance: "inline",
-    onClick: onClick,
-    container: scrollContainer,
-    onResolve: onResolve,
-    onError: onError,
-    inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
-    showServerActions: showServerActions
-  })));
+  var innerCard = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_InlineCardOverlay.default, {
+      isVisible: isOverlayVisible,
+      url: url
+    }, (0, _react2.jsx)(_smartCard.Card, {
+      key: url,
+      url: url,
+      data: data,
+      appearance: "inline",
+      onClick: function onClick() {},
+      container: scrollContainer,
+      onResolve: onResolve,
+      onError: onError,
+      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+      showServerActions: showServerActions
+    }));
+  }, [data, isOverlayVisible, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
+
+  // TODO: add proper show/hide conditions for overlay in EDM-8239
+  var card = (0, _react.useMemo)(function () {
+    return shouldShowLinkPulse ? (0, _react2.jsx)("span", {
+      onMouseEnter: function onMouseEnter() {
+        return setIsOverlayVisible(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsOverlayVisible(false);
+      },
+      css: loaderWrapperStyles,
+      className: "card"
+    }, (0, _react2.jsx)(_pulse.DiscoveryPulse, {
+      localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
+      localStorageKeyExpirationInMs: _localStorage.ONE_DAY_IN_MILLISECONDS,
+      discoveryMode: 'start'
+    }, innerCard)) : (0, _react2.jsx)("span", {
+      onMouseEnter: function onMouseEnter() {
+        return setIsOverlayVisible(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setIsOverlayVisible(false);
+      },
+      className: "card"
+    }, innerCard);
+  }, [innerCard, shouldShowLinkPulse]);
+
   // [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.default.createElement(cardContext.Provider, {
+  return cardContext && cardContext.value ? (0, _react2.jsx)(cardContext.Provider, {
     value: cardContext.value
   }, card) : data ? card : null;
 };

package/dist/cjs/plugin.js

@@ -61,13 +61,14 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
       return nodes;
     },
     pmPlugins: function pmPlugins() {
-      var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou;
+      var _options$allowBlockCa, _options$allowResizin, _options$useAlternati, _options$allowWrappin, _options$allowAlignme, _options$allowDatasou, _options$showUpgradeD;
       var allowBlockCards = (_options$allowBlockCa = options.allowBlockCards) !== null && _options$allowBlockCa !== void 0 ? _options$allowBlockCa : true;
       var allowResizing = (_options$allowResizin = options.allowResizing) !== null && _options$allowResizin !== void 0 ? _options$allowResizin : true;
       var useAlternativePreloader = (_options$useAlternati = options.useAlternativePreloader) !== null && _options$useAlternati !== void 0 ? _options$useAlternati : true;
       var allowWrapping = (_options$allowWrappin = options.allowWrapping) !== null && _options$allowWrappin !== void 0 ? _options$allowWrappin : true;
       var allowAlignment = (_options$allowAlignme = options.allowAlignment) !== null && _options$allowAlignme !== void 0 ? _options$allowAlignme : true;
       var allowDatasource = (_options$allowDatasou = options.allowDatasource) !== null && _options$allowDatasou !== void 0 ? _options$allowDatasou : false;
+      var showUpgradeDiscoverability = (_options$showUpgradeD = options.showUpgradeDiscoverability) !== null && _options$showUpgradeD !== void 0 ? _options$showUpgradeD : true;
       var plugins = [{
         name: 'card',
         plugin: (0, _main.createPlugin)(_objectSpread(_objectSpread({}, options), {}, {
@@ -77,7 +78,8 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
           allowWrapping: allowWrapping,
           allowAlignment: allowAlignment,
           allowDatasource: allowDatasource,
-          cardPluginEvents: cardPluginEvents
+          cardPluginEvents: cardPluginEvents,
+          showUpgradeDiscoverability: showUpgradeDiscoverability
         }), api)
       }, {
         name: 'cardHyperlink',

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

@@ -19,16 +19,20 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _eventsFromTr = require("../analytics/events-from-tr");
+var _localStorage = require("../common/local-storage");
 var _blockCard = require("../nodeviews/blockCard");
 var _datasource = require("../nodeviews/datasource");
 var _embedCard = require("../nodeviews/embedCard");
 var _inlineCard = require("../nodeviews/inlineCard");
+var _utils3 = require("../utils");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
 var _reducers = _interopRequireDefault(require("./reducers"));
 var _resolve = require("./util/resolve");
 var _state2 = require("./util/state");
+var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
 var createPlugin = exports.createPlugin = function createPlugin(options, pluginInjectionApi) {
   return function (pmPluginFactoryParams) {
     var editorAppearance = options.editorAppearance,
@@ -37,13 +41,21 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
       useAlternativePreloader = options.useAlternativePreloader,
       fullWidthMode = options.fullWidthMode,
       showServerActions = options.showServerActions,
-      cardPluginEvents = options.cardPluginEvents;
+      cardPluginEvents = options.cardPluginEvents,
+      showUpgradeDiscoverability = options.showUpgradeDiscoverability,
+      allowEmbeds = options.allowEmbeds,
+      allowBlockCards = options.allowBlockCards;
+    var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
     var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: _inlineCard.InlineCardNodeView,
       extraComponentProps: {
         useAlternativePreloader: useAlternativePreloader,
-        showServerActions: showServerActions
+        showServerActions: showServerActions,
+        enableInlineUpgradeFeatures: enableInlineUpgradeFeatures,
+        allowEmbeds: allowEmbeds,
+        allowBlockCards: allowBlockCards,
+        pluginInjectionApi: pluginInjectionApi
       }
     });
     return new _safePlugin.SafePlugin({
@@ -63,6 +75,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
           };
         },
         apply: function apply(tr, pluginState, prevEditorState) {
+          var _pluginState$requests;
           // Update all the positions of outstanding requests and
           // cards in the plugin state.
           var pluginStateWithUpdatedPos = (0, _state2.getPluginStateWithUpdatedPos)(pluginState, tr);
@@ -73,10 +86,26 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             var events = (0, _eventsFromTr.eventsFromTransaction)(tr, prevEditorState);
             cardPluginEvents.push.apply(cardPluginEvents, (0, _toConsumableArray2.default)(events));
           }
-          if (meta) {
+          if (!meta) {
+            return pluginStateWithUpdatedPos;
+          }
+          if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher')) {
             return (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
           }
-          return pluginStateWithUpdatedPos;
+          var newState = (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
+
+          // the code below is related to the "Inline Switcher" project, for more information pls see EDM-7984
+          var isSingleInlineLink = (pluginState === null || pluginState === void 0 || (_pluginState$requests = pluginState.requests) === null || _pluginState$requests === void 0 ? void 0 : _pluginState$requests.length) === 1 && pluginState.requests[0].appearance === 'inline';
+          var isSmartLinkPulseDiscovered = (0, _localStorage.isLocalStorageKeyDiscovered)(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
+          if (meta.type !== 'RESOLVE' || !enableInlineUpgradeFeatures || isSmartLinkPulseDiscovered || !isSingleInlineLink) {
+            return newState;
+          }
+          var linkPosition = pluginState.requests[0].pos;
+          var canBeUpgradedToEmbed = allowEmbeds && (0, _utils3.isEmbedSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
+          if (canBeUpgradedToEmbed) {
+            newState.inlineCardAwarenessCandidatePosition = linkPosition;
+          }
+          return newState;
         }
       },
       view: function view(_view) {

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

@@ -22,7 +22,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var PADDING_IN_PX = 2;
 var containerStyles = (0, _react2.css)({
-  position: 'relative'
+  position: 'relative',
+  lineHeight: 'normal'
 });
 var linkStyles = (0, _react2.css)({
   color: "var(--ds-text, #172B4D)",

package/dist/cjs/ui/LinkToolbarAppearance.js

@@ -20,6 +20,7 @@ var _card = require("@atlaskit/editor-common/card");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _localStorage = require("../common/local-storage");
 var _pulse = require("../common/pulse");
 var _toolbar = require("../toolbar");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -52,8 +53,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         platform = _this$props.platform,
         editorAnalyticsApi = _this$props.editorAnalyticsApi,
         cardActions = _this$props.cardActions,
-        _this$props$showInlin = _this$props.showInlineUpgradeDiscoverability,
-        showInlineUpgradeDiscoverability = _this$props$showInlin === void 0 ? false : _this$props$showInlin;
+        _this$props$showUpgra = _this$props.showUpgradeDiscoverability,
+        showUpgradeDiscoverability = _this$props$showUpgra === void 0 ? false : _this$props$showUpgra;
       var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       var defaultCommand = function defaultCommand() {
         return false;
@@ -114,7 +115,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         options.push(embedOption);
       }
       var LinkToolbarButtons = /*#__PURE__*/_react.default.createElement(_card.LinkToolbarButtonGroup, {
-        key: "link-toolbar-button-group",
+        key: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR,
         options: options.map(function (option) {
           return (0, _card.getButtonGroupOption)(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
             onClick: (0, _card.commandWithMetadata)(option.onClick, {
@@ -125,7 +126,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
       });
       var status = url ? cardContext === null || cardContext === void 0 || (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 || (_cardContext$store2 = _cardContext$store2.getState()[url]) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.status : '';
       var embedEnabled = embedOption ? !embedOption.disabled : false;
-      if ((0, _toolbar.shouldRenderToolbarPulse)(embedEnabled, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : '', status !== null && status !== void 0 ? status : '', showInlineUpgradeDiscoverability)) {
+      if ((0, _toolbar.shouldRenderToolbarPulse)(embedEnabled, currentAppearance !== null && currentAppearance !== void 0 ? currentAppearance : '', status !== null && status !== void 0 ? status : '', showUpgradeDiscoverability)) {
         return (
           /*#__PURE__*/
           // This div is necessary because the toolbar uses :first-child to add margins and can't add margins to the pulse element

package/dist/cjs/utils.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isBlockSupportedAtPosition = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _pluginKey = require("./pm-plugins/plugin-key");
 var appearanceForNodeType = exports.appearanceForNodeType = function appearanceForNodeType(spec) {
@@ -51,4 +52,15 @@ var findCardInfo = exports.findCardInfo = function findCardInfo(state) {
   return pluginState.cards.find(function (cardInfo) {
     return cardInfo.pos === state.selection.from;
   });
+};
+var isAppearanceSupportedInParent = function isAppearanceSupportedInParent(currentNodePosition, editorState, fragment, currentAppearance) {
+  var resolvedPosition = editorState.doc.resolve(currentNodePosition);
+  var parent = currentAppearance === 'embed' || currentAppearance === 'block' ? resolvedPosition.node() : resolvedPosition.node(-1);
+  return parent && parent.type.validContent(fragment);
+};
+var isEmbedSupportedAtPosition = exports.isEmbedSupportedAtPosition = function isEmbedSupportedAtPosition(currentNodePosition, editorState, currentAppearance) {
+  return isAppearanceSupportedInParent(currentNodePosition, editorState, _model.Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance);
+};
+var isBlockSupportedAtPosition = exports.isBlockSupportedAtPosition = function isBlockSupportedAtPosition(currentNodePosition, editorState, currentAppearance) {
+  return isAppearanceSupportedInParent(currentNodePosition, editorState, _model.Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
 };

package/dist/es2019/common/hooks/useLinkUpgradeDiscoverability.js

@@ -0,0 +1,44 @@
+import { useEffect, useMemo, useState } from 'react';
+import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR } from '../local-storage';
+const useLinkUpgradeDiscoverability = ({
+  url,
+  linkPosition,
+  cardContext,
+  pluginInjectionApi,
+  isPulseEnabled,
+  isOverlayEnabled
+}) => {
+  var _cardContext$store, _pluginInjectionApi$c4;
+  const [urlState, setUrlState] = useState(cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url]);
+  useEffect(() => {
+    var _cardContext$store2;
+    const unsubscribe = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : _cardContext$store2.subscribe(() => {
+      var _cardContext$store3;
+      setUrlState(cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store3 = cardContext.store) === null || _cardContext$store3 === void 0 ? void 0 : _cardContext$store3.getState()[url]);
+    });
+    return () => {
+      if (unsubscribe) {
+        unsubscribe();
+      }
+    };
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, url]);
+  const canBeUpgradedToEmbed = useMemo(() => {
+    var _cardContext$extracto;
+    const isResolved = (urlState === null || urlState === void 0 ? void 0 : urlState.status) === 'resolved';
+    return isResolved && !!(cardContext !== null && cardContext !== void 0 && (_cardContext$extracto = cardContext.extractors) !== null && _cardContext$extracto !== void 0 && _cardContext$extracto.getPreview(url, 'web'));
+  }, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.extractors, url, urlState === null || urlState === void 0 ? void 0 : urlState.status]);
+  const shouldShowLinkPulse = useMemo(() => {
+    var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
+    const isKeyDiscovered = isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
+    const awarenessCandidatePosition = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.card) === null || _pluginInjectionApi$c === void 0 ? void 0 : (_pluginInjectionApi$c2 = _pluginInjectionApi$c.sharedState) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : (_pluginInjectionApi$c3 = _pluginInjectionApi$c2.currentState()) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.inlineCardAwarenessCandidatePosition;
+    return isPulseEnabled && !isKeyDiscovered && linkPosition === awarenessCandidatePosition && canBeUpgradedToEmbed;
+  }, [canBeUpgradedToEmbed, isPulseEnabled, linkPosition, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.card) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.sharedState]);
+  const shouldShowLinkOverlay = (urlState === null || urlState === void 0 ? void 0 : urlState.status) === 'resolved' && isOverlayEnabled;
+  const shouldShowToolbarPulse = useMemo(() => isPulseEnabled && !isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR) && canBeUpgradedToEmbed, [canBeUpgradedToEmbed, isPulseEnabled]);
+  return {
+    shouldShowToolbarPulse,
+    shouldShowLinkPulse,
+    shouldShowLinkOverlay
+  };
+};
+export default useLinkUpgradeDiscoverability;

package/dist/es2019/common/local-storage.js

@@ -1,6 +1,9 @@
 import { StorageClient } from '@atlaskit/frontend-utilities';
 export const LOCAL_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-card';
 export const LOCAL_STORAGE_DISCOVERED_KEY = 'discovered';
+export const LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+export const LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR = 'link-toolbar-button-group';
+export const ONE_DAY_IN_MILLISECONDS = 86400000;
 const storageClient = new StorageClient(LOCAL_STORAGE_CLIENT_KEY);
 export const isLocalStorageKeyDiscovered = key => {
   const localStorageValue = storageClient.getItem(key);

package/dist/es2019/common/pulse/index.js

@@ -5,7 +5,8 @@ export const DiscoveryPulse = ({
   children,
   localStorageKey,
   isDiscovered,
-  localStorageKeyExpirationInMs
+  localStorageKeyExpirationInMs,
+  discoveryMode = 'iteration'
 }) => {
   const discovered = isDiscovered || isLocalStorageKeyDiscovered(localStorageKey);
   const onDiscovery = useCallback(() => {
@@ -13,9 +14,11 @@ export const DiscoveryPulse = ({
       markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
     }
   }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
-  return /*#__PURE__*/React.createElement(Pulse, {
-    onAnimationIteration: onDiscovery,
+  const pulseProps = {
+    onAnimationStart: discoveryMode === 'start' ? onDiscovery : undefined,
+    onAnimationIteration: discoveryMode === 'iteration' ? onDiscovery : undefined,
     isDiscovered: discovered
-  }, children);
+  };
+  return /*#__PURE__*/React.createElement(Pulse, pulseProps, children);
 };
 export default Pulse;

package/dist/es2019/nodeviews/inlineCard.js

@@ -6,6 +6,7 @@ import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-co
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
+import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
 import { Card } from './genericCard';
 import { InlineCardWithAwareness } from './inlineCardWithAwareness';
 
@@ -104,14 +105,35 @@ export function InlineCardNodeView(props) {
     node,
     view,
     getPos,
-    showServerActions
+    showServerActions,
+    allowEmbeds,
+    allowBlockCards,
+    enableInlineUpgradeFeatures,
+    pluginInjectionApi
   } = props;
-  const WrappedCard = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') ? WrappedInlineCardWithAwareness : WrappedInlineCard;
-  return /*#__PURE__*/React.createElement(WrappedCard, {
+  if (!getBooleanFF('platform.linking-platform.smart-card.inline-switcher')) {
+    return /*#__PURE__*/React.createElement(WrappedInlineCard, {
+      node: node,
+      view: view,
+      getPos: getPos,
+      showServerActions: showServerActions,
+      useAlternativePreloader: useAlternativePreloader
+    });
+  }
+  const editorState = view.state;
+  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 isPulseEnabled = enableInlineUpgradeFeatures && canBeUpgradedToEmbed;
+  const isOverlayEnabled = enableInlineUpgradeFeatures && (canBeUpgradedToEmbed || canBeUpgradedToBlock);
+  return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, {
     node: node,
     view: view,
     getPos: getPos,
     showServerActions: showServerActions,
-    useAlternativePreloader: useAlternativePreloader
+    useAlternativePreloader: useAlternativePreloader,
+    isOverlayEnabled: isOverlayEnabled,
+    isPulseEnabled: isPulseEnabled,
+    pluginInjectionApi: pluginInjectionApi
   });
 }