@atlaskit/editor-plugin-code-block 12.1.10 → 12.1.11

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-code-block
 
+## 12.1.11
+
+### Patch Changes
+
+- [`52a08b0d14e39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52a08b0d14e39) -
+  Add code block language auto-detection experiment
+- Updated dependencies
+
 ## 12.1.10
 
 ### Patch Changes

package/dist/cjs/codeBlockPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -16,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorCommands = require("./editor-commands");
+var _autoDetect = require("./pm-plugins/auto-detect");
 var _codeBlockAutoFullStopTransformPlugin = require("./pm-plugins/codeBlockAutoFullStopTransformPlugin");
 var _codeBlockCopySelectionPlugin = require("./pm-plugins/codeBlockCopySelectionPlugin");
 var _ideUx = _interopRequireDefault(require("./pm-plugins/ide-ux"));
@@ -81,7 +83,12 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
           var schema = _ref3.schema;
           return (0, _inputRule.createCodeBlockInputRule)(schema, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
-      }, {
+      }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [{
+        name: 'codeBlockAutoDetect',
+        plugin: function plugin() {
+          return (0, _autoDetect.createAutoDetectPlugin)(api);
+        }
+      }] : []), [{
         name: 'codeBlockIDEKeyBindings',
         plugin: function plugin() {
           return (0, _ideUx.default)(api);
@@ -102,7 +109,7 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         plugin: function plugin() {
           return (0, _codeBlockAutoFullStopTransformPlugin.codeBlockAutoFullStopTransformPlugin)();
         }
-      }];
+      }]);
     },
     // Workaround for a firefox issue where dom selection is off sync
     // https://product-fabric.atlassian.net/browse/ED-12442

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.copyContentToClipboardWithAnalytics = exports.copyContentToClipboard = exports.changeLanguage = void 0;
 exports.createInsertCodeBlockTransaction = createInsertCodeBlockTransaction;
-exports.ignoreFollowingMutations = void 0;
+exports.ignoreFollowingMutations = exports.detectLanguage = void 0;
 exports.insertCodeBlockWithAnalytics = insertCodeBlockWithAnalytics;
 exports.toggleWordWrapStateForCodeBlockNode = exports.toggleLineNumbersForCodeBlockNodeEditorCommand = exports.toggleLineNumbersForCodeBlockNode = exports.resetShouldIgnoreFollowingMutations = exports.resetCopiedState = exports.removeCodeBlockWithAnalytics = exports.removeCodeBlock = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -21,9 +21,11 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../pm-plugins/actions");
+var _autoDetectState = require("../pm-plugins/auto-detect-state");
 var _codeBlockCopySelectionPlugin = require("../pm-plugins/codeBlockCopySelectionPlugin");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _transformToCodeBlock = require("../pm-plugins/transform-to-code-block");
+var _autoDetectState2 = require("../utils/auto-detect-state");
 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 removeCodeBlockWithAnalytics = exports.removeCodeBlockWithAnalytics = function removeCodeBlockWithAnalytics(editorAnalyticsAPI) {
@@ -53,27 +55,40 @@ var removeCodeBlock = exports.removeCodeBlock = function removeCodeBlock(state,
 var changeLanguage = exports.changeLanguage = function changeLanguage(editorAnalyticsAPI) {
   return function (language, selectionSource) {
     return function (state, dispatch) {
-      var _pluginKey$getState;
+      var _pluginKey$getState, _autoDetectPluginKey$;
       var codeBlock = state.schema.nodes.codeBlock;
       var pos = (_pluginKey$getState = _pluginKey.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.pos;
       if (typeof pos !== 'number') {
         return false;
       }
       var node = state.doc.nodeAt(pos);
+      var localId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+      var previousAutoDetectEntry = (0, _expValEquals.expValEquals)('platform_editor_code_block_auto_detection', 'isEnabled', true) ? (_autoDetectPluginKey$ = _autoDetectState.autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$ === void 0 ? void 0 : _autoDetectPluginKey$.languageDetectionMap[localId] : undefined;
       var tr = state.tr.setNodeMarkup(pos, codeBlock, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
         language: language
       })).setMeta('scrollIntoView', false);
+      if ((0, _expValEquals.expValEquals)('platform_editor_code_block_auto_detection', 'isEnabled', true)) {
+        tr.setMeta(_autoDetectState.autoDetectPluginKey, {
+          type: _actions.ACTIONS.REMOVE_AUTO_DETECT_ENTRY,
+          data: {
+            localId: localId
+          }
+        });
+      }
       var selection = (0, _utils.isNodeSelection)(state.selection) ? _state.NodeSelection.create(tr.doc, pos) : tr.selection;
       var result = tr.setSelection(selection);
       if (dispatch) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
           action: _analytics.ACTION.LANGUAGE_SELECTED,
           actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
-          attributes: _objectSpread({
+          attributes: _objectSpread(_objectSpread({
             language: language !== null && language !== void 0 ? language : 'none'
           }, selectionSource ? {
             selectionSource: selectionSource
-          } : {}),
+          } : {}), {}, {
+            autoDetectionResult: previousAutoDetectEntry === null || previousAutoDetectEntry === void 0 ? void 0 : previousAutoDetectEntry.detectionResult,
+            autoDetectedLanguage: previousAutoDetectEntry === null || previousAutoDetectEntry === void 0 ? void 0 : previousAutoDetectEntry.autoDetectedLanguage
+          }),
           eventType: _analytics.EVENT_TYPE.TRACK
         })(result);
         dispatch(result);
@@ -82,6 +97,43 @@ var changeLanguage = exports.changeLanguage = function changeLanguage(editorAnal
     };
   };
 };
+
+/** Queue auto-detection for selected code block. */
+var detectLanguage = exports.detectLanguage = function detectLanguage() {
+  return function (state, dispatch) {
+    var _pluginKey$getState2;
+    var pos = (_pluginKey$getState2 = _pluginKey.pluginKey.getState(state)) === null || _pluginKey$getState2 === void 0 ? void 0 : _pluginKey$getState2.pos;
+    if (typeof pos !== 'number') {
+      return false;
+    }
+    var node = state.doc.nodeAt(pos);
+    if (!node) {
+      return false;
+    }
+    var localId = (0, _autoDetectState2.getLocalId)(node);
+    if (!localId) {
+      return false;
+    }
+    var autoDetectState = _autoDetectState.autoDetectPluginKey.getState(state);
+    var previousEntry = autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId];
+    var entry = (0, _autoDetectState2.createAutoDetectEntry)(node, pos, (0, _autoDetectState2.hasEnoughTextForAutoDetection)(node.textContent), previousEntry);
+    var tr = state.tr.setNodeMarkup(pos, state.schema.nodes.codeBlock, _objectSpread(_objectSpread({}, node.attrs), {}, {
+      language: null
+    })).setMeta(_autoDetectState.autoDetectPluginKey, {
+      type: _actions.ACTIONS.SET_AUTO_DETECT_ENTRY,
+      data: {
+        localId: localId,
+        entry: entry
+      }
+    }).setMeta('scrollIntoView', false);
+    var selection = (0, _utils.isNodeSelection)(state.selection) ? _state.NodeSelection.create(tr.doc, pos) : tr.selection;
+    var result = tr.setSelection(selection);
+    if (dispatch) {
+      dispatch(result);
+    }
+    return true;
+  };
+};
 var copyContentToClipboardWithAnalytics = exports.copyContentToClipboardWithAnalytics = function copyContentToClipboardWithAnalytics(editorAnalyticsAPI) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes,

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

@@ -7,5 +7,7 @@ exports.ACTIONS = void 0;
 var ACTIONS = exports.ACTIONS = {
   SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
   SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS',
-  SET_IS_WRAPPED: 'SET_IS_WRAPPED'
+  SET_IS_WRAPPED: 'SET_IS_WRAPPED',
+  SET_AUTO_DETECT_ENTRY: 'SET_AUTO_DETECT_ENTRY',
+  REMOVE_AUTO_DETECT_ENTRY: 'REMOVE_AUTO_DETECT_ENTRY'
 };

package/dist/cjs/pm-plugins/auto-detect-state.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAutoDetectPluginState = exports.autoDetectPluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var autoDetectPluginKey = exports.autoDetectPluginKey = new _state.PluginKey('codeBlockAutoDetectPlugin');
+var getAutoDetectPluginState = exports.getAutoDetectPluginState = function getAutoDetectPluginState(state) {
+  return autoDetectPluginKey.getState(state);
+};

package/dist/cjs/pm-plugins/auto-detect.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAutoDetectPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _autoDetectState = require("../utils/auto-detect-state");
+var _autoDetectView = require("../utils/auto-detect-view");
+var _actions = require("./actions");
+var _autoDetectState2 = require("./auto-detect-state");
+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 createAutoDetectPlugin = exports.createAutoDetectPlugin = function createAutoDetectPlugin(api) {
+  return new _safePlugin.SafePlugin({
+    key: _autoDetectState2.autoDetectPluginKey,
+    state: {
+      init: function init() {
+        return {
+          languageDetectionMap: {}
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(_autoDetectState2.autoDetectPluginKey);
+        var languageDetectionMap = tr.docChanged ? (0, _autoDetectState.updateAutoDetectState)(tr, pluginState) : pluginState.languageDetectionMap;
+        if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions.ACTIONS.SET_AUTO_DETECT_ENTRY) {
+          languageDetectionMap = _objectSpread(_objectSpread({}, languageDetectionMap), {}, (0, _defineProperty2.default)({}, meta.data.localId, meta.data.entry));
+        } else if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions.ACTIONS.REMOVE_AUTO_DETECT_ENTRY) {
+          languageDetectionMap = (0, _autoDetectState.removeAutoDetection)(languageDetectionMap, meta.data.localId);
+        }
+        if (languageDetectionMap === pluginState.languageDetectionMap) {
+          return pluginState;
+        }
+        return {
+          languageDetectionMap: languageDetectionMap
+        };
+      }
+    },
+    view: function view(_view) {
+      var timers = new Map();
+      return {
+        update: function update() {
+          (0, _autoDetectView.syncPendingDetectionTimers)(_view, timers, api);
+        },
+        destroy: function destroy() {
+          timers.forEach(function (_ref) {
+            var timer = _ref.timer;
+            return clearTimeout(timer);
+          });
+          timers.clear();
+        }
+      };
+    }
+  });
+};

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

@@ -109,11 +109,11 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         }
         if (tr.docChanged) {
           var _node = (0, _transforms.findCodeBlock)(newState, tr.selection);
+          var codeBlockNodes = (0, _utils.getAllChangedCodeBlocksInTransaction)(tr);
 
           // Updates mapping position of all existing decorations to new positions
           // specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
           var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
-          var codeBlockNodes = (0, _utils.getAllChangedCodeBlocksInTransaction)(tr);
           if (codeBlockNodes) {
             (0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
             // Disabled when using advanced code block for performance reasons

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

@@ -23,12 +23,41 @@ var _editorCommands = require("../editor-commands");
 var _CodeBlockLanguagePicker = require("../ui/CodeBlockLanguagePicker");
 var _WrapIcon = require("../ui/icons/WrapIcon");
 var _languagePickerOptions = require("../ui/language-picker-options");
+var _autoDetectState = require("./auto-detect-state");
 var _codeBlockCopySelectionPlugin = require("./codeBlockCopySelectionPlugin");
 var _languageList = require("./language-list");
 var _pluginKey = require("./plugin-key");
 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 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 getAutoDetectPickerValue = function getAutoDetectPickerValue(_ref) {
+  var autoDetectEntry = _ref.autoDetectEntry,
+    formatMessage = _ref.formatMessage,
+    language = _ref.language,
+    languagePickerOptions = _ref.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;
+
+  // A weak re-detection records noneDetected but can leave a previously auto-detected
+  // language on the node. Keep showing "(detected)" only while that preserved language
+  // still matches the node language, so manual language changes do not inherit the label.
+  if (defaultPickerValue && ((autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'detected' || (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'noneDetected' && autoDetectEntry.autoDetectedLanguage === language)) {
+    return _objectSpread(_objectSpread({}, defaultPickerValue), {}, {
+      label: formatMessage(_messages.codeBlockButtonMessages.detectedLanguage, {
+        language: defaultPickerValue.label
+      })
+    });
+  }
+  if ((autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'noneDetected' && !language) {
+    return {
+      alias: [],
+      label: formatMessage(_messages.codeBlockButtonMessages.noneDetected),
+      value: _languagePickerOptions.NONE_LANGUAGE_VALUE
+    };
+  }
+  return defaultPickerValue;
+};
 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;
@@ -45,12 +74,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       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;
+  return function (state, _ref2) {
+    var _api$editorViewMode, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs, _node$attrs2;
+    var formatMessage = _ref2.formatMessage;
     var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
-    var _ref2 = (_api$decorations$acti = api === null || api === 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 : {},
-      hoverDecoration = _ref2.hoverDecoration;
+    var _ref3 = (_api$decorations$acti = api === null || api === 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 : {},
+      hoverDecoration = _ref3.hoverDecoration;
     var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
     var codeBlockState = _pluginKey.pluginKey.getState(state);
     var pos = (_codeBlockState$pos = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.pos) !== null && _codeBlockState$pos !== void 0 ? _codeBlockState$pos : null;
@@ -65,6 +94,10 @@ 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 localId = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId;
+    var autoDetectState = _autoDetectState.autoDetectPluginKey.getState(state);
+    var autoDetectEntry = (0, _expValEquals.expValEquals)('platform_editor_code_block_auto_detection', 'isEnabled', true) && typeof localId === 'string' ? autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId] : undefined;
+
     // 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.
@@ -90,9 +123,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
     };
     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 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;
+      var autoDetectPickerValue = getAutoDetectPickerValue({
+        autoDetectEntry: autoDetectEntry,
+        formatMessage: formatMessage,
+        language: language,
+        languagePickerOptions: languagePickerOptions
+      });
       languagePicker = {
         type: 'custom',
         fallback: [],
@@ -102,7 +138,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
           }
           return /*#__PURE__*/_react.default.createElement(_CodeBlockLanguagePicker.CodeBlockLanguagePicker, {
             api: api,
-            defaultValue: defaultPickerValue,
+            defaultValue: autoDetectPickerValue,
             editorView: view,
             filterOption: languageListFilter,
             formatMessage: formatMessage,
@@ -234,8 +270,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
 var languageListFilter = exports.languageListFilter = function languageListFilter(option, rawInput) {
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  var _ref3 = option,
-    data = _ref3.data;
+  var _ref4 = option,
+    data = _ref4.data;
   var searchString = rawInput.toLowerCase();
   return data.label.toLowerCase().includes(searchString) || data.alias.some(function (alias) {
     return alias.toLowerCase() === searchString;

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

@@ -42,8 +42,5 @@ function getAllChangedCodeBlocksInTransaction(tr) {
       });
     });
   });
-  if (changedCodeBlocks.length < 1) {
-    return null;
-  }
   return changedCodeBlocks;
 }

package/dist/cjs/ui/CodeBlockLanguagePicker.js

@@ -8,10 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.CodeBlockLanguagePicker = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _editorCommands = require("../editor-commands");
+var _languagePickerOptions = require("./language-picker-options");
 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$analytics2;
   var api = _ref.api,
     defaultValue = _ref.defaultValue,
     editorView = _ref.editorView,
@@ -27,19 +31,22 @@ var CodeBlockLanguagePicker = exports.CodeBlockLanguagePicker = function CodeBlo
   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)());
-  }, []);
+  var handleSelection = (0, _react.useCallback)(function (option, selectionSource) {
+    var _api$analytics;
+    var command = option.value === _languagePickerOptions.DETECT_LANGUAGE_VALUE && (0, _expValEquals.expValEquals)('platform_editor_code_block_auto_detection', 'isEnabled', true) ? (0, _editorCommands.detectLanguage)() : (0, _editorCommands.changeLanguage)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(option.value, selectionSource);
+    var commandSucceeded = command(editorView.state, editorView.dispatch);
+    if (commandSucceeded && option.value !== _languagePickerOptions.DETECT_LANGUAGE_VALUE) {
+      (0, _recentLanguages.saveRecentLanguage)(option.value);
+      setRecentLanguageValues((0, _recentLanguages.getRecentLanguages)());
+    }
+  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
   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
+    onMenuOpen: refreshRecentLanguages,
+    onSelection: handleSelection
   });
 };

package/dist/cjs/ui/LanguagePicker.js

@@ -17,7 +17,6 @@ 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");
 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; } } }; }
@@ -81,18 +80,15 @@ var getRecentlyUsedLanguages = function getRecentlyUsedLanguages(recentLanguageV
   return recentlyUsedLanguages;
 };
 var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
-  var _api$analytics, _defaultValue$label;
-  var api = _ref.api,
-    defaultValue = _ref.defaultValue,
-    editorView = _ref.editorView,
+  var _defaultValue$label;
+  var defaultValue = _ref.defaultValue,
     filterOption = _ref.filterOption,
     formatMessage = _ref.formatMessage,
     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;
+    onMenuOpen = _ref.onMenuOpen,
+    onSelection = _ref.onSelection;
   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)(false),
@@ -127,11 +123,8 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
     }
     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]);
+    onSelection(option, selectionSource);
+  }, [onSelection]);
   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.
@@ -156,10 +149,9 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
       appearance: "subtle",
       isSelected: isOpen,
       "aria-controls": ariaControls,
-      "aria-label": selectLanguageLabel,
       testId: "code-block-language-picker-trigger"
     }, label));
-  }, [label, selectLanguageLabel]);
+  }, [label]);
   return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
     components: popupSelectComponents,
     filterOption: filterOption,

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

@@ -8,6 +8,7 @@ exports.getDetectLanguageOption = exports.createGroupedLanguageOptions = exports
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _messages = require("@atlaskit/editor-common/messages");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 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';
@@ -35,7 +36,7 @@ var createGroupedLanguageOptions = exports.createGroupedLanguageOptions = functi
   var plainTextOption = languages.find(function (language) {
     return language.value === PLAIN_TEXT_LANGUAGE_VALUE;
   });
-  var pinnedOptions = [getDetectLanguageOption(formatMessage)];
+  var pinnedOptions = (0, _expValEquals.expValEquals)('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [getDetectLanguageOption(formatMessage)] : [];
   if (plainTextOption) {
     pinnedOptions.push(_objectSpread(_objectSpread({}, plainTextOption), {}, {
       selectionSource: 'pinned'