@atlaskit/editor-common 122.6.0 → 122.7.0

package/dist/es2019/preset/core-plugin/index.js

@@ -1,6 +1,5 @@
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeIdProvider } from '../../node-anchor/node-anchor-provider';
 import { processRawFragmentValue } from '../../utils/processRawFragmentValue';
 import { processRawValue, processRawValueWithoutValidation } from '../../utils/processRawValue';
@@ -24,17 +23,14 @@ export const corePlugin = ({
       const pluginState = state && appearancePluginKey.getState(state);
       return {
         schema: state === null || state === void 0 ? void 0 : state.schema,
-        appearance: expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true) ? pluginState === null || pluginState === void 0 ? void 0 : pluginState.appearance : undefined
+        appearance: pluginState === null || pluginState === void 0 ? void 0 : pluginState.appearance
       };
     },
     pmPlugins() {
-      if (expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true)) {
-        return [{
-          name: 'appearancePlugin',
-          plugin: () => createAppearancePlugin(config === null || config === void 0 ? void 0 : config.appearance)
-        }];
-      }
-      return [];
+      return [{
+        name: 'appearancePlugin',
+        plugin: () => createAppearancePlugin(config === null || config === void 0 ? void 0 : config.appearance)
+      }];
     },
     actions: {
       execute: command => {
@@ -111,9 +107,6 @@ export const corePlugin = ({
       },
       updateAppearance: newAppearance => {
         var _appearancePluginKey$;
-        if (!expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true)) {
-          return false;
-        }
         const editorView = config === null || config === void 0 ? void 0 : config.getEditorView();
         if (!editorView) {
           return false;

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

@@ -1,12 +1,13 @@
-/* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.2 */
 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.2 */
+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/table/NewSortingIcon.js

@@ -1,4 +1,4 @@
-/* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./NewSortingIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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.5.0";
+const packageVersion = "122.6.1";
 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/Shortcut/index.js

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/ui/Toolbar/ButtonGroup.js

@@ -1,4 +1,4 @@
-/* ButtonGroup.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* ButtonGroup.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./ButtonGroup.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/ui/Toolbar/DropdownTriggerWrapper.js

@@ -1,4 +1,4 @@
-/* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* DropdownTriggerWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./DropdownTriggerWrapper.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/ui/Toolbar/DropdownWrapper.js

@@ -1,4 +1,4 @@
-/* DropdownWrapper.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* DropdownWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./DropdownWrapper.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

package/dist/es2019/ui/Toolbar/ExpandIcon.js

@@ -1,4 +1,4 @@
-/* ExpandIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* ExpandIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./ExpandIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/Toolbar/Separator.js

@@ -1,4 +1,4 @@
-/* Separator.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* Separator.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./Separator.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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/element-browser/components/ViewMore.js

@@ -1,4 +1,4 @@
-/* ViewMore.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* ViewMore.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./ViewMore.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/extensibility/Extension/Lozenge/ExtensionFloatingLabel.js

@@ -1,4 +1,4 @@
-/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* ExtensionFloatingLabel.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./ExtensionFloatingLabel.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/extensibility/GeneratedContentReveal.js

@@ -1,4 +1,4 @@
-/* GeneratedContentReveal.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* GeneratedContentReveal.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./GeneratedContentReveal.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/extensions/UnknownMacroPlaceholder.js

@@ -1,4 +1,4 @@
-/* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* UnknownMacroPlaceholder.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./UnknownMacroPlaceholder.compiled.css";
 import * as React from 'react';

package/dist/esm/icons/shared/PanelErrorIcon.js

@@ -1,4 +1,4 @@
-/* PanelErrorIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* PanelErrorIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./PanelErrorIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/icons/shared/PanelInfoIcon.js

@@ -1,4 +1,4 @@
-/* PanelInfoIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* PanelInfoIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./PanelInfoIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/icons/shared/PanelNoteIcon.js

@@ -1,4 +1,4 @@
-/* PanelNoteIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* PanelNoteIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./PanelNoteIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/icons/shared/PanelSuccessIcon.js

@@ -1,4 +1,4 @@
-/* PanelSuccessIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* PanelSuccessIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./PanelSuccessIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/icons/shared/PanelWarningIcon.js

@@ -1,4 +1,4 @@
-/* PanelWarningIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* PanelWarningIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./PanelWarningIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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.5.0";
+var packageVersion = "122.6.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/preset/core-plugin/index.js

@@ -1,6 +1,5 @@
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeIdProvider } from '../../node-anchor/node-anchor-provider';
 import { processRawFragmentValue } from '../../utils/processRawFragmentValue';
 import { processRawValue, processRawValueWithoutValidation } from '../../utils/processRawValue';
@@ -23,19 +22,16 @@ export var corePlugin = function corePlugin(_ref) {
       var pluginState = state && appearancePluginKey.getState(state);
       return {
         schema: state === null || state === void 0 ? void 0 : state.schema,
-        appearance: expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true) ? pluginState === null || pluginState === void 0 ? void 0 : pluginState.appearance : undefined
+        appearance: pluginState === null || pluginState === void 0 ? void 0 : pluginState.appearance
       };
     },
     pmPlugins: function pmPlugins() {
-      if (expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true)) {
-        return [{
-          name: 'appearancePlugin',
-          plugin: function plugin() {
-            return createAppearancePlugin(config === null || config === void 0 ? void 0 : config.appearance);
-          }
-        }];
-      }
-      return [];
+      return [{
+        name: 'appearancePlugin',
+        plugin: function plugin() {
+          return createAppearancePlugin(config === null || config === void 0 ? void 0 : config.appearance);
+        }
+      }];
     },
     actions: {
       execute: function execute(command) {
@@ -110,9 +106,6 @@ export var corePlugin = function corePlugin(_ref) {
       },
       updateAppearance: function updateAppearance(newAppearance) {
         var _appearancePluginKey$;
-        if (!expValEquals('platform_editor_appearance_shared_state', 'isEnabled', true)) {
-          return false;
-        }
         var editorView = config === null || config === void 0 ? void 0 : config.getEditorView();
         if (!editorView) {
           return false;

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

@@ -1,12 +1,14 @@
-/* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* CompactQuickInsertMenuItem.tsx generated by @compiled/babel-plugin v3.0.2 */
+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.2 */
+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/table/NewSortingIcon.js

@@ -1,4 +1,4 @@
-/* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* NewSortingIcon.tsx generated by @compiled/babel-plugin v3.0.2 */
 import "./NewSortingIcon.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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.5.0";
+var packageVersion = "122.6.1";
 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