@atlaskit/editor-plugin-code-block 12.1.4 → 12.1.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-code-block
 
+## 12.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.5
+
+### Patch Changes
+
+- [`47e7189edb428`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/47e7189edb428) -
+  Refresh code block language picker UI
+- Updated dependencies
+
 ## 12.1.4
 
 ### Patch Changes

package/dist/cjs/editor-commands/index.js

@@ -70,7 +70,7 @@ var changeLanguage = exports.changeLanguage = function changeLanguage(editorAnal
           action: _analytics.ACTION.LANGUAGE_SELECTED,
           actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
           attributes: {
-            language: language
+            language: language !== null && language !== void 0 ? language : 'none'
           },
           eventType: _analytics.EVENT_TYPE.TRACK
         })(result);

package/dist/cjs/pm-plugins/toolbar.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.languageListFilter = exports.getToolbarConfig = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
 var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
@@ -20,6 +21,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _editorCommands = require("../editor-commands");
 var _WrapIcon = require("../ui/icons/WrapIcon");
+var _languagePickerOptions = require("../ui/language-picker-options");
+var _LanguagePicker = require("../ui/LanguagePicker");
 var _codeBlockCopySelectionPlugin = require("./codeBlockCopySelectionPlugin");
 var _languageList = require("./language-list");
 var _pluginKey = require("./plugin-key");
@@ -81,6 +84,34 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       options: options,
       filterOption: languageListFilter
     };
+    var languagePicker;
+    if ((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button')) {
+      var languagePickerOptions = options;
+      var groupedOptions = (0, _languagePickerOptions.createGroupedLanguageOptions)({
+        formatMessage: formatMessage,
+        languages: languagePickerOptions
+      });
+      var defaultPickerValue = language ? languagePickerOptions.find(function (option) {
+        return language === _languagePickerOptions.NONE_LANGUAGE_VALUE ? option.value === _languagePickerOptions.PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language);
+      }) : undefined;
+      languagePicker = {
+        type: 'custom',
+        fallback: [],
+        render: function render(view) {
+          if (!view) {
+            return null;
+          }
+          return /*#__PURE__*/_react.default.createElement(_LanguagePicker.LanguagePicker, {
+            api: api,
+            defaultValue: defaultPickerValue,
+            editorView: view,
+            filterOption: languageListFilter,
+            formatMessage: formatMessage,
+            options: groupedOptions
+          });
+        }
+      };
+    }
     var separator = {
       type: 'separator'
     };
@@ -188,7 +219,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
         return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languageSelect].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), (0, _toConsumableArray2.default)(copyAndDeleteButtonMenuItems)),
+      items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), (0, _toConsumableArray2.default)(copyAndDeleteButtonMenuItems)),
       scrollable: true
     };
   };

package/dist/cjs/ui/LanguagePicker.compiled.css

@@ -0,0 +1,12 @@
+
+._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
+._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1bsbuuw1{width:200px}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._1xw9glyw button:after{content:none}
+._ficf1e5h button{text-align:left}
+._o5721q9c{white-space:nowrap}
+._vwz478tn{line-height:1.714}

package/dist/cjs/ui/LanguagePicker.js

@@ -0,0 +1,127 @@
+/* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LanguagePicker = void 0;
+require("./LanguagePicker.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _select = require("@atlaskit/select");
+var _editorCommands = require("../editor-commands");
+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); }
+var pickerOptionStyles = null;
+var styles = {
+  divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
+  trigger: "_1reo15vq _18m915vq _1bsbuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
+};
+var CustomGroup = function CustomGroup(props) {
+  var allGroups = props.selectProps.options;
+  var isFirstGroup = allGroups.length > 0 && allGroups[0] === props.data;
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, !isFirstGroup && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "hr",
+    xcss: styles.divider,
+    role: "presentation"
+  }), /*#__PURE__*/_react.default.createElement(_select.components.Group, props));
+};
+var CustomOption = function CustomOption(props) {
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-props-no-spreading -- react-select custom components must forward all props to the default Option.
+    _react.default.createElement(_select.components.Option, props, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _runtime.ax)(["_vwz478tn"])
+    }, props.children))
+  );
+};
+var popupSelectComponents = {
+  Group: CustomGroup,
+  Option: CustomOption
+};
+var menuPopperProps = {
+  modifiers: [{
+    name: 'offset',
+    options: {
+      offset: [0, 8]
+    }
+  }, {
+    name: 'preventOverflow',
+    enabled: false
+  }]
+};
+var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
+  var _api$analytics, _defaultValue$label;
+  var api = _ref.api,
+    defaultValue = _ref.defaultValue,
+    editorView = _ref.editorView,
+    filterOption = _ref.filterOption,
+    formatMessage = _ref.formatMessage,
+    options = _ref.options;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(_messages.codeBlockButtonMessages.selectLanguage);
+  var selectLanguageLabel = formatMessage(_messages.codeBlockButtonMessages.selectLanguage);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var searchOptions = (0, _react.useMemo)(function () {
+    return options.flatMap(function (group) {
+      return group.options;
+    });
+  }, [options]);
+  var hasSearchQuery = inputValue.trim().length > 0;
+  var handleChange = (0, _react.useCallback)(function (option) {
+    if (!option) {
+      return;
+    }
+    (0, _editorCommands.changeLanguage)(editorAnalyticsAPI)(option.value)(editorView.state, editorView.dispatch);
+  }, [editorAnalyticsAPI, editorView]);
+  var handleInputChange = (0, _react.useCallback)(function (newInputValue) {
+    setInputValue(newInputValue);
+    return newInputValue;
+  }, []);
+  var renderTarget = (0, _react.useCallback)(function (_ref2) {
+    var isOpen = _ref2.isOpen,
+      ref = _ref2.ref,
+      onKeyDown = _ref2.onKeyDown,
+      ariaControls = _ref2['aria-controls'];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _runtime.ax)([styles.trigger])
+    }, /*#__PURE__*/_react.default.createElement(_new.default, {
+      shouldFitContainer: true,
+      onKeyDown: onKeyDown,
+      ref: ref,
+      iconAfter: _chevronDown.default,
+      appearance: "subtle",
+      isSelected: isOpen,
+      "aria-controls": ariaControls,
+      "aria-label": selectLanguageLabel,
+      testId: "code-block-language-picker-trigger"
+    }, label));
+  }, [label, selectLanguageLabel]);
+  return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
+    components: popupSelectComponents,
+    filterOption: filterOption,
+    inputValue: inputValue,
+    label: selectLanguageLabel,
+    maxMenuHeight: 300,
+    minMenuWidth: 200,
+    menuPlacement: "auto",
+    onChange: handleChange,
+    onInputChange: handleInputChange,
+    options: hasSearchQuery ? searchOptions : options,
+    popperProps: menuPopperProps,
+    searchThreshold: -1,
+    target: renderTarget,
+    testId: "code-block-language-picker",
+    defaultValue: defaultValue
+  });
+};

package/dist/cjs/ui/language-picker-options.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDetectLanguageOption = exports.createGroupedLanguageOptions = exports.PLAIN_TEXT_LANGUAGE_VALUE = exports.NONE_LANGUAGE_VALUE = exports.DETECT_LANGUAGE_VALUE = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _messages = require("@atlaskit/editor-common/messages");
+var NONE_LANGUAGE_VALUE = exports.NONE_LANGUAGE_VALUE = 'none';
+var DETECT_LANGUAGE_VALUE = exports.DETECT_LANGUAGE_VALUE = 'autodetect';
+var PLAIN_TEXT_LANGUAGE_VALUE = exports.PLAIN_TEXT_LANGUAGE_VALUE = 'text';
+var getDetectLanguageOption = exports.getDetectLanguageOption = function getDetectLanguageOption(formatMessage) {
+  return {
+    alias: [DETECT_LANGUAGE_VALUE],
+    label: formatMessage(_messages.codeBlockButtonMessages.detectLanguage),
+    value: DETECT_LANGUAGE_VALUE
+  };
+};
+var createGroupedLanguageOptions = exports.createGroupedLanguageOptions = function createGroupedLanguageOptions(_ref) {
+  var formatMessage = _ref.formatMessage,
+    languages = _ref.languages,
+    _ref$recentlyUsedLang = _ref.recentlyUsedLanguages,
+    recentlyUsedLanguages = _ref$recentlyUsedLang === void 0 ? [] : _ref$recentlyUsedLang;
+  var allLanguages = languages.filter(function (language) {
+    return language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE;
+  });
+  var plainTextOption = languages.find(function (language) {
+    return language.value === PLAIN_TEXT_LANGUAGE_VALUE;
+  });
+  var pinnedOptions = [getDetectLanguageOption(formatMessage)];
+  if (plainTextOption) {
+    pinnedOptions.push(plainTextOption);
+  }
+  return [{
+    label: '',
+    options: pinnedOptions
+  }].concat((0, _toConsumableArray2.default)(recentlyUsedLanguages.length > 0 ? [{
+    label: formatMessage(_messages.codeBlockButtonMessages.recentlyUsed),
+    options: recentlyUsedLanguages
+  }] : []), [{
+    label: formatMessage(_messages.codeBlockButtonMessages.all),
+    options: allLanguages
+  }]);
+};

package/dist/es2019/editor-commands/index.js

@@ -61,7 +61,7 @@ export const changeLanguage = editorAnalyticsAPI => language => (state, dispatch
       action: ACTION.LANGUAGE_SELECTED,
       actionSubject: ACTION_SUBJECT.CODE_BLOCK,
       attributes: {
-        language
+        language: language !== null && language !== void 0 ? language : 'none'
       },
       eventType: EVENT_TYPE.TRACK
     })(result);

package/dist/es2019/pm-plugins/toolbar.js

@@ -1,3 +1,4 @@
+import React from 'react';
 import { areCodeBlockLineNumbersVisible, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
@@ -10,13 +11,15 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changeLanguage, copyContentToClipboardWithAnalytics, removeCodeBlockWithAnalytics, resetCopiedState, toggleLineNumbersForCodeBlockNode, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
 import { WrapIcon } from '../ui/icons/WrapIcon';
+import { createGroupedLanguageOptions, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
+import { LanguagePicker } from '../ui/LanguagePicker';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
 export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLanguageName = undefined) => (state, {
   formatMessage
 }) => {
-  var _api$editorViewMode, _api$editorViewMode$s, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs;
+  var _api$editorViewMode, _api$editorViewMode$s, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs, _languagePicker;
   const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
   const {
     hoverDecoration
@@ -57,6 +60,32 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
     options,
     filterOption: languageListFilter
   };
+  let languagePicker;
+  if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button')) {
+    const languagePickerOptions = options;
+    const groupedOptions = createGroupedLanguageOptions({
+      formatMessage,
+      languages: languagePickerOptions
+    });
+    const defaultPickerValue = language ? languagePickerOptions.find(option => language === NONE_LANGUAGE_VALUE ? option.value === PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language)) : undefined;
+    languagePicker = {
+      type: 'custom',
+      fallback: [],
+      render: view => {
+        if (!view) {
+          return null;
+        }
+        return /*#__PURE__*/React.createElement(LanguagePicker, {
+          api: api,
+          defaultValue: defaultPickerValue,
+          editorView: view,
+          filterOption: languageListFilter,
+          formatMessage: formatMessage,
+          options: groupedOptions
+        });
+      }
+    };
+  }
   const separator = {
     type: 'separator'
   };
@@ -162,7 +191,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
     // eslint-disable-next-line @atlaskit/editor/no-as-casting
     getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
     nodeType,
-    items: [languageSelect, ...(areAnyNewToolbarFlagsEnabled ? [] : [separator]), codeBlockWrapButton, ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), ...copyAndDeleteButtonMenuItems],
+    items: [(_languagePicker = languagePicker) !== null && _languagePicker !== void 0 ? _languagePicker : languageSelect, ...(areAnyNewToolbarFlagsEnabled ? [] : [separator]), codeBlockWrapButton, ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), ...copyAndDeleteButtonMenuItems],
     scrollable: true
   };
 };

package/dist/es2019/ui/LanguagePicker.compiled.css

@@ -0,0 +1,12 @@
+
+._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
+._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1bsbuuw1{width:200px}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._1xw9glyw button:after{content:none}
+._ficf1e5h button{text-align:left}
+._o5721q9c{white-space:nowrap}
+._vwz478tn{line-height:1.714}

package/dist/es2019/ui/LanguagePicker.js

@@ -0,0 +1,110 @@
+/* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./LanguagePicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { Box } from '@atlaskit/primitives/compiled';
+import { PopupSelect, components } from '@atlaskit/select';
+import { changeLanguage } from '../editor-commands';
+const pickerOptionStyles = null;
+const styles = {
+  divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
+  trigger: "_1reo15vq _18m915vq _1bsbuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
+};
+const CustomGroup = props => {
+  const allGroups = props.selectProps.options;
+  const isFirstGroup = allGroups.length > 0 && allGroups[0] === props.data;
+  return /*#__PURE__*/React.createElement(Fragment, null, !isFirstGroup && /*#__PURE__*/React.createElement(Box, {
+    as: "hr",
+    xcss: styles.divider,
+    role: "presentation"
+  }), /*#__PURE__*/React.createElement(components.Group, props));
+};
+const CustomOption = props => {
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-props-no-spreading -- react-select custom components must forward all props to the default Option.
+    React.createElement(components.Option, props, /*#__PURE__*/React.createElement("span", {
+      className: ax(["_vwz478tn"])
+    }, props.children))
+  );
+};
+const popupSelectComponents = {
+  Group: CustomGroup,
+  Option: CustomOption
+};
+const menuPopperProps = {
+  modifiers: [{
+    name: 'offset',
+    options: {
+      offset: [0, 8]
+    }
+  }, {
+    name: 'preventOverflow',
+    enabled: false
+  }]
+};
+export const LanguagePicker = ({
+  api,
+  defaultValue,
+  editorView,
+  filterOption,
+  formatMessage,
+  options
+}) => {
+  var _api$analytics, _defaultValue$label;
+  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  const label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(codeBlockButtonMessages.selectLanguage);
+  const selectLanguageLabel = formatMessage(codeBlockButtonMessages.selectLanguage);
+  const [inputValue, setInputValue] = useState('');
+  const searchOptions = useMemo(() => options.flatMap(group => group.options), [options]);
+  const hasSearchQuery = inputValue.trim().length > 0;
+  const handleChange = useCallback(option => {
+    if (!option) {
+      return;
+    }
+    changeLanguage(editorAnalyticsAPI)(option.value)(editorView.state, editorView.dispatch);
+  }, [editorAnalyticsAPI, editorView]);
+  const handleInputChange = useCallback(newInputValue => {
+    setInputValue(newInputValue);
+    return newInputValue;
+  }, []);
+  const renderTarget = useCallback(({
+    isOpen,
+    ref,
+    onKeyDown,
+    'aria-controls': ariaControls
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.trigger])
+  }, /*#__PURE__*/React.createElement(Button, {
+    shouldFitContainer: true,
+    onKeyDown: onKeyDown,
+    ref: ref,
+    iconAfter: ChevronDownIcon,
+    appearance: "subtle",
+    isSelected: isOpen,
+    "aria-controls": ariaControls,
+    "aria-label": selectLanguageLabel,
+    testId: "code-block-language-picker-trigger"
+  }, label)), [label, selectLanguageLabel]);
+  return /*#__PURE__*/React.createElement(PopupSelect, {
+    components: popupSelectComponents,
+    filterOption: filterOption,
+    inputValue: inputValue,
+    label: selectLanguageLabel,
+    maxMenuHeight: 300,
+    minMenuWidth: 200,
+    menuPlacement: "auto",
+    onChange: handleChange,
+    onInputChange: handleInputChange,
+    options: hasSearchQuery ? searchOptions : options,
+    popperProps: menuPopperProps,
+    searchThreshold: -1,
+    target: renderTarget,
+    testId: "code-block-language-picker",
+    defaultValue: defaultValue
+  });
+};

package/dist/es2019/ui/language-picker-options.js

@@ -0,0 +1,31 @@
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+export const NONE_LANGUAGE_VALUE = 'none';
+export const DETECT_LANGUAGE_VALUE = 'autodetect';
+export const PLAIN_TEXT_LANGUAGE_VALUE = 'text';
+export const getDetectLanguageOption = formatMessage => ({
+  alias: [DETECT_LANGUAGE_VALUE],
+  label: formatMessage(codeBlockButtonMessages.detectLanguage),
+  value: DETECT_LANGUAGE_VALUE
+});
+export const createGroupedLanguageOptions = ({
+  formatMessage,
+  languages,
+  recentlyUsedLanguages = []
+}) => {
+  const allLanguages = languages.filter(language => language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE);
+  const plainTextOption = languages.find(language => language.value === PLAIN_TEXT_LANGUAGE_VALUE);
+  const pinnedOptions = [getDetectLanguageOption(formatMessage)];
+  if (plainTextOption) {
+    pinnedOptions.push(plainTextOption);
+  }
+  return [{
+    label: '',
+    options: pinnedOptions
+  }, ...(recentlyUsedLanguages.length > 0 ? [{
+    label: formatMessage(codeBlockButtonMessages.recentlyUsed),
+    options: recentlyUsedLanguages
+  }] : []), {
+    label: formatMessage(codeBlockButtonMessages.all),
+    options: allLanguages
+  }];
+};

package/dist/esm/editor-commands/index.js

@@ -59,7 +59,7 @@ export var changeLanguage = function changeLanguage(editorAnalyticsAPI) {
           action: ACTION.LANGUAGE_SELECTED,
           actionSubject: ACTION_SUBJECT.CODE_BLOCK,
           attributes: {
-            language: language
+            language: language !== null && language !== void 0 ? language : 'none'
           },
           eventType: EVENT_TYPE.TRACK
         })(result);

package/dist/esm/pm-plugins/toolbar.js

@@ -2,6 +2,7 @@ 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 { areCodeBlockLineNumbersVisible, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
@@ -14,6 +15,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changeLanguage, copyContentToClipboardWithAnalytics, removeCodeBlockWithAnalytics, resetCopiedState, toggleLineNumbersForCodeBlockNode, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
 import { WrapIcon } from '../ui/icons/WrapIcon';
+import { createGroupedLanguageOptions, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
+import { LanguagePicker } from '../ui/LanguagePicker';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
@@ -72,6 +75,34 @@ export var getToolbarConfig = function getToolbarConfig() {
       options: options,
       filterOption: languageListFilter
     };
+    var languagePicker;
+    if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button')) {
+      var languagePickerOptions = options;
+      var groupedOptions = createGroupedLanguageOptions({
+        formatMessage: formatMessage,
+        languages: languagePickerOptions
+      });
+      var defaultPickerValue = language ? languagePickerOptions.find(function (option) {
+        return language === NONE_LANGUAGE_VALUE ? option.value === PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language);
+      }) : undefined;
+      languagePicker = {
+        type: 'custom',
+        fallback: [],
+        render: function render(view) {
+          if (!view) {
+            return null;
+          }
+          return /*#__PURE__*/React.createElement(LanguagePicker, {
+            api: api,
+            defaultValue: defaultPickerValue,
+            editorView: view,
+            filterOption: languageListFilter,
+            formatMessage: formatMessage,
+            options: groupedOptions
+          });
+        }
+      };
+    }
     var separator = {
       type: 'separator'
     };
@@ -179,7 +210,7 @@ export var getToolbarConfig = function getToolbarConfig() {
         return findDomRefAtPos(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languageSelect].concat(_toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], _toConsumableArray(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), _toConsumableArray(copyAndDeleteButtonMenuItems)),
+      items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat(_toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], _toConsumableArray(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), _toConsumableArray(copyAndDeleteButtonMenuItems)),
       scrollable: true
     };
   };

package/dist/esm/ui/LanguagePicker.compiled.css

@@ -0,0 +1,12 @@
+
+._h7alglyw{border-inline:none}._179rglyw{border-block-end:none}
+._mqm2ia51{border-block-start:var(--ds-border-width,1px) solid var(--ds-border,#0b120e24)}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1bsbuuw1{width:200px}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._1xw9glyw button:after{content:none}
+._ficf1e5h button{text-align:left}
+._o5721q9c{white-space:nowrap}
+._vwz478tn{line-height:1.714}

package/dist/esm/ui/LanguagePicker.js

@@ -0,0 +1,118 @@
+/* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "./LanguagePicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { Box } from '@atlaskit/primitives/compiled';
+import { PopupSelect, components } from '@atlaskit/select';
+import { changeLanguage } from '../editor-commands';
+var pickerOptionStyles = null;
+var styles = {
+  divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
+  trigger: "_1reo15vq _18m915vq _1bsbuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
+};
+var CustomGroup = function CustomGroup(props) {
+  var allGroups = props.selectProps.options;
+  var isFirstGroup = allGroups.length > 0 && allGroups[0] === props.data;
+  return /*#__PURE__*/React.createElement(Fragment, null, !isFirstGroup && /*#__PURE__*/React.createElement(Box, {
+    as: "hr",
+    xcss: styles.divider,
+    role: "presentation"
+  }), /*#__PURE__*/React.createElement(components.Group, props));
+};
+var CustomOption = function CustomOption(props) {
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/jsx-props-no-spreading -- react-select custom components must forward all props to the default Option.
+    React.createElement(components.Option, props, /*#__PURE__*/React.createElement("span", {
+      className: ax(["_vwz478tn"])
+    }, props.children))
+  );
+};
+var popupSelectComponents = {
+  Group: CustomGroup,
+  Option: CustomOption
+};
+var menuPopperProps = {
+  modifiers: [{
+    name: 'offset',
+    options: {
+      offset: [0, 8]
+    }
+  }, {
+    name: 'preventOverflow',
+    enabled: false
+  }]
+};
+export var LanguagePicker = function LanguagePicker(_ref) {
+  var _api$analytics, _defaultValue$label;
+  var api = _ref.api,
+    defaultValue = _ref.defaultValue,
+    editorView = _ref.editorView,
+    filterOption = _ref.filterOption,
+    formatMessage = _ref.formatMessage,
+    options = _ref.options;
+  var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(codeBlockButtonMessages.selectLanguage);
+  var selectLanguageLabel = formatMessage(codeBlockButtonMessages.selectLanguage);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var searchOptions = useMemo(function () {
+    return options.flatMap(function (group) {
+      return group.options;
+    });
+  }, [options]);
+  var hasSearchQuery = inputValue.trim().length > 0;
+  var handleChange = useCallback(function (option) {
+    if (!option) {
+      return;
+    }
+    changeLanguage(editorAnalyticsAPI)(option.value)(editorView.state, editorView.dispatch);
+  }, [editorAnalyticsAPI, editorView]);
+  var handleInputChange = useCallback(function (newInputValue) {
+    setInputValue(newInputValue);
+    return newInputValue;
+  }, []);
+  var renderTarget = useCallback(function (_ref2) {
+    var isOpen = _ref2.isOpen,
+      ref = _ref2.ref,
+      onKeyDown = _ref2.onKeyDown,
+      ariaControls = _ref2['aria-controls'];
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax([styles.trigger])
+    }, /*#__PURE__*/React.createElement(Button, {
+      shouldFitContainer: true,
+      onKeyDown: onKeyDown,
+      ref: ref,
+      iconAfter: ChevronDownIcon,
+      appearance: "subtle",
+      isSelected: isOpen,
+      "aria-controls": ariaControls,
+      "aria-label": selectLanguageLabel,
+      testId: "code-block-language-picker-trigger"
+    }, label));
+  }, [label, selectLanguageLabel]);
+  return /*#__PURE__*/React.createElement(PopupSelect, {
+    components: popupSelectComponents,
+    filterOption: filterOption,
+    inputValue: inputValue,
+    label: selectLanguageLabel,
+    maxMenuHeight: 300,
+    minMenuWidth: 200,
+    menuPlacement: "auto",
+    onChange: handleChange,
+    onInputChange: handleInputChange,
+    options: hasSearchQuery ? searchOptions : options,
+    popperProps: menuPopperProps,
+    searchThreshold: -1,
+    target: renderTarget,
+    testId: "code-block-language-picker",
+    defaultValue: defaultValue
+  });
+};

package/dist/esm/ui/language-picker-options.js

@@ -0,0 +1,38 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+export var NONE_LANGUAGE_VALUE = 'none';
+export var DETECT_LANGUAGE_VALUE = 'autodetect';
+export var PLAIN_TEXT_LANGUAGE_VALUE = 'text';
+export var getDetectLanguageOption = function getDetectLanguageOption(formatMessage) {
+  return {
+    alias: [DETECT_LANGUAGE_VALUE],
+    label: formatMessage(codeBlockButtonMessages.detectLanguage),
+    value: DETECT_LANGUAGE_VALUE
+  };
+};
+export var createGroupedLanguageOptions = function createGroupedLanguageOptions(_ref) {
+  var formatMessage = _ref.formatMessage,
+    languages = _ref.languages,
+    _ref$recentlyUsedLang = _ref.recentlyUsedLanguages,
+    recentlyUsedLanguages = _ref$recentlyUsedLang === void 0 ? [] : _ref$recentlyUsedLang;
+  var allLanguages = languages.filter(function (language) {
+    return language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE;
+  });
+  var plainTextOption = languages.find(function (language) {
+    return language.value === PLAIN_TEXT_LANGUAGE_VALUE;
+  });
+  var pinnedOptions = [getDetectLanguageOption(formatMessage)];
+  if (plainTextOption) {
+    pinnedOptions.push(plainTextOption);
+  }
+  return [{
+    label: '',
+    options: pinnedOptions
+  }].concat(_toConsumableArray(recentlyUsedLanguages.length > 0 ? [{
+    label: formatMessage(codeBlockButtonMessages.recentlyUsed),
+    options: recentlyUsedLanguages
+  }] : []), [{
+    label: formatMessage(codeBlockButtonMessages.all),
+    options: allLanguages
+  }]);
+};

package/dist/types/editor-commands/index.d.ts

@@ -4,7 +4,7 @@ import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const removeCodeBlockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const removeCodeBlock: Command;
-export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string) => Command;
+export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null) => Command;
 export declare const copyContentToClipboardWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const copyContentToClipboard: Command;
 export declare const resetCopiedState: Command;

package/dist/types/ui/LanguagePicker.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { IntlShape } from 'react-intl';
+import type { ExtractInjectionAPI, SelectOption } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CodeBlockPlugin } from '../index';
+import type { LanguagePickerOption, LanguagePickerOptionGroup } from './language-picker-options';
+type LanguagePickerProps = {
+    api: ExtractInjectionAPI<CodeBlockPlugin> | undefined;
+    defaultValue?: LanguagePickerOption;
+    editorView: EditorView;
+    filterOption: (option: SelectOption<LanguagePickerOption>, rawInput: string) => boolean;
+    formatMessage: IntlShape['formatMessage'];
+    options: LanguagePickerOptionGroup[];
+};
+export declare const LanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, options, }: LanguagePickerProps) => React.JSX.Element;
+export {};

package/dist/types/ui/language-picker-options.d.ts

@@ -0,0 +1,19 @@
+import type { IntlShape } from 'react-intl';
+import type { GroupType } from '@atlaskit/select';
+export declare const NONE_LANGUAGE_VALUE = "none";
+export declare const DETECT_LANGUAGE_VALUE = "autodetect";
+export declare const PLAIN_TEXT_LANGUAGE_VALUE = "text";
+export type LanguagePickerOption = {
+    alias: readonly string[];
+    label: string;
+    value: string;
+};
+export type LanguagePickerOptionGroup = GroupType<LanguagePickerOption>;
+type CreateGroupedLanguageOptionsProps = {
+    formatMessage: IntlShape['formatMessage'];
+    languages: LanguagePickerOption[];
+    recentlyUsedLanguages?: LanguagePickerOption[];
+};
+export declare const getDetectLanguageOption: (formatMessage: IntlShape["formatMessage"]) => LanguagePickerOption;
+export declare const createGroupedLanguageOptions: ({ formatMessage, languages, recentlyUsedLanguages, }: CreateGroupedLanguageOptionsProps) => LanguagePickerOptionGroup[];
+export {};

package/dist/types-ts4.5/editor-commands/index.d.ts

@@ -4,7 +4,7 @@ import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const removeCodeBlockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const removeCodeBlock: Command;
-export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string) => Command;
+export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null) => Command;
 export declare const copyContentToClipboardWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const copyContentToClipboard: Command;
 export declare const resetCopiedState: Command;

package/dist/types-ts4.5/ui/LanguagePicker.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import type { IntlShape } from 'react-intl';
+import type { ExtractInjectionAPI, SelectOption } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CodeBlockPlugin } from '../index';
+import type { LanguagePickerOption, LanguagePickerOptionGroup } from './language-picker-options';
+type LanguagePickerProps = {
+    api: ExtractInjectionAPI<CodeBlockPlugin> | undefined;
+    defaultValue?: LanguagePickerOption;
+    editorView: EditorView;
+    filterOption: (option: SelectOption<LanguagePickerOption>, rawInput: string) => boolean;
+    formatMessage: IntlShape['formatMessage'];
+    options: LanguagePickerOptionGroup[];
+};
+export declare const LanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, options, }: LanguagePickerProps) => React.JSX.Element;
+export {};

package/dist/types-ts4.5/ui/language-picker-options.d.ts

@@ -0,0 +1,19 @@
+import type { IntlShape } from 'react-intl';
+import type { GroupType } from '@atlaskit/select';
+export declare const NONE_LANGUAGE_VALUE = "none";
+export declare const DETECT_LANGUAGE_VALUE = "autodetect";
+export declare const PLAIN_TEXT_LANGUAGE_VALUE = "text";
+export type LanguagePickerOption = {
+    alias: readonly string[];
+    label: string;
+    value: string;
+};
+export type LanguagePickerOptionGroup = GroupType<LanguagePickerOption>;
+type CreateGroupedLanguageOptionsProps = {
+    formatMessage: IntlShape['formatMessage'];
+    languages: LanguagePickerOption[];
+    recentlyUsedLanguages?: LanguagePickerOption[];
+};
+export declare const getDetectLanguageOption: (formatMessage: IntlShape["formatMessage"]) => LanguagePickerOption;
+export declare const createGroupedLanguageOptions: ({ formatMessage, languages, recentlyUsedLanguages, }: CreateGroupedLanguageOptionsProps) => LanguagePickerOptionGroup[];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "12.1.4",
+	"version": "12.1.6",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,8 +27,10 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.13.0",
+		"@atlaskit/adf-schema": "^52.14.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/code": "^17.5.0",
+		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^9.2.0",
 		"@atlaskit/editor-plugin-composition": "^9.1.0",
@@ -39,15 +41,20 @@
 		"@atlaskit/editor-plugin-selection": "^10.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
-		"@atlaskit/editor-toolbar": "^1.6.0",
-		"@atlaskit/icon": "^35.0.0",
+		"@atlaskit/editor-shared-styles": "^3.11.0",
+		"@atlaskit/editor-toolbar": "^1.7.0",
+		"@atlaskit/icon": "^35.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/prosemirror-input-rules": "^3.7.0",
-		"@atlaskit/tmp-editor-statsig": "^82.0.0",
-		"@babel/runtime": "^7.0.0"
+		"@atlaskit/select": "^21.12.0",
+		"@atlaskit/tmp-editor-statsig": "^83.0.0",
+		"@atlaskit/tokens": "^13.0.0",
+		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.36.0",
+		"@atlaskit/editor-common": "^114.46.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -104,6 +111,7 @@
 		}
 	},
 	"devDependencies": {
+		"react": "^18.2.0",
 		"react-intl": "^6.6.2"
 	}
 }