@atlaskit/editor-common 116.21.1 → 116.22.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-common
 
+## 116.22.0
+
+### Minor Changes
+
+- [`bbf34983a5daf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bbf34983a5daf) -
+  Add an opt-in `--ak-editor-extension-block-spacing` CSS custom property hook that controls the
+  vertical margin between editor block elements (paragraphs, lists, panels, code blocks,
+  blockquotes, smart cards and extension wrappers).
+
+  `@atlaskit/editor-common` declares and exports `EXTENSION_BLOCK_SPACING_VAR` from the
+  `@atlaskit/editor-common/extensibility` entry point. When the new
+  `platform_editor_extension_block_spacing` editor experiment is enabled, the block-margin rules in
+  `@atlaskit/editor-core` (both the Compiled and Emotion `EditorContentContainer` paths) and the
+  extension wrappers in `editor-common` read from this variable, falling back to their original
+  values (e.g. `var(--ak-editor-extension-block-spacing, 0.75rem)`).
+
+  The change is gated behind the experiment so it can be disabled centrally and its SSR/layout
+  performance impact tracked. When the experiment is off — the default for every consumer — the
+  original margin values are used and there is no visual change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 116.21.1
 
 ### Patch Changes

package/dist/cjs/extensibility/Extension/styles.js

@@ -3,11 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperDefault = exports.styledImage = exports.placeholderFallbackParams = exports.placeholderFallback = exports.overlay = void 0;
+exports.wrapperDefault = exports.styledImage = exports.placeholderFallbackParams = exports.placeholderFallback = exports.overlay = exports.EXTENSION_BLOCK_SPACING_VAR = void 0;
 var _react = require("@emotion/react");
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+/**
+ * CSS custom property that controls the vertical margin between editor block elements
+ *
+ * Consumers can opt in to custom block spacing by setting this property on any ancestor of the
+ * editor content (typically `:root` or the editor wrapper). When the property is unset, every block
+ * margin rule falls back to its original token/value, so this is a no-op for all existing consumers.
+ *
+ * The editor only emits the `var(...)` block-margin rules when the
+ * `platform_editor_extension_block_spacing` editor experiment is enabled, so the hook can be
+ * disabled centrally and its SSR/layout performance impact can be tracked. Setting this property
+ * has no effect while the experiment is off.
+ */
+var EXTENSION_BLOCK_SPACING_VAR = exports.EXTENSION_BLOCK_SPACING_VAR = '--ak-editor-extension-block-spacing';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var wrapperDefault = exports.wrapperDefault = (0, _react.css)({
   background: "var(--ds-background-neutral, #0515240F)",

package/dist/cjs/extensibility/index.js

@@ -4,6 +4,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "EXTENSION_BLOCK_SPACING_VAR", {
+  enumerable: true,
+  get: function get() {
+    return _styles.EXTENSION_BLOCK_SPACING_VAR;
+  }
+});
 Object.defineProperty(exports, "Extension", {
   enumerable: true,
   get: function get() {
@@ -38,4 +44,5 @@ var _ExtensionNodeWrapper = require("./ExtensionNodeWrapper");
 var _Extension = require("./Extension");
 var _extensionNodeView = _interopRequireWildcard(require("./extensionNodeView"));
 var _ExtensionComponent = require("./ExtensionComponent");
+var _styles = require("./Extension/styles");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }

package/dist/cjs/monitoring/error.js

@@ -28,7 +28,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "116.21.0";
+var packageVersion = "116.21.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "116.21.0";
+var packageVersion = "116.21.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = (0, _react2.keyframes)({

package/dist/cjs/ui/MultiBodiedExtension/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.sharedMultiBodiedExtensionStyles = exports.removeMarginsAndBorder = void 0;
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
 /**
  * @jsxRuntime classic
@@ -96,6 +97,39 @@ var extensionFrameContent = (0, _react.css)({
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
   }
 });
+
+// Block spacing hook variant of extensionFrameContent. Identical to extensionFrameContent except
+// the extension content margins read from the `--ak-editor-extension-block-spacing` CSS custom
+// property (falling back to the original token values). Selected only when
+// expValEquals('platform_editor_extension_block_spacing') is enabled.
+var extensionFrameContentWithBlockSpacing = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  display: 'block !important',
+  minHeight: '100px',
+  background: 'transparent',
+  borderBottomLeftRadius: "var(--ds-radius-small, 3px)",
+  borderBottomRightRadius: "var(--ds-radius-small, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.pm-table-with-controls': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.bodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    marginTop: "var(--ak-editor-extension-block-spacing, ".concat("var(--ds-space-150, 12px)", ") !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    marginTop: "var(--ak-editor-extension-block-spacing, ".concat("var(--ds-space-100, 8px)", ") !important")
+  }
+});
 var extensionFrameContentOld = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: "var(--ds-space-100, 8px)".concat(" !important"),
@@ -139,6 +173,12 @@ var sharedMultiBodiedExtensionStyles = exports.sharedMultiBodiedExtensionStyles
   mbeExtensionContainer: mbeExtensionContainer,
   mbeNavigation: mbeNavigation,
   get extensionFrameContent() {
-    return (0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension') ? extensionFrameContent : extensionFrameContentOld;
+    if (!(0, _platformFeatureFlags.fg)('confluence_frontend_native_tabs_extension')) {
+      return extensionFrameContentOld;
+    }
+    // Block spacing hook — when the experiment is on, use the variant whose extension content
+    // margins read from --ak-editor-extension-block-spacing (falling back to the originals).
+    // expValEquals always fires an exposure event.
+    return (0, _expValEquals.expValEquals)('platform_editor_extension_block_spacing', 'isEnabled', true) ? extensionFrameContentWithBlockSpacing : extensionFrameContent;
   }
 };

package/dist/es2019/extensibility/Extension/styles.js

@@ -1,6 +1,20 @@
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+/**
+ * CSS custom property that controls the vertical margin between editor block elements
+ *
+ * Consumers can opt in to custom block spacing by setting this property on any ancestor of the
+ * editor content (typically `:root` or the editor wrapper). When the property is unset, every block
+ * margin rule falls back to its original token/value, so this is a no-op for all existing consumers.
+ *
+ * The editor only emits the `var(...)` block-margin rules when the
+ * `platform_editor_extension_block_spacing` editor experiment is enabled, so the hook can be
+ * disabled centrally and its SSR/layout performance impact can be tracked. Setting this property
+ * has no effect while the experiment is off.
+ */
+export const EXTENSION_BLOCK_SPACING_VAR = '--ak-editor-extension-block-spacing';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperDefault = css({
   background: "var(--ds-background-neutral, #0515240F)",

package/dist/es2019/extensibility/index.js

@@ -4,4 +4,5 @@
 export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 export { Extension } from './Extension';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
-export { ExtensionComponent } from './ExtensionComponent';
+export { ExtensionComponent } from './ExtensionComponent';
+export { EXTENSION_BLOCK_SPACING_VAR } from './Extension/styles';

package/dist/es2019/monitoring/error.js

@@ -14,7 +14,7 @@ const NETWORK_FAILURE_REGEX = /^network failure/i;
 const RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "116.21.0";
+const packageVersion = "116.21.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/ui/DropList/index.js

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "116.21.0";
+const packageVersion = "116.21.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 const fadeIn = keyframes({

package/dist/es2019/ui/MultiBodiedExtension/index.js

@@ -7,6 +7,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // Wraps the navigation bar and extensionFrames
 const mbeExtensionContainer = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -89,6 +90,39 @@ const extensionFrameContent = css({
     marginTop: `${"var(--ds-space-100, 8px)"} !important`
   }
 });
+
+// Block spacing hook variant of extensionFrameContent. Identical to extensionFrameContent except
+// the extension content margins read from the `--ak-editor-extension-block-spacing` CSS custom
+// property (falling back to the original token values). Selected only when
+// expValEquals('platform_editor_extension_block_spacing') is enabled.
+const extensionFrameContentWithBlockSpacing = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  display: 'block !important',
+  minHeight: '100px',
+  background: 'transparent',
+  borderBottomLeftRadius: "var(--ds-radius-small, 3px)",
+  borderBottomRightRadius: "var(--ds-radius-small, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.pm-table-with-controls': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: `${"var(--ds-space-150, 12px)"} !important`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingRight: `${"var(--ds-space-150, 12px)"} !important`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.bodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    marginTop: `var(--ak-editor-extension-block-spacing, ${"var(--ds-space-150, 12px)"}) !important`
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    marginTop: `var(--ak-editor-extension-block-spacing, ${"var(--ds-space-100, 8px)"}) !important`
+  }
+});
 const extensionFrameContentOld = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: `${"var(--ds-space-100, 8px)"} !important`,
@@ -132,6 +166,12 @@ export const sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer,
   mbeNavigation,
   get extensionFrameContent() {
-    return fg('confluence_frontend_native_tabs_extension') ? extensionFrameContent : extensionFrameContentOld;
+    if (!fg('confluence_frontend_native_tabs_extension')) {
+      return extensionFrameContentOld;
+    }
+    // Block spacing hook — when the experiment is on, use the variant whose extension content
+    // margins read from --ak-editor-extension-block-spacing (falling back to the originals).
+    // expValEquals always fires an exposure event.
+    return expValEquals('platform_editor_extension_block_spacing', 'isEnabled', true) ? extensionFrameContentWithBlockSpacing : extensionFrameContent;
   }
 };

package/dist/esm/extensibility/Extension/styles.js

@@ -1,6 +1,20 @@
 /* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+/**
+ * CSS custom property that controls the vertical margin between editor block elements
+ *
+ * Consumers can opt in to custom block spacing by setting this property on any ancestor of the
+ * editor content (typically `:root` or the editor wrapper). When the property is unset, every block
+ * margin rule falls back to its original token/value, so this is a no-op for all existing consumers.
+ *
+ * The editor only emits the `var(...)` block-margin rules when the
+ * `platform_editor_extension_block_spacing` editor experiment is enabled, so the hook can be
+ * disabled centrally and its SSR/layout performance impact can be tracked. Setting this property
+ * has no effect while the experiment is off.
+ */
+export var EXTENSION_BLOCK_SPACING_VAR = '--ak-editor-extension-block-spacing';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var wrapperDefault = css({
   background: "var(--ds-background-neutral, #0515240F)",

package/dist/esm/extensibility/index.js

@@ -4,4 +4,5 @@
 export { ExtensionNodeWrapper } from './ExtensionNodeWrapper';
 export { Extension } from './Extension';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
-export { ExtensionComponent } from './ExtensionComponent';
+export { ExtensionComponent } from './ExtensionComponent';
+export { EXTENSION_BLOCK_SPACING_VAR } from './Extension/styles';

package/dist/esm/monitoring/error.js

@@ -20,7 +20,7 @@ var NETWORK_FAILURE_REGEX = /^network failure/i;
 var RESIZE_OBSERVER_LOOP_REGEX = /ResizeObserver loop completed with undelivered notifications/;
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "116.21.0";
+var packageVersion = "116.21.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/esm/ui/DropList/index.js

@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "116.21.0";
+var packageVersion = "116.21.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var fadeIn = keyframes({

package/dist/esm/ui/MultiBodiedExtension/index.js

@@ -7,6 +7,7 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 // Wraps the navigation bar and extensionFrames
 var mbeExtensionContainer = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
@@ -89,6 +90,39 @@ var extensionFrameContent = css({
     marginTop: "var(--ds-space-100, 8px)".concat(" !important")
   }
 });
+
+// Block spacing hook variant of extensionFrameContent. Identical to extensionFrameContent except
+// the extension content margins read from the `--ak-editor-extension-block-spacing` CSS custom
+// property (falling back to the original token values). Selected only when
+// expValEquals('platform_editor_extension_block_spacing') is enabled.
+var extensionFrameContentWithBlockSpacing = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+  display: 'block !important',
+  minHeight: '100px',
+  background: 'transparent',
+  borderBottomLeftRadius: "var(--ds-radius-small, 3px)",
+  borderBottomRightRadius: "var(--ds-radius-small, 3px)",
+  marginLeft: "var(--ds-space-100, 8px)",
+  marginRight: "var(--ds-space-100, 8px)",
+  cursor: 'initial',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.pm-table-with-controls': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    marginLeft: "var(--ds-space-150, 12px)".concat(" !important"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
+    paddingRight: "var(--ds-space-150, 12px)".concat(" !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.bodiedExtensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    marginTop: "var(--ak-editor-extension-block-spacing, ".concat("var(--ds-space-150, 12px)", ") !important")
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '.extensionView-content-wrap': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    marginTop: "var(--ak-editor-extension-block-spacing, ".concat("var(--ds-space-100, 8px)", ") !important")
+  }
+});
 var extensionFrameContentOld = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   padding: "var(--ds-space-100, 8px)".concat(" !important"),
@@ -132,6 +166,12 @@ export var sharedMultiBodiedExtensionStyles = {
   mbeExtensionContainer: mbeExtensionContainer,
   mbeNavigation: mbeNavigation,
   get extensionFrameContent() {
-    return fg('confluence_frontend_native_tabs_extension') ? extensionFrameContent : extensionFrameContentOld;
+    if (!fg('confluence_frontend_native_tabs_extension')) {
+      return extensionFrameContentOld;
+    }
+    // Block spacing hook — when the experiment is on, use the variant whose extension content
+    // margins read from --ak-editor-extension-block-spacing (falling back to the originals).
+    // expValEquals always fires an exposure event.
+    return expValEquals('platform_editor_extension_block_spacing', 'isEnabled', true) ? extensionFrameContentWithBlockSpacing : extensionFrameContent;
   }
 };

package/dist/types/extensibility/Extension/styles.d.ts

@@ -1,4 +1,17 @@
 import type { SerializedStyles } from '@emotion/react';
+/**
+ * CSS custom property that controls the vertical margin between editor block elements
+ *
+ * Consumers can opt in to custom block spacing by setting this property on any ancestor of the
+ * editor content (typically `:root` or the editor wrapper). When the property is unset, every block
+ * margin rule falls back to its original token/value, so this is a no-op for all existing consumers.
+ *
+ * The editor only emits the `var(...)` block-margin rules when the
+ * `platform_editor_extension_block_spacing` editor experiment is enabled, so the hook can be
+ * disabled centrally and its SSR/layout performance impact can be tracked. Setting this property
+ * has no effect while the experiment is off.
+ */
+export declare const EXTENSION_BLOCK_SPACING_VAR = "--ak-editor-extension-block-spacing";
 export declare const wrapperDefault: SerializedStyles;
 export declare const overlay: SerializedStyles;
 export declare const placeholderFallback: SerializedStyles;

package/dist/types/extensibility/index.d.ts

@@ -3,3 +3,4 @@ export { Extension } from './Extension';
 export { default as ExtensionNodeView, ExtensionNode } from './extensionNodeView';
 export { ExtensionComponent } from './ExtensionComponent';
 export type { MacroInteractionDesignFeatureFlags, GetPMNodeHeight } from './types';
+export { EXTENSION_BLOCK_SPACING_VAR } from './Extension/styles';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "116.21.1",
+	"version": "116.22.0",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
 		"@atlaskit/afm-i18n-platform-editor-editor-common": "2.168.0",
 		"@atlaskit/analytics-listeners": "^11.1.0",
 		"@atlaskit/analytics-namespaced-context": "^8.1.0",
-		"@atlaskit/analytics-next": "^12.1.0",
+		"@atlaskit/analytics-next": "^12.2.0",
 		"@atlaskit/atlassian-context": "^1.0.0",
 		"@atlaskit/browser-apis": "^1.1.0",
 		"@atlaskit/button": "^24.3.0",
@@ -54,8 +54,8 @@
 		"@atlaskit/link": "^4.1.0",
 		"@atlaskit/link-datasource": "^6.1.0",
 		"@atlaskit/link-picker": "^6.2.0",
-		"@atlaskit/media-card": "^81.2.0",
-		"@atlaskit/media-client": "^37.1.0",
+		"@atlaskit/media-card": "^81.3.0",
+		"@atlaskit/media-client": "^37.2.0",
 		"@atlaskit/media-client-react": "^6.1.0",
 		"@atlaskit/media-common": "^14.2.0",
 		"@atlaskit/media-file-preview": "^1.1.0",
@@ -74,14 +74,14 @@
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-ufo": "^7.3.0",
 		"@atlaskit/section-message": "^9.2.0",
-		"@atlaskit/smart-card": "^45.6.0",
+		"@atlaskit/smart-card": "^45.7.0",
 		"@atlaskit/smart-user-picker": "^11.0.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/task-decision": "^21.4.0",
 		"@atlaskit/teams-app-config": "^2.1.0",
 		"@atlaskit/textfield": "^9.1.0",
-		"@atlaskit/tmp-editor-statsig": "^120.1.0",
-		"@atlaskit/tokens": "^15.3.0",
+		"@atlaskit/tmp-editor-statsig": "^120.2.0",
+		"@atlaskit/tokens": "^15.4.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/width-detector": "^6.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -123,7 +123,7 @@
 		"@atlaskit/media-core": "^38.0.0",
 		"@atlassian/a11y-jest-testing": "^0.13.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/testing-library": "^0.7.0",
+		"@atlassian/testing-library": "^0.8.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^16.3.0",