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

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

@@ -14,9 +14,9 @@ import TextWrapIcon from '@atlaskit/icon/core/text-wrap';
 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 { CodeBlockLanguagePicker } from '../ui/CodeBlockLanguagePicker';
 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 { NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
@@ -24,6 +24,18 @@ export var getToolbarConfig = function getToolbarConfig() {
   var allowCopyToClipboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   var api = arguments.length > 1 ? arguments[1] : undefined;
   var overrideLanguageName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  var languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(function (languageOption) {
+    return _objectSpread(_objectSpread({}, languageOption), {}, {
+      name: overrideLanguageName(languageOption.name)
+    });
+  }) : DEFAULT_LANGUAGES);
+  var languagePickerOptions = languageList.map(function (lang) {
+    return {
+      label: lang.name,
+      value: getLanguageIdentifier(lang),
+      alias: lang.alias
+    };
+  });
   return function (state, _ref) {
     var _api$editorViewMode, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs;
     var formatMessage = _ref.formatMessage;
@@ -44,23 +56,15 @@ export var getToolbarConfig = function getToolbarConfig() {
     var isWrapped = isCodeBlockWordWrapEnabled(node);
     var areLineNumbersVisible = areCodeBlockLineNumbersVisible(node);
     var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
-    var languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(function (language) {
-      return _objectSpread(_objectSpread({}, language), {}, {
-        name: overrideLanguageName(language.name)
-      });
-    }) : DEFAULT_LANGUAGES);
-    var options = languageList.map(function (lang) {
-      return {
-        label: lang.name,
-        value: getLanguageIdentifier(lang),
-        alias: lang.alias
-      };
+    // Keep fresh option objects for the legacy toolbar select so reopening it
+    // continues to start from the top rather than preserving the previously
+    // focused option by reference.
+    var languageSelectOptions = languagePickerOptions.map(function (option) {
+      return _objectSpread({}, option);
     });
-
-    // If language is not undefined search for it in the value and then search in the aliases
-    var defaultValue = language ? options.find(function (option) {
+    var defaultValue = language ? languageSelectOptions.find(function (option) {
       return option.value === language;
-    }) || options.find(function (option) {
+    }) || languageSelectOptions.find(function (option) {
       return option.alias.includes(language);
     }) : null;
     var languageSelect = {
@@ -72,16 +76,11 @@ export var getToolbarConfig = function getToolbarConfig() {
       },
       defaultValue: defaultValue,
       placeholder: formatMessage(codeBlockButtonMessages.selectLanguage),
-      options: options,
+      options: languageSelectOptions,
       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;
@@ -92,13 +91,13 @@ export var getToolbarConfig = function getToolbarConfig() {
           if (!view) {
             return null;
           }
-          return /*#__PURE__*/React.createElement(LanguagePicker, {
+          return /*#__PURE__*/React.createElement(CodeBlockLanguagePicker, {
             api: api,
             defaultValue: defaultPickerValue,
             editorView: view,
             filterOption: languageListFilter,
             formatMessage: formatMessage,
-            options: groupedOptions
+            languagePickerOptions: languagePickerOptions
           });
         }
       };

package/dist/esm/ui/CodeBlockLanguagePicker.js

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import { LanguagePicker } from './LanguagePicker';
+import { getRecentLanguages, saveRecentLanguage } from './recent-languages';
+export var CodeBlockLanguagePicker = function CodeBlockLanguagePicker(_ref) {
+  var api = _ref.api,
+    defaultValue = _ref.defaultValue,
+    editorView = _ref.editorView,
+    filterOption = _ref.filterOption,
+    formatMessage = _ref.formatMessage,
+    languagePickerOptions = _ref.languagePickerOptions;
+  var _useState = useState(function () {
+      return getRecentLanguages();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    recentLanguageValues = _useState2[0],
+    setRecentLanguageValues = _useState2[1];
+  var refreshRecentLanguages = useCallback(function () {
+    setRecentLanguageValues(getRecentLanguages());
+  }, []);
+  var handleLanguageSelect = useCallback(function (language) {
+    saveRecentLanguage(language);
+    setRecentLanguageValues(getRecentLanguages());
+  }, []);
+  return /*#__PURE__*/React.createElement(LanguagePicker, {
+    api: api,
+    defaultValue: defaultValue,
+    editorView: editorView,
+    filterOption: filterOption,
+    formatMessage: formatMessage,
+    languagePickerOptions: languagePickerOptions,
+    recentLanguageValues: recentLanguageValues,
+    onLanguageSelect: handleLanguageSelect,
+    onMenuOpen: refreshRecentLanguages
+  });
+};

package/dist/esm/ui/LanguagePicker.js

@@ -2,7 +2,10 @@
 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';
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import React, { Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import Button from '@atlaskit/button/new';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
@@ -10,6 +13,7 @@ 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';
+import { createGroupedLanguageOptions } from './language-picker-options';
 var pickerOptionStyles = null;
 var styles = {
   divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
@@ -48,6 +52,25 @@ var menuPopperProps = {
     enabled: false
   }]
 };
+var getRecentlyUsedLanguages = function getRecentlyUsedLanguages(recentLanguageValues, optionsByValue) {
+  var recentlyUsedLanguages = [];
+  var _iterator = _createForOfIteratorHelper(recentLanguageValues),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var recentLanguageValue = _step.value;
+      var option = optionsByValue.get(recentLanguageValue);
+      if (option) {
+        recentlyUsedLanguages.push(option);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return recentlyUsedLanguages;
+};
 export var LanguagePicker = function LanguagePicker(_ref) {
   var _api$analytics, _defaultValue$label;
   var api = _ref.api,
@@ -55,28 +78,58 @@ export var LanguagePicker = function LanguagePicker(_ref) {
     editorView = _ref.editorView,
     filterOption = _ref.filterOption,
     formatMessage = _ref.formatMessage,
-    options = _ref.options;
+    languagePickerOptions = _ref.languagePickerOptions,
+    _ref$recentLanguageVa = _ref.recentLanguageValues,
+    recentLanguageValues = _ref$recentLanguageVa === void 0 ? [] : _ref$recentLanguageVa,
+    onLanguageSelect = _ref.onLanguageSelect,
+    onMenuOpen = _ref.onMenuOpen;
   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(''),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
+    hasSearchQuery = _useState2[0],
+    setHasSearchQuery = _useState2[1];
+  var inputValueRef = useRef('');
+  var optionsByValue = useMemo(function () {
+    return new Map(languagePickerOptions.map(function (option) {
+      return [option.value, option];
+    }));
+  }, [languagePickerOptions]);
+  var recentlyUsedLanguages = useMemo(function () {
+    return getRecentlyUsedLanguages(recentLanguageValues, optionsByValue);
+  }, [recentLanguageValues, optionsByValue]);
+  var options = useMemo(function () {
+    return createGroupedLanguageOptions({
+      formatMessage: formatMessage,
+      languages: languagePickerOptions,
+      recentlyUsedLanguages: recentlyUsedLanguages
+    });
+  }, [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
   var searchOptions = useMemo(function () {
     return options.flatMap(function (group) {
       return group.options;
     });
   }, [options]);
-  var hasSearchQuery = inputValue.trim().length > 0;
   var handleChange = useCallback(function (option) {
+    var _option$selectionSour;
     if (!option) {
       return;
     }
-    changeLanguage(editorAnalyticsAPI)(option.value)(editorView.state, editorView.dispatch);
-  }, [editorAnalyticsAPI, editorView]);
-  var handleInputChange = useCallback(function (newInputValue) {
-    setInputValue(newInputValue);
+    var isSearchSelection = inputValueRef.current.trim().length > 0;
+    var selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
+    var commandSucceeded = changeLanguage(editorAnalyticsAPI)(option.value, selectionSource)(editorView.state, editorView.dispatch);
+    if (commandSucceeded) {
+      onLanguageSelect === null || onLanguageSelect === void 0 || onLanguageSelect(option.value);
+    }
+  }, [editorAnalyticsAPI, editorView, onLanguageSelect]);
+  var handleInputChange = useCallback(function (newInputValue, actionMeta) {
+    // React-select clears the input as part of selecting a value before onChange fires.
+    // Keep the last user-typed query so handleChange can report search selections correctly.
+    if (!actionMeta || actionMeta.action === 'input-change') {
+      inputValueRef.current = newInputValue;
+    }
+    setHasSearchQuery(newInputValue.trim().length > 0);
     return newInputValue;
   }, []);
   var renderTarget = useCallback(function (_ref2) {
@@ -101,13 +154,13 @@ export var LanguagePicker = function LanguagePicker(_ref) {
   return /*#__PURE__*/React.createElement(PopupSelect, {
     components: popupSelectComponents,
     filterOption: filterOption,
-    inputValue: inputValue,
     label: selectLanguageLabel,
     maxMenuHeight: 300,
     minMenuWidth: 200,
     menuPlacement: "auto",
     onChange: handleChange,
     onInputChange: handleInputChange,
+    onMenuOpen: onMenuOpen,
     options: hasSearchQuery ? searchOptions : options,
     popperProps: menuPopperProps,
     searchThreshold: -1,

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

@@ -1,4 +1,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 { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 export var NONE_LANGUAGE_VALUE = 'none';
 export var DETECT_LANGUAGE_VALUE = 'autodetect';
@@ -7,6 +10,7 @@ export var getDetectLanguageOption = function getDetectLanguageOption(formatMess
   return {
     alias: [DETECT_LANGUAGE_VALUE],
     label: formatMessage(codeBlockButtonMessages.detectLanguage),
+    selectionSource: 'pinned',
     value: DETECT_LANGUAGE_VALUE
   };
 };
@@ -15,24 +19,37 @@ export var createGroupedLanguageOptions = function createGroupedLanguageOptions(
     languages = _ref.languages,
     _ref$recentlyUsedLang = _ref.recentlyUsedLanguages,
     recentlyUsedLanguages = _ref$recentlyUsedLang === void 0 ? [] : _ref$recentlyUsedLang;
+  var recentlyUsedLanguageValues = new Set(recentlyUsedLanguages.map(function (language) {
+    return language.value;
+  }));
   var allLanguages = languages.filter(function (language) {
-    return language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE;
+    return language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE && !recentlyUsedLanguageValues.has(language.value);
   });
   var plainTextOption = languages.find(function (language) {
     return language.value === PLAIN_TEXT_LANGUAGE_VALUE;
   });
   var pinnedOptions = [getDetectLanguageOption(formatMessage)];
   if (plainTextOption) {
-    pinnedOptions.push(plainTextOption);
+    pinnedOptions.push(_objectSpread(_objectSpread({}, plainTextOption), {}, {
+      selectionSource: 'pinned'
+    }));
   }
   return [{
     label: '',
     options: pinnedOptions
   }].concat(_toConsumableArray(recentlyUsedLanguages.length > 0 ? [{
     label: formatMessage(codeBlockButtonMessages.recentlyUsed),
-    options: recentlyUsedLanguages
+    options: recentlyUsedLanguages.map(function (language) {
+      return _objectSpread(_objectSpread({}, language), {}, {
+        selectionSource: 'recentlyUsed'
+      });
+    })
   }] : []), [{
     label: formatMessage(codeBlockButtonMessages.all),
-    options: allLanguages
+    options: allLanguages.map(function (language) {
+      return _objectSpread(_objectSpread({}, language), {}, {
+        selectionSource: 'all'
+      });
+    })
   }]);
 };

package/dist/esm/ui/recent-languages.js

@@ -0,0 +1,43 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { StorageClient } from '@atlaskit/frontend-utilities/storage-client';
+import { DEFAULT_LANGUAGES, getLanguageIdentifier } from '../pm-plugins/language-list';
+import { DETECT_LANGUAGE_VALUE, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from './language-picker-options';
+export var RECENT_LANGUAGES_STORAGE_KEY = 'recently-used-languages';
+var RECENT_LANGUAGES_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-code-block';
+var MAX_RECENT_LANGUAGES = 3;
+var RECENT_LANGUAGE_BLOCKLIST = new Set([DETECT_LANGUAGE_VALUE, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE]);
+var KNOWN_LANGUAGE_VALUES = new Set(DEFAULT_LANGUAGES.map(function (language) {
+  return getLanguageIdentifier(language);
+}));
+var recentLanguagesStorageClient = new StorageClient(RECENT_LANGUAGES_STORAGE_CLIENT_KEY);
+var isValidRecentLanguage = function isValidRecentLanguage(language) {
+  return KNOWN_LANGUAGE_VALUES.has(language) && !RECENT_LANGUAGE_BLOCKLIST.has(language);
+};
+var readRecentLanguages = function readRecentLanguages() {
+  var storedValue = recentLanguagesStorageClient.getItem(RECENT_LANGUAGES_STORAGE_KEY);
+  return Array.isArray(storedValue) ? storedValue : [];
+};
+export var getRecentLanguages = function getRecentLanguages() {
+  try {
+    return readRecentLanguages();
+  } catch (_unused) {
+    return [];
+  }
+};
+export var saveRecentLanguage = function saveRecentLanguage(language) {
+  if (!isValidRecentLanguage(language)) {
+    return;
+  }
+  try {
+    var recentLanguages = readRecentLanguages();
+    var nextRecentLanguages = Array.from(new Set([language].concat(_toConsumableArray(recentLanguages)))).slice(0, MAX_RECENT_LANGUAGES);
+
+    // StorageClient only exposes setItemWithExpiry; omitting the duration stores without expiry.
+    recentLanguagesStorageClient.setItemWithExpiry(RECENT_LANGUAGES_STORAGE_KEY, nextRecentLanguages);
+  } catch (_unused2) {
+    return;
+  }
+};
+export var clearRecentLanguages = function clearRecentLanguages() {
+  recentLanguagesStorageClient.removeItem(RECENT_LANGUAGES_STORAGE_KEY);
+};

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

@@ -2,9 +2,10 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { LanguagePickerSelectionSource } from '../ui/language-picker-options';
 export declare const removeCodeBlockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const removeCodeBlock: Command;
-export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null) => Command;
+export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null, selectionSource?: LanguagePickerSelectionSource) => Command;
 export declare const copyContentToClipboardWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const copyContentToClipboard: Command;
 export declare const resetCopiedState: Command;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { LanguagePickerProps } from './LanguagePicker';
+type CodeBlockLanguagePickerProps = Omit<LanguagePickerProps, 'recentLanguageValues' | 'onLanguageSelect' | 'onMenuOpen'>;
+export declare const CodeBlockLanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, languagePickerOptions, }: CodeBlockLanguagePickerProps) => React.JSX.Element;
+export {};

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

@@ -7,14 +7,16 @@ 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 = {
+import type { LanguagePickerOption } from './language-picker-options';
+export type LanguagePickerProps = {
     api: ExtractInjectionAPI<CodeBlockPlugin> | undefined;
     defaultValue?: LanguagePickerOption;
     editorView: EditorView;
     filterOption: (option: SelectOption<LanguagePickerOption>, rawInput: string) => boolean;
     formatMessage: IntlShape['formatMessage'];
-    options: LanguagePickerOptionGroup[];
+    languagePickerOptions: LanguagePickerOption[];
+    onLanguageSelect?: (language: string) => void;
+    onMenuOpen?: () => void;
+    recentLanguageValues?: string[];
 };
-export declare const LanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, options, }: LanguagePickerProps) => React.JSX.Element;
-export {};
+export declare const LanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, languagePickerOptions, recentLanguageValues, onLanguageSelect, onMenuOpen, }: LanguagePickerProps) => React.JSX.Element;

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

@@ -3,9 +3,11 @@ 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 LanguagePickerSelectionSource = 'all' | 'pinned' | 'recentlyUsed' | 'search';
 export type LanguagePickerOption = {
     alias: readonly string[];
     label: string;
+    selectionSource?: LanguagePickerSelectionSource;
     value: string;
 };
 export type LanguagePickerOptionGroup = GroupType<LanguagePickerOption>;

package/dist/types/ui/recent-languages.d.ts

@@ -0,0 +1,4 @@
+export declare const RECENT_LANGUAGES_STORAGE_KEY = "recently-used-languages";
+export declare const getRecentLanguages: () => string[];
+export declare const saveRecentLanguage: (language: string) => void;
+export declare const clearRecentLanguages: () => void;

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

@@ -2,9 +2,10 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { LanguagePickerSelectionSource } from '../ui/language-picker-options';
 export declare const removeCodeBlockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const removeCodeBlock: Command;
-export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null) => Command;
+export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null, selectionSource?: LanguagePickerSelectionSource) => 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/CodeBlockLanguagePicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { LanguagePickerProps } from './LanguagePicker';
+type CodeBlockLanguagePickerProps = Omit<LanguagePickerProps, 'recentLanguageValues' | 'onLanguageSelect' | 'onMenuOpen'>;
+export declare const CodeBlockLanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, languagePickerOptions, }: CodeBlockLanguagePickerProps) => React.JSX.Element;
+export {};

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

@@ -7,14 +7,16 @@ 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 = {
+import type { LanguagePickerOption } from './language-picker-options';
+export type LanguagePickerProps = {
     api: ExtractInjectionAPI<CodeBlockPlugin> | undefined;
     defaultValue?: LanguagePickerOption;
     editorView: EditorView;
     filterOption: (option: SelectOption<LanguagePickerOption>, rawInput: string) => boolean;
     formatMessage: IntlShape['formatMessage'];
-    options: LanguagePickerOptionGroup[];
+    languagePickerOptions: LanguagePickerOption[];
+    onLanguageSelect?: (language: string) => void;
+    onMenuOpen?: () => void;
+    recentLanguageValues?: string[];
 };
-export declare const LanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, options, }: LanguagePickerProps) => React.JSX.Element;
-export {};
+export declare const LanguagePicker: ({ api, defaultValue, editorView, filterOption, formatMessage, languagePickerOptions, recentLanguageValues, onLanguageSelect, onMenuOpen, }: LanguagePickerProps) => React.JSX.Element;

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

@@ -3,9 +3,11 @@ 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 LanguagePickerSelectionSource = 'all' | 'pinned' | 'recentlyUsed' | 'search';
 export type LanguagePickerOption = {
     alias: readonly string[];
     label: string;
+    selectionSource?: LanguagePickerSelectionSource;
     value: string;
 };
 export type LanguagePickerOptionGroup = GroupType<LanguagePickerOption>;

package/dist/types-ts4.5/ui/recent-languages.d.ts

@@ -0,0 +1,4 @@
+export declare const RECENT_LANGUAGES_STORAGE_KEY = "recently-used-languages";
+export declare const getRecentLanguages: () => string[];
+export declare const saveRecentLanguage: (language: string) => void;
+export declare const clearRecentLanguages: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "12.1.6",
+	"version": "12.1.7",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -43,6 +43,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/editor-toolbar": "^1.7.0",
+		"@atlaskit/frontend-utilities": "^3.3.0",
 		"@atlaskit/icon": "^35.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
@@ -54,7 +55,7 @@
 		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.46.0",
+		"@atlaskit/editor-common": "^114.47.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},