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

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatCode = void 0;
+var formatCode = exports.formatCode = function formatCode(_ref) {
+  var content = _ref.content,
+    language = _ref.language;
+  return Promise.resolve({
+    content: content,
+    language: language,
+    status: 'unchanged'
+  });
+};

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preloadFormatterOnIntent = exports.preloadFormatterModule = exports.isSupportedFormatLanguage = exports.formatCode = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t3 in e) "default" !== _t3 && {}.hasOwnProperty.call(e, _t3) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t3)) && (i.get || i.set) ? o(f, _t3, i) : f[_t3] = e[_t3]); return f; })(e, t); }
+var supportedFormatLanguages = ['json', 'javascript', 'jsx', 'typescript', 'tsx', 'sql'];
+var isSupportedFormatLanguage = exports.isSupportedFormatLanguage = function isSupportedFormatLanguage(language) {
+  return supportedFormatLanguages.includes(language);
+};
+var formatterModulePromise;
+var preloadFormatterModule = exports.preloadFormatterModule = function preloadFormatterModule() {
+  if (!formatterModulePromise) {
+    formatterModulePromise = Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-formatter" */'./formatter-impl'));
+    }).catch(function (error) {
+      formatterModulePromise = undefined;
+      throw error;
+    });
+  }
+  return formatterModulePromise;
+};
+var preloadFormatterOnIntent = exports.preloadFormatterOnIntent = function preloadFormatterOnIntent() {
+  return function (_state, dispatch) {
+    if (!dispatch) {
+      // Hover/focus handlers are command-shaped; keep dry-runs side-effect free.
+      return false;
+    }
+    void preloadFormatterModule();
+    return false;
+  };
+};
+var formatCode = exports.formatCode = /*#__PURE__*/function () {
+  var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref) {
+    var content, language, formatterModule, _t, _t2;
+    return _regenerator.default.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          content = _ref.content, language = _ref.language;
+          _context.prev = 1;
+          _context.next = 2;
+          return preloadFormatterModule();
+        case 2:
+          formatterModule = _context.sent;
+          _context.next = 4;
+          break;
+        case 3:
+          _context.prev = 3;
+          _t = _context["catch"](1);
+          return _context.abrupt("return", {
+            errorType: 'formatter-load-failed',
+            language: language,
+            status: 'failed'
+          });
+        case 4:
+          _context.prev = 4;
+          _context.next = 5;
+          return formatterModule.formatCode({
+            content: content,
+            language: language
+          });
+        case 5:
+          return _context.abrupt("return", _context.sent);
+        case 6:
+          _context.prev = 6;
+          _t2 = _context["catch"](4);
+          return _context.abrupt("return", {
+            errorType: 'formatter-execution-failed',
+            language: language,
+            status: 'failed'
+          });
+        case 7:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 3], [4, 6]]);
+  }));
+  return function formatCode(_x) {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/dist/es2019/codeBlockPlugin.js

@@ -6,6 +6,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';
@@ -15,9 +16,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';
 const CODE_BLOCK_NODE_NAME = 'codeBlock';
 const codeBlockPlugin = ({
   config: options,
@@ -49,11 +52,15 @@ const codeBlockPlugin = ({
       }];
     },
     getSharedState(state) {
+      var _codeBlockState$forma, _codeBlockState$pendi;
       if (!state) {
         return undefined;
       }
+      const 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() {
@@ -74,7 +81,7 @@ const codeBlockPlugin = ({
           var _api$analytics;
           return createCodeBlockInputRule(schema, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
         }
-      }, ...(expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [{
+      }, ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_language_detection_flow') ? [{
         name: 'codeBlockAutoDetect',
         plugin: () => createAutoDetectPlugin(api)
       }] : []), {
@@ -136,7 +143,10 @@ const codeBlockPlugin = ({
         }
       }],
       floatingToolbar: getToolbarConfig(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName)
-    }
+    },
+    contentComponent: () => expValEqualsNoExposure('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? /*#__PURE__*/React.createElement(FormatCodeErrorFlag, {
+      api: api
+    }) : null
   };
 };
 export default codeBlockPlugin;

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

@@ -7,6 +7,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';
@@ -14,6 +15,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 const removeCodeBlockWithAnalytics = editorAnalyticsAPI => {
   return withAnalytics(editorAnalyticsAPI, {
     action: ACTION.DELETED,
@@ -53,12 +55,12 @@ export const changeLanguage = editorAnalyticsAPI => (language, selectionSource)
   }
   const node = state.doc.nodeAt(pos);
   const localId = node === null || node === void 0 ? void 0 : node.attrs.localId;
-  const previousAutoDetectEntry = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? (_autoDetectPluginKey$ = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$ === void 0 ? void 0 : _autoDetectPluginKey$.languageDetectionMap[localId] : undefined;
+  const 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;
   const tr = state.tr.setNodeMarkup(pos, codeBlock, {
     ...(node === null || node === void 0 ? void 0 : node.attrs),
     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: {
@@ -122,6 +124,181 @@ export const detectLanguage = () => (state, dispatch) => {
   }
   return true;
 };
+const setResolveFormatCodeMeta = (tr, {
+  languageSource,
+  localId,
+  outcome,
+  requestId,
+  errorType
+}) => tr.setMeta(pluginKey, {
+  type: ACTIONS.RESOLVE_FORMAT_CODE,
+  data: {
+    languageSource,
+    localId,
+    outcome,
+    requestId,
+    ...(errorType ? {
+      errorType
+    } : {})
+  }
+});
+const replaceCodeBlockText = ({
+  codeBlockNode,
+  content,
+  pos,
+  tr
+}) => {
+  const from = pos + 1;
+  const 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);
+};
+const attachFormatCodeAnalytics = ({
+  editorAnalyticsAPI,
+  languageSource,
+  result,
+  tr
+}) => {
+  if (result.status === 'failed') {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+      action: ACTION.ERRORED,
+      actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+      attributes: {
+        errorType: result.errorType,
+        language: result.language,
+        languageSource
+      },
+      eventType: EVENT_TYPE.TRACK
+    })(tr);
+    return;
+  }
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+    action: ACTION.FORMATTED,
+    actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+    attributes: {
+      language: result.language,
+      languageSource,
+      outcome: result.status
+    },
+    eventType: EVENT_TYPE.TRACK
+  })(tr);
+};
+const createResolveFormatCodeTransaction = ({
+  editorAnalyticsAPI,
+  localId,
+  pendingFormat,
+  result,
+  tr
+}) => {
+  const {
+    languageSource,
+    requestId
+  } = pendingFormat;
+  const codeBlockNode = tr.doc.nodeAt(pendingFormat.pos);
+  const 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,
+        languageSource,
+        result,
+        tr
+      });
+    }
+    return setResolveFormatCodeMeta(tr, {
+      languageSource,
+      localId,
+      outcome: 'unchanged',
+      requestId
+    });
+  }
+  let resultTransaction = tr;
+  if (result.status === 'formatted') {
+    resultTransaction = replaceCodeBlockText({
+      codeBlockNode,
+      content: result.content,
+      pos: pendingFormat.pos,
+      tr
+    });
+  }
+  attachFormatCodeAnalytics({
+    editorAnalyticsAPI,
+    languageSource,
+    result,
+    tr: resultTransaction
+  });
+  return setResolveFormatCodeMeta(resultTransaction, {
+    errorType: result.status === 'failed' ? result.errorType : undefined,
+    languageSource,
+    localId,
+    outcome: result.status,
+    requestId
+  });
+};
+export const createFormatCodeOnClick = ({
+  api,
+  editorAnalyticsAPI
+}) => (state, dispatch) => {
+  var _autoDetectPluginKey$2, _api$core;
+  const currentCodeBlockState = pluginKey.getState(state);
+  const currentPos = currentCodeBlockState === null || currentCodeBlockState === void 0 ? void 0 : currentCodeBlockState.pos;
+  if (!currentCodeBlockState || typeof currentPos !== 'number') {
+    return false;
+  }
+  const currentNode = state.doc.nodeAt(currentPos);
+  if (!currentNode || currentNode.type !== state.schema.nodes.codeBlock) {
+    return false;
+  }
+  const currentLanguage = currentNode.attrs.language;
+  if (!isSupportedFormatLanguage(currentLanguage)) {
+    return true;
+  }
+  const currentLocalId = currentNode.attrs.localId;
+  if (currentCodeBlockState.pendingFormats[currentLocalId]) {
+    return true;
+  }
+  const autoDetectEntry = (_autoDetectPluginKey$2 = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$2 === void 0 ? void 0 : _autoDetectPluginKey$2.languageDetectionMap[currentLocalId];
+  const languageSource = (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === currentLanguage ? 'auto-detected' : 'selected';
+  const content = currentNode.textContent;
+  const requestId = crypto.randomUUID();
+  api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+    tr
+  }) => tr.setMeta(pluginKey, {
+    type: ACTIONS.START_FORMAT_CODE,
+    data: {
+      languageSource,
+      localId: currentLocalId,
+      pos: currentPos,
+      requestId
+    }
+  }));
+  void formatCode({
+    content,
+    language: currentLanguage
+  }).then(result => {
+    var _api$codeBlock, _api$codeBlock$shared, _api$core2;
+    const pendingFormat = api === null || api === void 0 ? void 0 : (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 ? void 0 : (_api$codeBlock$shared = _api$codeBlock.sharedState.currentState()) === null || _api$codeBlock$shared === void 0 ? void 0 : _api$codeBlock$shared.pendingFormats[currentLocalId];
+    if (!pendingFormat || pendingFormat.requestId !== requestId) {
+      return;
+    }
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+      tr
+    }) => createResolveFormatCodeTransaction({
+      editorAnalyticsAPI,
+      localId: currentLocalId,
+      pendingFormat,
+      result,
+      tr
+    }));
+  });
+  return true;
+};
 export const copyContentToClipboardWithAnalytics = editorAnalyticsAPI => (state, dispatch) => {
   const {
     schema: {

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

@@ -1,7 +1,10 @@
 export const 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/es2019/pm-plugins/main.js

@@ -10,6 +10,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';
@@ -81,7 +82,9 @@ export const createPlugin = ({
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
+          formatCodeErrors: {},
           isNodeSelected: false,
+          pendingFormats: {},
           shouldIgnoreFollowingMutations: false,
           decorations: DecorationSet.create(state.doc, initialDecorations)
         };
@@ -116,7 +119,17 @@ export const createPlugin = ({
             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.
+          const formatCodePluginState = applyFormatCodeMeta(newPluginState, meta);
+          return {
+            ...formatCodePluginState,
+            // Pending format requests can outlive unrelated document edits.
+            pendingFormats: mapPendingFormats(formatCodePluginState.pendingFormats, tr, newState)
+          };
         }
         if (tr.selectionSet) {
           const node = findCodeBlock(newState, tr.selection);
@@ -138,6 +151,10 @@ export const createPlugin = ({
             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/es2019/pm-plugins/toolbar.js

@@ -3,16 +3,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';
@@ -79,8 +81,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
     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;
-
+    const 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.
@@ -100,6 +101,7 @@ 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 autoDetectEntry = typeof localId === 'string' && fg('platform_editor_code_block_language_detection_flow') ? autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId] : undefined;
       const autoDetectPickerValue = getAutoDetectPickerValue({
         autoDetectEntry,
         formatMessage,
@@ -223,13 +225,28 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api, overrideLang
       tabIndex: null,
       selected: areLineNumbersVisible
     };
+    const canFormatCode = node.textContent.length > 0 && isSupportedFormatLanguage(language);
+    const formatCodeButton = {
+      id: 'editor.codeBlock.formatCode',
+      type: 'button',
+      supportsViewMode: false,
+      disabled: !canFormatCode || isFormatCodePending,
+      icon: AngleBracketsIcon,
+      onClick: createFormatCodeOnClick({
+        api,
+        editorAnalyticsAPI
+      }),
+      onFocus: preloadFormatterOnIntent(),
+      onMouseEnter: preloadFormatterOnIntent(),
+      title: formatMessage(canFormatCode ? codeBlockButtonMessages.formatCode : codeBlockButtonMessages.formatCodeUnavailable)
+    };
     return {
       title: 'CodeBlock floating controls',
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
       nodeType,
-      items: [(_languagePicker = languagePicker) !== null && _languagePicker !== void 0 ? _languagePicker : languageSelect, ...(areAnyNewToolbarFlagsEnabled ? [] : [separator]), codeBlockWrapButton, ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), ...copyAndDeleteButtonMenuItems],
+      items: [(_languagePicker = languagePicker) !== null && _languagePicker !== void 0 ? _languagePicker : languageSelect, ...(areAnyNewToolbarFlagsEnabled ? [] : [separator]), codeBlockWrapButton, ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton, formatCodeButton] : []), ...copyAndDeleteButtonMenuItems],
       scrollable: true
     };
   };

package/dist/es2019/ui/CodeBlockLanguagePicker.js

@@ -1,5 +1,5 @@
 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';
@@ -19,7 +19,7 @@ export const CodeBlockLanguagePicker = ({
   }, []);
   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 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 (commandSucceeded && option.value !== DETECT_LANGUAGE_VALUE) {
       saveRecentLanguage(option.value);

package/dist/es2019/ui/FormatCodeErrorFlag.js

@@ -0,0 +1,62 @@
+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';
+const FormatCodeErrorFlagItem = ({
+  formatCodeError
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  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 const FormatCodeErrorFlag = ({
+  api
+}) => {
+  const {
+    formatCodeErrors
+  } = useSharedPluginStateWithSelector(api, ['codeBlock'], 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 : {}
+    };
+  });
+  const onDismissed = useCallback(localId => {
+    var _api$core, _api$core2;
+    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => {
+      tr.setMeta(pluginKey, {
+        type: ACTIONS.CLEAR_FORMAT_CODE_ERROR,
+        data: {
+          localId
+        }
+      });
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
+  }, [api]);
+  const onFlagGroupDismissed = useCallback(localId => onDismissed(String(localId)), [onDismissed]);
+  const activeFormatCodeErrors = Object.values(formatCodeErrors);
+  if (activeFormatCodeErrors.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: onFlagGroupDismissed
+  }, activeFormatCodeErrors.map(formatCodeError => /*#__PURE__*/React.createElement(FormatCodeErrorFlagItem, {
+    formatCodeError: formatCodeError,
+    key: formatCodeError.localId
+  })));
+};

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

@@ -1,5 +1,5 @@
 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 const NONE_LANGUAGE_VALUE = 'none';
 export const DETECT_LANGUAGE_VALUE = 'autodetect';
 export const PLAIN_TEXT_LANGUAGE_VALUE = 'text';
@@ -17,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 = expValEquals('platform_editor_code_block_auto_detection', 'isEnabled', true) ? [getDetectLanguageOption(formatMessage)] : [];
+  const pinnedOptions = fg('platform_editor_code_block_language_detection_flow') ? [getDetectLanguageOption(formatMessage)] : [];
   if (plainTextOption) {
     pinnedOptions.push({
       ...plainTextOption,