@atlaskit/editor-plugin-code-block-advanced 12.0.5 → 12.0.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-code-block-advanced
 
+## 12.0.7
+
+### Patch Changes
+
+- [`bf04628c00609`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf04628c00609) -
+  Add code folding usage analytics
+- Updated dependencies
+
+## 12.0.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.5
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -28,6 +28,9 @@
 		{
 			"path": "../../../design-system/code/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-code-block/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -28,6 +28,9 @@
 		{
 			"path": "../../../design-system/code/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-plugin-analytics/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-code-block/afm-products/tsconfig.json"
 		},

package/dist/cjs/nodeviews/analytics.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCodeFoldingAnalyticsPayload = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var getCodeFoldingAnalyticsPayload = exports.getCodeFoldingAnalyticsPayload = function getCodeFoldingAnalyticsPayload(folded, trigger) {
+  return {
+    action: _analytics.ACTION.TOGGLE_CODE_FOLDING,
+    actionSubject: _analytics.ACTION_SUBJECT.CODE_BLOCK,
+    attributes: {
+      folded: folded,
+      trigger: trigger
+    },
+    eventType: _analytics.EVENT_TYPE.TRACK
+  };
+};

package/dist/cjs/nodeviews/codeBlockAdvanced.js

@@ -26,6 +26,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
 var _theme = require("../ui/theme");
+var _analytics = require("./analytics");
 var _syncCMWithPM = require("./codemirrorSync/syncCMWithPM");
 var _updateCMSelection = require("./codemirrorSync/updateCMSelection");
 var _firstCodeBlockInDocument = require("./extensions/firstCodeBlockInDocument");
@@ -61,6 +62,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "pmDecorationsCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "themeCompartment", new _state.Compartment());
     (0, _defineProperty2.default)(this, "maybeTryingToReachNodeSelection", false);
+    (0, _defineProperty2.default)(this, "mouseDownInBorderArea", false);
     (0, _defineProperty2.default)(this, "mouseDownInsideCodeMirror", false);
     (0, _defineProperty2.default)(this, "pmFacet", _state.Facet.define());
     (0, _defineProperty2.default)(this, "wordWrappingEnabled", false);
@@ -69,22 +71,39 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       _this.selectCodeBlockNode(undefined);
       _this.view.focus();
     });
+    (0, _defineProperty2.default)(this, "fireCodeFoldingAnalytics", function (folded, trigger) {
+      var _this$config$api;
+      if (!(0, _platformFeatureFlags.fg)('platform_editor_code_block_folding_analytics')) {
+        return;
+      }
+      (_this$config$api = _this.config.api) === null || _this$config$api === void 0 || (_this$config$api = _this$config$api.analytics) === null || _this$config$api === void 0 || _this$config$api.actions.fireAnalyticsEvent((0, _analytics.getCodeFoldingAnalyticsPayload)(folded, trigger));
+    });
     (0, _defineProperty2.default)(this, "handleBorderAreaMouseDown", function (event) {
       var isBorderArea = _this.isBorderAreaClick(event);
-      // Later click can follow a drag; remember where the interaction began.
-      _this.mouseDownInsideCodeMirror = !isBorderArea;
+      if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+        _this.mouseDownInBorderArea = isBorderArea;
+      } else {
+        // Later click can follow a drag; remember where the interaction began.
+        _this.mouseDownInsideCodeMirror = !isBorderArea;
+      }
       if (isBorderArea && event.target === _this.cm.scrollDOM) {
         // Stop CodeMirror from restoring stale inner selection before node selection.
         event.preventDefault();
       }
     });
     (0, _defineProperty2.default)(this, "handleBorderAreaClick", function (event) {
-      // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
-      if (_this.mouseDownInsideCodeMirror && _this.hasCodeMirrorTextSelection() || !_this.isBorderAreaClick(event)) {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_code_block_dogfooding_patch')) {
+        if (!_this.mouseDownInBorderArea) {
+          return;
+        }
+      } else {
+        // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+        if (_this.mouseDownInsideCodeMirror && _this.hasCodeMirrorTextSelection() || !_this.isBorderAreaClick(event)) {
+          _this.mouseDownInsideCodeMirror = false;
+          return;
+        }
         _this.mouseDownInsideCodeMirror = false;
-        return;
       }
-      _this.mouseDownInsideCodeMirror = false;
 
       // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
       // back to ProseMirror
@@ -163,7 +182,8 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         selectNode: this.selectCodeBlockNodeAndFocus,
         getNode: function getNode() {
           return _this.node;
-        }
+        },
+        onFoldToggled: this.fireCodeFoldingAnalytics
       })] : [],
       // With platform_editor_fix_advanced_codeblocks_crlf_patch the lineSeparatorExtension is not needed
       (0, _expValEquals.expValEquals)('platform_editor_fix_advanced_codeblocks_crlf_patch', 'isEnabled', true) ? [] : [(0, _lineSeparator.lineSeparatorExtension)()]])

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

@@ -40,7 +40,8 @@ var chevronRight = ['http://www.w3.org/2000/svg svg', {
   style: 'pointer-events: none;'
 }]];
 function foldGutterExtension(_ref) {
-  var selectNode = _ref.selectNode,
+  var onFoldToggled = _ref.onFoldToggled,
+    selectNode = _ref.selectNode,
     getNode = _ref.getNode;
   return [(0, _language.foldGutter)({
     foldingChanged: function foldingChanged(update) {
@@ -102,6 +103,11 @@ function foldGutterExtension(_ref) {
           htmlElement.textContent = '>';
         }
       }
+
+      // CodeMirror passes whether the range is currently open; after click, that becomes folded.
+      htmlElement.onclick = function () {
+        return onFoldToggled === null || onFoldToggled === void 0 ? void 0 : onFoldToggled(open, 'gutter');
+      };
       return htmlElement;
     }
   }), (0, _language.codeFolding)({
@@ -116,7 +122,10 @@ function foldGutterExtension(_ref) {
       }));
       htmlElement.textContent = '…';
       htmlElement.className = 'cm-foldPlaceholder';
-      htmlElement.onclick = onclick;
+      htmlElement.onclick = function (event) {
+        onFoldToggled === null || onFoldToggled === void 0 || onFoldToggled(false, 'placeholder');
+        onclick(event);
+      };
       return htmlElement;
     }
   })];

package/dist/es2019/nodeviews/analytics.js

@@ -0,0 +1,10 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export const getCodeFoldingAnalyticsPayload = (folded, trigger) => ({
+  action: ACTION.TOGGLE_CODE_FOLDING,
+  actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+  attributes: {
+    folded,
+    trigger
+  },
+  eventType: EVENT_TYPE.TRACK
+});

package/dist/es2019/nodeviews/codeBlockAdvanced.js

@@ -16,6 +16,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme, codeFoldingTheme } from '../ui/theme';
+import { getCodeFoldingAnalyticsPayload } from './analytics';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
@@ -41,6 +42,7 @@ class CodeBlockAdvancedNodeView {
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
     _defineProperty(this, "themeCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "mouseDownInBorderArea", false);
     _defineProperty(this, "mouseDownInsideCodeMirror", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
@@ -49,22 +51,39 @@ class CodeBlockAdvancedNodeView {
       this.selectCodeBlockNode(undefined);
       this.view.focus();
     });
+    _defineProperty(this, "fireCodeFoldingAnalytics", (folded, trigger) => {
+      var _this$config$api, _this$config$api$anal;
+      if (!fg('platform_editor_code_block_folding_analytics')) {
+        return;
+      }
+      (_this$config$api = this.config.api) === null || _this$config$api === void 0 ? void 0 : (_this$config$api$anal = _this$config$api.analytics) === null || _this$config$api$anal === void 0 ? void 0 : _this$config$api$anal.actions.fireAnalyticsEvent(getCodeFoldingAnalyticsPayload(folded, trigger));
+    });
     _defineProperty(this, "handleBorderAreaMouseDown", event => {
       const isBorderArea = this.isBorderAreaClick(event);
-      // Later click can follow a drag; remember where the interaction began.
-      this.mouseDownInsideCodeMirror = !isBorderArea;
+      if (fg('platform_editor_code_block_dogfooding_patch')) {
+        this.mouseDownInBorderArea = isBorderArea;
+      } else {
+        // Later click can follow a drag; remember where the interaction began.
+        this.mouseDownInsideCodeMirror = !isBorderArea;
+      }
       if (isBorderArea && event.target === this.cm.scrollDOM) {
         // Stop CodeMirror from restoring stale inner selection before node selection.
         event.preventDefault();
       }
     });
     _defineProperty(this, "handleBorderAreaClick", event => {
-      // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
-      if (this.mouseDownInsideCodeMirror && this.hasCodeMirrorTextSelection() || !this.isBorderAreaClick(event)) {
+      if (fg('platform_editor_code_block_dogfooding_patch')) {
+        if (!this.mouseDownInBorderArea) {
+          return;
+        }
+      } else {
+        // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+        if (this.mouseDownInsideCodeMirror && this.hasCodeMirrorTextSelection() || !this.isBorderAreaClick(event)) {
+          this.mouseDownInsideCodeMirror = false;
+          return;
+        }
         this.mouseDownInsideCodeMirror = false;
-        return;
       }
-      this.mouseDownInsideCodeMirror = false;
 
       // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
       // back to ProseMirror
@@ -139,7 +158,8 @@ class CodeBlockAdvancedNodeView {
         })
       }), config.allowCodeFolding ? [foldGutterExtension({
         selectNode: this.selectCodeBlockNodeAndFocus,
-        getNode: () => this.node
+        getNode: () => this.node,
+        onFoldToggled: this.fireCodeFoldingAnalytics
       })] : [],
       // With platform_editor_fix_advanced_codeblocks_crlf_patch the lineSeparatorExtension is not needed
       expValEquals('platform_editor_fix_advanced_codeblocks_crlf_patch', 'isEnabled', true) ? [] : [lineSeparatorExtension()]]

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

@@ -30,6 +30,7 @@ const chevronRight = ['http://www.w3.org/2000/svg svg', {
   style: 'pointer-events: none;'
 }]];
 export function foldGutterExtension({
+  onFoldToggled,
   selectNode,
   getNode
 }) {
@@ -95,6 +96,9 @@ export function foldGutterExtension({
           htmlElement.textContent = '>';
         }
       }
+
+      // CodeMirror passes whether the range is currently open; after click, that becomes folded.
+      htmlElement.onclick = () => onFoldToggled === null || onFoldToggled === void 0 ? void 0 : onFoldToggled(open, 'gutter');
       return htmlElement;
     }
   }), codeFolding({
@@ -109,7 +113,10 @@ export function foldGutterExtension({
       }));
       htmlElement.textContent = '…';
       htmlElement.className = 'cm-foldPlaceholder';
-      htmlElement.onclick = onclick;
+      htmlElement.onclick = event => {
+        onFoldToggled === null || onFoldToggled === void 0 ? void 0 : onFoldToggled(false, 'placeholder');
+        onclick(event);
+      };
       return htmlElement;
     }
   })];

package/dist/esm/nodeviews/analytics.js

@@ -0,0 +1,12 @@
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+export var getCodeFoldingAnalyticsPayload = function getCodeFoldingAnalyticsPayload(folded, trigger) {
+  return {
+    action: ACTION.TOGGLE_CODE_FOLDING,
+    actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+    attributes: {
+      folded: folded,
+      trigger: trigger
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};

package/dist/esm/nodeviews/codeBlockAdvanced.js

@@ -24,6 +24,7 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme, codeFoldingTheme } from '../ui/theme';
+import { getCodeFoldingAnalyticsPayload } from './analytics';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
@@ -55,6 +56,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
     _defineProperty(this, "pmDecorationsCompartment", new Compartment());
     _defineProperty(this, "themeCompartment", new Compartment());
     _defineProperty(this, "maybeTryingToReachNodeSelection", false);
+    _defineProperty(this, "mouseDownInBorderArea", false);
     _defineProperty(this, "mouseDownInsideCodeMirror", false);
     _defineProperty(this, "pmFacet", Facet.define());
     _defineProperty(this, "wordWrappingEnabled", false);
@@ -63,22 +65,39 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
       _this.selectCodeBlockNode(undefined);
       _this.view.focus();
     });
+    _defineProperty(this, "fireCodeFoldingAnalytics", function (folded, trigger) {
+      var _this$config$api;
+      if (!fg('platform_editor_code_block_folding_analytics')) {
+        return;
+      }
+      (_this$config$api = _this.config.api) === null || _this$config$api === void 0 || (_this$config$api = _this$config$api.analytics) === null || _this$config$api === void 0 || _this$config$api.actions.fireAnalyticsEvent(getCodeFoldingAnalyticsPayload(folded, trigger));
+    });
     _defineProperty(this, "handleBorderAreaMouseDown", function (event) {
       var isBorderArea = _this.isBorderAreaClick(event);
-      // Later click can follow a drag; remember where the interaction began.
-      _this.mouseDownInsideCodeMirror = !isBorderArea;
+      if (fg('platform_editor_code_block_dogfooding_patch')) {
+        _this.mouseDownInBorderArea = isBorderArea;
+      } else {
+        // Later click can follow a drag; remember where the interaction began.
+        _this.mouseDownInsideCodeMirror = !isBorderArea;
+      }
       if (isBorderArea && event.target === _this.cm.scrollDOM) {
         // Stop CodeMirror from restoring stale inner selection before node selection.
         event.preventDefault();
       }
     });
     _defineProperty(this, "handleBorderAreaClick", function (event) {
-      // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
-      if (_this.mouseDownInsideCodeMirror && _this.hasCodeMirrorTextSelection() || !_this.isBorderAreaClick(event)) {
+      if (fg('platform_editor_code_block_dogfooding_patch')) {
+        if (!_this.mouseDownInBorderArea) {
+          return;
+        }
+      } else {
+        // Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+        if (_this.mouseDownInsideCodeMirror && _this.hasCodeMirrorTextSelection() || !_this.isBorderAreaClick(event)) {
+          _this.mouseDownInsideCodeMirror = false;
+          return;
+        }
         _this.mouseDownInsideCodeMirror = false;
-        return;
       }
-      _this.mouseDownInsideCodeMirror = false;
 
       // Prevent CodeMirror from restoring its inner selection after we hand focus and selection
       // back to ProseMirror
@@ -157,7 +176,8 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
         selectNode: this.selectCodeBlockNodeAndFocus,
         getNode: function getNode() {
           return _this.node;
-        }
+        },
+        onFoldToggled: this.fireCodeFoldingAnalytics
       })] : [],
       // With platform_editor_fix_advanced_codeblocks_crlf_patch the lineSeparatorExtension is not needed
       expValEquals('platform_editor_fix_advanced_codeblocks_crlf_patch', 'isEnabled', true) ? [] : [lineSeparatorExtension()]])

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

@@ -33,7 +33,8 @@ var chevronRight = ['http://www.w3.org/2000/svg svg', {
   style: 'pointer-events: none;'
 }]];
 export function foldGutterExtension(_ref) {
-  var selectNode = _ref.selectNode,
+  var onFoldToggled = _ref.onFoldToggled,
+    selectNode = _ref.selectNode,
     getNode = _ref.getNode;
   return [foldGutter({
     foldingChanged: function foldingChanged(update) {
@@ -95,6 +96,11 @@ export function foldGutterExtension(_ref) {
           htmlElement.textContent = '>';
         }
       }
+
+      // CodeMirror passes whether the range is currently open; after click, that becomes folded.
+      htmlElement.onclick = function () {
+        return onFoldToggled === null || onFoldToggled === void 0 ? void 0 : onFoldToggled(open, 'gutter');
+      };
       return htmlElement;
     }
   }), codeFolding({
@@ -109,7 +115,10 @@ export function foldGutterExtension(_ref) {
       }));
       htmlElement.textContent = '…';
       htmlElement.className = 'cm-foldPlaceholder';
-      htmlElement.onclick = onclick;
+      htmlElement.onclick = function (event) {
+        onFoldToggled === null || onFoldToggled === void 0 || onFoldToggled(false, 'placeholder');
+        onclick(event);
+      };
       return htmlElement;
     }
   })];

package/dist/types/codeBlockAdvancedPluginType.d.ts

@@ -1,5 +1,6 @@
 import type { Extension } from '@codemirror/state';
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -9,6 +10,7 @@ import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-ma
 export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
     dependencies: [
         OptionalPlugin<CodeBlockPlugin>,
+        OptionalPlugin<AnalyticsPlugin>,
         SelectionPlugin,
         OptionalPlugin<EditorDisabledPlugin>,
         OptionalPlugin<SelectionMarkerPlugin>,

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

@@ -0,0 +1,3 @@
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+export type CodeFoldingTrigger = 'gutter' | 'placeholder';
+export declare const getCodeFoldingAnalyticsPayload: (folded: boolean, trigger: CodeFoldingTrigger) => AnalyticsEventPayload;

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

@@ -27,6 +27,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private contentMode;
     private selectionAPI;
     private maybeTryingToReachNodeSelection;
+    private mouseDownInBorderArea;
     private mouseDownInsideCodeMirror;
     private cleanupDisabledState;
     private languageLoader;
@@ -49,6 +50,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
     private wordWrappingEnabled;
     private lineNumbersHidden;
     private selectCodeBlockNodeAndFocus;
+    private fireCodeFoldingAnalytics;
     private getLineNumberExtensions;
     private getLineNumberVisibilityExtensions;
     private getLineNumbersEffects;

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

@@ -1,8 +1,10 @@
 import type { Extension, 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, }: {
+import type { CodeFoldingTrigger } from '../analytics';
+export declare function foldGutterExtension({ onFoldToggled, selectNode, getNode, }: {
     getNode: () => PMNode;
+    onFoldToggled?: (folded: boolean, trigger: CodeFoldingTrigger) => void;
     selectNode: () => void;
 }): Extension[];
 export declare function getCodeBlockFoldStateEffects({ node, cm, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-code-block-advanced",
-	"version": "12.0.5",
+	"version": "12.0.7",
 	"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,6 +22,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^56.0.0",
 		"@atlaskit/code": "^18.0.0",
+		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"@atlaskit/editor-plugin-code-block": "^14.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^12.0.0",
 		"@atlaskit/editor-plugin-find-replace": "^12.0.0",
@@ -30,7 +31,7 @@
 		"@atlaskit/editor-prosemirror": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
 		"@atlaskit/prosemirror-history": "^1.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.3.0",
+		"@atlaskit/tmp-editor-statsig": "^109.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@codemirror/autocomplete": "6.18.4",
@@ -48,7 +49,7 @@
 		"codemirror-lang-elixir": "4.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.4.0",
+		"@atlaskit/editor-common": "^116.7.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
@@ -94,6 +95,12 @@
 		},
 		"platform_editor_content_mode_button_mvp": {
 			"type": "boolean"
+		},
+		"platform_editor_code_block_folding_analytics": {
+			"type": "boolean"
+		},
+		"platform_editor_code_block_dogfooding_patch": {
+			"type": "boolean"
 		}
 	},
 	"devDependencies": {

package/src/codeBlockAdvancedPluginType.ts

@@ -1,6 +1,7 @@
 import type { Extension } from '@codemirror/state';
 
 import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
 import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
 import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
@@ -13,6 +14,7 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<
 	{
 		dependencies: [
 			OptionalPlugin<CodeBlockPlugin>,
+			OptionalPlugin<AnalyticsPlugin>,
 			SelectionPlugin,
 			OptionalPlugin<EditorDisabledPlugin>,
 			OptionalPlugin<SelectionMarkerPlugin>,

package/src/nodeviews/analytics.ts

@@ -0,0 +1,17 @@
+import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+
+export type CodeFoldingTrigger = 'gutter' | 'placeholder';
+
+export const getCodeFoldingAnalyticsPayload = (
+	folded: boolean,
+	trigger: CodeFoldingTrigger,
+): AnalyticsEventPayload => ({
+	action: ACTION.TOGGLE_CODE_FOLDING,
+	actionSubject: ACTION_SUBJECT.CODE_BLOCK,
+	attributes: {
+		folded,
+		trigger,
+	},
+	eventType: EVENT_TYPE.TRACK,
+});

package/src/nodeviews/codeBlockAdvanced.ts

@@ -44,6 +44,7 @@ import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
 import { highlightStyle } from '../ui/syntaxHighlightingTheme';
 import { cmTheme, codeFoldingTheme } from '../ui/theme';
 
+import { getCodeFoldingAnalyticsPayload, type CodeFoldingTrigger } from './analytics';
 import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
 import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
 import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
@@ -83,6 +84,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	private contentMode: EditorContentMode | undefined;
 	private selectionAPI: EditorSelectionAPI | undefined;
 	private maybeTryingToReachNodeSelection = false;
+	private mouseDownInBorderArea = false;
 	private mouseDownInsideCodeMirror = false;
 	private cleanupDisabledState: (() => void) | undefined;
 	private languageLoader: LanguageLoader;
@@ -209,6 +211,7 @@ class CodeBlockAdvancedNodeView implements NodeView {
 							foldGutterExtension({
 								selectNode: this.selectCodeBlockNodeAndFocus,
 								getNode: () => this.node,
+								onFoldToggled: this.fireCodeFoldingAnalytics,
 							}),
 						]
 					: [],
@@ -429,6 +432,16 @@ class CodeBlockAdvancedNodeView implements NodeView {
 		this.view.focus();
 	};
 
+	private fireCodeFoldingAnalytics = (folded: boolean, trigger: CodeFoldingTrigger) => {
+		if (!fg('platform_editor_code_block_folding_analytics')) {
+			return;
+		}
+
+		this.config.api?.analytics?.actions.fireAnalyticsEvent(
+			getCodeFoldingAnalyticsPayload(folded, trigger),
+		);
+	};
+
 	private getLineNumberExtensions(): Extension[] {
 		return [
 			lineNumbers({
@@ -552,8 +565,13 @@ class CodeBlockAdvancedNodeView implements NodeView {
 
 	private handleBorderAreaMouseDown = (event: MouseEvent) => {
 		const isBorderArea = this.isBorderAreaClick(event);
-		// Later click can follow a drag; remember where the interaction began.
-		this.mouseDownInsideCodeMirror = !isBorderArea;
+
+		if (fg('platform_editor_code_block_dogfooding_patch')) {
+			this.mouseDownInBorderArea = isBorderArea;
+		} else {
+			// Later click can follow a drag; remember where the interaction began.
+			this.mouseDownInsideCodeMirror = !isBorderArea;
+		}
 
 		if (isBorderArea && event.target === this.cm.scrollDOM) {
 			// Stop CodeMirror from restoring stale inner selection before node selection.
@@ -562,15 +580,21 @@ class CodeBlockAdvancedNodeView implements NodeView {
 	};
 
 	private handleBorderAreaClick = (event: MouseEvent) => {
-		// Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
-		if (
-			(this.mouseDownInsideCodeMirror && this.hasCodeMirrorTextSelection()) ||
-			!this.isBorderAreaClick(event)
-		) {
+		if (fg('platform_editor_code_block_dogfooding_patch')) {
+			if (!this.mouseDownInBorderArea) {
+				return;
+			}
+		} else {
+			// Dragging across lines leaves a CodeMirror selection; keep it instead of selecting the node.
+			if (
+				(this.mouseDownInsideCodeMirror && this.hasCodeMirrorTextSelection()) ||
+				!this.isBorderAreaClick(event)
+			) {
+				this.mouseDownInsideCodeMirror = false;
+				return;
+			}
 			this.mouseDownInsideCodeMirror = false;
-			return;
 		}
-		this.mouseDownInsideCodeMirror = false;
 
 		// Prevent CodeMirror from restoring its inner selection after we hand focus and selection
 		// back to ProseMirror

package/src/nodeviews/extensions/foldGutter.ts

@@ -9,6 +9,8 @@ import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { token } from '@atlaskit/tokens';
 
+import type { CodeFoldingTrigger } from '../analytics';
+
 // Based on platform/packages/design-system/icon/svgs/utility/add.svg
 const chevronDown: DOMOutputSpec = [
 	'http://www.w3.org/2000/svg svg',
@@ -53,10 +55,12 @@ const chevronRight: DOMOutputSpec = [
 ];
 
 export function foldGutterExtension({
+	onFoldToggled,
 	selectNode,
 	getNode,
 }: {
 	getNode: () => PMNode;
+	onFoldToggled?: (folded: boolean, trigger: CodeFoldingTrigger) => void;
 	selectNode: () => void;
 }): Extension[] {
 	return [
@@ -128,6 +132,9 @@ export function foldGutterExtension({
 					}
 				}
 
+				// CodeMirror passes whether the range is currently open; after click, that becomes folded.
+				htmlElement.onclick = () => onFoldToggled?.(open, 'gutter');
+
 				return htmlElement;
 			},
 		}),
@@ -146,7 +153,10 @@ export function foldGutterExtension({
 				);
 				htmlElement.textContent = '…';
 				htmlElement.className = 'cm-foldPlaceholder';
-				htmlElement.onclick = onclick;
+				htmlElement.onclick = (event) => {
+					onFoldToggled?.(false, 'placeholder');
+					onclick(event);
+				};
 				return htmlElement;
 			},
 		}),

package/tsconfig.app.json

@@ -42,6 +42,9 @@
 		{
 			"path": "../editor-common/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-analytics/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-code-block/tsconfig.app.json"
 		},