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

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

@@ -13,9 +13,38 @@ import { changeLanguage, copyContentToClipboardWithAnalytics, removeCodeBlockWit
 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 { autoDetectPluginKey } from './auto-detect-state';
 import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
 import { createLanguageList, DEFAULT_LANGUAGES, getLanguageIdentifier } from './language-list';
 import { pluginKey } from './plugin-key';
+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;
+
+  // A weak re-detection records noneDetected but can leave a previously auto-detected
+  // language on the node. Keep showing "(detected)" only while that preserved language
+  // still matches the node language, so manual language changes do not inherit the label.
+  if (defaultPickerValue && ((autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'detected' || (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.detectionResult) === 'noneDetected' && autoDetectEntry.autoDetectedLanguage === language)) {
+    return {
+      ...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
+    };
+  }
+  return defaultPickerValue;
+};
 export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLanguageName = undefined) => {
   const languageList = createLanguageList(overrideLanguageName ? DEFAULT_LANGUAGES.map(languageOption => ({
     ...languageOption,
@@ -29,7 +58,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
   return (state, {
     formatMessage
   }) => {
-    var _api$editorViewMode, _api$editorViewMode$s, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs, _languagePicker;
+    var _api$editorViewMode, _api$editorViewMode$s, _api$decorations$acti, _api$decorations, _api$analytics, _codeBlockState$pos, _node$attrs, _node$attrs2, _languagePicker;
     const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
     const {
       hoverDecoration
@@ -48,6 +77,10 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
     const isWrapped = isCodeBlockWordWrapEnabled(node);
     const areLineNumbersVisible = areCodeBlockLineNumbersVisible(node);
     const language = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
+    const localId = node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId;
+    const autoDetectState = autoDetectPluginKey.getState(state);
+    const autoDetectEntry = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) && typeof localId === 'string' ? autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId] : undefined;
+
     // Keep fresh option objects for the legacy toolbar select so reopening it
     // continues to start from the top rather than preserving the previously
     // focused option by reference.
@@ -67,7 +100,12 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
     };
     let languagePicker;
     if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button')) {
-      const defaultPickerValue = language ? languagePickerOptions.find(option => language === NONE_LANGUAGE_VALUE ? option.value === PLAIN_TEXT_LANGUAGE_VALUE : option.value === language || option.alias.includes(language)) : undefined;
+      const autoDetectPickerValue = getAutoDetectPickerValue({
+        autoDetectEntry,
+        formatMessage,
+        language,
+        languagePickerOptions
+      });
       languagePicker = {
         type: 'custom',
         fallback: [],
@@ -77,7 +115,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
           }
           return /*#__PURE__*/React.createElement(CodeBlockLanguagePicker, {
             api: api,
-            defaultValue: defaultPickerValue,
+            defaultValue: autoDetectPickerValue,
             editorView: view,
             filterOption: languageListFilter,
             formatMessage: formatMessage,

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

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

package/dist/es2019/ui/CodeBlockLanguagePicker.js

@@ -1,4 +1,7 @@
 import React, { useCallback, useState } from 'react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { changeLanguage, detectLanguage } from '../editor-commands';
+import { DETECT_LANGUAGE_VALUE } from './language-picker-options';
 import { LanguagePicker } from './LanguagePicker';
 import { getRecentLanguages, saveRecentLanguage } from './recent-languages';
 export const CodeBlockLanguagePicker = ({
@@ -9,23 +12,27 @@ export const CodeBlockLanguagePicker = ({
   formatMessage,
   languagePickerOptions
 }) => {
+  var _api$analytics2;
   const [recentLanguageValues, setRecentLanguageValues] = useState(() => getRecentLanguages());
   const refreshRecentLanguages = useCallback(() => {
     setRecentLanguageValues(getRecentLanguages());
   }, []);
-  const handleLanguageSelect = useCallback(language => {
-    saveRecentLanguage(language);
-    setRecentLanguageValues(getRecentLanguages());
-  }, []);
+  const handleSelection = useCallback((option, selectionSource) => {
+    var _api$analytics;
+    const command = option.value === DETECT_LANGUAGE_VALUE && expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? 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 (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]);
   return /*#__PURE__*/React.createElement(LanguagePicker, {
-    api: api,
     defaultValue: defaultValue,
-    editorView: editorView,
     filterOption: filterOption,
     formatMessage: formatMessage,
     languagePickerOptions: languagePickerOptions,
     recentLanguageValues: recentLanguageValues,
-    onLanguageSelect: handleLanguageSelect,
-    onMenuOpen: refreshRecentLanguages
+    onMenuOpen: refreshRecentLanguages,
+    onSelection: handleSelection
   });
 };

package/dist/es2019/ui/LanguagePicker.js

@@ -8,7 +8,6 @@ import { akEditorLineHeight } from '@atlaskit/editor-shared-styles';
 import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import { Box } from '@atlaskit/primitives/compiled';
 import { PopupSelect, components } from '@atlaskit/select';
-import { changeLanguage } from '../editor-commands';
 import { createGroupedLanguageOptions } from './language-picker-options';
 const pickerOptionStyles = null;
 const styles = {
@@ -59,18 +58,15 @@ const getRecentlyUsedLanguages = (recentLanguageValues, optionsByValue) => {
   return recentlyUsedLanguages;
 };
 export const LanguagePicker = ({
-  api,
   defaultValue,
-  editorView,
   filterOption,
   formatMessage,
   languagePickerOptions,
   recentLanguageValues = [],
-  onLanguageSelect,
-  onMenuOpen
+  onMenuOpen,
+  onSelection
 }) => {
-  var _api$analytics, _defaultValue$label;
-  const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
+  var _defaultValue$label;
   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);
@@ -90,11 +86,8 @@ export const LanguagePicker = ({
     }
     const isSearchSelection = inputValueRef.current.trim().length > 0;
     const selectionSource = isSearchSelection ? 'search' : (_option$selectionSour = option.selectionSource) !== null && _option$selectionSour !== void 0 ? _option$selectionSour : 'all';
-    const commandSucceeded = changeLanguage(editorAnalyticsAPI)(option.value, selectionSource)(editorView.state, editorView.dispatch);
-    if (commandSucceeded) {
-      onLanguageSelect === null || onLanguageSelect === void 0 ? void 0 : onLanguageSelect(option.value);
-    }
-  }, [editorAnalyticsAPI, editorView, onLanguageSelect]);
+    onSelection(option, selectionSource);
+  }, [onSelection]);
   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.
@@ -119,9 +112,8 @@ export const LanguagePicker = ({
     appearance: "subtle",
     isSelected: isOpen,
     "aria-controls": ariaControls,
-    "aria-label": selectLanguageLabel,
     testId: "code-block-language-picker-trigger"
-  }, label)), [label, selectLanguageLabel]);
+  }, label)), [label]);
   return /*#__PURE__*/React.createElement(PopupSelect, {
     components: popupSelectComponents,
     filterOption: filterOption,

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

@@ -1,4 +1,5 @@
 import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const NONE_LANGUAGE_VALUE = 'none';
 export const DETECT_LANGUAGE_VALUE = 'autodetect';
 export const PLAIN_TEXT_LANGUAGE_VALUE = 'text';
@@ -16,7 +17,7 @@ export const createGroupedLanguageOptions = ({
   const recentlyUsedLanguageValues = new Set(recentlyUsedLanguages.map(language => language.value));
   const allLanguages = languages.filter(language => language.value !== NONE_LANGUAGE_VALUE && language.value !== PLAIN_TEXT_LANGUAGE_VALUE && !recentlyUsedLanguageValues.has(language.value));
   const plainTextOption = languages.find(language => language.value === PLAIN_TEXT_LANGUAGE_VALUE);
-  const pinnedOptions = [getDetectLanguageOption(formatMessage)];
+  const pinnedOptions = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [getDetectLanguageOption(formatMessage)] : [];
   if (plainTextOption) {
     pinnedOptions.push({
       ...plainTextOption,

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

@@ -0,0 +1,179 @@
+import { getInsertedCodeBlocksInTransaction } from '@atlaskit/editor-common/code-block';
+import { getAllChangedCodeBlocksInTransaction } from '../pm-plugins/utils';
+const MIN_AUTO_DETECT_TEXT_LENGTH = 20;
+export const shouldTriggerLargeChangeDetection = (lastObservedText, text) => {
+  if (!lastObservedText) {
+    return text.length > 0;
+  }
+  return Math.abs(text.length - lastObservedText.length) > lastObservedText.length / 2;
+};
+export const getFirstLine = text => {
+  var _text$split$;
+  return (_text$split$ = text.split('\n')[0]) !== null && _text$split$ !== void 0 ? _text$split$ : '';
+};
+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) => ({
+  lastObservedText: node.textContent,
+  lastObservedFirstLine: getFirstLine(node.textContent),
+  isPending,
+  detectionResult: previous === null || previous === void 0 ? void 0 : previous.detectionResult,
+  autoDetectedLanguage: previous === null || previous === void 0 ? void 0 : previous.autoDetectedLanguage,
+  pos
+});
+export const queueAutoDetection = (languageDetectionMap, node, pos, isPending) => {
+  const localId = getLocalId(node);
+  if (!localId) {
+    return languageDetectionMap;
+  }
+  return {
+    ...languageDetectionMap,
+    [localId]: createAutoDetectEntry(node, pos, isPending, languageDetectionMap[localId])
+  };
+};
+export const removeAutoDetection = (languageDetectionMap, localId) => {
+  if (!languageDetectionMap[localId]) {
+    return languageDetectionMap;
+  }
+  const nextLanguageDetectionMap = {
+    ...languageDetectionMap
+  };
+  delete nextLanguageDetectionMap[localId];
+  return nextLanguageDetectionMap;
+};
+const getCodeBlockLocalIdsRemovedFromChangedRanges = (tr, codeBlockType) => {
+  const localIds = new Set();
+  tr.steps.forEach((step, stepIndex) => {
+    const docAtStep = tr.docs[stepIndex];
+    step.getMap().forEach((oldStart, oldEnd) => {
+      if (oldStart === oldEnd) {
+        return;
+      }
+      const clampedOldEnd = Math.min(oldEnd, docAtStep.content.size);
+      docAtStep.nodesBetween(oldStart, clampedOldEnd, (node, pos) => {
+        if (node.type !== codeBlockType) {
+          return true;
+        }
+        const isWholeCodeBlockRemoved = pos >= oldStart && pos + node.nodeSize <= clampedOldEnd;
+        if (!isWholeCodeBlockRemoved) {
+          return false;
+        }
+        const localId = getLocalId(node);
+        if (localId) {
+          localIds.add(localId);
+        }
+        return false;
+      });
+    });
+  });
+  return localIds;
+};
+const getCodeBlockTransactionChanges = (tr, codeBlockType) => {
+  const insertedNodesWithPos = getInsertedCodeBlocksInTransaction(tr, codeBlockType);
+  const removedFromChangedRangesLocalIds = getCodeBlockLocalIdsRemovedFromChangedRanges(tr, codeBlockType);
+  const insertedLocalIds = new Set();
+  const insertedCodeBlocks = [];
+  insertedNodesWithPos.forEach(({
+    node,
+    pos
+  }) => {
+    const localId = getLocalId(node);
+    if (!localId) {
+      return;
+    }
+    insertedLocalIds.add(localId);
+    if (!removedFromChangedRangesLocalIds.has(localId)) {
+      insertedCodeBlocks.push({
+        localId,
+        node,
+        pos
+      });
+    }
+  });
+  const deletedLocalIds = new Set();
+  removedFromChangedRangesLocalIds.forEach(localId => {
+    if (!insertedLocalIds.has(localId)) {
+      deletedLocalIds.add(localId);
+    }
+  });
+  return {
+    deletedLocalIds,
+    insertedCodeBlocks
+  };
+};
+export const updateAutoDetectState = (tr, pluginState) => {
+  const {
+    codeBlock
+  } = 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 hasTrackedEntries = Object.keys(pluginState.languageDetectionMap).length > 0;
+
+  // Page loads and remote edits should not start auto-detection for code blocks.
+  if (!hasTrackedEntries && isExternalContentChange) {
+    return pluginState.languageDetectionMap;
+  }
+
+  // Existing entries still need mapping/deletion cleanup, but external edits should not refresh text.
+  const changedCodeBlockNodes = isExternalContentChange ? [] : getAllChangedCodeBlocksInTransaction(tr);
+  if (!hasTrackedEntries && !changedCodeBlockNodes.length) {
+    return pluginState.languageDetectionMap;
+  }
+  const {
+    deletedLocalIds,
+    insertedCodeBlocks
+  } = getCodeBlockTransactionChanges(tr, codeBlock);
+  let languageDetectionMap = hasTrackedEntries ? Object.fromEntries(Object.entries(pluginState.languageDetectionMap).map(([localId, entry]) => [localId, {
+    ...entry,
+    pos: tr.mapping.map(entry.pos)
+  }])) : pluginState.languageDetectionMap;
+  if (!isExternalContentChange) {
+    insertedCodeBlocks.forEach(({
+      localId,
+      node,
+      pos
+    }) => {
+      if (node.attrs.language) {
+        languageDetectionMap = removeAutoDetection(languageDetectionMap, localId);
+        return;
+      }
+      languageDetectionMap = queueAutoDetection(languageDetectionMap, node, pos, hasEnoughTextForAutoDetection(node.textContent));
+    });
+    changedCodeBlockNodes.forEach(({
+      node,
+      pos
+    }) => {
+      const localId = getLocalId(node);
+      if (!localId || !languageDetectionMap[localId]) {
+        return;
+      }
+      const currentLanguage = node.attrs.language;
+      const previousEntry = languageDetectionMap[localId];
+      if (currentLanguage && currentLanguage !== previousEntry.autoDetectedLanguage) {
+        languageDetectionMap = removeAutoDetection(languageDetectionMap, localId);
+        return;
+      }
+      const text = node.textContent;
+      const firstLine = getFirstLine(text);
+      const shouldTriggerDetection = previousEntry.isPending || isPaste || firstLine !== previousEntry.lastObservedFirstLine || shouldTriggerLargeChangeDetection(previousEntry.lastObservedText, text);
+      const isPending = hasEnoughTextForAutoDetection(text) && shouldTriggerDetection;
+
+      // Only pending detection refreshes the text snapshot; otherwise gradual typing
+      // should continue comparing against the last attempted detection.
+      languageDetectionMap = isPending ? queueAutoDetection(languageDetectionMap, node, pos, true) : {
+        ...languageDetectionMap,
+        [localId]: {
+          ...previousEntry,
+          isPending: false,
+          pos
+        }
+      };
+    });
+  }
+  deletedLocalIds.forEach(localId => {
+    if (languageDetectionMap[localId]) {
+      languageDetectionMap = removeAutoDetection(languageDetectionMap, localId);
+    }
+  });
+  return languageDetectionMap;
+};

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

@@ -0,0 +1,108 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { ACTIONS } from '../pm-plugins/actions';
+import { autoDetectPluginKey } from '../pm-plugins/auto-detect-state';
+import { createAutoDetectEntry } from './auto-detect-state';
+import { detectLanguage } from './language-detect';
+const AUTO_DETECT_DEBOUNCE_MS = 500;
+
+// Stored positions are mapped through transactions; verify the localId before using them.
+const getCodeBlockFromEntry = (view, localId, entry) => {
+  const node = view.state.doc.nodeAt(entry.pos);
+  const codeBlockType = view.state.schema.nodes.codeBlock;
+  if ((node === null || node === void 0 ? void 0 : node.type) === codeBlockType && node.attrs.localId === localId) {
+    return {
+      node,
+      pos: entry.pos
+    };
+  }
+  return null;
+};
+
+// Runs after debounce, so it must re-read current editor state before applying language changes.
+const runPendingDetection = (view, localId, api) => {
+  var _api$core;
+  const pluginState = autoDetectPluginKey.getState(view.state);
+  const entry = pluginState === null || pluginState === void 0 ? void 0 : pluginState.languageDetectionMap[localId];
+  if (!(entry !== null && entry !== void 0 && entry.isPending)) {
+    return;
+  }
+  const found = getCodeBlockFromEntry(view, localId, entry);
+  if (!found) {
+    return;
+  }
+  const detectedLanguage = detectLanguage(found.node.textContent);
+  const detectionResult = detectedLanguage ? 'detected' : 'noneDetected';
+  // 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 = {
+    ...createAutoDetectEntry(found.node, found.pos, false, entry),
+    detectionResult,
+    autoDetectedLanguage: detectedLanguage !== null && detectedLanguage !== void 0 ? detectedLanguage : entry.autoDetectedLanguage
+  };
+
+  // If there is no confident detection, record the result without clearing user-visible language.
+  const shouldOnlyUpdateDetectionState = !detectedLanguage && (!found.node.attrs.language || shouldPreserveAutoDetectedLanguage);
+  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) {
+      tr.setNodeMarkup(found.pos, undefined, {
+        ...found.node.attrs,
+        language: detectedLanguage
+      }, found.node.marks);
+    }
+    tr.setMeta(autoDetectPluginKey, {
+      type: ACTIONS.SET_AUTO_DETECT_ENTRY,
+      data: {
+        localId,
+        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);
+    return tr;
+  });
+};
+const clearTimer = (timers, localId) => {
+  const scheduledDetection = timers.get(localId);
+  if (scheduledDetection) {
+    clearTimeout(scheduledDetection.timer);
+    timers.delete(localId);
+  }
+};
+
+// Keeps one debounce timer per pending code block and drops timers for stale entries.
+export const syncPendingDetectionTimers = (view, timers, api) => {
+  var _pluginState$language;
+  const pluginState = autoDetectPluginKey.getState(view.state);
+  const pendingEntries = Object.entries((_pluginState$language = pluginState === null || pluginState === void 0 ? void 0 : pluginState.languageDetectionMap) !== null && _pluginState$language !== void 0 ? _pluginState$language : {}).filter(([, entry]) => entry.isPending);
+  const pendingLocalIds = new Set(pendingEntries.map(([localId]) => localId));
+  pendingEntries.forEach(([localId, entry]) => {
+    const scheduledDetection = timers.get(localId);
+    if ((scheduledDetection === null || scheduledDetection === void 0 ? void 0 : scheduledDetection.lastObservedText) === entry.lastObservedText) {
+      return;
+    }
+    clearTimer(timers, localId);
+    const timer = setTimeout(() => {
+      timers.delete(localId);
+      runPendingDetection(view, localId, api);
+    }, AUTO_DETECT_DEBOUNCE_MS);
+    timers.set(localId, {
+      lastObservedText: entry.lastObservedText,
+      timer
+    });
+  });
+  timers.forEach((_, localId) => {
+    if (!pendingLocalIds.has(localId)) {
+      clearTimer(timers, localId);
+    }
+  });
+};

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

@@ -0,0 +1,99 @@
+/* eslint-disable require-unicode-regexp */
+
+// 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;
+const MIN_DETECTION_SCORE = 3; // Require at least one medium-confidence signal before auto-selecting.
+const MIN_SCORE_GAP = 2; // Avoid auto-selecting when top two languages are too close to distinguish.
+
+const hasPattern = (code, pattern) => {
+  // Reset stateful regexes so repeated tests always start at the beginning.
+  pattern.lastIndex = 0;
+  return pattern.test(code);
+};
+const scorePatterns = (code, patterns) => patterns.reduce((score, [pattern, value]) => score + (hasPattern(code, pattern) ? value : 0), 0);
+const looksLikeHtmlTagPair = code => {
+  const openTags = new Set();
+  const tagPattern = /<\/?([a-z][a-z0-9-]*)\b[^<>]{0,500}>/gi;
+  let match;
+  while ((match = tagPattern.exec(code)) !== null) {
+    const [tag, tagName] = match;
+    if (tag.endsWith('/>')) {
+      continue;
+    }
+    if (tag.startsWith('</')) {
+      if (openTags.has(tagName.toLowerCase())) {
+        return true;
+      }
+    } else {
+      openTags.add(tagName.toLowerCase());
+    }
+  }
+  return false;
+};
+const looksLikeJson = code => {
+  const trimmed = code.trim();
+  if (!/^[{[]/.test(trimmed) || !/[}\]]$/.test(trimmed)) {
+    return false;
+  }
+  try {
+    const parsed = JSON.parse(trimmed);
+    return parsed !== null && typeof parsed === 'object';
+  } catch {
+    return false;
+  }
+};
+const getLanguageScores = code => [{
+  language: 'json',
+  score: looksLikeJson(code) ? 8 : 0
+}, {
+  language: 'html',
+  score: scorePatterns(code, [[/<!doctype\s+html/i, 5], [/<\/?(?:html|head|body|div|span|script|style|section|template)\b/i, 2]]) + (looksLikeHtmlTagPair(code) ? 3 : 0)
+}, {
+  language: 'css',
+  score: scorePatterns(code, [[/@[\w-]+\s+[^{]+\{/, 3], [/[.#]?[-_a-zA-Z][-_a-zA-Z0-9\s,.:#>+~*\[\]='"]+\{[^}]*\b(?:color|display|margin|padding|font|background|border|width|height|grid|flex)\s*:/, 5], [/\b(?:color|display|margin|padding|font-size|background|border|width|height)\s*:\s*[^;{}]+;/, 3]])
+}, {
+  language: 'sql',
+  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]])
+}, {
+  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]])
+}, {
+  language: 'python',
+  score: scorePatterns(code, [[/^\s*def\s+[a-zA-Z_]\w*\([^)]*\)\s*:/m, 5], [/^\s*class\s+[A-Z_]\w*(?:\([^)]*\))?\s*:/m, 4], [/^\s*(?:from\s+[\w.]+\s+import\s+\w+|import\s+[\w.]+)/m, 3], [/^\s*(?:if|elif|else|for|while|try|except)\b[^\n]*:\s*$/m, 2], [/\bprint\([^)]*\)/, 2]])
+}, {
+  language: 'java',
+  score: scorePatterns(code, [[/\bpublic\s+(?:final\s+)?class\s+[A-Z]\w*/, 5], [/\bpublic\s+static\s+void\s+main\s*\(\s*String\[\]/, 5], [/\bSystem\.out\.println\s*\(/, 4], [/\b(?:private|protected|public)\s+(?:static\s+)?(?:final\s+)?[A-Z]\w*(?:<[^>]+>)?\s+\w+\s*[;(=]/, 3]])
+}, {
+  language: 'go',
+  score: scorePatterns(code, [[/^\s*package\s+\w+/m, 5], [/\bfunc\s+(?:\([^)]*\)\s*)?[A-Za-z_]\w*\s*\([^)]*\)\s*(?:[A-Za-z_*\[\]]+\s*)?\{/, 5], [/\bfmt\.(?:Println|Printf)\s*\(/, 3], [/\bimport\s+\(\s*[\s\S]*?\)/, 2]])
+}, {
+  language: 'ruby',
+  score: scorePatterns(code, [[/^\s*def\s+[a-z_]\w*[!?=]?/m, 4], [/^\s*class\s+[A-Z]\w*(?:\s*<\s*[A-Z]\w*)?/m, 3], [/^\s*end\s*$/m, 3], [/\b(?:puts|require|attr_reader|attr_accessor)\b/, 3], [/\bdo\s*\|[^|]+\|/, 2]])
+}, {
+  language: 'rust',
+  score: scorePatterns(code, [[/\bfn\s+[a-z_]\w*\s*\([^)]*\)\s*(?:->\s*[A-Za-z_:<>]+\s*)?\{/, 5], [/\blet\s+mut\s+\w+/, 3], [/\bprintln!\s*\(/, 4], [/\buse\s+(?:std|crate|super)::/, 3], [/\b(?:impl|pub\s+struct|enum)\s+[A-Z]\w*/, 3]])
+}, {
+  language: 'shell',
+  score: scorePatterns(code, [[/^#!\/usr\/bin\/(?:env\s+)?(?:ba|z|k)?sh\b/m, 6], [/^\s*(?:if|for|while)\b[\s\S]+\b(?:then|do)\b/m, 4], [/^\s*(?:fi|done)\s*$/m, 3], [/\b(?:echo|export|cd|grep|sed|awk|curl)\b[\s\S]*(?:\$\w+|&&|\|)/, 3], [/\$\{?[A-Z_][A-Z0-9_]*\}?/, 2]])
+}];
+export const detectLanguage = code => {
+  const trimmedCode = code.trim();
+  if (trimmedCode.length < 8) {
+    return null;
+  }
+  const codeForDetection = trimmedCode.slice(0, MAX_DETECTION_CHARS);
+  const [best, secondBest] = getLanguageScores(codeForDetection).filter(({
+    score
+  }) => score > 0).sort((a, b) => b.score - a.score);
+  if (!best || best.score < MIN_DETECTION_SCORE) {
+    return null;
+  }
+  if (secondBest && best.score - secondBest.score < MIN_SCORE_GAP) {
+    return null;
+  }
+  return best.language;
+};

package/dist/esm/codeBlockPlugin.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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 React from 'react';
@@ -11,6 +12,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
+import { createAutoDetectPlugin } from './pm-plugins/auto-detect';
 import { codeBlockAutoFullStopTransformPlugin } from './pm-plugins/codeBlockAutoFullStopTransformPlugin';
 import { codeBlockCopySelectionPlugin, copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import ideUX from './pm-plugins/ide-ux';
@@ -74,7 +76,12 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
           var schema = _ref3.schema;
           return createCodeBlockInputRule(schema, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
-      }, {
+      }].concat(_toConsumableArray(expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [{
+        name: 'codeBlockAutoDetect',
+        plugin: function plugin() {
+          return createAutoDetectPlugin(api);
+        }
+      }] : []), [{
         name: 'codeBlockIDEKeyBindings',
         plugin: function plugin() {
           return ideUX(api);
@@ -95,7 +102,7 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         plugin: function plugin() {
           return codeBlockAutoFullStopTransformPlugin();
         }
-      }];
+      }]);
     },
     // Workaround for a firefox issue where dom selection is off sync
     // https://product-fabric.atlassian.net/browse/ED-12442