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

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

@@ -10,189 +10,190 @@ 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';
-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, _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
-  } = (_api$decorations$acti = api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {};
-  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  const codeBlockState = pluginKey.getState(state);
-  const pos = (_codeBlockState$pos = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.pos) !== null && _codeBlockState$pos !== void 0 ? _codeBlockState$pos : null;
-  if (!codeBlockState || pos === null) {
-    return;
-  }
-  const node = state.doc.nodeAt(pos);
-  const nodeType = state.schema.nodes.codeBlock;
-  if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
-    return;
-  }
-  const isWrapped = isCodeBlockWordWrapEnabled(node);
-  const areLineNumbersVisible = areCodeBlockLineNumbersVisible(node);
-  const language = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
-  const languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(language => ({
-    ...language,
-    name: overrideLanguageName(language.name)
+export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLanguageName = undefined) => {
+  const languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(languageOption => ({
+    ...languageOption,
+    name: overrideLanguageName(languageOption.name)
   })) : DEFAULT_LANGUAGES);
-  const options = languageList.map(lang => ({
+  const languagePickerOptions = languageList.map(lang => ({
     label: lang.name,
     value: getLanguageIdentifier(lang),
     alias: lang.alias
   }));
-
-  // If language is not undefined search for it in the value and then search in the aliases
-  const defaultValue = language ? options.find(option => option.value === language) || options.find(option => option.alias.includes(language)) : null;
-  const languageSelect = {
-    id: 'editor.codeBlock.languageOptions',
-    type: 'select',
-    selectType: 'list',
-    onChange: option => changeLanguage(editorAnalyticsAPI)(option.value),
-    defaultValue,
-    placeholder: formatMessage(codeBlockButtonMessages.selectLanguage),
-    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 (state, {
+    formatMessage
+  }) => {
+    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
+    } = (_api$decorations$acti = api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions) !== null && _api$decorations$acti !== void 0 ? _api$decorations$acti : {};
+    const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+    const codeBlockState = pluginKey.getState(state);
+    const pos = (_codeBlockState$pos = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.pos) !== null && _codeBlockState$pos !== void 0 ? _codeBlockState$pos : null;
+    if (!codeBlockState || pos === null) {
+      return;
+    }
+    const node = state.doc.nodeAt(pos);
+    const nodeType = state.schema.nodes.codeBlock;
+    if ((node === null || node === void 0 ? void 0 : node.type) !== nodeType) {
+      return;
+    }
+    const isWrapped = isCodeBlockWordWrapEnabled(node);
+    const areLineNumbersVisible = areCodeBlockLineNumbersVisible(node);
+    const language = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
+    // 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.
+    const languageSelectOptions = languagePickerOptions.map(option => ({
+      ...option
+    }));
+    const defaultValue = language ? languageSelectOptions.find(option => option.value === language) || languageSelectOptions.find(option => option.alias.includes(language)) : null;
+    const languageSelect = {
+      id: 'editor.codeBlock.languageOptions',
+      type: 'select',
+      selectType: 'list',
+      onChange: option => changeLanguage(editorAnalyticsAPI)(option.value),
+      defaultValue,
+      placeholder: formatMessage(codeBlockButtonMessages.selectLanguage),
+      options: languageSelectOptions,
+      filterOption: languageListFilter
+    };
+    let languagePicker;
+    if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button')) {
+      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(CodeBlockLanguagePicker, {
+            api: api,
+            defaultValue: defaultPickerValue,
+            editorView: view,
+            filterOption: languageListFilter,
+            formatMessage: formatMessage,
+            languagePickerOptions: languagePickerOptions
+          });
         }
-        return /*#__PURE__*/React.createElement(LanguagePicker, {
-          api: api,
-          defaultValue: defaultPickerValue,
-          editorView: view,
-          filterOption: languageListFilter,
-          formatMessage: formatMessage,
-          options: groupedOptions
-        });
-      }
+      };
+    }
+    const separator = {
+      type: 'separator'
     };
-  }
-  const separator = {
-    type: 'separator'
-  };
-  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
-  const copyToClipboardItems = !allowCopyToClipboard ? [] : [{
-    id: 'editor.codeBlock.copy',
-    type: 'button',
-    supportsViewMode: true,
-    appearance: 'subtle',
-    icon: CopyIcon,
-    // note: copyContentToClipboardWithAnalytics contains logic that also removes the
-    // visual feedback for the copy button
-    onClick: copyContentToClipboardWithAnalytics(editorAnalyticsAPI),
-    title: formatMessage(codeBlockState.contentCopied ? codeBlockButtonMessages.copiedCodeToClipboard : codeBlockButtonMessages.copyCodeToClipboard),
-    onMouseEnter: provideVisualFeedbackForCopyButton,
-    // note: resetCopiedState contains logic that also removes the
-    // visual feedback for the copy button
-    onMouseLeave: resetCopiedState,
-    onFocus: provideVisualFeedbackForCopyButton,
-    onBlur: removeVisualFeedbackForCopyButton,
-    hideTooltipOnClick: false,
-    disabled: codeBlockState.isNodeSelected,
-    tabIndex: null
-  }, separator];
-  let copyAndDeleteButtonMenuItems = [];
-  if (areAnyNewToolbarFlagsEnabled) {
-    const overflowMenuOptions = [{
-      title: formatMessage(commonMessages.delete),
-      icon: DeleteIcon({
-        label: ''
-      }),
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-      onClick: removeCodeBlockWithAnalytics(editorAnalyticsAPI)
-    }];
-    if (allowCopyToClipboard) {
-      overflowMenuOptions.unshift({
-        title: formatMessage(commonMessages.copyToClipboard),
-        onClick: copyContentToClipboardWithAnalytics(editorAnalyticsAPI),
-        icon: CopyIcon({
+    const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
+    const copyToClipboardItems = !allowCopyToClipboard ? [] : [{
+      id: 'editor.codeBlock.copy',
+      type: 'button',
+      supportsViewMode: true,
+      appearance: 'subtle',
+      icon: CopyIcon,
+      // note: copyContentToClipboardWithAnalytics contains logic that also removes the
+      // visual feedback for the copy button
+      onClick: copyContentToClipboardWithAnalytics(editorAnalyticsAPI),
+      title: formatMessage(codeBlockState.contentCopied ? codeBlockButtonMessages.copiedCodeToClipboard : codeBlockButtonMessages.copyCodeToClipboard),
+      onMouseEnter: provideVisualFeedbackForCopyButton,
+      // note: resetCopiedState contains logic that also removes the
+      // visual feedback for the copy button
+      onMouseLeave: resetCopiedState,
+      onFocus: provideVisualFeedbackForCopyButton,
+      onBlur: removeVisualFeedbackForCopyButton,
+      hideTooltipOnClick: false,
+      disabled: codeBlockState.isNodeSelected,
+      tabIndex: null
+    }, separator];
+    let copyAndDeleteButtonMenuItems = [];
+    if (areAnyNewToolbarFlagsEnabled) {
+      const overflowMenuOptions = [{
+        title: formatMessage(commonMessages.delete),
+        icon: DeleteIcon({
           label: ''
         }),
-        onMouseEnter: provideVisualFeedbackForCopyButton,
-        onMouseLeave: resetCopiedState,
-        onFocus: provideVisualFeedbackForCopyButton,
-        onBlur: removeVisualFeedbackForCopyButton,
-        disabled: codeBlockState.isNodeSelected
-      });
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+        onClick: removeCodeBlockWithAnalytics(editorAnalyticsAPI)
+      }];
+      if (allowCopyToClipboard) {
+        overflowMenuOptions.unshift({
+          title: formatMessage(commonMessages.copyToClipboard),
+          onClick: copyContentToClipboardWithAnalytics(editorAnalyticsAPI),
+          icon: CopyIcon({
+            label: ''
+          }),
+          onMouseEnter: provideVisualFeedbackForCopyButton,
+          onMouseLeave: resetCopiedState,
+          onFocus: provideVisualFeedbackForCopyButton,
+          onBlur: removeVisualFeedbackForCopyButton,
+          disabled: codeBlockState.isNodeSelected
+        });
+      }
+      copyAndDeleteButtonMenuItems = isViewMode ? [...copyToClipboardItems] : [{
+        type: 'separator',
+        fullHeight: true
+      }, {
+        type: 'overflow-dropdown',
+        testId: 'code-block-overflow-dropdown-trigger',
+        options: overflowMenuOptions
+      }];
+    } else {
+      const deleteButton = {
+        id: 'editor.codeBlock.delete',
+        type: 'button',
+        appearance: 'danger',
+        icon: DeleteIcon,
+        iconFallback: DeleteIcon,
+        onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+        onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+        onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+        onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+        onClick: removeCodeBlockWithAnalytics(editorAnalyticsAPI),
+        title: formatMessage(commonMessages.remove),
+        tabIndex: null
+      };
+      copyAndDeleteButtonMenuItems = [separator, ...copyToClipboardItems, deleteButton];
     }
-    copyAndDeleteButtonMenuItems = isViewMode ? [...copyToClipboardItems] : [{
-      type: 'separator',
-      fullHeight: true
-    }, {
-      type: 'overflow-dropdown',
-      testId: 'code-block-overflow-dropdown-trigger',
-      options: overflowMenuOptions
-    }];
-  } else {
-    const deleteButton = {
-      id: 'editor.codeBlock.delete',
+    const codeBlockWrapButtonTitle = expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? formatMessage(isWrapped ? codeBlockButtonMessages.unwrapCodeLabel : codeBlockButtonMessages.wrapCodeLabel) : formatMessage(codeBlockButtonMessages.wrapCode);
+    const codeBlockWrapButton = {
+      id: 'editor.codeBlock.wrap',
       type: 'button',
-      appearance: 'danger',
-      icon: DeleteIcon,
-      iconFallback: DeleteIcon,
-      onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-      onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-      onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
-      onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
-      onClick: removeCodeBlockWithAnalytics(editorAnalyticsAPI),
-      title: formatMessage(commonMessages.remove),
-      tabIndex: null
+      // Toggling button now writes to ADF, hence it should be available in view mode
+      supportsViewMode: !expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true),
+      icon: TextWrapIcon,
+      iconFallback: WrapIcon,
+      onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
+      title: codeBlockWrapButtonTitle,
+      tabIndex: null,
+      selected: isWrapped
+    };
+    const codeBlockLineNumbersButton = {
+      id: 'editor.codeBlock.lineNumbers',
+      type: 'button',
+      supportsViewMode: false,
+      icon: ListNumberedIcon,
+      onClick: toggleLineNumbersForCodeBlockNode(editorAnalyticsAPI),
+      title: formatMessage(areLineNumbersVisible ? codeBlockButtonMessages.hideLineNumbersLabel : codeBlockButtonMessages.showLineNumbersLabel),
+      tabIndex: null,
+      selected: areLineNumbersVisible
+    };
+    return {
+      title: 'CodeBlock floating controls',
+      // Ignored via go/ees005
+      // eslint-disable-next-line @atlaskit/editor/no-as-casting
+      getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
+      nodeType,
+      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
     };
-    copyAndDeleteButtonMenuItems = [separator, ...copyToClipboardItems, deleteButton];
-  }
-  const codeBlockWrapButtonTitle = expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? formatMessage(isWrapped ? codeBlockButtonMessages.unwrapCodeLabel : codeBlockButtonMessages.wrapCodeLabel) : formatMessage(codeBlockButtonMessages.wrapCode);
-  const codeBlockWrapButton = {
-    id: 'editor.codeBlock.wrap',
-    type: 'button',
-    // Toggling button now writes to ADF, hence it should be available in view mode
-    supportsViewMode: !expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true),
-    icon: TextWrapIcon,
-    iconFallback: WrapIcon,
-    onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
-    title: codeBlockWrapButtonTitle,
-    tabIndex: null,
-    selected: isWrapped
-  };
-  const codeBlockLineNumbersButton = {
-    id: 'editor.codeBlock.lineNumbers',
-    type: 'button',
-    supportsViewMode: false,
-    icon: ListNumberedIcon,
-    onClick: toggleLineNumbersForCodeBlockNode(editorAnalyticsAPI),
-    title: formatMessage(areLineNumbersVisible ? codeBlockButtonMessages.hideLineNumbersLabel : codeBlockButtonMessages.showLineNumbersLabel),
-    tabIndex: null,
-    selected: areLineNumbersVisible
-  };
-  return {
-    title: 'CodeBlock floating controls',
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
-    nodeType,
-    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/CodeBlockLanguagePicker.js

@@ -0,0 +1,31 @@
+import React, { useCallback, useState } from 'react';
+import { LanguagePicker } from './LanguagePicker';
+import { getRecentLanguages, saveRecentLanguage } from './recent-languages';
+export const CodeBlockLanguagePicker = ({
+  api,
+  defaultValue,
+  editorView,
+  filterOption,
+  formatMessage,
+  languagePickerOptions
+}) => {
+  const [recentLanguageValues, setRecentLanguageValues] = useState(() => getRecentLanguages());
+  const refreshRecentLanguages = useCallback(() => {
+    setRecentLanguageValues(getRecentLanguages());
+  }, []);
+  const handleLanguageSelect = useCallback(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/es2019/ui/LanguagePicker.js

@@ -1,7 +1,7 @@
 /* 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 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';
@@ -9,6 +9,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';
 const pickerOptionStyles = null;
 const styles = {
   divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
@@ -47,29 +48,60 @@ const menuPopperProps = {
     enabled: false
   }]
 };
+const getRecentlyUsedLanguages = (recentLanguageValues, optionsByValue) => {
+  const recentlyUsedLanguages = [];
+  for (const recentLanguageValue of recentLanguageValues) {
+    const option = optionsByValue.get(recentLanguageValue);
+    if (option) {
+      recentlyUsedLanguages.push(option);
+    }
+  }
+  return recentlyUsedLanguages;
+};
 export const LanguagePicker = ({
   api,
   defaultValue,
   editorView,
   filterOption,
   formatMessage,
-  options
+  languagePickerOptions,
+  recentLanguageValues = [],
+  onLanguageSelect,
+  onMenuOpen
 }) => {
   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 [hasSearchQuery, setHasSearchQuery] = useState(false);
+  const inputValueRef = useRef('');
+  const optionsByValue = useMemo(() => new Map(languagePickerOptions.map(option => [option.value, option])), [languagePickerOptions]);
+  const recentlyUsedLanguages = useMemo(() => getRecentlyUsedLanguages(recentLanguageValues, optionsByValue), [recentLanguageValues, optionsByValue]);
+  const options = useMemo(() => createGroupedLanguageOptions({
+    formatMessage,
+    languages: languagePickerOptions,
+    recentlyUsedLanguages
+  }), [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
   const searchOptions = useMemo(() => options.flatMap(group => group.options), [options]);
-  const hasSearchQuery = inputValue.trim().length > 0;
   const handleChange = useCallback(option => {
+    var _option$selectionSour;
     if (!option) {
       return;
     }
-    changeLanguage(editorAnalyticsAPI)(option.value)(editorView.state, editorView.dispatch);
-  }, [editorAnalyticsAPI, editorView]);
-  const handleInputChange = useCallback(newInputValue => {
-    setInputValue(newInputValue);
+    const isSearchSelection = inputValueRef.current.trim().length > 0;
+    const selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
+    const commandSucceeded = changeLanguage(editorAnalyticsAPI)(option.value, selectionSource)(editorView.state, editorView.dispatch);
+    if (commandSucceeded) {
+      onLanguageSelect === null || onLanguageSelect === void 0 ? void 0 : onLanguageSelect(option.value);
+    }
+  }, [editorAnalyticsAPI, editorView, onLanguageSelect]);
+  const handleInputChange = useCallback((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;
   }, []);
   const renderTarget = useCallback(({
@@ -93,13 +125,13 @@ export const LanguagePicker = ({
   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/es2019/ui/language-picker-options.js

@@ -5,6 +5,7 @@ export const PLAIN_TEXT_LANGUAGE_VALUE = 'text';
 export const getDetectLanguageOption = formatMessage => ({
   alias: [DETECT_LANGUAGE_VALUE],
   label: formatMessage(codeBlockButtonMessages.detectLanguage),
+  selectionSource: 'pinned',
   value: DETECT_LANGUAGE_VALUE
 });
 export const createGroupedLanguageOptions = ({
@@ -12,20 +13,30 @@ export const createGroupedLanguageOptions = ({
   languages,
   recentlyUsedLanguages = []
 }) => {
-  const allLanguages = languages.filter(language => language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE);
+  const recentlyUsedLanguageValues = new Set(recentlyUsedLanguages.map(language => language.value));
+  const allLanguages = languages.filter(language => language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE && !recentlyUsedLanguageValues.has(language.value));
   const plainTextOption = languages.find(language => language.value === PLAIN_TEXT_LANGUAGE_VALUE);
   const pinnedOptions = [getDetectLanguageOption(formatMessage)];
   if (plainTextOption) {
-    pinnedOptions.push(plainTextOption);
+    pinnedOptions.push({
+      ...plainTextOption,
+      selectionSource: 'pinned'
+    });
   }
   return [{
     label: '',
     options: pinnedOptions
   }, ...(recentlyUsedLanguages.length > 0 ? [{
     label: formatMessage(codeBlockButtonMessages.recentlyUsed),
-    options: recentlyUsedLanguages
+    options: recentlyUsedLanguages.map(language => ({
+      ...language,
+      selectionSource: 'recentlyUsed'
+    }))
   }] : []), {
     label: formatMessage(codeBlockButtonMessages.all),
-    options: allLanguages
+    options: allLanguages.map(language => ({
+      ...language,
+      selectionSource: 'all'
+    }))
   }];
 };

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

@@ -0,0 +1,38 @@
+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 const RECENT_LANGUAGES_STORAGE_KEY = 'recently-used-languages';
+const RECENT_LANGUAGES_STORAGE_CLIENT_KEY = '@atlaskit/editor-plugin-code-block';
+const MAX_RECENT_LANGUAGES = 3;
+const RECENT_LANGUAGE_BLOCKLIST = new Set([DETECT_LANGUAGE_VALUE, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE]);
+const KNOWN_LANGUAGE_VALUES = new Set(DEFAULT_LANGUAGES.map(language => getLanguageIdentifier(language)));
+const recentLanguagesStorageClient = new StorageClient(RECENT_LANGUAGES_STORAGE_CLIENT_KEY);
+const isValidRecentLanguage = language => KNOWN_LANGUAGE_VALUES.has(language) && !RECENT_LANGUAGE_BLOCKLIST.has(language);
+const readRecentLanguages = () => {
+  const storedValue = recentLanguagesStorageClient.getItem(RECENT_LANGUAGES_STORAGE_KEY);
+  return Array.isArray(storedValue) ? storedValue : [];
+};
+export const getRecentLanguages = () => {
+  try {
+    return readRecentLanguages();
+  } catch {
+    return [];
+  }
+};
+export const saveRecentLanguage = language => {
+  if (!isValidRecentLanguage(language)) {
+    return;
+  }
+  try {
+    const recentLanguages = readRecentLanguages();
+    const nextRecentLanguages = Array.from(new Set([language, ...recentLanguages])).slice(0, MAX_RECENT_LANGUAGES);
+
+    // StorageClient only exposes setItemWithExpiry; omitting the duration stores without expiry.
+    recentLanguagesStorageClient.setItemWithExpiry(RECENT_LANGUAGES_STORAGE_KEY, nextRecentLanguages);
+  } catch {
+    return;
+  }
+};
+export const clearRecentLanguages = () => {
+  recentLanguagesStorageClient.removeItem(RECENT_LANGUAGES_STORAGE_KEY);
+};

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

@@ -40,7 +40,7 @@ export var removeCodeBlock = function removeCodeBlock(state, dispatch) {
   return true;
 };
 export var changeLanguage = function changeLanguage(editorAnalyticsAPI) {
-  return function (language) {
+  return function (language, selectionSource) {
     return function (state, dispatch) {
       var _pluginKey$getState;
       var codeBlock = state.schema.nodes.codeBlock;
@@ -58,9 +58,11 @@ export var changeLanguage = function changeLanguage(editorAnalyticsAPI) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
           action: ACTION.LANGUAGE_SELECTED,
           actionSubject: ACTION_SUBJECT.CODE_BLOCK,
-          attributes: {
+          attributes: _objectSpread({
             language: language !== null && language !== void 0 ? language : 'none'
-          },
+          }, selectionSource ? {
+            selectionSource: selectionSource
+          } : {}),
           eventType: EVENT_TYPE.TRACK
         })(result);
         dispatch(result);