@atlaskit/editor-plugin-code-block 14.0.0 → 14.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-code-block
 
+## 14.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.0.1
+
+### Patch Changes
+
+- [`4543a53261907`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4543a53261907) -
+  Fix code block language picker behaviour for auto-detection state, cap the picker trigger width,
+  keep detected labels stable across toolbar updates, and avoid selecting the whole code block when
+  dragging across multiple code lines.
+- Updated dependencies
+
 ## 14.0.0
 
 ### Major Changes

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

@@ -117,7 +117,9 @@ var detectLanguage = exports.detectLanguage = function detectLanguage() {
     }
     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 entry = (0, _autoDetectState2.createAutoDetectEntry)(node, pos, (0, _autoDetectState2.hasEnoughTextForAutoDetection)(node.textContent), previousEntry, {
+      preserveDetectionResult: false
+    });
     var tr = state.tr.setNodeMarkup(pos, state.schema.nodes.codeBlock, _objectSpread(_objectSpread({}, node.attrs), {}, {
       language: null
     })).setMeta(_autoDetectState.autoDetectPluginKey, {

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

@@ -117,7 +117,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
           // 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);
-          if (codeBlockNodes) {
+          if (codeBlockNodes.length) {
             (0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
             // Disabled when using advanced code block for performance reasons
             // @ts-expect-error Code block advanced cannot depend on code block

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

@@ -32,33 +32,53 @@ 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 getDetectLanguageOption = function getDetectLanguageOption(formatMessage) {
+  return {
+    alias: [],
+    label: formatMessage(_messages.codeBlockButtonMessages.detectLanguage),
+    value: _languagePickerOptions.DETECT_LANGUAGE_VALUE
+  };
+};
+var getNoneDetectedOption = function getNoneDetectedOption(formatMessage) {
+  return {
+    alias: [],
+    label: formatMessage(_messages.codeBlockButtonMessages.noneDetected),
+    value: _languagePickerOptions.NONE_LANGUAGE_VALUE
+  };
+};
+var getDefaultLanguagePickerValue = function getDefaultLanguagePickerValue(language, languagePickerOptions) {
+  return 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 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;
+  var defaultPickerValue = getDefaultLanguagePickerValue(language, languagePickerOptions);
 
   // 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)) {
+  var shouldShowDetectedLabel = Boolean(defaultPickerValue) && (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === language && Boolean(autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult);
+  if (shouldShowDetectedLabel && defaultPickerValue) {
     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
-    };
+  if (language || !autoDetectEntry) {
+    return defaultPickerValue;
+  }
+  if (autoDetectEntry.detectionResult === 'noneDetected') {
+    return getNoneDetectedOption(formatMessage);
+  }
+  if (!autoDetectEntry.detectionResult) {
+    return getDetectLanguageOption(formatMessage);
   }
-  return defaultPickerValue;
+  return undefined;
 };
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
   var allowCopyToClipboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

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

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

package/dist/cjs/ui/LanguagePicker.js

@@ -25,7 +25,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var pickerOptionStyles = null;
 var styles = {
   divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
-  trigger: "_1reo15vq _18m915vq _1bsbuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
+  trigger: "_1reo15vq _18m915vq _p12fuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
 };
 var CustomGroup = function CustomGroup(props) {
   var allGroups = props.selectProps.options;

package/dist/cjs/utils/auto-detect-state.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateAutoDetectState = exports.shouldTriggerLargeChangeDetection = exports.removeAutoDetection = exports.queueAutoDetection = exports.hasEnoughTextForAutoDetection = exports.getLocalId = exports.getFirstLine = exports.createAutoDetectEntry = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _codeBlock = require("@atlaskit/editor-common/code-block");
-var _utils = require("../pm-plugins/utils");
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("../pm-plugins/utils");
 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 MIN_AUTO_DETECT_TEXT_LENGTH = 20;
@@ -29,11 +31,12 @@ var getLocalId = exports.getLocalId = function getLocalId(node) {
   return typeof node.attrs.localId === 'string' ? node.attrs.localId : null;
 };
 var createAutoDetectEntry = exports.createAutoDetectEntry = function createAutoDetectEntry(node, pos, isPending, previous) {
+  var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   return {
     lastObservedText: node.textContent,
     lastObservedFirstLine: getFirstLine(node.textContent),
     isPending: isPending,
-    detectionResult: previous === null || previous === void 0 ? void 0 : previous.detectionResult,
+    detectionResult: options.preserveDetectionResult === false ? undefined : previous === null || previous === void 0 ? void 0 : previous.detectionResult,
     autoDetectedLanguage: previous === null || previous === void 0 ? void 0 : previous.autoDetectedLanguage,
     pos: pos
   };
@@ -80,6 +83,9 @@ var getCodeBlockLocalIdsRemovedFromChangedRanges = function getCodeBlockLocalIds
   });
   return localIds;
 };
+var isHistoryMeta = function isHistoryMeta(meta) {
+  return (0, _typeof2.default)(meta) === 'object' && meta !== null && 'redo' in meta;
+};
 var getCodeBlockTransactionChanges = function getCodeBlockTransactionChanges(tr, codeBlockType) {
   var insertedNodesWithPos = (0, _codeBlock.getInsertedCodeBlocksInTransaction)(tr, codeBlockType);
   var removedFromChangedRangesLocalIds = getCodeBlockLocalIdsRemovedFromChangedRanges(tr, codeBlockType);
@@ -116,6 +122,8 @@ var updateAutoDetectState = exports.updateAutoDetectState = function updateAutoD
   var codeBlock = tr.doc.type.schema.nodes.codeBlock;
   var isPaste = tr.getMeta('paste') === true || tr.getMeta('uiEvent') === 'paste';
   var isExternalContentChange = tr.getMeta('replaceDocument') === true || tr.getMeta('isRemote') === true;
+  var historyMeta = tr.getMeta(_utils.pmHistoryPluginKey);
+  var isUndo = isHistoryMeta(historyMeta) && historyMeta.redo === false;
   var hasTrackedEntries = Object.keys(pluginState.languageDetectionMap).length > 0;
 
   // Page loads and remote edits should not start auto-detection for code blocks.
@@ -124,7 +132,7 @@ var updateAutoDetectState = exports.updateAutoDetectState = function updateAutoD
   }
 
   // Existing entries still need mapping/deletion cleanup, but external edits should not refresh text.
-  var changedCodeBlockNodes = isExternalContentChange ? [] : (0, _utils.getAllChangedCodeBlocksInTransaction)(tr);
+  var changedCodeBlockNodes = isExternalContentChange ? [] : (0, _utils2.getAllChangedCodeBlocksInTransaction)(tr);
   if (!hasTrackedEntries && !changedCodeBlockNodes.length) {
     return pluginState.languageDetectionMap;
   }
@@ -151,6 +159,7 @@ var updateAutoDetectState = exports.updateAutoDetectState = function updateAutoD
       languageDetectionMap = queueAutoDetection(languageDetectionMap, node, pos, hasEnoughTextForAutoDetection(node.textContent));
     });
     changedCodeBlockNodes.forEach(function (_ref5) {
+      var _tr$before$nodeAt;
       var node = _ref5.node,
         pos = _ref5.pos;
       var localId = getLocalId(node);
@@ -159,7 +168,10 @@ var updateAutoDetectState = exports.updateAutoDetectState = function updateAutoD
       }
       var currentLanguage = node.attrs.language;
       var previousEntry = languageDetectionMap[localId];
-      if (currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
+      // Undo metadata does not identify the changed node; compare the pre/post language
+      // so text undo inside auto-detection mode keeps the entry.
+      var previousLanguage = isUndo ? (_tr$before$nodeAt = tr.before.nodeAt(tr.mapping.invert().map(pos))) === null || _tr$before$nodeAt === void 0 ? void 0 : _tr$before$nodeAt.attrs.language : undefined;
+      if (isUndo && previousLanguage && !currentLanguage || currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
         languageDetectionMap = removeAutoDetection(languageDetectionMap, localId);
         return;
       }

package/dist/cjs/utils/auto-detect-view.js

@@ -76,7 +76,8 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
       },
       eventType: _analytics.EVENT_TYPE.TRACK
     })(tr);
-    return tr;
+    // Language detection runs in the background and should not move the viewport.
+    return tr.setMeta('scrollIntoView', false);
   });
 };
 var clearTimer = function clearTimer(timers, localId) {

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

@@ -105,7 +105,9 @@ export const detectLanguage = () => (state, dispatch) => {
   }
   const autoDetectState = autoDetectPluginKey.getState(state);
   const previousEntry = autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId];
-  const entry = createAutoDetectEntry(node, pos, hasEnoughTextForAutoDetection(node.textContent), previousEntry);
+  const entry = createAutoDetectEntry(node, pos, hasEnoughTextForAutoDetection(node.textContent), previousEntry, {
+    preserveDetectionResult: false
+  });
   const tr = state.tr.setNodeMarkup(pos, state.schema.nodes.codeBlock, {
     ...node.attrs,
     language: null

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

@@ -105,7 +105,7 @@ export const createPlugin = ({
           // 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).
           let updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
-          if (codeBlockNodes) {
+          if (codeBlockNodes.length) {
             updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
             // Disabled when using advanced code block for performance reasons
             // @ts-expect-error Code block advanced cannot depend on code block

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

@@ -13,24 +13,36 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changeLanguage, copyContentToClipboardWithAnalytics, createFormatCodeOnClick, removeCodeBlockWithAnalytics, resetCopiedState, toggleLineNumbersForCodeBlockNode, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
 import { CodeBlockLanguagePicker } from '../ui/CodeBlockLanguagePicker';
 import { WrapIcon } from '../ui/icons/WrapIcon';
-import { NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
+import { DETECT_LANGUAGE_VALUE, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
 import { preloadFormatterOnIntent } from '../utils/format-code/formatter';
 import { autoDetectPluginKey } from './auto-detect-state';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
+const getDetectLanguageOption = formatMessage => ({
+  alias: [],
+  label: formatMessage(codeBlockButtonMessages.detectLanguage),
+  value: DETECT_LANGUAGE_VALUE
+});
+const getNoneDetectedOption = formatMessage => ({
+  alias: [],
+  label: formatMessage(codeBlockButtonMessages.noneDetected),
+  value: NONE_LANGUAGE_VALUE
+});
+const getDefaultLanguagePickerValue = (language, languagePickerOptions) => language ? languagePickerOptions.find(option => language === NONE_LANGUAGE_VALUE ? option.value === PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language)) : undefined;
 const getAutoDetectPickerValue = ({
   autoDetectEntry,
   formatMessage,
   language,
   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;
+  const defaultPickerValue = getDefaultLanguagePickerValue(language, languagePickerOptions);
 
   // 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)) {
+  const shouldShowDetectedLabel = Boolean(defaultPickerValue) && (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === language && Boolean(autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult);
+  if (shouldShowDetectedLabel && defaultPickerValue) {
     return {
       ...defaultPickerValue,
       label: formatMessage(codeBlockButtonMessages.detectedLanguage, {
@@ -38,14 +50,16 @@ const getAutoDetectPickerValue = ({
       })
     };
   }
-  if ((autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'noneDetected' && !language) {
-    return {
-      alias: [],
-      label: formatMessage(codeBlockButtonMessages.noneDetected),
-      value: NONE_LANGUAGE_VALUE
-    };
+  if (language || !autoDetectEntry) {
+    return defaultPickerValue;
+  }
+  if (autoDetectEntry.detectionResult === 'noneDetected') {
+    return getNoneDetectedOption(formatMessage);
+  }
+  if (!autoDetectEntry.detectionResult) {
+    return getDetectLanguageOption(formatMessage);
   }
-  return defaultPickerValue;
+  return undefined;
 };
 export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLanguageName = undefined, formatCodeProvider = undefined) => {
   const languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(languageOption => ({

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

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

package/dist/es2019/ui/LanguagePicker.js

@@ -12,7 +12,7 @@ import { createGroupedLanguageOptions } from './language-picker-options';
 const pickerOptionStyles = null;
 const styles = {
   divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
-  trigger: "_1reo15vq _18m915vq _1bsbuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
+  trigger: "_1reo15vq _18m915vq _p12fuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
 };
 const CustomGroup = props => {
   const allGroups = props.selectProps.options;

package/dist/es2019/utils/auto-detect-state.js

@@ -1,4 +1,5 @@
 import { getInsertedCodeBlocksInTransaction } from '@atlaskit/editor-common/code-block';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { getAllChangedCodeBlocksInTransaction } from '../pm-plugins/utils';
 const MIN_AUTO_DETECT_TEXT_LENGTH = 20;
 export const shouldTriggerLargeChangeDetection = (lastObservedText, text) => {
@@ -13,11 +14,11 @@ export const getFirstLine = text => {
 };
 export const hasEnoughTextForAutoDetection = text => text.trim().length >= MIN_AUTO_DETECT_TEXT_LENGTH;
 export const getLocalId = node => typeof node.attrs.localId === 'string' ? node.attrs.localId : null;
-export const createAutoDetectEntry = (node, pos, isPending, previous) => ({
+export const createAutoDetectEntry = (node, pos, isPending, previous, options = {}) => ({
   lastObservedText: node.textContent,
   lastObservedFirstLine: getFirstLine(node.textContent),
   isPending,
-  detectionResult: previous === null || previous === void 0 ? void 0 : previous.detectionResult,
+  detectionResult: options.preserveDetectionResult === false ? undefined : previous === null || previous === void 0 ? void 0 : previous.detectionResult,
   autoDetectedLanguage: previous === null || previous === void 0 ? void 0 : previous.autoDetectedLanguage,
   pos
 });
@@ -68,6 +69,7 @@ const getCodeBlockLocalIdsRemovedFromChangedRanges = (tr, codeBlockType) => {
   });
   return localIds;
 };
+const isHistoryMeta = meta => typeof meta === 'object' && meta !== null && 'redo' in meta;
 const getCodeBlockTransactionChanges = (tr, codeBlockType) => {
   const insertedNodesWithPos = getInsertedCodeBlocksInTransaction(tr, codeBlockType);
   const removedFromChangedRangesLocalIds = getCodeBlockLocalIdsRemovedFromChangedRanges(tr, codeBlockType);
@@ -107,6 +109,8 @@ export const updateAutoDetectState = (tr, pluginState) => {
   } = tr.doc.type.schema.nodes;
   const isPaste = tr.getMeta('paste') === true || tr.getMeta('uiEvent') === 'paste';
   const isExternalContentChange = tr.getMeta('replaceDocument') === true || tr.getMeta('isRemote') === true;
+  const historyMeta = tr.getMeta(pmHistoryPluginKey);
+  const isUndo = isHistoryMeta(historyMeta) && historyMeta.redo === false;
   const hasTrackedEntries = Object.keys(pluginState.languageDetectionMap).length > 0;
 
   // Page loads and remote edits should not start auto-detection for code blocks.
@@ -143,13 +147,17 @@ export const updateAutoDetectState = (tr, pluginState) => {
       node,
       pos
     }) => {
+      var _tr$before$nodeAt;
       const localId = getLocalId(node);
       if (!localId || !languageDetectionMap[localId]) {
         return;
       }
       const currentLanguage = node.attrs.language;
       const previousEntry = languageDetectionMap[localId];
-      if (currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
+      // Undo metadata does not identify the changed node; compare the pre/post language
+      // so text undo inside auto-detection mode keeps the entry.
+      const previousLanguage = isUndo ? (_tr$before$nodeAt = tr.before.nodeAt(tr.mapping.invert().map(pos))) === null || _tr$before$nodeAt === void 0 ? void 0 : _tr$before$nodeAt.attrs.language : undefined;
+      if (isUndo && previousLanguage && !currentLanguage || currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
         languageDetectionMap = removeAutoDetection(languageDetectionMap, localId);
         return;
       }

package/dist/es2019/utils/auto-detect-view.js

@@ -68,7 +68,8 @@ const runPendingDetection = (view, localId, api) => {
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);
-    return tr;
+    // Language detection runs in the background and should not move the viewport.
+    return tr.setMeta('scrollIntoView', false);
   });
 };
 const clearTimer = (timers, localId) => {

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

@@ -106,7 +106,9 @@ export var detectLanguage = function detectLanguage() {
     }
     var autoDetectState = autoDetectPluginKey.getState(state);
     var previousEntry = autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId];
-    var entry = createAutoDetectEntry(node, pos, hasEnoughTextForAutoDetection(node.textContent), previousEntry);
+    var entry = createAutoDetectEntry(node, pos, hasEnoughTextForAutoDetection(node.textContent), previousEntry, {
+      preserveDetectionResult: false
+    });
     var tr = state.tr.setNodeMarkup(pos, state.schema.nodes.codeBlock, _objectSpread(_objectSpread({}, node.attrs), {}, {
       language: null
     })).setMeta(autoDetectPluginKey, {

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

@@ -110,7 +110,7 @@ export var createPlugin = function createPlugin(_ref) {
           // 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);
-          if (codeBlockNodes) {
+          if (codeBlockNodes.length) {
             updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
             // Disabled when using advanced code block for performance reasons
             // @ts-expect-error Code block advanced cannot depend on code block

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

@@ -17,39 +17,59 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changeLanguage, copyContentToClipboardWithAnalytics, createFormatCodeOnClick, removeCodeBlockWithAnalytics, resetCopiedState, toggleLineNumbersForCodeBlockNode, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
 import { CodeBlockLanguagePicker } from '../ui/CodeBlockLanguagePicker';
 import { WrapIcon } from '../ui/icons/WrapIcon';
-import { NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
+import { DETECT_LANGUAGE_VALUE, NONE_LANGUAGE_VALUE, PLAIN_TEXT_LANGUAGE_VALUE } from '../ui/language-picker-options';
 import { preloadFormatterOnIntent } from '../utils/format-code/formatter';
 import { autoDetectPluginKey } from './auto-detect-state';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
+var getDetectLanguageOption = function getDetectLanguageOption(formatMessage) {
+  return {
+    alias: [],
+    label: formatMessage(codeBlockButtonMessages.detectLanguage),
+    value: DETECT_LANGUAGE_VALUE
+  };
+};
+var getNoneDetectedOption = function getNoneDetectedOption(formatMessage) {
+  return {
+    alias: [],
+    label: formatMessage(codeBlockButtonMessages.noneDetected),
+    value: NONE_LANGUAGE_VALUE
+  };
+};
+var getDefaultLanguagePickerValue = function getDefaultLanguagePickerValue(language, languagePickerOptions) {
+  return language ? languagePickerOptions.find(function (option) {
+    return language === NONE_LANGUAGE_VALUE ? option.value === PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language);
+  }) : undefined;
+};
 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 === NONE_LANGUAGE_VALUE ? option.value === PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language);
-  }) : undefined;
+  var defaultPickerValue = getDefaultLanguagePickerValue(language, languagePickerOptions);
 
   // 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)) {
+  var shouldShowDetectedLabel = Boolean(defaultPickerValue) && (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === language && Boolean(autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult);
+  if (shouldShowDetectedLabel && defaultPickerValue) {
     return _objectSpread(_objectSpread({}, defaultPickerValue), {}, {
       label: formatMessage(codeBlockButtonMessages.detectedLanguage, {
         language: defaultPickerValue.label
       })
     });
   }
-  if ((autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'noneDetected' && !language) {
-    return {
-      alias: [],
-      label: formatMessage(codeBlockButtonMessages.noneDetected),
-      value: NONE_LANGUAGE_VALUE
-    };
+  if (language || !autoDetectEntry) {
+    return defaultPickerValue;
+  }
+  if (autoDetectEntry.detectionResult === 'noneDetected') {
+    return getNoneDetectedOption(formatMessage);
+  }
+  if (!autoDetectEntry.detectionResult) {
+    return getDetectLanguageOption(formatMessage);
   }
-  return defaultPickerValue;
+  return undefined;
 };
 export var getToolbarConfig = function getToolbarConfig() {
   var allowCopyToClipboard = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

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

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

package/dist/esm/ui/LanguagePicker.js

@@ -16,7 +16,7 @@ import { createGroupedLanguageOptions } from './language-picker-options';
 var pickerOptionStyles = null;
 var styles = {
   divider: "_h7alglyw _179rglyw _mqm2ia51 _1bsb1osq",
-  trigger: "_1reo15vq _18m915vq _1bsbuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
+  trigger: "_1reo15vq _18m915vq _p12fuuw1 _1bto1l2s _o5721q9c _ficf1e5h _1xw9glyw"
 };
 var CustomGroup = function CustomGroup(props) {
   var allGroups = props.selectProps.options;

package/dist/esm/utils/auto-detect-state.js

@@ -1,8 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _typeof from "@babel/runtime/helpers/typeof";
 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 { getInsertedCodeBlocksInTransaction } from '@atlaskit/editor-common/code-block';
+import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
 import { getAllChangedCodeBlocksInTransaction } from '../pm-plugins/utils';
 var MIN_AUTO_DETECT_TEXT_LENGTH = 20;
 export var shouldTriggerLargeChangeDetection = function shouldTriggerLargeChangeDetection(lastObservedText, text) {
@@ -22,11 +24,12 @@ export var getLocalId = function getLocalId(node) {
   return typeof node.attrs.localId === 'string' ? node.attrs.localId : null;
 };
 export var createAutoDetectEntry = function createAutoDetectEntry(node, pos, isPending, previous) {
+  var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   return {
     lastObservedText: node.textContent,
     lastObservedFirstLine: getFirstLine(node.textContent),
     isPending: isPending,
-    detectionResult: previous === null || previous === void 0 ? void 0 : previous.detectionResult,
+    detectionResult: options.preserveDetectionResult === false ? undefined : previous === null || previous === void 0 ? void 0 : previous.detectionResult,
     autoDetectedLanguage: previous === null || previous === void 0 ? void 0 : previous.autoDetectedLanguage,
     pos: pos
   };
@@ -73,6 +76,9 @@ var getCodeBlockLocalIdsRemovedFromChangedRanges = function getCodeBlockLocalIds
   });
   return localIds;
 };
+var isHistoryMeta = function isHistoryMeta(meta) {
+  return _typeof(meta) === 'object' && meta !== null && 'redo' in meta;
+};
 var getCodeBlockTransactionChanges = function getCodeBlockTransactionChanges(tr, codeBlockType) {
   var insertedNodesWithPos = getInsertedCodeBlocksInTransaction(tr, codeBlockType);
   var removedFromChangedRangesLocalIds = getCodeBlockLocalIdsRemovedFromChangedRanges(tr, codeBlockType);
@@ -109,6 +115,8 @@ export var updateAutoDetectState = function updateAutoDetectState(tr, pluginStat
   var codeBlock = tr.doc.type.schema.nodes.codeBlock;
   var isPaste = tr.getMeta('paste') === true || tr.getMeta('uiEvent') === 'paste';
   var isExternalContentChange = tr.getMeta('replaceDocument') === true || tr.getMeta('isRemote') === true;
+  var historyMeta = tr.getMeta(pmHistoryPluginKey);
+  var isUndo = isHistoryMeta(historyMeta) && historyMeta.redo === false;
   var hasTrackedEntries = Object.keys(pluginState.languageDetectionMap).length > 0;
 
   // Page loads and remote edits should not start auto-detection for code blocks.
@@ -144,6 +152,7 @@ export var updateAutoDetectState = function updateAutoDetectState(tr, pluginStat
       languageDetectionMap = queueAutoDetection(languageDetectionMap, node, pos, hasEnoughTextForAutoDetection(node.textContent));
     });
     changedCodeBlockNodes.forEach(function (_ref5) {
+      var _tr$before$nodeAt;
       var node = _ref5.node,
         pos = _ref5.pos;
       var localId = getLocalId(node);
@@ -152,7 +161,10 @@ export var updateAutoDetectState = function updateAutoDetectState(tr, pluginStat
       }
       var currentLanguage = node.attrs.language;
       var previousEntry = languageDetectionMap[localId];
-      if (currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
+      // Undo metadata does not identify the changed node; compare the pre/post language
+      // so text undo inside auto-detection mode keeps the entry.
+      var previousLanguage = isUndo ? (_tr$before$nodeAt = tr.before.nodeAt(tr.mapping.invert().map(pos))) === null || _tr$before$nodeAt === void 0 ? void 0 : _tr$before$nodeAt.attrs.language : undefined;
+      if (isUndo && previousLanguage && !currentLanguage || currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
         languageDetectionMap = removeAutoDetection(languageDetectionMap, localId);
         return;
       }

package/dist/esm/utils/auto-detect-view.js

@@ -69,7 +69,8 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);
-    return tr;
+    // Language detection runs in the background and should not move the viewport.
+    return tr.setMeta('scrollIntoView', false);
   });
 };
 var clearTimer = function clearTimer(timers, localId) {

package/dist/types/utils/auto-detect-state.d.ts

@@ -5,7 +5,11 @@ export declare const shouldTriggerLargeChangeDetection: (lastObservedText: strin
 export declare const getFirstLine: (text: string) => string;
 export declare const hasEnoughTextForAutoDetection: (text: string) => boolean;
 export declare const getLocalId: (node: PMNode) => string | null;
-export declare const createAutoDetectEntry: (node: PMNode, pos: number, isPending: boolean, previous?: AutoDetectEntry) => AutoDetectEntry;
+type CreateAutoDetectEntryOptions = {
+    preserveDetectionResult?: boolean;
+};
+export declare const createAutoDetectEntry: (node: PMNode, pos: number, isPending: boolean, previous?: AutoDetectEntry, options?: CreateAutoDetectEntryOptions) => AutoDetectEntry;
 export declare const queueAutoDetection: (languageDetectionMap: AutoDetectState["languageDetectionMap"], node: PMNode, pos: number, isPending: boolean) => AutoDetectState["languageDetectionMap"];
 export declare const removeAutoDetection: (languageDetectionMap: AutoDetectState["languageDetectionMap"], localId: string) => AutoDetectState["languageDetectionMap"];
 export declare const updateAutoDetectState: (tr: ReadonlyTransaction, pluginState: AutoDetectState) => AutoDetectState["languageDetectionMap"];
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "14.0.0",
+	"version": "14.0.2",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -42,13 +42,13 @@
 		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
 		"@atlaskit/select": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^104.0.0",
+		"@atlaskit/tmp-editor-statsig": "^106.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.0.0",
+		"@atlaskit/editor-common": "^116.2.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},