@atlaskit/editor-plugin-card 0.10.10 → 0.11.1

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

@@ -0,0 +1,175 @@
+/** @jsx jsx */
+
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { browser } from '@atlaskit/editor-common/utils';
+import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+import { N20A, N800 } from '@atlaskit/theme/colors';
+import { messages } from '../../messages';
+const PADDING_IN_PX = 2;
+const containerStyles = css({
+  position: 'relative'
+});
+const linkStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  textDecoration: 'none'
+});
+const overlayStyles = 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 ${"var(--ds-space-0, 0)"}`,
+  padding: "var(--ds-space-0, 0)",
+  // Styling
+  fontSize: 'inherit',
+  fontWeight: 'normal',
+  color: `var(--ds-text, ${N800})`,
+  background: `var(--ds-background-accent-gray-subtlest, ${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': {
+    ...linkStyles
+  },
+  '&&:active': {
+    ...linkStyles
+  },
+  '&&:focus': {
+    ...linkStyles
+  },
+  '&&:hover': {
+    ...linkStyles
+  },
+  '&&:visited': {
+    ...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)"
+  }
+});
+const safariOverlayStyles = css({
+  height: '1.1em',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  right: 3
+});
+const textStyles = css({
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+const iconStyles = 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'
+  }
+});
+const markerStyles = 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)"
+});
+const InlineCardOverlay = ({
+  children,
+  isToolbarOpen = false,
+  isVisible = false,
+  testId = 'inline-card-overlay',
+  url
+}) => {
+  const [showLabel, setShowLabel] = useState(true);
+  const [overlayWidth, setOverlayWidth] = useState(0);
+  const containerRef = useRef(null);
+  const markerRef = useRef(null);
+  const overlayRef = useRef(null);
+  const labelRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!isVisible) {
+      // Reset to default state for width calculation when the component become visible.
+      setShowLabel(true);
+      return;
+    }
+    try {
+      var _containerRef$current, _containerRef$current2, _containerRef$current3, _markerRef$current$ge, _markerRef$current, _markerRef$current$ge2, _overlayRef$current$g, _overlayRef$current, _overlayRef$current$g2, _labelRef$current$get, _labelRef$current, _labelRef$current$get2;
+      // Get the width of the available space to display overlay
+      const start = (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : (_containerRef$current3 = _containerRef$current2.getBoundingClientRect()) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+      const end = (_markerRef$current$ge = markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : (_markerRef$current$ge2 = _markerRef$current.getBoundingClientRect()) === null || _markerRef$current$ge2 === void 0 ? void 0 : _markerRef$current$ge2.left) !== null && _markerRef$current$ge !== void 0 ? _markerRef$current$ge : 0;
+      const availableWidth = end - start - PADDING_IN_PX;
+
+      // Get overlay width and label width
+      const overlayWidth = (_overlayRef$current$g = overlayRef === null || overlayRef === void 0 ? void 0 : (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : (_overlayRef$current$g2 = _overlayRef$current.getBoundingClientRect()) === null || _overlayRef$current$g2 === void 0 ? void 0 : _overlayRef$current$g2.width) !== null && _overlayRef$current$g !== void 0 ? _overlayRef$current$g : 0;
+
+      // Show label if there is enough space to display
+      const 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.
+      const labelWidth = (_labelRef$current$get = labelRef === null || labelRef === void 0 ? void 0 : (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : (_labelRef$current$get2 = _labelRef$current.getBoundingClientRect()) === null || _labelRef$current$get2 === void 0 ? void 0 : _labelRef$current$get2.width) !== null && _labelRef$current$get !== void 0 ? _labelRef$current$get : 0;
+      const newOverlayWidth = shouldShowLabel ? overlayWidth : overlayWidth - labelWidth;
+      setOverlayWidth(newOverlayWidth);
+    } catch {
+      // If something goes wrong, play it safe by hiding label so that
+      // the component does not look too janky.
+      setShowLabel(false);
+    }
+  }, [isVisible]);
+  const intl = useIntl();
+  const label = intl.formatMessage(messages.inlineOverlay);
+  const icon = useMemo(() => {
+    const IconComponent = isToolbarOpen ? HipchatChevronUpIcon : HipchatChevronDownIcon;
+    return jsx(IconComponent, {
+      label: label,
+      size: "small",
+      testId: `${testId}-${isToolbarOpen ? 'open' : 'close'}`
+    });
+  }, [isToolbarOpen, label, testId]);
+  return jsx("span", {
+    css: containerStyles,
+    ref: containerRef
+  }, children, isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    css: markerStyles,
+    ref: markerRef
+  }), jsx("a", {
+    css: [overlayStyles, browser.safari && safariOverlayStyles],
+    style: {
+      marginLeft: -overlayWidth
+    },
+    "data-testid": testId,
+    href: url,
+    onClick: e => e.preventDefault(),
+    ref: overlayRef
+  }, showLabel && jsx("span", {
+    css: textStyles,
+    "data-testid": `${testId}-label`,
+    ref: labelRef
+  }, label), jsx("span", {
+    css: iconStyles
+  }, icon))));
+};
+export default InlineCardOverlay;

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

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

package/dist/es2019/ui/LinkToolbarAppearance.js

@@ -6,12 +6,14 @@ import { commandWithMetadata, getButtonGroupOption, LinkToolbarButtonGroup } fro
 import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { isSupportedInParent } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { DiscoveryPulse } from '../common/pulse';
+import { shouldRenderToolbarPulse } from '../toolbar';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class LinkToolbarAppearance extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "renderDropdown", (view, cardContext) => {
-      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3;
+      var _cardActions$setSelec, _cardActions$setSelec2, _cardActions$changeSe, _cardActions$setSelec3, _cardContext$store2, _cardContext$store2$g;
       const {
         url,
         intl,
@@ -21,7 +23,8 @@ export class LinkToolbarAppearance extends React.Component {
         allowBlockCards = true,
         platform,
         editorAnalyticsApi,
-        cardActions
+        cardActions,
+        showInlineUpgradeDiscoverability = false
       } = this.props;
       const preview = allowEmbeds && cardContext && url && cardContext.extractors.getPreview(url, platform);
       const defaultCommand = () => false;
@@ -80,7 +83,7 @@ export class LinkToolbarAppearance extends React.Component {
       if (embedOption) {
         options.push(embedOption);
       }
-      return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
+      const LinkToolbarButtons = /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
         key: "link-toolbar-button-group",
         options: options.map(option => getButtonGroupOption(intl, dispatchCommand, {
           ...option,
@@ -89,6 +92,18 @@ export class LinkToolbarAppearance extends React.Component {
           })
         }))
       });
+      const status = url ? cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store2 = cardContext.store) === null || _cardContext$store2 === void 0 ? void 0 : (_cardContext$store2$g = _cardContext$store2.getState()[url]) === null || _cardContext$store2$g === void 0 ? void 0 : _cardContext$store2$g.status : '';
+      const embedEnabled = embedOption ? !embedOption.disabled : false;
+      if (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.createElement("div", null, /*#__PURE__*/React.createElement(DiscoveryPulse, {
+            localStorageKey: "toolbar-upgrade-pulse"
+          }, LinkToolbarButtons))
+        );
+      }
+      return LinkToolbarButtons;
     });
   }
   render() {

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

@@ -1,28 +1,20 @@
-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 var DiscoveryPulse = function DiscoveryPulse(_ref) {
   var children = _ref.children,
     localStorageKey = _ref.localStorageKey,
     isDiscovered = _ref.isDiscovered,
-    timeToDiscoverInMs = _ref.timeToDiscoverInMs,
     localStorageKeyExpirationInMs = _ref.localStorageKeyExpirationInMs;
+  var discovered = isDiscovered || isLocalStorageKeyDiscovered(localStorageKey);
   var onDiscovery = useCallback(function () {
-    markLocalStorageKeyDiscovered(localStorageKey, localStorageKeyExpirationInMs);
-  }, [localStorageKey, localStorageKeyExpirationInMs]);
-  useEffect(function () {
-    if (timeToDiscoverInMs) {
-      var timeoutUntilDiscovery = setTimeout(function () {
-        onDiscovery();
-      }, timeToDiscoverInMs);
-      return function () {
-        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/esm/messages.js

@@ -19,5 +19,10 @@ export var 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/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,8 +1,10 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
 var InlineCard = function InlineCard(_ref) {
   var node = _ref.node,
     cardContext = _ref.cardContext,
@@ -16,6 +18,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 = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOverlayVisible = _useState2[0],
+    setIsOverlayVisible = _useState2[1];
   var onClick = function onClick() {};
   var onResolve = useCallback(function (data) {
     if (!getPos || typeof getPos === 'boolean') {
@@ -49,7 +58,16 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var card = /*#__PURE__*/React.createElement("span", {
-    className: "card"
+    className: "card",
+    onMouseEnter: function onMouseEnter() {
+      return setIsOverlayVisible(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsOverlayVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(InlineCardOverlay, {
+    isVisible: isOverlayVisible,
+    url: url
   }, /*#__PURE__*/React.createElement(SmartCard, {
     key: url,
     url: url,
@@ -61,7 +79,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.createElement(cardContext.Provider, {

package/dist/esm/toolbar.js

@@ -110,14 +110,8 @@ export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags,
 
     // Applies padding override for when link picker is currently displayed
     var 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
-     */
     var lpLinkPicker = featureFlags.lpLinkPicker,
-      lpLinkPickerFocusTrap = featureFlags.lpLinkPickerFocusTrap,
       preventPopupOverflow = featureFlags.preventPopupOverflow;
-    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
     var isLinkPickerEnabled = !!lpLinkPicker;
     return _objectSpread(_objectSpread({
       title: intl.formatMessage(messages.card),
@@ -136,8 +130,7 @@ export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags,
         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
     }, editLinkToolbarConfig(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled));
   };
 };
@@ -397,4 +390,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
     onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
   });
   return toolbarItems;
+};
+export var shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
+  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled && getBooleanFF('platform.linking-platform.smart-card.inline-switcher');
 };

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

@@ -0,0 +1,179 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { browser } from '@atlaskit/editor-common/utils';
+import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+import { N20A, N800 } from '@atlaskit/theme/colors';
+import { messages } from '../../messages';
+var PADDING_IN_PX = 2;
+var containerStyles = css({
+  position: 'relative'
+});
+var linkStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  textDecoration: 'none'
+});
+var overlayStyles = 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(N800, ")"),
+  background: "var(--ds-background-accent-gray-subtlest, ".concat(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 = css({
+  height: '1.1em',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  right: 3
+});
+var textStyles = css({
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+var iconStyles = 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 = 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 = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    overlayWidth = _useState4[0],
+    setOverlayWidth = _useState4[1];
+  var containerRef = useRef(null);
+  var markerRef = useRef(null);
+  var overlayRef = useRef(null);
+  var labelRef = useRef(null);
+  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 = useIntl();
+  var label = intl.formatMessage(messages.inlineOverlay);
+  var icon = useMemo(function () {
+    var IconComponent = isToolbarOpen ? HipchatChevronUpIcon : HipchatChevronDownIcon;
+    return jsx(IconComponent, {
+      label: label,
+      size: "small",
+      testId: "".concat(testId, "-").concat(isToolbarOpen ? 'open' : 'close')
+    });
+  }, [isToolbarOpen, label, testId]);
+  return jsx("span", {
+    css: containerStyles,
+    ref: containerRef
+  }, children, isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    css: markerStyles,
+    ref: markerRef
+  }), jsx("a", {
+    css: [overlayStyles, browser.safari && safariOverlayStyles],
+    style: {
+      marginLeft: -overlayWidth
+    },
+    "data-testid": testId,
+    href: url,
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    ref: overlayRef
+  }, showLabel && jsx("span", {
+    css: textStyles,
+    "data-testid": "".concat(testId, "-label"),
+    ref: labelRef
+  }, label), jsx("span", {
+    css: iconStyles
+  }, icon))));
+};
+export default InlineCardOverlay;

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

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

package/dist/esm/ui/LinkToolbarAppearance.js

@@ -16,6 +16,8 @@ import { commandWithMetadata, getButtonGroupOption, LinkToolbarButtonGroup } fro
 import nodeNames, { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { isSupportedInParent } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { DiscoveryPulse } from '../common/pulse';
+import { shouldRenderToolbarPulse } from '../toolbar';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
   _inherits(LinkToolbarAppearance, _React$Component);
@@ -28,7 +30,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_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,
@@ -39,7 +41,9 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
         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;
@@ -99,7 +103,7 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
       if (embedOption) {
         options.push(embedOption);
       }
-      return /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
+      var LinkToolbarButtons = /*#__PURE__*/React.createElement(LinkToolbarButtonGroup, {
         key: "link-toolbar-button-group",
         options: options.map(function (option) {
           return getButtonGroupOption(intl, dispatchCommand, _objectSpread(_objectSpread({}, option), {}, {
@@ -109,6 +113,18 @@ export var LinkToolbarAppearance = /*#__PURE__*/function (_React$Component) {
           }));
         })
       });
+      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 (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.createElement("div", null, /*#__PURE__*/React.createElement(DiscoveryPulse, {
+            localStorageKey: "toolbar-upgrade-pulse"
+          }, LinkToolbarButtons))
+        );
+      }
+      return LinkToolbarButtons;
     });
     return _this;
   }

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

@@ -13,14 +13,10 @@ export interface PulseProps {
      * The time in ms after which the key in local storage will be considered expired and the Pulse will be shown again
      */
     localStorageKeyExpirationInMs?: number;
-    /**
-     * The time in ms since the Pulse has started after which the key will be stored in local storage.
-     */
-    timeToDiscoverInMs?: number;
     /**
      * And indicator that the feature was discovered externally and the pulsation needs to stop.
      */
     isDiscovered?: boolean;
 }
-export declare const DiscoveryPulse: ({ children, localStorageKey, isDiscovered, timeToDiscoverInMs, localStorageKeyExpirationInMs, }: PulseProps) => JSX.Element;
+export declare const DiscoveryPulse: ({ children, localStorageKey, isDiscovered, localStorageKeyExpirationInMs, }: PulseProps) => JSX.Element;
 export default Pulse;

package/dist/types/messages.d.ts

@@ -19,4 +19,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    inlineOverlay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/toolbar.d.ts

@@ -7,3 +7,4 @@ export declare const removeCard: (editorAnalyticsApi: EditorAnalyticsAPI | undef
 export declare const visitCardLink: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export declare const openLinkSettings: (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export declare const floatingToolbar: (cardOptions: CardOptions, featureFlags: FeatureFlags, platform?: CardPlatform, linkPickerOptions?: LinkPickerOptions, pluginInjectionApi?: ExtractInjectionAPI<typeof cardPlugin>) => FloatingToolbarHandler;
+export declare const shouldRenderToolbarPulse: (embedEnabled: boolean, appearance: string, status: string, isDiscoverabilityEnabled: boolean) => boolean;

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

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+import type { InlineCardOverlayProps } from './types';
+declare const InlineCardOverlay: FC<InlineCardOverlayProps>;
+export default InlineCardOverlay;

package/dist/types/ui/InlineCardOverlay/types.d.ts

@@ -0,0 +1,6 @@
+export type InlineCardOverlayProps = {
+    isToolbarOpen?: boolean;
+    isVisible?: boolean;
+    testId?: string;
+    url: string;
+};