@atlaskit/editor-plugin-card 0.13.4 → 0.13.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-card
 
+## 0.13.6
+
+### Patch Changes
+
+- [#43035](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43035) [`705854f13b3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/705854f13b3) - [ux] Show inline card overlay on selected (behind feature flag)
+- [#43417](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43417) [`3f3c17f0273`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3f3c17f0273) - ED-20971 Upgrade adf-schema package to ^34.0.0
+- [#43496](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43496) [`290e75ca7f2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/290e75ca7f2) - Fixes uncaught error when using arrow keys to move selection into inline card.
+- Updated dependencies
+
+## 0.13.5
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.13.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCard.js

@@ -140,6 +140,8 @@ function InlineCardNodeView(props) {
       useAlternativePreloader: useAlternativePreloader
     });
   }
+
+  // BEGIN: Awareness (To be revisited in EDM-8508)
   var editorState = view.state;
   var linkPosition = getPos && typeof getPos() === 'number' ? getPos() : undefined;
   var canBeUpgradedToEmbed = !!linkPosition && allowEmbeds ? (0, _utils.isEmbedSupportedAtPosition)(linkPosition, editorState, 'inline') : false;
@@ -147,6 +149,8 @@ function InlineCardNodeView(props) {
   var isPulseEnabled = enableInlineUpgradeFeatures && canBeUpgradedToEmbed;
   var isOverlayEnabled = enableInlineUpgradeFeatures && (canBeUpgradedToEmbed || canBeUpgradedToBlock);
   var isSelected = view.state.selection instanceof _state.NodeSelection && ((_view$state$selection = view.state.selection) === null || _view$state$selection === void 0 || (_view$state$selection = _view$state$selection.node) === null || _view$state$selection === void 0 ? void 0 : _view$state$selection.type) === view.state.schema.nodes.inlineCard && ((_view$state$selection2 = view.state.selection) === null || _view$state$selection2 === void 0 ? void 0 : _view$state$selection2.from) === getPos();
+  // END: Awareness
+
   return /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, {
     node: node,
     view: view,

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineCardWithAwareness = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -37,17 +36,17 @@ var InlineCard = function InlineCard(_ref) {
     isOverlayEnabled = _ref.isOverlayEnabled,
     isPulseEnabled = _ref.isPulseEnabled,
     pluginInjectionApi = _ref.pluginInjectionApi,
-    isSelected = _ref.isSelected;
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
   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
+  // BEGIN: Awareness (To be revisited in EDM-8508)
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isOverlayVisible = _useState2[0],
-    setIsOverlayVisible = _useState2[1];
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
   var linkPosition = (0, _react.useMemo)(function () {
     if (!getPos || typeof getPos === 'boolean') {
       return undefined;
@@ -72,6 +71,8 @@ var InlineCard = function InlineCard(_ref) {
   if (isSelected && shouldShowToolbarPulse && !(0, _localStorage.isLocalStorageKeyDiscovered)(_localStorage.LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR)) {
     (0, _localStorage.markLocalStorageKeyDiscovered)(_localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
   }
+  // END: Awareness
+
   var scrollContainer = (0, _react.useMemo)(function () {
     return (0, _ui.findOverflowScrollParent)(view.dom) || undefined;
   }, [view.dom]);
@@ -107,10 +108,7 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var innerCard = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_InlineCardOverlay.default, {
-      isVisible: isOverlayVisible,
-      url: url
-    }, (0, _react2.jsx)(_smartCard.Card, {
+    return (0, _react2.jsx)(_smartCard.Card, {
       key: url,
       url: url,
       data: data,
@@ -121,25 +119,34 @@ var InlineCard = function InlineCard(_ref) {
       onError: onError,
       inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
       showServerActions: showServerActions
-    }));
-  }, [data, isOverlayVisible, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
-  var card = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)("span", (0, _extends2.default)({
-      css: shouldShowLinkPulse && loaderWrapperStyles,
-      className: "card"
-    }, shouldShowLinkOverlay ? {
+    });
+  }, [data, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
+
+  // BEGIN: Awareness (To be revisited in EDM-8508)
+  var cardWithOverlay = (0, _react.useMemo)(function () {
+    return shouldShowLinkOverlay ? (0, _react2.jsx)(_InlineCardOverlay.default, {
+      isSelected: isSelected,
+      isVisible: isHovered || isSelected,
       onMouseEnter: function onMouseEnter() {
-        return setIsOverlayVisible(true);
+        return setIsHovered(true);
       },
       onMouseLeave: function onMouseLeave() {
-        return setIsOverlayVisible(false);
-      }
-    } : {}), shouldShowLinkPulse ? (0, _react2.jsx)(_pulse.DiscoveryPulse, {
+        return setIsHovered(false);
+      },
+      url: url
+    }, innerCard) : innerCard;
+  }, [innerCard, isHovered, isSelected, shouldShowLinkOverlay, url]);
+  var card = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)("span", {
+      css: shouldShowLinkPulse && loaderWrapperStyles,
+      className: "card"
+    }, shouldShowLinkPulse ? (0, _react2.jsx)(_pulse.DiscoveryPulse, {
       localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
       localStorageKeyExpirationInMs: _localStorage.ONE_DAY_IN_MILLISECONDS,
-      discoveryMode: 'start'
-    }, innerCard) : innerCard);
-  }, [shouldShowLinkPulse, shouldShowLinkOverlay, innerCard]);
+      discoveryMode: "start"
+    }, cardWithOverlay) : cardWithOverlay);
+  }, [shouldShowLinkPulse, cardWithOverlay]);
+  // END: Awareness
 
   // [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

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

@@ -26,7 +26,7 @@ var getClosestInlineCardPos = function getClosestInlineCardPos(state, editorView
     left: coord.left,
     top: direction === 'up' ? coord.top - lookupPixel : coord.bottom + lookupPixel
   })) === null || _editorView$posAtCoor === void 0 ? void 0 : _editorView$posAtCoor.inside;
-  if (nearPos) {
+  if (typeof nearPos === 'number' && nearPos > -1) {
     var newNode = state.doc.nodeAt(nearPos);
     if (newNode) {
       if (newNode.type !== inlineCardType || (0, _utils2.findChildren)(parent, function (node) {

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

@@ -6,21 +6,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 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");
+var _utils2 = require("./utils");
+var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
 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 DEBOUNCE_IN_MS = 5;
+var ESTIMATED_MIN_WIDTH_IN_PX = 16;
 var PADDING_IN_PX = 2;
+var OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
+var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
+var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
 var containerStyles = (0, _react2.css)({
   position: 'relative',
   lineHeight: 'normal'
@@ -30,9 +41,10 @@ var linkStyles = (0, _react2.css)({
   textDecoration: 'none'
 });
 var overlayStyles = (0, _react2.css)({
+  // Visibility is set directly on element via style prop
+  display: 'inline-flex',
   // Positioning
   position: 'relative',
-  display: 'inline-flex',
   flexWrap: 'nowrap',
   alignItems: 'center',
   alignSelf: 'stretch',
@@ -98,75 +110,136 @@ var markerStyles = (0, _react2.css)({
 });
 var InlineCardOverlay = function InlineCardOverlay(_ref) {
   var children = _ref.children,
-    _ref$isToolbarOpen = _ref.isToolbarOpen,
-    isToolbarOpen = _ref$isToolbarOpen === void 0 ? false : _ref$isToolbarOpen,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _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;
+    url = _ref.url,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    showLabel = _useState2[0],
-    setShowLabel = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+    showOverlay = _useState2[0],
+    setShowOverlay = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    overlayWidth = _useState4[0],
-    setOverlayWidth = _useState4[1];
+    showLabel = _useState4[0],
+    setShowLabel = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    overlayWidth = _useState6[0],
+    setOverlayWidth = _useState6[1];
+  var maxOverlayWidth = (0, _react.useRef)(0);
+  var minOverlayWidth = (0, _react.useRef)(ESTIMATED_MIN_WIDTH_IN_PX);
+  var parentWidth = (0, _react.useRef)(0);
   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);
+  var setVisibility = (0, _react.useCallback)(function () {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    var marker = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
+    if (!marker) {
       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;
+      // Get the width of the available space to display overlay.
+      // This is the width of the inline link itself. If the inline
+      // is wrapped to the next line, this is width of the last line.
+      var availableWidth = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX;
 
-      // Show label if there is enough space to display
-      var shouldShowLabel = availableWidth > 0 && _overlayWidth > 0 ? availableWidth > _overlayWidth : false;
-      setShowLabel(shouldShowLabel);
+      // If available width is less than the min width of overlay, don't show overlay.
+      var canShowOverlay = availableWidth > minOverlayWidth.current;
+      setShowOverlay(canShowOverlay);
+      if (!canShowOverlay) {
+        return;
+      }
 
-      // 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);
+      // Otherwise, check if overlay can be show in full context with label and icon.
+      var canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
+      setShowLabel(canShowLabel);
+      setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
     } catch (_unused) {
-      // If something goes wrong, play it safe by hiding label so that
-      // the component does not look too janky.
-      setShowLabel(false);
+      // If something goes wrong, hide the overlay all together.
+      setShowOverlay(false);
+    }
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    // Using useLayoutEffect here.
+    // 1) We want all to be able to determine whether to display label before
+    //    the overlay becomes visible.
+    // 2) We need to wait for the refs to be assigned to be able to do determine
+    //    the width of the overlay.
+    if (!containerRef.current) {
+      return;
+    }
+    if (!maxOverlayWidth.current) {
+      var overlay = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_CLASSNAME));
+      var _label = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
+      if (overlay && _label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        // This should run only once.
+        var _getOverlayWidths = (0, _utils2.getOverlayWidths)(overlay, _label),
+          max = _getOverlayWidths.max,
+          min = _getOverlayWidths.min;
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+      }
+    }
+    if (isVisible) {
+      setVisibility();
+    }
+  }, [setVisibility, isVisible]);
+  (0, _react.useEffect)(function () {
+    var _containerRef$current;
+    // Find the closest block parent to observe size change
+    var parent = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
+    if (!parent) {
+      return;
     }
-  }, [isVisible]);
+    var updateOverlay = (0, _debounce.default)(function (entries) {
+      var _entries$;
+      if (!isVisible) {
+        return;
+      }
+      var size = entries === null || entries === void 0 || (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize) === null || _entries$ === void 0 || (_entries$ = _entries$[0]) === null || _entries$ === void 0 ? void 0 : _entries$.inlineSize;
+      if (!size) {
+        return;
+      }
+      if (!parentWidth.current) {
+        parentWidth.current = size;
+      }
+      if (parentWidth.current === size) {
+        return;
+      }
+      parentWidth.current = size;
+      setVisibility();
+    }, DEBOUNCE_IN_MS);
+    var observer = new ResizeObserver(updateOverlay);
+    observer.observe(parent);
+    return function () {
+      observer.disconnect();
+    };
+  }, [isVisible, setVisibility]);
   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;
+    var IconComponent = isSelected ? _chevronUp.default : _chevronDown.default;
     return (0, _react2.jsx)(IconComponent, {
       label: label,
       size: "small",
-      testId: "".concat(testId, "-").concat(isToolbarOpen ? 'open' : 'close')
+      testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
     });
-  }, [isToolbarOpen, label, testId]);
-  return (0, _react2.jsx)("span", {
+  }, [isSelected, label, testId]);
+  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
     css: containerStyles,
     ref: containerRef
-  }, children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+  }), children, isVisible && showOverlay && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     "aria-hidden": "true",
-    css: markerStyles,
-    ref: markerRef
+    className: OVERLAY_MARKER_CLASSNAME,
+    css: markerStyles
   }), (0, _react2.jsx)("a", {
+    className: OVERLAY_CLASSNAME,
     css: [overlayStyles, _utils.browser.safari && safariOverlayStyles],
     style: {
       marginLeft: -overlayWidth
@@ -176,11 +249,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     onClick: function onClick(e) {
       return e.preventDefault();
     },
-    ref: overlayRef
+    tabIndex: -1
   }, showLabel && (0, _react2.jsx)("span", {
+    className: OVERLAY_LABEL_CLASSNAME,
     css: textStyles,
-    "data-testid": "".concat(testId, "-label"),
-    ref: labelRef
+    "data-testid": "".concat(testId, "-label")
   }, label), (0, _react2.jsx)("span", {
     css: iconStyles
   }, icon))));

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getOverlayWidths = exports.getInlineCardAvailableWidth = exports.getChildElement = void 0;
+/**
+ * Find a child element inside a ref.
+ */
+var getChildElement = exports.getChildElement = function getChildElement(ref, selector) {
+  return ref.current ? ref.current.querySelector(selector) : undefined;
+};
+
+/**
+ * Get the available width of the inline card.
+ * (Mainly here to make the component unit testable.)
+ */
+var getInlineCardAvailableWidth = exports.getInlineCardAvailableWidth = function getInlineCardAvailableWidth(startEl, endEl) {
+  var start = startEl.getBoundingClientRect().left;
+  var end = endEl.getBoundingClientRect().left;
+  return end - start;
+};
+
+/**
+ * Get max and min width of an overlay.
+ * (Mainly here to make the component unit testable.)
+ */
+var getOverlayWidths = exports.getOverlayWidths = function getOverlayWidths(overlayEl, labelEl) {
+  var max = overlayEl.getBoundingClientRect().width;
+  var min = max - labelEl.getBoundingClientRect().width;
+  return {
+    max: max,
+    min: min
+  };
+};

package/dist/es2019/nodeviews/inlineCard.js

@@ -122,6 +122,8 @@ export function InlineCardNodeView(props) {
       useAlternativePreloader: useAlternativePreloader
     });
   }
+
+  // BEGIN: Awareness (To be revisited in EDM-8508)
   const editorState = view.state;
   const linkPosition = getPos && typeof getPos() === 'number' ? getPos() : undefined;
   const canBeUpgradedToEmbed = !!linkPosition && allowEmbeds ? isEmbedSupportedAtPosition(linkPosition, editorState, 'inline') : false;
@@ -129,6 +131,8 @@ export function InlineCardNodeView(props) {
   const isPulseEnabled = enableInlineUpgradeFeatures && canBeUpgradedToEmbed;
   const isOverlayEnabled = enableInlineUpgradeFeatures && (canBeUpgradedToEmbed || canBeUpgradedToBlock);
   const isSelected = view.state.selection instanceof NodeSelection && ((_view$state$selection = view.state.selection) === null || _view$state$selection === void 0 ? void 0 : (_view$state$selection2 = _view$state$selection.node) === null || _view$state$selection2 === void 0 ? void 0 : _view$state$selection2.type) === view.state.schema.nodes.inlineCard && ((_view$state$selection3 = view.state.selection) === null || _view$state$selection3 === void 0 ? void 0 : _view$state$selection3.from) === getPos();
+  // END: Awareness
+
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, {
     node: node,
     view: view,

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { memo, useCallback, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -28,16 +27,15 @@ const InlineCard = ({
   isOverlayEnabled,
   isPulseEnabled,
   pluginInjectionApi,
-  isSelected
+  isSelected = false
 }) => {
   const {
     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);
+  // BEGIN: Awareness (To be revisited in EDM-8508)
+  const [isHovered, setIsHovered] = useState(false);
   const linkPosition = useMemo(() => {
     if (!getPos || typeof getPos === 'boolean') {
       return undefined;
@@ -63,6 +61,8 @@ const InlineCard = ({
   if (isSelected && shouldShowToolbarPulse && !isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR)) {
     markLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
   }
+  // END: Awareness
+
   const scrollContainer = useMemo(() => findOverflowScrollParent(view.dom) || undefined, [view.dom]);
   const onResolve = useCallback(data => {
     if (!getPos || typeof getPos === 'boolean') {
@@ -99,10 +99,7 @@ const InlineCard = ({
       url
     });
   }, [onResolve]);
-  const innerCard = useMemo(() => jsx(InlineCardOverlay, {
-    isVisible: isOverlayVisible,
-    url: url
-  }, jsx(SmartCard, {
+  const innerCard = useMemo(() => jsx(SmartCard, {
     key: url,
     url: url,
     data: data,
@@ -113,18 +110,25 @@ const InlineCard = ({
     onError: onError,
     inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
     showServerActions: showServerActions
-  })), [data, isOverlayVisible, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
-  const card = useMemo(() => jsx("span", _extends({
+  }), [data, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
+
+  // BEGIN: Awareness (To be revisited in EDM-8508)
+  const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
+    isSelected: isSelected,
+    isVisible: isHovered || isSelected,
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    url: url
+  }, innerCard) : innerCard, [innerCard, isHovered, isSelected, shouldShowLinkOverlay, url]);
+  const card = useMemo(() => jsx("span", {
     css: shouldShowLinkPulse && loaderWrapperStyles,
     className: "card"
-  }, shouldShowLinkOverlay ? {
-    onMouseEnter: () => setIsOverlayVisible(true),
-    onMouseLeave: () => setIsOverlayVisible(false)
-  } : {}), shouldShowLinkPulse ? jsx(DiscoveryPulse, {
+  }, shouldShowLinkPulse ? jsx(DiscoveryPulse, {
     localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
     localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
-    discoveryMode: 'start'
-  }, innerCard) : innerCard), [shouldShowLinkPulse, shouldShowLinkOverlay, innerCard]);
+    discoveryMode: "start"
+  }, cardWithOverlay) : cardWithOverlay), [shouldShowLinkPulse, cardWithOverlay]);
+  // END: Awareness
 
   // [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

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

@@ -23,7 +23,7 @@ const getClosestInlineCardPos = (state, editorView, direction) => {
     left: coord.left,
     top: direction === 'up' ? coord.top - lookupPixel : coord.bottom + lookupPixel
   })) === null || _editorView$posAtCoor === void 0 ? void 0 : _editorView$posAtCoor.inside;
-  if (nearPos) {
+  if (typeof nearPos === 'number' && nearPos > -1) {
     const newNode = state.doc.nodeAt(nearPos);
     if (newNode) {
       if (newNode.type !== inlineCardType || findChildren(parent, node => node === newNode, false).length === 0 || newNode === selection.node) {