@atlaskit/editor-common 93.1.5 → 93.2.0

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

@@ -195,9 +195,9 @@ export default class DropdownMenuWrapper extends PureComponent {
       shouldFitContainer: true,
       isTriggerNotTabbable: true,
       handleClickOutside: this.handleClose,
-      handleEscapeKeydown: fg('platform-editor-a11y-image-border-options-dropdown') ? handleEscapeKeydown || this.handleCloseAndFocus : this.handleCloseAndFocus,
+      handleEscapeKeydown: handleEscapeKeydown || this.handleCloseAndFocus,
       handleEnterKeydown: e => {
-        if (fg('platform_editor_a11y_table_context_menu') || fg('platform-editor-a11y-image-border-options-dropdown')) {
+        if (fg('platform_editor_a11y_table_context_menu')) {
           if (!allowEnterDefaultBehavior) {
             e.preventDefault();
           }
@@ -305,27 +305,12 @@ export function DropdownMenuItem({
   const _handleSubmenuActive = event => {
     setSubmenuActive(Boolean(event.target instanceof HTMLElement && event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`)));
   };
-  let ariaLabel;
-  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
-    ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
-  } else {
-    ariaLabel = item['aria-label'] || String(item.content);
-  }
-  let testId;
-  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
-    testId = item['data-testid'] || `dropdown-item__${item.content}`;
-  } else {
-    testId = `dropdown-item__${String(item.content)}`;
-  }
+  const ariaLabel = item['aria-label'] === '' ? undefined : item['aria-label'] || String(item.content);
+  const testId = item['data-testid'] || `dropdown-item__${item.content}`;
 
   // From time to time we don't want to have any tabIndex on item wrapper
   // especially when we pass any interactive element as a item.content
-  let tabIndex;
-  if (fg('platform-editor-a11y-image-border-options-dropdown')) {
-    tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
-  } else {
-    tabIndex = -1;
-  }
+  const tabIndex = item.wrapperTabIndex === null ? undefined : item.wrapperTabIndex || -1;
   const dropListItem = jsx("div", {
     css: () => buttonStyles(item.isActive, submenuActive),
     tabIndex: tabIndex,

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

@@ -8,7 +8,6 @@ import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { ELEMENT_BROWSER_ID } from '../../element-browser';
 import { fullPageMessages as messages } from '../../messages';
 import { EDIT_AREA_ID } from '../../ui';
@@ -115,7 +114,7 @@ export const ToolbarArrowKeyNavigationProvider = ({
      * @param event
      */
     const handleKeyDown = event => {
-      var _document$querySelect, _document$querySelect2, _wrapperRef$current2;
+      var _document$querySelect, _document$querySelect2, _wrapperRef$current, _wrapperRef$current2;
       // To trap the focus inside the horizontal toolbar for left and right arrow keys
       const targetElement = event.target;
       if (targetElement instanceof HTMLElement && !targetElement.closest(`${childComponentSelector}`)) {
@@ -129,13 +128,10 @@ export const ToolbarArrowKeyNavigationProvider = ({
         // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
         return;
       }
-      if (fg('editor-fix-esc-main-toolbar-navigation')) {
-        var _wrapperRef$current;
-        const elementBrowser = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector(`#${ELEMENT_BROWSER_ID}`);
-        if (elementBrowser) {
-          // if element browser is open, then arrow keys will be handled by MenuArrowKeyNavigationProvider
-          return;
-        }
+      const elementBrowser = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector(`#${ELEMENT_BROWSER_ID}`);
+      if (elementBrowser) {
+        // if element browser is open, then arrow keys will be handled by MenuArrowKeyNavigationProvider
+        return;
       }
       const filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
       if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {

package/dist/esm/analytics/types/engagement-platform-events.js

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

package/dist/esm/analytics/types/enums.js

@@ -253,6 +253,7 @@ export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {
   ACTION_SUBJECT["ELEMENT"] = "element";
   ACTION_SUBJECT["CONTEXT_MENU"] = "contextMenu";
   ACTION_SUBJECT["INLINE_DIALOG"] = "inlineDialog";
+  ACTION_SUBJECT["ENGAGEMENT_PLATFORM"] = "engagementPlatform";
   return ACTION_SUBJECT;
 }({});
 export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
@@ -274,6 +275,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["CODE_BLOCK"] = "codeBlock";
   ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
   ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";
+  ACTION_SUBJECT_ID["COPY_LINK_TO_ANCHOR"] = "copyLinkToAnchor";
   ACTION_SUBJECT_ID["CREATE_INLINE_COMMENT_FROM_HIGHLIGHT_ACTIONS_MENU"] = "createInlineCommentFromHighlightActionsMenu";
   ACTION_SUBJECT_ID["DATE"] = "date";
   ACTION_SUBJECT_ID["DATE_DAY"] = "day";

package/dist/esm/element-browser/components/StatelessElementBrowser.js

@@ -11,7 +11,6 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
 import { DEVICE_BREAKPOINT_NUMBERS, ELEMENT_BROWSER_ID, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
 import useContainerWidth from '../hooks/use-container-width';
@@ -215,7 +214,7 @@ function StatelessElementBrowser(props) {
   return jsx("div", {
     css: wrapper,
     "data-testid": "element-browser",
-    id: fg('editor-fix-esc-main-toolbar-navigation') ? ELEMENT_BROWSER_ID : undefined
+    id: ELEMENT_BROWSER_ID
   }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,

package/dist/esm/extensibility/ExtensionComponent.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,23 +9,31 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["extensionProvider"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { Component } from 'react';
+/* eslint-disable @repo/internal/react/no-class-components */
+import React, { Component, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import memoizeOne from 'memoize-one';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getExtensionModuleNodePrivateProps, getNodeRenderer } from '../extensions';
 import { getExtensionRenderer } from '../utils';
 import Extension from './Extension/Extension';
 import InlineExtension from './Extension/InlineExtension';
 import MultiBodiedExtension from './MultiBodiedExtension';
-export var ExtensionComponent = /*#__PURE__*/function (_Component) {
-  _inherits(ExtensionComponent, _Component);
-  var _super = _createSuper(ExtensionComponent);
-  function ExtensionComponent() {
+
+/* temporary type until FG cleaned up */
+
+/* temporary type until FG cleaned up */
+
+export var ExtensionComponentOld = /*#__PURE__*/function (_Component) {
+  _inherits(ExtensionComponentOld, _Component);
+  var _super = _createSuper(ExtensionComponentOld);
+  function ExtensionComponentOld() {
     var _this;
-    _classCallCheck(this, ExtensionComponent);
+    _classCallCheck(this, ExtensionComponentOld);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -146,7 +157,7 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(ExtensionComponent, [{
+  _createClass(ExtensionComponentOld, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.mounted = true;
@@ -264,5 +275,251 @@ export var ExtensionComponent = /*#__PURE__*/function (_Component) {
       return null;
     }
   }]);
-  return ExtensionComponent;
-}(Component);
+  return ExtensionComponentOld;
+}(Component);
+export var ExtensionComponentNew = function ExtensionComponentNew(props) {
+  var extensionProviderResolver = props.extensionProvider,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(undefined),
+    _useState2 = _slicedToArray(_useState, 2),
+    extensionProvider = _useState2[0],
+    setExtensionProvider = _useState2[1];
+  var mountedRef = useRef(true);
+  useLayoutEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  useEffect(function () {
+    extensionProviderResolver === null || extensionProviderResolver === void 0 || extensionProviderResolver.then(function (provider) {
+      if (mountedRef.current) {
+        setExtensionProvider(provider);
+      }
+    });
+  }, [extensionProviderResolver]);
+  return /*#__PURE__*/React.createElement(ExtensionComponentInner, _extends({}, restProps, {
+    extensionProvider: extensionProvider
+  }));
+};
+var ExtensionComponentInner = /*#__PURE__*/function (_Component2) {
+  _inherits(ExtensionComponentInner, _Component2);
+  var _super2 = _createSuper(ExtensionComponentInner);
+  function ExtensionComponentInner() {
+    var _this2;
+    _classCallCheck(this, ExtensionComponentInner);
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _super2.call.apply(_super2, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this2), "privatePropsParsed", false);
+    _defineProperty(_assertThisInitialized(_this2), "state", {});
+    // memoized to avoid rerender on extension state changes
+    _defineProperty(_assertThisInitialized(_this2), "getNodeRenderer", memoizeOne(getNodeRenderer));
+    _defineProperty(_assertThisInitialized(_this2), "getExtensionModuleNodePrivateProps", memoizeOne(getExtensionModuleNodePrivateProps));
+    _defineProperty(_assertThisInitialized(_this2), "setIsNodeHovered", function (isHovered) {
+      _this2.setState({
+        isNodeHovered: isHovered
+      });
+    });
+    /**
+     * Parses any private nodes once an extension provider is available.
+     *
+     * We do this separately from resolving a node renderer component since the
+     * private props come from extension provider, rather than an extension
+     * handler which only handles `render`/component concerns.
+     */
+    _defineProperty(_assertThisInitialized(_this2), "parsePrivateNodePropsIfNeeded", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _this2$props$node$att, extensionType, extensionKey, privateProps;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(_this2.privatePropsParsed || !_this2.props.extensionProvider)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            _this2.privatePropsParsed = true;
+            _this2$props$node$att = _this2.props.node.attrs, extensionType = _this2$props$node$att.extensionType, extensionKey = _this2$props$node$att.extensionKey;
+            /**
+             * getExtensionModuleNodePrivateProps can throw if there are issues in the
+             * manifest
+             */
+            _context2.prev = 4;
+            _context2.next = 7;
+            return _this2.getExtensionModuleNodePrivateProps(_this2.props.extensionProvider, extensionType, extensionKey);
+          case 7:
+            privateProps = _context2.sent;
+            _this2.setState({
+              _privateProps: privateProps
+            });
+            _context2.next = 14;
+            break;
+          case 11:
+            _context2.prev = 11;
+            _context2.t0 = _context2["catch"](4);
+            // eslint-disable-next-line no-console
+            console.error('Provided extension handler has thrown an error\n', _context2.t0);
+            /** We don't want this error to block renderer */
+            /** We keep rendering the default content */
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[4, 11]]);
+    })));
+    _defineProperty(_assertThisInitialized(_this2), "handleExtension", function (pmNode, actions) {
+      var _pmNode$marks2;
+      var _this2$props = _this2.props,
+        extensionHandlers = _this2$props.extensionHandlers,
+        editorView = _this2$props.editorView;
+      var _pmNode$attrs2 = pmNode.attrs,
+        extensionType = _pmNode$attrs2.extensionType,
+        extensionKey = _pmNode$attrs2.extensionKey,
+        parameters = _pmNode$attrs2.parameters,
+        text = _pmNode$attrs2.text;
+      var isBodiedExtension = pmNode.type.name === 'bodiedExtension';
+      if (isBodiedExtension) {
+        return;
+      }
+      var fragmentLocalId = pmNode === null || pmNode === void 0 || (_pmNode$marks2 = pmNode.marks) === null || _pmNode$marks2 === void 0 || (_pmNode$marks2 = _pmNode$marks2.find(function (m) {
+        return m.type.name === 'fragment';
+      })) === null || _pmNode$marks2 === void 0 || (_pmNode$marks2 = _pmNode$marks2.attrs) === null || _pmNode$marks2 === void 0 ? void 0 : _pmNode$marks2.localId;
+      var node = {
+        type: pmNode.type.name,
+        extensionType: extensionType,
+        extensionKey: extensionKey,
+        parameters: parameters,
+        content: text,
+        localId: pmNode.attrs.localId,
+        fragmentLocalId: fragmentLocalId
+      };
+      var result;
+      if (extensionHandlers && extensionHandlers[extensionType]) {
+        var render = getExtensionRenderer(extensionHandlers[extensionType]);
+        result = render(node, editorView.state.doc, actions);
+      }
+      if (!result) {
+        var extensionHandlerFromProvider = _this2.props.extensionProvider && _this2.getNodeRenderer(_this2.props.extensionProvider, extensionType, extensionKey);
+        if (extensionHandlerFromProvider) {
+          var NodeRenderer = extensionHandlerFromProvider;
+          if (node.type === 'multiBodiedExtension') {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: _this2.props.references,
+              actions: actions
+            });
+          } else {
+            return /*#__PURE__*/React.createElement(NodeRenderer, {
+              node: node,
+              references: _this2.props.references
+            });
+          }
+        }
+      }
+      return result;
+    });
+    return _this2;
+  }
+  _createClass(ExtensionComponentInner, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.parsePrivateNodePropsIfNeeded();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state$_privateP2;
+      var _this$props3 = this.props,
+        node = _this$props3.node,
+        handleContentDOMRef = _this$props3.handleContentDOMRef,
+        editorView = _this$props3.editorView,
+        references = _this$props3.references,
+        editorAppearance = _this$props3.editorAppearance,
+        pluginInjectionApi = _this$props3.pluginInjectionApi,
+        getPos = _this$props3.getPos,
+        eventDispatcher = _this$props3.eventDispatcher,
+        macroInteractionDesignFeatureFlags = _this$props3.macroInteractionDesignFeatureFlags,
+        extensionProvider = _this$props3.extensionProvider;
+      var selection = editorView.state.selection;
+      var selectedNode = selection instanceof NodeSelection && selection.node;
+      var position = typeof getPos === 'function' && getPos();
+      var resolvedPosition = position && editorView.state.doc.resolve(position);
+      var isNodeNested = !!(resolvedPosition && resolvedPosition.depth > 0);
+      if (node.type.name === 'multiBodiedExtension') {
+        return /*#__PURE__*/React.createElement(MultiBodiedExtension, {
+          node: node,
+          editorView: editorView,
+          getPos: getPos,
+          handleContentDOMRef: handleContentDOMRef,
+          tryExtensionHandler: this.tryExtensionHandler.bind(this),
+          eventDispatcher: eventDispatcher,
+          pluginInjectionApi: pluginInjectionApi,
+          editorAppearance: editorAppearance,
+          macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
+          isNodeSelected: selectedNode === node,
+          isNodeNested: isNodeNested,
+          isNodeHovered: this.state.isNodeHovered,
+          setIsNodeHovered: this.setIsNodeHovered
+        });
+      }
+      var extensionHandlerResult = this.tryExtensionHandler(undefined);
+      switch (node.type.name) {
+        case 'extension':
+        case 'bodiedExtension':
+          return /*#__PURE__*/React.createElement(Extension, {
+            node: node,
+            getPos: this.props.getPos,
+            references: references,
+            extensionProvider: extensionProvider,
+            handleContentDOMRef: handleContentDOMRef,
+            view: editorView,
+            editorAppearance: editorAppearance,
+            hideFrame: (_this$state$_privateP2 = this.state._privateProps) === null || _this$state$_privateP2 === void 0 ? void 0 : _this$state$_privateP2.__hideFrame,
+            pluginInjectionApi: pluginInjectionApi,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
+            isNodeSelected: selectedNode === node,
+            isNodeHovered: this.state.isNodeHovered,
+            isNodeNested: isNodeNested,
+            setIsNodeHovered: this.setIsNodeHovered
+          }, extensionHandlerResult);
+        case 'inlineExtension':
+          return /*#__PURE__*/React.createElement(InlineExtension, {
+            node: node,
+            macroInteractionDesignFeatureFlags: macroInteractionDesignFeatureFlags,
+            isNodeSelected: selectedNode === node,
+            pluginInjectionApi: pluginInjectionApi,
+            isNodeHovered: this.state.isNodeHovered,
+            setIsNodeHovered: this.setIsNodeHovered
+          }, extensionHandlerResult);
+        default:
+          return null;
+      }
+    }
+  }, {
+    key: "tryExtensionHandler",
+    value: function tryExtensionHandler(actions) {
+      var node = this.props.node;
+      try {
+        var extensionContent = this.handleExtension(node, actions);
+        if (extensionContent && /*#__PURE__*/React.isValidElement(extensionContent)) {
+          return extensionContent;
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Provided extension handler has thrown an error\n', e);
+        /** We don't want this error to block renderer */
+        /** We keep rendering the default content */
+      }
+      return null;
+    }
+  }]);
+  return ExtensionComponentInner;
+}(Component);
+export var ExtensionComponent = function ExtensionComponent(props) {
+  if (fg('platform_editor_react18_extension_component')) {
+    return /*#__PURE__*/React.createElement(ExtensionComponentNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ExtensionComponentOld, props);
+};

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 = "93.1.5";
+var packageVersion = "93.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

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

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

@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useEffect } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import Tooltip from '@atlaskit/tooltip';
+import { Pulse } from '../Pulse/Pulse';
 import { getButtonStyles, iconOnlySpacing } from './styles';
 export default (function (_ref) {
   var title = _ref.title,
@@ -35,7 +36,8 @@ export default (function (_ref) {
     tabIndex = _ref.tabIndex,
     areaControls = _ref.areaControls,
     ariaLabel = _ref.ariaLabel,
-    isRadioButton = _ref.isRadioButton;
+    isRadioButton = _ref.isRadioButton,
+    pulse = _ref.pulse;
   // Check if there's only an icon and add additional styles
   var iconOnly = (icon || iconAfter) && !children;
   var customSpacing = iconOnly ? iconOnlySpacing : {};
@@ -58,6 +60,8 @@ export default (function (_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave
+  }, /*#__PURE__*/React.createElement(Pulse, {
+    pulse: pulse
   }, /*#__PURE__*/React.createElement(Button
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
@@ -100,5 +104,5 @@ export default (function (_ref) {
     // should be fixed here https://a11y-internal.atlassian.net/browse/DST-287
     ,
     tabIndex: tabIndex
-  }, children)));
+  }, children))));
 });

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

@@ -7,9 +7,11 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/* eslint-disable @repo/internal/react/no-class-components */
 import React, { PureComponent } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ProviderFactory, WithProviders } from '../../provider-factory';
-import MentionWithProviders from './mention-with-providers';
+import { MentionWithProviders, MentionWithProvidersOld } from './mention-with-providers';
 var Mention = /*#__PURE__*/function (_PureComponent) {
   _inherits(Mention, _PureComponent);
   var _super = _createSuper(Mention);
@@ -26,7 +28,18 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         localId = _this$props.localId;
       var mentionProvider = providers.mentionProvider,
         profilecardProvider = providers.profilecardProvider;
-      return /*#__PURE__*/React.createElement(MentionWithProviders, {
+      if (fg('platform_editor_react18_mention_with_provider')) {
+        return /*#__PURE__*/React.createElement(MentionWithProviders, {
+          id: id,
+          text: text,
+          accessLevel: accessLevel,
+          localId: localId,
+          eventHandlers: eventHandlers,
+          mentionProvider: mentionProvider,
+          profilecardProvider: profilecardProvider
+        });
+      }
+      return /*#__PURE__*/React.createElement(MentionWithProvidersOld, {
         id: id,
         text: text,
         accessLevel: accessLevel,

package/dist/esm/ui/Mention/mention-with-providers.js

@@ -6,19 +6,69 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useLayoutEffect, useRef, useState } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
 import ResourcedMentionWithProfilecard from './mention-with-profilecard';
 var GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
 var noop = function noop() {};
-var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
-  _inherits(MentionWithProviders, _PureComponent);
-  var _super = _createSuper(MentionWithProviders);
-  function MentionWithProviders() {
+export var MentionWithProviders = function MentionWithProviders(_ref) {
+  var accessLevel = _ref.accessLevel,
+    eventHandlers = _ref.eventHandlers,
+    id = _ref.id,
+    mentionProvider = _ref.mentionProvider,
+    profilecardProviderResolver = _ref.profilecardProvider,
+    text = _ref.text,
+    localId = _ref.localId;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    profilecardProvider = _useState2[0],
+    setProfilecardProvider = _useState2[1];
+  var mountedRef = useRef(true);
+  useLayoutEffect(function () {
+    mountedRef.current = true;
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
+  useLayoutEffect(function () {
+    // We are not using async/await here to avoid having an intermediate Promise
+    // introduced by the transpiler.
+    // This will allow consumer to use a SynchronousPromise.resolve and avoid useless
+    // rerendering
+    profilecardProviderResolver === null || profilecardProviderResolver === void 0 || profilecardProviderResolver.then(function (result) {
+      if (mountedRef.current) {
+        setProfilecardProvider(result);
+      }
+    }).catch(function () {
+      if (mountedRef.current) {
+        setProfilecardProvider(null);
+      }
+    });
+  }, [profilecardProviderResolver]);
+  var MentionComponent = profilecardProviderResolver && GENERIC_USER_IDS.indexOf(id) === -1 ? ResourcedMentionWithProfilecard : ResourcedMention;
+  return /*#__PURE__*/React.createElement(MentionComponent, {
+    id: id,
+    text: text,
+    accessLevel: accessLevel,
+    localId: localId,
+    mentionProvider: mentionProvider,
+    profilecardProvider: profilecardProvider,
+    onClick: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onClick,
+    onMouseEnter: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseEnter,
+    onMouseLeave: eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.onMouseLeave
+  });
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var MentionWithProvidersOld = /*#__PURE__*/function (_PureComponent) {
+  _inherits(MentionWithProvidersOld, _PureComponent);
+  var _super = _createSuper(MentionWithProvidersOld);
+  function MentionWithProvidersOld() {
     var _this;
-    _classCallCheck(this, MentionWithProviders);
+    _classCallCheck(this, MentionWithProvidersOld);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -28,7 +78,7 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
     });
     return _this;
   }
-  _createClass(MentionWithProviders, [{
+  _createClass(MentionWithProvidersOld, [{
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.updateProfilecardProvider(this.props);
@@ -90,6 +140,5 @@ var MentionWithProviders = /*#__PURE__*/function (_PureComponent) {
       }, actionHandlers));
     }
   }]);
-  return MentionWithProviders;
-}(PureComponent);
-export { MentionWithProviders as default };
+  return MentionWithProvidersOld;
+}(PureComponent);

package/dist/esm/ui/Pulse/Pulse.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SpotlightPulse } from '@atlaskit/onboarding';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+/**
+ * Wraps children with {@link SpotlightPulse} component.
+ *
+ * It adds pulse effect to children if `pulse` is `true`.
+ *
+ * This custom component exists because the {@link SpotlightPulse} with `pulse={false}` renders extra `div` around `children`.
+ * We want to keep `children` as it is if there is no `pulse`.
+ */
+export function Pulse(_ref) {
+  var pulse = _ref.pulse,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? 3 : _ref$radius,
+    children = _ref.children;
+  if (editorExperiment('platform_editor_ai_onboarding', 'test') && pulse) {
+    return (
+      /*#__PURE__*/
+      // SpotlightPulse shows pulse effect if `pulse` is `undefined`.
+      // That's why we need to cast `pulse` to `false` if it's `undefined`.
+      React.createElement(SpotlightPulse, {
+        radius: radius,
+        pulse: pulse !== null && pulse !== void 0 ? pulse : false
+      }, children)
+    );
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+}