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

package/dist/es2019/utils/format-code/format-code-state.js

@@ -0,0 +1,82 @@
+import { ACTIONS } from '../../pm-plugins/actions';
+export const mapPendingFormats = (pendingFormats, tr, newState) => {
+  const entries = Object.entries(pendingFormats);
+  if (entries.length === 0) {
+    return pendingFormats;
+  }
+  let nextPendingFormats = pendingFormats;
+  entries.forEach(([localId, pendingFormat]) => {
+    const {
+      deleted,
+      pos
+    } = tr.mapping.mapResult(pendingFormat.pos, 1);
+    const codeBlockNode = newState.doc.nodeAt(pos);
+    const shouldRemovePendingFormat = deleted || (codeBlockNode === null || codeBlockNode === void 0 ? void 0 : codeBlockNode.type) !== newState.schema.nodes.codeBlock || (codeBlockNode === null || codeBlockNode === void 0 ? void 0 : codeBlockNode.attrs.localId) !== localId;
+    const shouldUpdatePendingFormat = pos !== pendingFormat.pos;
+    if (shouldRemovePendingFormat || shouldUpdatePendingFormat) {
+      if (nextPendingFormats === pendingFormats) {
+        nextPendingFormats = {
+          ...pendingFormats
+        };
+      }
+    }
+    if (shouldRemovePendingFormat) {
+      delete nextPendingFormats[localId];
+      return;
+    }
+    if (shouldUpdatePendingFormat) {
+      nextPendingFormats[localId] = {
+        ...pendingFormat,
+        pos
+      };
+    }
+  });
+  return nextPendingFormats;
+};
+function removeRecordEntry(record, key) {
+  const nextRecord = {
+    ...record
+  };
+  delete nextRecord[key];
+  return nextRecord;
+}
+export const applyFormatCodeMeta = (pluginState, meta) => {
+  switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+    case ACTIONS.START_FORMAT_CODE:
+      return {
+        ...pluginState,
+        pendingFormats: {
+          ...pluginState.pendingFormats,
+          [meta.data.localId]: {
+            languageSource: meta.data.languageSource,
+            pos: meta.data.pos,
+            requestId: meta.data.requestId
+          }
+        }
+      };
+    case ACTIONS.RESOLVE_FORMAT_CODE:
+      {
+        const pendingFormats = removeRecordEntry(pluginState.pendingFormats, meta.data.localId);
+        const formatCodeErrors = removeRecordEntry(pluginState.formatCodeErrors, meta.data.localId);
+        return {
+          ...pluginState,
+          formatCodeErrors: meta.data.outcome === 'failed' ? {
+            ...formatCodeErrors,
+            [meta.data.localId]: {
+              errorType: meta.data.errorType,
+              localId: meta.data.localId,
+              languageSource: meta.data.languageSource
+            }
+          } : formatCodeErrors,
+          pendingFormats
+        };
+      }
+    case ACTIONS.CLEAR_FORMAT_CODE_ERROR:
+      return {
+        ...pluginState,
+        formatCodeErrors: removeRecordEntry(pluginState.formatCodeErrors, meta.data.localId)
+      };
+    default:
+      return pluginState;
+  }
+};

package/dist/es2019/utils/format-code/formatter-impl.js

@@ -0,0 +1,10 @@
+export const formatCode = ({
+  content,
+  language
+}) => {
+  return Promise.resolve({
+    content,
+    language,
+    status: 'unchanged'
+  });
+};

package/dist/es2019/utils/format-code/formatter.js

@@ -0,0 +1,47 @@
+const supportedFormatLanguages = ['json', 'javascript', 'jsx', 'typescript', 'tsx', 'sql'];
+export const isSupportedFormatLanguage = language => supportedFormatLanguages.includes(language);
+let formatterModulePromise;
+export const preloadFormatterModule = () => {
+  if (!formatterModulePromise) {
+    formatterModulePromise = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-formatter" */'./formatter-impl').catch(error => {
+      formatterModulePromise = undefined;
+      throw error;
+    });
+  }
+  return formatterModulePromise;
+};
+export const preloadFormatterOnIntent = () => (_state, dispatch) => {
+  if (!dispatch) {
+    // Hover/focus handlers are command-shaped; keep dry-runs side-effect free.
+    return false;
+  }
+  void preloadFormatterModule();
+  return false;
+};
+export const formatCode = async ({
+  content,
+  language
+}) => {
+  let formatterModule;
+  try {
+    formatterModule = await preloadFormatterModule();
+  } catch {
+    return {
+      errorType: 'formatter-load-failed',
+      language,
+      status: 'failed'
+    };
+  }
+  try {
+    return await formatterModule.formatCode({
+      content,
+      language
+    });
+  } catch {
+    return {
+      errorType: 'formatter-execution-failed',
+      language,
+      status: 'failed'
+    };
+  }
+};

package/dist/esm/codeBlockPlugin.js

@@ -10,6 +10,7 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCode } from '@atlaskit/editor-common/quick-insert';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createInsertCodeBlockTransaction, insertCodeBlockWithAnalytics } from './editor-commands';
 import { createAutoDetectPlugin } from './pm-plugins/auto-detect';
@@ -19,9 +20,11 @@ import ideUX from './pm-plugins/ide-ux';
 import { createCodeBlockInputRule } from './pm-plugins/input-rule';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
+import { pluginKey } from './pm-plugins/plugin-key';
 import refreshBrowserSelectionOnChange from './pm-plugins/refresh-browser-selection';
 import { getToolbarConfig } from './pm-plugins/toolbar';
 import { createCodeBlockMenuItem } from './ui/CodeBlockMenuItem';
+import { FormatCodeErrorFlag } from './ui/FormatCodeErrorFlag';
 var CODE_BLOCK_NODE_NAME = 'codeBlock';
 var codeBlockPlugin = function codeBlockPlugin(_ref) {
   var options = _ref.config,
@@ -52,11 +55,15 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(state) {
+      var _codeBlockState$forma, _codeBlockState$pendi;
       if (!state) {
         return undefined;
       }
+      var codeBlockState = pluginKey.getState(state);
       return {
-        copyButtonHoverNode: copySelectionPluginKey.getState(state).codeBlockNode
+        copyButtonHoverNode: copySelectionPluginKey.getState(state).codeBlockNode,
+        formatCodeErrors: (_codeBlockState$forma = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.formatCodeErrors) !== null && _codeBlockState$forma !== void 0 ? _codeBlockState$forma : {},
+        pendingFormats: (_codeBlockState$pendi = codeBlockState === null || codeBlockState === void 0 ? void 0 : codeBlockState.pendingFormats) !== null && _codeBlockState$pendi !== void 0 ? _codeBlockState$pendi : {}
       };
     },
     pmPlugins: function pmPlugins() {
@@ -76,7 +83,7 @@ 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) ? [{
+      }].concat(_toConsumableArray(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_language_detection_flow') ? [{
         name: 'codeBlockAutoDetect',
         plugin: function plugin() {
           return createAutoDetectPlugin(api);
@@ -150,6 +157,11 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         }];
       },
       floatingToolbar: getToolbarConfig(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName)
+    },
+    contentComponent: function contentComponent() {
+      return expValEqualsNoExposure('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? /*#__PURE__*/React.createElement(FormatCodeErrorFlag, {
+        api: api
+      }) : null;
     }
   };
 };

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

@@ -10,6 +10,7 @@ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { findCodeBlock } from '@atlaskit/editor-common/transforms';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, isNodeSelection, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTIONS } from '../pm-plugins/actions';
 import { autoDetectPluginKey } from '../pm-plugins/auto-detect-state';
@@ -17,6 +18,7 @@ import { copySelectionPluginKey } from '../pm-plugins/codeBlockCopySelectionPlug
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { transformToCodeBlockAction } from '../pm-plugins/transform-to-code-block';
 import { createAutoDetectEntry, getLocalId, hasEnoughTextForAutoDetection } from '../utils/auto-detect-state';
+import { formatCode, isSupportedFormatLanguage } from '../utils/format-code/formatter';
 export var removeCodeBlockWithAnalytics = function removeCodeBlockWithAnalytics(editorAnalyticsAPI) {
   return withAnalytics(editorAnalyticsAPI, {
     action: ACTION.DELETED,
@@ -52,11 +54,11 @@ export var changeLanguage = function changeLanguage(editorAnalyticsAPI) {
       }
       var node = state.doc.nodeAt(pos);
       var localId = node === null || node === void 0 ? void 0 : node.attrs.localId;
-      var previousAutoDetectEntry = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? (_autoDetectPluginKey$ = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$ === void 0 ? void 0 : _autoDetectPluginKey$.languageDetectionMap[localId] : undefined;
+      var previousAutoDetectEntry = expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_language_detection_flow') ? (_autoDetectPluginKey$ = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$ === void 0 ? void 0 : _autoDetectPluginKey$.languageDetectionMap[localId] : undefined;
       var tr = state.tr.setNodeMarkup(pos, codeBlock, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
         language: language
       })).setMeta('scrollIntoView', false);
-      if (expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true)) {
+      if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_language_detection_flow')) {
         tr.setMeta(autoDetectPluginKey, {
           type: ACTIONS.REMOVE_AUTO_DETECT_ENTRY,
           data: {
@@ -123,6 +125,179 @@ export var detectLanguage = function detectLanguage() {
     return true;
   };
 };
+var setResolveFormatCodeMeta = function setResolveFormatCodeMeta(tr, _ref) {
+  var languageSource = _ref.languageSource,
+    localId = _ref.localId,
+    outcome = _ref.outcome,
+    requestId = _ref.requestId,
+    errorType = _ref.errorType;
+  return tr.setMeta(pluginKey, {
+    type: ACTIONS.RESOLVE_FORMAT_CODE,
+    data: _objectSpread({
+      languageSource: languageSource,
+      localId: localId,
+      outcome: outcome,
+      requestId: requestId
+    }, errorType ? {
+      errorType: errorType
+    } : {})
+  });
+};
+var replaceCodeBlockText = function replaceCodeBlockText(_ref2) {
+  var codeBlockNode = _ref2.codeBlockNode,
+    content = _ref2.content,
+    pos = _ref2.pos,
+    tr = _ref2.tr;
+  var from = pos + 1;
+  var to = pos + codeBlockNode.nodeSize - 1;
+  tr.delete(from, to);
+  if (content) {
+    tr.insertText(content, from);
+  }
+
+  // The editor scroll plugin scrolls doc-changing transactions by default.
+  return tr.setMeta('scrollIntoView', false);
+};
+var attachFormatCodeAnalytics = function attachFormatCodeAnalytics(_ref3) {
+  var editorAnalyticsAPI = _ref3.editorAnalyticsAPI,
+    languageSource = _ref3.languageSource,
+    result = _ref3.result,
+    tr = _ref3.tr;
+  if (result.status === 'failed') {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.ERRORED,
+      actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+      attributes: {
+        errorType: result.errorType,
+        language: result.language,
+        languageSource: languageSource
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return;
+  }
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+    attributes: {
+      language: result.language,
+      languageSource: languageSource,
+      outcome: result.status
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+};
+var createResolveFormatCodeTransaction = function createResolveFormatCodeTransaction(_ref4) {
+  var editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
+    localId = _ref4.localId,
+    pendingFormat = _ref4.pendingFormat,
+    result = _ref4.result,
+    tr = _ref4.tr;
+  var languageSource = pendingFormat.languageSource,
+    requestId = pendingFormat.requestId;
+  var codeBlockNode = tr.doc.nodeAt(pendingFormat.pos);
+  var hasMatchingCodeBlock = (codeBlockNode === null || codeBlockNode === void 0 ? void 0 : codeBlockNode.type) === tr.doc.type.schema.nodes.codeBlock && (codeBlockNode === null || codeBlockNode === void 0 ? void 0 : codeBlockNode.attrs.localId) === localId;
+  if (!hasMatchingCodeBlock) {
+    // Keep failure telemetry even when the target block is no longer available.
+    if (result.status === 'failed') {
+      attachFormatCodeAnalytics({
+        editorAnalyticsAPI: editorAnalyticsAPI,
+        languageSource: languageSource,
+        result: result,
+        tr: tr
+      });
+    }
+    return setResolveFormatCodeMeta(tr, {
+      languageSource: languageSource,
+      localId: localId,
+      outcome: 'unchanged',
+      requestId: requestId
+    });
+  }
+  var resultTransaction = tr;
+  if (result.status === 'formatted') {
+    resultTransaction = replaceCodeBlockText({
+      codeBlockNode: codeBlockNode,
+      content: result.content,
+      pos: pendingFormat.pos,
+      tr: tr
+    });
+  }
+  attachFormatCodeAnalytics({
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    languageSource: languageSource,
+    result: result,
+    tr: resultTransaction
+  });
+  return setResolveFormatCodeMeta(resultTransaction, {
+    errorType: result.status === 'failed' ? result.errorType : undefined,
+    languageSource: languageSource,
+    localId: localId,
+    outcome: result.status,
+    requestId: requestId
+  });
+};
+export var createFormatCodeOnClick = function createFormatCodeOnClick(_ref5) {
+  var api = _ref5.api,
+    editorAnalyticsAPI = _ref5.editorAnalyticsAPI;
+  return function (state, dispatch) {
+    var _autoDetectPluginKey$2, _api$core;
+    var currentCodeBlockState = pluginKey.getState(state);
+    var currentPos = currentCodeBlockState === null || currentCodeBlockState === void 0 ? void 0 : currentCodeBlockState.pos;
+    if (!currentCodeBlockState || typeof currentPos !== 'number') {
+      return false;
+    }
+    var currentNode = state.doc.nodeAt(currentPos);
+    if (!currentNode || currentNode.type !== state.schema.nodes.codeBlock) {
+      return false;
+    }
+    var currentLanguage = currentNode.attrs.language;
+    if (!isSupportedFormatLanguage(currentLanguage)) {
+      return true;
+    }
+    var currentLocalId = currentNode.attrs.localId;
+    if (currentCodeBlockState.pendingFormats[currentLocalId]) {
+      return true;
+    }
+    var autoDetectEntry = (_autoDetectPluginKey$2 = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$2 === void 0 ? void 0 : _autoDetectPluginKey$2.languageDetectionMap[currentLocalId];
+    var languageSource = (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === currentLanguage ? 'auto-detected' : 'selected';
+    var content = currentNode.textContent;
+    var requestId = crypto.randomUUID();
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref6) {
+      var tr = _ref6.tr;
+      return tr.setMeta(pluginKey, {
+        type: ACTIONS.START_FORMAT_CODE,
+        data: {
+          languageSource: languageSource,
+          localId: currentLocalId,
+          pos: currentPos,
+          requestId: requestId
+        }
+      });
+    });
+    void formatCode({
+      content: content,
+      language: currentLanguage
+    }).then(function (result) {
+      var _api$codeBlock, _api$core2;
+      var pendingFormat = api === null || api === void 0 || (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 || (_api$codeBlock = _api$codeBlock.sharedState.currentState()) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.pendingFormats[currentLocalId];
+      if (!pendingFormat || pendingFormat.requestId !== requestId) {
+        return;
+      }
+      api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref7) {
+        var tr = _ref7.tr;
+        return createResolveFormatCodeTransaction({
+          editorAnalyticsAPI: editorAnalyticsAPI,
+          localId: currentLocalId,
+          pendingFormat: pendingFormat,
+          result: result,
+          tr: tr
+        });
+      });
+    });
+    return true;
+  };
+};
 export var copyContentToClipboardWithAnalytics = function copyContentToClipboardWithAnalytics(editorAnalyticsAPI) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes,
@@ -226,8 +401,8 @@ export var resetShouldIgnoreFollowingMutations = function resetShouldIgnoreFollo
  * if there is text selected it will wrap the current selection if not it will
  * append the codeblock to the end of the document.
  */
-export function createInsertCodeBlockTransaction(_ref) {
-  var state = _ref.state;
+export function createInsertCodeBlockTransaction(_ref8) {
+  var state = _ref8.state;
   var tr = state.tr;
   var from = state.selection.from;
   var codeBlock = state.schema.nodes.codeBlock;
@@ -314,8 +489,8 @@ export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateFor
   };
 };
 export var toggleLineNumbersForCodeBlockNodeEditorCommand = function toggleLineNumbersForCodeBlockNodeEditorCommand(editorAnalyticsAPI) {
-  return function (_ref2) {
-    var tr = _ref2.tr;
+  return function (_ref9) {
+    var tr = _ref9.tr;
     var codeBlockType = tr.doc.type.schema.nodes.codeBlock;
     var codeBlock = findSelectedNodeOfType(codeBlockType)(tr.selection) || findParentNodeOfType(codeBlockType)(tr.selection);
     if (!codeBlock) {

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

@@ -1,7 +1,10 @@
 export var ACTIONS = {
+  CLEAR_FORMAT_CODE_ERROR: 'CLEAR_FORMAT_CODE_ERROR',
+  REMOVE_AUTO_DETECT_ENTRY: 'REMOVE_AUTO_DETECT_ENTRY',
+  RESOLVE_FORMAT_CODE: 'RESOLVE_FORMAT_CODE',
+  SET_AUTO_DETECT_ENTRY: 'SET_AUTO_DETECT_ENTRY',
   SET_COPIED_TO_CLIPBOARD: 'SET_COPIED_TO_CLIPBOARD',
-  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS',
   SET_IS_WRAPPED: 'SET_IS_WRAPPED',
-  SET_AUTO_DETECT_ENTRY: 'SET_AUTO_DETECT_ENTRY',
-  REMOVE_AUTO_DETECT_ENTRY: 'REMOVE_AUTO_DETECT_ENTRY'
+  SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: 'SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS',
+  START_FORMAT_CODE: 'START_FORMAT_CODE'
 };

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

@@ -13,6 +13,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../editor-commands';
 import { codeBlockNodeView } from '../nodeviews/code-block';
 import { codeBlockClassNames } from '../ui/class-names';
+import { applyFormatCodeMeta, mapPendingFormats } from '../utils/format-code/format-code-state';
 import { ACTIONS } from './actions';
 import { generateInitialDecorations, updateCodeBlockDecorations, updateDecorationSetWithWordWrappedDecorator } from './decorators';
 import { pluginKey } from './plugin-key';
@@ -87,7 +88,9 @@ export var createPlugin = function createPlugin(_ref) {
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
+          formatCodeErrors: {},
           isNodeSelected: false,
+          pendingFormats: {},
           shouldIgnoreFollowingMutations: false,
           decorations: DecorationSet.create(state.doc, initialDecorations)
         };
@@ -120,7 +123,16 @@ export var createPlugin = function createPlugin(_ref) {
             isNodeSelected: tr.selection instanceof NodeSelection,
             decorations: updatedDecorationSet
           });
-          return newPluginState;
+          if (!expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+            return newPluginState;
+          }
+
+          // Successful format results change the doc and carry format meta.
+          var formatCodePluginState = applyFormatCodeMeta(newPluginState, meta);
+          return _objectSpread(_objectSpread({}, formatCodePluginState), {}, {
+            // Pending format requests can outlive unrelated document edits.
+            pendingFormats: mapPendingFormats(formatCodePluginState.pendingFormats, tr, newState)
+          });
         }
         if (tr.selectionSet) {
           var _node2 = findCodeBlock(newState, tr.selection);
@@ -139,6 +151,10 @@ export var createPlugin = function createPlugin(_ref) {
             shouldIgnoreFollowingMutations: meta.data
           });
         }
+        if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+          // Failed/unchanged format results and dismissals are meta-only.
+          return applyFormatCodeMeta(pluginState, meta);
+        }
         return pluginState;
       }
     },

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

@@ -7,16 +7,18 @@ import { areCodeBlockLineNumbersVisible, isCodeBlockWordWrapEnabled } from '@atl
 import commonMessages, { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
 import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import AngleBracketsIcon from '@atlaskit/icon/core/angle-brackets';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import ListNumberedIcon from '@atlaskit/icon/core/list-numbered';
 import TextWrapIcon from '@atlaskit/icon/core/text-wrap';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { changeLanguage, copyContentToClipboardWithAnalytics, removeCodeBlockWithAnalytics, resetCopiedState, toggleLineNumbersForCodeBlockNode, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
+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 { isSupportedFormatLanguage, 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';
@@ -87,8 +89,7 @@ export var getToolbarConfig = function getToolbarConfig() {
     var language = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.language;
     var localId = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId;
     var autoDetectState = autoDetectPluginKey.getState(state);
-    var autoDetectEntry = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) && typeof localId === 'string' ? autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId] : undefined;
-
+    var isFormatCodePending = typeof localId === 'string' && Boolean(codeBlockState.pendingFormats[localId]);
     // 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.
@@ -114,6 +115,7 @@ export var getToolbarConfig = function getToolbarConfig() {
     };
     var languagePicker;
     if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button')) {
+      var autoDetectEntry = typeof localId === 'string' && fg('platform_editor_code_block_language_detection_flow') ? autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId] : undefined;
       var autoDetectPickerValue = getAutoDetectPickerValue({
         autoDetectEntry: autoDetectEntry,
         formatMessage: formatMessage,
@@ -237,6 +239,21 @@ export var getToolbarConfig = function getToolbarConfig() {
       tabIndex: null,
       selected: areLineNumbersVisible
     };
+    var canFormatCode = node.textContent.length > 0 && isSupportedFormatLanguage(language);
+    var formatCodeButton = {
+      id: 'editor.codeBlock.formatCode',
+      type: 'button',
+      supportsViewMode: false,
+      disabled: !canFormatCode || isFormatCodePending,
+      icon: AngleBracketsIcon,
+      onClick: createFormatCodeOnClick({
+        api: api,
+        editorAnalyticsAPI: editorAnalyticsAPI
+      }),
+      onFocus: preloadFormatterOnIntent(),
+      onMouseEnter: preloadFormatterOnIntent(),
+      title: formatMessage(canFormatCode ? codeBlockButtonMessages.formatCode : codeBlockButtonMessages.formatCodeUnavailable)
+    };
     return {
       title: 'CodeBlock floating controls',
       // Ignored via go/ees005
@@ -245,7 +262,7 @@ export var getToolbarConfig = function getToolbarConfig() {
         return findDomRefAtPos(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat(_toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], _toConsumableArray(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), _toConsumableArray(copyAndDeleteButtonMenuItems)),
+      items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat(_toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], _toConsumableArray(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton, formatCodeButton] : []), _toConsumableArray(copyAndDeleteButtonMenuItems)),
       scrollable: true
     };
   };

package/dist/esm/ui/CodeBlockLanguagePicker.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { changeLanguage, detectLanguage } from '../editor-commands';
 import { DETECT_LANGUAGE_VALUE } from './language-picker-options';
 import { LanguagePicker } from './LanguagePicker';
@@ -24,7 +24,7 @@ export var CodeBlockLanguagePicker = function CodeBlockLanguagePicker(_ref) {
   }, []);
   var handleSelection = useCallback(function (option, selectionSource) {
     var _api$analytics;
-    var command = option.value === DETECT_LANGUAGE_VALUE && expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? 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 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 (commandSucceeded && option.value !== DETECT_LANGUAGE_VALUE) {
       saveRecentLanguage(option.value);

package/dist/esm/ui/FormatCodeErrorFlag.js

@@ -0,0 +1,61 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import AkFlag, { FlagGroup } from '@atlaskit/flag';
+import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { ACTIONS } from '../pm-plugins/actions';
+import { pluginKey } from '../pm-plugins/plugin-key';
+var FormatCodeErrorFlagItem = function FormatCodeErrorFlagItem(_ref) {
+  var formatCodeError = _ref.formatCodeError;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(AkFlag, {
+    description: formatMessage(formatCodeError.languageSource === 'auto-detected' ? codeBlockButtonMessages.formatCodeFailedAutoDetectedDescription : codeBlockButtonMessages.formatCodeFailedDescription),
+    icon: /*#__PURE__*/React.createElement(StatusErrorIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: ""
+    }),
+    id: formatCodeError.localId,
+    title: formatMessage(codeBlockButtonMessages.formatCodeFailed)
+  });
+};
+export var FormatCodeErrorFlag = function FormatCodeErrorFlag(_ref2) {
+  var api = _ref2.api;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['codeBlock'], function (states) {
+      var _states$codeBlockStat, _states$codeBlockStat2;
+      return {
+        formatCodeErrors: (_states$codeBlockStat = (_states$codeBlockStat2 = states.codeBlockState) === null || _states$codeBlockStat2 === void 0 ? void 0 : _states$codeBlockStat2.formatCodeErrors) !== null && _states$codeBlockStat !== void 0 ? _states$codeBlockStat : {}
+      };
+    }),
+    formatCodeErrors = _useSharedPluginState.formatCodeErrors;
+  var onDismissed = useCallback(function (localId) {
+    var _api$core, _api$core2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
+      var tr = _ref3.tr;
+      tr.setMeta(pluginKey, {
+        type: ACTIONS.CLEAR_FORMAT_CODE_ERROR,
+        data: {
+          localId: localId
+        }
+      });
+      return tr;
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
+  }, [api]);
+  var onFlagGroupDismissed = useCallback(function (localId) {
+    return onDismissed(String(localId));
+  }, [onDismissed]);
+  var activeFormatCodeErrors = Object.values(formatCodeErrors);
+  if (activeFormatCodeErrors.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: onFlagGroupDismissed
+  }, activeFormatCodeErrors.map(function (formatCodeError) {
+    return /*#__PURE__*/React.createElement(FormatCodeErrorFlagItem, {
+      formatCodeError: formatCodeError,
+      key: formatCodeError.localId
+    });
+  }));
+};

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

@@ -3,7 +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 { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var NONE_LANGUAGE_VALUE = 'none';
 export var DETECT_LANGUAGE_VALUE = 'autodetect';
 export var PLAIN_TEXT_LANGUAGE_VALUE = 'text';
@@ -29,7 +29,7 @@ export var createGroupedLanguageOptions = function createGroupedLanguageOptions(
   var plainTextOption = languages.find(function (language) {
     return language.value === PLAIN_TEXT_LANGUAGE_VALUE;
   });
-  var pinnedOptions = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [getDetectLanguageOption(formatMessage)] : [];
+  var pinnedOptions = fg('platform_editor_code_block_language_detection_flow') ? [getDetectLanguageOption(formatMessage)] : [];
   if (plainTextOption) {
     pinnedOptions.push(_objectSpread(_objectSpread({}, plainTextOption), {}, {
       selectionSource: 'pinned'