@atlaskit/editor-common 87.1.0 → 87.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-common
 
+## 87.2.0
+
+### Minor Changes
+
+- [`aef5432662b58`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aef5432662b58) -
+  [ux] EDM-10363 Implement opening links via configure overlay dropdown open link button
+
 ## 87.1.0
 
 ### Minor Changes

package/dist/cjs/link/ConfigureLinkOverlay/Dropdown.js

@@ -30,6 +30,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 var Dropdown = function Dropdown(_ref) {
   var onConfigureClickCallback = _ref.onConfigureClick,
+    onOpenLinkClickCallback = _ref.onOpenLinkClick,
     onDropdownChange = _ref.onDropdownChange,
     editorView = _ref.editorView,
     testId = _ref.testId;
@@ -60,10 +61,11 @@ var Dropdown = function Dropdown(_ref) {
       focusEditor();
     }
   }, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
-  var onGoToLinkClick = (0, _react.useCallback)(function () {
+  var onGoToLinkClick = (0, _react.useCallback)(function (event) {
     fireActionClickEvent('goToLink');
+    onOpenLinkClickCallback === null || onOpenLinkClickCallback === void 0 || onOpenLinkClickCallback(event);
     focusEditor();
-  }, [fireActionClickEvent, focusEditor]);
+  }, [fireActionClickEvent, focusEditor, onOpenLinkClickCallback]);
   var onConfigureClick = (0, _react.useCallback)(function () {
     fireActionClickEvent('configureLink');
     onConfigureClickCallback === null || onConfigureClickCallback === void 0 || onConfigureClickCallback();
@@ -94,6 +96,7 @@ var Dropdown = function Dropdown(_ref) {
       label: goToLinkLabel,
       size: 'medium'
     }),
+    testId: "".concat(testId, "-dropdown-item-open-link"),
     onClick: onGoToLinkClick
   }, goToLinkLabel), (0, _react2.jsx)(_dropdownMenu.DropdownItem, {
     elemBefore: (0, _react2.jsx)(_preferences.default, {

package/dist/cjs/link/ConfigureLinkOverlay/handleNavigation.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleNavigation = handleNavigation;
+var _analytics = require("../../analytics");
+/**
+ * Function that opens a new page and fires the relevant analytics events
+ */
+function handleNavigation(_ref) {
+  var url = _ref.url,
+    event = _ref.event,
+    onClickCallback = _ref.onClickCallback,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
+  if (fireAnalyticsEvent) {
+    fireAnalyticsEvent({
+      action: _analytics.ACTION.VISITED,
+      actionSubject: _analytics.ACTION_SUBJECT.LINK,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      attributes: {
+        platform: _analytics.PLATFORMS.WEB,
+        mode: _analytics.MODE.EDITOR
+      }
+    });
+  }
+  if (url) {
+    try {
+      onClickCallback === null || onClickCallback === void 0 || onClickCallback({
+        event: event,
+        url: url
+      });
+    } catch (_unused) {}
+    /**
+     * Links should navigate by default in live pages if:
+     * - the link is the direct target of the click event
+     * - default handling wasn't prevented with `event.preventDefault()`
+     */
+    if (!event.defaultPrevented) {
+      window.location.href = url;
+    }
+  }
+}

package/dist/cjs/link/ConfigureLinkOverlay/index.js

@@ -43,7 +43,8 @@ var OverlayButton = exports.OverlayButton = (0, _analyticsNext.withAnalyticsCont
     testId = _ref$testId === void 0 ? 'link-configure-overlay-button' : _ref$testId,
     _ref$targetElementPos = _ref.targetElementPos,
     targetElementPos = _ref$targetElementPos === void 0 ? 0 : _ref$targetElementPos,
-    onDropdownChange = _ref.onDropdownChange;
+    onDropdownChange = _ref.onDropdownChange,
+    onOpenLinkClick = _ref.onOpenLinkClick;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var configureLinkLabel = formatMessage(_messages.cardMessages.inlineConfigureLink);
@@ -52,8 +53,8 @@ var OverlayButton = exports.OverlayButton = (0, _analyticsNext.withAnalyticsCont
     showDropdown = _useState2[0],
     setShowDropdown = _useState2[1];
   var _useLinkOverlayAnalyt = (0, _useLinkOverlayAnalyticsEvents.useLinkOverlayAnalyticsEvents)(),
-    fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent,
-    fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent;
+    fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent,
+    fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent;
   (0, _react.useLayoutEffect)(function () {
     var _domNode;
     var domNode = editorView.nodeDOM(targetElementPos);
@@ -81,10 +82,10 @@ var OverlayButton = exports.OverlayButton = (0, _analyticsNext.withAnalyticsCont
     editorView.dispatch(tr);
   }, [editorView, isText, targetElementPos, nodeEnd]);
   var handleConfigureClickWithAnalytics = (0, _react.useCallback)(function () {
-    fireLinkClickEvent();
     fireActionClickEvent('configureLink');
+    fireLinkClickEvent();
     handleConfigureClick();
-  }, [fireActionClickEvent, fireLinkClickEvent, handleConfigureClick]);
+  }, [fireLinkClickEvent, handleConfigureClick, fireActionClickEvent]);
   var _editorView$state$sel = editorView.state.selection,
     from = _editorView$state$sel.from,
     to = _editorView$state$sel.to;
@@ -98,6 +99,7 @@ var OverlayButton = exports.OverlayButton = (0, _analyticsNext.withAnalyticsCont
   }, showDropdown ? (0, _react2.jsx)(_Dropdown.default, {
     testId: testId,
     onConfigureClick: handleConfigureClick,
+    onOpenLinkClick: onOpenLinkClick,
     onDropdownChange: onDropdownChange,
     editorView: editorView
   }) : (0, _react2.jsx)(_tooltip.default, {

package/dist/cjs/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -13,6 +13,15 @@ var useLinkOverlayAnalyticsEvents = exports.useLinkOverlayAnalyticsEvents = func
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   return (0, _react.useMemo)(function () {
     return {
+      /**
+       * When a user clicks go to link or configure link buttons.
+       *
+       * When a link is "wide" the overlay button is the configure button.
+       * When a link is "narrow" the configure button is inside the dropdown.
+       *
+       * @param linkAction 'goToLink' when somebody clicks on the Go to link button
+       * in the chevron menu; 'configureLink' when somebody clicks on the Configure button (whether it's the overlay or in the dropdown)
+       */
       fireActionClickEvent: function fireActionClickEvent(linkAction) {
         createAnalyticsEvent({
           action: _analytics.ACTION.CLICKED,
@@ -23,6 +32,9 @@ var useLinkOverlayAnalyticsEvents = exports.useLinkOverlayAnalyticsEvents = func
           }
         }).fire(_analyticsListeners.FabricChannel.media);
       },
+      /**
+       * When a user clicks on the dropdown for a short link, or when a user clicks on the configure button for a wide link.
+       */
       fireLinkClickEvent: function fireLinkClickEvent() {
         createAnalyticsEvent({
           action: _analytics.ACTION.CLICKED,

package/dist/cjs/link/index.js

@@ -89,6 +89,12 @@ Object.defineProperty(exports, "getLinkPreferencesURLFromENV", {
     return _utils2.getLinkPreferencesURLFromENV;
   }
 });
+Object.defineProperty(exports, "handleNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _handleNavigation.handleNavigation;
+  }
+});
 Object.defineProperty(exports, "inputWrapper", {
   enumerable: true,
   get: function get() {
@@ -131,5 +137,6 @@ var _HyperlinkAddToolbar2 = _interopRequireWildcard(require("./LinkPicker/Hyperl
 var _utils = require("./LinkPicker/HyperlinkAddToolbar/utils");
 var _utils2 = require("./utils");
 var _ConfigureLinkOverlay = require("./ConfigureLinkOverlay");
+var _handleNavigation = require("./ConfigureLinkOverlay/handleNavigation");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var 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 = "87.1.0";
+var packageVersion = "87.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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 = "87.1.0";
+var packageVersion = "87.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/es2019/link/ConfigureLinkOverlay/Dropdown.js

@@ -19,6 +19,7 @@ import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 const SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 const Dropdown = ({
   onConfigureClick: onConfigureClickCallback,
+  onOpenLinkClick: onOpenLinkClickCallback,
   onDropdownChange,
   editorView,
   testId
@@ -51,10 +52,11 @@ const Dropdown = ({
       focusEditor();
     }
   }, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
-  const onGoToLinkClick = useCallback(() => {
+  const onGoToLinkClick = useCallback(event => {
     fireActionClickEvent('goToLink');
+    onOpenLinkClickCallback === null || onOpenLinkClickCallback === void 0 ? void 0 : onOpenLinkClickCallback(event);
     focusEditor();
-  }, [fireActionClickEvent, focusEditor]);
+  }, [fireActionClickEvent, focusEditor, onOpenLinkClickCallback]);
   const onConfigureClick = useCallback(() => {
     fireActionClickEvent('configureLink');
     onConfigureClickCallback === null || onConfigureClickCallback === void 0 ? void 0 : onConfigureClickCallback();
@@ -84,6 +86,7 @@ const Dropdown = ({
       label: goToLinkLabel,
       size: 'medium'
     }),
+    testId: `${testId}-dropdown-item-open-link`,
     onClick: onGoToLinkClick
   }, goToLinkLabel), jsx(DropdownItem, {
     elemBefore: jsx(PreferencesIcon, {

package/dist/es2019/link/ConfigureLinkOverlay/handleNavigation.js

@@ -0,0 +1,38 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE, PLATFORMS } from '../../analytics';
+/**
+ * Function that opens a new page and fires the relevant analytics events
+ */
+export function handleNavigation({
+  url,
+  event,
+  onClickCallback,
+  fireAnalyticsEvent
+}) {
+  if (fireAnalyticsEvent) {
+    fireAnalyticsEvent({
+      action: ACTION.VISITED,
+      actionSubject: ACTION_SUBJECT.LINK,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        platform: PLATFORMS.WEB,
+        mode: MODE.EDITOR
+      }
+    });
+  }
+  if (url) {
+    try {
+      onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback({
+        event,
+        url
+      });
+    } catch {}
+    /**
+     * Links should navigate by default in live pages if:
+     * - the link is the direct target of the click event
+     * - default handling wasn't prevented with `event.preventDefault()`
+     */
+    if (!event.defaultPrevented) {
+      window.location.href = url;
+    }
+  }
+}

package/dist/es2019/link/ConfigureLinkOverlay/index.js

@@ -31,7 +31,8 @@ export const OverlayButton = withAnalyticsContext()(({
   editorView,
   testId = 'link-configure-overlay-button',
   targetElementPos = 0,
-  onDropdownChange
+  onDropdownChange,
+  onOpenLinkClick
 }) => {
   var _docNode$nodeSize;
   const {
@@ -40,8 +41,8 @@ export const OverlayButton = withAnalyticsContext()(({
   const configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
   const [showDropdown, setShowDropdown] = useState(false);
   const {
-    fireLinkClickEvent,
-    fireActionClickEvent
+    fireActionClickEvent,
+    fireLinkClickEvent
   } = useLinkOverlayAnalyticsEvents();
   useLayoutEffect(() => {
     var _domNode;
@@ -71,10 +72,10 @@ export const OverlayButton = withAnalyticsContext()(({
     editorView.dispatch(tr);
   }, [editorView, isText, targetElementPos, nodeEnd]);
   const handleConfigureClickWithAnalytics = useCallback(() => {
-    fireLinkClickEvent();
     fireActionClickEvent('configureLink');
+    fireLinkClickEvent();
     handleConfigureClick();
-  }, [fireActionClickEvent, fireLinkClickEvent, handleConfigureClick]);
+  }, [fireLinkClickEvent, handleConfigureClick, fireActionClickEvent]);
   const {
     from,
     to
@@ -89,6 +90,7 @@ export const OverlayButton = withAnalyticsContext()(({
   }, showDropdown ? jsx(Dropdown, {
     testId: testId,
     onConfigureClick: handleConfigureClick,
+    onOpenLinkClick: onOpenLinkClick,
     onDropdownChange: onDropdownChange,
     editorView: editorView
   }) : jsx(Tooltip, {

package/dist/es2019/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -7,6 +7,15 @@ export const useLinkOverlayAnalyticsEvents = () => {
     createAnalyticsEvent
   } = useAnalyticsEvents();
   return useMemo(() => ({
+    /**
+     * When a user clicks go to link or configure link buttons.
+     *
+     * When a link is "wide" the overlay button is the configure button.
+     * When a link is "narrow" the configure button is inside the dropdown.
+     *
+     * @param linkAction 'goToLink' when somebody clicks on the Go to link button
+     * in the chevron menu; 'configureLink' when somebody clicks on the Configure button (whether it's the overlay or in the dropdown)
+     */
     fireActionClickEvent: linkAction => {
       createAnalyticsEvent({
         action: ACTION.CLICKED,
@@ -17,6 +26,9 @@ export const useLinkOverlayAnalyticsEvents = () => {
         }
       }).fire(FabricChannel.media);
     },
+    /**
+     * When a user clicks on the dropdown for a short link, or when a user clicks on the configure button for a wide link.
+     */
     fireLinkClickEvent: () => {
       createAnalyticsEvent({
         action: ACTION.CLICKED,

package/dist/es2019/link/index.js

@@ -9,4 +9,5 @@ export { HyperlinkAddToolbar } from './LinkPicker/HyperlinkAddToolbar';
 export { default as HyperlinkLinkAddToolbar, HyperlinkLinkAddToolbarWithIntl, RECENT_SEARCH_LIST_SIZE } from './LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar';
 export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
 export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
-export { OverlayButton } from './ConfigureLinkOverlay';
+export { OverlayButton } from './ConfigureLinkOverlay';
+export { handleNavigation } from './ConfigureLinkOverlay/handleNavigation';

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 = "87.1.0";
+const packageVersion = "87.2.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -12,7 +12,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "87.1.0";
+const packageVersion = "87.2.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/esm/link/ConfigureLinkOverlay/Dropdown.js

@@ -21,6 +21,7 @@ import { useLinkOverlayAnalyticsEvents } from './useLinkOverlayAnalyticsEvents';
 var SMALL_LINK_TOOLBAR_ANALYTICS_SOURCE = 'smallLinkToolbar';
 var Dropdown = function Dropdown(_ref) {
   var onConfigureClickCallback = _ref.onConfigureClick,
+    onOpenLinkClickCallback = _ref.onOpenLinkClick,
     onDropdownChange = _ref.onDropdownChange,
     editorView = _ref.editorView,
     testId = _ref.testId;
@@ -51,10 +52,11 @@ var Dropdown = function Dropdown(_ref) {
       focusEditor();
     }
   }, [fireToolbarViewEvent, focusEditor, onDropdownChange]);
-  var onGoToLinkClick = useCallback(function () {
+  var onGoToLinkClick = useCallback(function (event) {
     fireActionClickEvent('goToLink');
+    onOpenLinkClickCallback === null || onOpenLinkClickCallback === void 0 || onOpenLinkClickCallback(event);
     focusEditor();
-  }, [fireActionClickEvent, focusEditor]);
+  }, [fireActionClickEvent, focusEditor, onOpenLinkClickCallback]);
   var onConfigureClick = useCallback(function () {
     fireActionClickEvent('configureLink');
     onConfigureClickCallback === null || onConfigureClickCallback === void 0 || onConfigureClickCallback();
@@ -85,6 +87,7 @@ var Dropdown = function Dropdown(_ref) {
       label: goToLinkLabel,
       size: 'medium'
     }),
+    testId: "".concat(testId, "-dropdown-item-open-link"),
     onClick: onGoToLinkClick
   }, goToLinkLabel), jsx(DropdownItem, {
     elemBefore: jsx(PreferencesIcon, {

package/dist/esm/link/ConfigureLinkOverlay/handleNavigation.js

@@ -0,0 +1,37 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, MODE, PLATFORMS } from '../../analytics';
+/**
+ * Function that opens a new page and fires the relevant analytics events
+ */
+export function handleNavigation(_ref) {
+  var url = _ref.url,
+    event = _ref.event,
+    onClickCallback = _ref.onClickCallback,
+    fireAnalyticsEvent = _ref.fireAnalyticsEvent;
+  if (fireAnalyticsEvent) {
+    fireAnalyticsEvent({
+      action: ACTION.VISITED,
+      actionSubject: ACTION_SUBJECT.LINK,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        platform: PLATFORMS.WEB,
+        mode: MODE.EDITOR
+      }
+    });
+  }
+  if (url) {
+    try {
+      onClickCallback === null || onClickCallback === void 0 || onClickCallback({
+        event: event,
+        url: url
+      });
+    } catch (_unused) {}
+    /**
+     * Links should navigate by default in live pages if:
+     * - the link is the direct target of the click event
+     * - default handling wasn't prevented with `event.preventDefault()`
+     */
+    if (!event.defaultPrevented) {
+      window.location.href = url;
+    }
+  }
+}

package/dist/esm/link/ConfigureLinkOverlay/index.js

@@ -35,7 +35,8 @@ export var OverlayButton = withAnalyticsContext()(function (_ref) {
     testId = _ref$testId === void 0 ? 'link-configure-overlay-button' : _ref$testId,
     _ref$targetElementPos = _ref.targetElementPos,
     targetElementPos = _ref$targetElementPos === void 0 ? 0 : _ref$targetElementPos,
-    onDropdownChange = _ref.onDropdownChange;
+    onDropdownChange = _ref.onDropdownChange,
+    onOpenLinkClick = _ref.onOpenLinkClick;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var configureLinkLabel = formatMessage(cardMessages.inlineConfigureLink);
@@ -44,8 +45,8 @@ export var OverlayButton = withAnalyticsContext()(function (_ref) {
     showDropdown = _useState2[0],
     setShowDropdown = _useState2[1];
   var _useLinkOverlayAnalyt = useLinkOverlayAnalyticsEvents(),
-    fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent,
-    fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent;
+    fireActionClickEvent = _useLinkOverlayAnalyt.fireActionClickEvent,
+    fireLinkClickEvent = _useLinkOverlayAnalyt.fireLinkClickEvent;
   useLayoutEffect(function () {
     var _domNode;
     var domNode = editorView.nodeDOM(targetElementPos);
@@ -73,10 +74,10 @@ export var OverlayButton = withAnalyticsContext()(function (_ref) {
     editorView.dispatch(tr);
   }, [editorView, isText, targetElementPos, nodeEnd]);
   var handleConfigureClickWithAnalytics = useCallback(function () {
-    fireLinkClickEvent();
     fireActionClickEvent('configureLink');
+    fireLinkClickEvent();
     handleConfigureClick();
-  }, [fireActionClickEvent, fireLinkClickEvent, handleConfigureClick]);
+  }, [fireLinkClickEvent, handleConfigureClick, fireActionClickEvent]);
   var _editorView$state$sel = editorView.state.selection,
     from = _editorView$state$sel.from,
     to = _editorView$state$sel.to;
@@ -90,6 +91,7 @@ export var OverlayButton = withAnalyticsContext()(function (_ref) {
   }, showDropdown ? jsx(Dropdown, {
     testId: testId,
     onConfigureClick: handleConfigureClick,
+    onOpenLinkClick: onOpenLinkClick,
     onDropdownChange: onDropdownChange,
     editorView: editorView
   }) : jsx(Tooltip, {

package/dist/esm/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.js

@@ -7,6 +7,15 @@ export var useLinkOverlayAnalyticsEvents = function useLinkOverlayAnalyticsEvent
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   return useMemo(function () {
     return {
+      /**
+       * When a user clicks go to link or configure link buttons.
+       *
+       * When a link is "wide" the overlay button is the configure button.
+       * When a link is "narrow" the configure button is inside the dropdown.
+       *
+       * @param linkAction 'goToLink' when somebody clicks on the Go to link button
+       * in the chevron menu; 'configureLink' when somebody clicks on the Configure button (whether it's the overlay or in the dropdown)
+       */
       fireActionClickEvent: function fireActionClickEvent(linkAction) {
         createAnalyticsEvent({
           action: ACTION.CLICKED,
@@ -17,6 +26,9 @@ export var useLinkOverlayAnalyticsEvents = function useLinkOverlayAnalyticsEvent
           }
         }).fire(FabricChannel.media);
       },
+      /**
+       * When a user clicks on the dropdown for a short link, or when a user clicks on the configure button for a wide link.
+       */
       fireLinkClickEvent: function fireLinkClickEvent() {
         createAnalyticsEvent({
           action: ACTION.CLICKED,

package/dist/esm/link/index.js

@@ -9,4 +9,5 @@ export { HyperlinkAddToolbar } from './LinkPicker/HyperlinkAddToolbar';
 export { default as HyperlinkLinkAddToolbar, HyperlinkLinkAddToolbarWithIntl, RECENT_SEARCH_LIST_SIZE } from './LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar';
 export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
 export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
-export { OverlayButton } from './ConfigureLinkOverlay';
+export { OverlayButton } from './ConfigureLinkOverlay';
+export { handleNavigation } from './ConfigureLinkOverlay/handleNavigation';

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 = "87.1.0";
+var packageVersion = "87.2.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -20,7 +20,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.1.0";
+var packageVersion = "87.2.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/types/link/ConfigureLinkOverlay/Dropdown.d.ts

@@ -1,9 +1,15 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MouseEvent } from 'react';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export type OnDropdownChange = (isOpen: boolean) => void;
 export type DropdownProps = {
     /** Callback fired when the Configure dropdown item is clicked */
     onConfigureClick: () => void;
+    /** Callback fired when the Open Link dropdown item is clicked */
+    onOpenLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /** Callback fired when the dropdown is open or close */
     onDropdownChange?: OnDropdownChange;
     editorView: EditorView;

package/dist/types/link/ConfigureLinkOverlay/handleNavigation.d.ts

@@ -0,0 +1,12 @@
+import { type MouseEvent } from 'react';
+import { type AnalyticsEventPayload } from '../../analytics';
+import { type OnClickCallback } from '../../card';
+/**
+ * Function that opens a new page and fires the relevant analytics events
+ */
+export declare function handleNavigation({ url, event, onClickCallback, fireAnalyticsEvent, }: {
+    fireAnalyticsEvent: ((payload: AnalyticsEventPayload) => void | undefined) | undefined;
+    onClickCallback?: OnClickCallback;
+    url: string;
+    event: MouseEvent<HTMLAnchorElement>;
+}): void;

package/dist/types/link/ConfigureLinkOverlay/index.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MouseEvent } from 'react';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type OnDropdownChange } from './Dropdown';
 export interface OverlayButtonProps {
@@ -9,5 +13,9 @@ export interface OverlayButtonProps {
      * Called when the dropdown is open/closed with isOpen state as true and false respectively.
      */
     onDropdownChange?: OnDropdownChange;
+    /**
+     * Called when the open link button in the dropdown is clicked.
+     */
+    onOpenLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 export declare const OverlayButton: import("react").ForwardRefExoticComponent<OverlayButtonProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/dist/types/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts

@@ -1,5 +1,17 @@
 export declare const useLinkOverlayAnalyticsEvents: () => {
-    fireActionClickEvent: (linkAction: string) => void;
+    /**
+     * When a user clicks go to link or configure link buttons.
+     *
+     * When a link is "wide" the overlay button is the configure button.
+     * When a link is "narrow" the configure button is inside the dropdown.
+     *
+     * @param linkAction 'goToLink' when somebody clicks on the Go to link button
+     * in the chevron menu; 'configureLink' when somebody clicks on the Configure button (whether it's the overlay or in the dropdown)
+     */
+    fireActionClickEvent: (linkAction: 'goToLink' | 'configureLink') => void;
+    /**
+     * When a user clicks on the dropdown for a short link, or when a user clicks on the configure button for a wide link.
+     */
     fireLinkClickEvent: () => void;
     fireToolbarViewEvent: () => void;
 };

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

@@ -16,3 +16,4 @@ export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
 export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
 export { OverlayButton } from './ConfigureLinkOverlay';
 export type { OverlayButtonProps } from './ConfigureLinkOverlay';
+export { handleNavigation } from './ConfigureLinkOverlay/handleNavigation';

package/dist/types-ts4.5/link/ConfigureLinkOverlay/Dropdown.d.ts

@@ -1,9 +1,15 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MouseEvent } from 'react';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 export type OnDropdownChange = (isOpen: boolean) => void;
 export type DropdownProps = {
     /** Callback fired when the Configure dropdown item is clicked */
     onConfigureClick: () => void;
+    /** Callback fired when the Open Link dropdown item is clicked */
+    onOpenLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
     /** Callback fired when the dropdown is open or close */
     onDropdownChange?: OnDropdownChange;
     editorView: EditorView;

package/dist/types-ts4.5/link/ConfigureLinkOverlay/handleNavigation.d.ts

@@ -0,0 +1,12 @@
+import { type MouseEvent } from 'react';
+import { type AnalyticsEventPayload } from '../../analytics';
+import { type OnClickCallback } from '../../card';
+/**
+ * Function that opens a new page and fires the relevant analytics events
+ */
+export declare function handleNavigation({ url, event, onClickCallback, fireAnalyticsEvent, }: {
+    fireAnalyticsEvent: ((payload: AnalyticsEventPayload) => void | undefined) | undefined;
+    onClickCallback?: OnClickCallback;
+    url: string;
+    event: MouseEvent<HTMLAnchorElement>;
+}): void;

package/dist/types-ts4.5/link/ConfigureLinkOverlay/index.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type MouseEvent } from 'react';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import { type OnDropdownChange } from './Dropdown';
 export interface OverlayButtonProps {
@@ -9,5 +13,9 @@ export interface OverlayButtonProps {
      * Called when the dropdown is open/closed with isOpen state as true and false respectively.
      */
     onDropdownChange?: OnDropdownChange;
+    /**
+     * Called when the open link button in the dropdown is clicked.
+     */
+    onOpenLinkClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
 }
 export declare const OverlayButton: import("react").ForwardRefExoticComponent<OverlayButtonProps & import("@atlaskit/analytics-next").WithContextProps & import("react").RefAttributes<any>>;

package/dist/types-ts4.5/link/ConfigureLinkOverlay/useLinkOverlayAnalyticsEvents.d.ts

@@ -1,5 +1,17 @@
 export declare const useLinkOverlayAnalyticsEvents: () => {
-    fireActionClickEvent: (linkAction: string) => void;
+    /**
+     * When a user clicks go to link or configure link buttons.
+     *
+     * When a link is "wide" the overlay button is the configure button.
+     * When a link is "narrow" the configure button is inside the dropdown.
+     *
+     * @param linkAction 'goToLink' when somebody clicks on the Go to link button
+     * in the chevron menu; 'configureLink' when somebody clicks on the Configure button (whether it's the overlay or in the dropdown)
+     */
+    fireActionClickEvent: (linkAction: 'goToLink' | 'configureLink') => void;
+    /**
+     * When a user clicks on the dropdown for a short link, or when a user clicks on the configure button for a wide link.
+     */
     fireLinkClickEvent: () => void;
     fireToolbarViewEvent: () => void;
 };

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

@@ -16,3 +16,4 @@ export { sha1 } from './LinkPicker/HyperlinkAddToolbar/utils';
 export { isLinkAtPos, isTextAtPos, getLinkPreferencesURLFromENV } from './utils';
 export { OverlayButton } from './ConfigureLinkOverlay';
 export type { OverlayButtonProps } from './ConfigureLinkOverlay';
+export { handleNavigation } from './ConfigureLinkOverlay/handleNavigation';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "87.1.0",
+	"version": "87.2.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"