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

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

@@ -15,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,
@@ -123,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,7 +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 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.
@@ -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/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/utils/format-code/format-code-state.js

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

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

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

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

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

package/dist/esm/codeBlockPlugin.js

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