@atlaskit/editor-common 94.7.0 → 94.8.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 94.8.0
+
+### Minor Changes
+
+- [#157867](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157867)
+  [`8398a1f0013fc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8398a1f0013fc) -
+  [ux] ED-25331-add-spotlight-to-inline-comment-button
+
+### Patch Changes
+
+- [`ae4b01915f647`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ae4b01915f647) -
+  Fix emoji XSS
+- [#157905](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157905)
+  [`f02486a915690`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f02486a915690) -
+  NO-ISSUE Cleanup unused props and components
+- Updated dependencies
+
 ## 94.7.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -113,6 +113,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/popper/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
         },

package/dist/cjs/messages/annotation.js

@@ -26,5 +26,15 @@ var annotationMessages = exports.annotationMessages = (0, _reactIntlNext.defineM
     id: 'fabric.editor.annotationToolbar',
     defaultMessage: 'Annotation toolbar',
     description: 'A label for a toolbar (UI element) that creates annotations/comments in the document'
+  },
+  createCommentOnInlineNodeSpotlightBody: {
+    id: 'fabric.editor.createCommentOnInlineNodeSpotlight.body',
+    defaultMessage: 'You can now leave comments on inline elements like links, dates, statuses and mentions.',
+    description: 'The body content of the spotlight message that appears when the user can leave comments on inline nodes'
+  },
+  createCommentOnInlineNodeSpotlightAction: {
+    id: 'fabric.editor.createCommentOnInlineNodeSpotlight.action',
+    defaultMessage: 'Got it',
+    description: 'The content of the action button that closes the spotlight'
   }
 });

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 && {}.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 = "94.7.0";
+var packageVersion = "94.8.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/react-node-view/getInlineNodeViewProducer.js

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _analytics = require("../analytics");
+var _isSsr = require("../core-utils/is-ssr");
 var _ErrorBoundary = require("../ui/ErrorBoundary");
 var _utils = require("../utils");
 var _whitespace = require("../whitespace");
@@ -139,6 +140,10 @@ function createNodeView(_ref) {
  * @param node The Prosemirror Node from which to source the attributes
  */
 function setDomAttrs(node, element) {
+  // prevent potential XSS attacks since attributes may contain user input
+  if ((0, _isSsr.isSSR)()) {
+    return;
+  }
   Object.keys(node.attrs || {}).forEach(function (attr) {
     element.setAttribute(attr, node.attrs[attr]);
   });

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

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

package/dist/cjs/ui/FloatingToolbar/Button.js

@@ -6,12 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _Pulse = require("../Pulse/Pulse");
+var _ButtonSpotlightCard = require("./ButtonSpotlightCard");
 var _styles = require("./styles");
 var _excluded = ["buttonStyles"];
 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); }
@@ -29,6 +32,7 @@ var _default = exports.default = function _default(_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     onMount = _ref.onMount,
+    onUnmount = _ref.onUnmount,
     selected = _ref.selected,
     disabled = _ref.disabled,
     href = _ref.href,
@@ -47,20 +51,32 @@ var _default = exports.default = function _default(_ref) {
     areaControls = _ref.areaControls,
     ariaLabel = _ref.ariaLabel,
     isRadioButton = _ref.isRadioButton,
-    pulse = _ref.pulse;
+    pulse = _ref.pulse,
+    spotlightConfig = _ref.spotlightConfig;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? _styles.iconOnlySpacing : {};
   var isButtonPressed = ariaHasPopup ? undefined : selected;
   var ariaChecked = isRadioButton ? isButtonPressed : undefined;
   var ariaPressed = isRadioButton ? undefined : isButtonPressed;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    spotlightReferenceElement = _useState2[0],
+    setSpotlightReferenceElement = _useState2[1];
   (0, _react.useEffect)(function () {
-    if (onMount) {
-      onMount();
-    }
+    onMount === null || onMount === void 0 || onMount();
+    return function () {
+      return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default
+  var onSpotlightTargetClick = spotlightConfig !== null && spotlightConfig !== void 0 && spotlightConfig.isSpotlightOpen ? spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.onTargetClick : undefined;
+  var handleOnClick = (0, _react.useCallback)(function (event) {
+    // fire the spotlight onTargetClick callback if a spotlight is rendered and callback is provided
+    onSpotlightTargetClick === null || onSpotlightTargetClick === void 0 || onSpotlightTargetClick();
+    onClick === null || onClick === void 0 || onClick(event);
+  }, [onClick, onSpotlightTargetClick]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_tooltip.default
   // Only fallback to title for tooltip if title is not shown
   , {
     content: tooltipContent || (iconOnly ? title : undefined),
@@ -71,11 +87,14 @@ var _default = exports.default = function _default(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, /*#__PURE__*/_react.default.createElement(_Pulse.Pulse, {
-    pulse: pulse
+    pulse: pulse || (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.pulse)
   }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: className,
+    ref: function ref(buttonElement) {
+      return setSpotlightReferenceElement(buttonElement);
+    },
     theme: function theme(adgTheme, themeProps) {
       var _adgTheme = adgTheme(themeProps),
         buttonStyles = _adgTheme.buttonStyles,
@@ -101,7 +120,7 @@ var _default = exports.default = function _default(_ref) {
     "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
-    onClick: onClick,
+    onClick: handleOnClick,
     onKeyDown: onKeyDown,
     isSelected: selected,
     isDisabled: disabled,
@@ -114,5 +133,7 @@ var _default = exports.default = function _default(_ref) {
     // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
     ,
     tabIndex: tabIndex
-  }, children))));
+  }, children)))), (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.isSpotlightOpen) && spotlightReferenceElement && /*#__PURE__*/_react.default.createElement(_ButtonSpotlightCard.ButtonSpotlightCard, (0, _extends2.default)({
+    referenceElement: spotlightReferenceElement
+  }, spotlightConfig.spotlightCardOptions)));
 };

package/dist/cjs/ui/FloatingToolbar/ButtonSpotlightCard.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonSpotlightCard = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _onboarding = require("@atlaskit/onboarding");
+var _popper = require("@atlaskit/popper");
+var _excluded = ["referenceElement", "placement"];
+/*
+ * ButtonSpotlightCard is an editor custom spotlight that renders next to a floating toolbar button.
+ * It is built on top of the SpotlightCard component from @atlaskit/onboarding.
+ * It avoids the issue of the native atlaskit Spotlight component rendering outside the editor bounds and takes focus away from the editor.
+*/
+var ButtonSpotlightCard = exports.ButtonSpotlightCard = function ButtonSpotlightCard(props) {
+  var referenceElement = props.referenceElement,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'top-start' : _props$placement,
+    spotlightCardProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+    referenceElement: referenceElement,
+    placement: placement,
+    strategy: "absolute"
+  }, function (_ref) {
+    var ref = _ref.ref,
+      style = _ref.style;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      _react.default.createElement("div", {
+        ref: ref,
+        style: style
+      }, /*#__PURE__*/_react.default.createElement(_onboarding.SpotlightCard, spotlightCardProps))
+    );
+  });
+};

package/dist/cjs/ui-menu/DropdownMenu/index.js

@@ -182,11 +182,8 @@ var DropdownMenuWrapper = exports.default = /*#__PURE__*/function (_PureComponen
         closeOnTab: true
       }), (0, _react2.jsx)(DropListWithOutsideListeners, {
         isOpen: true,
-        appearance: "tall",
         position: popupPlacement.join(' '),
-        shouldFlip: false,
         shouldFitContainer: true,
-        isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
         handleEnterKeydown: function handleEnterKeydown(e) {

package/dist/es2019/messages/annotation.js

@@ -20,5 +20,15 @@ export const annotationMessages = defineMessages({
     id: 'fabric.editor.annotationToolbar',
     defaultMessage: 'Annotation toolbar',
     description: 'A label for a toolbar (UI element) that creates annotations/comments in the document'
+  },
+  createCommentOnInlineNodeSpotlightBody: {
+    id: 'fabric.editor.createCommentOnInlineNodeSpotlight.body',
+    defaultMessage: 'You can now leave comments on inline elements like links, dates, statuses and mentions.',
+    description: 'The body content of the spotlight message that appears when the user can leave comments on inline nodes'
+  },
+  createCommentOnInlineNodeSpotlightAction: {
+    id: 'fabric.editor.createCommentOnInlineNodeSpotlight.action',
+    defaultMessage: 'Got it',
+    description: 'The content of the action button that closes the spotlight'
   }
 });

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

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -8,6 +8,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { isSSR } from '../core-utils/is-ssr';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { analyticsEventKey, browser, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
@@ -134,6 +135,10 @@ function createNodeView({
  * @param node The Prosemirror Node from which to source the attributes
  */
 function setDomAttrs(node, element) {
+  // prevent potential XSS attacks since attributes may contain user input
+  if (isSSR()) {
+    return;
+  }
   Object.keys(node.attrs || {}).forEach(attr => {
     element.setAttribute(attr, node.attrs[attr]);
   });

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 = "94.7.0";
+const packageVersion = "94.8.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/FloatingToolbar/Button.js

@@ -1,7 +1,9 @@
-import React, { useEffect } from 'react';
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useState } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import Tooltip from '@atlaskit/tooltip';
 import { Pulse } from '../Pulse/Pulse';
+import { ButtonSpotlightCard } from './ButtonSpotlightCard';
 import { getButtonStyles, iconOnlySpacing } from './styles';
 export default (({
   title,
@@ -14,6 +16,7 @@ export default (({
   onFocus,
   onBlur,
   onMount,
+  onUnmount,
   selected,
   disabled,
   href,
@@ -30,7 +33,8 @@ export default (({
   areaControls,
   ariaLabel,
   isRadioButton,
-  pulse
+  pulse,
+  spotlightConfig
 }) => {
   // Check if there's only an icon and add additional styles
   const iconOnly = (icon || iconAfter) && !children;
@@ -38,13 +42,19 @@ export default (({
   const isButtonPressed = ariaHasPopup ? undefined : selected;
   const ariaChecked = isRadioButton ? isButtonPressed : undefined;
   const ariaPressed = isRadioButton ? undefined : isButtonPressed;
+  const [spotlightReferenceElement, setSpotlightReferenceElement] = useState(null);
   useEffect(() => {
-    if (onMount) {
-      onMount();
-    }
+    onMount === null || onMount === void 0 ? void 0 : onMount();
+    return () => onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(Tooltip
+  const onSpotlightTargetClick = spotlightConfig !== null && spotlightConfig !== void 0 && spotlightConfig.isSpotlightOpen ? spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.onTargetClick : undefined;
+  const handleOnClick = useCallback(event => {
+    // fire the spotlight onTargetClick callback if a spotlight is rendered and callback is provided
+    onSpotlightTargetClick === null || onSpotlightTargetClick === void 0 ? void 0 : onSpotlightTargetClick();
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+  }, [onClick, onSpotlightTargetClick]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip
   // Only fallback to title for tooltip if title is not shown
   , {
     content: tooltipContent || (iconOnly ? title : undefined),
@@ -55,11 +65,12 @@ export default (({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, /*#__PURE__*/React.createElement(Pulse, {
-    pulse: pulse
+    pulse: pulse || (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.pulse)
   }, /*#__PURE__*/React.createElement(Button
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: className,
+    ref: buttonElement => setSpotlightReferenceElement(buttonElement),
     theme: (adgTheme, themeProps) => {
       const {
         buttonStyles,
@@ -91,7 +102,7 @@ export default (({
     "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
-    onClick: onClick,
+    onClick: handleOnClick,
     onKeyDown: onKeyDown,
     isSelected: selected,
     isDisabled: disabled,
@@ -104,5 +115,7 @@ export default (({
     // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
     ,
     tabIndex: tabIndex
-  }, children))));
+  }, children)))), (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.isSpotlightOpen) && spotlightReferenceElement && /*#__PURE__*/React.createElement(ButtonSpotlightCard, _extends({
+    referenceElement: spotlightReferenceElement
+  }, spotlightConfig.spotlightCardOptions)));
 });

package/dist/es2019/ui/FloatingToolbar/ButtonSpotlightCard.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SpotlightCard } from '@atlaskit/onboarding';
+import { Popper } from '@atlaskit/popper';
+/*
+ * ButtonSpotlightCard is an editor custom spotlight that renders next to a floating toolbar button.
+ * It is built on top of the SpotlightCard component from @atlaskit/onboarding.
+ * It avoids the issue of the native atlaskit Spotlight component rendering outside the editor bounds and takes focus away from the editor.
+*/
+export const ButtonSpotlightCard = props => {
+  const {
+    referenceElement,
+    placement = 'top-start',
+    ...spotlightCardProps
+  } = props;
+  return /*#__PURE__*/React.createElement(Popper, {
+    referenceElement: referenceElement,
+    placement: placement,
+    strategy: "absolute"
+  }, ({
+    ref,
+    style
+  }) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  React.createElement("div", {
+    ref: ref,
+    style: style
+  }, /*#__PURE__*/React.createElement(SpotlightCard, spotlightCardProps)));
+};

package/dist/es2019/ui-menu/DropdownMenu/index.js

@@ -184,11 +184,8 @@ export default class DropdownMenuWrapper extends PureComponent {
       closeOnTab: true
     }), jsx(DropListWithOutsideListeners, {
       isOpen: true,
-      appearance: "tall",
       position: popupPlacement.join(' '),
-      shouldFlip: false,
       shouldFitContainer: true,
-      isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
       handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
       handleEnterKeydown: e => {

package/dist/esm/messages/annotation.js

@@ -20,5 +20,15 @@ export var annotationMessages = defineMessages({
     id: 'fabric.editor.annotationToolbar',
     defaultMessage: 'Annotation toolbar',
     description: 'A label for a toolbar (UI element) that creates annotations/comments in the document'
+  },
+  createCommentOnInlineNodeSpotlightBody: {
+    id: 'fabric.editor.createCommentOnInlineNodeSpotlight.body',
+    defaultMessage: 'You can now leave comments on inline elements like links, dates, statuses and mentions.',
+    description: 'The body content of the spotlight message that appears when the user can leave comments on inline nodes'
+  },
+  createCommentOnInlineNodeSpotlightAction: {
+    id: 'fabric.editor.createCommentOnInlineNodeSpotlight.action',
+    defaultMessage: 'Got it',
+    description: 'The content of the action button that closes the spotlight'
   }
 });

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 = "94.7.0";
+var packageVersion = "94.8.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/react-node-view/getInlineNodeViewProducer.js

@@ -11,6 +11,7 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { isSSR } from '../core-utils/is-ssr';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { analyticsEventKey, browser, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { ZERO_WIDTH_SPACE } from '../whitespace';
@@ -134,6 +135,10 @@ function createNodeView(_ref) {
  * @param node The Prosemirror Node from which to source the attributes
  */
 function setDomAttrs(node, element) {
+  // prevent potential XSS attacks since attributes may contain user input
+  if (isSSR()) {
+    return;
+  }
   Object.keys(node.attrs || {}).forEach(function (attr) {
     element.setAttribute(attr, node.attrs[attr]);
   });

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

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

package/dist/esm/ui/FloatingToolbar/Button.js

@@ -1,12 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["buttonStyles"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import Tooltip from '@atlaskit/tooltip';
 import { Pulse } from '../Pulse/Pulse';
+import { ButtonSpotlightCard } from './ButtonSpotlightCard';
 import { getButtonStyles, iconOnlySpacing } from './styles';
 export default (function (_ref) {
   var title = _ref.title,
@@ -19,6 +22,7 @@ export default (function (_ref) {
     onFocus = _ref.onFocus,
     onBlur = _ref.onBlur,
     onMount = _ref.onMount,
+    onUnmount = _ref.onUnmount,
     selected = _ref.selected,
     disabled = _ref.disabled,
     href = _ref.href,
@@ -37,20 +41,32 @@ export default (function (_ref) {
     areaControls = _ref.areaControls,
     ariaLabel = _ref.ariaLabel,
     isRadioButton = _ref.isRadioButton,
-    pulse = _ref.pulse;
+    pulse = _ref.pulse,
+    spotlightConfig = _ref.spotlightConfig;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? iconOnlySpacing : {};
   var isButtonPressed = ariaHasPopup ? undefined : selected;
   var ariaChecked = isRadioButton ? isButtonPressed : undefined;
   var ariaPressed = isRadioButton ? undefined : isButtonPressed;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    spotlightReferenceElement = _useState2[0],
+    setSpotlightReferenceElement = _useState2[1];
   useEffect(function () {
-    if (onMount) {
-      onMount();
-    }
+    onMount === null || onMount === void 0 || onMount();
+    return function () {
+      return onUnmount === null || onUnmount === void 0 ? void 0 : onUnmount();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(Tooltip
+  var onSpotlightTargetClick = spotlightConfig !== null && spotlightConfig !== void 0 && spotlightConfig.isSpotlightOpen ? spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.onTargetClick : undefined;
+  var handleOnClick = useCallback(function (event) {
+    // fire the spotlight onTargetClick callback if a spotlight is rendered and callback is provided
+    onSpotlightTargetClick === null || onSpotlightTargetClick === void 0 || onSpotlightTargetClick();
+    onClick === null || onClick === void 0 || onClick(event);
+  }, [onClick, onSpotlightTargetClick]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip
   // Only fallback to title for tooltip if title is not shown
   , {
     content: tooltipContent || (iconOnly ? title : undefined),
@@ -61,11 +77,14 @@ export default (function (_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
   }, /*#__PURE__*/React.createElement(Pulse, {
-    pulse: pulse
+    pulse: pulse || (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.pulse)
   }, /*#__PURE__*/React.createElement(Button
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: className,
+    ref: function ref(buttonElement) {
+      return setSpotlightReferenceElement(buttonElement);
+    },
     theme: function theme(adgTheme, themeProps) {
       var _adgTheme = adgTheme(themeProps),
         buttonStyles = _adgTheme.buttonStyles,
@@ -91,7 +110,7 @@ export default (function (_ref) {
     "aria-haspopup": ariaHasPopup,
     iconBefore: icon || undefined,
     iconAfter: iconAfter,
-    onClick: onClick,
+    onClick: handleOnClick,
     onKeyDown: onKeyDown,
     isSelected: selected,
     isDisabled: disabled,
@@ -104,5 +123,7 @@ export default (function (_ref) {
     // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
     ,
     tabIndex: tabIndex
-  }, children))));
+  }, children)))), (spotlightConfig === null || spotlightConfig === void 0 ? void 0 : spotlightConfig.isSpotlightOpen) && spotlightReferenceElement && /*#__PURE__*/React.createElement(ButtonSpotlightCard, _extends({
+    referenceElement: spotlightReferenceElement
+  }, spotlightConfig.spotlightCardOptions)));
 });

package/dist/esm/ui/FloatingToolbar/ButtonSpotlightCard.js

@@ -0,0 +1,32 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["referenceElement", "placement"];
+import React from 'react';
+import { SpotlightCard } from '@atlaskit/onboarding';
+import { Popper } from '@atlaskit/popper';
+/*
+ * ButtonSpotlightCard is an editor custom spotlight that renders next to a floating toolbar button.
+ * It is built on top of the SpotlightCard component from @atlaskit/onboarding.
+ * It avoids the issue of the native atlaskit Spotlight component rendering outside the editor bounds and takes focus away from the editor.
+*/
+export var ButtonSpotlightCard = function ButtonSpotlightCard(props) {
+  var referenceElement = props.referenceElement,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'top-start' : _props$placement,
+    spotlightCardProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement(Popper, {
+    referenceElement: referenceElement,
+    placement: placement,
+    strategy: "absolute"
+  }, function (_ref) {
+    var ref = _ref.ref,
+      style = _ref.style;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+      React.createElement("div", {
+        ref: ref,
+        style: style
+      }, /*#__PURE__*/React.createElement(SpotlightCard, spotlightCardProps))
+    );
+  });
+};

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -171,11 +171,8 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         closeOnTab: true
       }), jsx(DropListWithOutsideListeners, {
         isOpen: true,
-        appearance: "tall",
         position: popupPlacement.join(' '),
-        shouldFlip: false,
         shouldFitContainer: true,
-        isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
         handleEnterKeydown: function handleEnterKeydown(e) {

package/dist/types/messages/annotation.d.ts

@@ -19,4 +19,14 @@ export declare const annotationMessages: {
         defaultMessage: string;
         description: string;
     };
+    createCommentOnInlineNodeSpotlightBody: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    createCommentOnInlineNodeSpotlightAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/types/floating-toolbar.d.ts

@@ -4,6 +4,8 @@ import type { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EmojiId } from '@atlaskit/emoji/types';
+import type { SpotlightCard } from '@atlaskit/onboarding';
+import type { Placement } from '@atlaskit/popper';
 import type { TooltipProps } from '@atlaskit/tooltip';
 import type { DispatchAnalyticsEvent } from '../analytics/types/dispatch-analytics-event';
 import type { ProviderFactory } from '../provider-factory';
@@ -94,6 +96,14 @@ export type ConfirmationDialogProps = {
     options?: ConfirmDialogOptions;
     testId?: string;
 };
+export type FloatingToolbarButtonSpotlightConfig = {
+    isSpotlightOpen: boolean;
+    pulse?: boolean;
+    onTargetClick?: () => void;
+    spotlightCardOptions: React.ComponentProps<typeof SpotlightCard> & {
+        placement?: Placement;
+    };
+};
 export type FloatingToolbarCopyButton = {
     type: 'copy-button';
     items: Array<FloatingToolbarSeparator | MarkOptions | NodeOptions>;
@@ -112,6 +122,7 @@ export type FloatingToolbarButton<T extends {}> = {
     onFocus?: T;
     onBlur?: T;
     onMount?: () => void;
+    onUnmount?: () => void;
     icon?: Icon;
     iconFallback?: Icon;
     selected?: boolean;
@@ -134,6 +145,7 @@ export type FloatingToolbarButton<T extends {}> = {
     supportsViewMode?: boolean;
     /** If true, the component will have pulse onboarding effect around it. */
     pulse?: boolean;
+    spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
 };
 export type FloatingToolbarInput<T extends {}> = {
     id: string;

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

@@ -12,7 +12,7 @@ export type { FeatureFlags, FeatureFlagKey, GetEditorFeatureFlags } from './feat
 export type { Browsers, Range, DisableSpellcheckByBrowser } from './supported-browsers';
 export type { EditorContainerWidth, GetEditorContainerWidth } from './editor-container-width';
 export type { EmptyStateHandler, EmptyStateHandlerParams } from './empty-state-handler';
-export type { RenderOptionsPropsT, DropdownOptionT, DropdownOptions, SelectOption, ButtonAppearance, Icon, RenderOptionsProps, AlignType, ConfirmDialogChildInfo, ConfirmDialogOptions, ConfirmationDialogProps, FloatingToolbarButton, FloatingToolbarCopyButton, FloatingToolbarInput, FloatingToolbarCustom, FloatingToolbarListPicker, FloatingToolbarColorPicker, FloatingToolbarEmojiPicker, FloatingToolbarDatePicker, FloatingToolbarSelect, FloatingToolbarSeparator, FloatingToolbarDropdown, FloatingToolbarFallbackItem, FloatingToolbarItem, FloatingToolbarConfig, FloatingToolbarHandler, } from './floating-toolbar';
+export type { RenderOptionsPropsT, DropdownOptionT, DropdownOptions, SelectOption, ButtonAppearance, Icon, RenderOptionsProps, AlignType, ConfirmDialogChildInfo, ConfirmDialogOptions, ConfirmationDialogProps, FloatingToolbarButton, FloatingToolbarCopyButton, FloatingToolbarInput, FloatingToolbarCustom, FloatingToolbarListPicker, FloatingToolbarColorPicker, FloatingToolbarEmojiPicker, FloatingToolbarDatePicker, FloatingToolbarSelect, FloatingToolbarSeparator, FloatingToolbarDropdown, FloatingToolbarFallbackItem, FloatingToolbarItem, FloatingToolbarConfig, FloatingToolbarHandler, FloatingToolbarButtonSpotlightConfig, } from './floating-toolbar';
 export type { MarkOptions, NodeOptions } from './copy-button';
 export type { ContextPanelHandler } from './context-panel';
 export type { EditorAppearance } from './editor-appearance';

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

@@ -6,9 +6,6 @@ import type { ReactNode } from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props extends WithAnalyticsEventsProps {
     isOpen?: boolean;
-    appearance?: string;
-    shouldFlip?: boolean;
-    isTriggerNotTabbable?: boolean;
     trigger?: React.ReactNode;
     position: string;
     onOpenChange?: (event: OpenChangedEvent) => void;
@@ -23,5 +20,5 @@ export type OpenChangedEvent = {
     isOpen: boolean;
     event: MouseEvent | KeyboardEvent;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "appearance" | "position" | "key" | "id" | "children" | "testId" | "analyticsContext" | "shouldFitContainer" | "onPositioned" | "isOpen" | "shouldFlip" | "isTriggerNotTabbable" | "trigger" | "onOpenChange" | "onDroplistRef"> & import("react").RefAttributes<any>>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "position" | "key" | "id" | "children" | "testId" | "analyticsContext" | "shouldFitContainer" | "onPositioned" | "isOpen" | "trigger" | "onOpenChange" | "onDroplistRef"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/ui/FloatingToolbar/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type TooltipProps } from '@atlaskit/tooltip';
 import type { ButtonAppearance } from '../../types';
+import type { FloatingToolbarButtonSpotlightConfig } from '../../types/floating-toolbar';
 export type { ButtonAppearance };
 export interface Props {
     title?: string;
@@ -13,6 +14,7 @@ export interface Props {
     onFocus?: <T>(event: React.FocusEvent<T>) => void;
     onBlur?: <T>(event: React.FocusEvent<T>) => void;
     onMount?: () => void;
+    onUnmount?: () => void;
     selected?: boolean;
     disabled?: boolean;
     appearance?: ButtonAppearance;
@@ -31,6 +33,7 @@ export interface Props {
     isRadioButton?: boolean;
     /** If true, the component will have pulse onboarding effect around it. */
     pulse?: boolean;
+    spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
 }
-declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMount, selected, disabled, href, target, appearance, children, className, tooltipContent, tooltipStyle, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, pulse, }: Props) => JSX.Element;
+declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMount, onUnmount, selected, disabled, href, target, appearance, children, className, tooltipContent, tooltipStyle, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, pulse, spotlightConfig, }: Props) => JSX.Element;
 export default _default;

package/dist/types/ui/FloatingToolbar/ButtonSpotlightCard.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from 'react';
+import { SpotlightCard } from '@atlaskit/onboarding';
+import { type Placement } from '@atlaskit/popper';
+type PropsFromSpotlightCard = ComponentProps<typeof SpotlightCard>;
+export type ButtonSpotlightCardProps = PropsFromSpotlightCard & {
+    referenceElement: HTMLElement;
+    placement?: Placement;
+};
+export declare const ButtonSpotlightCard: (props: ButtonSpotlightCardProps) => JSX.Element;
+export {};

package/dist/types-ts4.5/messages/annotation.d.ts

@@ -19,4 +19,14 @@ export declare const annotationMessages: {
         defaultMessage: string;
         description: string;
     };
+    createCommentOnInlineNodeSpotlightBody: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    createCommentOnInlineNodeSpotlightAction: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/types/floating-toolbar.d.ts

@@ -4,6 +4,8 @@ import type { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { EmojiId } from '@atlaskit/emoji/types';
+import type { SpotlightCard } from '@atlaskit/onboarding';
+import type { Placement } from '@atlaskit/popper';
 import type { TooltipProps } from '@atlaskit/tooltip';
 import type { DispatchAnalyticsEvent } from '../analytics/types/dispatch-analytics-event';
 import type { ProviderFactory } from '../provider-factory';
@@ -94,6 +96,14 @@ export type ConfirmationDialogProps = {
     options?: ConfirmDialogOptions;
     testId?: string;
 };
+export type FloatingToolbarButtonSpotlightConfig = {
+    isSpotlightOpen: boolean;
+    pulse?: boolean;
+    onTargetClick?: () => void;
+    spotlightCardOptions: React.ComponentProps<typeof SpotlightCard> & {
+        placement?: Placement;
+    };
+};
 export type FloatingToolbarCopyButton = {
     type: 'copy-button';
     items: Array<FloatingToolbarSeparator | MarkOptions | NodeOptions>;
@@ -112,6 +122,7 @@ export type FloatingToolbarButton<T extends {}> = {
     onFocus?: T;
     onBlur?: T;
     onMount?: () => void;
+    onUnmount?: () => void;
     icon?: Icon;
     iconFallback?: Icon;
     selected?: boolean;
@@ -134,6 +145,7 @@ export type FloatingToolbarButton<T extends {}> = {
     supportsViewMode?: boolean;
     /** If true, the component will have pulse onboarding effect around it. */
     pulse?: boolean;
+    spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
 };
 export type FloatingToolbarInput<T extends {}> = {
     id: string;

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

@@ -12,7 +12,7 @@ export type { FeatureFlags, FeatureFlagKey, GetEditorFeatureFlags } from './feat
 export type { Browsers, Range, DisableSpellcheckByBrowser } from './supported-browsers';
 export type { EditorContainerWidth, GetEditorContainerWidth } from './editor-container-width';
 export type { EmptyStateHandler, EmptyStateHandlerParams } from './empty-state-handler';
-export type { RenderOptionsPropsT, DropdownOptionT, DropdownOptions, SelectOption, ButtonAppearance, Icon, RenderOptionsProps, AlignType, ConfirmDialogChildInfo, ConfirmDialogOptions, ConfirmationDialogProps, FloatingToolbarButton, FloatingToolbarCopyButton, FloatingToolbarInput, FloatingToolbarCustom, FloatingToolbarListPicker, FloatingToolbarColorPicker, FloatingToolbarEmojiPicker, FloatingToolbarDatePicker, FloatingToolbarSelect, FloatingToolbarSeparator, FloatingToolbarDropdown, FloatingToolbarFallbackItem, FloatingToolbarItem, FloatingToolbarConfig, FloatingToolbarHandler, } from './floating-toolbar';
+export type { RenderOptionsPropsT, DropdownOptionT, DropdownOptions, SelectOption, ButtonAppearance, Icon, RenderOptionsProps, AlignType, ConfirmDialogChildInfo, ConfirmDialogOptions, ConfirmationDialogProps, FloatingToolbarButton, FloatingToolbarCopyButton, FloatingToolbarInput, FloatingToolbarCustom, FloatingToolbarListPicker, FloatingToolbarColorPicker, FloatingToolbarEmojiPicker, FloatingToolbarDatePicker, FloatingToolbarSelect, FloatingToolbarSeparator, FloatingToolbarDropdown, FloatingToolbarFallbackItem, FloatingToolbarItem, FloatingToolbarConfig, FloatingToolbarHandler, FloatingToolbarButtonSpotlightConfig, } from './floating-toolbar';
 export type { MarkOptions, NodeOptions } from './copy-button';
 export type { ContextPanelHandler } from './context-panel';
 export type { EditorAppearance } from './editor-appearance';

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

@@ -6,9 +6,6 @@ import type { ReactNode } from 'react';
 import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export interface Props extends WithAnalyticsEventsProps {
     isOpen?: boolean;
-    appearance?: string;
-    shouldFlip?: boolean;
-    isTriggerNotTabbable?: boolean;
     trigger?: React.ReactNode;
     position: string;
     onOpenChange?: (event: OpenChangedEvent) => void;
@@ -23,5 +20,5 @@ export type OpenChangedEvent = {
     isOpen: boolean;
     event: MouseEvent | KeyboardEvent;
 };
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "appearance" | "position" | "key" | "id" | "children" | "testId" | "analyticsContext" | "shouldFitContainer" | "onPositioned" | "isOpen" | "shouldFlip" | "isTriggerNotTabbable" | "trigger" | "onOpenChange" | "onDroplistRef"> & import("react").RefAttributes<any>>;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "position" | "key" | "id" | "children" | "testId" | "analyticsContext" | "shouldFitContainer" | "onPositioned" | "isOpen" | "trigger" | "onOpenChange" | "onDroplistRef"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/ui/FloatingToolbar/Button.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type TooltipProps } from '@atlaskit/tooltip';
 import type { ButtonAppearance } from '../../types';
+import type { FloatingToolbarButtonSpotlightConfig } from '../../types/floating-toolbar';
 export type { ButtonAppearance };
 export interface Props {
     title?: string;
@@ -13,6 +14,7 @@ export interface Props {
     onFocus?: <T>(event: React.FocusEvent<T>) => void;
     onBlur?: <T>(event: React.FocusEvent<T>) => void;
     onMount?: () => void;
+    onUnmount?: () => void;
     selected?: boolean;
     disabled?: boolean;
     appearance?: ButtonAppearance;
@@ -31,6 +33,7 @@ export interface Props {
     isRadioButton?: boolean;
     /** If true, the component will have pulse onboarding effect around it. */
     pulse?: boolean;
+    spotlightConfig?: FloatingToolbarButtonSpotlightConfig;
 }
-declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMount, selected, disabled, href, target, appearance, children, className, tooltipContent, tooltipStyle, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, pulse, }: Props) => JSX.Element;
+declare const _default: ({ title, icon, iconAfter, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, onMount, onUnmount, selected, disabled, href, target, appearance, children, className, tooltipContent, tooltipStyle, testId, hideTooltipOnClick, ariaHasPopup, tabIndex, areaControls, ariaLabel, isRadioButton, pulse, spotlightConfig, }: Props) => JSX.Element;
 export default _default;

package/dist/types-ts4.5/ui/FloatingToolbar/ButtonSpotlightCard.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentProps } from 'react';
+import { SpotlightCard } from '@atlaskit/onboarding';
+import { type Placement } from '@atlaskit/popper';
+type PropsFromSpotlightCard = ComponentProps<typeof SpotlightCard>;
+export type ButtonSpotlightCardProps = PropsFromSpotlightCard & {
+    referenceElement: HTMLElement;
+    placement?: Placement;
+};
+export declare const ButtonSpotlightCard: (props: ButtonSpotlightCardProps) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "94.7.0",
+	"version": "94.8.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -135,13 +135,14 @@
 		"@atlaskit/media-client-react": "^2.2.0",
 		"@atlaskit/media-common": "^11.7.0",
 		"@atlaskit/media-file-preview": "^0.9.0",
-		"@atlaskit/media-picker": "^66.7.0",
+		"@atlaskit/media-picker": "^67.0.0",
 		"@atlaskit/media-ui": "^26.0.0",
 		"@atlaskit/media-viewer": "49.2.3",
 		"@atlaskit/mention": "^23.3.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/onboarding": "^11.16.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/profilecard": "^20.8.0",
 		"@atlaskit/section-message": "^6.6.0",