@atlaskit/editor-common 107.12.4 → 107.12.6

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-common
 
+## 107.12.6
+
+### Patch Changes
+
+- [#190588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190588)
+  [`b22e308cfd320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b22e308cfd320) -
+  Replace experiment key platform_editor_useSharedPluginStateSelector with
+  platform_editor_useSharedPluginStateWithSelector
+- [#189832](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189832)
+  [`a3b339a1e6839`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a3b339a1e6839) -
+  [ux] ED-28512 Update extension content styles to use box-sizing and removing unused padding to fix
+  flickering issue when cards is nested inside extension nodes
+- Updated dependencies
+
+## 107.12.5
+
+### Patch Changes
+
+- [#188416](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188416)
+  [`3d0ab988998ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3d0ab988998ae) -
+  [EDITOR-1067] Adding new actions to plus button in editor new command palette
+- Updated dependencies
+
 ## 107.12.4
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/Extension/index.js

@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _hooks = require("../../../hooks");
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
@@ -131,6 +132,7 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
+  var extensionContentStyles = (0, _expValEquals.expValEquals)('platform_editor_extension_styles', 'isEnabled', true) ? _styles2.extensionContent : _styles2.content;
   return (0, _react2.jsx)(_react.Fragment, null, showLegacyContentHeader && (0, _react2.jsx)(_LegacyContentHeader.LegacyContentHeader, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
@@ -209,7 +211,7 @@ function ExtensionWithPluginState(props) {
     "data-testid": "extension-content"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
-    css: _styles2.content
+    css: extensionContentStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: contentClassNames

package/dist/cjs/extensibility/Extension/Extension/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyleInheritedCursor = exports.widerLayoutClassName = exports.overflowWrapperStyles = exports.header = exports.contentWrapper = exports.content = void 0;
+exports.wrapperStyleInheritedCursor = exports.widerLayoutClassName = exports.overflowWrapperStyles = exports.header = exports.extensionContent = exports.contentWrapper = exports.content = void 0;
 var _react = require("@emotion/react");
 var _styles = require("../styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -84,6 +84,26 @@ var content = exports.content = (0, _react.css)({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var extensionContent = exports.extensionContent = (0, _react.css)({
+  boxSizing: 'border-box',
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  background: "var(--ds-surface, white)",
+  border: "1px solid ".concat("var(--ds-border, #091E4224)"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  cursor: 'initial',
+  width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-border': {
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.hide-content': {
+    display: 'none'
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var contentWrapper = exports.contentWrapper = (0, _react.css)({
   padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),

package/dist/cjs/hooks/sharedPluginStateHookMigratorFactory.js

@@ -7,7 +7,7 @@ exports.sharedPluginStateHookMigratorFactory = sharedPluginStateHookMigratorFact
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
- * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstateselector` experiment.**
+ * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstatewithselector` experiment.**
  *
  * This hook is a migrator for the legacy `useSharedPluginState` hook and will be removed in the future.
  * Please use `useSharedPluginStateSelector` instead.
@@ -18,6 +18,6 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
  */
 function sharedPluginStateHookMigratorFactory(newHook, oldHook) {
   return (0, _platformFeatureFlagsReact.conditionalHooksFactory)(function () {
-    return (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstateselector', 'isEnabled', true);
+    return (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true);
   }, newHook, oldHook);
 }

package/dist/cjs/hooks/usePluginStateEffect.js

@@ -107,7 +107,7 @@ function usePluginStateEffectInternal(externalPlugins, effect) {
   // We should store the latest effect in a reference so it is more intuitive to the user
   // and we are not causing a memory leak by having references to old state.
   (0, _react.useLayoutEffect)(function () {
-    if (options.disabled || !(0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+    if (options.disabled || !(0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
       return;
     }
     latestEffect.current = (0, _debounce.default)(effect);
@@ -116,7 +116,7 @@ function usePluginStateEffectInternal(externalPlugins, effect) {
     };
   }, [effect, options.disabled]);
   (0, _react.useEffect)(function () {
-    if (options.disabled || (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+    if (options.disabled || (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
       return;
     }
     latestEffect.current = (0, _debounce.default)(effect);

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "107.12.3";
+var packageVersion = "107.12.5";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "107.12.3";
+var packageVersion = "107.12.5";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -0,0 +1,214 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
+var _primitives = require("@atlaskit/primitives");
+var _analytics = require("../../analytics");
+var _messages = require("../../messages");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+
+var containerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var iconWrapperStyles = (0, _primitives.xcss)({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  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',
+  top: '-1px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  paddingBlock: 'space.025',
+  paddingInline: 'space.050',
+  gap: 'space.025',
+  overflow: 'hidden',
+  zIndex: 'card',
+  backgroundColor: 'color.background.accent.gray.subtlest',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: 'color.text.subtle',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered',
+    color: 'color.text.subtle',
+    textDecoration: 'none'
+  }
+});
+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 visitCardLinkAnalytics = function visitCardLinkAnalytics(editorAnalyticsApi, inputMethod) {
+  return function (state, dispatch) {
+    if (!(state.selection instanceof _state.NodeSelection)) {
+      return false;
+    }
+    var type = state.selection.node.type;
+    if (dispatch) {
+      var tr = state.tr;
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent((0, _analytics.buildVisitedNonHyperLinkPayload)(type.name, inputMethod))(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    url = _ref.url,
+    _ref$compactPadding = _ref.compactPadding,
+    compactPadding = _ref$compactPadding === void 0 ? false : _ref$compactPadding,
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    view = _ref.view,
+    onClick = _ref.onClick,
+    _ref$showPanelButton = _ref.showPanelButton,
+    showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = showPanelButton ? formatMessage(_messages.cardMessages.panelButtonTitle) : formatMessage(_messages.cardMessages.openButtonTitle);
+  var containerRef = (0, _react.useRef)(null);
+  var hoverLinkButtonRef = (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],
+    setShowLabel = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHovered = _useState4[0],
+    setHovered = _useState4[1];
+  var openTextWidthRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    var _containerRef$current, _hoverLinkButtonRef$c;
+    if (!isVisible || !isHovered) {
+      return;
+    }
+    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
+
+    // Get the hidden text width
+    if (!openTextWidthRef.current) {
+      var hiddenText = hiddenTextRef.current;
+      if (hiddenText) {
+        // 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';
+      } else {
+        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
+      }
+    }
+    if (!cardWidth || !openButtonWidth) {
+      return;
+    }
+    var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
+    var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    setShowLabel(canShowLabel);
+  }, [isVisible, isHovered]);
+  var handleOverlayChange = function handleOverlayChange(isHovered) {
+    setHovered(isHovered);
+  };
+  var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
+    if (editorAnalyticsApi && view) {
+      visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
+    }
+  };
+  var handleDoubleClick = function handleDoubleClick() {
+    if (!showPanelButton) {
+      sendVisitLinkAnalytics(_analytics.INPUT_METHOD.DOUBLE_CLICK);
+
+      // Double click opens the link in a new tab
+      window.open(url, '_blank');
+    }
+  };
+  var handleClick = function handleClick(event) {
+    if (showPanelButton && onClick) {
+      onClick(event);
+    } else {
+      sendVisitLinkAnalytics(_analytics.INPUT_METHOD.BUTTON);
+    }
+  };
+  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, _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: hoverLinkButtonRef,
+      xcss: linkStyles,
+      href: url,
+      target: "_blank",
+      style: {
+        paddingBlock: compactPadding ? '1px' : "var(--ds-space-025, 2px)"
+      },
+      onClick: handleClick
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
+    }, showPanelButton ? (0, _react2.jsx)(_panelRight.default, {
+      label: ""
+    }) : (0, _react2.jsx)(_linkExternal.default, {
+      label: ""
+    })), showLabel && (0, _react2.jsx)(_primitives.Text, {
+      size: "small",
+      color: "color.text.subtle",
+      maxLines: 1
+    }, label)))
+  );
+};
+var _default = exports.default = HoverLinkOverlay;

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

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

package/dist/cjs/ui/index.js

@@ -101,6 +101,12 @@ Object.defineProperty(exports, "HelperMessage", {
     return _Messages.HelperMessage;
   }
 });
+Object.defineProperty(exports, "HoverLinkOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _HoverLinkOverlay.default;
+  }
+});
 Object.defineProperty(exports, "IntlErrorBoundary", {
   enumerable: true,
   get: function get() {
@@ -492,4 +498,5 @@ var _Separator2 = require("./Toolbar/Separator");
 var _DropList = _interopRequireDefault(require("./DropList"));
 var _MultiBodiedExtension = require("./MultiBodiedExtension");
 var _TableSelector = _interopRequireDefault(require("./TableSelector"));
+var _HoverLinkOverlay = _interopRequireDefault(require("./HoverLinkOverlay"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/dist/es2019/extensibility/Extension/Extension/index.js

@@ -10,6 +10,7 @@ import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '../../../hooks';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
@@ -17,7 +18,7 @@ import { LegacyContentHeader } from '../LegacyContentHeader';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
-import { content, contentWrapper, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
+import { content, extensionContent, contentWrapper, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
 function ExtensionWithPluginState(props) {
   var _node$attrs, _node$attrs$parameter, _node$attrs$parameter2, _node$attrs$parameter3;
   const {
@@ -131,6 +132,7 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
+  const extensionContentStyles = expValEquals('platform_editor_extension_styles', 'isEnabled', true) ? extensionContent : content;
   return jsx(Fragment, null, showLegacyContentHeader && jsx(LegacyContentHeader, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
@@ -201,7 +203,7 @@ function ExtensionWithPluginState(props) {
     "data-testid": "extension-content"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
-    css: content
+    css: extensionContentStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: contentClassNames

package/dist/es2019/extensibility/Extension/Extension/styles.js

@@ -77,6 +77,26 @@ export const content = css({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const extensionContent = css({
+  boxSizing: 'border-box',
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  background: "var(--ds-surface, white)",
+  border: `1px solid ${"var(--ds-border, #091E4224)"}`,
+  borderRadius: "var(--ds-border-radius, 3px)",
+  cursor: 'initial',
+  width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-border': {
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.hide-content': {
+    display: 'none'
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const contentWrapper = css({
   padding: `0 ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`,

package/dist/es2019/hooks/sharedPluginStateHookMigratorFactory.js

@@ -2,7 +2,7 @@ import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react'
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 /**
- * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstateselector` experiment.**
+ * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstatewithselector` experiment.**
  *
  * This hook is a migrator for the legacy `useSharedPluginState` hook and will be removed in the future.
  * Please use `useSharedPluginStateSelector` instead.
@@ -12,5 +12,5 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
  * @returns
  */
 export function sharedPluginStateHookMigratorFactory(newHook, oldHook) {
-  return conditionalHooksFactory(() => expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true), newHook, oldHook);
+  return conditionalHooksFactory(() => expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true), newHook, oldHook);
 }

package/dist/es2019/hooks/usePluginStateEffect.js

@@ -90,7 +90,7 @@ function usePluginStateEffectInternal(externalPlugins, effect, options = {}) {
   // We should store the latest effect in a reference so it is more intuitive to the user
   // and we are not causing a memory leak by having references to old state.
   useLayoutEffect(() => {
-    if (options.disabled || !expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+    if (options.disabled || !expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
       return;
     }
     latestEffect.current = debounce(effect);
@@ -99,7 +99,7 @@ function usePluginStateEffectInternal(externalPlugins, effect, options = {}) {
     };
   }, [effect, options.disabled]);
   useEffect(() => {
-    if (options.disabled || expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+    if (options.disabled || expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
       return;
     }
     latestEffect.current = debounce(effect);

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "107.12.3";
+const packageVersion = "107.12.5";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "107.12.3";
+const packageVersion = "107.12.5";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -0,0 +1,190 @@
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+import { useIntl } from 'react-intl-next';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import PanelRightIcon from '@atlaskit/icon/core/panel-right';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
+import { buildVisitedNonHyperLinkPayload, INPUT_METHOD } from '../../analytics';
+import { cardMessages } from '../../messages';
+const containerStyles = css({
+  position: 'relative'
+});
+const iconWrapperStyles = xcss({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '17px',
+  width: '17px'
+});
+const hiddenTextStyle = css({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
+const linkStyles = xcss({
+  position: 'absolute',
+  left: 'space.025',
+  top: '-1px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  paddingBlock: 'space.025',
+  paddingInline: 'space.050',
+  gap: 'space.025',
+  overflow: 'hidden',
+  zIndex: 'card',
+  backgroundColor: 'color.background.accent.gray.subtlest',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: 'color.text.subtle',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered',
+    color: 'color.text.subtle',
+    textDecoration: 'none'
+  }
+});
+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 visitCardLinkAnalytics = (editorAnalyticsApi, inputMethod) => (state, dispatch) => {
+  if (!(state.selection instanceof NodeSelection)) {
+    return false;
+  }
+  const {
+    type
+  } = state.selection.node;
+  if (dispatch) {
+    const {
+      tr
+    } = state;
+    editorAnalyticsApi === null || editorAnalyticsApi === void 0 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent(buildVisitedNonHyperLinkPayload(type.name, inputMethod))(tr);
+    dispatch(tr);
+  }
+  return true;
+};
+const HoverLinkOverlay = ({
+  children,
+  isVisible = false,
+  url,
+  compactPadding = false,
+  editorAnalyticsApi,
+  view,
+  onClick,
+  showPanelButton = false
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
+  const containerRef = useRef(null);
+  const hoverLinkButtonRef = useRef(null);
+  const hiddenTextRef = useRef(null);
+  const [showLabel, setShowLabel] = useState(true);
+  const [isHovered, setHovered] = useState(false);
+  const openTextWidthRef = useRef(null);
+  useLayoutEffect(() => {
+    var _containerRef$current, _hoverLinkButtonRef$c;
+    if (!isVisible || !isHovered) {
+      return;
+    }
+    const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    const openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
+
+    // Get the hidden text width
+    if (!openTextWidthRef.current) {
+      const hiddenText = hiddenTextRef.current;
+      if (hiddenText) {
+        // 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';
+      } else {
+        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
+      }
+    }
+    if (!cardWidth || !openButtonWidth) {
+      return;
+    }
+    const openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
+    const canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    setShowLabel(canShowLabel);
+  }, [isVisible, isHovered]);
+  const handleOverlayChange = isHovered => {
+    setHovered(isHovered);
+  };
+  const sendVisitLinkAnalytics = inputMethod => {
+    if (editorAnalyticsApi && view) {
+      visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
+    }
+  };
+  const handleDoubleClick = () => {
+    if (!showPanelButton) {
+      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
+
+      // Double click opens the link in a new tab
+      window.open(url, '_blank');
+    }
+  };
+  const handleClick = event => {
+    if (showPanelButton && onClick) {
+      onClick(event);
+    } else {
+      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("span", {
+      ref: containerRef,
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick,
+      onMouseEnter: () => handleOverlayChange(true),
+      onMouseLeave: () => handleOverlayChange(false)
+    }, children, jsx("span", {
+      css: hiddenTextStyle,
+      "aria-hidden": "true"
+    }, jsx(Text, {
+      ref: hiddenTextRef,
+      size: "small",
+      maxLines: 1
+    }, label)), isHovered && jsx(Anchor, {
+      ref: hoverLinkButtonRef,
+      xcss: linkStyles,
+      href: url,
+      target: "_blank",
+      style: {
+        paddingBlock: compactPadding ? '1px' : "var(--ds-space-025, 2px)"
+      },
+      onClick: handleClick
+    }, jsx(Box, {
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
+    }, showPanelButton ? jsx(PanelRightIcon, {
+      label: ""
+    }) : jsx(LinkExternalIcon, {
+      label: ""
+    })), showLabel && jsx(Text, {
+      size: "small",
+      color: "color.text.subtle",
+      maxLines: 1
+    }, label)))
+  );
+};
+export default HoverLinkOverlay;

package/dist/es2019/ui/HoverLinkOverlay/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/index.js

@@ -43,4 +43,5 @@ export { ToolbarExpandIcon } from './Toolbar/ExpandIcon';
 export { ToolbarSeparator } from './Toolbar/Separator';
 export { default as DropList } from './DropList';
 export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
-export { default as TableSelectorPopup } from './TableSelector';
+export { default as TableSelectorPopup } from './TableSelector';
+export { default as HoverLinkOverlay } from './HoverLinkOverlay';

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -15,6 +15,7 @@ import React, { Fragment } from 'react';
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '../../../hooks';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
@@ -22,7 +23,7 @@ import { LegacyContentHeader } from '../LegacyContentHeader';
 import ExtensionLozenge from '../Lozenge';
 import { overlay } from '../styles';
 import { isEmptyBodiedMacro } from './extension-utils';
-import { content, contentWrapper, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
+import { content, extensionContent, contentWrapper, header, overflowWrapperStyles, widerLayoutClassName, wrapperStyleInheritedCursor } from './styles';
 function ExtensionWithPluginState(props) {
   var _node$attrs;
   var node = props.node,
@@ -124,6 +125,7 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
+  var extensionContentStyles = expValEquals('platform_editor_extension_styles', 'isEnabled', true) ? extensionContent : content;
   return jsx(Fragment, null, showLegacyContentHeader && jsx(LegacyContentHeader, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,
@@ -202,7 +204,7 @@ function ExtensionWithPluginState(props) {
     "data-testid": "extension-content"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     ,
-    css: content
+    css: extensionContentStyles
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: contentClassNames

package/dist/esm/extensibility/Extension/Extension/styles.js

@@ -77,6 +77,26 @@ export var content = css({
   }
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var extensionContent = css({
+  boxSizing: 'border-box',
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  background: "var(--ds-surface, white)",
+  border: "1px solid ".concat("var(--ds-border, #091E4224)"),
+  borderRadius: "var(--ds-border-radius, 3px)",
+  cursor: 'initial',
+  width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.remove-border': {
+    border: 'none'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&.hide-content': {
+    display: 'none'
+  }
+});
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var contentWrapper = css({
   padding: "0 ".concat("var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)"),

package/dist/esm/hooks/sharedPluginStateHookMigratorFactory.js

@@ -2,7 +2,7 @@ import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react'
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 /**
- * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstateselector` experiment.**
+ * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstatewithselector` experiment.**
  *
  * This hook is a migrator for the legacy `useSharedPluginState` hook and will be removed in the future.
  * Please use `useSharedPluginStateSelector` instead.
@@ -13,6 +13,6 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
  */
 export function sharedPluginStateHookMigratorFactory(newHook, oldHook) {
   return conditionalHooksFactory(function () {
-    return expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true);
+    return expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true);
   }, newHook, oldHook);
 }

package/dist/esm/hooks/usePluginStateEffect.js

@@ -101,7 +101,7 @@ function usePluginStateEffectInternal(externalPlugins, effect) {
   // We should store the latest effect in a reference so it is more intuitive to the user
   // and we are not causing a memory leak by having references to old state.
   useLayoutEffect(function () {
-    if (options.disabled || !expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+    if (options.disabled || !expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
       return;
     }
     latestEffect.current = debounce(effect);
@@ -110,7 +110,7 @@ function usePluginStateEffectInternal(externalPlugins, effect) {
     };
   }, [effect, options.disabled]);
   useEffect(function () {
-    if (options.disabled || expValEquals('platform_editor_usesharedpluginstateselector', 'isEnabled', true)) {
+    if (options.disabled || expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
       return;
     }
     latestEffect.current = debounce(effect);

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "107.12.3";
+var packageVersion = "107.12.5";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "107.12.3";
+var packageVersion = "107.12.5";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -0,0 +1,200 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+import { useIntl } from 'react-intl-next';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import PanelRightIcon from '@atlaskit/icon/core/panel-right';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
+import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
+import { buildVisitedNonHyperLinkPayload, INPUT_METHOD } from '../../analytics';
+import { cardMessages } from '../../messages';
+var containerStyles = css({
+  position: 'relative'
+});
+var iconWrapperStyles = xcss({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '17px',
+  width: '17px'
+});
+var hiddenTextStyle = css({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
+var linkStyles = xcss({
+  position: 'absolute',
+  left: 'space.025',
+  top: '-1px',
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  paddingBlock: 'space.025',
+  paddingInline: 'space.050',
+  gap: 'space.025',
+  overflow: 'hidden',
+  zIndex: 'card',
+  backgroundColor: 'color.background.accent.gray.subtlest',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: 'color.text.subtle',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered',
+    color: 'color.text.subtle',
+    textDecoration: 'none'
+  }
+});
+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 visitCardLinkAnalytics = function visitCardLinkAnalytics(editorAnalyticsApi, inputMethod) {
+  return function (state, dispatch) {
+    if (!(state.selection instanceof NodeSelection)) {
+      return false;
+    }
+    var type = state.selection.node.type;
+    if (dispatch) {
+      var tr = state.tr;
+      editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent(buildVisitedNonHyperLinkPayload(type.name, inputMethod))(tr);
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    url = _ref.url,
+    _ref$compactPadding = _ref.compactPadding,
+    compactPadding = _ref$compactPadding === void 0 ? false : _ref$compactPadding,
+    editorAnalyticsApi = _ref.editorAnalyticsApi,
+    view = _ref.view,
+    onClick = _ref.onClick,
+    _ref$showPanelButton = _ref.showPanelButton,
+    showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
+  var containerRef = useRef(null);
+  var hoverLinkButtonRef = useRef(null);
+  var hiddenTextRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovered = _useState4[0],
+    setHovered = _useState4[1];
+  var openTextWidthRef = useRef(null);
+  useLayoutEffect(function () {
+    var _containerRef$current, _hoverLinkButtonRef$c;
+    if (!isVisible || !isHovered) {
+      return;
+    }
+    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
+
+    // Get the hidden text width
+    if (!openTextWidthRef.current) {
+      var hiddenText = hiddenTextRef.current;
+      if (hiddenText) {
+        // 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';
+      } else {
+        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
+      }
+    }
+    if (!cardWidth || !openButtonWidth) {
+      return;
+    }
+    var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
+    var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    setShowLabel(canShowLabel);
+  }, [isVisible, isHovered]);
+  var handleOverlayChange = function handleOverlayChange(isHovered) {
+    setHovered(isHovered);
+  };
+  var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
+    if (editorAnalyticsApi && view) {
+      visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
+    }
+  };
+  var handleDoubleClick = function handleDoubleClick() {
+    if (!showPanelButton) {
+      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
+
+      // Double click opens the link in a new tab
+      window.open(url, '_blank');
+    }
+  };
+  var handleClick = function handleClick(event) {
+    if (showPanelButton && onClick) {
+      onClick(event);
+    } else {
+      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("span", {
+      ref: containerRef,
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      }
+    }, children, jsx("span", {
+      css: hiddenTextStyle,
+      "aria-hidden": "true"
+    }, jsx(Text, {
+      ref: hiddenTextRef,
+      size: "small",
+      maxLines: 1
+    }, label)), isHovered && jsx(Anchor, {
+      ref: hoverLinkButtonRef,
+      xcss: linkStyles,
+      href: url,
+      target: "_blank",
+      style: {
+        paddingBlock: compactPadding ? '1px' : "var(--ds-space-025, 2px)"
+      },
+      onClick: handleClick
+    }, jsx(Box, {
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
+    }, showPanelButton ? jsx(PanelRightIcon, {
+      label: ""
+    }) : jsx(LinkExternalIcon, {
+      label: ""
+    })), showLabel && jsx(Text, {
+      size: "small",
+      color: "color.text.subtle",
+      maxLines: 1
+    }, label)))
+  );
+};
+export default HoverLinkOverlay;

package/dist/esm/ui/HoverLinkOverlay/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/index.js

@@ -43,4 +43,5 @@ export { ToolbarExpandIcon } from './Toolbar/ExpandIcon';
 export { ToolbarSeparator } from './Toolbar/Separator';
 export { default as DropList } from './DropList';
 export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
-export { default as TableSelectorPopup } from './TableSelector';
+export { default as TableSelectorPopup } from './TableSelector';
+export { default as HoverLinkOverlay } from './HoverLinkOverlay';

package/dist/types/extensibility/Extension/Extension/styles.d.ts

@@ -2,5 +2,6 @@ export declare const widerLayoutClassName = "wider-layout";
 export declare const wrapperStyleInheritedCursor: import("@emotion/react").SerializedStyles;
 export declare const header: import("@emotion/react").SerializedStyles;
 export declare const content: import("@emotion/react").SerializedStyles;
+export declare const extensionContent: import("@emotion/react").SerializedStyles;
 export declare const contentWrapper: import("@emotion/react").SerializedStyles;
 export declare const overflowWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types/hooks/sharedPluginStateHookMigratorFactory.d.ts

@@ -1,5 +1,5 @@
 /**
- * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstateselector` experiment.**
+ * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstatewithselector` experiment.**
  *
  * This hook is a migrator for the legacy `useSharedPluginState` hook and will be removed in the future.
  * Please use `useSharedPluginStateSelector` instead.

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { HoverLinkOverlayProps } from './types';
+declare const HoverLinkOverlay: ({ children, isVisible, url, compactPadding, editorAnalyticsApi, view, onClick, showPanelButton, }: React.PropsWithChildren<HoverLinkOverlayProps>) => jsx.JSX.Element;
+export default HoverLinkOverlay;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorAnalyticsAPI } from '../../analytics';
+export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    url: string;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    view?: EditorView;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    showPanelButton?: boolean;
+    compactPadding?: boolean;
+};

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

@@ -55,3 +55,4 @@ export type { UseStickyToolbarType } from './Toolbar';
 export type { OpenChangedEvent } from './DropList';
 export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
 export { default as TableSelectorPopup, type TableSelectorPopupProps } from './TableSelector';
+export { default as HoverLinkOverlay } from './HoverLinkOverlay';

package/dist/types-ts4.5/extensibility/Extension/Extension/styles.d.ts

@@ -2,5 +2,6 @@ export declare const widerLayoutClassName = "wider-layout";
 export declare const wrapperStyleInheritedCursor: import("@emotion/react").SerializedStyles;
 export declare const header: import("@emotion/react").SerializedStyles;
 export declare const content: import("@emotion/react").SerializedStyles;
+export declare const extensionContent: import("@emotion/react").SerializedStyles;
 export declare const contentWrapper: import("@emotion/react").SerializedStyles;
 export declare const overflowWrapperStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/hooks/sharedPluginStateHookMigratorFactory.d.ts

@@ -1,5 +1,5 @@
 /**
- * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstateselector` experiment.**
+ * **Warning: This hook is controlled by the `platform_editor_usesharedpluginstatewithselector` experiment.**
  *
  * This hook is a migrator for the legacy `useSharedPluginState` hook and will be removed in the future.
  * Please use `useSharedPluginStateSelector` instead.

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { HoverLinkOverlayProps } from './types';
+declare const HoverLinkOverlay: ({ children, isVisible, url, compactPadding, editorAnalyticsApi, view, onClick, showPanelButton, }: React.PropsWithChildren<HoverLinkOverlayProps>) => jsx.JSX.Element;
+export default HoverLinkOverlay;

package/dist/types-ts4.5/ui/HoverLinkOverlay/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorAnalyticsAPI } from '../../analytics';
+export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    url: string;
+    editorAnalyticsApi?: EditorAnalyticsAPI;
+    view?: EditorView;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    showPanelButton?: boolean;
+    compactPadding?: boolean;
+};

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

@@ -55,3 +55,4 @@ export type { UseStickyToolbarType } from './Toolbar';
 export type { OpenChangedEvent } from './DropList';
 export { sharedMultiBodiedExtensionStyles } from './MultiBodiedExtension';
 export { default as TableSelectorPopup, type TableSelectorPopupProps } from './TableSelector';
+export { default as HoverLinkOverlay } from './HoverLinkOverlay';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "107.12.4",
+	"version": "107.12.6",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -144,7 +144,7 @@
 		"@atlaskit/icon": "^27.7.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/link-datasource": "^4.14.0",
+		"@atlaskit/link-datasource": "^4.15.0",
 		"@atlaskit/link-picker": "^3.8.0",
 		"@atlaskit/media-card": "^79.4.0",
 		"@atlaskit/media-client": "^35.2.0",
@@ -171,7 +171,7 @@
 		"@atlaskit/task-decision": "^19.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.12.0",
+		"@atlaskit/tmp-editor-statsig": "^9.14.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/width-detector": "^5.0.0",