@atlaskit/editor-plugin-code-block 14.0.5 → 14.1.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/editor-plugin-code-block
 
+## 14.1.0
+
+### Minor Changes
+
+- [`b483e293da76f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b483e293da76f) -
+  Add a gated `isSuggested` attribute to block menu element transformed analytics events so
+  suggested and non-suggested transform selections can be distinguished. The event attribute is
+  gated behind the `platform_editor_blocks_patch_2` feature gate.
+
+### Patch Changes
+
+- [`64a0b50380570`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64a0b50380570) - -
+  Improve TypeScript auto-detection for class fields and typed arrow function params/return types.
+  - Avoid unnecessary code block node updates when auto-detection re-detects the same language.
+  - Prevent wrap toggles from scrolling long code blocks to the top.
+  - Keep the language picker placement stable while it is open.
+  - Reset language picker search state on reopen so recent selections are not reported as search
+    selections.
+  - Prevent language picker close/selection from scrolling partially visible code blocks while
+    restoring editor focus.
+  - Add auto-detection analytics metadata to distinguish initial detection from re-detection.
+- Updated dependencies
+
+## 14.0.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.0.5
 
 ### Patch Changes

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

@@ -483,6 +483,9 @@ var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBloc
       tr.setNodeMarkup(codeBlock.pos, undefined, _objectSpread(_objectSpread({}, codeBlockNode.attrs), {}, {
         wrap: updatedToggleState
       }));
+      if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+        tr.setMeta('scrollIntoView', false);
+      }
     } else {
       _codeBlock.codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
     }

package/dist/cjs/ui/CodeBlockLanguagePicker.js

@@ -35,11 +35,19 @@ var CodeBlockLanguagePicker = exports.CodeBlockLanguagePicker = function CodeBlo
     var _api$analytics;
     var command = option.value === _languagePickerOptions.DETECT_LANGUAGE_VALUE && (0, _platformFeatureFlags.fg)('platform_editor_code_block_language_detection_flow') ? (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 ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+      requestAnimationFrame(function () {
+        // Let PopupSelect/FocusLock finish returning focus to the trigger, then restore the editor.
+        api === null || api === void 0 || api.core.actions.focus({
+          scrollIntoView: false
+        });
+      });
+    }
     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]);
+  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
   return /*#__PURE__*/_react.default.createElement(_LanguagePicker.LanguagePicker, {
     defaultValue: defaultValue,
     filterOption: filterOption,

package/dist/cjs/ui/CodeBlockMenuItem.js

@@ -13,7 +13,8 @@ var _editorToolbar = require("@atlaskit/editor-toolbar");
 var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
 var NODE_NAME = 'codeBlock';
 var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    isSuggested = _ref.isSuggested;
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick(event) {
@@ -24,6 +25,7 @@ var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
       var tr = _ref2.tr;
       var command = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformNode(tr.doc.type.schema.nodes.codeBlock, {
         inputMethod: inputMethod,
+        isSuggested: isSuggested,
         triggeredFrom: triggeredFrom,
         targetTypeName: NODE_NAME
       });
@@ -42,8 +44,11 @@ var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
 };
 var createCodeBlockMenuItem = exports.createCodeBlockMenuItem = function createCodeBlockMenuItem(api) {
   return function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      isSuggested = _ref3.isSuggested;
     return /*#__PURE__*/_react.default.createElement(CodeBlockMenuItem, {
-      api: api
+      api: api,
+      isSuggested: isSuggested
     });
   };
 };

package/dist/cjs/ui/LanguagePicker.js

@@ -9,12 +9,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.LanguagePicker = void 0;
 require("./LanguagePicker.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _languagePickerOptions = require("./language-picker-options");
@@ -60,6 +62,11 @@ var menuPopperProps = {
     enabled: false
   }]
 };
+var focusWithoutScrolling = function focusWithoutScrolling(element) {
+  element.focus({
+    preventScroll: true
+  });
+};
 var getRecentlyUsedLanguages = function getRecentlyUsedLanguages(recentLanguageValues, optionsByValue) {
   var recentlyUsedLanguages = [];
   var _iterator = _createForOfIteratorHelper(recentLanguageValues),
@@ -95,6 +102,10 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     hasSearchQuery = _useState2[0],
     setHasSearchQuery = _useState2[1];
+  var _useState3 = (0, _react.useState)(),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    lockedPopperPlacement = _useState4[0],
+    setLockedPopperPlacement = _useState4[1];
   var inputValueRef = (0, _react.useRef)('');
   var optionsByValue = (0, _react.useMemo)(function () {
     return new Map(languagePickerOptions.map(function (option) {
@@ -116,6 +127,29 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
       return group.options;
     });
   }, [options]);
+  var stableMenuPopperProps = (0, _react.useMemo)(function () {
+    return {
+      // Allow Popper to choose top on the first open when bottom has no room, then lock the
+      // chosen placement so later hover/search renders do not move the open picker.
+      placement: lockedPopperPlacement !== null && lockedPopperPlacement !== void 0 ? lockedPopperPlacement : 'bottom-start',
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }, {
+        name: 'preventOverflow',
+        enabled: false
+      }].concat((0, _toConsumableArray2.default)(lockedPopperPlacement ? [{
+        name: 'flip',
+        enabled: false
+      }] : [])),
+      onFirstUpdate: function onFirstUpdate(_ref2) {
+        var placement = _ref2.placement;
+        setLockedPopperPlacement(placement);
+      }
+    };
+  }, [lockedPopperPlacement]);
   var handleChange = (0, _react.useCallback)(function (option) {
     var _option$selectionSour;
     if (!option) {
@@ -128,21 +162,44 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
   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') {
+    var isInputChange = !actionMeta || actionMeta.action === 'input-change';
+    if (isInputChange) {
       inputValueRef.current = newInputValue;
     }
-    setHasSearchQuery(newInputValue.trim().length > 0);
-    return newInputValue;
+    if (isInputChange || !(0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+      setHasSearchQuery(newInputValue.trim().length > 0);
+      return newInputValue;
+    }
+    return inputValueRef.current;
+  }, []);
+  var handleMenuOpen = (0, _react.useCallback)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+      inputValueRef.current = '';
+      setHasSearchQuery(false);
+      setLockedPopperPlacement(undefined);
+    }
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  }, [onMenuOpen]);
+  var handleTriggerMouseDown = (0, _react.useCallback)(function (event) {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+      // PopupSelect's FocusLock returns focus to the element that was focused before the
+      // picker opened. If that is the editor/code block, closing the picker can scroll the
+      // whole code block into view. Focus the trigger first without scrolling so FocusLock
+      // returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
+      // editor focus.
+      focusWithoutScrolling(event.currentTarget);
+    }
   }, []);
-  var renderTarget = (0, _react.useCallback)(function (_ref2) {
-    var isOpen = _ref2.isOpen,
-      ref = _ref2.ref,
-      onKeyDown = _ref2.onKeyDown,
-      ariaControls = _ref2['aria-controls'];
+  var renderTarget = (0, _react.useCallback)(function (_ref3) {
+    var isOpen = _ref3.isOpen,
+      ref = _ref3.ref,
+      onKeyDown = _ref3.onKeyDown,
+      ariaControls = _ref3['aria-controls'];
     return /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)([styles.trigger])
     }, /*#__PURE__*/_react.default.createElement(_new.default, {
       shouldFitContainer: true,
+      onMouseDown: handleTriggerMouseDown,
       onKeyDown: onKeyDown,
       ref: ref,
       iconAfter: _chevronDown.default,
@@ -151,7 +208,7 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
       "aria-controls": ariaControls,
       testId: "code-block-language-picker-trigger"
     }, label));
-  }, [label]);
+  }, [handleTriggerMouseDown, label]);
   return /*#__PURE__*/_react.default.createElement(_select.PopupSelect, {
     components: popupSelectComponents,
     filterOption: filterOption,
@@ -161,9 +218,9 @@ var LanguagePicker = exports.LanguagePicker = function LanguagePicker(_ref) {
     menuPlacement: "auto",
     onChange: handleChange,
     onInputChange: handleInputChange,
-    onMenuOpen: onMenuOpen,
+    onMenuOpen: handleMenuOpen,
     options: hasSearchQuery ? searchOptions : options,
-    popperProps: menuPopperProps,
+    popperProps: (0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') ? stableMenuPopperProps : menuPopperProps,
     searchThreshold: -1,
     target: renderTarget,
     testId: "code-block-language-picker",

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

@@ -8,6 +8,7 @@ exports.syncPendingDetectionTimers = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("../pm-plugins/actions");
 var _autoDetectState = require("../pm-plugins/auto-detect-state");
 var _autoDetectState2 = require("./auto-detect-state");
@@ -43,6 +44,7 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
   }
   var detectedLanguage = (0, _languageDetect.detectLanguage)(found.node.textContent);
   var detectionResult = detectedLanguage ? 'detected' : 'noneDetected';
+  var detectionPhase = entry.detectionResult ? 'redetection' : 'initial';
   // Keep a previous auto-detected language when the latest snippet is too weak to classify.
   var shouldPreserveAutoDetectedLanguage = !detectedLanguage && Boolean(entry.autoDetectedLanguage) && found.node.attrs.language === entry.autoDetectedLanguage;
   var nextEntry = _objectSpread(_objectSpread({}, (0, _autoDetectState2.createAutoDetectEntry)(found.node, found.pos, false, entry)), {}, {
@@ -52,10 +54,12 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
 
   // If there is no confident detection, record the result without clearing user-visible language.
   var shouldOnlyUpdateDetectionState = !detectedLanguage && (!found.node.attrs.language || shouldPreserveAutoDetectedLanguage);
+  var hasDetectedLanguageChange = Boolean(detectedLanguage) && found.node.attrs.language !== detectedLanguage;
+  var shouldClearStaleLanguage = !detectedLanguage && Boolean(found.node.attrs.language) && !shouldPreserveAutoDetectedLanguage;
+  var shouldUpdateNodeLanguage = (0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') ? hasDetectedLanguageChange || shouldClearStaleLanguage : !shouldOnlyUpdateDetectionState;
   api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref) {
-    var _api$analytics;
     var tr = _ref.tr;
-    if (!shouldOnlyUpdateDetectionState) {
+    if (shouldUpdateNodeLanguage) {
       tr.setNodeMarkup(found.pos, undefined, _objectSpread(_objectSpread({}, found.node.attrs), {}, {
         language: detectedLanguage
       }), found.node.marks);
@@ -67,15 +71,21 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
         entry: nextEntry
       }
     });
-    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-      action: _analytics.ACTION.LANGUAGE_AUTO_DETECTED,
-      actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
-      attributes: {
-        language: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : 'none',
-        detectionResult: detectionResult
-      },
-      eventType: _analytics.EVENT_TYPE.TRACK
-    })(tr);
+    // When platform_editor_code_block_dogfooding_patch is cleaned up, merge this with the previous shouldUpdateNodeLanguage check.
+    if (!(0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') || shouldUpdateNodeLanguage) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        action: _analytics.ACTION.LANGUAGE_AUTO_DETECTED,
+        actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
+        attributes: _objectSpread({
+          language: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : 'none',
+          detectionResult: detectionResult
+        }, (0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') ? {
+          detectionPhase: detectionPhase
+        } : {}),
+        eventType: _analytics.EVENT_TYPE.TRACK
+      })(tr);
+    }
     // Language detection runs in the background and should not move the viewport.
     return tr.setMeta('scrollIntoView', false);
   });

package/dist/cjs/utils/language-detect.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.detectLanguage = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /* eslint-disable require-unicode-regexp */
 
 // Conservative weighted-regex heuristic for common high-confidence snippets, not a full classifier.
@@ -28,6 +29,9 @@ var scorePatterns = function scorePatterns(code, patterns) {
     return score + (hasPattern(code, pattern) ? value : 0);
   }, 0);
 };
+var scoreEnhancedTypeScriptPatterns = function scoreEnhancedTypeScriptPatterns(code) {
+  return (0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch') ? scorePatterns(code, [[/\b(?:private|protected|public|readonly)\s+[\w$]+\s*=/, 5], [/\([^)]{0,500}\b[\w$]+\??:\s*[A-Za-z_$][\w$<>{}\[\]|&,\s.?]{0,200}[^)]{0,500}\)\s*(?::\s*[A-Za-z_$][\w$<>{}\[\]|&,\s.?]{0,200})?\s*=>/, 5]]) : 0;
+};
 var looksLikeHtmlTagPair = function looksLikeHtmlTagPair(code) {
   var openTags = new Set();
   var tagPattern = /<\/?([a-z][a-z0-9-]*)\b[^<>]{0,500}>/gi;
@@ -77,7 +81,7 @@ var getLanguageScores = function getLanguageScores(code) {
     score: scorePatterns(code, [[/\bSELECT\b[\s\S]+\bFROM\b/i, 5], [/\b(?:INSERT\s+INTO|UPDATE\b[\s\S]+\bSET\b|DELETE\s+FROM|CREATE\s+TABLE|ALTER\s+TABLE)\b/i, 5], [/\b(?:JOIN|WHERE|GROUP\s+BY|ORDER\s+BY|LIMIT)\b/i, 2]])
   }, {
     language: 'typescript',
-    score: scorePatterns(code, [[/\b(?:interface|type)\s+[A-Z_$][\w$]*(?:\s*[=<{])/, 5], [/\bimport\s+type\b|\bexport\s+type\b/, 4], [/\b(?:const|let|var)\s+[\w$]+\s*:\s*[A-Za-z_$][\w$<>|\[\],\s]*/, 4], [/\)\s*:\s*(?:Promise<)?[A-Za-z_$][\w$<>|\[\],\s]*(?:>|\s)?\s*=>?\s*[{;]/, 3], [/\b(?:as\s+const|implements\s+[A-Z_$]|enum\s+[A-Z_$])/, 3]])
+    score: scorePatterns(code, [[/\b(?:interface|type)\s+[A-Z_$][\w$]*(?:\s*[=<{])/, 5], [/\bimport\s+type\b|\bexport\s+type\b/, 4], [/\b(?:const|let|var)\s+[\w$]+\s*:\s*[A-Za-z_$][\w$<>|\[\],\s]*/, 4], [/\)\s*:\s*(?:Promise<)?[A-Za-z_$][\w$<>|\[\],\s]*(?:>|\s)?\s*=>?\s*[{;]/, 3], [/\b(?:as\s+const|implements\s+[A-Z_$]|enum\s+[A-Z_$])/, 3]]) + scoreEnhancedTypeScriptPatterns(code)
   }, {
     language: 'javascript',
     score: scorePatterns(code, [[/\b(?:const|let|var)\s+[\w$]+\s*=/, 3], [/\bfunction\s*[\w$]*\s*\([^)]*\)\s*\{/, 3], [/=>\s*(?:\{|[\w$'"`(])/, 3], [/\b(?:import|export)\s+(?:[\w${}*,\s]+\s+from\s+)?['"][^'"]+['"]/, 3], [/\b(?:console\.log|document\.|window\.|require\()|\bmodule\.exports\b/, 3]])

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

@@ -492,6 +492,9 @@ export const toggleWordWrapStateForCodeBlockNode = editorAnalyticsAPI => (state,
       ...codeBlockNode.attrs,
       wrap: updatedToggleState
     });
+    if (fg('platform_editor_code_block_dogfooding_patch')) {
+      tr.setMeta('scrollIntoView', false);
+    }
   } else {
     codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
   }

package/dist/es2019/ui/CodeBlockLanguagePicker.js

@@ -21,11 +21,19 @@ export const CodeBlockLanguagePicker = ({
     var _api$analytics;
     const command = option.value === DETECT_LANGUAGE_VALUE && fg('platform_editor_code_block_language_detection_flow') ? detectLanguage() : changeLanguage(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(option.value, selectionSource);
     const commandSucceeded = command(editorView.state, editorView.dispatch);
+    if (fg('platform_editor_code_block_dogfooding_patch')) {
+      requestAnimationFrame(() => {
+        // Let PopupSelect/FocusLock finish returning focus to the trigger, then restore the editor.
+        api === null || api === void 0 ? void 0 : api.core.actions.focus({
+          scrollIntoView: false
+        });
+      });
+    }
     if (commandSucceeded && option.value !== DETECT_LANGUAGE_VALUE) {
       saveRecentLanguage(option.value);
       setRecentLanguageValues(getRecentLanguages());
     }
-  }, [api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
+  }, [api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
   return /*#__PURE__*/React.createElement(LanguagePicker, {
     defaultValue: defaultValue,
     filterOption: filterOption,

package/dist/es2019/ui/CodeBlockMenuItem.js

@@ -6,7 +6,8 @@ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
 const NODE_NAME = 'codeBlock';
 const CodeBlockMenuItem = ({
-  api
+  api,
+  isSuggested
 }) => {
   const {
     formatMessage
@@ -20,6 +21,7 @@ const CodeBlockMenuItem = ({
       var _api$blockMenu;
       const command = api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformNode(tr.doc.type.schema.nodes.codeBlock, {
         inputMethod,
+        isSuggested,
         triggeredFrom,
         targetTypeName: NODE_NAME
       });
@@ -37,7 +39,10 @@ const CodeBlockMenuItem = ({
   }, formatMessage(blockMenuMessages.codeBlock));
 };
 export const createCodeBlockMenuItem = api => {
-  return () => /*#__PURE__*/React.createElement(CodeBlockMenuItem, {
-    api: api
+  return ({
+    isSuggested
+  } = {}) => /*#__PURE__*/React.createElement(CodeBlockMenuItem, {
+    api: api,
+    isSuggested: isSuggested
   });
 };

package/dist/es2019/ui/LanguagePicker.js

@@ -6,6 +6,7 @@ import Button from '@atlaskit/button/new';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { PopupSelect, components } from '@atlaskit/select';
 import { createGroupedLanguageOptions } from './language-picker-options';
@@ -47,6 +48,11 @@ const menuPopperProps = {
     enabled: false
   }]
 };
+const focusWithoutScrolling = element => {
+  element.focus({
+    preventScroll: true
+  });
+};
 const getRecentlyUsedLanguages = (recentLanguageValues, optionsByValue) => {
   const recentlyUsedLanguages = [];
   for (const recentLanguageValue of recentLanguageValues) {
@@ -70,6 +76,7 @@ export const LanguagePicker = ({
   const label = (_defaultValue$label = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.label) !== null && _defaultValue$label !== void 0 ? _defaultValue$label : formatMessage(codeBlockButtonMessages.selectLanguage);
   const selectLanguageLabel = formatMessage(codeBlockButtonMessages.selectLanguage);
   const [hasSearchQuery, setHasSearchQuery] = useState(false);
+  const [lockedPopperPlacement, setLockedPopperPlacement] = useState();
   const inputValueRef = useRef('');
   const optionsByValue = useMemo(() => new Map(languagePickerOptions.map(option => [option.value, option])), [languagePickerOptions]);
   const recentlyUsedLanguages = useMemo(() => getRecentlyUsedLanguages(recentLanguageValues, optionsByValue), [recentLanguageValues, optionsByValue]);
@@ -79,6 +86,28 @@ export const LanguagePicker = ({
     recentlyUsedLanguages
   }), [formatMessage, languagePickerOptions, recentlyUsedLanguages]);
   const searchOptions = useMemo(() => options.flatMap(group => group.options), [options]);
+  const stableMenuPopperProps = useMemo(() => ({
+    // Allow Popper to choose top on the first open when bottom has no room, then lock the
+    // chosen placement so later hover/search renders do not move the open picker.
+    placement: lockedPopperPlacement !== null && lockedPopperPlacement !== void 0 ? lockedPopperPlacement : 'bottom-start',
+    modifiers: [{
+      name: 'offset',
+      options: {
+        offset: [0, 8]
+      }
+    }, {
+      name: 'preventOverflow',
+      enabled: false
+    }, ...(lockedPopperPlacement ? [{
+      name: 'flip',
+      enabled: false
+    }] : [])],
+    onFirstUpdate: ({
+      placement
+    }) => {
+      setLockedPopperPlacement(placement);
+    }
+  }), [lockedPopperPlacement]);
   const handleChange = useCallback(option => {
     var _option$selectionSour;
     if (!option) {
@@ -91,11 +120,33 @@ export const LanguagePicker = ({
   const handleInputChange = useCallback((newInputValue, actionMeta) => {
     // React-select clears the input as part of selecting a value before onChange fires.
     // Keep the last user-typed query so handleChange can report search selections correctly.
-    if (!actionMeta || actionMeta.action === 'input-change') {
+    const isInputChange = !actionMeta || actionMeta.action === 'input-change';
+    if (isInputChange) {
       inputValueRef.current = newInputValue;
     }
-    setHasSearchQuery(newInputValue.trim().length > 0);
-    return newInputValue;
+    if (isInputChange || !fg('platform_editor_code_block_dogfooding_patch')) {
+      setHasSearchQuery(newInputValue.trim().length > 0);
+      return newInputValue;
+    }
+    return inputValueRef.current;
+  }, []);
+  const handleMenuOpen = useCallback(() => {
+    if (fg('platform_editor_code_block_dogfooding_patch')) {
+      inputValueRef.current = '';
+      setHasSearchQuery(false);
+      setLockedPopperPlacement(undefined);
+    }
+    onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
+  }, [onMenuOpen]);
+  const handleTriggerMouseDown = useCallback(event => {
+    if (fg('platform_editor_code_block_dogfooding_patch')) {
+      // PopupSelect's FocusLock returns focus to the element that was focused before the
+      // picker opened. If that is the editor/code block, closing the picker can scroll the
+      // whole code block into view. Focus the trigger first without scrolling so FocusLock
+      // returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
+      // editor focus.
+      focusWithoutScrolling(event.currentTarget);
+    }
   }, []);
   const renderTarget = useCallback(({
     isOpen,
@@ -106,6 +157,7 @@ export const LanguagePicker = ({
     className: ax([styles.trigger])
   }, /*#__PURE__*/React.createElement(Button, {
     shouldFitContainer: true,
+    onMouseDown: handleTriggerMouseDown,
     onKeyDown: onKeyDown,
     ref: ref,
     iconAfter: ChevronDownIcon,
@@ -113,7 +165,7 @@ export const LanguagePicker = ({
     isSelected: isOpen,
     "aria-controls": ariaControls,
     testId: "code-block-language-picker-trigger"
-  }, label)), [label]);
+  }, label)), [handleTriggerMouseDown, label]);
   return /*#__PURE__*/React.createElement(PopupSelect, {
     components: popupSelectComponents,
     filterOption: filterOption,
@@ -123,9 +175,9 @@ export const LanguagePicker = ({
     menuPlacement: "auto",
     onChange: handleChange,
     onInputChange: handleInputChange,
-    onMenuOpen: onMenuOpen,
+    onMenuOpen: handleMenuOpen,
     options: hasSearchQuery ? searchOptions : options,
-    popperProps: menuPopperProps,
+    popperProps: fg('platform_editor_code_block_dogfooding_patch') ? stableMenuPopperProps : menuPopperProps,
     searchThreshold: -1,
     target: renderTarget,
     testId: "code-block-language-picker",

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

@@ -1,4 +1,5 @@
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTIONS } from '../pm-plugins/actions';
 import { autoDetectPluginKey } from '../pm-plugins/auto-detect-state';
 import { createAutoDetectEntry } from './auto-detect-state';
@@ -32,6 +33,7 @@ const runPendingDetection = (view, localId, api) => {
   }
   const detectedLanguage = detectLanguage(found.node.textContent);
   const detectionResult = detectedLanguage ? 'detected' : 'noneDetected';
+  const detectionPhase = entry.detectionResult ? 'redetection' : 'initial';
   // Keep a previous auto-detected language when the latest snippet is too weak to classify.
   const shouldPreserveAutoDetectedLanguage = !detectedLanguage && Boolean(entry.autoDetectedLanguage) && found.node.attrs.language === entry.autoDetectedLanguage;
   const nextEntry = {
@@ -42,11 +44,13 @@ const runPendingDetection = (view, localId, api) => {
 
   // If there is no confident detection, record the result without clearing user-visible language.
   const shouldOnlyUpdateDetectionState = !detectedLanguage && (!found.node.attrs.language || shouldPreserveAutoDetectedLanguage);
+  const hasDetectedLanguageChange = Boolean(detectedLanguage) && found.node.attrs.language !== detectedLanguage;
+  const shouldClearStaleLanguage = !detectedLanguage && Boolean(found.node.attrs.language) && !shouldPreserveAutoDetectedLanguage;
+  const shouldUpdateNodeLanguage = fg('platform_editor_code_block_dogfooding_patch') ? hasDetectedLanguageChange || shouldClearStaleLanguage : !shouldOnlyUpdateDetectionState;
   api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
     tr
   }) => {
-    var _api$analytics;
-    if (!shouldOnlyUpdateDetectionState) {
+    if (shouldUpdateNodeLanguage) {
       tr.setNodeMarkup(found.pos, undefined, {
         ...found.node.attrs,
         language: detectedLanguage
@@ -59,15 +63,22 @@ const runPendingDetection = (view, localId, api) => {
         entry: nextEntry
       }
     });
-    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
-      action: ACTION.LANGUAGE_AUTO_DETECTED,
-      actionSubject: ACTION_SUBJECT.CODE_BLOCK,
-      attributes: {
-        language: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : 'none',
-        detectionResult
-      },
-      eventType: EVENT_TYPE.TRACK
-    })(tr);
+    // When platform_editor_code_block_dogfooding_patch is cleaned up, merge this with the previous shouldUpdateNodeLanguage check.
+    if (!fg('platform_editor_code_block_dogfooding_patch') || shouldUpdateNodeLanguage) {
+      var _api$analytics;
+      api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+        action: ACTION.LANGUAGE_AUTO_DETECTED,
+        actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+        attributes: {
+          language: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : 'none',
+          detectionResult,
+          ...(fg('platform_editor_code_block_dogfooding_patch') ? {
+            detectionPhase
+          } : {})
+        },
+        eventType: EVENT_TYPE.TRACK
+      })(tr);
+    }
     // Language detection runs in the background and should not move the viewport.
     return tr.setMeta('scrollIntoView', false);
   });

package/dist/es2019/utils/language-detect.js

@@ -1,5 +1,5 @@
 /* eslint-disable require-unicode-regexp */
-
+import { fg } from '@atlaskit/platform-feature-flags';
 // Conservative weighted-regex heuristic for common high-confidence snippets, not a full classifier.
 // Ambiguous snippets intentionally return null so users can select the language manually.
 const MAX_DETECTION_CHARS = 10_000;
@@ -12,6 +12,7 @@ const hasPattern = (code, pattern) => {
   return pattern.test(code);
 };
 const scorePatterns = (code, patterns) => patterns.reduce((score, [pattern, value]) => score + (hasPattern(code, pattern) ? value : 0), 0);
+const scoreEnhancedTypeScriptPatterns = code => fg('platform_editor_code_block_dogfooding_patch') ? scorePatterns(code, [[/\b(?:private|protected|public|readonly)\s+[\w$]+\s*=/, 5], [/\([^)]{0,500}\b[\w$]+\??:\s*[A-Za-z_$][\w$<>{}\[\]|&,\s.?]{0,200}[^)]{0,500}\)\s*(?::\s*[A-Za-z_$][\w$<>{}\[\]|&,\s.?]{0,200})?\s*=>/, 5]]) : 0;
 const looksLikeHtmlTagPair = code => {
   const openTags = new Set();
   const tagPattern = /<\/?([a-z][a-z0-9-]*)\b[^<>]{0,500}>/gi;
@@ -57,7 +58,7 @@ const getLanguageScores = code => [{
   score: scorePatterns(code, [[/\bSELECT\b[\s\S]+\bFROM\b/i, 5], [/\b(?:INSERT\s+INTO|UPDATE\b[\s\S]+\bSET\b|DELETE\s+FROM|CREATE\s+TABLE|ALTER\s+TABLE)\b/i, 5], [/\b(?:JOIN|WHERE|GROUP\s+BY|ORDER\s+BY|LIMIT)\b/i, 2]])
 }, {
   language: 'typescript',
-  score: scorePatterns(code, [[/\b(?:interface|type)\s+[A-Z_$][\w$]*(?:\s*[=<{])/, 5], [/\bimport\s+type\b|\bexport\s+type\b/, 4], [/\b(?:const|let|var)\s+[\w$]+\s*:\s*[A-Za-z_$][\w$<>|\[\],\s]*/, 4], [/\)\s*:\s*(?:Promise<)?[A-Za-z_$][\w$<>|\[\],\s]*(?:>|\s)?\s*=>?\s*[{;]/, 3], [/\b(?:as\s+const|implements\s+[A-Z_$]|enum\s+[A-Z_$])/, 3]])
+  score: scorePatterns(code, [[/\b(?:interface|type)\s+[A-Z_$][\w$]*(?:\s*[=<{])/, 5], [/\bimport\s+type\b|\bexport\s+type\b/, 4], [/\b(?:const|let|var)\s+[\w$]+\s*:\s*[A-Za-z_$][\w$<>|\[\],\s]*/, 4], [/\)\s*:\s*(?:Promise<)?[A-Za-z_$][\w$<>|\[\],\s]*(?:>|\s)?\s*=>?\s*[{;]/, 3], [/\b(?:as\s+const|implements\s+[A-Z_$]|enum\s+[A-Z_$])/, 3]]) + scoreEnhancedTypeScriptPatterns(code)
 }, {
   language: 'javascript',
   score: scorePatterns(code, [[/\b(?:const|let|var)\s+[\w$]+\s*=/, 3], [/\bfunction\s*[\w$]*\s*\([^)]*\)\s*\{/, 3], [/=>\s*(?:\{|[\w$'"`(])/, 3], [/\b(?:import|export)\s+(?:[\w${}*,\s]+\s+from\s+)?['"][^'"]+['"]/, 3], [/\b(?:console\.log|document\.|window\.|require\()|\bmodule\.exports\b/, 3]])

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

@@ -472,6 +472,9 @@ export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateFor
       tr.setNodeMarkup(codeBlock.pos, undefined, _objectSpread(_objectSpread({}, codeBlockNode.attrs), {}, {
         wrap: updatedToggleState
       }));
+      if (fg('platform_editor_code_block_dogfooding_patch')) {
+        tr.setMeta('scrollIntoView', false);
+      }
     } else {
       codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
     }

package/dist/esm/ui/CodeBlockLanguagePicker.js

@@ -26,11 +26,19 @@ export var CodeBlockLanguagePicker = function CodeBlockLanguagePicker(_ref) {
     var _api$analytics;
     var command = option.value === DETECT_LANGUAGE_VALUE && fg('platform_editor_code_block_language_detection_flow') ? detectLanguage() : 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 (fg('platform_editor_code_block_dogfooding_patch')) {
+      requestAnimationFrame(function () {
+        // Let PopupSelect/FocusLock finish returning focus to the trigger, then restore the editor.
+        api === null || api === void 0 || api.core.actions.focus({
+          scrollIntoView: false
+        });
+      });
+    }
     if (commandSucceeded && option.value !== DETECT_LANGUAGE_VALUE) {
       saveRecentLanguage(option.value);
       setRecentLanguageValues(getRecentLanguages());
     }
-  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
+  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, api === null || api === void 0 ? void 0 : api.core.actions, editorView]);
   return /*#__PURE__*/React.createElement(LanguagePicker, {
     defaultValue: defaultValue,
     filterOption: filterOption,

package/dist/esm/ui/CodeBlockMenuItem.js

@@ -6,7 +6,8 @@ import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
 var NODE_NAME = 'codeBlock';
 var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
-  var api = _ref.api;
+  var api = _ref.api,
+    isSuggested = _ref.isSuggested;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick(event) {
@@ -17,6 +18,7 @@ var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
       var tr = _ref2.tr;
       var command = api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.commands.transformNode(tr.doc.type.schema.nodes.codeBlock, {
         inputMethod: inputMethod,
+        isSuggested: isSuggested,
         triggeredFrom: triggeredFrom,
         targetTypeName: NODE_NAME
       });
@@ -35,8 +37,11 @@ var CodeBlockMenuItem = function CodeBlockMenuItem(_ref) {
 };
 export var createCodeBlockMenuItem = function createCodeBlockMenuItem(api) {
   return function () {
+    var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      isSuggested = _ref3.isSuggested;
     return /*#__PURE__*/React.createElement(CodeBlockMenuItem, {
-      api: api
+      api: api,
+      isSuggested: isSuggested
     });
   };
 };

package/dist/esm/ui/LanguagePicker.js

@@ -1,4 +1,5 @@
 /* LanguagePicker.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./LanguagePicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
@@ -10,6 +11,7 @@ import Button from '@atlaskit/button/new';
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';
 import { PopupSelect, components } from '@atlaskit/select';
 import { createGroupedLanguageOptions } from './language-picker-options';
@@ -51,6 +53,11 @@ var menuPopperProps = {
     enabled: false
   }]
 };
+var focusWithoutScrolling = function focusWithoutScrolling(element) {
+  element.focus({
+    preventScroll: true
+  });
+};
 var getRecentlyUsedLanguages = function getRecentlyUsedLanguages(recentLanguageValues, optionsByValue) {
   var recentlyUsedLanguages = [];
   var _iterator = _createForOfIteratorHelper(recentLanguageValues),
@@ -86,6 +93,10 @@ export var LanguagePicker = function LanguagePicker(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     hasSearchQuery = _useState2[0],
     setHasSearchQuery = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    lockedPopperPlacement = _useState4[0],
+    setLockedPopperPlacement = _useState4[1];
   var inputValueRef = useRef('');
   var optionsByValue = useMemo(function () {
     return new Map(languagePickerOptions.map(function (option) {
@@ -107,6 +118,29 @@ export var LanguagePicker = function LanguagePicker(_ref) {
       return group.options;
     });
   }, [options]);
+  var stableMenuPopperProps = useMemo(function () {
+    return {
+      // Allow Popper to choose top on the first open when bottom has no room, then lock the
+      // chosen placement so later hover/search renders do not move the open picker.
+      placement: lockedPopperPlacement !== null && lockedPopperPlacement !== void 0 ? lockedPopperPlacement : 'bottom-start',
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }, {
+        name: 'preventOverflow',
+        enabled: false
+      }].concat(_toConsumableArray(lockedPopperPlacement ? [{
+        name: 'flip',
+        enabled: false
+      }] : [])),
+      onFirstUpdate: function onFirstUpdate(_ref2) {
+        var placement = _ref2.placement;
+        setLockedPopperPlacement(placement);
+      }
+    };
+  }, [lockedPopperPlacement]);
   var handleChange = useCallback(function (option) {
     var _option$selectionSour;
     if (!option) {
@@ -119,21 +153,44 @@ export var LanguagePicker = function LanguagePicker(_ref) {
   var handleInputChange = useCallback(function (newInputValue, actionMeta) {
     // React-select clears the input as part of selecting a value before onChange fires.
     // Keep the last user-typed query so handleChange can report search selections correctly.
-    if (!actionMeta || actionMeta.action === 'input-change') {
+    var isInputChange = !actionMeta || actionMeta.action === 'input-change';
+    if (isInputChange) {
       inputValueRef.current = newInputValue;
     }
-    setHasSearchQuery(newInputValue.trim().length > 0);
-    return newInputValue;
+    if (isInputChange || !fg('platform_editor_code_block_dogfooding_patch')) {
+      setHasSearchQuery(newInputValue.trim().length > 0);
+      return newInputValue;
+    }
+    return inputValueRef.current;
+  }, []);
+  var handleMenuOpen = useCallback(function () {
+    if (fg('platform_editor_code_block_dogfooding_patch')) {
+      inputValueRef.current = '';
+      setHasSearchQuery(false);
+      setLockedPopperPlacement(undefined);
+    }
+    onMenuOpen === null || onMenuOpen === void 0 || onMenuOpen();
+  }, [onMenuOpen]);
+  var handleTriggerMouseDown = useCallback(function (event) {
+    if (fg('platform_editor_code_block_dogfooding_patch')) {
+      // PopupSelect's FocusLock returns focus to the element that was focused before the
+      // picker opened. If that is the editor/code block, closing the picker can scroll the
+      // whole code block into view. Focus the trigger first without scrolling so FocusLock
+      // returns to the trigger; see CodeBlockLanguagePicker's handleSelection for restoring
+      // editor focus.
+      focusWithoutScrolling(event.currentTarget);
+    }
   }, []);
-  var renderTarget = useCallback(function (_ref2) {
-    var isOpen = _ref2.isOpen,
-      ref = _ref2.ref,
-      onKeyDown = _ref2.onKeyDown,
-      ariaControls = _ref2['aria-controls'];
+  var renderTarget = useCallback(function (_ref3) {
+    var isOpen = _ref3.isOpen,
+      ref = _ref3.ref,
+      onKeyDown = _ref3.onKeyDown,
+      ariaControls = _ref3['aria-controls'];
     return /*#__PURE__*/React.createElement("div", {
       className: ax([styles.trigger])
     }, /*#__PURE__*/React.createElement(Button, {
       shouldFitContainer: true,
+      onMouseDown: handleTriggerMouseDown,
       onKeyDown: onKeyDown,
       ref: ref,
       iconAfter: ChevronDownIcon,
@@ -142,7 +199,7 @@ export var LanguagePicker = function LanguagePicker(_ref) {
       "aria-controls": ariaControls,
       testId: "code-block-language-picker-trigger"
     }, label));
-  }, [label]);
+  }, [handleTriggerMouseDown, label]);
   return /*#__PURE__*/React.createElement(PopupSelect, {
     components: popupSelectComponents,
     filterOption: filterOption,
@@ -152,9 +209,9 @@ export var LanguagePicker = function LanguagePicker(_ref) {
     menuPlacement: "auto",
     onChange: handleChange,
     onInputChange: handleInputChange,
-    onMenuOpen: onMenuOpen,
+    onMenuOpen: handleMenuOpen,
     options: hasSearchQuery ? searchOptions : options,
-    popperProps: menuPopperProps,
+    popperProps: fg('platform_editor_code_block_dogfooding_patch') ? stableMenuPopperProps : menuPopperProps,
     searchThreshold: -1,
     target: renderTarget,
     testId: "code-block-language-picker",

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

@@ -3,6 +3,7 @@ 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 { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { ACTIONS } from '../pm-plugins/actions';
 import { autoDetectPluginKey } from '../pm-plugins/auto-detect-state';
 import { createAutoDetectEntry } from './auto-detect-state';
@@ -36,6 +37,7 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
   }
   var detectedLanguage = detectLanguage(found.node.textContent);
   var detectionResult = detectedLanguage ? 'detected' : 'noneDetected';
+  var detectionPhase = entry.detectionResult ? 'redetection' : 'initial';
   // Keep a previous auto-detected language when the latest snippet is too weak to classify.
   var shouldPreserveAutoDetectedLanguage = !detectedLanguage && Boolean(entry.autoDetectedLanguage) && found.node.attrs.language === entry.autoDetectedLanguage;
   var nextEntry = _objectSpread(_objectSpread({}, createAutoDetectEntry(found.node, found.pos, false, entry)), {}, {
@@ -45,10 +47,12 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
 
   // If there is no confident detection, record the result without clearing user-visible language.
   var shouldOnlyUpdateDetectionState = !detectedLanguage && (!found.node.attrs.language || shouldPreserveAutoDetectedLanguage);
+  var hasDetectedLanguageChange = Boolean(detectedLanguage) && found.node.attrs.language !== detectedLanguage;
+  var shouldClearStaleLanguage = !detectedLanguage && Boolean(found.node.attrs.language) && !shouldPreserveAutoDetectedLanguage;
+  var shouldUpdateNodeLanguage = fg('platform_editor_code_block_dogfooding_patch') ? hasDetectedLanguageChange || shouldClearStaleLanguage : !shouldOnlyUpdateDetectionState;
   api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref) {
-    var _api$analytics;
     var tr = _ref.tr;
-    if (!shouldOnlyUpdateDetectionState) {
+    if (shouldUpdateNodeLanguage) {
       tr.setNodeMarkup(found.pos, undefined, _objectSpread(_objectSpread({}, found.node.attrs), {}, {
         language: detectedLanguage
       }), found.node.marks);
@@ -60,15 +64,21 @@ var runPendingDetection = function runPendingDetection(view, localId, api) {
         entry: nextEntry
       }
     });
-    api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
-      action: ACTION.LANGUAGE_AUTO_DETECTED,
-      actionSubject: ACTION_SUBJECT.CODE_BLOCK,
-      attributes: {
-        language: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : 'none',
-        detectionResult: detectionResult
-      },
-      eventType: EVENT_TYPE.TRACK
-    })(tr);
+    // When platform_editor_code_block_dogfooding_patch is cleaned up, merge this with the previous shouldUpdateNodeLanguage check.
+    if (!fg('platform_editor_code_block_dogfooding_patch') || shouldUpdateNodeLanguage) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        action: ACTION.LANGUAGE_AUTO_DETECTED,
+        actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+        attributes: _objectSpread({
+          language: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : 'none',
+          detectionResult: detectionResult
+        }, fg('platform_editor_code_block_dogfooding_patch') ? {
+          detectionPhase: detectionPhase
+        } : {}),
+        eventType: EVENT_TYPE.TRACK
+      })(tr);
+    }
     // Language detection runs in the background and should not move the viewport.
     return tr.setMeta('scrollIntoView', false);
   });

package/dist/esm/utils/language-detect.js

@@ -1,7 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable require-unicode-regexp */
-
+import { fg } from '@atlaskit/platform-feature-flags';
 // Conservative weighted-regex heuristic for common high-confidence snippets, not a full classifier.
 // Ambiguous snippets intentionally return null so users can select the language manually.
 var MAX_DETECTION_CHARS = 10000;
@@ -21,6 +21,9 @@ var scorePatterns = function scorePatterns(code, patterns) {
     return score + (hasPattern(code, pattern) ? value : 0);
   }, 0);
 };
+var scoreEnhancedTypeScriptPatterns = function scoreEnhancedTypeScriptPatterns(code) {
+  return fg('platform_editor_code_block_dogfooding_patch') ? scorePatterns(code, [[/\b(?:private|protected|public|readonly)\s+[\w$]+\s*=/, 5], [/\([^)]{0,500}\b[\w$]+\??:\s*[A-Za-z_$][\w$<>{}\[\]|&,\s.?]{0,200}[^)]{0,500}\)\s*(?::\s*[A-Za-z_$][\w$<>{}\[\]|&,\s.?]{0,200})?\s*=>/, 5]]) : 0;
+};
 var looksLikeHtmlTagPair = function looksLikeHtmlTagPair(code) {
   var openTags = new Set();
   var tagPattern = /<\/?([a-z][a-z0-9-]*)\b[^<>]{0,500}>/gi;
@@ -70,7 +73,7 @@ var getLanguageScores = function getLanguageScores(code) {
     score: scorePatterns(code, [[/\bSELECT\b[\s\S]+\bFROM\b/i, 5], [/\b(?:INSERT\s+INTO|UPDATE\b[\s\S]+\bSET\b|DELETE\s+FROM|CREATE\s+TABLE|ALTER\s+TABLE)\b/i, 5], [/\b(?:JOIN|WHERE|GROUP\s+BY|ORDER\s+BY|LIMIT)\b/i, 2]])
   }, {
     language: 'typescript',
-    score: scorePatterns(code, [[/\b(?:interface|type)\s+[A-Z_$][\w$]*(?:\s*[=<{])/, 5], [/\bimport\s+type\b|\bexport\s+type\b/, 4], [/\b(?:const|let|var)\s+[\w$]+\s*:\s*[A-Za-z_$][\w$<>|\[\],\s]*/, 4], [/\)\s*:\s*(?:Promise<)?[A-Za-z_$][\w$<>|\[\],\s]*(?:>|\s)?\s*=>?\s*[{;]/, 3], [/\b(?:as\s+const|implements\s+[A-Z_$]|enum\s+[A-Z_$])/, 3]])
+    score: scorePatterns(code, [[/\b(?:interface|type)\s+[A-Z_$][\w$]*(?:\s*[=<{])/, 5], [/\bimport\s+type\b|\bexport\s+type\b/, 4], [/\b(?:const|let|var)\s+[\w$]+\s*:\s*[A-Za-z_$][\w$<>|\[\],\s]*/, 4], [/\)\s*:\s*(?:Promise<)?[A-Za-z_$][\w$<>|\[\],\s]*(?:>|\s)?\s*=>?\s*[{;]/, 3], [/\b(?:as\s+const|implements\s+[A-Z_$]|enum\s+[A-Z_$])/, 3]]) + scoreEnhancedTypeScriptPatterns(code)
   }, {
     language: 'javascript',
     score: scorePatterns(code, [[/\b(?:const|let|var)\s+[\w$]+\s*=/, 3], [/\bfunction\s*[\w$]*\s*\([^)]*\)\s*\{/, 3], [/=>\s*(?:\{|[\w$'"`(])/, 3], [/\b(?:import|export)\s+(?:[\w${}*,\s]+\s+from\s+)?['"][^'"]+['"]/, 3], [/\b(?:console\.log|document\.|window\.|require\()|\bmodule\.exports\b/, 3]])

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

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { BlockMenuItemComponentProps } from '@atlaskit/editor-plugin-block-menu/blockMenuPluginType';
 import type { CodeBlockPlugin } from '../codeBlockPluginType';
-export declare const createCodeBlockMenuItem: (api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => () => React.JSX.Element;
+export declare const createCodeBlockMenuItem: (api: ExtractInjectionAPI<CodeBlockPlugin> | undefined) => ({ isSuggested }?: BlockMenuItemComponentProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block",
-	"version": "14.0.5",
+	"version": "14.1.0",
 	"description": "Code block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -24,12 +24,12 @@
 		"@atlaskit/code": "^18.0.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
-		"@atlaskit/editor-plugin-block-menu": "^11.0.0",
+		"@atlaskit/editor-plugin-block-menu": "^11.1.0",
 		"@atlaskit/editor-plugin-composition": "^11.0.0",
 		"@atlaskit/editor-plugin-decorations": "^12.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^12.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
-		"@atlaskit/editor-plugin-interaction": "^21.0.0",
+		"@atlaskit/editor-plugin-interaction": "^22.0.0",
 		"@atlaskit/editor-plugin-selection": "^12.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^8.0.0",
@@ -41,14 +41,14 @@
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/primitives": "^20.0.0",
 		"@atlaskit/prosemirror-input-rules": "^4.0.0",
-		"@atlaskit/select": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.3.0",
-		"@atlaskit/tokens": "^14.0.0",
+		"@atlaskit/select": "^22.1.0",
+		"@atlaskit/tmp-editor-statsig": "^110.0.0",
+		"@atlaskit/tokens": "^15.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.4.0",
+		"@atlaskit/editor-common": "^116.11.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -103,12 +103,15 @@
 		"platform_editor_code_block_add_line_number_button": {
 			"type": "boolean"
 		},
+		"platform_editor_code_block_dogfooding_patch": {
+			"type": "boolean"
+		},
 		"platform_editor_code_block_language_detection_flow": {
 			"type": "boolean"
 		}
 	},
 	"devDependencies": {
 		"react": "^18.2.0",
-		"react-intl": "^6.6.2"
+		"react-intl": "^7.0.0"
 	}
 }