@atlaskit/editor-plugin-card/dist/cjs/ui/AwarenessWrapper/index.js

Card plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AwarenessWrapper = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _analyticsNext = require("@atlaskit/analytics-next");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _utils = require("../../pm-plugins/utils");
var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
var _localStorage = require("../local-storage");
var _Pulse = require("../Pulse");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports

// editor adds a standard line-height that is bigger than an inline smart link
// due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
var loaderWrapperStyles = (0, _react2.css)({
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '.loader-wrapper': {
    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
    lineHeight: 'normal'
  }
});
var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref) {
  var _cardContext$value2;
  var cardContext = _ref.cardContext,
    children = _ref.children,
    getPos = _ref.getPos,
    isInserted = _ref.isInserted,
    isOverlayEnabled = _ref.isOverlayEnabled,
    isSelected = _ref.isSelected,
    isResolvedViewRendered = _ref.isResolvedViewRendered,
    isPulseEnabled = _ref.isPulseEnabled,
    markMostRecentlyInsertedLink = _ref.markMostRecentlyInsertedLink,
    pluginInjectionApi = _ref.pluginInjectionApi,
    setOverlayHoveredStyles = _ref.setOverlayHoveredStyles,
    url = _ref.url,
    appearance = _ref.appearance;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isHovered = _useState2[0],
    setIsHovered = _useState2[1];
  var linkPosition = (0, _react.useMemo)(function () {
    if (!getPos || typeof getPos === 'boolean') {
      return undefined;
    }
    var pos = getPos();
    return typeof pos === 'number' ? pos : undefined;
  }, [getPos]);
  var _useLinkUpgradeDiscov = (0, _useLinkUpgradeDiscoverability.default)({
      url: url,
      linkPosition: linkPosition || -1,
      cardContext: cardContext === null || cardContext === void 0 ? void 0 : cardContext.value,
      pluginInjectionApi: pluginInjectionApi,
      isOverlayEnabled: isOverlayEnabled,
      isPulseEnabled: isPulseEnabled
    }),
    shouldShowLinkPulse = _useLinkUpgradeDiscov.shouldShowLinkPulse,
    shouldShowToolbarPulse = _useLinkUpgradeDiscov.shouldShowToolbarPulse,
    shouldShowLinkOverlay = _useLinkUpgradeDiscov.shouldShowLinkOverlay,
    isLinkMostRecentlyInserted = _useLinkUpgradeDiscov.isLinkMostRecentlyInserted;

  // If the toolbar pulse has not yet been invalidated and this is a case where we will be showing it,
  // we need to invalidate the link pulse too. Toolbar pulse will be invalidated in the corresponding component.
  if (isSelected && shouldShowToolbarPulse && !(0, _localStorage.isLocalStorageKeyDiscovered)(_localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR)) {
    (0, _localStorage.markLocalStorageKeyDiscovered)(_localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
  }
  (0, _react.useEffect)(function () {
    if (shouldShowLinkOverlay && isLinkMostRecentlyInserted) {
      markMostRecentlyInsertedLink(true);
    }
  }, [isLinkMostRecentlyInserted, markMostRecentlyInsertedLink, shouldShowLinkOverlay]);
  var handleOverlayChange = (0, _react.useCallback)(function (isHovered) {
    setIsHovered(isHovered);
    setOverlayHoveredStyles(isHovered);
  }, [setOverlayHoveredStyles]);
  var cardWithOverlay = (0, _react.useMemo)(function () {
    if (shouldShowLinkOverlay && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true)) {
      return (0, _react2.jsx)(_InlineCardOverlay.default, {
        isSelected: isSelected,
        isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected)
        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
        ,
        onMouseEnter: function onMouseEnter() {
          return handleOverlayChange(true);
        }
        // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
        ,
        onMouseLeave: function onMouseLeave() {
          return handleOverlayChange(false);
        },
        url: url
      }, children);
    }
    return children;
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
  var isInline = appearance === 'inline';
  var placeholderUniqId = linkPosition || 0;
  return (0, _react.useMemo)(function () {
    var _cardContext$value;
    return (0, _react2.jsx)("span", {
      css: shouldShowLinkPulse && loaderWrapperStyles
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: "card",
      "data-vc": "awareness-wrapper",
      "data-ssr-placeholder": "awareness-wrapper-".concat(placeholderUniqId),
      "data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
    }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext
    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
    , {
      data: {
        attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
      }
    }, (0, _react2.jsx)(_Pulse.DiscoveryPulse, {
      localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
      localStorageKeyExpirationInMs: _localStorage.ONE_DAY_IN_MILLISECONDS,
      discoveryMode: "start",
      shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
      testId: "link-discovery-pulse",
      isInline: isInline
    }, cardWithOverlay)));
  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
};