@atlaskit/editor-plugin-card 0.10.10 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 0.11.1
+
+### Patch Changes
+
+- [#42248](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42248) [`c3ce5d9263f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3ce5d9263f) - Add inline card overlay component
+- [#42848](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42848) [`f2f8428f703`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f2f8428f703) - Abandons feature flag lp-link-picker-focus-trap as it was not successfully rolled out. Will re-introduce as platform feature flag as/when necessary.
+- Updated dependencies
+
+## 0.11.0
+
+### Minor Changes
+
+- [#42755](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42755) [`97f9fcba5a5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/97f9fcba5a5) - [ux] Add a discovery pulse to smart link view switcher under certain conditions and behind a feature flag
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.10.10
 
 ### Patch Changes

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

@@ -14,24 +14,16 @@ var DiscoveryPulse = exports.DiscoveryPulse = function DiscoveryPulse(_ref) {
   var children = _ref.children,
     localStorageKey = _ref.localStorageKey,
     isDiscovered = _ref.isDiscovered,
-    timeToDiscoverInMs = _ref.timeToDiscoverInMs,
     localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs;
+  var discovered = isDiscovered || (0, _localStorage.isLocalStorageKeyDiscovered)(localStorageKey);
   var onDiscovery = (0, _react.useCallback)(function () {
-    (0, _localStorage.markLocalStorageKeyDiscovered)(localStorageKey, localStorageKeyExpirationInMs);
-  }, [localStorageKey, localStorageKeyExpirationInMs]);
-  (0, _react.useEffect)(function () {
-    if (timeToDiscoverInMs) {
-      var timeoutUntilDiscovery = setTimeout(function () {
-        onDiscovery();
-      }, timeToDiscoverInMs);
-      return function () {
-        return clearTimeout(timeoutUntilDiscovery);
-      };
+    if (!discovered) {
+      (0, _localStorage.markLocalStorageKeyDiscovered)(localStorageKey, localStorageKeyExpirationInMs);
     }
-    onDiscovery();
-  }, [isDiscovered, localStorageKey, onDiscovery, timeToDiscoverInMs]);
+  }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
   return /*#__PURE__*/_react.default.createElement(_linkingCommon.Pulse, {
-    isDiscovered: isDiscovered
+    onAnimationIteration: onDiscovery,
+    isDiscovered: discovered
   }, children);
 };
 var _default = exports.default = _linkingCommon.Pulse;

package/dist/cjs/messages.js

@@ -25,5 +25,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.datasource.assetsObjects.description',
     defaultMessage: 'Insert objects from Assets in Jira Service Management with search and filtering',
     description: 'Description text displayed when selecting the type of data to include onto the page, in this case: JSM Assets objects'
+  },
+  inlineOverlay: {
+    id: 'fabric.editor.inlineOverlay',
+    defaultMessage: 'Change view',
+    description: 'An overlay shown when hover over inline smart link to inform user that they can change link view to card and/or embed.'
   }
 });

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineCardWithAwareness = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _smartCard = require("@atlaskit/smart-card");
 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; }
 var InlineCard = function InlineCard(_ref) {
@@ -26,6 +28,13 @@ var InlineCard = function InlineCard(_ref) {
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
+
+  // A complete show/hide logic for the overlay will be implemented
+  // in EDM-8239 and EDM-8241
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOverlayVisible = _useState2[0],
+    setIsOverlayVisible = _useState2[1];
   var onClick = function onClick() {};
   var onResolve = (0, _react.useCallback)(function (data) {
     if (!getPos || typeof getPos === 'boolean') {
@@ -59,7 +68,16 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var card = /*#__PURE__*/_react.default.createElement("span", {
-    className: "card"
+    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,
@@ -71,7 +89,7 @@ var InlineCard = function InlineCard(_ref) {
     onError: onError,
     inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
     showServerActions: showServerActions
-  }));
+  })));
   // [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, {

package/dist/cjs/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visitCardLink = exports.removeCard = exports.openLinkSettings = exports.floatingToolbar = void 0;
+exports.visitCardLink = exports.shouldRenderToolbarPulse = exports.removeCard = exports.openLinkSettings = exports.floatingToolbar = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -120,14 +120,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOpt
 
     // Applies padding override for when link picker is currently displayed
     var className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? _styles.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-
-    /**
-     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
-     */
     var lpLinkPicker = featureFlags.lpLinkPicker,
-      lpLinkPickerFocusTrap = featureFlags.lpLinkPickerFocusTrap,
       preventPopupOverflow = featureFlags.preventPopupOverflow;
-    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
     var isLinkPickerEnabled = !!lpLinkPicker;
     return _objectSpread(_objectSpread({
       title: intl.formatMessage(_messages.cardMessages.card),
@@ -146,8 +140,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOpt
         return element;
       },
       items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
-      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true,
-      focusTrap: shouldEnableFocusTrap && (pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar)
+      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true
     }, (0, _EditLinkToolbar.editLinkToolbarConfig)(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled));
   };
 };
@@ -407,4 +400,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
   });
   return toolbarItems;
+};
+var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
+  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher');
 };

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

@@ -0,0 +1,187 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _utils = require("@atlaskit/editor-common/utils");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../messages");
+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; }
+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; } /** @jsx jsx */
+var PADDING_IN_PX = 2;
+var containerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var linkStyles = (0, _react2.css)({
+  color: "var(--ds-text, #172B4D)",
+  textDecoration: 'none'
+});
+var overlayStyles = (0, _react2.css)({
+  // Positioning
+  position: 'relative',
+  display: 'inline-flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  height: 'inherit',
+  lineHeight: 'initial',
+  width: 'max-content',
+  top: "var(--ds-space-0, 0)",
+  bottom: "var(--ds-space-0, 0)",
+  right: 3,
+  margin: "-1px ".concat("var(--ds-space-0, 0)"),
+  padding: "var(--ds-space-0, 0)",
+  // Styling
+  fontSize: 'inherit',
+  fontWeight: 'normal',
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  background: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20A, ")"),
+  borderRadius: 3,
+  // inline card border of 4px - 1px
+
+  // Using `&` twice to increase specificity. (These are not nested styles.)
+  /* eslint-disable @atlaskit/design-system/no-nested-styles */
+  '&&:link': _objectSpread({}, linkStyles),
+  '&&:active': _objectSpread({}, linkStyles),
+  '&&:focus': _objectSpread({}, linkStyles),
+  '&&:hover': _objectSpread({}, linkStyles),
+  '&&:visited': _objectSpread({}, linkStyles),
+  /* eslint-enable @atlaskit/design-system/no-nested-styles */
+
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // Fill lines, match heading and paragraph size
+  '::before': {
+    content: '" "',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    width: "var(--ds-space-0, 0)",
+    margin: "var(--ds-space-0, 0)",
+    padding: "var(--ds-space-0, 0)"
+  }
+});
+var safariOverlayStyles = (0, _react2.css)({
+  height: '1.1em',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  right: 3
+});
+var textStyles = (0, _react2.css)({
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+var iconStyles = (0, _react2.css)({
+  // Position icon in the middle
+  display: 'inline-grid',
+  // We want to position the icon in the middle of large text type like heading 1
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  span: {
+    display: 'inline-grid'
+  }
+});
+var markerStyles = (0, _react2.css)({
+  height: "var(--ds-space-0, 0)",
+  width: "var(--ds-space-0, 0)",
+  margin: "var(--ds-space-0, 0)",
+  padding: "var(--ds-space-0, 0)"
+});
+var InlineCardOverlay = function InlineCardOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isToolbarOpen = _ref.isToolbarOpen,
+    isToolbarOpen = _ref$isToolbarOpen === void 0 ? false : _ref$isToolbarOpen,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
+    url = _ref.url;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    overlayWidth = _useState4[0],
+    setOverlayWidth = _useState4[1];
+  var containerRef = (0, _react.useRef)(null);
+  var markerRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var labelRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (!isVisible) {
+      // Reset to default state for width calculation when the component become visible.
+      setShowLabel(true);
+      return;
+    }
+    try {
+      var _containerRef$current, _containerRef$current2, _markerRef$current$ge, _markerRef$current, _overlayRef$current$g, _overlayRef$current, _labelRef$current$get, _labelRef$current;
+      // Get the width of the available space to display overlay
+      var start = (_containerRef$current = containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || (_containerRef$current2 = _containerRef$current2.getBoundingClientRect()) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+      var end = (_markerRef$current$ge = markerRef === null || markerRef === void 0 || (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 || (_markerRef$current = _markerRef$current.getBoundingClientRect()) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.left) !== null && _markerRef$current$ge !== void 0 ? _markerRef$current$ge : 0;
+      var availableWidth = end - start - PADDING_IN_PX;
+
+      // Get overlay width and label width
+      var _overlayWidth = (_overlayRef$current$g = overlayRef === null || overlayRef === void 0 || (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 || (_overlayRef$current = _overlayRef$current.getBoundingClientRect()) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.width) !== null && _overlayRef$current$g !== void 0 ? _overlayRef$current$g : 0;
+
+      // Show label if there is enough space to display
+      var shouldShowLabel = availableWidth > 0 && _overlayWidth > 0 ? availableWidth > _overlayWidth : false;
+      setShowLabel(shouldShowLabel);
+
+      // We use relative positioning and need to set
+      // negative margin left (ltr) as the width of the overlay
+      // to make the overlay position on top of inline link.
+      var labelWidth = (_labelRef$current$get = labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 || (_labelRef$current = _labelRef$current.getBoundingClientRect()) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.width) !== null && _labelRef$current$get !== void 0 ? _labelRef$current$get : 0;
+      var newOverlayWidth = shouldShowLabel ? _overlayWidth : _overlayWidth - labelWidth;
+      setOverlayWidth(newOverlayWidth);
+    } catch (_unused) {
+      // If something goes wrong, play it safe by hiding label so that
+      // the component does not look too janky.
+      setShowLabel(false);
+    }
+  }, [isVisible]);
+  var intl = (0, _reactIntlNext.useIntl)();
+  var label = intl.formatMessage(_messages.messages.inlineOverlay);
+  var icon = (0, _react.useMemo)(function () {
+    var IconComponent = isToolbarOpen ? _chevronUp.default : _chevronDown.default;
+    return (0, _react2.jsx)(IconComponent, {
+      label: label,
+      size: "small",
+      testId: "".concat(testId, "-").concat(isToolbarOpen ? 'open' : 'close')
+    });
+  }, [isToolbarOpen, label, testId]);
+  return (0, _react2.jsx)("span", {
+    css: containerStyles,
+    ref: containerRef
+  }, children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+    "aria-hidden": "true",
+    css: markerStyles,
+    ref: markerRef
+  }), (0, _react2.jsx)("a", {
+    css: [overlayStyles, _utils.browser.safari && safariOverlayStyles],
+    style: {
+      marginLeft: -overlayWidth
+    },
+    "data-testid": testId,
+    href: url,
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    ref: overlayRef
+  }, showLabel && (0, _react2.jsx)("span", {
+    css: textStyles,
+    "data-testid": "".concat(testId, "-label"),
+    ref: labelRef
+  }, label), (0, _react2.jsx)("span", {
+    css: iconStyles
+  }, icon))));
+};
+var _default = exports.default = InlineCardOverlay;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/LinkToolbarAppearance.js

@@ -20,6 +20,8 @@ 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 _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); }
 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; }
 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; }
@@ -38,7 +40,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDropdown", function (view, cardContext) {
-      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3;
+      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3, _cardContext$store2;
       var _this$props = _this.props,
         url = _this$props.url,
         intl = _this$props.intl,
@@ -49,7 +51,9 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
         allowBlockCards = _this$props$allowBloc === void 0 ? true : _this$props$allowBloc,
         platform = _this$props.platform,
         editorAnalyticsApi = _this$props.editorAnalyticsApi,
-        cardActions = _this$props.cardActions;
+        cardActions = _this$props.cardActions,
+        _this$props$showInlin = _this$props.showInlineUpgradeDiscoverability,
+        showInlineUpgradeDiscoverability = _this$props$showInlin === void 0 ? false : _this$props$showInlin;
       var preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       var defaultCommand = function defaultCommand() {
         return false;
@@ -109,7 +113,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = /*#__PURE__*/functio
       if (embedOption) {
         options.push(embedOption);
       }
-      return /*#__PURE__*/_react.default.createElement(_card.LinkToolbarButtonGroup, {
+      var LinkToolbarButtons = /*#__PURE__*/_react.default.createElement(_card.LinkToolbarButtonGroup, {
         key: "link-toolbar-button-group",
         options: options.map(function (option) {
           return (0, _card.getButtonGroupOption)(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
@@ -119,6 +123,18 @@ 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)) {
+        return (
+          /*#__PURE__*/
+          // This div is necessary because the toolbar uses :first-child to add margins and can't add margins to the pulse element
+          _react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_pulse.DiscoveryPulse, {
+            localStorageKey: "toolbar-upgrade-pulse"
+          }, LinkToolbarButtons))
+        );
+      }
+      return LinkToolbarButtons;
     });
     return _this;
   }

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

@@ -1,27 +1,21 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import { Pulse } from '@atlaskit/linking-common';
-import { markLocalStorageKeyDiscovered } from '../local-storage';
+import { isLocalStorageKeyDiscovered, markLocalStorageKeyDiscovered } from '../local-storage';
 export const DiscoveryPulse = ({
   children,
   localStorageKey,
   isDiscovered,
-  timeToDiscoverInMs,
   localStorageKeyExpirationInMs
 }) => {
+  const discovered = isDiscovered || isLocalStorageKeyDiscovered(localStorageKey);
   const onDiscovery = useCallback(() => {
-    markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
-  }, [localStorageKey, localStorageKeyExpirationInMs]);
-  useEffect(() => {
-    if (timeToDiscoverInMs) {
-      const timeoutUntilDiscovery = setTimeout(() => {
-        onDiscovery();
-      }, timeToDiscoverInMs);
-      return () => clearTimeout(timeoutUntilDiscovery);
+    if (!discovered) {
+      markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
     }
-    onDiscovery();
-  }, [isDiscovered, localStorageKey, onDiscovery, timeToDiscoverInMs]);
+  }, [discovered, localStorageKey, localStorageKeyExpirationInMs]);
   return /*#__PURE__*/React.createElement(Pulse, {
-    isDiscovered: isDiscovered
+    onAnimationIteration: onDiscovery,
+    isDiscovered: discovered
   }, children);
 };
 export default Pulse;

package/dist/es2019/messages.js

@@ -19,5 +19,10 @@ export const messages = defineMessages({
     id: 'fabric.editor.datasource.assetsObjects.description',
     defaultMessage: 'Insert objects from Assets in Jira Service Management with search and filtering',
     description: 'Description text displayed when selecting the type of data to include onto the page, in this case: JSM Assets objects'
+  },
+  inlineOverlay: {
+    id: 'fabric.editor.inlineOverlay',
+    defaultMessage: 'Change view',
+    description: 'An overlay shown when hover over inline smart link to inform user that they can change link view to card and/or embed.'
   }
 });

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,8 +1,9 @@
-import React, { memo, useCallback, useMemo } from 'react';
+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 } from '../pm-plugins/actions';
+import InlineCardOverlay from '../ui/InlineCardOverlay';
 const InlineCard = ({
   node,
   cardContext,
@@ -16,6 +17,10 @@ const InlineCard = ({
     url,
     data
   } = node.attrs;
+
+  // A complete show/hide logic for the overlay will be implemented
+  // in EDM-8239 and EDM-8241
+  const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const onClick = () => {};
   const onResolve = useCallback(data => {
     if (!getPos || typeof getPos === 'boolean') {
@@ -53,7 +58,12 @@ const InlineCard = ({
     });
   }, [onResolve]);
   const card = /*#__PURE__*/React.createElement("span", {
-    className: "card"
+    className: "card",
+    onMouseEnter: () => setIsOverlayVisible(true),
+    onMouseLeave: () => setIsOverlayVisible(false)
+  }, /*#__PURE__*/React.createElement(InlineCardOverlay, {
+    isVisible: isOverlayVisible,
+    url: url
   }, /*#__PURE__*/React.createElement(SmartCard, {
     key: url,
     url: url,
@@ -65,7 +75,7 @@ const InlineCard = ({
     onError: onError,
     inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
     showServerActions: showServerActions
-  }));
+  })));
   // [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, {

package/dist/es2019/toolbar.js

@@ -114,16 +114,10 @@ export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerO
 
     // Applies padding override for when link picker is currently displayed
     const className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-
-    /**
-     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
-     */
     const {
       lpLinkPicker,
-      lpLinkPickerFocusTrap,
       preventPopupOverflow
     } = featureFlags;
-    const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
     const isLinkPickerEnabled = !!lpLinkPicker;
     return {
       title: intl.formatMessage(messages.card),
@@ -143,7 +137,6 @@ export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerO
       },
       items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
       scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true,
-      focusTrap: shouldEnableFocusTrap && (pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar),
       ...editLinkToolbarConfig(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled)
     };
   };
@@ -402,4 +395,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
   });
   return toolbarItems;
+};
+export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDiscoverabilityEnabled) => {
+  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled && getBooleanFF('platform.linking-platform.smart-card.inline-switcher');
 };