@atlaskit/editor-plugin-card 0.13.4 → 0.13.6

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

@@ -1,14 +1,23 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
 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';
+import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths } from './utils';
+const DEBOUNCE_IN_MS = 5;
+const ESTIMATED_MIN_WIDTH_IN_PX = 16;
 const PADDING_IN_PX = 2;
+const OVERLAY_CLASSNAME = 'ak-editor-card-overlay';
+const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
+const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
 const containerStyles = css({
   position: 'relative',
   lineHeight: 'normal'
@@ -18,9 +27,10 @@ const linkStyles = css({
   textDecoration: 'none'
 });
 const overlayStyles = 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',
@@ -96,67 +106,126 @@ const markerStyles = css({
 });
 const InlineCardOverlay = ({
   children,
-  isToolbarOpen = false,
+  isSelected = false,
   isVisible = false,
   testId = 'inline-card-overlay',
-  url
+  url,
+  ...props
 }) => {
+  const [showOverlay, setShowOverlay] = useState(true);
   const [showLabel, setShowLabel] = useState(true);
   const [overlayWidth, setOverlayWidth] = useState(0);
+  const maxOverlayWidth = useRef(0);
+  const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
+  const parentWidth = useRef(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);
+  const setVisibility = useCallback(() => {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    const marker = getChildElement(containerRef, `.${OVERLAY_MARKER_CLASSNAME}`);
+    if (!marker) {
       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;
+      // 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.
+      const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX;
 
-      // Show label if there is enough space to display
-      const 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.
+      const 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.
-      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);
+      // Otherwise, check if overlay can be show in full context with label and icon.
+      const canShowLabel = availableWidth > maxOverlayWidth.current + PADDING_IN_PX;
+      setShowLabel(canShowLabel);
+      setOverlayWidth(canShowLabel ? maxOverlayWidth.current : minOverlayWidth.current);
     } catch {
-      // 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);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    // 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) {
+      const overlay = getChildElement(containerRef, `.${OVERLAY_CLASSNAME}`);
+      const label = getChildElement(containerRef, `.${OVERLAY_LABEL_CLASSNAME}`);
+      if (overlay && label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        // This should run only once.
+        const {
+          max,
+          min
+        } = getOverlayWidths(overlay, label);
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+      }
+    }
+    if (isVisible) {
+      setVisibility();
+    }
+  }, [setVisibility, isVisible]);
+  useEffect(() => {
+    var _containerRef$current;
+    // Find the closest block parent to observe size change
+    const parent = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
+    if (!parent) {
+      return;
     }
-  }, [isVisible]);
+    const updateOverlay = debounce(entries => {
+      var _entries$, _entries$$contentBoxS, _entries$$contentBoxS2;
+      if (!isVisible) {
+        return;
+      }
+      const size = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : (_entries$$contentBoxS = _entries$.contentBoxSize) === null || _entries$$contentBoxS === void 0 ? void 0 : (_entries$$contentBoxS2 = _entries$$contentBoxS[0]) === null || _entries$$contentBoxS2 === void 0 ? void 0 : _entries$$contentBoxS2.inlineSize;
+      if (!size) {
+        return;
+      }
+      if (!parentWidth.current) {
+        parentWidth.current = size;
+      }
+      if (parentWidth.current === size) {
+        return;
+      }
+      parentWidth.current = size;
+      setVisibility();
+    }, DEBOUNCE_IN_MS);
+    const observer = new ResizeObserver(updateOverlay);
+    observer.observe(parent);
+    return () => {
+      observer.disconnect();
+    };
+  }, [isVisible, setVisibility]);
   const intl = useIntl();
   const label = intl.formatMessage(messages.inlineOverlay);
   const icon = useMemo(() => {
-    const IconComponent = isToolbarOpen ? HipchatChevronUpIcon : HipchatChevronDownIcon;
+    const IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
     return jsx(IconComponent, {
       label: label,
       size: "small",
-      testId: `${testId}-${isToolbarOpen ? 'open' : 'close'}`
+      testId: `${testId}-${isSelected ? 'open' : 'close'}`
     });
-  }, [isToolbarOpen, label, testId]);
-  return jsx("span", {
+  }, [isSelected, label, testId]);
+  return jsx("span", _extends({}, props, {
     css: containerStyles,
     ref: containerRef
-  }, children, isVisible && jsx(React.Fragment, null, jsx("span", {
+  }), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
     "aria-hidden": "true",
-    css: markerStyles,
-    ref: markerRef
+    className: OVERLAY_MARKER_CLASSNAME,
+    css: markerStyles
   }), jsx("a", {
+    className: OVERLAY_CLASSNAME,
     css: [overlayStyles, browser.safari && safariOverlayStyles],
     style: {
       marginLeft: -overlayWidth
@@ -164,11 +233,11 @@ const InlineCardOverlay = ({
     "data-testid": testId,
     href: url,
     onClick: e => e.preventDefault(),
-    ref: overlayRef
+    tabIndex: -1
   }, showLabel && jsx("span", {
+    className: OVERLAY_LABEL_CLASSNAME,
     css: textStyles,
-    "data-testid": `${testId}-label`,
-    ref: labelRef
+    "data-testid": `${testId}-label`
   }, label), jsx("span", {
     css: iconStyles
   }, icon))));

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

@@ -0,0 +1,27 @@
+/**
+ * Find a child element inside a ref.
+ */
+export const getChildElement = (ref, selector) => ref.current ? ref.current.querySelector(selector) : undefined;
+
+/**
+ * Get the available width of the inline card.
+ * (Mainly here to make the component unit testable.)
+ */
+export const getInlineCardAvailableWidth = (startEl, endEl) => {
+  const start = startEl.getBoundingClientRect().left;
+  const end = endEl.getBoundingClientRect().left;
+  return end - start;
+};
+
+/**
+ * Get max and min width of an overlay.
+ * (Mainly here to make the component unit testable.)
+ */
+export const getOverlayWidths = (overlayEl, labelEl) => {
+  const max = overlayEl.getBoundingClientRect().width;
+  const min = max - labelEl.getBoundingClientRect().width;
+  return {
+    max,
+    min
+  };
+};

package/dist/esm/nodeviews/inlineCard.js

@@ -133,6 +133,8 @@ export 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 ? isEmbedSupportedAtPosition(linkPosition, editorState, 'inline') : false;
@@ -140,6 +142,8 @@ export function InlineCardNodeView(props) {
   var isPulseEnabled = enableInlineUpgradeFeatures && canBeUpgradedToEmbed;
   var isOverlayEnabled = enableInlineUpgradeFeatures && (canBeUpgradedToEmbed || canBeUpgradedToBlock);
   var isSelected = view.state.selection instanceof 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.createElement(WrappedInlineCardWithAwareness, {
     node: node,
     view: view,

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { memo, useCallback, useMemo, useState } from 'react';
@@ -29,17 +28,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isOverlayVisible = _useState2[0],
-    setIsOverlayVisible = _useState2[1];
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
   var linkPosition = useMemo(function () {
     if (!getPos || typeof getPos === 'boolean') {
       return undefined;
@@ -64,6 +63,8 @@ var InlineCard = function InlineCard(_ref) {
   if (isSelected && shouldShowToolbarPulse && !isLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR)) {
     markLocalStorageKeyDiscovered(LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK);
   }
+  // END: Awareness
+
   var scrollContainer = useMemo(function () {
     return findOverflowScrollParent(view.dom) || undefined;
   }, [view.dom]);
@@ -99,10 +100,7 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var innerCard = useMemo(function () {
-    return jsx(InlineCardOverlay, {
-      isVisible: isOverlayVisible,
-      url: url
-    }, jsx(SmartCard, {
+    return jsx(SmartCard, {
       key: url,
       url: url,
       data: data,
@@ -113,25 +111,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 = useMemo(function () {
-    return jsx("span", _extends({
-      css: shouldShowLinkPulse && loaderWrapperStyles,
-      className: "card"
-    }, shouldShowLinkOverlay ? {
+    });
+  }, [data, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
+
+  // BEGIN: Awareness (To be revisited in EDM-8508)
+  var cardWithOverlay = useMemo(function () {
+    return shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
+      isSelected: isSelected,
+      isVisible: isHovered || isSelected,
       onMouseEnter: function onMouseEnter() {
-        return setIsOverlayVisible(true);
+        return setIsHovered(true);
       },
       onMouseLeave: function onMouseLeave() {
-        return setIsOverlayVisible(false);
-      }
-    } : {}), shouldShowLinkPulse ? jsx(DiscoveryPulse, {
+        return setIsHovered(false);
+      },
+      url: url
+    }, innerCard) : innerCard;
+  }, [innerCard, isHovered, isSelected, shouldShowLinkOverlay, url]);
+  var card = useMemo(function () {
+    return jsx("span", {
+      css: shouldShowLinkPulse && loaderWrapperStyles,
+      className: "card"
+    }, 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/esm/pm-plugins/keymap.js

@@ -20,7 +20,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 || findChildren(parent, function (node) {

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

@@ -1,18 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
 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 React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
 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';
+import { getChildElement, getInlineCardAvailableWidth, getOverlayWidths } from './utils';
+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 = css({
   position: 'relative',
   lineHeight: 'normal'
@@ -22,9 +33,10 @@ var linkStyles = css({
   textDecoration: 'none'
 });
 var overlayStyles = 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',
@@ -90,75 +102,136 @@ var markerStyles = 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 = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
-    showLabel = _useState2[0],
-    setShowLabel = _useState2[1];
-  var _useState3 = useState(0),
+    showOverlay = _useState2[0],
+    setShowOverlay = _useState2[1];
+  var _useState3 = useState(true),
     _useState4 = _slicedToArray(_useState3, 2),
-    overlayWidth = _useState4[0],
-    setOverlayWidth = _useState4[1];
+    showLabel = _useState4[0],
+    setShowLabel = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    overlayWidth = _useState6[0],
+    setOverlayWidth = _useState6[1];
+  var maxOverlayWidth = useRef(0);
+  var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
+  var parentWidth = useRef(0);
   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);
+  var setVisibility = useCallback(function () {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    var marker = 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 = 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);
+    }
+  }, []);
+  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 = getChildElement(containerRef, ".".concat(OVERLAY_CLASSNAME));
+      var _label = 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 = getOverlayWidths(overlay, _label),
+          max = _getOverlayWidths.max,
+          min = _getOverlayWidths.min;
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+      }
+    }
+    if (isVisible) {
+      setVisibility();
+    }
+  }, [setVisibility, isVisible]);
+  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 = debounce(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 = useIntl();
   var label = intl.formatMessage(messages.inlineOverlay);
   var icon = useMemo(function () {
-    var IconComponent = isToolbarOpen ? HipchatChevronUpIcon : HipchatChevronDownIcon;
+    var IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
     return jsx(IconComponent, {
       label: label,
       size: "small",
-      testId: "".concat(testId, "-").concat(isToolbarOpen ? 'open' : 'close')
+      testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
     });
-  }, [isToolbarOpen, label, testId]);
-  return jsx("span", {
+  }, [isSelected, label, testId]);
+  return jsx("span", _extends({}, props, {
     css: containerStyles,
     ref: containerRef
-  }, children, isVisible && jsx(React.Fragment, null, jsx("span", {
+  }), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
     "aria-hidden": "true",
-    css: markerStyles,
-    ref: markerRef
+    className: OVERLAY_MARKER_CLASSNAME,
+    css: markerStyles
   }), jsx("a", {
+    className: OVERLAY_CLASSNAME,
     css: [overlayStyles, browser.safari && safariOverlayStyles],
     style: {
       marginLeft: -overlayWidth
@@ -168,11 +241,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     onClick: function onClick(e) {
       return e.preventDefault();
     },
-    ref: overlayRef
+    tabIndex: -1
   }, showLabel && jsx("span", {
+    className: OVERLAY_LABEL_CLASSNAME,
     css: textStyles,
-    "data-testid": "".concat(testId, "-label"),
-    ref: labelRef
+    "data-testid": "".concat(testId, "-label")
   }, label), jsx("span", {
     css: iconStyles
   }, icon))));

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

@@ -0,0 +1,29 @@
+/**
+ * Find a child element inside a ref.
+ */
+export var 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.)
+ */
+export var 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.)
+ */
+export var getOverlayWidths = function getOverlayWidths(overlayEl, labelEl) {
+  var max = overlayEl.getBoundingClientRect().width;
+  var min = max - labelEl.getBoundingClientRect().width;
+  return {
+    max: max,
+    min: min
+  };
+};

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

@@ -1,5 +1,6 @@
-export type InlineCardOverlayProps = {
-    isToolbarOpen?: boolean;
+/// <reference types="react" />
+export type InlineCardOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isSelected?: boolean;
     isVisible?: boolean;
     testId?: string;
     url: string;