@atlaskit/editor-common 93.4.4 → 93.5.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-common
 
+## 93.5.1
+
+### Patch Changes
+
+- [#152594](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152594)
+  [`4f17733c95c94`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f17733c95c94) -
+  [ux] ED-25093: Migrated media toolbar to use the new icons
+- Updated dependencies
+
+## 93.5.0
+
+### Minor Changes
+
+- [#151611](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151611)
+  [`ee71cb75c933c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee71cb75c933c) -
+  ED-25294 add new attribute as engagement platform message trigger
+
+### Patch Changes
+
+- [#152399](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152399)
+  [`fbd7217f0cb51`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fbd7217f0cb51) -
+  [ux] ED-25092: Added iconFallback prop to FloatingToolbarDropdown
+- [#151611](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/151611)
+  [`c866e61e26ae2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c866e61e26ae2) -
+  [ux] [ED-25306] When opening the media picker from the editor main toolbar do not use the
+  ToolbarArrowKeyNavigationProvider
+- [#152510](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152510)
+  [`dcf9edde7ac7b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/dcf9edde7ac7b) -
+  bump adf-schema to 42.0.1
+- Updated dependencies
+
 ## 93.4.4
 
 ### Patch Changes

package/dist/cjs/card/MediaAndEmbedsToolbar/index.js

@@ -8,9 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.wrappingIcons = exports.layoutToMessages = exports.default = exports.alignmentIcons = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _contentAlignCenter = _interopRequireDefault(require("@atlaskit/icon/core/content-align-center"));
+var _contentAlignLeft = _interopRequireDefault(require("@atlaskit/icon/core/content-align-left"));
+var _contentAlignRight = _interopRequireDefault(require("@atlaskit/icon/core/content-align-right"));
+var _contentWrapLeft = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-left"));
+var _contentWrapRight = _interopRequireDefault(require("@atlaskit/icon/core/content-wrap-right"));
 var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
 var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
 var _alignImageRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-right"));
@@ -33,24 +39,59 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var alignmentIcons = exports.alignmentIcons = [{
   id: 'editor.media.alignLeft',
   value: 'align-start',
-  icon: _alignImageLeft.default
+  icon: function icon() {
+    return /*#__PURE__*/_react.default.createElement(_contentAlignLeft.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-align-left-icon",
+      LEGACY_fallbackIcon: _alignImageLeft.default
+    });
+  }
 }, {
   id: 'editor.media.alignCenter',
   value: 'center',
-  icon: _alignImageCenter.default
+  icon: function icon() {
+    return /*#__PURE__*/_react.default.createElement(_contentAlignCenter.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-align-center-icon",
+      LEGACY_fallbackIcon: _alignImageCenter.default
+    });
+  }
 }, {
   id: 'editor.media.alignRight',
   value: 'align-end',
-  icon: _alignImageRight.default
+  icon: function icon() {
+    return /*#__PURE__*/_react.default.createElement(_contentAlignRight.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-align-right-icon",
+      LEGACY_fallbackIcon: _alignImageRight.default
+    });
+  }
 }];
 var wrappingIcons = exports.wrappingIcons = [{
   id: 'editor.media.wrapLeft',
   value: 'wrap-left',
-  icon: _mediaWrapLeft.default
+  icon: function icon() {
+    return /*#__PURE__*/_react.default.createElement(_contentWrapLeft.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-wrap-left-icon",
+      LEGACY_fallbackIcon: _mediaWrapLeft.default
+    });
+  }
 }, {
   id: 'editor.media.wrapRight',
   value: 'wrap-right',
-  icon: _mediaWrapRight.default
+  icon: function icon() {
+    return /*#__PURE__*/_react.default.createElement(_contentWrapRight.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-wrap-right-icon",
+      LEGACY_fallbackIcon: _mediaWrapRight.default
+    });
+  }
 }];
 var breakoutIcons = [{
   value: 'wide',
@@ -89,7 +130,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    var newAttrs = (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
     _objectSpread(_objectSpread({}, node.attrs), {}, {
       layout: layout
     }) : (0, _utils2.alignAttributes)(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
@@ -122,7 +163,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
   };
 };
 var getToolbarLayout = function getToolbarLayout(layout) {
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.media.extended-resize-experience') && _utils2.nonWrappedLayouts.includes(layout)) {
+  if (_utils2.nonWrappedLayouts.includes(layout) && (0, _platformFeatureFlags.fg)('platform.editor.media.extended-resize-experience')) {
     return 'center';
   }
   return layout;

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "93.4.4";
+var packageVersion = "93.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

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

@@ -12,6 +12,8 @@ var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../analytics");
 var _uiColor = require("../../ui-color");
@@ -30,8 +32,11 @@ var _types = require("../ArrowKeyNavigationProvider/types");
 var colorPickerButtonWrapper = (0, _react2.css)({
   position: 'relative'
 });
-var colorPickerExpandContainer = (0, _react2.css)({
-  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+var colorPickerExpandContainer = (0, _primitives.xcss)({
+  marginTop: 'space.0',
+  marginBottom: 'space.0',
+  marginLeft: 'space.negative.050',
+  marginRight: 'space.negative.050'
 });
 
 // Control the size of color picker buttons and preview
@@ -228,10 +233,13 @@ var ColorPickerButton = function ColorPickerButton(props) {
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     ,
     css: buttonStyle,
-    iconAfter: (0, _react2.jsx)("span", {
-      css: colorPickerExpandContainer
-    }, (0, _react2.jsx)(_chevronDown.default, {
-      label: ""
+    iconAfter: (0, _react2.jsx)(_primitives.Box, {
+      xcss: colorPickerExpandContainer
+    }, (0, _react2.jsx)(_chevronDown2.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: _chevronDown.default,
+      label: "color-picker-chevron-down"
     })),
     "data-selected-color": props.currentColor
   })), renderPopup());

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

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _elementBrowser = require("../../element-browser");
 var _messages = require("../../messages");
+var _mediaInsert = require("../../messages/media-insert");
 var _ui = require("../../ui");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -16,7 +17,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @jsxRuntime classic
  * @jsx jsx
  */
-/* eslint-disable no-console */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -144,6 +144,11 @@ var ToolbarArrowKeyNavigationProvider = exports.ToolbarArrowKeyNavigationProvide
       if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
         return;
       }
+
+      // If the target element is the media picker then navigation is handled by the media picker
+      if (targetElement instanceof HTMLElement && targetElement.closest("[aria-label=\"".concat(intl.formatMessage(_mediaInsert.mediaInsertMessages.mediaPickerPopupAriaLabel), "\"]"))) {
+        return;
+      }
       if (targetElement instanceof HTMLElement && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(targetElement))) {
         selectedItemIndex.current = -1;
       } else {
@@ -196,7 +201,7 @@ var ToolbarArrowKeyNavigationProvider = exports.ToolbarArrowKeyNavigationProvide
         editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
       }
     };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar, intl]);
   return (0, _react2.jsx)("div", {
     css: editorAppearance === 'comment' && centeredToolbarContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/card/MediaAndEmbedsToolbar/index.js

@@ -1,6 +1,12 @@
+import React from 'react';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import ContentAlignCenterIcon from '@atlaskit/icon/core/content-align-center';
+import ContentAlignLeftIcon from '@atlaskit/icon/core/content-align-left';
+import ContentAlignRightIcon from '@atlaskit/icon/core/content-align-right';
+import ContentWrapLeftIcon from '@atlaskit/icon/core/content-wrap-left';
+import ContentWrapRightIcon from '@atlaskit/icon/core/content-wrap-right';
 import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
 import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
@@ -8,7 +14,7 @@ import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
 import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { insideTable } from '../../core-utils';
 import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
@@ -20,24 +26,49 @@ import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../util
 export const alignmentIcons = [{
   id: 'editor.media.alignLeft',
   value: 'align-start',
-  icon: EditorAlignImageLeft
+  icon: () => /*#__PURE__*/React.createElement(ContentAlignLeftIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: "media-toolbar-align-left-icon",
+    LEGACY_fallbackIcon: EditorAlignImageLeft
+  })
 }, {
   id: 'editor.media.alignCenter',
   value: 'center',
-  icon: EditorAlignImageCenter
+  icon: () => /*#__PURE__*/React.createElement(ContentAlignCenterIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: "media-toolbar-align-center-icon",
+    LEGACY_fallbackIcon: EditorAlignImageCenter
+  })
 }, {
   id: 'editor.media.alignRight',
   value: 'align-end',
-  icon: EditorAlignImageRight
+  icon: () => /*#__PURE__*/React.createElement(ContentAlignRightIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: "media-toolbar-align-right-icon",
+    LEGACY_fallbackIcon: EditorAlignImageRight
+  })
 }];
 export const wrappingIcons = [{
   id: 'editor.media.wrapLeft',
   value: 'wrap-left',
-  icon: WrapLeftIcon
+  icon: () => /*#__PURE__*/React.createElement(ContentWrapLeftIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: "media-toolbar-wrap-left-icon",
+    LEGACY_fallbackIcon: WrapLeftIcon
+  })
 }, {
   id: 'editor.media.wrapRight',
   value: 'wrap-right',
-  icon: WrapRightIcon
+  icon: () => /*#__PURE__*/React.createElement(ContentWrapRightIcon, {
+    color: "currentColor",
+    spacing: "spacious",
+    label: "media-toolbar-wrap-right-icon",
+    LEGACY_fallbackIcon: WrapRightIcon
+  })
 }];
 const breakoutIcons = [{
   value: 'wide',
@@ -83,7 +114,7 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
       return false;
     }
     const nodeWidth = getNodeWidth(node, state.schema);
-    const newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ?
+    const newAttrs = fg('platform.editor.media.extended-resize-experience') ?
     // with extended experience, change alignment does not change media single width
     {
       ...node.attrs,
@@ -128,7 +159,7 @@ const makeAlign = (layout, nodeType, widthPluginDependencyApi, analyticsApi) =>
   };
 };
 const getToolbarLayout = layout => {
-  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
+  if (nonWrappedLayouts.includes(layout) && fg('platform.editor.media.extended-resize-experience')) {
     return 'center';
   }
   return layout;

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "93.4.4";
+const packageVersion = "93.5.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "93.4.4";
+const packageVersion = "93.5.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -1,2 +1,2 @@
-import React from "react";
+import React from 'react';
 export const EditorContext = /*#__PURE__*/React.createContext({});

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

@@ -9,7 +9,9 @@ import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -22,8 +24,11 @@ import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 const colorPickerButtonWrapper = css({
   position: 'relative'
 });
-const colorPickerExpandContainer = css({
-  margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
+const colorPickerExpandContainer = xcss({
+  marginTop: 'space.0',
+  marginBottom: 'space.0',
+  marginLeft: 'space.negative.050',
+  marginRight: 'space.negative.050'
 });
 
 // Control the size of color picker buttons and preview
@@ -208,10 +213,13 @@ const ColorPickerButton = props => {
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     ,
     css: buttonStyle,
-    iconAfter: jsx("span", {
-      css: colorPickerExpandContainer
-    }, jsx(ExpandIcon, {
-      label: ""
+    iconAfter: jsx(Box, {
+      xcss: colorPickerExpandContainer
+    }, jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyExpandIcon,
+      label: "color-picker-chevron-down"
     })),
     "data-selected-color": props.currentColor
   })), renderPopup());

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

@@ -2,14 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/* eslint-disable no-console */
 
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ELEMENT_BROWSER_ID } from '../../element-browser';
-import { fullPageMessages as messages } from '../../messages';
+import { fullPageMessages } from '../../messages';
+import { mediaInsertMessages } from '../../messages/media-insert';
 import { EDIT_AREA_ID } from '../../ui';
 /*
  **  The context is used to handle the keydown events of submenus.
@@ -137,6 +137,11 @@ export const ToolbarArrowKeyNavigationProvider = ({
       if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
         return;
       }
+
+      // If the target element is the media picker then navigation is handled by the media picker
+      if (targetElement instanceof HTMLElement && targetElement.closest(`[aria-label="${intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)}"]`)) {
+        return;
+      }
       if (targetElement instanceof HTMLElement && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(targetElement))) {
         selectedItemIndex.current = -1;
       } else {
@@ -189,7 +194,7 @@ export const ToolbarArrowKeyNavigationProvider = ({
         editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
       }
     };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar, intl]);
   return jsx("div", {
     css: editorAppearance === 'comment' && centeredToolbarContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -197,7 +202,7 @@ export const ToolbarArrowKeyNavigationProvider = ({
     className: "custom-key-handler-wrapper",
     ref: wrapperRef,
     role: "toolbar",
-    "aria-label": intl.formatMessage(messages.toolbarLabel),
+    "aria-label": intl.formatMessage(fullPageMessages.toolbarLabel),
     "aria-controls": EDIT_AREA_ID
   }, jsx(KeyDownHandlerContext.Provider, {
     value: submenuKeydownHandleContext

package/dist/esm/card/MediaAndEmbedsToolbar/index.js

@@ -2,9 +2,15 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import ContentAlignCenterIcon from '@atlaskit/icon/core/content-align-center';
+import ContentAlignLeftIcon from '@atlaskit/icon/core/content-align-left';
+import ContentAlignRightIcon from '@atlaskit/icon/core/content-align-right';
+import ContentWrapLeftIcon from '@atlaskit/icon/core/content-wrap-left';
+import ContentWrapRightIcon from '@atlaskit/icon/core/content-wrap-right';
 import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
 import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
@@ -12,7 +18,7 @@ import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
 import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
 import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
 import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
 import { insideTable } from '../../core-utils';
 import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
@@ -24,24 +30,59 @@ import { alignAttributes, isInLayoutColumn, nonWrappedLayouts } from '../../util
 export var alignmentIcons = [{
   id: 'editor.media.alignLeft',
   value: 'align-start',
-  icon: EditorAlignImageLeft
+  icon: function icon() {
+    return /*#__PURE__*/React.createElement(ContentAlignLeftIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-align-left-icon",
+      LEGACY_fallbackIcon: EditorAlignImageLeft
+    });
+  }
 }, {
   id: 'editor.media.alignCenter',
   value: 'center',
-  icon: EditorAlignImageCenter
+  icon: function icon() {
+    return /*#__PURE__*/React.createElement(ContentAlignCenterIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-align-center-icon",
+      LEGACY_fallbackIcon: EditorAlignImageCenter
+    });
+  }
 }, {
   id: 'editor.media.alignRight',
   value: 'align-end',
-  icon: EditorAlignImageRight
+  icon: function icon() {
+    return /*#__PURE__*/React.createElement(ContentAlignRightIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-align-right-icon",
+      LEGACY_fallbackIcon: EditorAlignImageRight
+    });
+  }
 }];
 export var wrappingIcons = [{
   id: 'editor.media.wrapLeft',
   value: 'wrap-left',
-  icon: WrapLeftIcon
+  icon: function icon() {
+    return /*#__PURE__*/React.createElement(ContentWrapLeftIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-wrap-left-icon",
+      LEGACY_fallbackIcon: WrapLeftIcon
+    });
+  }
 }, {
   id: 'editor.media.wrapRight',
   value: 'wrap-right',
-  icon: WrapRightIcon
+  icon: function icon() {
+    return /*#__PURE__*/React.createElement(ContentWrapRightIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "media-toolbar-wrap-right-icon",
+      LEGACY_fallbackIcon: WrapRightIcon
+    });
+  }
 }];
 var breakoutIcons = [{
   value: 'wide',
@@ -80,7 +121,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
       return false;
     }
     var nodeWidth = getNodeWidth(node, state.schema);
-    var newAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
+    var newAttrs = fg('platform.editor.media.extended-resize-experience') ? // with extended experience, change alignment does not change media single width
     _objectSpread(_objectSpread({}, node.attrs), {}, {
       layout: layout
     }) : alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
@@ -113,7 +154,7 @@ var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, a
   };
 };
 var getToolbarLayout = function getToolbarLayout(layout) {
-  if (getBooleanFF('platform.editor.media.extended-resize-experience') && nonWrappedLayouts.includes(layout)) {
+  if (nonWrappedLayouts.includes(layout) && fg('platform.editor.media.extended-resize-experience')) {
     return 'center';
   }
   return layout;

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "93.4.4";
+var packageVersion = "93.5.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -21,7 +21,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "93.4.4";
+var packageVersion = "93.5.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -1,2 +1,2 @@
-import React from "react";
+import React from 'react';
 export var EditorContext = /*#__PURE__*/React.createContext({});

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

@@ -10,7 +10,9 @@ import { css, jsx } from '@emotion/react';
 import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext';
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Button from '@atlaskit/button/standard-button';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import LegacyExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, editorAnalyticsChannel, EVENT_TYPE } from '../../analytics';
 import { ColorPalette, DEFAULT_BORDER_COLOR, getSelectedRowAndColumnFromPalette } from '../../ui-color';
@@ -23,8 +25,11 @@ import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 var colorPickerButtonWrapper = css({
   position: 'relative'
 });
-var colorPickerExpandContainer = css({
-  margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
+var colorPickerExpandContainer = xcss({
+  marginTop: 'space.0',
+  marginBottom: 'space.0',
+  marginLeft: 'space.negative.050',
+  marginRight: 'space.negative.050'
 });
 
 // Control the size of color picker buttons and preview
@@ -221,10 +226,13 @@ var ColorPickerButton = function ColorPickerButton(props) {
     // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
     ,
     css: buttonStyle,
-    iconAfter: jsx("span", {
-      css: colorPickerExpandContainer
-    }, jsx(ExpandIcon, {
-      label: ""
+    iconAfter: jsx(Box, {
+      xcss: colorPickerExpandContainer
+    }, jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyExpandIcon,
+      label: "color-picker-chevron-down"
     })),
     "data-selected-color": props.currentColor
   })), renderPopup());

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

@@ -2,14 +2,14 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-/* eslint-disable no-console */
 
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { ELEMENT_BROWSER_ID } from '../../element-browser';
-import { fullPageMessages as messages } from '../../messages';
+import { fullPageMessages } from '../../messages';
+import { mediaInsertMessages } from '../../messages/media-insert';
 import { EDIT_AREA_ID } from '../../ui';
 /*
  **  The context is used to handle the keydown events of submenus.
@@ -135,6 +135,11 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
       if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
         return;
       }
+
+      // If the target element is the media picker then navigation is handled by the media picker
+      if (targetElement instanceof HTMLElement && targetElement.closest("[aria-label=\"".concat(intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel), "\"]"))) {
+        return;
+      }
       if (targetElement instanceof HTMLElement && !((_wrapperRef$current2 = wrapperRef.current) !== null && _wrapperRef$current2 !== void 0 && _wrapperRef$current2.contains(targetElement))) {
         selectedItemIndex.current = -1;
       } else {
@@ -187,7 +192,7 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
         editorViewDom === null || editorViewDom === void 0 || editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
       }
     };
-  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar, intl]);
   return jsx("div", {
     css: editorAppearance === 'comment' && centeredToolbarContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -195,7 +200,7 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
     className: "custom-key-handler-wrapper",
     ref: wrapperRef,
     role: "toolbar",
-    "aria-label": intl.formatMessage(messages.toolbarLabel),
+    "aria-label": intl.formatMessage(fullPageMessages.toolbarLabel),
     "aria-controls": EDIT_AREA_ID
   }, jsx(KeyDownHandlerContext.Provider, {
     value: submenuKeydownHandleContext

package/dist/types/analytics/types/view-events.d.ts

@@ -5,5 +5,6 @@ export type ViewInlineCommentsButtonEventAEP = UIAEP<ACTION.VIEWED, ACTION_SUBJE
     isDisabled: boolean;
     mode: MODE.EDITOR;
     inputMethod: INPUT_METHOD.FLOATING_TB;
+    isNonTextInlineNodeInludedInComment: boolean;
 }, undefined>;
 export type ViewEventPayload = ViewInlineCommentsButtonEventAEP;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { IntlShape } from 'react-intl-next';
 import type { NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorAnalyticsAPI } from '../../analytics';
-import type { Command, EditorContainerWidth, FloatingToolbarItem, NextEditorPlugin, PluginDependenciesAPI } from '../../types';
+import type { Command, EditorContainerWidth, FloatingToolbarItem, Icon, NextEditorPlugin, PluginDependenciesAPI } from '../../types';
 type WidthPluginType = NextEditorPlugin<'width', {
     sharedState: EditorContainerWidth | undefined;
 }>;
@@ -11,7 +10,7 @@ type WidthPluginDependencyApi = PluginDependenciesAPI<WidthPluginType> | undefin
 export type LayoutIcon = {
     id?: string;
     value: string;
-    icon: React.ComponentClass<any>;
+    icon: Icon;
 };
 export type IconMap = Array<LayoutIcon | {
     value: 'separator';

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

@@ -1,2 +1,2 @@
-import React from "react";
+import React from 'react';
 export declare const EditorContext: React.Context<{}>;

package/dist/types-ts4.5/analytics/types/view-events.d.ts

@@ -5,5 +5,6 @@ export type ViewInlineCommentsButtonEventAEP = UIAEP<ACTION.VIEWED, ACTION_SUBJE
     isDisabled: boolean;
     mode: MODE.EDITOR;
     inputMethod: INPUT_METHOD.FLOATING_TB;
+    isNonTextInlineNodeInludedInComment: boolean;
 }, undefined>;
 export type ViewEventPayload = ViewInlineCommentsButtonEventAEP;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { IntlShape } from 'react-intl-next';
 import type { NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorAnalyticsAPI } from '../../analytics';
-import type { Command, EditorContainerWidth, FloatingToolbarItem, NextEditorPlugin, PluginDependenciesAPI } from '../../types';
+import type { Command, EditorContainerWidth, FloatingToolbarItem, Icon, NextEditorPlugin, PluginDependenciesAPI } from '../../types';
 type WidthPluginType = NextEditorPlugin<'width', {
     sharedState: EditorContainerWidth | undefined;
 }>;
@@ -11,7 +10,7 @@ type WidthPluginDependencyApi = PluginDependenciesAPI<WidthPluginType> | undefin
 export type LayoutIcon = {
     id?: string;
     value: string;
-    icon: React.ComponentClass<any>;
+    icon: Icon;
 };
 export type IconMap = Array<LayoutIcon | {
     value: 'separator';

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

@@ -1,2 +1,2 @@
-import React from "react";
+import React from 'react';
 export declare const EditorContext: React.Context<{}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "93.4.4",
+	"version": "93.5.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -110,7 +110,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/activity-provider": "^2.4.0",
-		"@atlaskit/adf-schema": "^40.9.4",
+		"@atlaskit/adf-schema": "^42.0.2",
 		"@atlaskit/adf-utils": "^19.9.0",
 		"@atlaskit/analytics-listeners": "^8.11.0",
 		"@atlaskit/analytics-namespaced-context": "^6.12.0",
@@ -121,7 +121,7 @@
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/custom-steps": "^0.8.0",
 		"@atlaskit/dropdown-menu": "^12.20.0",
-		"@atlaskit/editor-json-transformer": "^8.19.0",
+		"@atlaskit/editor-json-transformer": "^8.20.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-prosemirror": "6.0.0",
 		"@atlaskit/editor-shared-styles": "^3.0.0",
@@ -138,7 +138,7 @@
 		"@atlaskit/media-file-preview": "^0.9.0",
 		"@atlaskit/media-picker": "^66.7.0",
 		"@atlaskit/media-ui": "^25.15.0",
-		"@atlaskit/media-viewer": "49.1.0",
+		"@atlaskit/media-viewer": "49.1.1",
 		"@atlaskit/mention": "^23.3.0",
 		"@atlaskit/menu": "^2.12.0",
 		"@atlaskit/onboarding": "^11.2.0",
@@ -151,7 +151,7 @@
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/textfield": "^6.5.0",
-		"@atlaskit/tmp-editor-statsig": "^2.4.0",
+		"@atlaskit/tmp-editor-statsig": "^2.5.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@atlaskit/ufo": "^0.3.0",