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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 7.1.0
+
+### Minor Changes
+
+- [`77341edf4fd78`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/77341edf4fd78) -
+  [EDITOR-3786] Added a new plugin `@atlaskit/editor-plugin-content-format`, and made
+  `@atlaskit/editor-plugin-code-block-advanced` have a dependancy on it. Removed the ResizeObserver
+  from `@atlaskit/editor-plugin-code-block-advanced` and replaced it with a way to observe changes
+  to the `contentMode`. Updated examples to update the state of the new plugin so that examples work
+  with the new behaviour.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.0.0
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.confluence.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"target": "es5",
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-code-block-advanced",

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -43,28 +43,33 @@ var codeBlockHeights = new WeakMap();
 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;
     (0, _classCallCheck2.default)(this, CodeBlockAdvancedNodeView);
     (0, _defineProperty2.default)(this, "lineWrappingCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "languageCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "readOnlyCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "pmDecorationsCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "themeCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
     (0, _defineProperty2.default)(this, "pmFacet", _state.Facet.define());
     (0, _defineProperty2.default)(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 = (0, _expValEquals.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 = (0, _expValEquals.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 _loader.LanguageLoader(function (lang) {
@@ -91,10 +96,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 ? [_theme.codeFoldingTheme] : [], _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)({
+      config.allowCodeFolding ? [_theme.codeFoldingTheme] : [], this.themeCompartment.of((0, _theme.cmTheme)({
+        contentMode: (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) ? this.contentMode : undefined
+      })), (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)({
         domEventHandlers: {
           click: function click() {
             selectNode();
@@ -123,18 +130,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 = _whitespace.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 ((0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp')) {
+    if (!(0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) && (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp')) {
       this.ro = new ResizeObserver(function (entries) {
         // Skip measurements when:
         // 1. Currently updating (prevents feedback loops)
@@ -156,6 +170,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);
@@ -167,6 +182,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 = _whitespace.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;
@@ -188,7 +212,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       // codemirror
       this.clearProseMirrorDecorations();
       (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
-      if ((0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp')) {
+      if ((0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true)) {
+        var _this$unsubscribeCont;
+        (_this$unsubscribeCont = this.unsubscribeContentFormat) === null || _this$unsubscribeCont === void 0 || _this$unsubscribeCont.call(this);
+      }
+      if (!(0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) && (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp')) {
         var _this$ro;
         (_this$ro = this.ro) === null || _this$ro === void 0 || _this$ro.disconnect();
       }
@@ -286,6 +314,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((0, _theme.cmTheme)({
+          contentMode: contentMode
+        }))
+      });
+      this.updating = false;
+    }
   }, {
     key: "update",
     value: function update(node, _, innerDecorations) {

package/dist/cjs/ui/theme.js

@@ -7,80 +7,85 @@ exports.codeFoldingTheme = exports.cmTheme = void 0;
 var _view = require("@codemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
-var getLineHeight = function getLineHeight() {
-  return (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? '1.5em' : '1.5rem';
+var shouldUseCompactTypography = function shouldUseCompactTypography(contentMode) {
+  return contentMode === 'compact' || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp');
 };
-var getFontSize = function getFontSize() {
-  return (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.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';
+};
+var cmTheme = exports.cmTheme = function cmTheme(options) {
+  return _view.EditorView.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)
+    }
+  });
 };
-var cmTheme = exports.cmTheme = _view.EditorView.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()
-  }
-});
 var codeFoldingTheme = exports.codeFoldingTheme = _view.EditorView.theme({
   '.cm-gutter': {
     paddingLeft: "var(--ds-space-075, 6px)",

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -13,9 +13,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
-const codeBlockHeights = new WeakMap();
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
@@ -25,24 +22,30 @@ 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
+const codeBlockHeights = new WeakMap();
 // Based on: https://prosemirror.net/examples/codemirror/
 class CodeBlockAdvancedNodeView {
   constructor(node, view, getPos, innerDecorations, config) {
-    var _config$api, _config$api$selection, _config$api2, _config$api2$editorDi, _config$api3;
+    var _config$api, _config$api$contentFo, _contentFormatSharedS, _contentFormatSharedS2, _config$api2, _config$api2$selectio, _config$api3, _config$api3$editorDi, _config$api4;
     _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 ? void 0 : (_config$api$selection = _config$api.selection) === null || _config$api$selection === void 0 ? void 0 : _config$api$selection.actions;
+    const contentFormatSharedState = expValEquals('confluence_compact_text_format', 'isEnabled', true) ? (_config$api = config.api) === null || _config$api === void 0 ? void 0 : (_config$api$contentFo = _config$api.contentFormat) === null || _config$api$contentFo === void 0 ? void 0 : _config$api$contentFo.sharedState : undefined;
+    this.contentMode = expValEquals('confluence_compact_text_format', 'isEnabled', true) ? contentFormatSharedState === null || contentFormatSharedState === void 0 ? void 0 : (_contentFormatSharedS = contentFormatSharedState.currentState) === null || _contentFormatSharedS === void 0 ? void 0 : (_contentFormatSharedS2 = _contentFormatSharedS.call(contentFormatSharedState)) === null || _contentFormatSharedS2 === void 0 ? void 0 : _contentFormatSharedS2.contentMode : undefined;
+    this.selectionAPI = (_config$api2 = config.api) === null || _config$api2 === void 0 ? void 0 : (_config$api2$selectio = _config$api2.selection) === null || _config$api2$selectio === void 0 ? void 0 : _config$api2$selectio.actions;
     const getNode = () => this.node;
     const onMaybeNodeSelection = () => this.maybeTryingToReachNodeSelection = true;
-    this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 ? void 0 : (_config$api2$editorDi = _config$api2.editorDisabled) === null || _config$api2$editorDi === void 0 ? void 0 : _config$api2$editorDi.sharedState.onChange(() => {
+    this.cleanupDisabledState = (_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : (_config$api3$editorDi = _config$api3.editorDisabled) === null || _config$api3$editorDi === void 0 ? void 0 : _config$api3$editorDi.sharedState.onChange(() => {
       this.updateReadonlyState();
     });
     this.languageLoader = new LanguageLoader(lang => {
@@ -68,10 +71,12 @@ class CodeBlockAdvancedNodeView {
         getNode,
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         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: () => {
             selectNode();
@@ -97,18 +102,26 @@ class CodeBlockAdvancedNodeView {
         getNode: () => this.node
       })] : []]
     });
-
-    // 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
-    const 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(({
+        nextSharedState,
+        prevSharedState
+      }) => {
+        const prevMode = prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.contentMode;
+        const 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(entries => {
         // Skip measurements when:
         // 1. Currently updating (prevents feedback loops)
@@ -126,12 +139,22 @@ class CodeBlockAdvancedNodeView {
           }
           codeBlockHeights.set(this.cm.contentDOM, currentHeight);
         }
+
         // CodeMirror to re-measure when its content size changes
         this.cm.requestMeasure();
       });
       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
+    const 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;
@@ -151,7 +174,11 @@ class CodeBlockAdvancedNodeView {
     // codemirror
     this.clearProseMirrorDecorations();
     (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 ? 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 ? 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 ? void 0 : _this$ro.disconnect();
     }
@@ -233,6 +260,19 @@ class CodeBlockAdvancedNodeView {
     }
     this.updating = false;
   }
+  applyContentModeTheme(contentMode) {
+    if (contentMode === this.contentMode) {
+      return;
+    }
+    this.contentMode = contentMode;
+    this.updating = true;
+    this.cm.dispatch({
+      effects: this.themeCompartment.reconfigure(cmTheme({
+        contentMode
+      }))
+    });
+    this.updating = false;
+  }
   update(node, _, innerDecorations) {
     this.maybeTryingToReachNodeSelection = false;
     if (node.type !== this.node.type) {

package/dist/es2019/ui/theme.js

@@ -1,19 +1,20 @@
 import { EditorView as CodeMirror } from '@codemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-const getLineHeight = () => 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';
-const getFontSize = () => 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';
-export const cmTheme = CodeMirror.theme({
+const shouldUseCompactTypography = contentMode => contentMode === 'compact' || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
+const getLineHeight = contentMode => shouldUseCompactTypography(contentMode) ? '1.5em' : '1.5rem';
+const getFontSize = contentMode => shouldUseCompactTypography(contentMode) ? '0.875em' : '0.875rem';
+export const cmTheme = options => 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(),
+    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()
+    lineHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
   },
   '&.cm-focused': {
     outline: 'none'
@@ -68,7 +69,7 @@ export const cmTheme = CodeMirror.theme({
   // 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()
+    minHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
   }
 });
 export const codeFoldingTheme = CodeMirror.theme({