@atlaskit/editor-plugin-card 5.4.11 → 5.4.13

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 5.4.13
+
+### Patch Changes
+
+- [#141796](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/141796)
+  [`79a03eeb47e72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79a03eeb47e72) -
+  [ux] Fix truncate issue for open button text when hover on smart link
+- Updated dependencies
+
+## 5.4.12
+
+### Patch Changes
+
+- [#139216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139216)
+  [`e8f596d2b1910`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f596d2b1910) -
+  [ux] Cleaned up platform_editor_controls_patch_1 FG
+- Updated dependencies
+
 ## 5.4.11
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -19,6 +19,7 @@ var _inlineCard = require("./inlineCard");
 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 && {}.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 InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var _pluginInjectionApi$c;
   var node = _ref.node,
     cardContext = _ref.cardContext,
     actionOptions = _ref.actionOptions,
@@ -44,6 +45,7 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     isResolvedViewRendered = _useState6[0],
     setIsResolvedViewRendered = _useState6[1];
+  var editorAppearance = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.card.sharedState.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.editorAppearance;
   var onResolve = (0, _react.useCallback)(function (tr, title) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_fix_card_plugin_state')) {
       var metadata = tr.getMeta(_pluginKey.pluginKey);
@@ -80,7 +82,8 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
   var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_OpenButtonOverlay.default, {
       isVisible: isResolvedViewRendered,
-      url: node.attrs.url
+      url: node.attrs.url,
+      editorAppearance: editorAppearance
     }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
       node: node,
       view: view,
@@ -93,7 +96,7 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       isHovered: isHovered,
       isPageSSRed: isPageSSRed
     }));
-  }, [isResolvedViewRendered, node, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
+  }, [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
   var innerCardOriginal = (0, _react.useMemo)(function () {
     return /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
       node: node,
@@ -108,7 +111,10 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
       isPageSSRed: isPageSSRed
     });
   }, [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
-  var innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
+  var shouldShowOpenButtonOverlay = (0, _react.useMemo)(function () {
+    return ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' || editorAppearance === 'comment' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
+  }, [editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, editorAppearance]);
+  var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/_react.default.createElement(_AwarenessWrapper.AwarenessWrapper, {
     isOverlayEnabled: isOverlayEnabled,
     isPulseEnabled: isPulseEnabled,

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

@@ -9,13 +9,11 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../../pm-plugins/utils");
 var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
 var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
 var _localStorage = require("../local-storage");
-var _OpenButtonOverlay = _interopRequireDefault(require("../OpenButtonOverlay"));
 var _Pulse = require("../Pulse");
 /**
  * @jsxRuntime classic
@@ -87,7 +85,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = (0, _react.useMemo)(function () {
-    if (shouldShowLinkOverlay && !((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1'))) {
+    if (shouldShowLinkOverlay && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       return (0, _react2.jsx)(_InlineCardOverlay.default, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -102,18 +100,6 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
-  var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_OpenButtonOverlay.default, {
-      isVisible: isResolvedViewRendered && isHovered,
-      onMouseEnter: function onMouseEnter() {
-        return handleOverlayChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return handleOverlayChange(false);
-      },
-      url: url
-    }, children);
-  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   var isInline = appearance === 'inline';
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
@@ -133,7 +119,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse",
         isInline: isInline
-      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
+      }, cardWithOverlay)))
     );
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, cardWithOpenButtonOverlay, isInline]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline]);
 };

package/dist/cjs/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getHyperlinkAppearanceDropdown = exports.getCustomHyperlinkAppearanceDropdown = void 0;
+exports.getCustomHyperlinkAppearanceDropdown = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -18,20 +18,26 @@ var _primitives = require("@atlaskit/primitives");
 var _LinkToolbarAppearanceDropdown = require("./LinkToolbarAppearanceDropdown");
 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 && {}.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 HyperlinkDropdown = function HyperlinkDropdown(props) {
+var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
   var _props$cardOptions3;
   var _useState = (0, _react.useState)(new Map()),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     supportedUrlsMap = _useState2[0],
     setSupportedUrlsMap = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isOpen = _useState4[0],
+    setIsOpen = _useState4[1];
   var cardProvider = (0, _react.useRef)(undefined);
+  var containerRef = (0, _react.useRef)(undefined);
   var url = props.url,
     intl = props.intl,
-    editorState = props.editorState,
+    editorView = props.editorView,
     cardOptions = props.cardOptions,
     editorAnalyticsApi = props.editorAnalyticsApi,
     allowDatasource = props.allowDatasource,
-    isDatasourceView = props.isDatasourceView;
+    isDatasourceView = props.isDatasourceView,
+    settingsConfig = props.settingsConfig;
   // Ignored via go/ees005
   // eslint-disable-next-line require-await
   var getProvider = /*#__PURE__*/function () {
@@ -138,187 +144,6 @@ var HyperlinkDropdown = function HyperlinkDropdown(props) {
   if (!supportedUrlsMap.get(url)) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearanceDropdown.LinkAppearanceMenu, {
-    url: url,
-    intl: intl,
-    editorState: editorState,
-    allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
-    allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
-    allowDatasource: allowDatasource,
-    editorAnalyticsApi: editorAnalyticsApi,
-    dispatchCommand: props.dispatchCommand,
-    settingsConfig: props.settingsConfig,
-    isDatasourceView: isDatasourceView
-  });
-};
-var getHyperlinkAppearanceDropdown = exports.getHyperlinkAppearanceDropdown = function getHyperlinkAppearanceDropdown(_ref3) {
-  var url = _ref3.url,
-    intl = _ref3.intl,
-    editorState = _ref3.editorState,
-    editorAnalyticsApi = _ref3.editorAnalyticsApi,
-    editorPluginApi = _ref3.editorPluginApi,
-    settingsConfig = _ref3.settingsConfig,
-    cardOptions = _ref3.cardOptions,
-    allowDatasource = _ref3.allowDatasource,
-    isDatasourceView = _ref3.isDatasourceView;
-  var alignmentItemOptions = {
-    render: function render(props) {
-      if (!editorState) {
-        return null;
-      }
-      return /*#__PURE__*/_react.default.createElement(HyperlinkDropdown, {
-        intl: intl,
-        editorState: editorState,
-        url: url,
-        editorAnalyticsApi: editorAnalyticsApi,
-        editorPluginApi: editorPluginApi,
-        dispatchCommand: props.dispatchCommand,
-        settingsConfig: settingsConfig,
-        cardOptions: cardOptions,
-        allowDatasource: allowDatasource,
-        isDatasourceView: isDatasourceView
-      });
-    },
-    width: 200,
-    height: 400
-  };
-  var currentAppearanceDisplayInformation = _card.appearancePropsMap['url'];
-  var alignmentToolbarItem = {
-    id: 'hyperlink-appearance',
-    testId: 'hyperlink-appearance-dropdown',
-    type: 'dropdown',
-    options: alignmentItemOptions,
-    title: intl.formatMessage(currentAppearanceDisplayInformation.title),
-    iconBefore: currentAppearanceDisplayInformation.icon
-  };
-  return alignmentToolbarItem;
-};
-var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
-  var _props$cardOptions6;
-  var _useState3 = (0, _react.useState)(new Map()),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    supportedUrlsMap = _useState4[0],
-    setSupportedUrlsMap = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isOpen = _useState6[0],
-    setIsOpen = _useState6[1];
-  var cardProvider = (0, _react.useRef)(undefined);
-  var containerRef = (0, _react.useRef)(undefined);
-  var url = props.url,
-    intl = props.intl,
-    editorView = props.editorView,
-    cardOptions = props.cardOptions,
-    editorAnalyticsApi = props.editorAnalyticsApi,
-    allowDatasource = props.allowDatasource,
-    isDatasourceView = props.isDatasourceView,
-    settingsConfig = props.settingsConfig;
-  // Ignored via go/ees005
-  // eslint-disable-next-line require-await
-  var getProvider = /*#__PURE__*/function () {
-    var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-      var _props$cardOptions4;
-      var _props$cardOptions5;
-      return _regenerator.default.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            if (!((_props$cardOptions4 = props.cardOptions) !== null && _props$cardOptions4 !== void 0 && _props$cardOptions4.provider)) {
-              _context3.next = 2;
-              break;
-            }
-            return _context3.abrupt("return", (_props$cardOptions5 = props.cardOptions) === null || _props$cardOptions5 === void 0 ? void 0 : _props$cardOptions5.provider);
-          case 2:
-            if (!cardProvider.current) {
-              _context3.next = 4;
-              break;
-            }
-            return _context3.abrupt("return", cardProvider.current);
-          case 4:
-            return _context3.abrupt("return", new Promise(function (resolve) {
-              var _props$editorPluginAp2;
-              var cardProvider = (_props$editorPluginAp2 = props.editorPluginApi) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.card) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.currentState()) === null || _props$editorPluginAp2 === void 0 ? void 0 : _props$editorPluginAp2.provider;
-              if (cardProvider) {
-                resolve(cardProvider);
-              }
-            }));
-          case 5:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function getProvider() {
-      return _ref4.apply(this, arguments);
-    };
-  }();
-  var resolveUrl = /*#__PURE__*/function () {
-    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(url) {
-      var isUrlSupported, _yield$provider$findP2, provider, newMap;
-      return _regenerator.default.wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            if (!supportedUrlsMap.has(url)) {
-              _context4.next = 2;
-              break;
-            }
-            return _context4.abrupt("return");
-          case 2:
-            isUrlSupported = false;
-            _context4.prev = 3;
-            _context4.next = 6;
-            return getProvider();
-          case 6:
-            provider = _context4.sent;
-            _context4.next = 9;
-            return provider === null || provider === void 0 ? void 0 : provider.findPattern(url);
-          case 9:
-            _context4.t1 = _yield$provider$findP2 = _context4.sent;
-            _context4.t0 = _context4.t1 !== null;
-            if (!_context4.t0) {
-              _context4.next = 13;
-              break;
-            }
-            _context4.t0 = _yield$provider$findP2 !== void 0;
-          case 13:
-            if (!_context4.t0) {
-              _context4.next = 17;
-              break;
-            }
-            _context4.t2 = _yield$provider$findP2;
-            _context4.next = 18;
-            break;
-          case 17:
-            _context4.t2 = false;
-          case 18:
-            isUrlSupported = _context4.t2;
-            _context4.next = 24;
-            break;
-          case 21:
-            _context4.prev = 21;
-            _context4.t3 = _context4["catch"](3);
-            isUrlSupported = false;
-          case 24:
-            newMap = new Map(supportedUrlsMap);
-            newMap.set(url, isUrlSupported);
-            setSupportedUrlsMap(newMap);
-          case 27:
-          case "end":
-            return _context4.stop();
-        }
-      }, _callee4, null, [[3, 21]]);
-    }));
-    return function resolveUrl(_x2) {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  (0, _react.useEffect)(function () {
-    resolveUrl(url);
-    // before migrating from a class to a functional component, we were only reacting to changes in the url
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [url, (_props$cardOptions6 = props.cardOptions) === null || _props$cardOptions6 === void 0 ? void 0 : _props$cardOptions6.provider, props.editorPluginApi]);
-  if (!supportedUrlsMap.get(url)) {
-    return null;
-  }
   if (!editorView) {
     return null;
   }
@@ -383,15 +208,15 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     settingsConfig: settingsConfig
   })), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarSeparator, null));
 };
-var getCustomHyperlinkAppearanceDropdown = exports.getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(_ref6) {
-  var url = _ref6.url,
-    intl = _ref6.intl,
-    editorAnalyticsApi = _ref6.editorAnalyticsApi,
-    editorPluginApi = _ref6.editorPluginApi,
-    settingsConfig = _ref6.settingsConfig,
-    cardOptions = _ref6.cardOptions,
-    allowDatasource = _ref6.allowDatasource,
-    isDatasourceView = _ref6.isDatasourceView;
+var getCustomHyperlinkAppearanceDropdown = exports.getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(_ref3) {
+  var url = _ref3.url,
+    intl = _ref3.intl,
+    editorAnalyticsApi = _ref3.editorAnalyticsApi,
+    editorPluginApi = _ref3.editorPluginApi,
+    settingsConfig = _ref3.settingsConfig,
+    cardOptions = _ref3.cardOptions,
+    allowDatasource = _ref3.allowDatasource,
+    isDatasourceView = _ref3.isDatasourceView;
   return {
     type: 'custom',
     fallback: [],

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

@@ -6,7 +6,6 @@ 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 _react = _interopRequireWildcard(require("react"));
@@ -14,7 +13,7 @@ var _react2 = require("@emotion/react");
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
-var _excluded = ["children", "isVisible", "url"];
+var _excluded = ["children", "isVisible", "url", "editorAppearance"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
 /**
@@ -63,6 +62,9 @@ var linkStyles = (0, _primitives.xcss)({
     textDecoration: 'none'
   }
 });
+var linkStylesFix = (0, _primitives.xcss)({
+  whiteSpace: 'nowrap'
+});
 var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 var ICON_WIDTH = 16;
 var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
@@ -72,6 +74,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
     url = _ref.url,
+    editorAppearance = _ref.editorAppearance,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // TODO: ED-26961 - add translation
   var label = 'Open';
@@ -127,56 +130,33 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var handleOverlayChange = function handleOverlayChange(isHovered) {
     setHovered(isHovered);
   };
-  if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1')) {
-    return (
-      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      (0, _react2.jsx)("span", {
-        ref: containerRef,
-        css: containerStyles,
-        onDoubleClick: handleDoubleClick,
-        onMouseEnter: function onMouseEnter() {
-          return handleOverlayChange(true);
-        },
-        onMouseLeave: function onMouseLeave() {
-          return handleOverlayChange(false);
-        }
-      }, children, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && (0, _react2.jsx)("span", {
-        css: hiddenTextStyle,
-        "aria-hidden": "true"
-      }, (0, _react2.jsx)(_primitives.Text, {
-        ref: hiddenTextRef,
-        size: "small",
-        maxLines: 1
-      }, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
-        ref: openButtonRef,
-        xcss: linkStyles,
-        href: url,
-        target: "_blank"
-      }, (0, _react2.jsx)(_primitives.Box, {
-        xcss: iconWrapperStyles,
-        "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-      }, (0, _react2.jsx)(_linkExternal.default, {
-        label: ""
-      })), showLabel && (0, _react2.jsx)(_primitives.Text, {
-        size: "small",
-        color: "color.text.subtle",
-        maxLines: 1
-      }, label)))
-    );
-  }
   return (
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", (0, _extends2.default)({
-      ref: containerRef
-    }, props, {
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("span", {
+      ref: containerRef,
       css: containerStyles,
-      onDoubleClick: handleDoubleClick
-    }), children, isVisible && (0, _react2.jsx)(_primitives.Anchor, {
+      onDoubleClick: handleDoubleClick,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      }
+    }, children, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && (0, _react2.jsx)("span", {
+      css: hiddenTextStyle,
+      "aria-hidden": "true"
+    }, (0, _react2.jsx)(_primitives.Text, {
+      ref: hiddenTextRef,
+      size: "small",
+      maxLines: 1
+    }, label)), isHovered && (0, _react2.jsx)(_primitives.Anchor, {
       ref: openButtonRef,
-      xcss: linkStyles,
+      xcss: [linkStyles, (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_5') && linkStylesFix],
       href: url,
-      target: "_blank"
+      target: "_blank",
+      style: {
+        paddingBlock: editorAppearance === 'comment' && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? '1px' : "var(--ds-space-025, 2px)"
+      }
     }, (0, _react2.jsx)(_primitives.Box, {
       xcss: iconWrapperStyles,
       "data-inlinecard-button-overlay": "icon-wrapper-line-height"

package/dist/cjs/ui/OpenButtonOverlay/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/toolbar.js

@@ -31,7 +31,6 @@ var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove
 var _settings2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/settings"));
 var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -425,12 +424,12 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       }
       if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
         var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
-          return (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? {
+          return {
             onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
             onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
             onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
             onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className)
-          } : undefined;
+          };
         };
         var overflowMenuConfig = [{
           type: 'separator',
@@ -691,8 +690,8 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
       type: 'separator'
     }];
     if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-      var _api$analytics2, _api$analytics3, _api$analytics4, _api$analytics5;
-      var hyperlinkAppearance = (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? [(0, _HyperlinkToolbarAppearanceDropdown.getCustomHyperlinkAppearanceDropdown)({
+      var _api$analytics2, _api$analytics3;
+      var hyperlinkAppearance = [(0, _HyperlinkToolbarAppearanceDropdown.getCustomHyperlinkAppearanceDropdown)({
         url: link,
         intl: intl,
         editorAnalyticsApi: api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions,
@@ -701,19 +700,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
         cardOptions: options,
         settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, options.userPreferencesLink),
         isDatasourceView: false
-      })] : [(0, _HyperlinkToolbarAppearanceDropdown.getHyperlinkAppearanceDropdown)({
-        url: link,
-        intl: intl,
-        editorState: state,
-        editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
-        allowDatasource: options.allowDatasource,
-        editorPluginApi: api,
-        cardOptions: options,
-        settingsConfig: getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink),
-        isDatasourceView: false
-      }), {
-        type: 'separator'
-      }];
+      })];
       return [{
         type: 'custom',
         fallback: [],
@@ -742,7 +729,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
       type: 'custom',
       fallback: [],
       render: function render(editorView) {
-        var _api$analytics6;
+        var _api$analytics4;
         if (!editorView) {
           return null;
         }
@@ -753,7 +740,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
           editorView: editorView,
           editorState: editorView.state,
           cardOptions: options,
-          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions,
+          editorAnalyticsApi: api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions,
           editorPluginApi: api
         });
       }
@@ -767,10 +754,10 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
      * Or explicit user preferences config in order to enable button
      */
     if ((options.provider || options.userPreferencesLink) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
-      var _api$analytics7;
+      var _api$analytics5;
       return [{
         type: 'separator'
-      }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions, options.userPreferencesLink)];
+      }, getSettingsButton(intl, api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions, options.userPreferencesLink)];
     }
     return [];
   };

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -22,9 +22,11 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   isPageSSRed,
   appearance
 }) => {
+  var _pluginInjectionApi$c;
   const [isHovered, setIsHovered] = useState(false);
   const [isInserted, setIsInserted] = useState(false);
   const [isResolvedViewRendered, setIsResolvedViewRendered] = useState(false);
+  const editorAppearance = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.card.sharedState.currentState()) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.editorAppearance;
   const onResolve = useCallback((tr, title) => {
     if (fg('platform_editor_fix_card_plugin_state')) {
       const metadata = tr.getMeta(pluginKey);
@@ -55,7 +57,8 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
   const innerCardWithOpenButtonOverlay = useMemo(() => /*#__PURE__*/React.createElement(OpenButtonOverlay, {
     isVisible: isResolvedViewRendered,
-    url: node.attrs.url
+    url: node.attrs.url,
+    editorAppearance: editorAppearance
   }, /*#__PURE__*/React.createElement(InlineCard, {
     node: node,
     view: view,
@@ -67,7 +70,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     cardContext: cardContext,
     isHovered: isHovered,
     isPageSSRed: isPageSSRed
-  })), [isResolvedViewRendered, node, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
+  })), [isResolvedViewRendered, node, editorAppearance, view, getPos, useAlternativePreloader, actionOptions, onResolve, onClick, cardContext, isHovered, isPageSSRed]);
   const innerCardOriginal = useMemo(() => /*#__PURE__*/React.createElement(InlineCard, {
     node: node,
     view: view,
@@ -80,7 +83,10 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     isHovered: isHovered,
     isPageSSRed: isPageSSRed
   }), [actionOptions, cardContext, getPos, isHovered, node, onClick, onResolve, useAlternativePreloader, view, isPageSSRed]);
-  const innerCard = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_1') ? innerCardWithOpenButtonOverlay : innerCardOriginal;
+  const shouldShowOpenButtonOverlay = useMemo(() => {
+    return ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit' || editorAppearance === 'comment' && fg('platform_editor_controls_patch_6')) && editorExperiment('platform_editor_controls', 'variant1');
+  }, [editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode, editorAppearance]);
+  const innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {
     isOverlayEnabled: isOverlayEnabled,
     isPulseEnabled: isPulseEnabled,