@atlaskit/editor-plugin-floating-toolbar 0.7.13 → 0.7.14

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 0.7.14
+
+### Patch Changes
+
+- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
+- [#56822](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56822) [`77f4fbf44e93`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/77f4fbf44e93) - ECA11Y-78: Added announce for the selected file
+
 ## 0.7.13
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -228,7 +228,9 @@ function ContentComponent(_ref5) {
       right: 0,
       bottom: 0
     } : _config$absoluteOffse,
-    focusTrap = config.focusTrap;
+    focusTrap = config.focusTrap,
+    _config$mediaAssistiv = config.mediaAssistiveMessage,
+    mediaAssistiveMessage = _config$mediaAssistiv === void 0 ? '' : _config$mediaAssistiv;
   var targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
     return null;
@@ -298,7 +300,8 @@ function ContentComponent(_ref5) {
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         featureFlags: featureFlags,
-        api: pluginInjectionApi
+        api: pluginInjectionApi,
+        mediaAssistiveMessage: mediaAssistiveMessage
       });
     }
   })), /*#__PURE__*/_react.default.createElement(_ConfirmationModal.ConfirmationModal, {

package/dist/cjs/ui/Dropdown.js

@@ -21,6 +21,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _DropdownMenu = _interopRequireWildcard(require("./DropdownMenu"));
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -34,11 +35,11 @@ var dropdownExpandContainer = (0, _react2.css)(_templateObject || (_templateObje
 var iconGroup = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 var CompositeIcon = function CompositeIcon(_ref) {
   var icon = _ref.icon;
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: iconGroup
-  }, icon, /*#__PURE__*/_react.default.createElement("span", {
+  }, icon, (0, _react2.jsx)("span", {
     css: dropdownExpandContainer
-  }, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+  }, (0, _react2.jsx)(_chevronDown.default, {
     label: "Expand dropdown menu"
   })));
 };
@@ -63,7 +64,7 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
         showSelected = _this$props.showSelected,
         dispatchCommand = _this$props.dispatchCommand,
         editorView = _this$props.editorView;
-      return /*#__PURE__*/_react.default.createElement(_DropdownMenu.default, {
+      return (0, _react2.jsx)(_DropdownMenu.default, {
         hide: _this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
@@ -134,10 +135,10 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
         alignDropdownWithToolbar = _this$props2.alignDropdownWithToolbar;
       var trigger;
       if (icon) {
-        var TriggerIcon = hideExpandIcon ? icon : /*#__PURE__*/_react.default.createElement(CompositeIcon, {
+        var TriggerIcon = hideExpandIcon ? icon : (0, _react2.jsx)(CompositeIcon, {
           icon: icon
         });
-        trigger = /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+        trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           testId: buttonTestId,
           title: title,
           icon: TriggerIcon,
@@ -148,11 +149,11 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
           tooltipContent: tooltip
         });
       } else {
-        trigger = /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+        trigger = (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           testId: buttonTestId,
-          iconAfter: /*#__PURE__*/_react.default.createElement("span", {
+          iconAfter: (0, _react2.jsx)("span", {
             css: dropdownExpandContainer
-          }, /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
+          }, (0, _react2.jsx)(_chevronDown.default, {
             label: "Expand dropdown menu"
           })),
           onClick: this.toggleOpen,
@@ -172,7 +173,7 @@ var Dropdown = exports.default = /*#__PURE__*/function (_Component) {
       var fitTolerance = 10;
       var fitWidth = Array.isArray(options) ? dropdownWidth || _DropdownMenu.menuItemDimensions.width : options.width;
       var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : options.height;
-      return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
+      return (0, _react2.jsx)(_uiMenu.DropdownContainer, {
         mountTo: mountPoint,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,

package/dist/cjs/ui/DropdownMenu.js

@@ -21,7 +21,9 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _messages = _interopRequireDefault(require("./messages"));
-var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var _templateObject, _templateObject2, _templateObject3;
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -133,7 +135,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
       labelRefCurrent === null || labelRefCurrent === void 0 || labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
     };
   });
-  var itemContent = /*#__PURE__*/React.createElement(DropdownButtonItem, {
+  var itemContent = (0, _react2.jsx)(DropdownButtonItem, {
     iconBefore: iconBefore,
     iconAfter: item.elemAfter,
     onClick: handleItemClick,
@@ -146,12 +148,12 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
     onMouseOut: handleItemMouseOut,
     onFocus: handleItemOnFocus,
     onBlur: handleItemOnBlur
-  }, /*#__PURE__*/React.createElement("span", {
+  }, (0, _react2.jsx)("span", {
     ref: labelRef,
     css: label
   }, item.title));
   if (tooltipContent) {
-    return /*#__PURE__*/React.createElement(_tooltip.default, {
+    return (0, _react2.jsx)(_tooltip.default, {
       content: tooltipContent
     }, itemContent);
   }
@@ -176,12 +178,12 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         items = _this$props.items,
         intl = _this$props.intl,
         editorView = _this$props.editorView;
-      return /*#__PURE__*/React.createElement("div", {
+      return (0, _react2.jsx)("div", {
         css: menuContainer
       }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
-        return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+        return (0, _react2.jsx)(DropdownMenuItem, {
           key: idx,
           item: item,
           hide: hide,
@@ -198,13 +200,13 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         showSelected = _this$props$showSelec === void 0 ? true : _this$props$showSelec;
       var selected = item.selected;
       if (showSelected && selected) {
-        return /*#__PURE__*/React.createElement(_done.default, {
+        return (0, _react2.jsx)(_done.default, {
           primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
           size: "small",
           label: intl.formatMessage(_messages.default.confirmModalOK)
         });
       }
-      return /*#__PURE__*/React.createElement("span", {
+      return (0, _react2.jsx)("span", {
         css: spacer
       });
     }

package/dist/cjs/ui/EmojiPickerButton.js

@@ -17,6 +17,7 @@ var _emoji = require("@atlaskit/emoji");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
 var _templateObject;
+/** @jsx jsx */
 // helps adjusts position of popup
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var emojiPickerButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
@@ -65,7 +66,7 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
     if (!providers.emojiProvider) {
       return null;
     }
-    return /*#__PURE__*/_react.default.createElement(EmojiPickerWithListener, {
+    return (0, _react2.jsx)(EmojiPickerWithListener, {
       emojiProvider: providers.emojiProvider,
       onSelection: updateEmoji,
       onPickerRef: function onPickerRef() {},
@@ -77,7 +78,7 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
     if (!buttonRef.current || !isPopupOpen) {
       return;
     }
-    return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    return (0, _react2.jsx)(_ui.Popup, {
       target: buttonRef.current,
       mountTo: props.setDisableParentScroll ? props.mountPoint : buttonRef.current.parentElement,
       fitHeight: 350,
@@ -89,19 +90,19 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
       ,
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       focusTrap: true
-    }, /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+    }, (0, _react2.jsx)(_providerFactory.WithProviders, {
       providers: ['emojiProvider'],
       providerFactory: props.providerFactory,
       renderNode: renderPicker
     }));
   };
   var title = props.title || '';
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     css: emojiPickerButtonWrapper
-  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  }, (0, _react2.jsx)(_tooltip.default, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+  }, (0, _react2.jsx)(_button.default, {
     appearance: 'subtle',
     key: props.idx,
     style: {
@@ -115,6 +116,6 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
     ref: buttonRef,
     isSelected: props.isSelected,
     "aria-label": title,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_EditorEmojiAddIcon.default, null)
+    iconBefore: (0, _react2.jsx)(_EditorEmojiAddIcon.default, null)
   })), renderPopup());
 };

package/dist/cjs/ui/Input.js

@@ -14,11 +14,12 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var TextField = exports.default = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(TextField, _Component);
@@ -62,9 +63,9 @@ var TextField = exports.default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var placeholder = this.props.placeholder;
-      return /*#__PURE__*/_react.default.createElement("form", {
+      return (0, _react2.jsx)("form", {
         onSubmit: this.handleSubmit
-      }, /*#__PURE__*/_react.default.createElement("input", {
+      }, (0, _react2.jsx)("input", {
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         css: _ui.panelTextInput,
         value: this.state.text,

package/dist/cjs/ui/ScrollButtons.js

@@ -17,6 +17,7 @@ var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/ch
 var _colors = require("@atlaskit/theme/colors");
 var _messages = _interopRequireDefault(require("./messages"));
 var _templateObject;
+/** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
@@ -131,20 +132,20 @@ var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [node.type]);
-  return needScroll ? /*#__PURE__*/_react.default.createElement("div", {
+  return needScroll ? (0, _react2.jsx)("div", {
     ref: buttonsContainerRef,
     css: toolbarScrollButtons,
     className: "scroll-buttons"
-  }, /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+  }, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     title: intl.formatMessage(_messages.default.floatingToolbarScrollLeft),
-    icon: /*#__PURE__*/_react.default.createElement(LeftIcon, {
+    icon: (0, _react2.jsx)(LeftIcon, {
       label: intl.formatMessage(_messages.default.floatingToolbarScrollLeft)
     }),
     onClick: scrollLeft,
     disabled: !canScrollLeft || disabled
-  }), /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+  }), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
     title: intl.formatMessage(_messages.default.floatingToolbarScrollRight),
-    icon: /*#__PURE__*/_react.default.createElement(RightIcon, {
+    icon: (0, _react2.jsx)(RightIcon, {
       label: intl.formatMessage(_messages.default.floatingToolbarScrollRight)
     }),
     onClick: scrollRight,

package/dist/cjs/ui/Toolbar.js

@@ -38,7 +38,9 @@ var _messages = _interopRequireDefault(require("./messages"));
 var _ScrollButtons = require("./ScrollButtons");
 var _Select = _interopRequireDefault(require("./Select"));
 var _Separator = _interopRequireDefault(require("./Separator"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+/** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -61,7 +63,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
     featureFlags = _ref.featureFlags,
     api = _ref.api;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  return /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, items.filter(function (item) {
+  return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
     var _api$contextPanel, _api$extension;
@@ -78,12 +80,12 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             }
           }
         };
-        return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+        return (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           className: item.className,
           key: idx,
           title: item.title,
           href: item.href,
-          icon: item.icon ? /*#__PURE__*/_react.default.createElement(ButtonIcon, {
+          icon: item.icon ? (0, _react2.jsx)(ButtonIcon, {
             label: item.title
           }) : undefined,
           appearance: item.appearance,
@@ -110,7 +112,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           tabIndex: item.tabIndex
         }, item.showTitle && item.title);
       case 'input':
-        return /*#__PURE__*/_react.default.createElement(_Input.default, {
+        return (0, _react2.jsx)(_Input.default, {
           key: idx,
           mountPoint: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
@@ -129,10 +131,10 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         }
       case 'dropdown':
         var DropdownIcon = item.icon;
-        return /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
+        return (0, _react2.jsx)(_Dropdown.default, {
           key: idx,
           title: item.title,
-          icon: DropdownIcon && /*#__PURE__*/_react.default.createElement(DropdownIcon, {
+          icon: DropdownIcon && (0, _react2.jsx)(DropdownIcon, {
             label: item.title
           }),
           dispatchCommand: dispatchCommand,
@@ -155,7 +157,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
       case 'select':
         if (item.selectType === 'list') {
           var ariaLabel = item.title || item.placeholder;
-          return /*#__PURE__*/_react.default.createElement(_Select.default, {
+          return (0, _react2.jsx)(_Select.default, {
             key: idx,
             dispatchCommand: dispatchCommand,
             options: item.options,
@@ -175,7 +177,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           });
         }
         if (item.selectType === 'color') {
-          return /*#__PURE__*/_react.default.createElement(_uiMenu.ColorPickerButton, {
+          return (0, _react2.jsx)(_uiMenu.ColorPickerButton, {
             skipFocusButtonAfterPick: true,
             key: idx,
             title: item.title,
@@ -201,7 +203,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           });
         }
         if (item.selectType === 'emoji') {
-          return /*#__PURE__*/_react.default.createElement(_EmojiPickerButton.EmojiPickerButton, {
+          return (0, _react2.jsx)(_EmojiPickerButton.EmojiPickerButton, {
             key: idx,
             editorView: editorView,
             title: item.title,
@@ -224,7 +226,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
         if (!extendFloatingToolbar) {
           return null;
         }
-        return /*#__PURE__*/_react.default.createElement(_ExtensionsPlaceholder.ExtensionsPlaceholder, {
+        return (0, _react2.jsx)(_ExtensionsPlaceholder.ExtensionsPlaceholder, {
           key: idx,
           node: node,
           editorView: editorView,
@@ -234,7 +236,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
-        return /*#__PURE__*/_react.default.createElement(_Separator.default, {
+        return (0, _react2.jsx)(_Separator.default, {
           key: idx
         });
     }
@@ -373,7 +375,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         className = _this$props2.className,
         node = _this$props2.node,
         intl = _this$props2.intl,
-        scrollable = _this$props2.scrollable;
+        scrollable = _this$props2.scrollable,
+        mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
       if (!items || !items.length) {
         return null;
       }
@@ -387,14 +390,14 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         //Alt + F10 to reach first element in this floating toolbar
         return event.altKey && (event.key === 'F10' || event.keyCode === 121);
       };
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarArrowKeyNavigationProvider, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_uiMenu.ToolbarArrowKeyNavigationProvider, {
         editorView: this.props.editorView,
         handleEscape: this.handleEscape,
         disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
         childComponentSelector: "[data-testid='editor-floating-toolbar']",
         isShortcutToFocusToolbar: isShortcutToFocusToolbar,
         intl: intl
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         ref: this.toolbarContainerRef,
         css: function css(theme) {
           return [toolbarContainer({
@@ -405,26 +408,26 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         role: "toolbar",
         "data-testid": "editor-floating-toolbar",
         className: className
-      }, /*#__PURE__*/_react.default.createElement(_ui.Announcer, {
-        text: intl.formatMessage(_messages.default.floatingToolbarAnnouncer),
+      }, (0, _react2.jsx)(_ui.Announcer, {
+        text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(_messages.default.floatingToolbarAnnouncer)) : intl.formatMessage(_messages.default.floatingToolbarAnnouncer),
         delay: 250
-      }), /*#__PURE__*/_react.default.createElement("div", {
+      }), (0, _react2.jsx)("div", {
         "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         ,
         css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
-      }, /*#__PURE__*/_react.default.createElement(ToolbarItems, (0, _extends2.default)({}, this.props, {
+      }, (0, _react2.jsx)(ToolbarItems, (0, _extends2.default)({}, this.props, {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted,
         featureFlags: this.props.featureFlags
-      }))), scrollable && /*#__PURE__*/_react.default.createElement(_ScrollButtons.ScrollButtons, {
+      }))), scrollable && (0, _react2.jsx)(_ScrollButtons.ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
         disabled: this.state.scrollDisabled
-      })), /*#__PURE__*/_react.default.createElement("div", {
+      })), (0, _react2.jsx)("div", {
         ref: this.mountRef
       })));
     }

package/dist/es2019/plugin.js

@@ -216,7 +216,8 @@ function ContentComponent({
       right: 0,
       bottom: 0
     },
-    focusTrap
+    focusTrap,
+    mediaAssistiveMessage = ''
   } = config;
   const targetRef = getDomRef(editorView, dispatchAnalyticsEvent);
   if (!targetRef || editorDisabledState && editorDisabledState.editorDisabled) {
@@ -284,7 +285,8 @@ function ContentComponent({
         extensionsProvider: providers.extensionProvider,
         scrollable: scrollable,
         featureFlags: featureFlags,
-        api: pluginInjectionApi
+        api: pluginInjectionApi,
+        mediaAssistiveMessage: mediaAssistiveMessage
       });
     }
   })), /*#__PURE__*/React.createElement(ConfirmationModal, {

package/dist/es2019/ui/Dropdown.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import React, { Component } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -17,11 +19,11 @@ const iconGroup = css`
 `;
 const CompositeIcon = ({
   icon
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: iconGroup
-}, icon, /*#__PURE__*/React.createElement("span", {
+}, icon, jsx("span", {
   css: dropdownExpandContainer
-}, /*#__PURE__*/React.createElement(ExpandIcon, {
+}, jsx(ExpandIcon, {
   label: "Expand dropdown menu"
 })));
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -39,7 +41,7 @@ export default class Dropdown extends Component {
         dispatchCommand,
         editorView
       } = this.props;
-      return /*#__PURE__*/React.createElement(DropdownMenu, {
+      return jsx(DropdownMenu, {
         hide: this.hide,
         dispatchCommand: dispatchCommand,
         items: options,
@@ -111,10 +113,10 @@ export default class Dropdown extends Component {
     } = this.props;
     let trigger;
     if (icon) {
-      const TriggerIcon = hideExpandIcon ? icon : /*#__PURE__*/React.createElement(CompositeIcon, {
+      const TriggerIcon = hideExpandIcon ? icon : jsx(CompositeIcon, {
         icon: icon
       });
-      trigger = /*#__PURE__*/React.createElement(Button, {
+      trigger = jsx(Button, {
         testId: buttonTestId,
         title: title,
         icon: TriggerIcon,
@@ -125,11 +127,11 @@ export default class Dropdown extends Component {
         tooltipContent: tooltip
       });
     } else {
-      trigger = /*#__PURE__*/React.createElement(Button, {
+      trigger = jsx(Button, {
         testId: buttonTestId,
-        iconAfter: /*#__PURE__*/React.createElement("span", {
+        iconAfter: jsx("span", {
           css: dropdownExpandContainer
-        }, /*#__PURE__*/React.createElement(ExpandIcon, {
+        }, jsx(ExpandIcon, {
           label: "Expand dropdown menu"
         })),
         onClick: this.toggleOpen,
@@ -149,7 +151,7 @@ export default class Dropdown extends Component {
     const fitTolerance = 10;
     const fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
     const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
-    return /*#__PURE__*/React.createElement(UiDropdown, {
+    return jsx(UiDropdown, {
       mountTo: mountPoint,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,

package/dist/es2019/ui/DropdownMenu.js

@@ -1,6 +1,7 @@
+/** @jsx jsx */
 import { createRef, useCallback, useEffect, useState } from 'react';
 import { Component } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import { injectIntl } from 'react-intl-next';
@@ -136,7 +137,7 @@ const DropdownMenuItem = ({
       labelRefCurrent === null || labelRefCurrent === void 0 ? void 0 : labelRefCurrent.removeEventListener('mousedown', handleTitleWrapperMouseEvent);
     };
   });
-  const itemContent = /*#__PURE__*/React.createElement(DropdownButtonItem, {
+  const itemContent = jsx(DropdownButtonItem, {
     iconBefore: iconBefore,
     iconAfter: item.elemAfter,
     onClick: handleItemClick,
@@ -149,12 +150,12 @@ const DropdownMenuItem = ({
     onMouseOut: handleItemMouseOut,
     onFocus: handleItemOnFocus,
     onBlur: handleItemOnBlur
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     ref: labelRef,
     css: label
   }, item.title));
   if (tooltipContent) {
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: tooltipContent
     }, itemContent);
   }
@@ -171,9 +172,9 @@ class Dropdown extends Component {
       intl,
       editorView
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: menuContainer
-    }, items.filter(item => !item.hidden).map((item, idx) => /*#__PURE__*/React.createElement(DropdownMenuItem, {
+    }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
       key: idx,
       item: item,
       hide: hide,
@@ -190,13 +191,13 @@ class Dropdown extends Component {
       selected
     } = item;
     if (showSelected && selected) {
-      return /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      return jsx(EditorDoneIcon, {
         primaryColor: `var(--ds-icon-selected, ${B400})`,
         size: "small",
         label: intl.formatMessage(messages.confirmModalOK)
       });
     }
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       css: spacer
     });
   }