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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-code-block
 
+## 13.1.0
+
+### Minor Changes
+
+- [`75daf19dd12b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/75daf19dd12b0) -
+  Add format code control for code blocks
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.0.1
 
 ### Patch Changes

package/dist/cjs/codeBlockPlugin.js

@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _editorCommands = require("./editor-commands");
 var _autoDetect = require("./pm-plugins/auto-detect");
@@ -24,9 +25,11 @@ var _ideUx = _interopRequireDefault(require("./pm-plugins/ide-ux"));
 var _inputRule = require("./pm-plugins/input-rule");
 var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
 var _main = require("./pm-plugins/main");
+var _pluginKey = require("./pm-plugins/plugin-key");
 var _refreshBrowserSelection = _interopRequireDefault(require("./pm-plugins/refresh-browser-selection"));
 var _toolbar = require("./pm-plugins/toolbar");
 var _CodeBlockMenuItem = require("./ui/CodeBlockMenuItem");
+var _FormatCodeErrorFlag = require("./ui/FormatCodeErrorFlag");
 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) { (0, _defineProperty2.default)(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; }
 var CODE_BLOCK_NODE_NAME = 'codeBlock';
@@ -59,11 +62,15 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(state) {
+      var _codeBlockState$forma, _codeBlockState$pendi;
       if (!state) {
         return undefined;
       }
+      var codeBlockState = _pluginKey.pluginKey.getState(state);
       return {
-        copyButtonHoverNode: _codeBlockCopySelectionPlugin.copySelectionPluginKey.getState(state).codeBlockNode
+        copyButtonHoverNode: _codeBlockCopySelectionPlugin.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() {
@@ -157,6 +164,11 @@ var codeBlockPlugin = function codeBlockPlugin(_ref) {
         }];
       },
       floatingToolbar: (0, _toolbar.getToolbarConfig)(options === null || options === void 0 ? void 0 : options.allowCopyToClipboard, api, options === null || options === void 0 ? void 0 : options.overrideLanguageName)
+    },
+    contentComponent: function contentComponent() {
+      return (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_FormatCodeErrorFlag.FormatCodeErrorFlag, {
+        api: api
+      }) : null;
     }
   };
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.copyContentToClipboardWithAnalytics = exports.copyContentToClipboard = exports.changeLanguage = void 0;
+exports.createFormatCodeOnClick = exports.copyContentToClipboardWithAnalytics = exports.copyContentToClipboard = exports.changeLanguage = void 0;
 exports.createInsertCodeBlockTransaction = createInsertCodeBlockTransaction;
 exports.ignoreFollowingMutations = exports.detectLanguage = void 0;
 exports.insertCodeBlockWithAnalytics = insertCodeBlockWithAnalytics;
@@ -27,6 +27,7 @@ var _codeBlockCopySelectionPlugin = require("../pm-plugins/codeBlockCopySelectio
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _transformToCodeBlock = require("../pm-plugins/transform-to-code-block");
 var _autoDetectState2 = require("../utils/auto-detect-state");
+var _formatter = require("../utils/format-code/formatter");
 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) { (0, _defineProperty2.default)(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; }
 var removeCodeBlockWithAnalytics = exports.removeCodeBlockWithAnalytics = function removeCodeBlockWithAnalytics(editorAnalyticsAPI) {
@@ -135,6 +136,179 @@ var detectLanguage = exports.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.pluginKey, {
+    type: _actions.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: _analytics.ACTION.ERRORED,
+      actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
+      attributes: {
+        errorType: result.errorType,
+        language: result.language,
+        languageSource: languageSource
+      },
+      eventType: _analytics.EVENT_TYPE.TRACK
+    })(tr);
+    return;
+  }
+  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+    action: _analytics.ACTION.FORMATTED,
+    actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
+    attributes: {
+      language: result.language,
+      languageSource: languageSource,
+      outcome: result.status
+    },
+    eventType: _analytics.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
+  });
+};
+var createFormatCodeOnClick = exports.createFormatCodeOnClick = function createFormatCodeOnClick(_ref5) {
+  var api = _ref5.api,
+    editorAnalyticsAPI = _ref5.editorAnalyticsAPI;
+  return function (state, dispatch) {
+    var _autoDetectPluginKey$2, _api$core;
+    var currentCodeBlockState = _pluginKey.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 (!(0, _formatter.isSupportedFormatLanguage)(currentLanguage)) {
+      return true;
+    }
+    var currentLocalId = currentNode.attrs.localId;
+    if (currentCodeBlockState.pendingFormats[currentLocalId]) {
+      return true;
+    }
+    var autoDetectEntry = (_autoDetectPluginKey$2 = _autoDetectState.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.pluginKey, {
+        type: _actions.ACTIONS.START_FORMAT_CODE,
+        data: {
+          languageSource: languageSource,
+          localId: currentLocalId,
+          pos: currentPos,
+          requestId: requestId
+        }
+      });
+    });
+    void (0, _formatter.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;
+  };
+};
 var copyContentToClipboardWithAnalytics = exports.copyContentToClipboardWithAnalytics = function copyContentToClipboardWithAnalytics(editorAnalyticsAPI) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes,
@@ -238,8 +412,8 @@ var resetShouldIgnoreFollowingMutations = exports.resetShouldIgnoreFollowingMuta
  * if there is text selected it will wrap the current selection if not it will
  * append the codeblock to the end of the document.
  */
-function createInsertCodeBlockTransaction(_ref) {
-  var state = _ref.state;
+function createInsertCodeBlockTransaction(_ref8) {
+  var state = _ref8.state;
   var tr = state.tr;
   var from = state.selection.from;
   var codeBlock = state.schema.nodes.codeBlock;
@@ -326,8 +500,8 @@ var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBloc
   };
 };
 var toggleLineNumbersForCodeBlockNodeEditorCommand = exports.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 = (0, _utils.findSelectedNodeOfType)(codeBlockType)(tr.selection) || (0, _utils.findParentNodeOfType)(codeBlockType)(tr.selection);
     if (!codeBlock) {

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

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ACTIONS = void 0;
 var ACTIONS = exports.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/cjs/pm-plugins/main.js

@@ -18,6 +18,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _editorCommands = require("../editor-commands");
 var _codeBlock2 = require("../nodeviews/code-block");
 var _classNames = require("../ui/class-names");
+var _formatCodeState = require("../utils/format-code/format-code-state");
 var _actions = require("./actions");
 var _decorators = require("./decorators");
 var _pluginKey = require("./plugin-key");
@@ -94,7 +95,9 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
         return {
           pos: node ? node.pos : null,
           contentCopied: false,
+          formatCodeErrors: {},
           isNodeSelected: false,
+          pendingFormats: {},
           shouldIgnoreFollowingMutations: false,
           decorations: _view.DecorationSet.create(state.doc, initialDecorations)
         };
@@ -127,7 +130,16 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
             isNodeSelected: tr.selection instanceof _state.NodeSelection,
             decorations: updatedDecorationSet
           });
-          return newPluginState;
+          if (!(0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+            return newPluginState;
+          }
+
+          // Successful format results change the doc and carry format meta.
+          var formatCodePluginState = (0, _formatCodeState.applyFormatCodeMeta)(newPluginState, meta);
+          return _objectSpread(_objectSpread({}, formatCodePluginState), {}, {
+            // Pending format requests can outlive unrelated document edits.
+            pendingFormats: (0, _formatCodeState.mapPendingFormats)(formatCodePluginState.pendingFormats, tr, newState)
+          });
         }
         if (tr.selectionSet) {
           var _node2 = (0, _transforms.findCodeBlock)(newState, tr.selection);
@@ -146,6 +158,10 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
             shouldIgnoreFollowingMutations: meta.data
           });
         }
+        if ((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
+          // Failed/unchanged format results and dismissals are meta-only.
+          return (0, _formatCodeState.applyFormatCodeMeta)(pluginState, meta);
+        }
         return pluginState;
       }
     },

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

@@ -13,6 +13,7 @@ var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
 var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _angleBrackets = _interopRequireDefault(require("@atlaskit/icon/core/angle-brackets"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _listNumbered = _interopRequireDefault(require("@atlaskit/icon/core/list-numbered"));
@@ -23,6 +24,7 @@ var _editorCommands = require("../editor-commands");
 var _CodeBlockLanguagePicker = require("../ui/CodeBlockLanguagePicker");
 var _WrapIcon = require("../ui/icons/WrapIcon");
 var _languagePickerOptions = require("../ui/language-picker-options");
+var _formatter = require("../utils/format-code/formatter");
 var _autoDetectState = require("./auto-detect-state");
 var _codeBlockCopySelectionPlugin = require("./codeBlockCopySelectionPlugin");
 var _languageList = require("./language-list");
@@ -96,7 +98,7 @@ var getToolbarConfig = exports.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 = _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.
@@ -246,6 +248,21 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
       tabIndex: null,
       selected: areLineNumbersVisible
     };
+    var canFormatCode = node.textContent.length > 0 && (0, _formatter.isSupportedFormatLanguage)(language);
+    var formatCodeButton = {
+      id: 'editor.codeBlock.formatCode',
+      type: 'button',
+      supportsViewMode: false,
+      disabled: !canFormatCode || isFormatCodePending,
+      icon: _angleBrackets.default,
+      onClick: (0, _editorCommands.createFormatCodeOnClick)({
+        api: api,
+        editorAnalyticsAPI: editorAnalyticsAPI
+      }),
+      onFocus: (0, _formatter.preloadFormatterOnIntent)(),
+      onMouseEnter: (0, _formatter.preloadFormatterOnIntent)(),
+      title: formatMessage(canFormatCode ? _messages.codeBlockButtonMessages.formatCode : _messages.codeBlockButtonMessages.formatCodeUnavailable)
+    };
     return {
       title: 'CodeBlock floating controls',
       // Ignored via go/ees005
@@ -254,7 +271,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
         return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
       },
       nodeType: nodeType,
-      items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton] : []), (0, _toConsumableArray2.default)(copyAndDeleteButtonMenuItems)),
+      items: [languagePicker !== null && languagePicker !== void 0 ? languagePicker : languageSelect].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [separator]), [codeBlockWrapButton], (0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_code_block_add_line_number_button') ? [codeBlockLineNumbersButton, formatCodeButton] : []), (0, _toConsumableArray2.default)(copyAndDeleteButtonMenuItems)),
       scrollable: true
     };
   };

package/dist/cjs/ui/FormatCodeErrorFlag.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormatCodeErrorFlag = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntl = require("react-intl");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _flag = _interopRequireWildcard(require("@atlaskit/flag"));
+var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
+var _actions = require("../pm-plugins/actions");
+var _pluginKey = require("../pm-plugins/plugin-key");
+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" != _typeof(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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var FormatCodeErrorFlagItem = function FormatCodeErrorFlagItem(_ref) {
+  var formatCodeError = _ref.formatCodeError;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_flag.default, {
+    description: formatMessage(formatCodeError.languageSource === 'auto-detected' ? _messages.codeBlockButtonMessages.formatCodeFailedAutoDetectedDescription : _messages.codeBlockButtonMessages.formatCodeFailedDescription),
+    icon: /*#__PURE__*/_react.default.createElement(_statusError.default, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: ""
+    }),
+    id: formatCodeError.localId,
+    title: formatMessage(_messages.codeBlockButtonMessages.formatCodeFailed)
+  });
+};
+var FormatCodeErrorFlag = exports.FormatCodeErrorFlag = function FormatCodeErrorFlag(_ref2) {
+  var api = _ref2.api;
+  var _useSharedPluginState = (0, _hooks.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 = (0, _react.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.pluginKey, {
+        type: _actions.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 = (0, _react.useCallback)(function (localId) {
+    return onDismissed(String(localId));
+  }, [onDismissed]);
+  var activeFormatCodeErrors = Object.values(formatCodeErrors);
+  if (activeFormatCodeErrors.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_flag.FlagGroup, {
+    onDismissed: onFlagGroupDismissed
+  }, activeFormatCodeErrors.map(function (formatCodeError) {
+    return /*#__PURE__*/_react.default.createElement(FormatCodeErrorFlagItem, {
+      formatCodeError: formatCodeError,
+      key: formatCodeError.localId
+    });
+  }));
+};

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

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapPendingFormats = exports.applyFormatCodeMeta = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _actions = require("../../pm-plugins/actions");
+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) { (0, _defineProperty2.default)(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; }
+var mapPendingFormats = exports.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 = (0, _slicedToArray2.default)(_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;
+}
+var applyFormatCodeMeta = exports.applyFormatCodeMeta = function applyFormatCodeMeta(pluginState, meta) {
+  switch (meta === null || meta === void 0 ? void 0 : meta.type) {
+    case _actions.ACTIONS.START_FORMAT_CODE:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        pendingFormats: _objectSpread(_objectSpread({}, pluginState.pendingFormats), {}, (0, _defineProperty2.default)({}, meta.data.localId, {
+          languageSource: meta.data.languageSource,
+          pos: meta.data.pos,
+          requestId: meta.data.requestId
+        }))
+      });
+    case _actions.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), {}, (0, _defineProperty2.default)({}, meta.data.localId, {
+            errorType: meta.data.errorType,
+            localId: meta.data.localId,
+            languageSource: meta.data.languageSource
+          })) : formatCodeErrors,
+          pendingFormats: pendingFormats
+        });
+      }
+    case _actions.ACTIONS.CLEAR_FORMAT_CODE_ERROR:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        formatCodeErrors: removeRecordEntry(pluginState.formatCodeErrors, meta.data.localId)
+      });
+    default:
+      return pluginState;
+  }
+};

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);
+  };
+}();