@atlaskit/editor-plugin-code-block 13.0.1 → 13.1.1

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() {
@@ -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

@@ -18,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,
@@ -124,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,
@@ -227,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;
@@ -315,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,7 +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 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.
@@ -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] : []), _toConsumableArray(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_add_line_number_button') && fg('platform_editor_code_block_formatting') ? [formatCodeButton] : []), _toConsumableArray(copyAndDeleteButtonMenuItems)),
       scrollable: true
     };
   };

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/utils/format-code/format-code-state.js

@@ -0,0 +1,74 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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 { ACTIONS } from '../../pm-plugins/actions';
+export var mapPendingFormats = function mapPendingFormats(pendingFormats, tr, newState) {
+  var entries = Object.entries(pendingFormats);
+  if (entries.length === 0) {
+    return pendingFormats;
+  }
+  var nextPendingFormats = pendingFormats;
+  entries.forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      localId = _ref2[0],
+      pendingFormat = _ref2[1];
+    var _tr$mapping$mapResult = tr.mapping.mapResult(pendingFormat.pos, 1),
+      deleted = _tr$mapping$mapResult.deleted,
+      pos = _tr$mapping$mapResult.pos;
+    var codeBlockNode = newState.doc.nodeAt(pos);
+    var 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;
+    var shouldUpdatePendingFormat = pos !== pendingFormat.pos;
+    if (shouldRemovePendingFormat || shouldUpdatePendingFormat) {
+      if (nextPendingFormats === pendingFormats) {
+        nextPendingFormats = _objectSpread({}, pendingFormats);
+      }
+    }
+    if (shouldRemovePendingFormat) {
+      delete nextPendingFormats[localId];
+      return;
+    }
+    if (shouldUpdatePendingFormat) {
+      nextPendingFormats[localId] = _objectSpread(_objectSpread({}, pendingFormat), {}, {
+        pos: pos
+      });
+    }
+  });
+  return nextPendingFormats;
+};
+function removeRecordEntry(record, key) {
+  var nextRecord = _objectSpread({}, record);
+  delete nextRecord[key];
+  return nextRecord;
+}
+export var applyFormatCodeMeta = function applyFormatCodeMeta(pluginState, meta) {
+  switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+    case ACTIONS.START_FORMAT_CODE:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        pendingFormats: _objectSpread(_objectSpread({}, pluginState.pendingFormats), {}, _defineProperty({}, meta.data.localId, {
+          languageSource: meta.data.languageSource,
+          pos: meta.data.pos,
+          requestId: meta.data.requestId
+        }))
+      });
+    case ACTIONS.RESOLVE_FORMAT_CODE:
+      {
+        var pendingFormats = removeRecordEntry(pluginState.pendingFormats, meta.data.localId);
+        var formatCodeErrors = removeRecordEntry(pluginState.formatCodeErrors, meta.data.localId);
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          formatCodeErrors: meta.data.outcome === 'failed' ? _objectSpread(_objectSpread({}, formatCodeErrors), {}, _defineProperty({}, meta.data.localId, {
+            errorType: meta.data.errorType,
+            localId: meta.data.localId,
+            languageSource: meta.data.languageSource
+          })) : formatCodeErrors,
+          pendingFormats: pendingFormats
+        });
+      }
+    case ACTIONS.CLEAR_FORMAT_CODE_ERROR:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        formatCodeErrors: removeRecordEntry(pluginState.formatCodeErrors, meta.data.localId)
+      });
+    default:
+      return pluginState;
+  }
+};

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

@@ -0,0 +1,9 @@
+export var formatCode = function formatCode(_ref) {
+  var content = _ref.content,
+    language = _ref.language;
+  return Promise.resolve({
+    content: content,
+    language: language,
+    status: 'unchanged'
+  });
+};

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

@@ -0,0 +1,75 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+var supportedFormatLanguages = ['json', 'javascript', 'jsx', 'typescript', 'tsx', 'sql'];
+export var isSupportedFormatLanguage = function isSupportedFormatLanguage(language) {
+  return supportedFormatLanguages.includes(language);
+};
+var formatterModulePromise;
+export var preloadFormatterModule = function preloadFormatterModule() {
+  if (!formatterModulePromise) {
+    formatterModulePromise = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-code-block-formatter" */'./formatter-impl').catch(function (error) {
+      formatterModulePromise = undefined;
+      throw error;
+    });
+  }
+  return formatterModulePromise;
+};
+export var 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;
+  };
+};
+export var formatCode = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
+    var content, language, formatterModule, _t, _t2;
+    return _regeneratorRuntime.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/types/codeBlockPluginType.d.ts

@@ -11,6 +11,7 @@ import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { CodeBlockState } from './pm-plugins/main-state';
 import type { CodeBlockPluginOptions } from './types';
 type CodeBlockDependencies = [
     DecorationsPlugin,
@@ -32,6 +33,8 @@ export type CodeBlockPlugin = NextEditorPlugin<'codeBlock', {
     pluginConfiguration: CodeBlockPluginOptions | undefined;
     sharedState: {
         copyButtonHoverNode: PMNode;
+        formatCodeErrors: CodeBlockState['formatCodeErrors'];
+        pendingFormats: CodeBlockState['pendingFormats'];
     } | undefined;
 }>;
 export {};

package/dist/types/editor-commands/index.d.ts

@@ -1,13 +1,18 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { CodeBlockPlugin } from '../codeBlockPluginType';
 import type { LanguagePickerSelectionSource } from '../ui/language-picker-options';
 export declare const removeCodeBlockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const removeCodeBlock: Command;
 export declare const changeLanguage: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => (language: string | null, selectionSource?: LanguagePickerSelectionSource) => Command;
 /** Queue auto-detection for selected code block. */
 export declare const detectLanguage: () => Command;
+export declare const createFormatCodeOnClick: ({ api, editorAnalyticsAPI, }: {
+    api?: ExtractInjectionAPI<CodeBlockPlugin>;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+}) => Command;
 export declare const copyContentToClipboardWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => Command;
 export declare const copyContentToClipboard: Command;
 export declare const resetCopiedState: Command;

package/dist/types/pm-plugins/actions.d.ts

@@ -1,7 +1,10 @@
 export declare const ACTIONS: {
+    CLEAR_FORMAT_CODE_ERROR: string;
+    REMOVE_AUTO_DETECT_ENTRY: string;
+    RESOLVE_FORMAT_CODE: string;
+    SET_AUTO_DETECT_ENTRY: string;
     SET_COPIED_TO_CLIPBOARD: string;
-    SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: string;
     SET_IS_WRAPPED: string;
-    SET_AUTO_DETECT_ENTRY: string;
-    REMOVE_AUTO_DETECT_ENTRY: string;
+    SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS: string;
+    START_FORMAT_CODE: string;
 };