@atlaskit/editor-plugin-code-block-advanced 3.0.7 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 3.1.0
+
+### Minor Changes
+
+- [#199487](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/199487)
+  [`9146513a60d45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9146513a60d45) -
+  Add a new experiment for code folding in the editor.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.7
 
 ### Patch Changes

package/dist/cjs/codeBlockAdvancedPlugin.js

@@ -12,20 +12,24 @@ var codeBlockAdvancedPlugin = exports.codeBlockAdvancedPlugin = function codeBlo
   return {
     name: 'codeBlockAdvanced',
     nodes: function nodes() {
+      var _config$allowCodeFold;
       return [{
         name: 'codeBlock',
-        node: (0, _codeBlockNodeWithToDOMFixed.codeBlockNodeWithFixedToDOM)()
+        node: (0, _codeBlockNodeWithToDOMFixed.codeBlockNodeWithFixedToDOM)({
+          allowCodeFolding: (_config$allowCodeFold = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold !== void 0 ? _config$allowCodeFold : false
+        })
       }];
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'codeBlockAdvancedPlugin',
         plugin: function plugin(_ref2) {
-          var _config$extensions;
+          var _config$extensions, _config$allowCodeFold2;
           var getIntl = _ref2.getIntl;
           return (0, _main.createPlugin)({
             api: api,
             extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : [],
+            allowCodeFolding: (_config$allowCodeFold2 = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold2 !== void 0 ? _config$allowCodeFold2 : false,
             getIntl: getIntl
           });
         }

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -24,6 +24,7 @@ var _theme = require("../ui/theme");
 var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
 var _updateCMSelection = require("./codemirrorSync/updateCMSelection");
 var _firstCodeBlockInDocument = require("./extensions/firstCodeBlockInDocument");
+var _foldGutter = require("./extensions/foldGutter");
 var _keymap = require("./extensions/keymap");
 var _manageSelectionMarker = require("./extensions/manageSelectionMarker");
 var _prosemirrorDecorations = require("./extensions/prosemirrorDecorations");
@@ -67,6 +68,10 @@ 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();
+    };
     this.cm = new _view.EditorView({
       doc: this.node.textContent,
       extensions: [].concat((0, _toConsumableArray2.default)(config.extensions), [this.lineWrappingCompartment.of((0, _codeBlock.isCodeBlockWordWrapEnabled)(node) ? _view.EditorView.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], function () {
@@ -78,11 +83,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection,
         customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
-      }), _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)({
+      }),
+      // Goes before cmTheme to override styles
+      config.allowCodeFolding ? [_theme.codeFoldingTheme] : [], _theme.cmTheme, (0, _language.syntaxHighlighting)(_syntaxHighlightingTheme.highlightStyle), (0, _language.bracketMatching)(), (0, _view.lineNumbers)({
         domEventHandlers: {
           click: function click() {
-            _this.selectCodeBlockNode(undefined);
-            _this.view.focus();
+            selectNode();
             return true;
           }
         }
@@ -99,7 +105,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         class: 'code-block'
       }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos), (0, _tripleClickExtension.tripleClickSelectAllExtension)(), (0, _firstCodeBlockInDocument.firstCodeBlockInDocument)(getPos), _view.EditorView.contentAttributes.of({
         'aria-label': formattedAriaLabel
-      })])
+      }), config.allowCodeFolding ? [(0, _foldGutter.foldGutterExtension)({
+        selectNode: selectNode
+      })] : []])
     });
 
     // We append an additional element that fixes a selection bug on chrome if the code block

package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -21,7 +21,7 @@ var codeBlockClassNames = {
 var MATCH_NEWLINES = new RegExp('\n', 'gu');
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-var _toDOM = function toDOM(node, formattedAriaLabel) {
+var _toDOM = function toDOM(node, formattedAriaLabel, config) {
   var totalLineCount = 1;
   node.forEach(function (node) {
     var text = node.text;
@@ -49,7 +49,8 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
       backgroundColor: "var(--ds-background-neutral, #091E420F)",
       position: 'relative',
       width: 'var(--lineNumberGutterWidth, 2rem)',
-      padding: "var(--ds-space-100, 8px)",
+      /* 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: '0.875rem',
       boxSizing: 'content-box'
@@ -76,10 +77,10 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
     contenteditable: 'false'
   }]];
 };
-var codeBlockNodeWithFixedToDOM = exports.codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM() {
+var codeBlockNodeWithFixedToDOM = exports.codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM(config) {
   return _objectSpread(_objectSpread({}, _adfSchema.codeBlock), {}, {
     toDOM: function toDOM(node) {
-      return _toDOM(node, '');
+      return _toDOM(node, '', config);
     }
   });
 };

package/dist/cjs/nodeviews/extensions/foldGutter.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.foldGutterExtension = foldGutterExtension;
+var _language = require("@codemirror/language");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _model = require("@atlaskit/editor-prosemirror/model");
+// Based on platform/packages/design-system/icon/svgs/utility/add.svg
+var chevronDown = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 16 16',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'm14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+var chevronRight = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 16 16',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'm8.28 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L12.69 8 7.22 2.53z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+function foldGutterExtension(_ref) {
+  var selectNode = _ref.selectNode;
+  return [(0, _language.foldGutter)({
+    domEventHandlers: {
+      click: function click(_view, _, event) {
+        // If we're trying to click the button, don't select
+        if (event.target instanceof HTMLButtonElement && event.target.getAttribute('data-marker-dom-element')) {
+          return false;
+        }
+        selectNode();
+        return false;
+      }
+    },
+    markerDOM: function markerDOM(open) {
+      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, chevronDown),
+        downElement = _DOMSerializer$render.dom;
+      var _DOMSerializer$render2 = _model.DOMSerializer.renderSpec(document, chevronRight),
+        rightElement = _DOMSerializer$render2.dom;
+      var htmlElement = document.createElement('button');
+      htmlElement.setAttribute('data-marker-dom-element', 'true');
+      htmlElement.setAttribute('data-testid', "code-block-fold-button-".concat(open ? 'open' : 'closed'));
+      htmlElement.setAttribute('style', (0, _lazyNodeView.convertToInlineCss)({
+        background: 'none',
+        color: 'inherit',
+        border: 'none',
+        padding: 0,
+        paddingRight: "var(--ds-space-050, 4px)",
+        font: 'inherit',
+        outline: 'inherit',
+        cursor: 'pointer'
+      }));
+      if (open) {
+        if (downElement) {
+          htmlElement.appendChild(downElement);
+        } else {
+          // Fallback - never called
+          htmlElement.textContent = '⌄';
+        }
+      } else {
+        if (rightElement) {
+          htmlElement.appendChild(rightElement);
+        } else {
+          // Fallback - never called
+          htmlElement.textContent = '>';
+        }
+      }
+      return htmlElement;
+    }
+  }), (0, _language.codeFolding)({
+    placeholderDOM: function placeholderDOM(view, onclick, prepared) {
+      var htmlElement = document.createElement('button');
+      htmlElement.setAttribute('data-marker-dom-element', 'true');
+      htmlElement.setAttribute('style', (0, _lazyNodeView.convertToInlineCss)({
+        color: 'inherit',
+        font: 'inherit',
+        cursor: 'pointer'
+      }));
+      htmlElement.textContent = '…';
+      htmlElement.className = 'cm-foldPlaceholder';
+      htmlElement.onclick = onclick;
+      return htmlElement;
+    }
+  })];
+}

package/dist/cjs/ui/theme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.cmTheme = void 0;
+exports.codeFoldingTheme = exports.cmTheme = void 0;
 var _view = require("@codemirror/view");
 var lineHeight = '1.5rem';
 var cmTheme = exports.cmTheme = _view.EditorView.theme({
@@ -74,6 +74,36 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
     minHeight: lineHeight
   }
 });
+var codeFoldingTheme = exports.codeFoldingTheme = _view.EditorView.theme({
+  '.cm-gutter': {
+    paddingLeft: "var(--ds-space-075, 6px)",
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingRight: "var(--ds-space-0, 0px)"
+  },
+  '.cm-foldGutter': {
+    paddingLeft: "var(--ds-space-050, 4px)"
+  },
+  '.cm-gutterElement:has([data-marker-dom-element="true"])': {
+    color: "var(--ds-icon-subtle, #626F86)"
+  },
+  '.cm-gutterElement:has([data-marker-dom-element="true"]):hover': {
+    color: "var(--ds-text-accent-gray-bolder, #091E42)"
+  },
+  '.cm-foldPlaceholder': {
+    // To give spacing between lines
+    height: '20px',
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+    border: 'none',
+    color: "var(--ds-text, #172B4D)",
+    outline: "1px solid ".concat("var(--ds-border-accent-gray, #758195)"),
+    paddingLeft: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-025, 2px)"
+  },
+  '.cm-foldPlaceholder:hover': {
+    backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
+  }
+});
 
 /**
  * Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`

package/dist/es2019/codeBlockAdvancedPlugin.js

@@ -6,9 +6,12 @@ export const codeBlockAdvancedPlugin = ({
 }) => ({
   name: 'codeBlockAdvanced',
   nodes() {
+    var _config$allowCodeFold;
     return [{
       name: 'codeBlock',
-      node: codeBlockNodeWithFixedToDOM()
+      node: codeBlockNodeWithFixedToDOM({
+        allowCodeFolding: (_config$allowCodeFold = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold !== void 0 ? _config$allowCodeFold : false
+      })
     }];
   },
   pmPlugins() {
@@ -17,10 +20,11 @@ export const codeBlockAdvancedPlugin = ({
       plugin: ({
         getIntl
       }) => {
-        var _config$extensions;
+        var _config$extensions, _config$allowCodeFold2;
         return createPlugin({
           api,
           extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : [],
+          allowCodeFolding: (_config$allowCodeFold2 = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold2 !== void 0 ? _config$allowCodeFold2 : false,
           getIntl
         });
       }

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -10,10 +10,11 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
-import { cmTheme } from '../ui/theme';
+import { cmTheme, codeFoldingTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
+import { foldGutterExtension } from './extensions/foldGutter';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -50,6 +51,10 @@ class CodeBlockAdvancedNodeView {
       formatMessage
     } = config.getIntl();
     const formattedAriaLabel = formatMessage(blockTypeMessages.codeblock);
+    const selectNode = () => {
+      this.selectCodeBlockNode(undefined);
+      this.view.focus();
+    };
     this.cm = new CodeMirror({
       doc: this.node.textContent,
       extensions: [...config.extensions, this.lineWrappingCompartment.of(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], () => innerDecorations)), keymapExtension({
@@ -59,11 +64,12 @@ class CodeBlockAdvancedNodeView {
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection,
         customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
-      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
+      }),
+      // Goes before cmTheme to override styles
+      config.allowCodeFolding ? [codeFoldingTheme] : [], cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
         domEventHandlers: {
           click: () => {
-            this.selectCodeBlockNode(undefined);
-            this.view.focus();
+            selectNode();
             return true;
           }
         }
@@ -78,7 +84,9 @@ class CodeBlockAdvancedNodeView {
         class: 'code-block'
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
         'aria-label': formattedAriaLabel
-      })]
+      }), config.allowCodeFolding ? [foldGutterExtension({
+        selectNode
+      })] : []]
     });
 
     // We append an additional element that fixes a selection bug on chrome if the code block

package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -11,7 +11,7 @@ const codeBlockClassNames = {
 const MATCH_NEWLINES = new RegExp('\n', 'gu');
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-const toDOM = (node, formattedAriaLabel) => {
+const toDOM = (node, formattedAriaLabel, config) => {
   let totalLineCount = 1;
   node.forEach(node => {
     const text = node.text;
@@ -37,7 +37,8 @@ const toDOM = (node, formattedAriaLabel) => {
       backgroundColor: "var(--ds-background-neutral, #091E420F)",
       position: 'relative',
       width: 'var(--lineNumberGutterWidth, 2rem)',
-      padding: "var(--ds-space-100, 8px)",
+      /* 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: '0.875rem',
       boxSizing: 'content-box'
@@ -64,9 +65,9 @@ const toDOM = (node, formattedAriaLabel) => {
     contenteditable: 'false'
   }]];
 };
-export const codeBlockNodeWithFixedToDOM = () => {
+export const codeBlockNodeWithFixedToDOM = config => {
   return {
     ...codeBlock,
-    toDOM: node => toDOM(node, '')
+    toDOM: node => toDOM(node, '', config)
   };
 };

package/dist/es2019/nodeviews/extensions/foldGutter.js

@@ -0,0 +1,97 @@
+import { foldGutter, codeFolding } from '@codemirror/language';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+// Based on platform/packages/design-system/icon/svgs/utility/add.svg
+const chevronDown = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 16 16',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'm14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+const chevronRight = ['http://www.w3.org/2000/svg svg', {
+  width: '12',
+  height: '12',
+  fill: 'none',
+  viewBox: '0 0 16 16',
+  style: 'pointer-events: none;'
+}, ['http://www.w3.org/2000/svg path', {
+  fill: 'currentcolor',
+  'fill-rule': 'evenodd',
+  d: 'm8.28 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L12.69 8 7.22 2.53z',
+  'clip-rule': 'evenodd',
+  style: 'pointer-events: none;'
+}]];
+export function foldGutterExtension({
+  selectNode
+}) {
+  return [foldGutter({
+    domEventHandlers: {
+      click: (_view, _, event) => {
+        // If we're trying to click the button, don't select
+        if (event.target instanceof HTMLButtonElement && event.target.getAttribute('data-marker-dom-element')) {
+          return false;
+        }
+        selectNode();
+        return false;
+      }
+    },
+    markerDOM: open => {
+      const {
+        dom: downElement
+      } = DOMSerializer.renderSpec(document, chevronDown);
+      const {
+        dom: rightElement
+      } = DOMSerializer.renderSpec(document, chevronRight);
+      const htmlElement = document.createElement('button');
+      htmlElement.setAttribute('data-marker-dom-element', 'true');
+      htmlElement.setAttribute('data-testid', `code-block-fold-button-${open ? 'open' : 'closed'}`);
+      htmlElement.setAttribute('style', convertToInlineCss({
+        background: 'none',
+        color: 'inherit',
+        border: 'none',
+        padding: 0,
+        paddingRight: "var(--ds-space-050, 4px)",
+        font: 'inherit',
+        outline: 'inherit',
+        cursor: 'pointer'
+      }));
+      if (open) {
+        if (downElement) {
+          htmlElement.appendChild(downElement);
+        } else {
+          // Fallback - never called
+          htmlElement.textContent = '⌄';
+        }
+      } else {
+        if (rightElement) {
+          htmlElement.appendChild(rightElement);
+        } else {
+          // Fallback - never called
+          htmlElement.textContent = '>';
+        }
+      }
+      return htmlElement;
+    }
+  }), codeFolding({
+    placeholderDOM(view, onclick, prepared) {
+      const htmlElement = document.createElement('button');
+      htmlElement.setAttribute('data-marker-dom-element', 'true');
+      htmlElement.setAttribute('style', convertToInlineCss({
+        color: 'inherit',
+        font: 'inherit',
+        cursor: 'pointer'
+      }));
+      htmlElement.textContent = '…';
+      htmlElement.className = 'cm-foldPlaceholder';
+      htmlElement.onclick = onclick;
+      return htmlElement;
+    }
+  })];
+}

package/dist/es2019/ui/theme.js

@@ -68,6 +68,36 @@ export const cmTheme = CodeMirror.theme({
     minHeight: lineHeight
   }
 });
+export const codeFoldingTheme = CodeMirror.theme({
+  '.cm-gutter': {
+    paddingLeft: "var(--ds-space-075, 6px)",
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingRight: "var(--ds-space-0, 0px)"
+  },
+  '.cm-foldGutter': {
+    paddingLeft: "var(--ds-space-050, 4px)"
+  },
+  '.cm-gutterElement:has([data-marker-dom-element="true"])': {
+    color: "var(--ds-icon-subtle, #626F86)"
+  },
+  '.cm-gutterElement:has([data-marker-dom-element="true"]):hover': {
+    color: "var(--ds-text-accent-gray-bolder, #091E42)"
+  },
+  '.cm-foldPlaceholder': {
+    // To give spacing between lines
+    height: '20px',
+    backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+    border: 'none',
+    color: "var(--ds-text, #172B4D)",
+    outline: `1px solid ${"var(--ds-border-accent-gray, #758195)"}`,
+    paddingLeft: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-025, 2px)"
+  },
+  '.cm-foldPlaceholder:hover': {
+    backgroundColor: "var(--ds-background-accent-gray-subtlest-hovered, #DCDFE4)"
+  }
+});
 
 /**
  * Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`

package/dist/esm/codeBlockAdvancedPlugin.js

@@ -6,20 +6,24 @@ export var codeBlockAdvancedPlugin = function codeBlockAdvancedPlugin(_ref) {
   return {
     name: 'codeBlockAdvanced',
     nodes: function nodes() {
+      var _config$allowCodeFold;
       return [{
         name: 'codeBlock',
-        node: codeBlockNodeWithFixedToDOM()
+        node: codeBlockNodeWithFixedToDOM({
+          allowCodeFolding: (_config$allowCodeFold = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold !== void 0 ? _config$allowCodeFold : false
+        })
       }];
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'codeBlockAdvancedPlugin',
         plugin: function plugin(_ref2) {
-          var _config$extensions;
+          var _config$extensions, _config$allowCodeFold2;
           var getIntl = _ref2.getIntl;
           return createPlugin({
             api: api,
             extensions: (_config$extensions = config === null || config === void 0 ? void 0 : config.extensions) !== null && _config$extensions !== void 0 ? _config$extensions : [],
+            allowCodeFolding: (_config$allowCodeFold2 = config === null || config === void 0 ? void 0 : config.allowCodeFolding) !== null && _config$allowCodeFold2 !== void 0 ? _config$allowCodeFold2 : false,
             getIntl: getIntl
           });
         }

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -13,10 +13,11 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
-import { cmTheme } from '../ui/theme';
+import { cmTheme, codeFoldingTheme } from '../ui/theme';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
+import { foldGutterExtension } from './extensions/foldGutter';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -60,6 +61,10 @@ 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();
+    };
     this.cm = new CodeMirror({
       doc: this.node.textContent,
       extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of(isCodeBlockWordWrapEnabled(node) ? CodeMirror.lineWrapping : []), this.languageCompartment.of([]), this.pmDecorationsCompartment.of(this.pmFacet.compute([], function () {
@@ -71,11 +76,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
         onMaybeNodeSelection: onMaybeNodeSelection,
         customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
-      }), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
+      }),
+      // Goes before cmTheme to override styles
+      config.allowCodeFolding ? [codeFoldingTheme] : [], cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
         domEventHandlers: {
           click: function click() {
-            _this.selectCodeBlockNode(undefined);
-            _this.view.focus();
+            selectNode();
             return true;
           }
         }
@@ -92,7 +98,9 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         class: 'code-block'
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
         'aria-label': formattedAriaLabel
-      })])
+      }), config.allowCodeFolding ? [foldGutterExtension({
+        selectNode: selectNode
+      })] : []])
     });
 
     // We append an additional element that fixes a selection bug on chrome if the code block

package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

@@ -14,7 +14,7 @@ var codeBlockClassNames = {
 var MATCH_NEWLINES = new RegExp('\n', 'gu');
 
 // Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
-var _toDOM = function toDOM(node, formattedAriaLabel) {
+var _toDOM = function toDOM(node, formattedAriaLabel, config) {
   var totalLineCount = 1;
   node.forEach(function (node) {
     var text = node.text;
@@ -42,7 +42,8 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
       backgroundColor: "var(--ds-background-neutral, #091E420F)",
       position: 'relative',
       width: 'var(--lineNumberGutterWidth, 2rem)',
-      padding: "var(--ds-space-100, 8px)",
+      /* 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: '0.875rem',
       boxSizing: 'content-box'
@@ -69,10 +70,10 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
     contenteditable: 'false'
   }]];
 };
-export var codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM() {
+export var codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM(config) {
   return _objectSpread(_objectSpread({}, codeBlock), {}, {
     toDOM: function toDOM(node) {
-      return _toDOM(node, '');
+      return _toDOM(node, '', config);
     }
   });
 };