@atlaskit/editor-plugin-card 14.0.7 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-card
 
+## 14.1.0
+
+### Minor Changes
+
+- [`e643f1adf62c9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e643f1adf62c9) -
+  Add resolvedInlineSmartLinks to CardPluginState, a generic ordered list of inline smart links that
+  have resolved during the editing session. Each entry tracks pos, url, and source, with positions
+  remapped on document changes. InlineCardNodeView reads this list and passes isChangeboardTarget to
+  SmartLinkDraggable based on the first entry, enabling Product Onboarding spotlight targeting.
+  Gated behind cc_dnd_smart_link_changeboard_po_template_gate.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.0.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.0.7
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCard.js

@@ -16,6 +16,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -165,10 +166,18 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
   }, card) : data ? card : null;
 });
 var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
-var selector = function selector(states) {
-  var _states$editorViewMod;
+var selectorWithCard = function selectorWithCard(states) {
+  var _states$editorViewMod, _states$cardState;
   return {
-    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+    resolvedInlineSmartLinks: (_states$cardState = states.cardState) === null || _states$cardState === void 0 ? void 0 : _states$cardState.resolvedInlineSmartLinks
+  };
+};
+var selectorWithoutCard = function selectorWithoutCard(states) {
+  var _states$editorViewMod2;
+  return {
+    mode: (_states$editorViewMod2 = states.editorViewModeState) === null || _states$editorViewMod2 === void 0 ? void 0 : _states$editorViewMod2.mode,
+    resolvedInlineSmartLinks: undefined
   };
 };
 
@@ -179,6 +188,7 @@ var selector = function selector(states) {
  * @example
  */
 function InlineCardNodeView(props) {
+  var _resolvedInlineSmartL;
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
@@ -192,8 +202,9 @@ function InlineCardNodeView(props) {
     isPageSSRed = props.isPageSSRed,
     provider = props.provider,
     CompetitorPrompt = props.CompetitorPrompt;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorViewMode'], selector),
-    mode = _useSharedPluginState.mode;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, (0, _platformFeatureFlags.fg)('cc_dnd_smart_link_changeboard_po_template_gate') ? ['editorViewMode', 'card'] : ['editorViewMode'], (0, _platformFeatureFlags.fg)('cc_dnd_smart_link_changeboard_po_template_gate') ? selectorWithCard : selectorWithoutCard),
+    mode = _useSharedPluginState.mode,
+    resolvedInlineSmartLinks = _useSharedPluginState.resolvedInlineSmartLinks;
   var url = node.attrs.url;
   var CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/_react.default.createElement(CompetitorPrompt, {
     sourceUrl: url,
@@ -208,6 +219,14 @@ function InlineCardNodeView(props) {
       });
     }
   }, [provider, props.node]);
+  var linkPosition = (0, _react.useMemo)(function () {
+    if (!getPos || typeof getPos === 'boolean') {
+      return undefined;
+    }
+    var pos = getPos();
+    return typeof pos === 'number' ? pos : undefined;
+  }, [getPos]);
+  var isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 || (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
   var inlineCardContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
     node: node,
     view: view,
@@ -225,7 +244,8 @@ function InlineCardNodeView(props) {
   return /*#__PURE__*/_react.default.createElement(_editorSmartLinkDraggable.SmartLinkDraggable, {
     url: url,
     appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.INLINE,
-    source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.EDITOR
+    source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.EDITOR,
+    isChangeboardTarget: isChangeboardTarget
   }, inlineCardContent);
 }
 var inlineCardNodeView = exports.inlineCardNodeView = function inlineCardNodeView(_ref5) {

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

@@ -14,6 +14,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _inlineCard = require("../nodeviews/inlineCard");
 var _lazyBlockCard = require("../nodeviews/lazy-block-card");
 var _lazyEmbedCard = require("../nodeviews/lazy-embed-card");
@@ -30,6 +31,8 @@ var _utils3 = require("./utils");
 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) { (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; }
 var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+// Only the first resolved inline smart link is needed for PO spotlight targeting
+var MAX_RESOLVED_INLINE_SMART_LINKS = 1;
 var handleAwarenessOverlay = function handleAwarenessOverlay(view) {
   var currentState = (0, _state2.getPluginState)(view.state);
   var overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -94,7 +97,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
           };
         },
         apply: function apply(tr, pluginState, prevEditorState) {
-          var _pluginState$requests;
+          var _pluginState$requests, _pluginState$requests2;
           // Update all the positions of outstanding requests and
           // cards in the plugin state.
           var pluginStateWithUpdatedPos = (0, _state2.getPluginStateWithUpdatedPos)(pluginState, tr);
@@ -118,13 +121,31 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
           if (!meta) {
             return pluginStateWithUpdatedPos;
           }
+          var newState = (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
+
+          // Track the first resolved inline smart link for PO spotlight DOM targeting
+          if (meta.type === 'RESOLVE' && pluginState !== null && pluginState !== void 0 && (_pluginState$requests = pluginState.requests) !== null && _pluginState$requests !== void 0 && _pluginState$requests.length && (0, _platformFeatureFlags.fg)('cc_dnd_smart_link_changeboard_po_template_gate')) {
+            var resolvedRequest = pluginState.requests.find(function (req) {
+              return req.url === meta.url;
+            });
+            if ((resolvedRequest === null || resolvedRequest === void 0 ? void 0 : resolvedRequest.appearance) === 'inline') {
+              var _newState$resolvedInl, _newState$resolvedInl2;
+              if (((_newState$resolvedInl = (_newState$resolvedInl2 = newState.resolvedInlineSmartLinks) === null || _newState$resolvedInl2 === void 0 ? void 0 : _newState$resolvedInl2.length) !== null && _newState$resolvedInl !== void 0 ? _newState$resolvedInl : 0) < MAX_RESOLVED_INLINE_SMART_LINKS) {
+                var _newState$resolvedInl3;
+                newState.resolvedInlineSmartLinks = [].concat((0, _toConsumableArray2.default)((_newState$resolvedInl3 = newState.resolvedInlineSmartLinks) !== null && _newState$resolvedInl3 !== void 0 ? _newState$resolvedInl3 : []), [{
+                  pos: resolvedRequest.pos,
+                  url: resolvedRequest.url,
+                  source: resolvedRequest.source
+                }]);
+              }
+            }
+          }
           if (!enableInlineUpgradeFeatures) {
-            return (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
+            return newState;
           }
-          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 isSingleInlineLink = (pluginState === null || pluginState === void 0 || (_pluginState$requests2 = pluginState.requests) === null || _pluginState$requests2 === void 0 ? void 0 : _pluginState$requests2.length) === 1 && pluginState.requests[0].appearance === 'inline';
           var isSmartLinkPulseDiscovered = (0, _localStorage.isLocalStorageKeyDiscovered)(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
           if (meta.type !== 'RESOLVE' || !isSingleInlineLink) {
             return newState;

package/dist/cjs/pm-plugins/util/state.js

@@ -18,6 +18,7 @@ var getPluginState = exports.getPluginState = function getPluginState(editorStat
   return _pluginKey.pluginKey.getState(editorState);
 };
 var getPluginStateWithUpdatedPos = exports.getPluginStateWithUpdatedPos = function getPluginStateWithUpdatedPos(pluginState, tr) {
+  var _pluginState$resolved;
   return _objectSpread(_objectSpread({}, pluginState), {}, {
     requests: pluginState.requests.map(function (request) {
       return _objectSpread(_objectSpread({}, request), {}, {
@@ -28,6 +29,11 @@ var getPluginStateWithUpdatedPos = exports.getPluginStateWithUpdatedPos = functi
       return _objectSpread(_objectSpread({}, card), {}, {
         pos: tr.mapping.map(card.pos)
       });
+    }),
+    resolvedInlineSmartLinks: (_pluginState$resolved = pluginState.resolvedInlineSmartLinks) === null || _pluginState$resolved === void 0 ? void 0 : _pluginState$resolved.map(function (card) {
+      return _objectSpread(_objectSpread({}, card), {}, {
+        pos: tr.mapping.map(card.pos)
+      });
     })
   });
 };

package/dist/es2019/nodeviews/inlineCard.js

@@ -7,6 +7,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -161,10 +162,18 @@ export const InlineCard = /*#__PURE__*/memo(({
   }, card) : data ? card : null;
 });
 const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
-const selector = states => {
-  var _states$editorViewMod;
+const selectorWithCard = states => {
+  var _states$editorViewMod, _states$cardState;
   return {
-    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+    resolvedInlineSmartLinks: (_states$cardState = states.cardState) === null || _states$cardState === void 0 ? void 0 : _states$cardState.resolvedInlineSmartLinks
+  };
+};
+const selectorWithoutCard = states => {
+  var _states$editorViewMod2;
+  return {
+    mode: (_states$editorViewMod2 = states.editorViewModeState) === null || _states$editorViewMod2 === void 0 ? void 0 : _states$editorViewMod2.mode,
+    resolvedInlineSmartLinks: undefined
   };
 };
 
@@ -175,6 +184,7 @@ const selector = states => {
  * @example
  */
 export function InlineCardNodeView(props) {
+  var _resolvedInlineSmartL;
   const {
     useAlternativePreloader,
     node,
@@ -191,8 +201,9 @@ export function InlineCardNodeView(props) {
     CompetitorPrompt
   } = props;
   const {
-    mode
-  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], selector);
+    mode,
+    resolvedInlineSmartLinks
+  } = useSharedPluginStateWithSelector(pluginInjectionApi, fg('cc_dnd_smart_link_changeboard_po_template_gate') ? ['editorViewMode', 'card'] : ['editorViewMode'], fg('cc_dnd_smart_link_changeboard_po_template_gate') ? selectorWithCard : selectorWithoutCard);
   const url = node.attrs.url;
   const CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
     sourceUrl: url,
@@ -207,6 +218,14 @@ export function InlineCardNodeView(props) {
       });
     }
   }, [provider, props.node]);
+  const linkPosition = useMemo(() => {
+    if (!getPos || typeof getPos === 'boolean') {
+      return undefined;
+    }
+    const pos = getPos();
+    return typeof pos === 'number' ? pos : undefined;
+  }, [getPos]);
+  const isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 ? void 0 : (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
   const inlineCardContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,
@@ -224,7 +243,8 @@ export function InlineCardNodeView(props) {
   return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
     url: url,
     appearance: SMART_LINK_APPEARANCE.INLINE,
-    source: SMART_LINK_DRAG_TYPES.EDITOR
+    source: SMART_LINK_DRAG_TYPES.EDITOR,
+    isChangeboardTarget: isChangeboardTarget
   }, inlineCardContent);
 }
 export const inlineCardNodeView = ({

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

@@ -5,6 +5,7 @@ import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/st
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
 import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
 import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
@@ -19,6 +20,8 @@ import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from './utils';
 const LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+// Only the first resolved inline smart link is needed for PO spotlight targeting
+const MAX_RESOLVED_INLINE_SMART_LINKS = 1;
 const handleAwarenessOverlay = view => {
   const currentState = getPluginState(view.state);
   const overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -84,7 +87,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
         };
       },
       apply(tr, pluginState, prevEditorState) {
-        var _pluginState$requests;
+        var _pluginState$requests, _pluginState$requests2;
         // Update all the positions of outstanding requests and
         // cards in the plugin state.
         const pluginStateWithUpdatedPos = getPluginStateWithUpdatedPos(pluginState, tr);
@@ -109,13 +112,29 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
         if (!meta) {
           return pluginStateWithUpdatedPos;
         }
+        const newState = reducer(pluginStateWithUpdatedPos, meta);
+
+        // Track the first resolved inline smart link for PO spotlight DOM targeting
+        if (meta.type === 'RESOLVE' && pluginState !== null && pluginState !== void 0 && (_pluginState$requests = pluginState.requests) !== null && _pluginState$requests !== void 0 && _pluginState$requests.length && fg('cc_dnd_smart_link_changeboard_po_template_gate')) {
+          const resolvedRequest = pluginState.requests.find(req => req.url === meta.url);
+          if ((resolvedRequest === null || resolvedRequest === void 0 ? void 0 : resolvedRequest.appearance) === 'inline') {
+            var _newState$resolvedInl, _newState$resolvedInl2;
+            if (((_newState$resolvedInl = (_newState$resolvedInl2 = newState.resolvedInlineSmartLinks) === null || _newState$resolvedInl2 === void 0 ? void 0 : _newState$resolvedInl2.length) !== null && _newState$resolvedInl !== void 0 ? _newState$resolvedInl : 0) < MAX_RESOLVED_INLINE_SMART_LINKS) {
+              var _newState$resolvedInl3;
+              newState.resolvedInlineSmartLinks = [...((_newState$resolvedInl3 = newState.resolvedInlineSmartLinks) !== null && _newState$resolvedInl3 !== void 0 ? _newState$resolvedInl3 : []), {
+                pos: resolvedRequest.pos,
+                url: resolvedRequest.url,
+                source: resolvedRequest.source
+              }];
+            }
+          }
+        }
         if (!enableInlineUpgradeFeatures) {
-          return reducer(pluginStateWithUpdatedPos, meta);
+          return newState;
         }
-        const newState = reducer(pluginStateWithUpdatedPos, meta);
 
         // the code below is related to the "Inline Switcher" project, for more information pls see EDM-7984
-        const isSingleInlineLink = (pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$requests = pluginState.requests) === null || _pluginState$requests === void 0 ? void 0 : _pluginState$requests.length) === 1 && pluginState.requests[0].appearance === 'inline';
+        const isSingleInlineLink = (pluginState === null || pluginState === void 0 ? void 0 : (_pluginState$requests2 = pluginState.requests) === null || _pluginState$requests2 === void 0 ? void 0 : _pluginState$requests2.length) === 1 && pluginState.requests[0].appearance === 'inline';
         const isSmartLinkPulseDiscovered = isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
         if (meta.type !== 'RESOLVE' || !isSingleInlineLink) {
           return newState;

package/dist/es2019/pm-plugins/util/state.js

@@ -6,17 +6,24 @@ import { pluginKey } from '../plugin-key';
 // Used for interactions with the Card Plugin's state.
 // ============================================================================ //
 export const getPluginState = editorState => pluginKey.getState(editorState);
-export const getPluginStateWithUpdatedPos = (pluginState, tr) => ({
-  ...pluginState,
-  requests: pluginState.requests.map(request => ({
-    ...request,
-    pos: tr.mapping.map(request.pos)
-  })),
-  cards: pluginState.cards.map(card => ({
-    ...card,
-    pos: tr.mapping.map(card.pos)
-  }))
-});
+export const getPluginStateWithUpdatedPos = (pluginState, tr) => {
+  var _pluginState$resolved;
+  return {
+    ...pluginState,
+    requests: pluginState.requests.map(request => ({
+      ...request,
+      pos: tr.mapping.map(request.pos)
+    })),
+    cards: pluginState.cards.map(card => ({
+      ...card,
+      pos: tr.mapping.map(card.pos)
+    })),
+    resolvedInlineSmartLinks: (_pluginState$resolved = pluginState.resolvedInlineSmartLinks) === null || _pluginState$resolved === void 0 ? void 0 : _pluginState$resolved.map(card => ({
+      ...card,
+      pos: tr.mapping.map(card.pos)
+    }))
+  };
+};
 export const getNewRequests = (oldState, currentState) => {
   if (oldState) {
     return currentState.requests.filter(req => !oldState.requests.find(oldReq => isSameRequest(oldReq, req)));

package/dist/esm/nodeviews/inlineCard.js

@@ -7,6 +7,7 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { UnsupportedInline, findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -153,10 +154,18 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
   }, card) : data ? card : null;
 });
 var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
-var selector = function selector(states) {
-  var _states$editorViewMod;
+var selectorWithCard = function selectorWithCard(states) {
+  var _states$editorViewMod, _states$cardState;
   return {
-    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode,
+    resolvedInlineSmartLinks: (_states$cardState = states.cardState) === null || _states$cardState === void 0 ? void 0 : _states$cardState.resolvedInlineSmartLinks
+  };
+};
+var selectorWithoutCard = function selectorWithoutCard(states) {
+  var _states$editorViewMod2;
+  return {
+    mode: (_states$editorViewMod2 = states.editorViewModeState) === null || _states$editorViewMod2 === void 0 ? void 0 : _states$editorViewMod2.mode,
+    resolvedInlineSmartLinks: undefined
   };
 };
 
@@ -167,6 +176,7 @@ var selector = function selector(states) {
  * @example
  */
 export function InlineCardNodeView(props) {
+  var _resolvedInlineSmartL;
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
@@ -180,8 +190,9 @@ export function InlineCardNodeView(props) {
     isPageSSRed = props.isPageSSRed,
     provider = props.provider,
     CompetitorPrompt = props.CompetitorPrompt;
-  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], selector),
-    mode = _useSharedPluginState.mode;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, fg('cc_dnd_smart_link_changeboard_po_template_gate') ? ['editorViewMode', 'card'] : ['editorViewMode'], fg('cc_dnd_smart_link_changeboard_po_template_gate') ? selectorWithCard : selectorWithoutCard),
+    mode = _useSharedPluginState.mode,
+    resolvedInlineSmartLinks = _useSharedPluginState.resolvedInlineSmartLinks;
   var url = node.attrs.url;
   var CompetitorPromptComponent = CompetitorPrompt && url ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
     sourceUrl: url,
@@ -196,6 +207,14 @@ export function InlineCardNodeView(props) {
       });
     }
   }, [provider, props.node]);
+  var linkPosition = useMemo(function () {
+    if (!getPos || typeof getPos === 'boolean') {
+      return undefined;
+    }
+    var pos = getPos();
+    return typeof pos === 'number' ? pos : undefined;
+  }, [getPos]);
+  var isChangeboardTarget = linkPosition !== undefined && (resolvedInlineSmartLinks === null || resolvedInlineSmartLinks === void 0 || (_resolvedInlineSmartL = resolvedInlineSmartLinks[0]) === null || _resolvedInlineSmartL === void 0 ? void 0 : _resolvedInlineSmartL.pos) === linkPosition;
   var inlineCardContent = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,
@@ -213,7 +232,8 @@ export function InlineCardNodeView(props) {
   return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
     url: url,
     appearance: SMART_LINK_APPEARANCE.INLINE,
-    source: SMART_LINK_DRAG_TYPES.EDITOR
+    source: SMART_LINK_DRAG_TYPES.EDITOR,
+    isChangeboardTarget: isChangeboardTarget
   }, inlineCardContent);
 }
 export var inlineCardNodeView = function inlineCardNodeView(_ref5) {

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

@@ -9,6 +9,7 @@ import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from '@atlaskit/editor-common/st
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
 import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
 import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
@@ -23,6 +24,8 @@ import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from './utils';
 var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+// Only the first resolved inline smart link is needed for PO spotlight targeting
+var MAX_RESOLVED_INLINE_SMART_LINKS = 1;
 var handleAwarenessOverlay = function handleAwarenessOverlay(view) {
   var currentState = getPluginState(view.state);
   var overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -87,7 +90,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
           };
         },
         apply: function apply(tr, pluginState, prevEditorState) {
-          var _pluginState$requests;
+          var _pluginState$requests, _pluginState$requests2;
           // Update all the positions of outstanding requests and
           // cards in the plugin state.
           var pluginStateWithUpdatedPos = getPluginStateWithUpdatedPos(pluginState, tr);
@@ -111,13 +114,31 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
           if (!meta) {
             return pluginStateWithUpdatedPos;
           }
+          var newState = reducer(pluginStateWithUpdatedPos, meta);
+
+          // Track the first resolved inline smart link for PO spotlight DOM targeting
+          if (meta.type === 'RESOLVE' && pluginState !== null && pluginState !== void 0 && (_pluginState$requests = pluginState.requests) !== null && _pluginState$requests !== void 0 && _pluginState$requests.length && fg('cc_dnd_smart_link_changeboard_po_template_gate')) {
+            var resolvedRequest = pluginState.requests.find(function (req) {
+              return req.url === meta.url;
+            });
+            if ((resolvedRequest === null || resolvedRequest === void 0 ? void 0 : resolvedRequest.appearance) === 'inline') {
+              var _newState$resolvedInl, _newState$resolvedInl2;
+              if (((_newState$resolvedInl = (_newState$resolvedInl2 = newState.resolvedInlineSmartLinks) === null || _newState$resolvedInl2 === void 0 ? void 0 : _newState$resolvedInl2.length) !== null && _newState$resolvedInl !== void 0 ? _newState$resolvedInl : 0) < MAX_RESOLVED_INLINE_SMART_LINKS) {
+                var _newState$resolvedInl3;
+                newState.resolvedInlineSmartLinks = [].concat(_toConsumableArray((_newState$resolvedInl3 = newState.resolvedInlineSmartLinks) !== null && _newState$resolvedInl3 !== void 0 ? _newState$resolvedInl3 : []), [{
+                  pos: resolvedRequest.pos,
+                  url: resolvedRequest.url,
+                  source: resolvedRequest.source
+                }]);
+              }
+            }
+          }
           if (!enableInlineUpgradeFeatures) {
-            return reducer(pluginStateWithUpdatedPos, meta);
+            return newState;
           }
-          var newState = reducer(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 isSingleInlineLink = (pluginState === null || pluginState === void 0 || (_pluginState$requests2 = pluginState.requests) === null || _pluginState$requests2 === void 0 ? void 0 : _pluginState$requests2.length) === 1 && pluginState.requests[0].appearance === 'inline';
           var isSmartLinkPulseDiscovered = isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
           if (meta.type !== 'RESOLVE' || !isSingleInlineLink) {
             return newState;

package/dist/esm/pm-plugins/util/state.js

@@ -12,6 +12,7 @@ export var getPluginState = function getPluginState(editorState) {
   return pluginKey.getState(editorState);
 };
 export var getPluginStateWithUpdatedPos = function getPluginStateWithUpdatedPos(pluginState, tr) {
+  var _pluginState$resolved;
   return _objectSpread(_objectSpread({}, pluginState), {}, {
     requests: pluginState.requests.map(function (request) {
       return _objectSpread(_objectSpread({}, request), {}, {
@@ -22,6 +23,11 @@ export var getPluginStateWithUpdatedPos = function getPluginStateWithUpdatedPos(
       return _objectSpread(_objectSpread({}, card), {}, {
         pos: tr.mapping.map(card.pos)
       });
+    }),
+    resolvedInlineSmartLinks: (_pluginState$resolved = pluginState.resolvedInlineSmartLinks) === null || _pluginState$resolved === void 0 ? void 0 : _pluginState$resolved.map(function (card) {
+      return _objectSpread(_objectSpread({}, card), {}, {
+        pos: tr.mapping.map(card.pos)
+      });
     })
   });
 };

package/dist/types/pm-plugins/util/state.d.ts

@@ -42,6 +42,11 @@ export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState
         sourceEvent?: UIAnalyticsEvent | null | undefined;
         url: string;
     }[];
+    resolvedInlineSmartLinks?: Array<{
+        pos: number;
+        source: CardReplacementInputMethod;
+        url: string;
+    }>;
     resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;

package/dist/types/types/index.d.ts

@@ -101,6 +101,11 @@ export type CardPluginState = {
     provider: CardProvider | null;
     removeOverlay?: () => void;
     requests: Request[];
+    resolvedInlineSmartLinks?: Array<{
+        pos: number;
+        source: CardReplacementInputMethod;
+        url: string;
+    }>;
     resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;

package/dist/types-ts4.5/pm-plugins/util/state.d.ts

@@ -42,6 +42,11 @@ export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState
         sourceEvent?: UIAnalyticsEvent | null | undefined;
         url: string;
     }[];
+    resolvedInlineSmartLinks?: Array<{
+        pos: number;
+        source: CardReplacementInputMethod;
+        url: string;
+    }>;
     resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;

package/dist/types-ts4.5/types/index.d.ts

@@ -101,6 +101,11 @@ export type CardPluginState = {
     provider: CardProvider | null;
     removeOverlay?: () => void;
     requests: Request[];
+    resolvedInlineSmartLinks?: Array<{
+        pos: number;
+        source: CardReplacementInputMethod;
+        url: string;
+    }>;
     resolvedToolbarAttributesByUrl: Record<string, ToolbarResolvedAttributes>;
     selectedInlineLinkPosition?: number;
     showDatasourceModal: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "14.0.7",
+	"version": "14.1.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-plugin-width": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-smart-link-draggable": "^0.4.0",
+		"@atlaskit/editor-smart-link-draggable": "^0.5.0",
 		"@atlaskit/frontend-utilities": "^3.2.0",
 		"@atlaskit/icon": "^34.0.0",
 		"@atlaskit/link": "^3.4.0",
@@ -61,7 +61,7 @@
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
 		"@atlaskit/smart-card": "^44.0.0",
-		"@atlaskit/tmp-editor-statsig": "^60.2.0",
+		"@atlaskit/tmp-editor-statsig": "^61.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -113,6 +113,9 @@
 		"cc_drag_and_drop_smart_link_from_content_to_tree": {
 			"type": "boolean"
 		},
+		"cc_dnd_smart_link_changeboard_po_template_gate": {
+			"type": "boolean"
+		},
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},