@atlaskit/editor-plugin-code-block-advanced 10.1.0 → 10.1.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 10.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.1.1
+
+### Patch Changes
+
+- [`7e8145e6a7ce6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e8145e6a7ce6) -
+  Add ADF-backed code block line number visibility
+- Updated dependencies
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -46,14 +46,15 @@ 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,
+    var _this = this,
+      _config$api,
       _contentFormatSharedS,
       _config$api2,
-      _this = this,
       _config$api3,
       _config$api4;
     (0, _classCallCheck2.default)(this, CodeBlockAdvancedNodeView);
     (0, _defineProperty2.default)(this, "lineWrappingCompartment", new _state.Compartment());
+    (0, _defineProperty2.default)(this, "lineNumbersCompartment", 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());
@@ -61,6 +62,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
     (0, _defineProperty2.default)(this, "pmFacet", _state.Facet.define());
     (0, _defineProperty2.default)(this, "wordWrappingEnabled", false);
+    (0, _defineProperty2.default)(this, "lineNumbersHidden", false);
+    (0, _defineProperty2.default)(this, "selectCodeBlockNodeAndFocus", function () {
+      _this.selectCodeBlockNode(undefined);
+      _this.view.focus();
+    });
     this.config = config;
     this.node = node;
     this.view = view;
@@ -87,10 +93,6 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     var _config$getIntl = config.getIntl(),
       formatMessage = _config$getIntl.formatMessage;
     var formattedAriaLabel = formatMessage(_messages.blockTypeMessages.codeblock);
-    var selectNode = function selectNode() {
-      _this.selectCodeBlockNode(undefined);
-      _this.view.focus();
-    };
     var isMacOS = (0, _browser.getBrowserInfo)().mac;
     this.cm = new _view.EditorView({
       doc: this.node.textContent,
@@ -107,16 +109,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       // Goes before cmTheme to override styles
       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();
-            return true;
-          }
-        }
-      }),
-      // Explicitly disable "sticky" positioning on line numbers to match
-      // Renderer behaviour
+      })), (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? this.lineNumbersCompartment.of(this.getLineNumberVisibilityExtensions(node)) : this.getLineNumberExtensions(),
+      // Explicitly disable "sticky" positioning on all gutters to match
+      // Renderer behaviour.
       (0, _view.gutters)({
         fixed: false
       }), _view.EditorView.updateListener.of(function (update) {
@@ -139,7 +134,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         'aria-label': formattedAriaLabel,
         'aria-describedby': "codesnippet-".concat(this.node.attrs.localId)
       })), config.allowCodeFolding ? [(0, _foldGutter.foldGutterExtension)({
-        selectNode: selectNode,
+        selectNode: this.selectCodeBlockNodeAndFocus,
         getNode: function getNode() {
           return _this.node;
         }
@@ -221,6 +216,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     this.updateLanguage();
     this.updateLocalIdAttribute();
     this.wordWrappingEnabled = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
+    this.lineNumbersHidden = (0, _codeBlock.areCodeBlockLineNumbersHidden)(node);
 
     // Restore fold state after initialization
     if (config.allowCodeFolding) {
@@ -335,6 +331,37 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         this.view.dispatch(tr);
       }
     }
+  }, {
+    key: "getLineNumberExtensions",
+    value: function getLineNumberExtensions() {
+      var _this2 = this;
+      return [(0, _view.lineNumbers)({
+        domEventHandlers: {
+          click: function click() {
+            _this2.selectCodeBlockNodeAndFocus();
+            return true;
+          }
+        }
+      })];
+    }
+  }, {
+    key: "getLineNumberVisibilityExtensions",
+    value: function getLineNumberVisibilityExtensions(node) {
+      if ((0, _codeBlock.areCodeBlockLineNumbersHidden)(node)) {
+        return [];
+      }
+      return this.getLineNumberExtensions();
+    }
+  }, {
+    key: "getLineNumbersEffects",
+    value: function getLineNumbersEffects(node) {
+      var lineNumbersHidden = (0, _codeBlock.areCodeBlockLineNumbersHidden)(node);
+      if (this.lineNumbersHidden !== lineNumbersHidden) {
+        this.lineNumbersHidden = lineNumbersHidden;
+        return this.lineNumbersCompartment.reconfigure(this.getLineNumberVisibilityExtensions(node));
+      }
+      return undefined;
+    }
   }, {
     key: "getWordWrapEffects",
     value: function getWordWrapEffects(node) {
@@ -393,11 +420,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       // Updates bundled for performance (to avoid multiple-dispatches)
       var changes = (0, _updateCMSelection.getCMSelectionChanges)(curText, newText);
       var wordWrapEffect = this.getWordWrapEffects(node);
+      var lineNumbersEffect = (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? this.getLineNumbersEffects(node) : undefined;
       var prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
-      if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
+      if (changes || wordWrapEffect || lineNumbersEffect || prosemirrorDecorationsEffect) {
         this.updating = true;
         this.cm.dispatch({
-          effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(function (effect) {
+          effects: [wordWrapEffect, lineNumbersEffect, prosemirrorDecorationsEffect].filter(function (effect) {
             return !!effect;
           }),
           changes: changes

package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeBlockNodeWithFixedToDOM = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _styles = require("@atlaskit/editor-common/styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -24,6 +26,57 @@ var MATCH_NEWLINES = new RegExp('\n', 'gu');
 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 getGutterBaseStyle = function getGutterBaseStyle() {
+  return {
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
+    position: 'relative',
+    flexShrink: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: getFontSize(),
+    boxSizing: 'content-box'
+  };
+};
+var getGutterPadding = function getGutterPadding(allowCodeFolding) {
+  return allowCodeFolding ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)";
+};
+var getGuttersWithLineNumbers = function getGuttersWithLineNumbers(content, config) {
+  return ['div', {
+    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+    // But we can't reuse that class as it adds a ::before that intefers with this approach
+    style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, getGutterBaseStyle()), {}, {
+      width: 'var(--lineNumberGutterWidth, 2rem)',
+      /* top and bottom | left and right */
+      padding: getGutterPadding(config.allowCodeFolding)
+    })),
+    contenteditable: 'false'
+  }, ['div', {
+    class: 'code-block-gutter-pseudo-element',
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      textAlign: 'right',
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
+    }),
+    'data-label': content
+  }]];
+};
+var getFoldOnlyGutter = function getFoldOnlyGutter() {
+  return ['div', {
+    style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, getGutterBaseStyle()), {}, {
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)")
+    })),
+    contenteditable: 'false'
+  }];
+};
+var getGutters = function getGutters(content, config, hideLineNumbers) {
+  if (!hideLineNumbers) {
+    return [getGuttersWithLineNumbers(content, config)];
+  }
+  if (config.allowCodeFolding) {
+    return [getFoldOnlyGutter()];
+  }
+  return [];
+};
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
 var _toDOM = function toDOM(node, formattedAriaLabel, config) {
@@ -34,45 +87,26 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
       totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
     }
   });
+  var hideLineNumbers = (0, _codeBlock.areCodeBlockLineNumbersHidden)(node);
   var maxDigits = totalLineCount.toString().length;
   var content = node.textContent.split('\n').map(function (_, i) {
     return i + 1;
   }).join('\n');
+  var gutters = getGutters(content, config, hideLineNumbers);
   return ['pre', _objectSpread({
     class: codeBlockClassNames.container,
     style: "--lineNumberGutterWidth:".concat(maxDigits, "ch;"),
     'data-language': node.attrs.language || ''
-  }, (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
+  }, (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && _objectSpread({
     'data-wrap': node.attrs.wrap ? 'true' : 'false'
-  }), ['div', {
+  }, hideLineNumbers && {
+    'data-hide-line-numbers': 'true'
+  })), ['div', {
     class: codeBlockClassNames.start,
     contenteditable: 'false'
   }], ['div', {
     class: codeBlockClassNames.contentWrapper
-  }, ['div', {
-    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
-    // But we can't reuse that class as it adds a ::before that intefers with this approach
-    style: (0, _lazyNodeView.convertToInlineCss)({
-      backgroundColor: "var(--ds-background-neutral, #0515240F)",
-      position: 'relative',
-      width: 'var(--lineNumberGutterWidth, 2rem)',
-      /* top and bottom | left and right */
-      padding: config.allowCodeFolding ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)",
-      flexShrink: 0,
-      fontSize: getFontSize(),
-      boxSizing: 'content-box'
-    }),
-    contenteditable: 'false'
-  }, ['div', {
-    class: 'code-block-gutter-pseudo-element',
-    style: (0, _lazyNodeView.convertToInlineCss)({
-      textAlign: 'right',
-      color: "var(--ds-text-subtlest, #6B6E76)",
-      fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-      whiteSpace: 'pre-wrap'
-    }),
-    'data-label': content
-  }]], ['div', {
+  }].concat((0, _toConsumableArray2.default)(gutters), [['div', {
     class: codeBlockClassNames.content
   }, ['code', _objectSpread({
     'data-language': node.attrs.language || '',
@@ -81,7 +115,7 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
     'aria-label': formattedAriaLabel
   }, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
     'data-local-id': node.attrs.localId
-  }), 0]]], ['div', {
+  }), 0]]]), ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'
   }]];

package/dist/cjs/ui/theme.js

@@ -1,12 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.codeFoldingTheme = exports.cmTheme = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _view = require("@codemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+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 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');
 };
@@ -65,12 +69,18 @@ var cmTheme = exports.cmTheme = function cmTheme(options) {
     '.cm-gutter': {
       padding: "var(--ds-space-100, 8px)"
     },
-    '.cm-gutters': {
+    '.cm-gutters': _objectSpread({
       backgroundColor: "var(--ds-background-neutral, #0515240F)",
       border: 'none',
       padding: "var(--ds-space-0, 0px)",
       color: "var(--ds-text-subtlest, #6B6E76)"
-    },
+    }, (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
+      // CodeMirror defaults this to height: 100%, which can resolve against an indefinite
+      // parent height in content-height editor and prevent flex stretching when gutter
+      // content is sparse, such as fold-only gutters.
+      height: 'unset',
+      alignSelf: 'stretch'
+    }),
     '.cm-lineNumbers .cm-gutterElement': {
       paddingLeft: "var(--ds-space-0, 0px)",
       paddingRight: "var(--ds-space-0, 0px)",

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -4,7 +4,7 @@ import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { areCodeBlockLineNumbersHidden, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
 import { blockTypeMessages, codeBlockMessages, roleDescriptionMessages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
@@ -34,6 +34,7 @@ class CodeBlockAdvancedNodeView {
   constructor(node, view, getPos, innerDecorations, config) {
     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, "lineNumbersCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
     _defineProperty(this, "readOnlyCompartment", new Compartment());
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
@@ -41,6 +42,11 @@ class CodeBlockAdvancedNodeView {
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
+    _defineProperty(this, "lineNumbersHidden", false);
+    _defineProperty(this, "selectCodeBlockNodeAndFocus", () => {
+      this.selectCodeBlockNode(undefined);
+      this.view.focus();
+    });
     this.config = config;
     this.node = node;
     this.view = view;
@@ -64,10 +70,6 @@ class CodeBlockAdvancedNodeView {
       formatMessage
     } = config.getIntl();
     const formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
-    const selectNode = () => {
-      this.selectCodeBlockNode(undefined);
-      this.view.focus();
-    };
     const isMacOS = getBrowserInfo().mac;
     this.cm = new CodeMirror({
       doc: this.node.textContent,
@@ -82,16 +84,9 @@ class CodeBlockAdvancedNodeView {
       // Goes before cmTheme to override styles
       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();
-            return true;
-          }
-        }
-      }),
-      // Explicitly disable "sticky" positioning on line numbers to match
-      // Renderer behaviour
+      })), syntaxHighlighting(highlightStyle), bracketMatching(), expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? this.lineNumbersCompartment.of(this.getLineNumberVisibilityExtensions(node)) : this.getLineNumberExtensions(),
+      // Explicitly disable "sticky" positioning on all gutters to match
+      // Renderer behaviour.
       gutters({
         fixed: false
       }), CodeMirror.updateListener.of(update => this.forwardUpdate(update)), this.readOnlyCompartment.of([CodeMirrorState.readOnly.of(!this.view.editable), CodeMirror.contentAttributes.of({
@@ -117,7 +112,7 @@ class CodeBlockAdvancedNodeView {
           'aria-describedby': `codesnippet-${this.node.attrs.localId}`
         })
       }), config.allowCodeFolding ? [foldGutterExtension({
-        selectNode,
+        selectNode: this.selectCodeBlockNodeAndFocus,
         getNode: () => this.node
       })] : [],
       // With platform_editor_fix_advanced_codeblocks_crlf_patch the lineSeparatorExtension is not needed
@@ -189,6 +184,7 @@ class CodeBlockAdvancedNodeView {
     this.updateLanguage();
     this.updateLocalIdAttribute();
     this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
+    this.lineNumbersHidden = areCodeBlockLineNumbersHidden(node);
 
     // Restore fold state after initialization
     if (config.allowCodeFolding) {
@@ -288,6 +284,30 @@ class CodeBlockAdvancedNodeView {
       this.view.dispatch(tr);
     }
   }
+  getLineNumberExtensions() {
+    return [lineNumbers({
+      domEventHandlers: {
+        click: () => {
+          this.selectCodeBlockNodeAndFocus();
+          return true;
+        }
+      }
+    })];
+  }
+  getLineNumberVisibilityExtensions(node) {
+    if (areCodeBlockLineNumbersHidden(node)) {
+      return [];
+    }
+    return this.getLineNumberExtensions();
+  }
+  getLineNumbersEffects(node) {
+    const lineNumbersHidden = areCodeBlockLineNumbersHidden(node);
+    if (this.lineNumbersHidden !== lineNumbersHidden) {
+      this.lineNumbersHidden = lineNumbersHidden;
+      return this.lineNumbersCompartment.reconfigure(this.getLineNumberVisibilityExtensions(node));
+    }
+    return undefined;
+  }
   getWordWrapEffects(node) {
     if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
       this.wordWrappingEnabled = !this.wordWrappingEnabled;
@@ -338,11 +358,12 @@ class CodeBlockAdvancedNodeView {
     // Updates bundled for performance (to avoid multiple-dispatches)
     const changes = getCMSelectionChanges(curText, newText);
     const wordWrapEffect = this.getWordWrapEffects(node);
+    const lineNumbersEffect = expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? this.getLineNumbersEffects(node) : undefined;
     const prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
-    if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
+    if (changes || wordWrapEffect || lineNumbersEffect || prosemirrorDecorationsEffect) {
       this.updating = true;
       this.cm.dispatch({
-        effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(effect => !!effect),
+        effects: [wordWrapEffect, lineNumbersEffect, prosemirrorDecorationsEffect].filter(effect => !!effect),
         changes
       });
       this.updating = false;

package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -1,4 +1,5 @@
 import { codeBlock, codeBlockWithExtendedAttributes, codeBlockWithLocalId } from '@atlaskit/adf-schema';
+import { areCodeBlockLineNumbersHidden } from '@atlaskit/editor-common/code-block';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -12,6 +13,51 @@ const codeBlockClassNames = {
 };
 const MATCH_NEWLINES = new RegExp('\n', 'gu');
 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';
+const getGutterBaseStyle = () => ({
+  backgroundColor: "var(--ds-background-neutral, #0515240F)",
+  position: 'relative',
+  flexShrink: 0,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  fontSize: getFontSize(),
+  boxSizing: 'content-box'
+});
+const getGutterPadding = allowCodeFolding => allowCodeFolding ? `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}` : "var(--ds-space-100, 8px)";
+const getGuttersWithLineNumbers = (content, config) => ['div', {
+  // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+  // But we can't reuse that class as it adds a ::before that intefers with this approach
+  style: convertToInlineCss({
+    ...getGutterBaseStyle(),
+    width: 'var(--lineNumberGutterWidth, 2rem)',
+    /* top and bottom | left and right */
+    padding: getGutterPadding(config.allowCodeFolding)
+  }),
+  contenteditable: 'false'
+}, ['div', {
+  class: 'code-block-gutter-pseudo-element',
+  style: convertToInlineCss({
+    textAlign: 'right',
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+    whiteSpace: 'pre-wrap'
+  }),
+  'data-label': content
+}]];
+const getFoldOnlyGutter = () => ['div', {
+  style: convertToInlineCss({
+    ...getGutterBaseStyle(),
+    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"}`
+  }),
+  contenteditable: 'false'
+}];
+const getGutters = (content, config, hideLineNumbers) => {
+  if (!hideLineNumbers) {
+    return [getGuttersWithLineNumbers(content, config)];
+  }
+  if (config.allowCodeFolding) {
+    return [getFoldOnlyGutter()];
+  }
+  return [];
+};
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
 const toDOM = (node, formattedAriaLabel, config) => {
@@ -22,44 +68,26 @@ const toDOM = (node, formattedAriaLabel, config) => {
       totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
     }
   });
+  const hideLineNumbers = areCodeBlockLineNumbersHidden(node);
   const maxDigits = totalLineCount.toString().length;
   const content = node.textContent.split('\n').map((_, i) => i + 1).join('\n');
+  const gutters = getGutters(content, config, hideLineNumbers);
   return ['pre', {
     class: codeBlockClassNames.container,
     style: `--lineNumberGutterWidth:${maxDigits}ch;`,
     'data-language': node.attrs.language || '',
     ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
-      'data-wrap': node.attrs.wrap ? 'true' : 'false'
+      'data-wrap': node.attrs.wrap ? 'true' : 'false',
+      ...(hideLineNumbers && {
+        'data-hide-line-numbers': 'true'
+      })
     })
   }, ['div', {
     class: codeBlockClassNames.start,
     contenteditable: 'false'
   }], ['div', {
     class: codeBlockClassNames.contentWrapper
-  }, ['div', {
-    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
-    // But we can't reuse that class as it adds a ::before that intefers with this approach
-    style: convertToInlineCss({
-      backgroundColor: "var(--ds-background-neutral, #0515240F)",
-      position: 'relative',
-      width: 'var(--lineNumberGutterWidth, 2rem)',
-      /* top and bottom | left and right */
-      padding: config.allowCodeFolding ? `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-250, 20px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-075, 6px)"}` : "var(--ds-space-100, 8px)",
-      flexShrink: 0,
-      fontSize: getFontSize(),
-      boxSizing: 'content-box'
-    }),
-    contenteditable: 'false'
-  }, ['div', {
-    class: 'code-block-gutter-pseudo-element',
-    style: convertToInlineCss({
-      textAlign: 'right',
-      color: "var(--ds-text-subtlest, #6B6E76)",
-      fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-      whiteSpace: 'pre-wrap'
-    }),
-    'data-label': content
-  }]], ['div', {
+  }, ...gutters, ['div', {
     class: codeBlockClassNames.content
   }, ['code', {
     'data-language': node.attrs.language || '',

package/dist/es2019/ui/theme.js

@@ -56,7 +56,14 @@ export const cmTheme = options => CodeMirror.theme({
     backgroundColor: "var(--ds-background-neutral, #0515240F)",
     border: 'none',
     padding: "var(--ds-space-0, 0px)",
-    color: "var(--ds-text-subtlest, #6B6E76)"
+    color: "var(--ds-text-subtlest, #6B6E76)",
+    ...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
+      // CodeMirror defaults this to height: 100%, which can resolve against an indefinite
+      // parent height in content-height editor and prevent flex stretching when gutter
+      // content is sparse, such as fold-only gutters.
+      height: 'unset',
+      alignSelf: 'stretch'
+    })
   },
   '.cm-lineNumbers .cm-gutterElement': {
     paddingLeft: "var(--ds-space-0, 0px)",

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -12,7 +12,7 @@ import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
 import { Compartment, Facet, EditorState as CodeMirrorState } from '@codemirror/state';
 import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import { areCodeBlockLineNumbersHidden, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
 import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
 import { blockTypeMessages, codeBlockMessages, roleDescriptionMessages } from '@atlaskit/editor-common/messages';
 import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
@@ -40,14 +40,15 @@ 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,
+    var _this = this,
+      _config$api,
       _contentFormatSharedS,
       _config$api2,
-      _this = this,
       _config$api3,
       _config$api4;
     _classCallCheck(this, CodeBlockAdvancedNodeView);
     _defineProperty(this, "lineWrappingCompartment", new Compartment());
+    _defineProperty(this, "lineNumbersCompartment", new Compartment());
     _defineProperty(this, "languageCompartment", new Compartment());
     _defineProperty(this, "readOnlyCompartment", new Compartment());
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
@@ -55,6 +56,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
+    _defineProperty(this, "lineNumbersHidden", false);
+    _defineProperty(this, "selectCodeBlockNodeAndFocus", function () {
+      _this.selectCodeBlockNode(undefined);
+      _this.view.focus();
+    });
     this.config = config;
     this.node = node;
     this.view = view;
@@ -81,10 +87,6 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     var _config$getIntl = config.getIntl(),
       formatMessage = _config$getIntl.formatMessage;
     var formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
-    var selectNode = function selectNode() {
-      _this.selectCodeBlockNode(undefined);
-      _this.view.focus();
-    };
     var isMacOS = getBrowserInfo().mac;
     this.cm = new CodeMirror({
       doc: this.node.textContent,
@@ -101,16 +103,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       // Goes before cmTheme to override styles
       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();
-            return true;
-          }
-        }
-      }),
-      // Explicitly disable "sticky" positioning on line numbers to match
-      // Renderer behaviour
+      })), syntaxHighlighting(highlightStyle), bracketMatching(), expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? this.lineNumbersCompartment.of(this.getLineNumberVisibilityExtensions(node)) : this.getLineNumberExtensions(),
+      // Explicitly disable "sticky" positioning on all gutters to match
+      // Renderer behaviour.
       gutters({
         fixed: false
       }), CodeMirror.updateListener.of(function (update) {
@@ -133,7 +128,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         'aria-label': formattedAriaLabel,
         'aria-describedby': "codesnippet-".concat(this.node.attrs.localId)
       })), config.allowCodeFolding ? [foldGutterExtension({
-        selectNode: selectNode,
+        selectNode: this.selectCodeBlockNodeAndFocus,
         getNode: function getNode() {
           return _this.node;
         }
@@ -215,6 +210,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     this.updateLanguage();
     this.updateLocalIdAttribute();
     this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
+    this.lineNumbersHidden = areCodeBlockLineNumbersHidden(node);
 
     // Restore fold state after initialization
     if (config.allowCodeFolding) {
@@ -329,6 +325,37 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         this.view.dispatch(tr);
       }
     }
+  }, {
+    key: "getLineNumberExtensions",
+    value: function getLineNumberExtensions() {
+      var _this2 = this;
+      return [lineNumbers({
+        domEventHandlers: {
+          click: function click() {
+            _this2.selectCodeBlockNodeAndFocus();
+            return true;
+          }
+        }
+      })];
+    }
+  }, {
+    key: "getLineNumberVisibilityExtensions",
+    value: function getLineNumberVisibilityExtensions(node) {
+      if (areCodeBlockLineNumbersHidden(node)) {
+        return [];
+      }
+      return this.getLineNumberExtensions();
+    }
+  }, {
+    key: "getLineNumbersEffects",
+    value: function getLineNumbersEffects(node) {
+      var lineNumbersHidden = areCodeBlockLineNumbersHidden(node);
+      if (this.lineNumbersHidden !== lineNumbersHidden) {
+        this.lineNumbersHidden = lineNumbersHidden;
+        return this.lineNumbersCompartment.reconfigure(this.getLineNumberVisibilityExtensions(node));
+      }
+      return undefined;
+    }
   }, {
     key: "getWordWrapEffects",
     value: function getWordWrapEffects(node) {
@@ -387,11 +414,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       // Updates bundled for performance (to avoid multiple-dispatches)
       var changes = getCMSelectionChanges(curText, newText);
       var wordWrapEffect = this.getWordWrapEffects(node);
+      var lineNumbersEffect = expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? this.getLineNumbersEffects(node) : undefined;
       var prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
-      if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
+      if (changes || wordWrapEffect || lineNumbersEffect || prosemirrorDecorationsEffect) {
         this.updating = true;
         this.cm.dispatch({
-          effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(function (effect) {
+          effects: [wordWrapEffect, lineNumbersEffect, prosemirrorDecorationsEffect].filter(function (effect) {
             return !!effect;
           }),
           changes: changes

package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -1,7 +1,9 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { codeBlock, codeBlockWithExtendedAttributes, codeBlockWithLocalId } from '@atlaskit/adf-schema';
+import { areCodeBlockLineNumbersHidden } from '@atlaskit/editor-common/code-block';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -17,6 +19,57 @@ var MATCH_NEWLINES = new RegExp('\n', 'gu');
 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 getGutterBaseStyle = function getGutterBaseStyle() {
+  return {
+    backgroundColor: "var(--ds-background-neutral, #0515240F)",
+    position: 'relative',
+    flexShrink: 0,
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    fontSize: getFontSize(),
+    boxSizing: 'content-box'
+  };
+};
+var getGutterPadding = function getGutterPadding(allowCodeFolding) {
+  return allowCodeFolding ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)";
+};
+var getGuttersWithLineNumbers = function getGuttersWithLineNumbers(content, config) {
+  return ['div', {
+    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+    // But we can't reuse that class as it adds a ::before that intefers with this approach
+    style: convertToInlineCss(_objectSpread(_objectSpread({}, getGutterBaseStyle()), {}, {
+      width: 'var(--lineNumberGutterWidth, 2rem)',
+      /* top and bottom | left and right */
+      padding: getGutterPadding(config.allowCodeFolding)
+    })),
+    contenteditable: 'false'
+  }, ['div', {
+    class: 'code-block-gutter-pseudo-element',
+    style: convertToInlineCss({
+      textAlign: 'right',
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
+      whiteSpace: 'pre-wrap'
+    }),
+    'data-label': content
+  }]];
+};
+var getFoldOnlyGutter = function getFoldOnlyGutter() {
+  return ['div', {
+    style: convertToInlineCss(_objectSpread(_objectSpread({}, getGutterBaseStyle()), {}, {
+      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)")
+    })),
+    contenteditable: 'false'
+  }];
+};
+var getGutters = function getGutters(content, config, hideLineNumbers) {
+  if (!hideLineNumbers) {
+    return [getGuttersWithLineNumbers(content, config)];
+  }
+  if (config.allowCodeFolding) {
+    return [getFoldOnlyGutter()];
+  }
+  return [];
+};
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
 var _toDOM = function toDOM(node, formattedAriaLabel, config) {
@@ -27,45 +80,26 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
       totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
     }
   });
+  var hideLineNumbers = areCodeBlockLineNumbersHidden(node);
   var maxDigits = totalLineCount.toString().length;
   var content = node.textContent.split('\n').map(function (_, i) {
     return i + 1;
   }).join('\n');
+  var gutters = getGutters(content, config, hideLineNumbers);
   return ['pre', _objectSpread({
     class: codeBlockClassNames.container,
     style: "--lineNumberGutterWidth:".concat(maxDigits, "ch;"),
     'data-language': node.attrs.language || ''
-  }, expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
+  }, expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && _objectSpread({
     'data-wrap': node.attrs.wrap ? 'true' : 'false'
-  }), ['div', {
+  }, hideLineNumbers && {
+    'data-hide-line-numbers': 'true'
+  })), ['div', {
     class: codeBlockClassNames.start,
     contenteditable: 'false'
   }], ['div', {
     class: codeBlockClassNames.contentWrapper
-  }, ['div', {
-    // Based on packages/editor/editor-common/src/styles/shared/code-block.ts
-    // But we can't reuse that class as it adds a ::before that intefers with this approach
-    style: convertToInlineCss({
-      backgroundColor: "var(--ds-background-neutral, #0515240F)",
-      position: 'relative',
-      width: 'var(--lineNumberGutterWidth, 2rem)',
-      /* top and bottom | left and right */
-      padding: config.allowCodeFolding ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)",
-      flexShrink: 0,
-      fontSize: getFontSize(),
-      boxSizing: 'content-box'
-    }),
-    contenteditable: 'false'
-  }, ['div', {
-    class: 'code-block-gutter-pseudo-element',
-    style: convertToInlineCss({
-      textAlign: 'right',
-      color: "var(--ds-text-subtlest, #6B6E76)",
-      fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
-      whiteSpace: 'pre-wrap'
-    }),
-    'data-label': content
-  }]], ['div', {
+  }].concat(_toConsumableArray(gutters), [['div', {
     class: codeBlockClassNames.content
   }, ['code', _objectSpread({
     'data-language': node.attrs.language || '',
@@ -74,7 +108,7 @@ var _toDOM = function toDOM(node, formattedAriaLabel, config) {
     'aria-label': formattedAriaLabel
   }, fg('platform_editor_adf_with_localid') && {
     'data-local-id': node.attrs.localId
-  }), 0]]], ['div', {
+  }), 0]]]), ['div', {
     class: codeBlockClassNames.end,
     contenteditable: 'false'
   }]];

package/dist/esm/ui/theme.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { EditorView as CodeMirror } from '@codemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -59,12 +62,18 @@ export var cmTheme = function cmTheme(options) {
     '.cm-gutter': {
       padding: "var(--ds-space-100, 8px)"
     },
-    '.cm-gutters': {
+    '.cm-gutters': _objectSpread({
       backgroundColor: "var(--ds-background-neutral, #0515240F)",
       border: 'none',
       padding: "var(--ds-space-0, 0px)",
       color: "var(--ds-text-subtlest, #6B6E76)"
-    },
+    }, expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
+      // CodeMirror defaults this to height: 100%, which can resolve against an indefinite
+      // parent height in content-height editor and prevent flex stretching when gutter
+      // content is sparse, such as fold-only gutters.
+      height: 'unset',
+      alignSelf: 'stretch'
+    }),
     '.cm-lineNumbers .cm-gutterElement': {
       paddingLeft: "var(--ds-space-0, 0px)",
       paddingRight: "var(--ds-space-0, 0px)",

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

@@ -16,6 +16,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updating;
     private view;
     private lineWrappingCompartment;
+    private lineNumbersCompartment;
     private languageCompartment;
     private readOnlyCompartment;
     private pmDecorationsCompartment;
@@ -43,6 +44,11 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateLocalIdAttribute;
     private selectCodeBlockNode;
     private wordWrappingEnabled;
+    private lineNumbersHidden;
+    private selectCodeBlockNodeAndFocus;
+    private getLineNumberExtensions;
+    private getLineNumberVisibilityExtensions;
+    private getLineNumbersEffects;
     private getWordWrapEffects;
     private restoreFoldState;
     private applyContentModeTheme;

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

@@ -16,6 +16,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updating;
     private view;
     private lineWrappingCompartment;
+    private lineNumbersCompartment;
     private languageCompartment;
     private readOnlyCompartment;
     private pmDecorationsCompartment;
@@ -43,6 +44,11 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private updateLocalIdAttribute;
     private selectCodeBlockNode;
     private wordWrappingEnabled;
+    private lineNumbersHidden;
+    private selectCodeBlockNodeAndFocus;
+    private getLineNumberExtensions;
+    private getLineNumberVisibilityExtensions;
+    private getLineNumbersEffects;
     private getWordWrapEffects;
     private restoreFoldState;
     private applyContentModeTheme;

package/docs/0-intro.tsx

@@ -20,7 +20,7 @@ ${createEditorUseOnlyNotice('Editor Plugin Code Block Advanced', [
 				<AtlassianInternalWarning />
 			</div>
 		</>
-  )}
+	)}
 
   This package includes the code block advanced plugin used by \`@atlaskit/editor-core\`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "10.1.0",
+	"version": "10.1.2",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -38,7 +38,7 @@
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-history": "^0.2.0",
-		"@atlaskit/tmp-editor-statsig": "^80.3.0",
+		"@atlaskit/tmp-editor-statsig": "^81.0.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -55,7 +55,7 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.30.0",
+		"@atlaskit/editor-common": "^114.32.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},

package/src/nodeviews/codeBlockAdvanced.ts

@@ -7,7 +7,10 @@ import type { ViewUpdate } from '@codemirror/view';
 import type { IntlShape } from 'react-intl';
 
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
+import {
+	areCodeBlockLineNumbersHidden,
+	isCodeBlockWordWrapEnabled,
+} from '@atlaskit/editor-common/code-block';
 import { messages as floatingToolbarMessages } from '@atlaskit/editor-common/floating-toolbar';
 import {
 	blockTypeMessages,
@@ -68,6 +71,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private updating: boolean;
 	private view: EditorView;
 	private lineWrappingCompartment = new Compartment();
+	private lineNumbersCompartment = new Compartment();
 	private languageCompartment = new Compartment();
 	private readOnlyCompartment = new Compartment();
 	private pmDecorationsCompartment = new Compartment();
@@ -126,11 +130,6 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		const { formatMessage } = config.getIntl();
 		const formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
 
-		const selectNode = () => {
-			this.selectCodeBlockNode(undefined);
-			this.view.focus();
-		};
-
 		const isMacOS = getBrowserInfo().mac;
 
 		this.cm = new CodeMirror({
@@ -161,16 +160,11 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				),
 				syntaxHighlighting(highlightStyle),
 				bracketMatching(),
-				lineNumbers({
-					domEventHandlers: {
-						click: () => {
-							selectNode();
-							return true;
-						},
-					},
-				}),
-				// Explicitly disable "sticky" positioning on line numbers to match
-				// Renderer behaviour
+				expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)
+					? this.lineNumbersCompartment.of(this.getLineNumberVisibilityExtensions(node))
+					: this.getLineNumberExtensions(),
+				// Explicitly disable "sticky" positioning on all gutters to match
+				// Renderer behaviour.
 				gutters({ fixed: false }),
 				CodeMirror.updateListener.of((update) => this.forwardUpdate(update)),
 				this.readOnlyCompartment.of([
@@ -207,7 +201,12 @@ class CodeBlockAdvancedNodeView implements NodeView {
 						}),
 				}),
 				config.allowCodeFolding
-					? [foldGutterExtension({ selectNode, getNode: () => this.node })]
+					? [
+							foldGutterExtension({
+								selectNode: this.selectCodeBlockNodeAndFocus,
+								getNode: () => this.node,
+							}),
+						]
 					: [],
 				// With platform_editor_fix_advanced_codeblocks_crlf_patch the lineSeparatorExtension is not needed
 				expValEquals('platform_editor_fix_advanced_codeblocks_crlf_patch', 'isEnabled', true)
@@ -293,6 +292,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updateLanguage();
 		this.updateLocalIdAttribute();
 		this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
+		this.lineNumbersHidden = areCodeBlockLineNumbersHidden(node);
 
 		// Restore fold state after initialization
 		if (config.allowCodeFolding) {
@@ -405,6 +405,44 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	}
 
 	private wordWrappingEnabled = false;
+	private lineNumbersHidden = false;
+
+	private selectCodeBlockNodeAndFocus = () => {
+		this.selectCodeBlockNode(undefined);
+		this.view.focus();
+	};
+
+	private getLineNumberExtensions(): Extension[] {
+		return [
+			lineNumbers({
+				domEventHandlers: {
+					click: () => {
+						this.selectCodeBlockNodeAndFocus();
+						return true;
+					},
+				},
+			}),
+		];
+	}
+
+	private getLineNumberVisibilityExtensions(node: PMNode): Extension[] {
+		if (areCodeBlockLineNumbersHidden(node)) {
+			return [];
+		}
+
+		return this.getLineNumberExtensions();
+	}
+
+	private getLineNumbersEffects(node: PMNode) {
+		const lineNumbersHidden = areCodeBlockLineNumbersHidden(node);
+		if (this.lineNumbersHidden !== lineNumbersHidden) {
+			this.lineNumbersHidden = lineNumbersHidden;
+			return this.lineNumbersCompartment.reconfigure(
+				this.getLineNumberVisibilityExtensions(node),
+			);
+		}
+		return undefined;
+	}
 
 	private getWordWrapEffects(node: PMNode) {
 		if (this.wordWrappingEnabled !== isCodeBlockWordWrapEnabled(node)) {
@@ -455,11 +493,18 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		// Updates bundled for performance (to avoid multiple-dispatches)
 		const changes = getCMSelectionChanges(curText, newText);
 		const wordWrapEffect = this.getWordWrapEffects(node);
+		const lineNumbersEffect = expValEquals(
+			'platform_editor_code_block_q4_lovability',
+			'isEnabled',
+			true,
+		)
+			? this.getLineNumbersEffects(node)
+			: undefined;
 		const prosemirrorDecorationsEffect = this.getProseMirrorDecorationEffects(innerDecorations);
-		if (changes || wordWrapEffect || prosemirrorDecorationsEffect) {
+		if (changes || wordWrapEffect || lineNumbersEffect || prosemirrorDecorationsEffect) {
 			this.updating = true;
 			this.cm.dispatch({
-				effects: [wordWrapEffect, prosemirrorDecorationsEffect].filter(
+				effects: [wordWrapEffect, lineNumbersEffect, prosemirrorDecorationsEffect].filter(
 					(effect): effect is StateEffect<unknown> => !!effect,
 				),
 				changes,

package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts

@@ -3,6 +3,7 @@ import {
 	codeBlockWithExtendedAttributes,
 	codeBlockWithLocalId,
 } from '@atlaskit/adf-schema';
+import { areCodeBlockLineNumbersHidden } from '@atlaskit/editor-common/code-block';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import type { NodeSpec, DOMOutputSpec, Node } from '@atlaskit/editor-prosemirror/model';
@@ -31,6 +32,75 @@ const getFontSize = () =>
 		? '0.875em'
 		: '0.875rem';
 
+const getGutterBaseStyle = () => ({
+	backgroundColor: token('color.background.neutral'),
+	position: 'relative',
+	flexShrink: 0,
+	// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+	fontSize: getFontSize(),
+	boxSizing: 'content-box',
+});
+
+const getGutterPadding = (allowCodeFolding: boolean) =>
+	allowCodeFolding
+		? `${token('space.100')} ${token('space.250')} ${token('space.100')} ${token('space.075')}`
+		: token('space.100');
+
+const getGuttersWithLineNumbers = (content: string, config: Config): DOMOutputSpec => [
+	'div',
+	{
+		// Based on packages/editor/editor-common/src/styles/shared/code-block.ts
+		// But we can't reuse that class as it adds a ::before that intefers with this approach
+		style: convertToInlineCss({
+			...getGutterBaseStyle(),
+			width: 'var(--lineNumberGutterWidth, 2rem)',
+			/* top and bottom | left and right */
+			padding: getGutterPadding(config.allowCodeFolding),
+		}),
+		contenteditable: 'false',
+	},
+	[
+		'div',
+		{
+			class: 'code-block-gutter-pseudo-element',
+			style: convertToInlineCss({
+				textAlign: 'right',
+				color: token('color.text.subtlest'),
+				fontFamily: token('font.family.code'),
+				whiteSpace: 'pre-wrap',
+			}),
+			'data-label': content,
+		},
+	],
+];
+
+const getFoldOnlyGutter = (): DOMOutputSpec => [
+	'div',
+	{
+		style: convertToInlineCss({
+			...getGutterBaseStyle(),
+			padding: `${token('space.100')} ${token('space.150')} ${token('space.100')} ${token('space.100')}`,
+		}),
+		contenteditable: 'false',
+	},
+];
+
+const getGutters = (
+	content: string,
+	config: Config,
+	hideLineNumbers: boolean,
+): DOMOutputSpec[] => {
+	if (!hideLineNumbers) {
+		return [getGuttersWithLineNumbers(content, config)];
+	}
+
+	if (config.allowCodeFolding) {
+		return [getFoldOnlyGutter()];
+	}
+
+	return [];
+};
+
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
 const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutputSpec => {
 	let totalLineCount = 1;
@@ -42,12 +112,14 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 		}
 	});
 
+	const hideLineNumbers = areCodeBlockLineNumbersHidden(node);
 	const maxDigits = totalLineCount.toString().length;
 
 	const content = node.textContent
 		.split('\n')
 		.map((_, i) => i + 1)
 		.join('\n');
+	const gutters = getGutters(content, config, hideLineNumbers);
 
 	return [
 		'pre',
@@ -57,6 +129,7 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 			'data-language': node.attrs.language || '',
 			...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
 				'data-wrap': node.attrs.wrap ? 'true' : 'false',
+				...(hideLineNumbers && { 'data-hide-line-numbers': 'true' }),
 			}),
 		},
 		['div', { class: codeBlockClassNames.start, contenteditable: 'false' }],
@@ -65,39 +138,7 @@ const toDOM = (node: Node, formattedAriaLabel: string, config: Config): DOMOutpu
 			{
 				class: codeBlockClassNames.contentWrapper,
 			},
-			[
-				'div',
-				{
-					// Based on packages/editor/editor-common/src/styles/shared/code-block.ts
-					// But we can't reuse that class as it adds a ::before that intefers with this approach
-					style: convertToInlineCss({
-						backgroundColor: token('color.background.neutral'),
-						position: 'relative',
-						width: 'var(--lineNumberGutterWidth, 2rem)',
-						/* top and bottom | left and right */
-						padding: config.allowCodeFolding
-							? `${token('space.100')} ${token('space.250')} ${token('space.100')} ${token('space.075')}`
-							: token('space.100'),
-						flexShrink: 0,
-						fontSize: getFontSize(),
-						boxSizing: 'content-box',
-					}),
-					contenteditable: 'false',
-				},
-				[
-					'div',
-					{
-						class: 'code-block-gutter-pseudo-element',
-						style: convertToInlineCss({
-							textAlign: 'right',
-							color: token('color.text.subtlest'),
-							fontFamily: token('font.family.code'),
-							whiteSpace: 'pre-wrap',
-						}),
-						'data-label': content,
-					},
-				],
-			],
+			...gutters,
 			[
 				'div',
 				{

package/src/ui/theme.ts

@@ -75,6 +75,13 @@ export const cmTheme = (options?: ThemeOptions): Extension =>
 			border: 'none',
 			padding: token('space.0'),
 			color: token('color.text.subtlest'),
+			...(expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && {
+				// CodeMirror defaults this to height: 100%, which can resolve against an indefinite
+				// parent height in content-height editor and prevent flex stretching when gutter
+				// content is sparse, such as fold-only gutters.
+				height: 'unset',
+				alignSelf: 'stretch',
+			}),
 		},
 		'.cm-lineNumbers .cm-gutterElement': {
 			paddingLeft: token('space.0'),