@atlaskit/editor-common 107.12.4 → 107.12.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-common
 
+## 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/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.4";
 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.4";
 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/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.4";
 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.4";
 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/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.4";
 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.4";
 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/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/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.5",
 	"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",