@atlaskit/editor-plugin-card 5.4.9 → 5.4.11

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-card
 
+## 5.4.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.4.10
+
+### Patch Changes
+
+- [#135796](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135796)
+  [`6cec67e75af40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6cec67e75af40) -
+  [ux] Fix open button text not display consistantly
+- Updated dependencies
+
 ## 5.4.9
 
 ### Patch Changes

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

@@ -11,10 +11,12 @@ var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _card = require("@atlaskit/editor-common/card");
+var _link = require("@atlaskit/editor-common/link");
 var _utils = require("@atlaskit/editor-common/utils");
 var _history = require("@atlaskit/editor-prosemirror/history");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
 var _shouldReplaceLink = require("./shouldReplaceLink");
@@ -237,23 +239,38 @@ var convertHyperlinkToSmartCard = exports.convertHyperlinkToSmartCard = function
   var schema = state.schema;
   var link = schema.marks.link;
   var requests = [];
-  state.tr.doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
-    var linkMark = node.marks.find(function (mark) {
-      return mark.type === link;
-    });
-    if (linkMark) {
-      requests.push({
-        url: linkMark.attrs.href,
-        pos: pos,
-        appearance: appearance,
-        previousAppearance: 'url',
-        compareLinkText: normalizeLinkText,
-        source: source,
-        analyticsAction: _analytics.ACTION.CHANGED_TYPE,
-        shouldReplaceLink: true
+  var createRequest = function createRequest(linkMark, pos) {
+    return {
+      url: linkMark.attrs.href,
+      pos: pos,
+      appearance: appearance,
+      previousAppearance: 'url',
+      compareLinkText: normalizeLinkText,
+      source: source,
+      analyticsAction: _analytics.ACTION.CHANGED_TYPE,
+      shouldReplaceLink: true
+    };
+  };
+  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3')) {
+    var activeLinkMark = (0, _link.getActiveLinkMark)(state);
+    if (activeLinkMark) {
+      var linkMark = activeLinkMark.node.marks.find(function (mark) {
+        return mark.type === link;
       });
+      if (linkMark) {
+        requests.push(createRequest(linkMark, activeLinkMark.pos));
+      }
     }
-  });
+  } else {
+    state.tr.doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
+      var linkMark = node.marks.find(function (mark) {
+        return mark.type === link;
+      });
+      if (linkMark) {
+        requests.push(createRequest(linkMark, pos));
+      }
+    });
+  }
   (0, _card.addLinkMetadata)(state.selection, state.tr, {
     action: _analytics.ACTION.CHANGED_TYPE
   });

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

@@ -35,6 +35,12 @@ var iconWrapperStyles = (0, _primitives.xcss)({
   height: '17px',
   width: '17px'
 });
+var hiddenTextStyle = (0, _react2.css)({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
 var linkStyles = (0, _primitives.xcss)({
   position: 'absolute',
   left: 'space.025',
@@ -58,6 +64,9 @@ var linkStyles = (0, _primitives.xcss)({
   }
 });
 var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
+var ICON_WIDTH = 16;
+var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
+
 var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
@@ -68,6 +77,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var label = 'Open';
   var containerRef = (0, _react.useRef)(null);
   var openButtonRef = (0, _react.useRef)(null);
+  var hiddenTextRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showLabel = _useState2[0],
@@ -76,10 +86,26 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isHovered = _useState4[0],
     setHovered = _useState4[1];
+  var openTextWidthRef = (0, _react.useRef)(DEFAULT_OPEN_TEXT_WIDTH);
   var handleDoubleClick = function handleDoubleClick() {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  (0, _react.useLayoutEffect)(function () {
+    var hiddenText = hiddenTextRef.current;
+    if (!hiddenText) {
+      return;
+    }
+    // Measure the width of the hidden text
+    // Temporarily make the element visible to measure its width
+    hiddenText.style.visibility = 'hidden';
+    hiddenText.style.display = 'inline';
+    openTextWidthRef.current = hiddenText.offsetWidth;
+
+    // Reset the hiddenText's display property
+    hiddenText.style.display = 'none';
+    hiddenText.style.visibility = 'inherit';
+  }, []);
   (0, _react.useLayoutEffect)(function () {
     var _containerRef$current, _openButtonRef$curren;
     if (!isVisible || !isHovered) {
@@ -87,12 +113,20 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }
     var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
     var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
-    var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    if (!cardWidth || !openButtonWidth) {
+      return;
+    }
+    var canShowLabel = true;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2')) {
+      canShowLabel = cardWidth - openTextWidthRef.current > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    } else {
+      canShowLabel = cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY;
+    }
     setShowLabel(canShowLabel);
   }, [isVisible, isHovered]);
-  var handleOverlayChange = (0, _react.useCallback)(function (isHovered) {
+  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
@@ -106,13 +140,21 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
         onMouseLeave: function onMouseLeave() {
           return handleOverlayChange(false);
         }
-      }, children, isHovered && (0, _react2.jsx)(_primitives.Anchor, {
+      }, 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
+        xcss: iconWrapperStyles,
+        "data-inlinecard-button-overlay": "icon-wrapper-line-height"
       }, (0, _react2.jsx)(_linkExternal.default, {
         label: ""
       })), showLabel && (0, _react2.jsx)(_primitives.Text, {

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

@@ -2,10 +2,12 @@ import isEqual from 'lodash/isEqual';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
+import { getActiveLinkMark } from '@atlaskit/editor-common/link';
 import { getAnnotationMarksForPos, getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
@@ -218,21 +220,32 @@ export const convertHyperlinkToSmartCard = (state, source, appearance, normalize
     link
   } = schema.marks;
   const requests = [];
-  state.tr.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
-    const linkMark = node.marks.find(mark => mark.type === link);
-    if (linkMark) {
-      requests.push({
-        url: linkMark.attrs.href,
-        pos,
-        appearance,
-        previousAppearance: 'url',
-        compareLinkText: normalizeLinkText,
-        source,
-        analyticsAction: ACTION.CHANGED_TYPE,
-        shouldReplaceLink: true
-      });
-    }
+  const createRequest = (linkMark, pos) => ({
+    url: linkMark.attrs.href,
+    pos,
+    appearance,
+    previousAppearance: 'url',
+    compareLinkText: normalizeLinkText,
+    source,
+    analyticsAction: ACTION.CHANGED_TYPE,
+    shouldReplaceLink: true
   });
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3')) {
+    const activeLinkMark = getActiveLinkMark(state);
+    if (activeLinkMark) {
+      const linkMark = activeLinkMark.node.marks.find(mark => mark.type === link);
+      if (linkMark) {
+        requests.push(createRequest(linkMark, activeLinkMark.pos));
+      }
+    }
+  } else {
+    state.tr.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
+      const linkMark = node.marks.find(mark => mark.type === link);
+      if (linkMark) {
+        requests.push(createRequest(linkMark, pos));
+      }
+    });
+  }
   addLinkMetadata(state.selection, state.tr, {
     action: ACTION.CHANGED_TYPE
   });

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

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -22,6 +22,12 @@ const iconWrapperStyles = xcss({
   height: '17px',
   width: '17px'
 });
+const hiddenTextStyle = css({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
 const linkStyles = xcss({
   position: 'absolute',
   left: 'space.025',
@@ -45,6 +51,9 @@ const linkStyles = xcss({
   }
 });
 const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
+const ICON_WIDTH = 16;
+const DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
+
 const OpenButtonOverlay = ({
   children,
   isVisible = false,
@@ -55,12 +64,29 @@ const OpenButtonOverlay = ({
   const label = 'Open';
   const containerRef = useRef(null);
   const openButtonRef = useRef(null);
+  const hiddenTextRef = useRef(null);
   const [showLabel, setShowLabel] = useState(true);
   const [isHovered, setHovered] = useState(false);
+  const openTextWidthRef = useRef(DEFAULT_OPEN_TEXT_WIDTH);
   const handleDoubleClick = () => {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  useLayoutEffect(() => {
+    const hiddenText = hiddenTextRef.current;
+    if (!hiddenText) {
+      return;
+    }
+    // Measure the width of the hidden text
+    // Temporarily make the element visible to measure its width
+    hiddenText.style.visibility = 'hidden';
+    hiddenText.style.display = 'inline';
+    openTextWidthRef.current = hiddenText.offsetWidth;
+
+    // Reset the hiddenText's display property
+    hiddenText.style.display = 'none';
+    hiddenText.style.visibility = 'inherit';
+  }, []);
   useLayoutEffect(() => {
     var _containerRef$current, _openButtonRef$curren;
     if (!isVisible || !isHovered) {
@@ -68,12 +94,20 @@ const OpenButtonOverlay = ({
     }
     const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
     const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
-    const canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    if (!cardWidth || !openButtonWidth) {
+      return;
+    }
+    let canShowLabel = true;
+    if (fg('platform_editor_controls_patch_2')) {
+      canShowLabel = cardWidth - openTextWidthRef.current > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    } else {
+      canShowLabel = cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY;
+    }
     setShowLabel(canShowLabel);
   }, [isVisible, isHovered]);
-  const handleOverlayChange = useCallback(isHovered => {
+  const handleOverlayChange = isHovered => {
     setHovered(isHovered);
-  }, []);
+  };
   if (fg('platform_editor_controls_patch_1')) {
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -83,13 +117,21 @@ const OpenButtonOverlay = ({
         onDoubleClick: handleDoubleClick,
         onMouseEnter: () => handleOverlayChange(true),
         onMouseLeave: () => handleOverlayChange(false)
-      }, children, isHovered && jsx(Anchor, {
+      }, children, fg('platform_editor_controls_patch_2') && jsx("span", {
+        css: hiddenTextStyle,
+        "aria-hidden": "true"
+      }, jsx(Text, {
+        ref: hiddenTextRef,
+        size: "small",
+        maxLines: 1
+      }, label)), isHovered && jsx(Anchor, {
         ref: openButtonRef,
         xcss: linkStyles,
         href: url,
         target: "_blank"
       }, jsx(Box, {
-        xcss: iconWrapperStyles
+        xcss: iconWrapperStyles,
+        "data-inlinecard-button-overlay": "icon-wrapper-line-height"
       }, jsx(LinkExternalIcon, {
         label: ""
       })), showLabel && jsx(Text, {

package/dist/esm/pm-plugins/doc.js

@@ -6,10 +6,12 @@ import isEqual from 'lodash/isEqual';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SMART_LINK_TYPE, unlinkPayload } from '@atlaskit/editor-common/analytics';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
+import { getActiveLinkMark } from '@atlaskit/editor-common/link';
 import { getAnnotationMarksForPos, getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
@@ -231,23 +233,38 @@ export var convertHyperlinkToSmartCard = function convertHyperlinkToSmartCard(st
   var schema = state.schema;
   var link = schema.marks.link;
   var requests = [];
-  state.tr.doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
-    var linkMark = node.marks.find(function (mark) {
-      return mark.type === link;
-    });
-    if (linkMark) {
-      requests.push({
-        url: linkMark.attrs.href,
-        pos: pos,
-        appearance: appearance,
-        previousAppearance: 'url',
-        compareLinkText: normalizeLinkText,
-        source: source,
-        analyticsAction: ACTION.CHANGED_TYPE,
-        shouldReplaceLink: true
+  var createRequest = function createRequest(linkMark, pos) {
+    return {
+      url: linkMark.attrs.href,
+      pos: pos,
+      appearance: appearance,
+      previousAppearance: 'url',
+      compareLinkText: normalizeLinkText,
+      source: source,
+      analyticsAction: ACTION.CHANGED_TYPE,
+      shouldReplaceLink: true
+    };
+  };
+  if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3')) {
+    var activeLinkMark = getActiveLinkMark(state);
+    if (activeLinkMark) {
+      var linkMark = activeLinkMark.node.marks.find(function (mark) {
+        return mark.type === link;
       });
+      if (linkMark) {
+        requests.push(createRequest(linkMark, activeLinkMark.pos));
+      }
     }
-  });
+  } else {
+    state.tr.doc.nodesBetween(state.selection.from, state.selection.to, function (node, pos) {
+      var linkMark = node.marks.find(function (mark) {
+        return mark.type === link;
+      });
+      if (linkMark) {
+        requests.push(createRequest(linkMark, pos));
+      }
+    });
+  }
   addLinkMetadata(state.selection, state.tr, {
     action: ACTION.CHANGED_TYPE
   });

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

@@ -8,7 +8,7 @@ var _excluded = ["children", "isVisible", "url"];
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -25,6 +25,12 @@ var iconWrapperStyles = xcss({
   height: '17px',
   width: '17px'
 });
+var hiddenTextStyle = css({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
 var linkStyles = xcss({
   position: 'absolute',
   left: 'space.025',
@@ -48,6 +54,9 @@ var linkStyles = xcss({
   }
 });
 var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
+var ICON_WIDTH = 16;
+var DEFAULT_OPEN_TEXT_WIDTH = 28; // Default open text width in English
+
 var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
@@ -58,6 +67,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var label = 'Open';
   var containerRef = useRef(null);
   var openButtonRef = useRef(null);
+  var hiddenTextRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     showLabel = _useState2[0],
@@ -66,10 +76,26 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isHovered = _useState4[0],
     setHovered = _useState4[1];
+  var openTextWidthRef = useRef(DEFAULT_OPEN_TEXT_WIDTH);
   var handleDoubleClick = function handleDoubleClick() {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  useLayoutEffect(function () {
+    var hiddenText = hiddenTextRef.current;
+    if (!hiddenText) {
+      return;
+    }
+    // Measure the width of the hidden text
+    // Temporarily make the element visible to measure its width
+    hiddenText.style.visibility = 'hidden';
+    hiddenText.style.display = 'inline';
+    openTextWidthRef.current = hiddenText.offsetWidth;
+
+    // Reset the hiddenText's display property
+    hiddenText.style.display = 'none';
+    hiddenText.style.visibility = 'inherit';
+  }, []);
   useLayoutEffect(function () {
     var _containerRef$current, _openButtonRef$curren;
     if (!isVisible || !isHovered) {
@@ -77,12 +103,20 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }
     var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
     var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
-    var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    if (!cardWidth || !openButtonWidth) {
+      return;
+    }
+    var canShowLabel = true;
+    if (fg('platform_editor_controls_patch_2')) {
+      canShowLabel = cardWidth - openTextWidthRef.current > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    } else {
+      canShowLabel = cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY;
+    }
     setShowLabel(canShowLabel);
   }, [isVisible, isHovered]);
-  var handleOverlayChange = useCallback(function (isHovered) {
+  var handleOverlayChange = function handleOverlayChange(isHovered) {
     setHovered(isHovered);
-  }, []);
+  };
   if (fg('platform_editor_controls_patch_1')) {
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -96,13 +130,21 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
         onMouseLeave: function onMouseLeave() {
           return handleOverlayChange(false);
         }
-      }, children, isHovered && jsx(Anchor, {
+      }, children, fg('platform_editor_controls_patch_2') && jsx("span", {
+        css: hiddenTextStyle,
+        "aria-hidden": "true"
+      }, jsx(Text, {
+        ref: hiddenTextRef,
+        size: "small",
+        maxLines: 1
+      }, label)), isHovered && jsx(Anchor, {
         ref: openButtonRef,
         xcss: linkStyles,
         href: url,
         target: "_blank"
       }, jsx(Box, {
-        xcss: iconWrapperStyles
+        xcss: iconWrapperStyles,
+        "data-inlinecard-button-overlay": "icon-wrapper-line-height"
       }, jsx(LinkExternalIcon, {
         label: ""
       })), showLabel && jsx(Text, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.4.9",
+	"version": "5.4.11",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^102.16.0",
+		"@atlaskit/editor-common": "^103.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/frontend-utilities": "^3.0.0",
-		"@atlaskit/icon": "^25.4.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/link-analytics": "^9.1.0",
 		"@atlaskit/link-client-extension": "^4.0.0",
 		"@atlaskit/link-datasource": "^4.1.0",
@@ -59,11 +59,11 @@
 		"@atlaskit/linking-types": "^9.7.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/primitives": "^14.3.0",
 		"@atlaskit/smart-card": "^36.2.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^4.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -134,9 +134,6 @@
 		"platform-editor-plugin-card-icon-migration": {
 			"type": "boolean"
 		},
-		"platform_editor_lego__inline_node_virtualization": {
-			"type": "boolean"
-		},
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},
@@ -145,6 +142,12 @@
 		},
 		"platform_editor_controls_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
+		},
+		"platform_editor_controls_patch_3": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {