@atlaskit/editor-plugin-code-block-advanced 3.2.1 → 3.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 3.2.3
+
+### Patch Changes
+
+- [`0ff4a6c7a39ef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ff4a6c7a39ef) -
+  Creates global fold state to retain folds after breakouts and page resizing
+- Updated dependencies
+
+## 3.2.2
+
+### Patch Changes
+
+- [`265c1bf0cefa4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/265c1bf0cefa4) -
+  Sorted type and interface props to improve Atlaskit docs
+- Updated dependencies
+
 ## 3.2.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -2,9 +2,9 @@
 	"extends": "../../../../tsconfig.entry-points.confluence.json",
 	"compilerOptions": {
 		"target": "es5",
-		"composite": true,
 		"outDir": "../../../../../confluence/tsDist/@atlaskit__editor-plugin-code-block-advanced",
-		"rootDir": "../"
+		"rootDir": "../",
+		"composite": true
 	},
 	"include": [
 		"../src/**/*.ts",

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -106,7 +106,10 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }), (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
+        selectNode: selectNode,
+        getNode: function getNode() {
+          return _this.node;
+        }
       })] : []])
     });
 
@@ -124,6 +127,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     this.updating = false;
     this.updateLanguage();
     this.wordWrappingEnabled = (0, _codeBlock.isCodeBlockWordWrapEnabled)(node);
+
+    // Restore fold state after initialization
+    if (config.allowCodeFolding) {
+      this.restoreFoldState();
+    }
   }
   return (0, _createClass2.default)(CodeBlockAdvancedNodeView, [{
     key: "destroy",
@@ -201,6 +209,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }
       return undefined;
     }
+  }, {
+    key: "restoreFoldState",
+    value: function restoreFoldState() {
+      this.updating = true;
+      var effects = (0, _foldGutter.getCodeBlockFoldStateEffects)({
+        node: this.node,
+        cm: this.cm
+      });
+      if (effects) {
+        this.cm.dispatch({
+          effects: effects
+        });
+      }
+      this.updating = false;
+    }
   }, {
     key: "update",
     value: function update(node, _, innerDecorations) {

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

@@ -4,9 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.foldGutterExtension = foldGutterExtension;
+exports.getCodeBlockFoldStateEffects = getCodeBlockFoldStateEffects;
 var _language = require("@codemirror/language");
+var _codeBlock = require("@atlaskit/editor-common/code-block");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _model = require("@atlaskit/editor-prosemirror/model");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 // Based on platform/packages/design-system/icon/svgs/utility/add.svg
 var chevronDown = ['http://www.w3.org/2000/svg svg', {
   width: '12',
@@ -35,8 +40,24 @@ var chevronRight = ['http://www.w3.org/2000/svg svg', {
   style: 'pointer-events: none;'
 }]];
 function foldGutterExtension(_ref) {
-  var selectNode = _ref.selectNode;
+  var selectNode = _ref.selectNode,
+    getNode = _ref.getNode;
   return [(0, _language.foldGutter)({
+    foldingChanged: function foldingChanged(update) {
+      var folds = update.state.field(_language.foldState, false);
+      if (!folds) {
+        return false;
+      }
+      var foldRanges = [];
+      folds.between(0, update.state.doc.length, function (from, to) {
+        foldRanges.push({
+          from: from,
+          to: to
+        });
+      });
+      (0, _codeBlock.setCodeBlockFoldState)(getNode(), foldRanges);
+      return false;
+    },
     domEventHandlers: {
       click: function click(_view, _, event) {
         // If we're trying to click the button, don't select
@@ -97,4 +118,35 @@ function foldGutterExtension(_ref) {
       return htmlElement;
     }
   })];
+}
+function getCodeBlockFoldStateEffects(_ref2) {
+  var node = _ref2.node,
+    cm = _ref2.cm;
+  var savedFolds = (0, _codeBlock.getCodeBlockFoldState)(node);
+  if (savedFolds.length === 0) {
+    return undefined;
+  }
+
+  // Create fold effects for each saved fold range
+  var effects = [];
+  var _iterator = _createForOfIteratorHelper(savedFolds),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var foldRange = _step.value;
+      // Validate that the fold range is still valid for the current document
+      var docLength = cm.state.doc.length;
+      if (foldRange.from >= 0 && foldRange.to <= docLength && foldRange.from < foldRange.to) {
+        effects.push(_language.foldEffect.of({
+          from: foldRange.from,
+          to: foldRange.to
+        }));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return effects;
 }

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -14,7 +14,7 @@ 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 { foldGutterExtension, getCodeBlockFoldStateEffects } from './extensions/foldGutter';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -85,7 +85,8 @@ class CodeBlockAdvancedNodeView {
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
         'aria-label': formattedAriaLabel
       }), config.allowCodeFolding ? [foldGutterExtension({
-        selectNode
+        selectNode,
+        getNode: () => this.node
       })] : []]
     });
 
@@ -103,6 +104,11 @@ class CodeBlockAdvancedNodeView {
     this.updating = false;
     this.updateLanguage();
     this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
+
+    // Restore fold state after initialization
+    if (config.allowCodeFolding) {
+      this.restoreFoldState();
+    }
   }
   destroy() {
     var _this$cleanupDisabled;
@@ -166,6 +172,19 @@ class CodeBlockAdvancedNodeView {
     }
     return undefined;
   }
+  restoreFoldState() {
+    this.updating = true;
+    const effects = getCodeBlockFoldStateEffects({
+      node: this.node,
+      cm: this.cm
+    });
+    if (effects) {
+      this.cm.dispatch({
+        effects
+      });
+    }
+    this.updating = false;
+  }
   update(node, _, innerDecorations) {
     this.maybeTryingToReachNodeSelection = false;
     if (node.type !== this.node.type) {

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

@@ -1,4 +1,5 @@
-import { foldGutter, codeFolding } from '@codemirror/language';
+import { foldGutter, codeFolding, foldState, foldEffect } from '@codemirror/language';
+import { setCodeBlockFoldState, getCodeBlockFoldState } from '@atlaskit/editor-common/code-block';
 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
@@ -29,9 +30,25 @@ const chevronRight = ['http://www.w3.org/2000/svg svg', {
   style: 'pointer-events: none;'
 }]];
 export function foldGutterExtension({
-  selectNode
+  selectNode,
+  getNode
 }) {
   return [foldGutter({
+    foldingChanged: update => {
+      const folds = update.state.field(foldState, false);
+      if (!folds) {
+        return false;
+      }
+      const foldRanges = [];
+      folds.between(0, update.state.doc.length, (from, to) => {
+        foldRanges.push({
+          from,
+          to
+        });
+      });
+      setCodeBlockFoldState(getNode(), foldRanges);
+      return false;
+    },
     domEventHandlers: {
       click: (_view, _, event) => {
         // If we're trying to click the button, don't select
@@ -94,4 +111,27 @@ export function foldGutterExtension({
       return htmlElement;
     }
   })];
+}
+export function getCodeBlockFoldStateEffects({
+  node,
+  cm
+}) {
+  const savedFolds = getCodeBlockFoldState(node);
+  if (savedFolds.length === 0) {
+    return undefined;
+  }
+
+  // Create fold effects for each saved fold range
+  const effects = [];
+  for (const foldRange of savedFolds) {
+    // Validate that the fold range is still valid for the current document
+    const docLength = cm.state.doc.length;
+    if (foldRange.from >= 0 && foldRange.to <= docLength && foldRange.from < foldRange.to) {
+      effects.push(foldEffect.of({
+        from: foldRange.from,
+        to: foldRange.to
+      }));
+    }
+  }
+  return effects;
 }

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -17,7 +17,7 @@ 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 { foldGutterExtension, getCodeBlockFoldStateEffects } from './extensions/foldGutter';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -99,7 +99,10 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos), tripleClickSelectAllExtension(), firstCodeBlockInDocument(getPos), CodeMirror.contentAttributes.of({
         'aria-label': formattedAriaLabel
       }), config.allowCodeFolding ? [foldGutterExtension({
-        selectNode: selectNode
+        selectNode: selectNode,
+        getNode: function getNode() {
+          return _this.node;
+        }
       })] : []])
     });
 
@@ -117,6 +120,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     this.updating = false;
     this.updateLanguage();
     this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
+
+    // Restore fold state after initialization
+    if (config.allowCodeFolding) {
+      this.restoreFoldState();
+    }
   }
   return _createClass(CodeBlockAdvancedNodeView, [{
     key: "destroy",
@@ -194,6 +202,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       }
       return undefined;
     }
+  }, {
+    key: "restoreFoldState",
+    value: function restoreFoldState() {
+      this.updating = true;
+      var effects = getCodeBlockFoldStateEffects({
+        node: this.node,
+        cm: this.cm
+      });
+      if (effects) {
+        this.cm.dispatch({
+          effects: effects
+        });
+      }
+      this.updating = false;
+    }
   }, {
     key: "update",
     value: function update(node, _, innerDecorations) {

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

@@ -1,4 +1,8 @@
-import { foldGutter, codeFolding } from '@codemirror/language';
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { foldGutter, codeFolding, foldState, foldEffect } from '@codemirror/language';
+import { setCodeBlockFoldState, getCodeBlockFoldState } from '@atlaskit/editor-common/code-block';
 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
@@ -29,8 +33,24 @@ var chevronRight = ['http://www.w3.org/2000/svg svg', {
   style: 'pointer-events: none;'
 }]];
 export function foldGutterExtension(_ref) {
-  var selectNode = _ref.selectNode;
+  var selectNode = _ref.selectNode,
+    getNode = _ref.getNode;
   return [foldGutter({
+    foldingChanged: function foldingChanged(update) {
+      var folds = update.state.field(foldState, false);
+      if (!folds) {
+        return false;
+      }
+      var foldRanges = [];
+      folds.between(0, update.state.doc.length, function (from, to) {
+        foldRanges.push({
+          from: from,
+          to: to
+        });
+      });
+      setCodeBlockFoldState(getNode(), foldRanges);
+      return false;
+    },
     domEventHandlers: {
       click: function click(_view, _, event) {
         // If we're trying to click the button, don't select
@@ -91,4 +111,35 @@ export function foldGutterExtension(_ref) {
       return htmlElement;
     }
   })];
+}
+export function getCodeBlockFoldStateEffects(_ref2) {
+  var node = _ref2.node,
+    cm = _ref2.cm;
+  var savedFolds = getCodeBlockFoldState(node);
+  if (savedFolds.length === 0) {
+    return undefined;
+  }
+
+  // Create fold effects for each saved fold range
+  var effects = [];
+  var _iterator = _createForOfIteratorHelper(savedFolds),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var foldRange = _step.value;
+      // Validate that the fold range is still valid for the current document
+      var docLength = cm.state.doc.length;
+      if (foldRange.from >= 0 && foldRange.to <= docLength && foldRange.from < foldRange.to) {
+        effects.push(foldEffect.of({
+          from: foldRange.from,
+          to: foldRange.to
+        }));
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return effects;
 }

package/dist/types/codeBlockAdvancedPluginType.d.ts

@@ -16,6 +16,6 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
     pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;
 export type CodeBlockAdvancedPluginOptions = {
-    extensions?: Extension[];
     allowCodeFolding?: boolean;
+    extensions?: Extension[];
 };

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

@@ -6,10 +6,10 @@ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 export interface ConfigProps {
+    allowCodeFolding: boolean;
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
-    allowCodeFolding: boolean;
 }
 declare class CodeBlockAdvancedNodeView implements NodeView {
     dom: Node;
@@ -36,6 +36,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private selectCodeBlockNode;
     private wordWrappingEnabled;
     private getWordWrapEffects;
+    private restoreFoldState;
     update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
     /**
      * Updates a facet which stores information on the prosemirror decorations

package/dist/types/nodeviews/codemirrorSync/syncCMWithPM.d.ts

@@ -1,9 +1,9 @@
 import { type ViewUpdate } from '@codemirror/view';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface Props {
-    view: EditorView;
-    update: ViewUpdate;
     offset: number;
+    update: ViewUpdate;
+    view: EditorView;
 }
 /**
  *

package/dist/types/nodeviews/extensions/foldGutter.d.ts

@@ -1,3 +1,11 @@
-export declare function foldGutterExtension({ selectNode }: {
+import { type StateEffect } from '@codemirror/state';
+import type { EditorView as CodeMirror } from '@codemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare function foldGutterExtension({ selectNode, getNode, }: {
+    getNode: () => PMNode;
     selectNode: () => void;
 }): import("@codemirror/state").Extension[];
+export declare function getCodeBlockFoldStateEffects({ node, cm, }: {
+    cm: CodeMirror;
+    node: PMNode;
+}): StateEffect<unknown>[] | undefined;

package/dist/types/nodeviews/extensions/keymap/backspace.d.ts

@@ -3,10 +3,10 @@ import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface BackspaceProps {
-    view: EditorView;
     cm: CodeMirror;
-    getPos: getPosHandlerNode;
     getNode: () => PMNode;
+    getPos: getPosHandlerNode;
+    view: EditorView;
 }
 export declare const backspaceKeymap: ({ cm, view, getPos, getNode }: BackspaceProps) => boolean;
 export {};

package/dist/types/nodeviews/extensions/keymap/index.d.ts

@@ -4,12 +4,12 @@ import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface KeymapProps {
-    view: EditorView;
+    customFindReplace: boolean;
     getNode: () => PMNode;
     getPos: getPosHandlerNode;
-    selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
     onMaybeNodeSelection: () => void;
-    customFindReplace: boolean;
+    selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+    view: EditorView;
 }
 export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, customFindReplace, }: KeymapProps) => Extension;
 export {};

package/dist/types/nodeviews/extensions/keymap/maybeEscape.d.ts

@@ -4,14 +4,14 @@ import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface MaybeEscapeProps {
-    unit: 'line' | 'char';
-    dir: -1 | 1;
-    view: EditorView;
     cm: CodeMirror;
-    getPos: getPosHandlerNode;
+    dir: -1 | 1;
     getNode: () => PMNode;
+    getPos: getPosHandlerNode;
     onMaybeNodeSelection: () => void;
     selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+    unit: 'line' | 'char';
+    view: EditorView;
 }
 export declare const maybeEscapeKeymap: ({ unit, dir, view, cm, getPos, getNode, onMaybeNodeSelection, selectCodeBlockNode, }: MaybeEscapeProps) => boolean;
 export {};

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

@@ -3,10 +3,10 @@ import type { IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface Props {
+    allowCodeFolding: boolean;
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
-    allowCodeFolding: boolean;
 }
 export declare const lazyCodeBlockView: (props: Props) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 export {};

package/dist/types/pm-plugins/main.d.ts

@@ -4,10 +4,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface Props {
+    allowCodeFolding: boolean;
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
-    allowCodeFolding: boolean;
 }
 export declare const createPlugin: (props: Props) => SafePlugin<any>;
 export {};

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

@@ -16,6 +16,6 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
     pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
 }>;
 export type CodeBlockAdvancedPluginOptions = {
-    extensions?: Extension[];
     allowCodeFolding?: boolean;
+    extensions?: Extension[];
 };

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

@@ -6,10 +6,10 @@ import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 export interface ConfigProps {
+    allowCodeFolding: boolean;
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
-    allowCodeFolding: boolean;
 }
 declare class CodeBlockAdvancedNodeView implements NodeView {
     dom: Node;
@@ -36,6 +36,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private selectCodeBlockNode;
     private wordWrappingEnabled;
     private getWordWrapEffects;
+    private restoreFoldState;
     update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
     /**
      * Updates a facet which stores information on the prosemirror decorations

package/dist/types-ts4.5/nodeviews/codemirrorSync/syncCMWithPM.d.ts

@@ -1,9 +1,9 @@
 import { type ViewUpdate } from '@codemirror/view';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface Props {
-    view: EditorView;
-    update: ViewUpdate;
     offset: number;
+    update: ViewUpdate;
+    view: EditorView;
 }
 /**
  *

package/dist/types-ts4.5/nodeviews/extensions/foldGutter.d.ts

@@ -1,3 +1,11 @@
-export declare function foldGutterExtension({ selectNode }: {
+import { type StateEffect } from '@codemirror/state';
+import type { EditorView as CodeMirror } from '@codemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare function foldGutterExtension({ selectNode, getNode, }: {
+    getNode: () => PMNode;
     selectNode: () => void;
 }): import("@codemirror/state").Extension[];
+export declare function getCodeBlockFoldStateEffects({ node, cm, }: {
+    cm: CodeMirror;
+    node: PMNode;
+}): StateEffect<unknown>[] | undefined;

package/dist/types-ts4.5/nodeviews/extensions/keymap/backspace.d.ts

@@ -3,10 +3,10 @@ import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface BackspaceProps {
-    view: EditorView;
     cm: CodeMirror;
-    getPos: getPosHandlerNode;
     getNode: () => PMNode;
+    getPos: getPosHandlerNode;
+    view: EditorView;
 }
 export declare const backspaceKeymap: ({ cm, view, getPos, getNode }: BackspaceProps) => boolean;
 export {};

package/dist/types-ts4.5/nodeviews/extensions/keymap/index.d.ts

@@ -4,12 +4,12 @@ import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface KeymapProps {
-    view: EditorView;
+    customFindReplace: boolean;
     getNode: () => PMNode;
     getPos: getPosHandlerNode;
-    selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
     onMaybeNodeSelection: () => void;
-    customFindReplace: boolean;
+    selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+    view: EditorView;
 }
 export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, customFindReplace, }: KeymapProps) => Extension;
 export {};

package/dist/types-ts4.5/nodeviews/extensions/keymap/maybeEscape.d.ts

@@ -4,14 +4,14 @@ import type { getPosHandlerNode } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 interface MaybeEscapeProps {
-    unit: 'line' | 'char';
-    dir: -1 | 1;
-    view: EditorView;
     cm: CodeMirror;
-    getPos: getPosHandlerNode;
+    dir: -1 | 1;
     getNode: () => PMNode;
+    getPos: getPosHandlerNode;
     onMaybeNodeSelection: () => void;
     selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+    unit: 'line' | 'char';
+    view: EditorView;
 }
 export declare const maybeEscapeKeymap: ({ unit, dir, view, cm, getPos, getNode, onMaybeNodeSelection, selectCodeBlockNode, }: MaybeEscapeProps) => boolean;
 export {};

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

@@ -3,10 +3,10 @@ import type { IntlShape } from 'react-intl-next';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface Props {
+    allowCodeFolding: boolean;
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
-    allowCodeFolding: boolean;
 }
 export declare const lazyCodeBlockView: (props: Props) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
 export {};

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -4,10 +4,10 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 interface Props {
+    allowCodeFolding: boolean;
     api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
     extensions: Extension[];
     getIntl: () => IntlShape;
-    allowCodeFolding: boolean;
 }
 export declare const createPlugin: (props: Props) => SafePlugin<any>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "3.2.1",
+	"version": "3.2.3",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,15 +31,15 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^50.2.1",
+		"@atlaskit/adf-schema": "^50.2.2",
 		"@atlaskit/editor-plugin-code-block": "^5.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^3.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^3.2.0",
-		"@atlaskit/editor-plugin-selection": "^3.1.0",
+		"@atlaskit/editor-plugin-selection": "^3.2.0",
 		"@atlaskit/editor-plugin-selection-marker": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^11.3.0",
+		"@atlaskit/tmp-editor-statsig": "^11.6.0",
 		"@atlaskit/tokens": "^6.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": "^107.26.0",
+		"@atlaskit/editor-common": "^107.30.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {

package/src/codeBlockAdvancedPluginType.ts

@@ -22,6 +22,6 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 >;
 
 export type CodeBlockAdvancedPluginOptions = {
-	extensions?: Extension[];
 	allowCodeFolding?: boolean;
+	extensions?: Extension[];
 };

package/src/nodeviews/codeBlockAdvanced.ts

@@ -38,7 +38,7 @@ 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 { foldGutterExtension, getCodeBlockFoldStateEffects } from './extensions/foldGutter';
 import { keymapExtension } from './extensions/keymap';
 import { manageSelectionMarker } from './extensions/manageSelectionMarker';
 import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
@@ -46,10 +46,10 @@ import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension
 import { LanguageLoader } from './languages/loader';
 
 export interface ConfigProps {
+	allowCodeFolding: boolean;
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
 	getIntl: () => IntlShape;
-	allowCodeFolding: boolean;
 }
 
 // Based on: https://prosemirror.net/examples/codemirror/
@@ -146,7 +146,9 @@ class CodeBlockAdvancedNodeView implements NodeView {
 				tripleClickSelectAllExtension(),
 				firstCodeBlockInDocument(getPos),
 				CodeMirror.contentAttributes.of({ 'aria-label': formattedAriaLabel }),
-				config.allowCodeFolding ? [foldGutterExtension({ selectNode })] : [],
+				config.allowCodeFolding
+					? [foldGutterExtension({ selectNode, getNode: () => this.node })]
+					: [],
 			],
 		});
 
@@ -164,6 +166,11 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.updating = false;
 		this.updateLanguage();
 		this.wordWrappingEnabled = isCodeBlockWordWrapEnabled(node);
+
+		// Restore fold state after initialization
+		if (config.allowCodeFolding) {
+			this.restoreFoldState();
+		}
 	}
 
 	destroy() {
@@ -233,6 +240,15 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		return undefined;
 	}
 
+	private restoreFoldState() {
+		this.updating = true;
+		const effects = getCodeBlockFoldStateEffects({ node: this.node, cm: this.cm });
+		if (effects) {
+			this.cm.dispatch({ effects });
+		}
+		this.updating = false;
+	}
+
 	update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource) {
 		this.maybeTryingToReachNodeSelection = false;
 

package/src/nodeviews/codemirrorSync/syncCMWithPM.ts

@@ -4,9 +4,9 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 
 interface Props {
-	view: EditorView;
-	update: ViewUpdate;
 	offset: number;
+	update: ViewUpdate;
+	view: EditorView;
 }
 
 /**

package/src/nodeviews/extensions/foldGutter.ts

@@ -1,7 +1,14 @@
-import { foldGutter, codeFolding } from '@codemirror/language';
+import { foldGutter, codeFolding, foldState, foldEffect } from '@codemirror/language';
+import { type StateEffect } from '@codemirror/state';
+import type { EditorView as CodeMirror } from '@codemirror/view';
 
+import {
+	setCodeBlockFoldState,
+	type FoldRange,
+	getCodeBlockFoldState,
+} from '@atlaskit/editor-common/code-block';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { token } from '@atlaskit/tokens';
 
@@ -48,9 +55,29 @@ const chevronRight: DOMOutputSpec = [
 	],
 ];
 
-export function foldGutterExtension({ selectNode }: { selectNode: () => void }) {
+export function foldGutterExtension({
+	selectNode,
+	getNode,
+}: {
+	getNode: () => PMNode;
+	selectNode: () => void;
+}) {
 	return [
 		foldGutter({
+			foldingChanged: (update) => {
+				const folds = update.state.field(foldState, false);
+				if (!folds) {
+					return false;
+				}
+				const foldRanges: FoldRange[] = [];
+
+				folds.between(0, update.state.doc.length, (from, to) => {
+					foldRanges.push({ from, to });
+				});
+
+				setCodeBlockFoldState(getNode(), foldRanges);
+				return false;
+			},
 			domEventHandlers: {
 				click: (_view, _, event) => {
 					// If we're trying to click the button, don't select
@@ -126,3 +153,27 @@ export function foldGutterExtension({ selectNode }: { selectNode: () => void })
 		}),
 	];
 }
+
+export function getCodeBlockFoldStateEffects({
+	node,
+	cm,
+}: {
+	cm: CodeMirror;
+	node: PMNode;
+}): StateEffect<unknown>[] | undefined {
+	const savedFolds = getCodeBlockFoldState(node);
+	if (savedFolds.length === 0) {
+		return undefined;
+	}
+
+	// Create fold effects for each saved fold range
+	const effects = [];
+	for (const foldRange of savedFolds) {
+		// Validate that the fold range is still valid for the current document
+		const docLength = cm.state.doc.length;
+		if (foldRange.from >= 0 && foldRange.to <= docLength && foldRange.from < foldRange.to) {
+			effects.push(foldEffect.of({ from: foldRange.from, to: foldRange.to }));
+		}
+	}
+	return effects;
+}

package/src/nodeviews/extensions/keymap/backspace.ts

@@ -6,10 +6,10 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 
 interface BackspaceProps {
-	view: EditorView;
 	cm: CodeMirror;
-	getPos: getPosHandlerNode;
 	getNode: () => PMNode;
+	getPos: getPosHandlerNode;
+	view: EditorView;
 }
 
 export const backspaceKeymap = ({ cm, view, getPos, getNode }: BackspaceProps) => {

package/src/nodeviews/extensions/keymap/index.ts

@@ -16,12 +16,12 @@ import { backspaceKeymap } from './backspace';
 import { maybeEscapeKeymap } from './maybeEscape';
 
 interface KeymapProps {
-	view: EditorView;
+	customFindReplace: boolean;
 	getNode: () => PMNode;
 	getPos: getPosHandlerNode;
-	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
 	onMaybeNodeSelection: () => void;
-	customFindReplace: boolean;
+	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+	view: EditorView;
 }
 
 export const keymapExtension = ({

package/src/nodeviews/extensions/keymap/maybeEscape.ts

@@ -7,14 +7,14 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 
 interface MaybeEscapeProps {
-	unit: 'line' | 'char';
-	dir: -1 | 1;
-	view: EditorView;
 	cm: CodeMirror;
-	getPos: getPosHandlerNode;
+	dir: -1 | 1;
 	getNode: () => PMNode;
+	getPos: getPosHandlerNode;
 	onMaybeNodeSelection: () => void;
 	selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
+	unit: 'line' | 'char';
+	view: EditorView;
 }
 
 export const maybeEscapeKeymap = ({
@@ -32,7 +32,7 @@ export const maybeEscapeKeymap = ({
 	}
 	const node = getNode();
 	const { state } = cm;
-	let main: { from: number; to: number; empty: boolean; head: number } = state.selection.main;
+	let main: { empty: boolean; from: number; head: number; to: number } = state.selection.main;
 	if (!main.empty) {
 		return false;
 	}

package/src/nodeviews/extensions/prosemirrorDecorations.ts

@@ -30,12 +30,12 @@ type WidgetConstructor = ((view: EditorView, getPos: () => number | undefined) =
 // See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
 interface ExtendedProseMirrorDecoration extends Decoration {
 	inline: boolean;
-	widget: boolean;
 	type: {
 		attrs?: Record<string, string>;
-		toDOM?: WidgetConstructor;
 		side?: number;
+		toDOM?: WidgetConstructor;
 	};
+	widget: boolean;
 }
 
 // This type is not exposed publically by ProseMirror but we need it to map to CodeMirror

package/src/nodeviews/lazyCodeBlockAdvanced.ts

@@ -9,10 +9,10 @@ import type { EditorView, DecorationSource, Decoration } from '@atlaskit/editor-
 import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 
 interface Props {
+	allowCodeFolding: boolean;
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
 	getIntl: () => IntlShape;
-	allowCodeFolding: boolean;
 }
 
 export const lazyCodeBlockView = (props: Props) => {

package/src/pm-plugins/main.ts

@@ -11,10 +11,10 @@ import { lazyCodeBlockView } from '../nodeviews/lazyCodeBlockAdvanced';
 import { shiftArrowDownWorkaround, shiftArrowUpWorkaround } from './shiftArrowKeyWorkaround';
 
 interface Props {
+	allowCodeFolding: boolean;
 	api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
 	extensions: Extension[];
 	getIntl: () => IntlShape;
-	allowCodeFolding: boolean;
 }
 
 export const createPlugin = (props: Props) => {