@atlaskit/editor-plugin-code-block-advanced 7.0.0 → 7.1.0

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -21,9 +21,6 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme, codeFoldingTheme } from '../ui/theme';
-
-// Store last observed heights of code blocks
-var codeBlockHeights = new WeakMap();
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
@@ -33,32 +30,40 @@ import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
 import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
 import { LanguageLoader } from './languages/loader';
+
+// Store last observed heights of code blocks
+var codeBlockHeights = new WeakMap();
 // Based on: https://prosemirror.net/examples/codemirror/
 var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
   function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
     var _config$api,
-      _this = this,
+      _contentFormatSharedS,
       _config$api2,
-      _config$api3;
+      _this = this,
+      _config$api3,
+      _config$api4;
     _classCallCheck(this, CodeBlockAdvancedNodeView);
     _defineProperty(this, "lineWrappingCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
     _defineProperty(this, "readOnlyCompartment", new Compartment());
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
+    _defineProperty(this, "themeCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
     this.node = node;
     this.view = view;
     this.getPos = getPos;
-    this.selectionAPI = (_config$api = config.api) === null || _config$api === void 0 || (_config$api = _config$api.selection) === null || _config$api === void 0 ? void 0 : _config$api.actions;
+    var contentFormatSharedState = expValEquals('confluence_compact_text_format', 'isEnabled', true) ? (_config$api = config.api) === null || _config$api === void 0 || (_config$api = _config$api.contentFormat) === null || _config$api === void 0 ? void 0 : _config$api.sharedState : undefined;
+    this.contentMode = expValEquals('confluence_compact_text_format', 'isEnabled', true) ? contentFormatSharedState === null || contentFormatSharedState === void 0 || (_contentFormatSharedS = contentFormatSharedState.currentState) === null || _contentFormatSharedS === void 0 || (_contentFormatSharedS = _contentFormatSharedS.call(contentFormatSharedState)) === null || _contentFormatSharedS === void 0 ? void 0 : _contentFormatSharedS.contentMode : undefined;
+    this.selectionAPI = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.selection) === null || _config$api2 === void 0 ? void 0 : _config$api2.actions;
     var getNode = function getNode() {
       return _this.node;
     };
     var onMaybeNodeSelection = function onMaybeNodeSelection() {
       return _this.maybeTryingToReachNodeSelection = true;
     };
-    this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.editorDisabled) === null || _config$api2 === void 0 ? void 0 : _config$api2.sharedState.onChange(function () {
+    this.cleanupDisabledState = (_config$api3 = config.api) === null || _config$api3 === void 0 || (_config$api3 = _config$api3.editorDisabled) === null || _config$api3 === void 0 ? void 0 : _config$api3.sharedState.onChange(function () {
       _this.updateReadonlyState();
     });
     this.languageLoader = new LanguageLoader(function (lang) {
@@ -85,10 +90,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         getNode: getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection,
-        customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
+        customFindReplace: Boolean((_config$api4 = config.api) === null || _config$api4 === void 0 ? void 0 : _config$api4.findReplace)
       }),
       // Goes before cmTheme to override styles
-      config.allowCodeFolding ? [codeFoldingTheme] : [], cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
+      config.allowCodeFolding ? [codeFoldingTheme] : [], this.themeCompartment.of(cmTheme({
+        contentMode: expValEquals('confluence_compact_text_format', 'isEnabled', true) ? this.contentMode : undefined
+      })), syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
         domEventHandlers: {
           click: function click() {
             selectNode();
@@ -117,18 +124,25 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         }
       })] : []])
     });
-
-    // We append an additional element that fixes a selection bug on chrome if the code block
-    // is the first element followed by subsequent code blocks
-    var spaceContainer = document.createElement('span');
-    spaceContainer.innerText = ZERO_WIDTH_SPACE;
-    spaceContainer.style.height = '0';
-    // The editor's outer node is our DOM representation
-    this.dom = this.cm.dom;
-    this.dom.appendChild(spaceContainer);
+    if (contentFormatSharedState) {
+      this.unsubscribeContentFormat = contentFormatSharedState.onChange(function (_ref) {
+        var nextSharedState = _ref.nextSharedState,
+          prevSharedState = _ref.prevSharedState;
+        var prevMode = prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.contentMode;
+        var nextMode = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.contentMode;
+        if (nextMode === prevMode) {
+          return;
+        }
+        _this.applyContentModeTheme(nextMode);
+        if (_this.updating || _this.cm.hasFocus) {
+          return;
+        }
+        _this.cm.requestMeasure();
+      });
+    }
 
     // Observe size changes of the CodeMirror DOM and request a measurement pass
-    if (expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
+    if (!expValEquals('confluence_compact_text_format', 'isEnabled', true) && expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
       this.ro = new ResizeObserver(function (entries) {
         // Skip measurements when:
         // 1. Currently updating (prevents feedback loops)
@@ -150,6 +164,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
             }
             codeBlockHeights.set(_this.cm.contentDOM, currentHeight);
           }
+
           // CodeMirror to re-measure when its content size changes
         } catch (err) {
           _iterator.e(err);
@@ -161,6 +176,15 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       this.ro.observe(this.cm.contentDOM);
     }
 
+    // We append an additional element that fixes a selection bug on chrome if the code block
+    // is the first element followed by subsequent code blocks
+    var spaceContainer = document.createElement('span');
+    spaceContainer.innerText = ZERO_WIDTH_SPACE;
+    spaceContainer.style.height = '0';
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom;
+    this.dom.appendChild(spaceContainer);
+
     // This flag is used to avoid an update loop between the outer and
     // inner editor
     this.updating = false;
@@ -182,7 +206,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       // codemirror
       this.clearProseMirrorDecorations();
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
-      if (expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
+      if (expValEquals('confluence_compact_text_format', 'isEnabled', true)) {
+        var _this$unsubscribeCont;
+        (_this$unsubscribeCont = this.unsubscribeContentFormat) === null || _this$unsubscribeCont === void 0 || _this$unsubscribeCont.call(this);
+      }
+      if (!expValEquals('confluence_compact_text_format', 'isEnabled', true) && expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
         var _this$ro;
         (_this$ro = this.ro) === null || _this$ro === void 0 || _this$ro.disconnect();
       }
@@ -280,6 +308,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }
       this.updating = false;
     }
+  }, {
+    key: "applyContentModeTheme",
+    value: function applyContentModeTheme(contentMode) {
+      if (contentMode === this.contentMode) {
+        return;
+      }
+      this.contentMode = contentMode;
+      this.updating = true;
+      this.cm.dispatch({
+        effects: this.themeCompartment.reconfigure(cmTheme({
+          contentMode: contentMode
+        }))
+      });
+      this.updating = false;
+    }
   }, {
     key: "update",
     value: function update(node, _, innerDecorations) {

package/dist/esm/ui/theme.js

@@ -1,80 +1,85 @@
 import { EditorView as CodeMirror } from '@codemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-var getLineHeight = function getLineHeight() {
-  return expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? '1.5em' : '1.5rem';
+var shouldUseCompactTypography = function shouldUseCompactTypography(contentMode) {
+  return contentMode === 'compact' || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
 };
-var getFontSize = function getFontSize() {
-  return expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? '0.875em' : '0.875rem';
+var getLineHeight = function getLineHeight(contentMode) {
+  return shouldUseCompactTypography(contentMode) ? '1.5em' : '1.5rem';
+};
+var getFontSize = function getFontSize(contentMode) {
+  return shouldUseCompactTypography(contentMode) ? '0.875em' : '0.875rem';
+};
+export var cmTheme = function cmTheme(options) {
+  return CodeMirror.theme({
+    '&': {
+      backgroundColor: "var(--ds-background-neutral, #0515240F)",
+      padding: '0',
+      marginTop: "var(--ds-space-100, 8px)",
+      marginBottom: "var(--ds-space-100, 8px)",
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      fontSize: getFontSize(options === null || options === void 0 ? void 0 : options.contentMode),
+      // Custom syntax styling to match existing styling
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
+    },
+    '&.cm-focused': {
+      outline: 'none'
+    },
+    '.cm-line': {
+      padding: '0'
+    },
+    '&.cm-editor.code-block.danger': {
+      backgroundColor: "var(--ds-background-danger, #FFECEB)"
+    },
+    '.cm-content[aria-readonly="true"]': {
+      caretColor: 'transparent'
+    },
+    '.cm-content': {
+      cursor: 'text',
+      caretColor: "var(--ds-text, #292A2E)",
+      margin: "var(--ds-space-100, 8px)",
+      padding: "var(--ds-space-0, 0px)"
+    },
+    '.cm-scroller': {
+      backgroundColor: "var(--ds-background-neutral, #0515240F)",
+      // Custom syntax styling to match existing styling
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      lineHeight: 'unset',
+      fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      borderRadius: "var(--ds-radius-small, 4px)",
+      backgroundImage: overflowShadow({
+        leftCoverWidth: "var(--ds-space-300, 24px)"
+      }),
+      backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
+    },
+    '&.cm-focused .cm-cursor': {
+      borderLeftColor: "var(--ds-text, #292A2E)"
+    },
+    '.cm-gutter': {
+      padding: "var(--ds-space-100, 8px)"
+    },
+    '.cm-gutters': {
+      backgroundColor: "var(--ds-background-neutral, #0515240F)",
+      border: 'none',
+      padding: "var(--ds-space-0, 0px)",
+      color: "var(--ds-text-subtlest, #6B6E76)"
+    },
+    '.cm-lineNumbers .cm-gutterElement': {
+      paddingLeft: "var(--ds-space-0, 0px)",
+      paddingRight: "var(--ds-space-0, 0px)",
+      minWidth: 'unset'
+    },
+    // Set the gutter element min height to prevent flicker of styling while
+    // codemirror is calculating (which happens after an animation frame).
+    // Example problem: https://github.com/codemirror/dev/issues/1076
+    // Ignore the first gutter element as it is a special hidden element.
+    '.cm-gutterElement:not(:first-child)': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+      minHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
+    }
+  });
 };
-export var cmTheme = CodeMirror.theme({
-  '&': {
-    backgroundColor: "var(--ds-background-neutral, #0515240F)",
-    padding: '0',
-    marginTop: "var(--ds-space-100, 8px)",
-    marginBottom: "var(--ds-space-100, 8px)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: getFontSize(),
-    // Custom syntax styling to match existing styling
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: getLineHeight()
-  },
-  '&.cm-focused': {
-    outline: 'none'
-  },
-  '.cm-line': {
-    padding: '0'
-  },
-  '&.cm-editor.code-block.danger': {
-    backgroundColor: "var(--ds-background-danger, #FFECEB)"
-  },
-  '.cm-content[aria-readonly="true"]': {
-    caretColor: 'transparent'
-  },
-  '.cm-content': {
-    cursor: 'text',
-    caretColor: "var(--ds-text, #292A2E)",
-    margin: "var(--ds-space-100, 8px)",
-    padding: "var(--ds-space-0, 0px)"
-  },
-  '.cm-scroller': {
-    backgroundColor: "var(--ds-background-neutral, #0515240F)",
-    // Custom syntax styling to match existing styling
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: 'unset',
-    fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-    borderRadius: "var(--ds-radius-small, 4px)",
-    backgroundImage: overflowShadow({
-      leftCoverWidth: "var(--ds-space-300, 24px)"
-    }),
-    backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
-  },
-  '&.cm-focused .cm-cursor': {
-    borderLeftColor: "var(--ds-text, #292A2E)"
-  },
-  '.cm-gutter': {
-    padding: "var(--ds-space-100, 8px)"
-  },
-  '.cm-gutters': {
-    backgroundColor: "var(--ds-background-neutral, #0515240F)",
-    border: 'none',
-    padding: "var(--ds-space-0, 0px)",
-    color: "var(--ds-text-subtlest, #6B6E76)"
-  },
-  '.cm-lineNumbers .cm-gutterElement': {
-    paddingLeft: "var(--ds-space-0, 0px)",
-    paddingRight: "var(--ds-space-0, 0px)",
-    minWidth: 'unset'
-  },
-  // Set the gutter element min height to prevent flicker of styling while
-  // codemirror is calculating (which happens after an animation frame).
-  // Example problem: https://github.com/codemirror/dev/issues/1076
-  // Ignore the first gutter element as it is a special hidden element.
-  '.cm-gutterElement:not(:first-child)': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    minHeight: getLineHeight()
-  }
-});
 export var codeFoldingTheme = CodeMirror.theme({
   '.cm-gutter': {
     paddingLeft: "var(--ds-space-075, 6px)",

package/dist/types/codeBlockAdvancedPluginType.d.ts

@@ -1,6 +1,7 @@
 import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -11,7 +12,8 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
         SelectionPlugin,
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<SelectionMarkerPlugin>,
-        OptionalPlugin<FindReplacePlugin>
+        OptionalPlugin<FindReplacePlugin>,
+        OptionalPlugin<ContentFormatPlugin>
     ];
     pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;

package/dist/types/nodeviews/codeBlockAdvanced.d.ts

@@ -19,15 +19,18 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private languageCompartment;
     private readOnlyCompartment;
     private pmDecorationsCompartment;
+    private themeCompartment;
     private node;
     private getPos;
     private cm;
+    private contentMode;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
     private ro?;
+    private unsubscribeContentFormat;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -39,6 +42,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private wordWrappingEnabled;
     private getWordWrapEffects;
     private restoreFoldState;
+    private applyContentModeTheme;
     update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
     /**
      * Updates a facet which stores information on the prosemirror decorations

package/dist/types/ui/theme.d.ts

@@ -1,2 +1,7 @@
-export declare const cmTheme: import("@codemirror/state").Extension;
+import type { EditorContentMode } from '@atlaskit/editor-common/types';
+type ThemeOptions = {
+    contentMode?: EditorContentMode;
+};
+export declare const cmTheme: (options?: ThemeOptions) => import("@codemirror/state").Extension;
 export declare const codeFoldingTheme: import("@codemirror/state").Extension;
+export {};

package/dist/types-ts4.5/codeBlockAdvancedPluginType.d.ts

@@ -1,6 +1,7 @@
 import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -11,7 +12,8 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
         SelectionPlugin,
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<SelectionMarkerPlugin>,
-        OptionalPlugin<FindReplacePlugin>
+        OptionalPlugin<FindReplacePlugin>,
+        OptionalPlugin<ContentFormatPlugin>
     ];
     pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;

package/dist/types-ts4.5/nodeviews/codeBlockAdvanced.d.ts

@@ -19,15 +19,18 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private languageCompartment;
     private readOnlyCompartment;
     private pmDecorationsCompartment;
+    private themeCompartment;
     private node;
     private getPos;
     private cm;
+    private contentMode;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
     private cleanupDisabledState;
     private languageLoader;
     private pmFacet;
     private ro?;
+    private unsubscribeContentFormat;
     constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
     destroy(): void;
     forwardUpdate(update: ViewUpdate): void;
@@ -39,6 +42,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private wordWrappingEnabled;
     private getWordWrapEffects;
     private restoreFoldState;
+    private applyContentModeTheme;
     update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
     /**
      * Updates a facet which stores information on the prosemirror decorations

package/dist/types-ts4.5/ui/theme.d.ts

@@ -1,2 +1,7 @@
-export declare const cmTheme: import("@codemirror/state").Extension;
+import type { EditorContentMode } from '@atlaskit/editor-common/types';
+type ThemeOptions = {
+    contentMode?: EditorContentMode;
+};
+export declare const cmTheme: (options?: ThemeOptions) => import("@codemirror/state").Extension;
 export declare const codeFoldingTheme: import("@codemirror/state").Extension;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "7.0.0",
+	"version": "7.1.0",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,8 +37,8 @@
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^16.3.0",
-		"@atlaskit/tokens": "^9.0.0",
+		"@atlaskit/tmp-editor-statsig": "^16.18.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
 		"@codemirror/commands": "6.7.1",
@@ -54,7 +54,7 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.0.0",
+		"@atlaskit/editor-common": "^111.7.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},

package/src/codeBlockAdvancedPluginType.ts

@@ -2,6 +2,7 @@ import type { Extension } from '@codemirror/state';
 
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
+import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
 import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -16,6 +17,7 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 			OptionalPlugin<EditorDisabledPlugin>,
 			OptionalPlugin<SelectionMarkerPlugin>,
 			OptionalPlugin<FindReplacePlugin>,
+			OptionalPlugin<ContentFormatPlugin>,
 		];
 		pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 	}