@atlaskit/editor-plugin-card 1.12.1 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @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
+
+-   [#98528](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98528)
+    [`12181f0bfaed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/12181f0bfaed) -
+    EDM-9252 Removal of platform.linking-platform.smart-card.inline-switcher
+
 ## 1.12.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCard.js

@@ -4,126 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InlineCardComponent = void 0;
 exports.InlineCardNodeView = InlineCardNodeView;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _smartCard = require("@atlaskit/smart-card");
-var _actions = require("../pm-plugins/actions");
 var _utils = require("../utils");
 var _genericCard = require("./genericCard");
 var _inlineCardWithAwareness = require("./inlineCardWithAwareness");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var InlineCardComponent = exports.InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(InlineCardComponent, _React$PureComponent);
-  var _super = _createSuper(InlineCardComponent);
-  function InlineCardComponent() {
-    var _this;
-    (0, _classCallCheck2.default)(this, InlineCardComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResolve", function (data) {
-      var _this$props = _this.props,
-        getPos = _this$props.getPos,
-        view = _this$props.view;
-      if (!getPos || typeof getPos === 'boolean') {
-        return;
-      }
-      var title = data.title,
-        url = data.url;
-      // don't dispatch immediately since we might be in the middle of
-      // rendering a nodeview
-      (0, _rafSchd.default)(function () {
-        // prosemirror-bump-fix
-        var pos = getPos();
-        if (typeof pos !== 'number') {
-          return;
-        }
-        var tr = view.state.tr;
-        (0, _actions.registerCard)({
-          title: title,
-          url: url,
-          pos: pos
-        })(tr);
-        view.dispatch(tr);
-      })();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (data) {
-      var url = data.url,
-        err = data.err;
-      if (err) {
-        throw err;
-      }
-      _this.onResolve({
-        url: url
-      });
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(InlineCardComponent, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      var view = this.props.view;
-      var scrollContainer = (0, _ui.findOverflowScrollParent)(view.dom);
-      this.scrollContainer = scrollContainer || undefined;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        node = _this$props2.node,
-        cardContext = _this$props2.cardContext,
-        actionOptions = _this$props2.actionOptions,
-        showServerActions = _this$props2.showServerActions,
-        useAlternativePreloader = _this$props2.useAlternativePreloader,
-        onClick = _this$props2.onClick;
-      var _node$attrs = node.attrs,
-        url = _node$attrs.url,
-        data = _node$attrs.data;
-      var card = /*#__PURE__*/_react.default.createElement("span", {
-        className: "card"
-      }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
-        key: url,
-        url: url,
-        data: data,
-        appearance: "inline",
-        onClick: onClick,
-        container: this.scrollContainer,
-        onResolve: this.onResolve,
-        onError: this.onError,
-        inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
-        actionOptions: actionOptions,
-        showServerActions: showServerActions
-      }));
-      // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
-      // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-      return cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
-        value: cardContext.value
-      }, card) : data ? card : null;
-    }
-  }]);
-  return InlineCardComponent;
-}(_react.default.PureComponent);
-(0, _defineProperty2.default)(InlineCardComponent, "contextTypes", {
-  contextAdapter: _propTypes.default.object
-});
-var WrappedInlineCard = (0, _genericCard.Card)(InlineCardComponent, _ui.UnsupportedInline);
 var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
 function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
@@ -137,18 +25,6 @@ function InlineCardNodeView(props) {
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
     onClickCallback = props.onClickCallback;
-  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher')) {
-    return /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
-      node: node,
-      view: view,
-      getPos: getPos,
-      actionOptions: actionOptions,
-      showServerActions: showServerActions,
-      useAlternativePreloader: useAlternativePreloader,
-      pluginInjectionApi: pluginInjectionApi,
-      onClickCallback: onClickCallback
-    });
-  }
   return /*#__PURE__*/_react.default.createElement(WrappedInlineCardWithAwareness, (0, _extends2.default)({
     node: node,
     view: view,

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

@@ -62,7 +62,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
       allowBlockCards = options.allowBlockCards,
       onClickCallback = options.onClickCallback;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
-    var shouldUseUpgradeFeatures = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher') && enableInlineUpgradeFeatures;
     var inlineCardViewProducer = (0, _reactNodeView.getInlineNodeViewProducer)({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: _inlineCard.InlineCardNodeView,
@@ -119,7 +118,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
           if (!meta) {
             return pluginStateWithUpdatedPos;
           }
-          if (!shouldUseUpgradeFeatures) {
+          if (!enableInlineUpgradeFeatures) {
             return (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
           }
           var newState = (0, _reducers.default)(pluginStateWithUpdatedPos, meta);
@@ -283,7 +282,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             return new _embedCard.EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
           }
         }
-      }, shouldUseUpgradeFeatures && {
+      }, enableInlineUpgradeFeatures && {
         handleKeyDown: function handleKeyDown(view) {
           handleAwarenessOverlay(view);
           return false;

package/dist/cjs/toolbar.js

@@ -494,5 +494,5 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
   return toolbarItems;
 };
 var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
-  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher');
+  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
 };

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/nodeviews/inlineCard.js

@@ -1,109 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import PropTypes from 'prop-types';
-import rafSchedule from 'raf-schd';
-import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { Card as SmartCard } from '@atlaskit/smart-card';
-import { registerCard } from '../pm-plugins/actions';
 import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
 import { Card } from './genericCard';
 import { InlineCardWithAwareness } from './inlineCardWithAwareness';
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-export class InlineCardComponent extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "onResolve", data => {
-      const {
-        getPos,
-        view
-      } = this.props;
-      if (!getPos || typeof getPos === 'boolean') {
-        return;
-      }
-      const {
-        title,
-        url
-      } = data;
-      // don't dispatch immediately since we might be in the middle of
-      // rendering a nodeview
-      rafSchedule(() => {
-        // prosemirror-bump-fix
-        const pos = getPos();
-        if (typeof pos !== 'number') {
-          return;
-        }
-        const tr = view.state.tr;
-        registerCard({
-          title,
-          url,
-          pos
-        })(tr);
-        view.dispatch(tr);
-      })();
-    });
-    _defineProperty(this, "onError", data => {
-      const {
-        url,
-        err
-      } = data;
-      if (err) {
-        throw err;
-      }
-      this.onResolve({
-        url
-      });
-    });
-  }
-  UNSAFE_componentWillMount() {
-    const {
-      view
-    } = this.props;
-    const scrollContainer = findOverflowScrollParent(view.dom);
-    this.scrollContainer = scrollContainer || undefined;
-  }
-  render() {
-    const {
-      node,
-      cardContext,
-      actionOptions,
-      showServerActions,
-      useAlternativePreloader,
-      onClick
-    } = this.props;
-    const {
-      url,
-      data
-    } = node.attrs;
-    const card = /*#__PURE__*/React.createElement("span", {
-      className: "card"
-    }, /*#__PURE__*/React.createElement(SmartCard, {
-      key: url,
-      url: url,
-      data: data,
-      appearance: "inline",
-      onClick: onClick,
-      container: this.scrollContainer,
-      onResolve: this.onResolve,
-      onError: this.onError,
-      inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
-      actionOptions: actionOptions,
-      showServerActions: showServerActions
-    }));
-    // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
-    // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-    return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
-      value: cardContext.value
-    }, card) : data ? card : null;
-  }
-}
-_defineProperty(InlineCardComponent, "contextTypes", {
-  contextAdapter: PropTypes.object
-});
-const WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
 const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 export function InlineCardNodeView(props) {
   const {
@@ -119,18 +20,6 @@ export function InlineCardNodeView(props) {
     pluginInjectionApi,
     onClickCallback
   } = props;
-  if (!getBooleanFF('platform.linking-platform.smart-card.inline-switcher')) {
-    return /*#__PURE__*/React.createElement(WrappedInlineCard, {
-      node: node,
-      view: view,
-      getPos: getPos,
-      actionOptions: actionOptions,
-      showServerActions: showServerActions,
-      useAlternativePreloader: useAlternativePreloader,
-      pluginInjectionApi: pluginInjectionApi,
-      onClickCallback: onClickCallback
-    });
-  }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,

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

@@ -47,7 +47,6 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
     onClickCallback
   } = options;
   const enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
-  const shouldUseUpgradeFeatures = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') && enableInlineUpgradeFeatures;
   const inlineCardViewProducer = getInlineNodeViewProducer({
     pmPluginFactoryParams,
     Component: InlineCardNodeView,
@@ -105,7 +104,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
         if (!meta) {
           return pluginStateWithUpdatedPos;
         }
-        if (!shouldUseUpgradeFeatures) {
+        if (!enableInlineUpgradeFeatures) {
           return reducer(pluginStateWithUpdatedPos, meta);
         }
         const newState = reducer(pluginStateWithUpdatedPos, meta);
@@ -277,7 +276,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
         }
       },
-      ...(shouldUseUpgradeFeatures && {
+      ...(enableInlineUpgradeFeatures && {
         handleKeyDown: view => {
           handleAwarenessOverlay(view);
           return false;

package/dist/es2019/toolbar.js

@@ -487,5 +487,5 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
   return toolbarItems;
 };
 export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDiscoverabilityEnabled) => {
-  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled && getBooleanFF('platform.linking-platform.smart-card.inline-switcher');
+  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
 };