@atlaskit/editor-common 122.6.1 → 122.8.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-common
 
+## 122.8.0
+
+### Minor Changes
+
+- [`c942b90687404`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c942b90687404) -
+  Add an optional `ariaLabel` prop to `ColorPalette` so consumers can give its radio group an
+  accessible name, and add image border color and size radio group labels to the image border
+  messages. Consumed behind `platform_editor_a11y_border_radiogroup_label`.
+
+## 122.7.0
+
+### Minor Changes
+
+- [`a6ea70b003713`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a6ea70b003713) -
+  Improve the slash-command menu behind `platform_editor_slash_command`: add optional light and dark
+  preview image URLs, show theme-aware previews for headings, quote, and list commands, and set the
+  registered menu to 320px wide and up to 480px tall while allowing short menus to hug their
+  contents. Previews fall back to the light image when no dark image is supplied and are not shown
+  when no URLs are supplied.
+
+### Patch Changes
+
+- [`588770a1c455e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/588770a1c455e) -
+  [FFCLEANUP-82019] clean up FG `platform_editor_fix_mixed_types_column_sort`
+- Updated dependencies
+
 ## 122.6.1
 
 ### Patch Changes

package/dist/cjs/media/messages/imageBorder.js

@@ -16,6 +16,11 @@ var imageBorderMessages = exports.imageBorderMessages = (0, _reactIntl.defineMes
     defaultMessage: 'Image border options Color dropdown',
     description: 'ARIA label for the dropdown to change the border color of an image.'
   },
+  borderColorRadioGroupAriaLabel: {
+    id: 'fabric.editor.imageBorderColor.radioGroupAriaLabel',
+    defaultMessage: 'Color options',
+    description: 'ARIA label for the group of selectable border colors in the image border options panel.'
+  },
   borderSize: {
     id: 'fabric.editor.imageBorderSize',
     defaultMessage: 'Size',
@@ -26,6 +31,11 @@ var imageBorderMessages = exports.imageBorderMessages = (0, _reactIntl.defineMes
     defaultMessage: 'Image border options Size dropdown',
     description: 'ARIA label for the dropdown to change the border size of an image.'
   },
+  borderSizeRadioGroupAriaLabel: {
+    id: 'fabric.editor.imageBorderSize.radioGroupAriaLabel',
+    defaultMessage: 'Size options',
+    description: 'ARIA label for the group of selectable border sizes in the image border options panel.'
+  },
   addBorder: {
     id: 'fabric.editor.addImageBorder',
     defaultMessage: 'Add border',

package/dist/cjs/media-inline/media-inline-image-card.js

@@ -12,7 +12,9 @@ var _react2 = require("@emotion/react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntl = require("react-intl");
 var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
-var _mediaCard = require("@atlaskit/media-card");
+var _fireFailedOperationalEvent = require("@atlaskit/media-card/inline/fire-failed-operational-event");
+var _fireSucceededOperationalEvent = require("@atlaskit/media-card/inline/fire-succeeded-operational-event");
+var _mediaCardError = require("@atlaskit/media-card/media-card-error");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaClientProvider = require("@atlaskit/media-client-react/media-client-provider");
 var _mediaViewer = require("@atlaskit/media-viewer");
@@ -70,17 +72,17 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
   var _useAnalyticsEvents = (0, _useAnalyticsEvents2.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var fireFailedOperationalEvent = function fireFailedOperationalEvent() {
-    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _mediaCard.MediaCardError('missing-error-data');
+    var error = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new _mediaCardError.MediaCardError('missing-error-data');
     var failReason = arguments.length > 1 ? arguments[1] : undefined;
     if (!isFailedEventSent && fileState) {
       setIsFailedEventSent(true);
-      (0, _mediaCard.fireFailedMediaInlineEvent)(fileState, error, failReason, createAnalyticsEvent);
+      (0, _fireFailedOperationalEvent.fireFailedOperationalEvent)(fileState, error, failReason, createAnalyticsEvent);
     }
   };
   var fireSucceededOperationalEvent = function fireSucceededOperationalEvent() {
     if (!isSucceededEventSent && fileState) {
       setIsSucceededEventSent(true);
-      (0, _mediaCard.fireSucceededMediaInlineEvent)(fileState, createAnalyticsEvent);
+      (0, _fireSucceededOperationalEvent.fireSucceededOperationalEvent)(fileState, createAnalyticsEvent);
     }
   };
   (0, _react.useEffect)(function () {
@@ -115,7 +117,7 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
         var isUploading = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading';
         var errorMessage = isUploading ? _mediaInlineCard.messages.failedToUpload : _mediaInlineCard.messages.unableToLoadContent;
         var errorReason = (fileState === null || fileState === void 0 ? void 0 : fileState.status) === 'uploading' ? 'upload' : 'metadata-fetch';
-        fireFailedOperationalEvent(new _mediaCard.MediaCardError(errorReason, subscribeError));
+        fireFailedOperationalEvent(new _mediaCardError.MediaCardError(errorReason, subscribeError));
         return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
           message: formatMessage(errorMessage)
         });
@@ -124,7 +126,7 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
         return (0, _react2.jsx)(_loadingView.InlineImageCardLoadingView, null);
       }
       if (fileState.status === 'error') {
-        fireFailedOperationalEvent(new _mediaCard.MediaCardError('error-file-state', new Error(fileState.message)));
+        fireFailedOperationalEvent(new _mediaCardError.MediaCardError('error-file-state', new Error(fileState.message)));
         return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {
           message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
         });
@@ -134,7 +136,7 @@ var MediaInlineImageCardInternal = exports.MediaInlineImageCardInternal = functi
           message: formatMessage(_mediaInlineCard.messages.unableToLoadContent)
         });
       } else if (!fileState.name) {
-        fireFailedOperationalEvent(new _mediaCard.MediaCardError('metadata-fetch', new _mediaClient.FileFetcherError('emptyFileName', {
+        fireFailedOperationalEvent(new _mediaCardError.MediaCardError('metadata-fetch', new _mediaClient.FileFetcherError('emptyFileName', {
           id: fileState.id
         })));
         return (0, _react2.jsx)(_errorView.InlineImageCardErrorView, {

package/dist/cjs/monitoring/error.js

@@ -27,7 +27,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "122.6.0";
+var packageVersion = "122.7.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/quick-insert/CompactQuickInsertMenuItem.js

@@ -2,19 +2,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CompactQuickInsertMenuItem = void 0;
 require("./CompactQuickInsertMenuItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _primitives = require("@atlaskit/primitives");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _QuickInsertHoverPreview = require("./QuickInsertHoverPreview");
 var _quickInsertMenuItemUtils = require("./quickInsertMenuItemUtils");
 var _useQuickInsertContext = require("./useQuickInsertContext");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
 var styles = {
   iconContainer: "_4cvr1h6o _1e0c1txw _1o9zidpf _1bah1h6o _1tke1tcg _1ul91tcg",
@@ -81,6 +85,7 @@ var CompactQuickInsertMenuItem = exports.CompactQuickInsertMenuItem = function C
     iconBefore = _ref.iconBefore,
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
+    previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
     _ref$shouldWrapIcon = _ref.shouldWrapIcon,
     shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
@@ -94,6 +99,10 @@ var CompactQuickInsertMenuItem = exports.CompactQuickInsertMenuItem = function C
     id = _ref2.id,
     isSelected = _ref2.isSelected;
   var handleClick = (0, _quickInsertMenuItemUtils.useQuickInsertMenuItemSelection)(onSelect);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    referenceElement = _useState2[0],
+    setReferenceElement = _useState2[1];
   if (!(0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
     var _wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
       xcss: styles.icon
@@ -118,7 +127,8 @@ var CompactQuickInsertMenuItem = exports.CompactQuickInsertMenuItem = function C
   var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: styles.iconLarge
   }, iconBefore) : iconBefore;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    ref: setReferenceElement,
     "aria-label": ariaLabel,
     "aria-selected": isSelected,
     id: id,
@@ -135,5 +145,9 @@ var CompactQuickInsertMenuItem = exports.CompactQuickInsertMenuItem = function C
   }, /*#__PURE__*/_react.default.createElement(_compiled.Text, null, title), shortcut && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.shortcut
-  }, shortcut)));
+  }, shortcut))), isSelected && !isDisabled && (previewImageUrls === null || previewImageUrls === void 0 ? void 0 : previewImageUrls.light) && referenceElement && /*#__PURE__*/_react.default.createElement(_QuickInsertHoverPreview.QuickInsertHoverPreview, {
+    key: previewImageUrls.light,
+    previewImageUrls: previewImageUrls,
+    referenceElement: referenceElement
+  }));
 };

package/dist/cjs/quick-insert/QuickInsertHoverPreview.compiled.css

@@ -0,0 +1,4 @@
+._1e0c1ule{display:block}
+._1pby16oo{z-index:510}
+._3um015vq{visibility:hidden}
+._3um0ewfl{visibility:visible}

package/dist/cjs/quick-insert/QuickInsertHoverPreview.js

@@ -0,0 +1,103 @@
+/* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QuickInsertHoverPreview = void 0;
+require("./QuickInsertHoverPreview.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactDom = require("react-dom");
+var _main = require("@atlaskit/popper/main");
+var _useThemeObserver2 = require("@atlaskit/tokens/use-theme-observer");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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) { (0, _defineProperty2.default)(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; }
+var PREVIEW_WIDTH = 294;
+var PREVIEW_OFFSET = [-4, 4];
+var PREVIEW_MODIFIERS = [{
+  name: 'preventOverflow',
+  options: {
+    mainAxis: false
+  }
+}];
+var styles = {
+  image: "_1e0c1ule _1pby16oo",
+  hidden: "_3um015vq",
+  visible: "_3um0ewfl"
+};
+
+/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
+var QuickInsertHoverPreview = exports.QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
+  var previewImageUrls = _ref.previewImageUrls,
+    referenceElement = _ref.referenceElement;
+  var _useThemeObserver = (0, _useThemeObserver2.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  var previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
+  return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
+    key: previewImageUrl,
+    previewImageUrl: previewImageUrl,
+    referenceElement: referenceElement
+  });
+};
+var QuickInsertHoverPreviewImage = function QuickInsertHoverPreviewImage(_ref2) {
+  var previewImageUrl = _ref2.previewImageUrl,
+    referenceElement = _ref2.referenceElement;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    hasFailed = _useState2[0],
+    setHasFailed = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    dimensions = _useState4[0],
+    setDimensions = _useState4[1];
+  if (hasFailed) {
+    return null;
+  }
+
+  // Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
+  return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/React.createElement(_main.Popper, {
+    offset: PREVIEW_OFFSET,
+    placement: "right-start",
+    referenceElement: referenceElement,
+    strategy: "fixed",
+    shouldFitViewport: true,
+    modifiers: PREVIEW_MODIFIERS
+  }, function (_ref3) {
+    var ref = _ref3.ref,
+      style = _ref3.style;
+    return /*#__PURE__*/React.createElement("img", {
+      ref: ref,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
+        width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
+      }),
+      "aria-hidden": "true",
+      "data-testid": "quick-insert-hover-preview",
+      src: previewImageUrl,
+      alt: "",
+      onLoad: function onLoad(event) {
+        var _event$currentTarget = event.currentTarget,
+          naturalHeight = _event$currentTarget.naturalHeight,
+          naturalWidth = _event$currentTarget.naturalWidth;
+        if (naturalWidth === 0) {
+          return;
+        }
+        setDimensions({
+          height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
+          width: PREVIEW_WIDTH
+        });
+      },
+      onError: function onError() {
+        return setHasFailed(true);
+      },
+      className: (0, _runtime.ax)([styles.image, dimensions ? styles.visible : styles.hidden])
+    });
+  }), referenceElement.ownerDocument.body);
+};

package/dist/cjs/quick-insert/QuickInsertMenuItem.js

@@ -15,6 +15,7 @@ var QuickInsertMenuItem = exports.QuickInsertMenuItem = function QuickInsertMenu
     iconBefore = _ref.iconBefore,
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
+    previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
     shouldWrapIcon = _ref.shouldWrapIcon,
     title = _ref.title;
@@ -35,6 +36,7 @@ var QuickInsertMenuItem = exports.QuickInsertMenuItem = function QuickInsertMenu
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     onSelect: onSelect,
+    previewImageUrls: previewImageUrls,
     shortcut: shortcut,
     shouldWrapIcon: shouldWrapIcon,
     title: title

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 = "122.6.0";
+var packageVersion = "122.7.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/ui/Mention/mention-with-profilecard.js

@@ -8,7 +8,7 @@ exports.default = MentionWithProfileCard;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
-var _mention = require("@atlaskit/mention");
+var _resourcedMention = _interopRequireDefault(require("@atlaskit/mention/resourced-mention"));
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _anchor = require("@atlaskit/primitives/anchor");
@@ -65,7 +65,7 @@ function MentionWithProfileCard(_ref) {
   var actions = (0, _react.useMemo)(function () {
     return profilecardProvider.getActions(id, text, accessLevel);
   }, [accessLevel, id, profilecardProvider, text]);
-  var mention = /*#__PURE__*/_react.default.createElement(_mention.ResourcedMention, {
+  var mention = /*#__PURE__*/_react.default.createElement(_resourcedMention.default, {
     id: id,
     text: text,
     accessLevel: accessLevel,

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

@@ -10,7 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _element = require("@atlaskit/mention/element");
+var _resourcedMention = _interopRequireDefault(require("@atlaskit/mention/resourced-mention"));
 var _mentionWithProfilecard = _interopRequireDefault(require("./mention-with-profilecard"));
 var _excluded = ["id", "mentionNodeDataProvider", "userType"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -99,13 +99,13 @@ var MentionWithProviders = exports.MentionWithProviders = /*#__PURE__*/_react.de
       }
     });
   }, [profilecardProviderResolver]);
-  var MentionComponent = profilecardProvider && profilecardProviderResolver && GENERIC_USER_IDS.indexOf(id) === -1 ? _mentionWithProfilecard.default : _element.ResourcedMention;
+  var MentionComponent = profilecardProvider && profilecardProviderResolver && GENERIC_USER_IDS.indexOf(id) === -1 ? _mentionWithProfilecard.default : _resourcedMention.default;
   var ssrPlaceholderId = "mention-".concat(id);
 
   // A disabled mention is non-interactive, so it bypasses the profile-card
   // wrapper and renders the disabled resourced mention directly.
   if (isDisabled) {
-    return /*#__PURE__*/_react.default.createElement(_element.ResourcedMention, {
+    return /*#__PURE__*/_react.default.createElement(_resourcedMention.default, {
       id: id,
       text: text,
       accessLevel: accessLevel,

package/dist/cjs/ui-color/ColorPalette/index.js

@@ -55,7 +55,8 @@ var ColorPalette = function ColorPalette(props) {
     selectedColor = props.selectedColor,
     className = props.className,
     formatMessage = props.intl.formatMessage,
-    paletteOptions = props.paletteOptions;
+    paletteOptions = props.paletteOptions,
+    ariaLabel = props.ariaLabel;
   var palette = paletteOptions.palette,
     hexToPaletteColor = paletteOptions.hexToPaletteColor,
     paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
@@ -73,7 +74,8 @@ var ColorPalette = function ColorPalette(props) {
       ,
       className: className,
       key: "row-first-color-".concat(row[0].value),
-      role: "radiogroup"
+      role: "radiogroup",
+      "aria-label": ariaLabel
     }, row.map(function (_ref) {
       var value = _ref.value,
         label = _ref.label,

package/dist/cjs/utils/compareNodes.js

@@ -14,7 +14,6 @@ exports.createCompareNodes = void 0;
 exports.createNormalizeTextParser = createNormalizeTextParser;
 exports.extractMetaFromTextNode = extractMetaFromTextNode;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _types = require("../types");
 var _ContentType = require("./ContentType");
 function getLinkMark(node) {
@@ -238,10 +237,8 @@ function compareMetaFromNode(metaNodeA, metaNodeB) {
   if (metaNodeA === null || metaNodeB === null) {
     return metaNodeB === null ? -1 : 1;
   }
-  if ((0, _fg.fg)('platform_editor_fix_mixed_types_column_sort')) {
-    if (metaNodeA.type === _ContentType.ContentType.TEXT && metaNodeB.type === _ContentType.ContentType.NUMBER || metaNodeA.type === _ContentType.ContentType.NUMBER && metaNodeB.type === _ContentType.ContentType.TEXT) {
-      return compareValue(String(metaNodeA.value), String(metaNodeB.value));
-    }
+  if (metaNodeA.type === _ContentType.ContentType.TEXT && metaNodeB.type === _ContentType.ContentType.NUMBER || metaNodeA.type === _ContentType.ContentType.NUMBER && metaNodeB.type === _ContentType.ContentType.TEXT) {
+    return compareValue(String(metaNodeA.value), String(metaNodeB.value));
   }
   if (metaNodeA.type !== metaNodeB.type) {
     return metaNodeA.type > metaNodeB.type ? 1 : -1;

package/dist/es2019/media/messages/imageBorder.js

@@ -10,6 +10,11 @@ export const imageBorderMessages = defineMessages({
     defaultMessage: 'Image border options Color dropdown',
     description: 'ARIA label for the dropdown to change the border color of an image.'
   },
+  borderColorRadioGroupAriaLabel: {
+    id: 'fabric.editor.imageBorderColor.radioGroupAriaLabel',
+    defaultMessage: 'Color options',
+    description: 'ARIA label for the group of selectable border colors in the image border options panel.'
+  },
   borderSize: {
     id: 'fabric.editor.imageBorderSize',
     defaultMessage: 'Size',
@@ -20,6 +25,11 @@ export const imageBorderMessages = defineMessages({
     defaultMessage: 'Image border options Size dropdown',
     description: 'ARIA label for the dropdown to change the border size of an image.'
   },
+  borderSizeRadioGroupAriaLabel: {
+    id: 'fabric.editor.imageBorderSize.radioGroupAriaLabel',
+    defaultMessage: 'Size options',
+    description: 'ARIA label for the group of selectable border sizes in the image border options panel.'
+  },
   addBorder: {
     id: 'fabric.editor.addImageBorder',
     defaultMessage: 'Add border',

package/dist/es2019/media-inline/media-inline-image-card.js

@@ -9,7 +9,9 @@ import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { createIntl, injectIntl } from 'react-intl';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
-import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
+import { fireFailedOperationalEvent as fireFailedMediaInlineEvent } from '@atlaskit/media-card/inline/fire-failed-operational-event';
+import { fireSucceededOperationalEvent as fireSucceededMediaInlineEvent } from '@atlaskit/media-card/inline/fire-succeeded-operational-event';
+import { MediaCardError } from '@atlaskit/media-card/media-card-error';
 import { FileFetcherError } from '@atlaskit/media-client';
 import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
 import { MediaViewer } from '@atlaskit/media-viewer';

package/dist/es2019/monitoring/error.js

@@ -13,7 +13,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "122.6.0";
+const packageVersion = "122.7.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/quick-insert/CompactQuickInsertMenuItem.js

@@ -1,12 +1,13 @@
 /* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.1 */
 import "./CompactQuickInsertMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import ButtonItem from '@atlaskit/menu/button-item';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
+import { QuickInsertHoverPreview } from './QuickInsertHoverPreview';
 import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
 import { useQuickInsertContext } from './useQuickInsertContext';
 const styles = {
@@ -74,6 +75,7 @@ export const CompactQuickInsertMenuItem = ({
   iconBefore,
   isDisabled,
   onSelect,
+  previewImageUrls,
   shortcut,
   shouldWrapIcon = true,
   title
@@ -89,6 +91,7 @@ export const CompactQuickInsertMenuItem = ({
     isSelected: false
   };
   const handleClick = useQuickInsertMenuItemSelection(onSelect);
+  const [referenceElement, setReferenceElement] = useState(null);
   if (!isExperimentEnabled('platform_editor_slash_command')) {
     const wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
       xcss: styles.icon
@@ -113,7 +116,8 @@ export const CompactQuickInsertMenuItem = ({
   const wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
     xcss: styles.iconLarge
   }, iconBefore) : iconBefore;
-  return /*#__PURE__*/React.createElement(Pressable, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
+    ref: setReferenceElement,
     "aria-label": ariaLabel,
     "aria-selected": isSelected,
     id: id,
@@ -130,5 +134,9 @@ export const CompactQuickInsertMenuItem = ({
   }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.shortcut
-  }, shortcut)));
+  }, shortcut))), isSelected && !isDisabled && (previewImageUrls === null || previewImageUrls === void 0 ? void 0 : previewImageUrls.light) && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
+    key: previewImageUrls.light,
+    previewImageUrls: previewImageUrls,
+    referenceElement: referenceElement
+  }));
 };

package/dist/es2019/quick-insert/QuickInsertHoverPreview.compiled.css

@@ -0,0 +1,4 @@
+._1e0c1ule{display:block}
+._1pby16oo{z-index:510}
+._3um015vq{visibility:hidden}
+._3um0ewfl{visibility:visible}

package/dist/es2019/quick-insert/QuickInsertHoverPreview.js

@@ -0,0 +1,87 @@
+/* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.1 */
+import "./QuickInsertHoverPreview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Popper } from '@atlaskit/popper/main';
+import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
+const PREVIEW_WIDTH = 294;
+const PREVIEW_OFFSET = [-4, 4];
+const PREVIEW_MODIFIERS = [{
+  name: 'preventOverflow',
+  options: {
+    mainAxis: false
+  }
+}];
+const styles = {
+  image: "_1e0c1ule _1pby16oo",
+  hidden: "_3um015vq",
+  visible: "_3um0ewfl"
+};
+
+/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
+export const QuickInsertHoverPreview = ({
+  previewImageUrls,
+  referenceElement
+}) => {
+  const {
+    colorMode
+  } = useThemeObserver();
+  const previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
+  return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
+    key: previewImageUrl,
+    previewImageUrl: previewImageUrl,
+    referenceElement: referenceElement
+  });
+};
+const QuickInsertHoverPreviewImage = ({
+  previewImageUrl,
+  referenceElement
+}) => {
+  const [hasFailed, setHasFailed] = useState(false);
+  const [dimensions, setDimensions] = useState();
+  if (hasFailed) {
+    return null;
+  }
+
+  // Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
+    offset: PREVIEW_OFFSET,
+    placement: "right-start",
+    referenceElement: referenceElement,
+    strategy: "fixed",
+    shouldFitViewport: true,
+    modifiers: PREVIEW_MODIFIERS
+  }, ({
+    ref,
+    style
+  }) => /*#__PURE__*/React.createElement("img", {
+    ref: ref,
+    style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Popper positioning and intrinsic image dimensions are runtime values.
+      ...style,
+      height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
+      width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
+    },
+    "aria-hidden": "true",
+    "data-testid": "quick-insert-hover-preview",
+    src: previewImageUrl,
+    alt: "",
+    onLoad: event => {
+      const {
+        naturalHeight,
+        naturalWidth
+      } = event.currentTarget;
+      if (naturalWidth === 0) {
+        return;
+      }
+      setDimensions({
+        height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
+        width: PREVIEW_WIDTH
+      });
+    },
+    onError: () => setHasFailed(true),
+    className: ax([styles.image, dimensions ? styles.visible : styles.hidden])
+  })), referenceElement.ownerDocument.body);
+};

package/dist/es2019/quick-insert/QuickInsertMenuItem.js

@@ -8,6 +8,7 @@ export const QuickInsertMenuItem = ({
   iconBefore,
   isDisabled,
   onSelect,
+  previewImageUrls,
   shortcut,
   shouldWrapIcon,
   title
@@ -30,6 +31,7 @@ export const QuickInsertMenuItem = ({
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     onSelect: onSelect,
+    previewImageUrls: previewImageUrls,
     shortcut: shortcut,
     shouldWrapIcon: shouldWrapIcon,
     title: title

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "122.6.0";
+const packageVersion = "122.7.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/ui/Mention/mention-with-profilecard.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import Loadable from 'react-loadable';
-import { ResourcedMention } from '@atlaskit/mention';
+import ResourcedMention from '@atlaskit/mention/resourced-mention';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { ResourcedMention } from '@atlaskit/mention/element';
+import ResourcedMention from '@atlaskit/mention/resourced-mention';
 import ResourcedMentionWithProfilecard from './mention-with-profilecard';
 const GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
 const useMentionNodeData = ({

package/dist/es2019/ui-color/ColorPalette/index.js

@@ -47,7 +47,8 @@ const ColorPalette = props => {
     intl: {
       formatMessage
     },
-    paletteOptions
+    paletteOptions,
+    ariaLabel
   } = props;
   const {
     palette,
@@ -68,7 +69,8 @@ const ColorPalette = props => {
     ,
     className: className,
     key: `row-first-color-${row[0].value}`,
-    role: "radiogroup"
+    role: "radiogroup",
+    "aria-label": ariaLabel
   }, row.map(({
     value,
     label,

package/dist/es2019/utils/compareNodes.js

@@ -1,4 +1,3 @@
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { SortOrder } from '../types';
 import { ContentType } from './ContentType';
 function getLinkMark(node) {
@@ -217,10 +216,8 @@ function compareMetaFromNode(metaNodeA, metaNodeB) {
   if (metaNodeA === null || metaNodeB === null) {
     return metaNodeB === null ? -1 : 1;
   }
-  if (fg('platform_editor_fix_mixed_types_column_sort')) {
-    if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
-      return compareValue(String(metaNodeA.value), String(metaNodeB.value));
-    }
+  if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
+    return compareValue(String(metaNodeA.value), String(metaNodeB.value));
   }
   if (metaNodeA.type !== metaNodeB.type) {
     return metaNodeA.type > metaNodeB.type ? 1 : -1;

package/dist/esm/media/messages/imageBorder.js

@@ -10,6 +10,11 @@ export var imageBorderMessages = defineMessages({
     defaultMessage: 'Image border options Color dropdown',
     description: 'ARIA label for the dropdown to change the border color of an image.'
   },
+  borderColorRadioGroupAriaLabel: {
+    id: 'fabric.editor.imageBorderColor.radioGroupAriaLabel',
+    defaultMessage: 'Color options',
+    description: 'ARIA label for the group of selectable border colors in the image border options panel.'
+  },
   borderSize: {
     id: 'fabric.editor.imageBorderSize',
     defaultMessage: 'Size',
@@ -20,6 +25,11 @@ export var imageBorderMessages = defineMessages({
     defaultMessage: 'Image border options Size dropdown',
     description: 'ARIA label for the dropdown to change the border size of an image.'
   },
+  borderSizeRadioGroupAriaLabel: {
+    id: 'fabric.editor.imageBorderSize.radioGroupAriaLabel',
+    defaultMessage: 'Size options',
+    description: 'ARIA label for the group of selectable border sizes in the image border options panel.'
+  },
   addBorder: {
     id: 'fabric.editor.addImageBorder',
     defaultMessage: 'Add border',

package/dist/esm/media-inline/media-inline-image-card.js

@@ -13,7 +13,9 @@ import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { createIntl, injectIntl } from 'react-intl';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next/useAnalyticsEvents';
-import { fireFailedMediaInlineEvent, fireSucceededMediaInlineEvent, MediaCardError } from '@atlaskit/media-card';
+import { fireFailedOperationalEvent as fireFailedMediaInlineEvent } from '@atlaskit/media-card/inline/fire-failed-operational-event';
+import { fireSucceededOperationalEvent as fireSucceededMediaInlineEvent } from '@atlaskit/media-card/inline/fire-succeeded-operational-event';
+import { MediaCardError } from '@atlaskit/media-card/media-card-error';
 import { FileFetcherError } from '@atlaskit/media-client';
 import { MediaClientContext } from '@atlaskit/media-client-react/media-client-provider';
 import { MediaViewer } from '@atlaskit/media-viewer';

package/dist/esm/monitoring/error.js

@@ -19,7 +19,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 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 = "122.6.0";
+var packageVersion = "122.7.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/quick-insert/CompactQuickInsertMenuItem.js

@@ -1,12 +1,14 @@
 /* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./CompactQuickInsertMenuItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import ButtonItem from '@atlaskit/menu/button-item';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- Compiled primitives do not provide Pressable.
 import { Pressable, xcss } from '@atlaskit/primitives';
 import { Box, Inline, Text } from '@atlaskit/primitives/compiled';
+import { QuickInsertHoverPreview } from './QuickInsertHoverPreview';
 import { useQuickInsertMenuItemSelection } from './quickInsertMenuItemUtils';
 import { useQuickInsertContext } from './useQuickInsertContext';
 var styles = {
@@ -74,6 +76,7 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
     iconBefore = _ref.iconBefore,
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
+    previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
     _ref$shouldWrapIcon = _ref.shouldWrapIcon,
     shouldWrapIcon = _ref$shouldWrapIcon === void 0 ? true : _ref$shouldWrapIcon,
@@ -87,6 +90,10 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
     id = _ref2.id,
     isSelected = _ref2.isSelected;
   var handleClick = useQuickInsertMenuItemSelection(onSelect);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    referenceElement = _useState2[0],
+    setReferenceElement = _useState2[1];
   if (!isExperimentEnabled('platform_editor_slash_command')) {
     var _wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
       xcss: styles.icon
@@ -111,7 +118,8 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
   var wrappedIcon = iconBefore && shouldWrapIcon ? /*#__PURE__*/React.createElement(Box, {
     xcss: styles.iconLarge
   }, iconBefore) : iconBefore;
-  return /*#__PURE__*/React.createElement(Pressable, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pressable, {
+    ref: setReferenceElement,
     "aria-label": ariaLabel,
     "aria-selected": isSelected,
     id: id,
@@ -128,5 +136,9 @@ export var CompactQuickInsertMenuItem = function CompactQuickInsertMenuItem(_ref
   }, /*#__PURE__*/React.createElement(Text, null, title), shortcut && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.shortcut
-  }, shortcut)));
+  }, shortcut))), isSelected && !isDisabled && (previewImageUrls === null || previewImageUrls === void 0 ? void 0 : previewImageUrls.light) && referenceElement && /*#__PURE__*/React.createElement(QuickInsertHoverPreview, {
+    key: previewImageUrls.light,
+    previewImageUrls: previewImageUrls,
+    referenceElement: referenceElement
+  }));
 };

package/dist/esm/quick-insert/QuickInsertHoverPreview.compiled.css

@@ -0,0 +1,4 @@
+._1e0c1ule{display:block}
+._1pby16oo{z-index:510}
+._3um015vq{visibility:hidden}
+._3um0ewfl{visibility:visible}

package/dist/esm/quick-insert/QuickInsertHoverPreview.js

@@ -0,0 +1,94 @@
+/* QuickInsertHoverPreview.tsx generated by @compiled/babel-plugin v3.0.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./QuickInsertHoverPreview.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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 { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Popper } from '@atlaskit/popper/main';
+import { useThemeObserver } from '@atlaskit/tokens/use-theme-observer';
+var PREVIEW_WIDTH = 294;
+var PREVIEW_OFFSET = [-4, 4];
+var PREVIEW_MODIFIERS = [{
+  name: 'preventOverflow',
+  options: {
+    mainAxis: false
+  }
+}];
+var styles = {
+  image: "_1e0c1ule _1pby16oo",
+  hidden: "_3um015vq",
+  visible: "_3um0ewfl"
+};
+
+/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
+export var QuickInsertHoverPreview = function QuickInsertHoverPreview(_ref) {
+  var previewImageUrls = _ref.previewImageUrls,
+    referenceElement = _ref.referenceElement;
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  var previewImageUrl = colorMode === 'dark' && previewImageUrls.dark ? previewImageUrls.dark : previewImageUrls.light;
+  return /*#__PURE__*/React.createElement(QuickInsertHoverPreviewImage, {
+    key: previewImageUrl,
+    previewImageUrl: previewImageUrl,
+    referenceElement: referenceElement
+  });
+};
+var QuickInsertHoverPreviewImage = function QuickInsertHoverPreviewImage(_ref2) {
+  var previewImageUrl = _ref2.previewImageUrl,
+    referenceElement = _ref2.referenceElement;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasFailed = _useState2[0],
+    setHasFailed = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dimensions = _useState4[0],
+    setDimensions = _useState4[1];
+  if (hasFailed) {
+    return null;
+  }
+
+  // Unlike a dialog popup, this decorative preview must not introduce focus or ARIA ownership.
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(Popper, {
+    offset: PREVIEW_OFFSET,
+    placement: "right-start",
+    referenceElement: referenceElement,
+    strategy: "fixed",
+    shouldFitViewport: true,
+    modifiers: PREVIEW_MODIFIERS
+  }, function (_ref3) {
+    var ref = _ref3.ref,
+      style = _ref3.style;
+    return /*#__PURE__*/React.createElement("img", {
+      ref: ref,
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        height: dimensions === null || dimensions === void 0 ? void 0 : dimensions.height,
+        width: dimensions === null || dimensions === void 0 ? void 0 : dimensions.width
+      }),
+      "aria-hidden": "true",
+      "data-testid": "quick-insert-hover-preview",
+      src: previewImageUrl,
+      alt: "",
+      onLoad: function onLoad(event) {
+        var _event$currentTarget = event.currentTarget,
+          naturalHeight = _event$currentTarget.naturalHeight,
+          naturalWidth = _event$currentTarget.naturalWidth;
+        if (naturalWidth === 0) {
+          return;
+        }
+        setDimensions({
+          height: naturalHeight / naturalWidth * PREVIEW_WIDTH,
+          width: PREVIEW_WIDTH
+        });
+      },
+      onError: function onError() {
+        return setHasFailed(true);
+      },
+      className: ax([styles.image, dimensions ? styles.visible : styles.hidden])
+    });
+  }), referenceElement.ownerDocument.body);
+};

package/dist/esm/quick-insert/QuickInsertMenuItem.js

@@ -8,6 +8,7 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
     iconBefore = _ref.iconBefore,
     isDisabled = _ref.isDisabled,
     onSelect = _ref.onSelect,
+    previewImageUrls = _ref.previewImageUrls,
     shortcut = _ref.shortcut,
     shouldWrapIcon = _ref.shouldWrapIcon,
     title = _ref.title;
@@ -28,6 +29,7 @@ export var QuickInsertMenuItem = function QuickInsertMenuItem(_ref) {
     iconBefore: iconBefore,
     isDisabled: isDisabled,
     onSelect: onSelect,
+    previewImageUrls: previewImageUrls,
     shortcut: shortcut,
     shouldWrapIcon: shouldWrapIcon,
     title: title

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

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "122.6.0";
+var packageVersion = "122.7.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import Loadable from 'react-loadable';
-import { ResourcedMention } from '@atlaskit/mention';
+import ResourcedMention from '@atlaskit/mention/resourced-mention';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- TODO: migrate to @atlaskit/primitives/compiled

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["id", "mentionNodeDataProvider", "userType"];
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { ResourcedMention } from '@atlaskit/mention/element';
+import ResourcedMention from '@atlaskit/mention/resourced-mention';
 import ResourcedMentionWithProfilecard from './mention-with-profilecard';
 var GENERIC_USER_IDS = ['HipChat', 'all', 'here'];
 var useMentionNodeData = function useMentionNodeData(_ref) {

package/dist/esm/ui-color/ColorPalette/index.js

@@ -47,7 +47,8 @@ var ColorPalette = function ColorPalette(props) {
     selectedColor = props.selectedColor,
     className = props.className,
     formatMessage = props.intl.formatMessage,
-    paletteOptions = props.paletteOptions;
+    paletteOptions = props.paletteOptions,
+    ariaLabel = props.ariaLabel;
   var palette = paletteOptions.palette,
     hexToPaletteColor = paletteOptions.hexToPaletteColor,
     paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
@@ -65,7 +66,8 @@ var ColorPalette = function ColorPalette(props) {
       ,
       className: className,
       key: "row-first-color-".concat(row[0].value),
-      role: "radiogroup"
+      role: "radiogroup",
+      "aria-label": ariaLabel
     }, row.map(function (_ref) {
       var value = _ref.value,
         label = _ref.label,

package/dist/esm/utils/compareNodes.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { SortOrder } from '../types';
 import { ContentType } from './ContentType';
 function getLinkMark(node) {
@@ -223,10 +222,8 @@ function compareMetaFromNode(metaNodeA, metaNodeB) {
   if (metaNodeA === null || metaNodeB === null) {
     return metaNodeB === null ? -1 : 1;
   }
-  if (fg('platform_editor_fix_mixed_types_column_sort')) {
-    if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
-      return compareValue(String(metaNodeA.value), String(metaNodeB.value));
-    }
+  if (metaNodeA.type === ContentType.TEXT && metaNodeB.type === ContentType.NUMBER || metaNodeA.type === ContentType.NUMBER && metaNodeB.type === ContentType.TEXT) {
+    return compareValue(String(metaNodeA.value), String(metaNodeB.value));
   }
   if (metaNodeA.type !== metaNodeB.type) {
     return metaNodeA.type > metaNodeB.type ? 1 : -1;

package/dist/types/media/messages/imageBorder.d.ts

@@ -1,52 +1,62 @@
 export declare const imageBorderMessages: {
-    borderColor: {
-        id: string;
+    addBorder: {
         defaultMessage: string;
         description: string;
-    };
-    borderColorDropdownAriaLabel: {
         id: string;
+    };
+    borderColor: {
         defaultMessage: string;
         description: string;
-    };
-    borderSize: {
         id: string;
+    };
+    borderColorDropdownAriaLabel: {
         defaultMessage: string;
         description: string;
-    };
-    borderSizeDropdownAriaLabel: {
         id: string;
+    };
+    borderColorRadioGroupAriaLabel: {
         defaultMessage: string;
         description: string;
-    };
-    addBorder: {
         id: string;
+    };
+    borderOptions: {
         defaultMessage: string;
         description: string;
-    };
-    removeBorder: {
         id: string;
+    };
+    borderSize: {
         defaultMessage: string;
         description: string;
-    };
-    borderOptions: {
         id: string;
+    };
+    borderSizeBold: {
         defaultMessage: string;
         description: string;
-    };
-    borderSizeSubtle: {
         id: string;
+    };
+    borderSizeDropdownAriaLabel: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
     borderSizeMedium: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    borderSizeRadioGroupAriaLabel: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
-    borderSizeBold: {
+    borderSizeSubtle: {
+        defaultMessage: string;
+        description: string;
         id: string;
+    };
+    removeBorder: {
         defaultMessage: string;
         description: string;
+        id: string;
     };
 };

package/dist/types/quick-insert/CompactQuickInsertMenuItem.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { QuickInsertMenuItemProps } from './QuickInsertMenuItem';
-export declare const CompactQuickInsertMenuItem: ({ ariaLabel, iconBefore, isDisabled, onSelect, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;
+export declare const CompactQuickInsertMenuItem: ({ ariaLabel, iconBefore, isDisabled, onSelect, previewImageUrls, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;

package/dist/types/quick-insert/QuickInsertHoverPreview.d.ts

@@ -0,0 +1,8 @@
+/** A non-interactive visual preview: keep focus and keyboard handling in the editor. */
+export declare const QuickInsertHoverPreview: ({ previewImageUrls, referenceElement, }: {
+    previewImageUrls: {
+        dark?: string;
+        light: string;
+    };
+    referenceElement: HTMLElement;
+}) => React.JSX.Element;

package/dist/types/quick-insert/QuickInsertMenuItem.d.ts

@@ -14,8 +14,13 @@ export type QuickInsertMenuItemProps = {
     iconBefore?: React.ReactNode;
     isDisabled?: boolean;
     onSelect: (context: OnSelectContext) => Transaction | false | void;
+    /** Approved preview images, loaded only while this slash-command item is selected. */
+    previewImageUrls?: {
+        dark?: string;
+        light: string;
+    } | null;
     shortcut?: string;
     shouldWrapIcon?: boolean;
     title: string;
 };
-export declare const QuickInsertMenuItem: ({ ariaLabel, description, iconBefore, isDisabled, onSelect, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;
+export declare const QuickInsertMenuItem: ({ ariaLabel, description, iconBefore, isDisabled, onSelect, previewImageUrls, shortcut, shouldWrapIcon, title, }: QuickInsertMenuItemProps) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { SyntheticEvent } from 'react';
-import type { CardEvent, InlineCardEvent } from '@atlaskit/media-card';
+import type { CardEvent, InlineCardEvent } from '@atlaskit/media-card/types';
 import type { Identifier } from '@atlaskit/media-client';
 export interface CardSurroundings {
     collectionName: string;

package/dist/types/ui/Mention/mention-with-profilecard.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { UserType as MentionUserType } from '@atlaskit/adf-schema/mention';
-import type { MentionProvider } from '@atlaskit/mention';
+import type { MentionProvider } from '@atlaskit/mention/types';
 import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
 import type { MentionEventHandler } from '../EventHandlers';
 export interface Props {

package/dist/types/ui/Mention/mention-with-providers.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import type { UserType as MentionUserType } from '@atlaskit/adf-schema/mention';
-import type { MentionProvider } from '@atlaskit/mention/resource';
-import type { MentionNodeData } from '@atlaskit/mention/types';
+import type { MentionNodeData, MentionProvider } from '@atlaskit/mention/types';
 import type { ProfilecardProvider } from '../../provider-factory/profile-card-provider';
 import type { MentionEventHandlers } from '../EventHandlers';
 import type { MentionNodeDataProvider } from './mention-node-data-provider';

package/dist/types/ui-color/ColorPalette/index.d.ts

@@ -6,6 +6,10 @@ import React from 'react';
 import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import type { PaletteColor, PaletteTooltipMessages } from './Palettes/type';
 interface Props {
+    /**
+     * Accessible name for the radio group each row of colors is rendered as.
+     */
+    ariaLabel?: string;
     className?: string;
     cols?: number;
     onClick: (value: string, label: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "122.6.1",
+	"version": "122.8.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -84,7 +84,7 @@
 		"@atlaskit/task-decision": "^21.10.0",
 		"@atlaskit/teams-app-config": "^3.1.0",
 		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tmp-editor-statsig": "^195.0.0",
+		"@atlaskit/tmp-editor-statsig": "^196.0.0",
 		"@atlaskit/tokens": "^17.0.0",
 		"@atlaskit/tooltip": "^24.3.0",
 		"@atlaskit/width-detector": "^7.2.0",
@@ -215,9 +215,6 @@
 		"platform_editor_content_mode_button_mvp": {
 			"type": "boolean"
 		},
-		"platform_editor_fix_mixed_types_column_sort": {
-			"type": "boolean"
-		},
 		"jim-lower-ranking-in-jira-macro-search": {
 			"type": "boolean"
 		},