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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-code-block
 
+## 12.1.7
+
+### Patch Changes
+
+- [`a0dc04472d27b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0dc04472d27b) -
+  Add recently used code block languages and analytics metadata
+- Updated dependencies
+
 ## 12.1.6
 
 ### Patch Changes

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

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

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

@@ -20,9 +20,9 @@ var _textWrap = _interopRequireDefault(require("@atlaskit/icon/core/text-wrap"))
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _editorCommands = require("../editor-commands");
+var _CodeBlockLanguagePicker = require("../ui/CodeBlockLanguagePicker");
 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");
@@ -33,6 +33,18 @@ var getToolbarConfig = exports.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 = (0, _languageList.createLanguageList)(overrideLanguageName ? _languageList.DEFAULT_LANGUAGES.map(function (languageOption) {
+    return _objectSpread(_objectSpread({}, languageOption), {}, {
+      name: overrideLanguageName(languageOption.name)
+    });
+  }) : _languageList.DEFAULT_LANGUAGES);
+  var languagePickerOptions = languageList.map(function (lang) {
+    return {
+      label: lang.name,
+      value: (0, _languageList.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;
@@ -53,23 +65,15 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
     var isWrapped = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
     var areLineNumbersVisible = (0, _codeBlock.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 = (0, _languageList.createLanguageList)(overrideLanguageName ? _languageList.DEFAULT_LANGUAGES.map(function (language) {
-      return _objectSpread(_objectSpread({}, language), {}, {
-        name: overrideLanguageName(language.name)
-      });
-    }) : _languageList.DEFAULT_LANGUAGES);
-    var options = languageList.map(function (lang) {
-      return {
-        label: lang.name,
-        value: (0, _languageList.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 = {
@@ -81,16 +85,11 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       },
       defaultValue: defaultValue,
       placeholder: formatMessage(_messages.codeBlockButtonMessages.selectLanguage),
-      options: options,
+      options: languageSelectOptions,
       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;
@@ -101,13 +100,13 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
           if (!view) {
             return null;
           }
-          return /*#__PURE__*/_react.default.createElement(_LanguagePicker.LanguagePicker, {
+          return /*#__PURE__*/_react.default.createElement(_CodeBlockLanguagePicker.CodeBlockLanguagePicker, {
             api: api,
             defaultValue: defaultPickerValue,
             editorView: view,
             filterOption: languageListFilter,
             formatMessage: formatMessage,
-            options: groupedOptions
+            languagePickerOptions: languagePickerOptions
           });
         }
       };

package/dist/cjs/ui/CodeBlockLanguagePicker.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CodeBlockLanguagePicker = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _LanguagePicker = require("./LanguagePicker");
+var _recentLanguages = require("./recent-languages");
+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 CodeBlockLanguagePicker = exports.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 = (0, _react.useState)(function () {
+      return (0, _recentLanguages.getRecentLanguages)();
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    recentLanguageValues = _useState2[0],
+    setRecentLanguageValues = _useState2[1];
+  var refreshRecentLanguages = (0, _react.useCallback)(function () {
+    setRecentLanguageValues((0, _recentLanguages.getRecentLanguages)());
+  }, []);
+  var handleLanguageSelect = (0, _react.useCallback)(function (language) {
+    (0, _recentLanguages.saveRecentLanguage)(language);
+    setRecentLanguageValues((0, _recentLanguages.getRecentLanguages)());
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_LanguagePicker.LanguagePicker, {
+    api: api,
+    defaultValue: defaultValue,
+    editorView: editorView,
+    filterOption: filterOption,
+    formatMessage: formatMessage,
+    languagePickerOptions: languagePickerOptions,
+    recentLanguageValues: recentLanguageValues,
+    onLanguageSelect: handleLanguageSelect,
+    onMenuOpen: refreshRecentLanguages
+  });
+};

package/dist/cjs/ui/LanguagePicker.js

@@ -18,7 +18,11 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-d
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _editorCommands = require("../editor-commands");
+var _languagePickerOptions = require("./language-picker-options");
 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); }
+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; }
 var pickerOptionStyles = null;
 var styles = {
   divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
@@ -57,6 +61,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;
+};
 var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
   var _api$analytics, _defaultValue$label;
   var api = _ref.api,
@@ -64,28 +87,58 @@ var LanguagePicker = exports.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(_messages.codeBlockButtonMessages.selectLanguage);
   var selectLanguageLabel = formatMessage(_messages.codeBlockButtonMessages.selectLanguage);
-  var _useState = (0, _react.useState)(''),
+  var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    inputValue = _useState2[0],
-    setInputValue = _useState2[1];
+    hasSearchQuery = _useState2[0],
+    setHasSearchQuery = _useState2[1];
+  var inputValueRef = (0, _react.useRef)('');
+  var optionsByValue = (0, _react.useMemo)(function () {
+    return new Map(languagePickerOptions.map(function (option) {
+      return [option.value, option];
+    }));
+  }, [languagePickerOptions]);
+  var recentlyUsedLanguages = (0, _react.useMemo)(function () {
+    return getRecentlyUsedLanguages(recentLanguageValues, optionsByValue);
+  }, [recentLanguageValues, optionsByValue]);
+  var options = (0, _react.useMemo)(function () {
+    return (0, _languagePickerOptions.createGroupedLanguageOptions)({
+      formatMessage: formatMessage,
+      languages: languagePickerOptions,
+      recentlyUsedLanguages: recentlyUsedLanguages
+    });
+  }, [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
   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) {
+    var _option$selectionSour;
     if (!option) {
       return;
     }
-    (0, _editorCommands.changeLanguage)(editorAnalyticsAPI)(option.value)(editorView.state, editorView.dispatch);
-  }, [editorAnalyticsAPI, editorView]);
-  var handleInputChange = (0, _react.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 = (0, _editorCommands.changeLanguage)(editorAnalyticsAPI)(option.value, selectionSource)(editorView.state, editorView.dispatch);
+    if (commandSucceeded) {
+      onLanguageSelect === null || onLanguageSelect === void 0 || onLanguageSelect(option.value);
+    }
+  }, [editorAnalyticsAPI, editorView, onLanguageSelect]);
+  var handleInputChange = (0, _react.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 = (0, _react.useCallback)(function (_ref2) {
@@ -110,13 +163,13 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
   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,
+    onMenuOpen: onMenuOpen,
     options: hasSearchQuery ? searchOptions : options,
     popperProps: menuPopperProps,
     searchThreshold: -1,

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

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _messages = require("@atlaskit/editor-common/messages");
+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) { (0, _defineProperty2.default)(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; }
 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';
@@ -14,6 +17,7 @@ var getDetectLanguageOption = exports.getDetectLanguageOption = function getDete
   return {
     alias: [DETECT_LANGUAGE_VALUE],
     label: formatMessage(_messages.codeBlockButtonMessages.detectLanguage),
+    selectionSource: 'pinned',
     value: DETECT_LANGUAGE_VALUE
   };
 };
@@ -22,24 +26,37 @@ var createGroupedLanguageOptions = exports.createGroupedLanguageOptions = functi
     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((0, _toConsumableArray2.default)(recentlyUsedLanguages.length > 0 ? [{
     label: formatMessage(_messages.codeBlockButtonMessages.recentlyUsed),
-    options: recentlyUsedLanguages
+    options: recentlyUsedLanguages.map(function (language) {
+      return _objectSpread(_objectSpread({}, language), {}, {
+        selectionSource: 'recentlyUsed'
+      });
+    })
   }] : []), [{
     label: formatMessage(_messages.codeBlockButtonMessages.all),
-    options: allLanguages
+    options: allLanguages.map(function (language) {
+      return _objectSpread(_objectSpread({}, language), {}, {
+        selectionSource: 'all'
+      });
+    })
   }]);
 };

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.saveRecentLanguage = exports.getRecentLanguages = exports.clearRecentLanguages = exports.RECENT_LANGUAGES_STORAGE_KEY = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _storageClient = require("@atlaskit/frontend-utilities/storage-client");
+var _languageList = require("../pm-plugins/language-list");
+var _languagePickerOptions = require("./language-picker-options");
+var RECENT_LANGUAGES_STORAGE_KEY = exports.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([_languagePickerOptions.DETECT_LANGUAGE_VALUE, _languagePickerOptions.NONE_LANGUAGE_VALUE, _languagePickerOptions.PLAIN_TEXT_LANGUAGE_VALUE]);
+var KNOWN_LANGUAGE_VALUES = new Set(_languageList.DEFAULT_LANGUAGES.map(function (language) {
+  return (0, _languageList.getLanguageIdentifier)(language);
+}));
+var recentLanguagesStorageClient = new _storageClient.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 : [];
+};
+var getRecentLanguages = exports.getRecentLanguages = function getRecentLanguages() {
+  try {
+    return readRecentLanguages();
+  } catch (_unused) {
+    return [];
+  }
+};
+var saveRecentLanguage = exports.saveRecentLanguage = function saveRecentLanguage(language) {
+  if (!isValidRecentLanguage(language)) {
+    return;
+  }
+  try {
+    var recentLanguages = readRecentLanguages();
+    var nextRecentLanguages = Array.from(new Set([language].concat((0, _toConsumableArray2.default)(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;
+  }
+};
+var clearRecentLanguages = exports.clearRecentLanguages = function clearRecentLanguages() {
+  recentLanguagesStorageClient.removeItem(RECENT_LANGUAGES_STORAGE_KEY);
+};

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

@@ -40,7 +40,7 @@ export const removeCodeBlock = (state, dispatch) => {
   }
   return true;
 };
-export const changeLanguage = editorAnalyticsAPI => language => (state, dispatch) => {
+export const changeLanguage = editorAnalyticsAPI => (language, selectionSource) => (state, dispatch) => {
   var _pluginKey$getState;
   const {
     codeBlock
@@ -61,7 +61,10 @@ export const changeLanguage = editorAnalyticsAPI => language => (state, dispatch
       action: ACTION.LANGUAGE_SELECTED,
       actionSubject: ACTION_SUBJECT.CODE_BLOCK,
       attributes: {
-        language: language !== null && language !== void 0 ? language : 'none'
+        language: language !== null && language !== void 0 ? language : 'none',
+        ...(selectionSource ? {
+          selectionSource
+        } : {})
       },
       eventType: EVENT_TYPE.TRACK
     })(result);