@atlaskit/editor-plugin-card 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-card
 
+## 1.14.0
+
+### Minor Changes
+
+-   [#100627](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100627)
+    [`619f85adfe8b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/619f85adfe8b) -
+    EDM-9852 Add initial inline link overlay for live pages support
+
+### Patch Changes
+
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
 ## 1.13.0
 
 ### Minor Changes

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

@@ -9,10 +9,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../../common/hooks/useLinkUpgradeDiscoverability"));
 var _localStorage = require("../../common/local-storage");
 var _utils = require("../../utils");
 var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
+var _NewInlineCardOverlay = _interopRequireDefault(require("../NewInlineCardOverlay"));
 var _Pulse = require("../Pulse");
 /** @jsx jsx */
 
@@ -77,17 +79,33 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = (0, _react.useMemo)(function () {
-    return shouldShowLinkOverlay ? (0, _react2.jsx)(_InlineCardOverlay.default, {
-      isSelected: isSelected,
-      isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-      onMouseEnter: function onMouseEnter() {
-        return handleOverlayChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return handleOverlayChange(false);
-      },
-      url: url
-    }, children) : children;
+    if (shouldShowLinkOverlay) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages')) {
+        return (0, _react2.jsx)(_NewInlineCardOverlay.default, {
+          isSelected: isSelected,
+          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+          onMouseEnter: function onMouseEnter() {
+            return handleOverlayChange(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return handleOverlayChange(false);
+          },
+          url: url
+        }, children);
+      }
+      return (0, _react2.jsx)(_InlineCardOverlay.default, {
+        isSelected: isSelected,
+        isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+        onMouseEnter: function onMouseEnter() {
+          return handleOverlayChange(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleOverlayChange(false);
+        },
+        url: url
+      }, children);
+    }
+    return children;
   }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return (0, _react.useMemo)(function () {
     var _cardContext$value;

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

@@ -0,0 +1,234 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _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 _messages = require("@atlaskit/editor-common/messages");
+var _utils = require("@atlaskit/editor-common/utils");
+var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
+var _colors = require("@atlaskit/theme/colors");
+var _utils2 = require("../InlineCardOverlay/utils");
+var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DEBOUNCE_IN_MS = 5;
+var ESTIMATED_MIN_WIDTH_IN_PX = 16;
+var PADDING_IN_PX = 4;
+var ICON_WIDTH_IN_PX = 14;
+var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
+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 SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(_colors.N0, ")");
+// TODO: This should be lighter to match the rest of the button
+var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(_colors.B100, ")");
+var containerStyles = (0, _react2.css)({
+  position: 'relative',
+  lineHeight: 'normal',
+  ':active': (0, _defineProperty2.default)({}, ".".concat(ICON_AND_LABEL_CLASSNAME), {
+    background: SMART_LINK_ACTIVE_COLOR
+  })
+});
+var overlayStyles = (0, _react2.css)({
+  // Set default styling to be invisible but available in dom for width calculation.
+  visibility: 'hidden',
+  marginTop: "var(--ds-space-050, 4px)",
+  position: 'absolute',
+  verticalAlign: 'text-top',
+  height: '1lh',
+  '@supports not (height: 1lh)': {
+    height: '1.2em'
+  },
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  pointerEvents: 'none'
+});
+var showOverlayStyles = (0, _react2.css)({
+  visibility: 'visible'
+});
+var iconStyles = (0, _react2.css)({
+  // Position icon in the middle
+  span: {
+    display: 'flex'
+  }
+});
+var labelStyles = (0, _react2.css)({
+  fontSize: '0.875em',
+  fontWeight: '600',
+  width: 'max-content'
+});
+var iconAndLabelStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-025, 2px)",
+  background: SMART_LINK_BACKGROUND_COLOR,
+  color: "var(--ds-text-subtlest, ".concat(_colors.N700, ")")
+});
+var overflowingContainerStyles = (0, _react2.css)({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  alignItems: 'center',
+  width: 'max-content',
+  height: '100%'
+});
+var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
+  var children = _ref.children,
+    _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,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showOverlay = _useState2[0],
+    setShowOverlay = _useState2[1];
+  var _useState3 = (0, _react.useState)(undefined),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    availableWidth = _useState4[0],
+    setAvailableWidth = _useState4[1];
+  var maxOverlayWidth = (0, _react.useRef)(0);
+  var minOverlayWidth = (0, _react.useRef)(ESTIMATED_MIN_WIDTH_IN_PX);
+  var parentWidth = (0, _react.useRef)(0);
+  var iconSize = (0, _react.useRef)('small');
+  var containerRef = (0, _react.useRef)(null);
+
+  // TODO EDM-9843: Use availableWidth for small link edge case
+  availableWidth;
+  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 oneLine = (0, _utils2.isOneLine)(containerRef.current, marker);
+
+      // 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 - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
+      setAvailableWidth(_availableWidth);
+      var canShowOverlay = !isSelected;
+      setShowOverlay(canShowOverlay);
+    } catch (_unused) {
+      // If something goes wrong, hide the overlay all together.
+      setShowOverlay(false);
+    }
+  }, [isSelected]);
+  (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;
+    }
+
+    // This should run only once
+    if (!maxOverlayWidth.current) {
+      var iconAndLabel = (0, _utils2.getChildElement)(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
+      var _label = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
+      if (iconAndLabel && _label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        var _getOverlayWidths = (0, _utils2.getOverlayWidths)(iconAndLabel, _label),
+          max = _getOverlayWidths.max,
+          min = _getOverlayWidths.min;
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+        iconSize.current = (0, _utils2.getIconSize)(_label);
+      }
+    }
+    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;
+    }
+    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.cardMessages.inlineOverlay);
+  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
+    css: containerStyles,
+    ref: containerRef
+  }), isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+    "aria-hidden": "true",
+    className: OVERLAY_MARKER_CLASSNAME
+  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
+    css: [overlayStyles, showOverlay && showOverlayStyles],
+    "data-testid": testId,
+    href: url,
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    tabIndex: -1
+  }, (0, _react2.jsx)("span", {
+    css: overflowingContainerStyles
+  }, (0, _react2.jsx)("span", {
+    css: iconAndLabelStyles,
+    className: ICON_AND_LABEL_CLASSNAME
+  }, (0, _react2.jsx)("span", {
+    css: iconStyles
+  }, (0, _react2.jsx)(_preferences.default, {
+    label: label,
+    size: iconSize.current,
+    testId: "".concat(testId, "-icon")
+  })), (0, _react2.jsx)("span", {
+    css: labelStyles,
+    className: OVERLAY_LABEL_CLASSNAME,
+    "data-testid": "".concat(testId, "-label")
+  }))))), children);
+};
+var _default = exports.default = NarrowInlineCardOverlay;

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

@@ -2,10 +2,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDiscoverability';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
 import InlineCardOverlay from '../InlineCardOverlay';
+import NewInlineCardOverlay from '../NewInlineCardOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // 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
@@ -66,13 +68,27 @@ export const AwarenessWrapper = ({
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
-  const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
-    isSelected: isSelected,
-    isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-    onMouseEnter: () => handleOverlayChange(true),
-    onMouseLeave: () => handleOverlayChange(false),
-    url: url
-  }, children) : children, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
+  const cardWithOverlay = useMemo(() => {
+    if (shouldShowLinkOverlay) {
+      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+        return jsx(NewInlineCardOverlay, {
+          isSelected: isSelected,
+          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+          onMouseEnter: () => handleOverlayChange(true),
+          onMouseLeave: () => handleOverlayChange(false),
+          url: url
+        }, children);
+      }
+      return jsx(InlineCardOverlay, {
+        isSelected: isSelected,
+        isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+        onMouseEnter: () => handleOverlayChange(true),
+        onMouseLeave: () => handleOverlayChange(false),
+        url: url
+      }, children);
+    }
+    return children;
+  }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
     return jsx("span", {

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

@@ -0,0 +1,213 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
+import { useIntl } from 'react-intl-next';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
+import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import { B100, N0, N700 } from '@atlaskit/theme/colors';
+import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from '../InlineCardOverlay/utils';
+const DEBOUNCE_IN_MS = 5;
+const ESTIMATED_MIN_WIDTH_IN_PX = 16;
+const PADDING_IN_PX = 4;
+const ICON_WIDTH_IN_PX = 14;
+const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
+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 SMART_LINK_BACKGROUND_COLOR = `var(--ds-surface-raised, ${N0})`;
+// TODO: This should be lighter to match the rest of the button
+const SMART_LINK_ACTIVE_COLOR = `var(--ds-background-selected, ${B100})`;
+const containerStyles = css({
+  position: 'relative',
+  lineHeight: 'normal',
+  ':active': {
+    [`.${ICON_AND_LABEL_CLASSNAME}`]: {
+      background: SMART_LINK_ACTIVE_COLOR
+    }
+  }
+});
+const overlayStyles = css({
+  // Set default styling to be invisible but available in dom for width calculation.
+  visibility: 'hidden',
+  marginTop: "var(--ds-space-050, 4px)",
+  position: 'absolute',
+  verticalAlign: 'text-top',
+  height: '1lh',
+  '@supports not (height: 1lh)': {
+    height: '1.2em'
+  },
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  pointerEvents: 'none'
+});
+const showOverlayStyles = css({
+  visibility: 'visible'
+});
+const iconStyles = css({
+  // Position icon in the middle
+  span: {
+    display: 'flex'
+  }
+});
+const labelStyles = css({
+  fontSize: '0.875em',
+  fontWeight: '600',
+  width: 'max-content'
+});
+const iconAndLabelStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-025, 2px)",
+  background: SMART_LINK_BACKGROUND_COLOR,
+  color: `var(--ds-text-subtlest, ${N700})`
+});
+const overflowingContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  alignItems: 'center',
+  width: 'max-content',
+  height: '100%'
+});
+const NarrowInlineCardOverlay = ({
+  children,
+  isSelected = false,
+  isVisible = false,
+  testId = 'inline-card-overlay',
+  url,
+  ...props
+}) => {
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [availableWidth, setAvailableWidth] = useState(undefined);
+  const maxOverlayWidth = useRef(0);
+  const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
+  const parentWidth = useRef(0);
+  const iconSize = useRef('small');
+  const containerRef = useRef(null);
+
+  // TODO EDM-9843: Use availableWidth for small link edge case
+  availableWidth;
+  const setVisibility = useCallback(() => {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    const marker = getChildElement(containerRef, `.${OVERLAY_MARKER_CLASSNAME}`);
+    if (!marker) {
+      return;
+    }
+    try {
+      const oneLine = isOneLine(containerRef.current, marker);
+
+      // 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 - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
+      setAvailableWidth(availableWidth);
+      const canShowOverlay = !isSelected;
+      setShowOverlay(canShowOverlay);
+    } catch {
+      // If something goes wrong, hide the overlay all together.
+      setShowOverlay(false);
+    }
+  }, [isSelected]);
+  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;
+    }
+
+    // This should run only once
+    if (!maxOverlayWidth.current) {
+      const iconAndLabel = getChildElement(containerRef, `.${ICON_AND_LABEL_CLASSNAME}`);
+      const label = getChildElement(containerRef, `.${OVERLAY_LABEL_CLASSNAME}`);
+      if (iconAndLabel && label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        const {
+          max,
+          min
+        } = getOverlayWidths(iconAndLabel, label);
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+        iconSize.current = getIconSize(label);
+      }
+    }
+    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;
+    }
+    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);
+  return jsx("span", _extends({}, props, {
+    css: containerStyles,
+    ref: containerRef
+  }), isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    className: OVERLAY_MARKER_CLASSNAME
+  }, ZERO_WIDTH_JOINER), jsx("a", {
+    css: [overlayStyles, showOverlay && showOverlayStyles],
+    "data-testid": testId,
+    href: url,
+    onClick: e => e.preventDefault(),
+    tabIndex: -1
+  }, jsx("span", {
+    css: overflowingContainerStyles
+  }, jsx("span", {
+    css: iconAndLabelStyles,
+    className: ICON_AND_LABEL_CLASSNAME
+  }, jsx("span", {
+    css: iconStyles
+  }, jsx(PreferencesIcon, {
+    label: label,
+    size: iconSize.current,
+    testId: `${testId}-icon`
+  })), jsx("span", {
+    css: labelStyles,
+    className: OVERLAY_LABEL_CLASSNAME,
+    "data-testid": `${testId}-label`
+  }))))), children);
+};
+export default NarrowInlineCardOverlay;

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

@@ -3,10 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDiscoverability';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
 import InlineCardOverlay from '../InlineCardOverlay';
+import NewInlineCardOverlay from '../NewInlineCardOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // 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
@@ -69,17 +71,33 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = useMemo(function () {
-    return shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
-      isSelected: isSelected,
-      isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-      onMouseEnter: function onMouseEnter() {
-        return handleOverlayChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return handleOverlayChange(false);
-      },
-      url: url
-    }, children) : children;
+    if (shouldShowLinkOverlay) {
+      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+        return jsx(NewInlineCardOverlay, {
+          isSelected: isSelected,
+          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+          onMouseEnter: function onMouseEnter() {
+            return handleOverlayChange(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return handleOverlayChange(false);
+          },
+          url: url
+        }, children);
+      }
+      return jsx(InlineCardOverlay, {
+        isSelected: isSelected,
+        isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+        onMouseEnter: function onMouseEnter() {
+          return handleOverlayChange(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleOverlayChange(false);
+        },
+        url: url
+      }, children);
+    }
+    return children;
   }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return useMemo(function () {
     var _cardContext$value;

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

@@ -0,0 +1,224 @@
+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"];
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
+import { useIntl } from 'react-intl-next';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
+import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import { B100, N0, N700 } from '@atlaskit/theme/colors';
+import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from '../InlineCardOverlay/utils';
+var DEBOUNCE_IN_MS = 5;
+var ESTIMATED_MIN_WIDTH_IN_PX = 16;
+var PADDING_IN_PX = 4;
+var ICON_WIDTH_IN_PX = 14;
+var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
+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 SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(N0, ")");
+// TODO: This should be lighter to match the rest of the button
+var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(B100, ")");
+var containerStyles = css({
+  position: 'relative',
+  lineHeight: 'normal',
+  ':active': _defineProperty({}, ".".concat(ICON_AND_LABEL_CLASSNAME), {
+    background: SMART_LINK_ACTIVE_COLOR
+  })
+});
+var overlayStyles = css({
+  // Set default styling to be invisible but available in dom for width calculation.
+  visibility: 'hidden',
+  marginTop: "var(--ds-space-050, 4px)",
+  position: 'absolute',
+  verticalAlign: 'text-top',
+  height: '1lh',
+  '@supports not (height: 1lh)': {
+    height: '1.2em'
+  },
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  pointerEvents: 'none'
+});
+var showOverlayStyles = css({
+  visibility: 'visible'
+});
+var iconStyles = css({
+  // Position icon in the middle
+  span: {
+    display: 'flex'
+  }
+});
+var labelStyles = css({
+  fontSize: '0.875em',
+  fontWeight: '600',
+  width: 'max-content'
+});
+var iconAndLabelStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-025, 2px)",
+  background: SMART_LINK_BACKGROUND_COLOR,
+  color: "var(--ds-text-subtlest, ".concat(N700, ")")
+});
+var overflowingContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  alignItems: 'center',
+  width: 'max-content',
+  height: '100%'
+});
+var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
+  var children = _ref.children,
+    _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,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showOverlay = _useState2[0],
+    setShowOverlay = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    availableWidth = _useState4[0],
+    setAvailableWidth = _useState4[1];
+  var maxOverlayWidth = useRef(0);
+  var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
+  var parentWidth = useRef(0);
+  var iconSize = useRef('small');
+  var containerRef = useRef(null);
+
+  // TODO EDM-9843: Use availableWidth for small link edge case
+  availableWidth;
+  var setVisibility = useCallback(function () {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    var marker = getChildElement(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
+    if (!marker) {
+      return;
+    }
+    try {
+      var oneLine = isOneLine(containerRef.current, marker);
+
+      // 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 - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
+      setAvailableWidth(_availableWidth);
+      var canShowOverlay = !isSelected;
+      setShowOverlay(canShowOverlay);
+    } catch (_unused) {
+      // If something goes wrong, hide the overlay all together.
+      setShowOverlay(false);
+    }
+  }, [isSelected]);
+  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;
+    }
+
+    // This should run only once
+    if (!maxOverlayWidth.current) {
+      var iconAndLabel = getChildElement(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
+      var _label = getChildElement(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
+      if (iconAndLabel && _label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        var _getOverlayWidths = getOverlayWidths(iconAndLabel, _label),
+          max = _getOverlayWidths.max,
+          min = _getOverlayWidths.min;
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+        iconSize.current = getIconSize(_label);
+      }
+    }
+    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;
+    }
+    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);
+  return jsx("span", _extends({}, props, {
+    css: containerStyles,
+    ref: containerRef
+  }), isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    className: OVERLAY_MARKER_CLASSNAME
+  }, ZERO_WIDTH_JOINER), jsx("a", {
+    css: [overlayStyles, showOverlay && showOverlayStyles],
+    "data-testid": testId,
+    href: url,
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    tabIndex: -1
+  }, jsx("span", {
+    css: overflowingContainerStyles
+  }, jsx("span", {
+    css: iconAndLabelStyles,
+    className: ICON_AND_LABEL_CLASSNAME
+  }, jsx("span", {
+    css: iconStyles
+  }, jsx(PreferencesIcon, {
+    label: label,
+    size: iconSize.current,
+    testId: "".concat(testId, "-icon")
+  })), jsx("span", {
+    css: labelStyles,
+    className: OVERLAY_LABEL_CLASSNAME,
+    "data-testid": "".concat(testId, "-label")
+  }))))), children);
+};
+export default NarrowInlineCardOverlay;

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

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { InlineCardOverlayProps } from '../InlineCardOverlay/types';
+declare const NarrowInlineCardOverlay: ({ children, isSelected, isVisible, testId, url, ...props }: React.PropsWithChildren<InlineCardOverlayProps>) => jsx.JSX.Element;
+export default NarrowInlineCardOverlay;

package/dist/types-ts4.5/ui/NewInlineCardOverlay/index.d.ts

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { InlineCardOverlayProps } from '../InlineCardOverlay/types';
+declare const NarrowInlineCardOverlay: ({ children, isSelected, isVisible, testId, url, ...props }: React.PropsWithChildren<InlineCardOverlayProps>) => jsx.JSX.Element;
+export default NarrowInlineCardOverlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,10 +32,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.3.0",
+    "@atlaskit/adf-schema": "^36.8.0",
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^80.3.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-decorations": "^1.1.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
@@ -50,12 +50,12 @@
     "@atlaskit/icon": "^22.2.0",
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
-    "@atlaskit/link-datasource": "^2.2.0",
+    "@atlaskit/link-datasource": "^2.3.0",
     "@atlaskit/linking-common": "^5.6.0",
     "@atlaskit/linking-types": "^8.8.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^6.2.0",
-    "@atlaskit/smart-card": "^26.68.0",
+    "@atlaskit/smart-card": "^26.69.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
@@ -105,6 +105,9 @@
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
   "platform-feature-flags": {
+    "platform.linking-platform.smart-links-in-live-pages": {
+      "type": "boolean"
+    },
     "platform.linking-platform.datasource-word_wrap": {
       "type": "boolean"
     },